/* ==========================================================================
   nexaya — v5 homepage
   Vibe: "The Firm Crossing" — a bridge you can trust, drawn like a civil
   engineering blueprint and written up like a serious dossier.
   Palette, type, and logo are locked to Nexaya Brand Guidelines v2.
   nexayaDynamics (the venture studio) carries its own orange accent.
   ========================================================================== */

/* ---- tokens ------------------------------------------------------------ */
:root {
  --green: #63b349;
  --green-rgb: 99, 179, 73;
  --green-dark: #437a32;
  --green-dark-rgb: 67, 122, 50;
  --green-deeper: #2f5824;
  --cream: #f6f7f7;
  --ink: #111111;
  --ink-rgb: 17, 17, 17;
  --paper: #ffffff;

  --dynamics-orange: #ed6b1e;
  --dynamics-orange-dark: #c8560f;

  --line: rgba(17, 17, 17, 0.12);
  --line-on-dark: rgba(255, 255, 255, 0.18);

  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Poppins", "Helvetica Neue", Arial, sans-serif;

  --container: 1280px;
  --gutter: clamp(20px, 5vw, 64px);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --radius: 18px;      /* cards, panels, tables */
  --radius-sm: 12px;   /* small media, inner elements */
  --radius-pill: 999px;
}

/* ---- reset --------------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
svg { display: block; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* grid/flex items default to min-width:auto, which refuses to shrink below
   content's natural width and silently overflows the track on narrow
   viewports — reset it everywhere we lay out with grid or flex. */
.hero-grid > *, .compliance-wrap > *, .offer > *, .practices > *,
.reasons > *, .footer-cols > *, .footer-offices > *, .footer-top > *, .insights-box > *,
.mega-grid > *, .dynamics-banner > *, .section-head-media > *, .tier-grid > *,
.about-hero > *, .team-grid > *, .principle-list > *, .office-grid > * {
  min-width: 0;
}
body { overflow-x: hidden; }

/* nexaya is always lowercase, everywhere */
.wordmark, .nav a, .btn, h1, h2, h3, .eyebrow, .footer-strap { text-transform: none; }

/* ---- type ---------------------------------------------------------------*/
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 200;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); font-weight: 200; }
h2 { font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 250; }
h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.4rem); }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.6; color: rgba(17,17,17,0.72); font-weight: 300; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--green-dark);
  font-weight: 500;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--green);
}

/* breadcrumb eyebrows (e.g. "Services · Cybersecurity · Penetration testing")
   — same look as any other eyebrow, ancestor segments just become clickable
   and every segment (links + current page) is bold. */
.eyebrow.breadcrumb a,
.eyebrow.breadcrumb .current {
  font-weight: 700;
}
.eyebrow.breadcrumb a {
  color: inherit;
  transition: opacity 0.2s ease;
}
.eyebrow.breadcrumb a:hover {
  opacity: 0.7;
}

.coord {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: rgba(17,17,17,0.45);
}
.on-dark .coord { color: rgba(255,255,255,0.5); }

/* ---- buttons ------------------------------------------------------------*/
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.95em 1.7em;
  border-radius: var(--radius-pill);
  transition: transform 0.35s var(--ease), background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--green-dark); transform: translateY(-2px); }
.btn-outline { border: 1px solid rgba(17,17,17,0.28); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); background: rgba(17,17,17,0.04); transform: translateY(-2px); }
.btn-ghost-light { color: var(--paper); border: 1px solid rgba(255,255,255,0.4); }
.btn-ghost-light:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); }
.btn-alert {
  background: var(--ink);
  color: var(--paper);
  padding: 0.65em 1.15em;
  font-size: 0.82rem;
  gap: 0.55em;
  white-space: nowrap;
}
.btn-alert:hover { background: #000; }
/* over the transparent/hero header state, invert to a white pill (matching
   the white nav text) — same idea as .brand-logo-light, flips back to the
   normal ink pill once .scrolled kicks in. Scoped to the header only, not
   the mobile drawer's copy of this button, which always sits on cream. */
.site-header .header-actions .btn-alert { background: var(--paper); color: var(--ink); }
.site-header .header-actions .btn-alert:hover { background: var(--cream); }
.site-header.scrolled .header-actions .btn-alert { background: var(--ink); color: var(--paper); }
.site-header.scrolled .header-actions .btn-alert:hover { background: #000; }
.btn-alert .pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); position: relative; flex: none; }
.btn-alert .pulse-dot::after {
  content: "";
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--green);
  animation: pulse-ring 2.2s var(--ease) infinite;
}
@keyframes pulse-ring {
  0% { transform: scale(0.5); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}
.btn-arrow { margin-left: 0.2em; transition: transform 0.3s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* =====================  HEADER / NAV  ===================================*/
/* Default state sits transparently over the hero, light text. Once the
   content scrolling over the hero reaches the header, .scrolled flips it
   to the familiar opaque light bar with dark text. Toggled in JS by
   measuring where .scroll-cover actually is, not a fixed scroll distance —
   works whether or not the desktop pin effect is active. */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.site-header.scrolled {
  background: rgba(246, 247, 247, 0.88);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-bottom-color: var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.brand { display: inline-flex; align-items: center; }
.brand img { height: 24px; width: auto; }
.brand .brand-logo-dark { display: none; }
.site-header.scrolled .brand-logo-light { display: none; }
.site-header.scrolled .brand-logo-dark { display: block; }

.nav { display: flex; align-items: center; gap: 2.1rem; }
.nav > li { position: relative; }
.nav a.nav-link, .nav button.nav-link {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.94);
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.4em 0;
  position: relative;
  transition: color 0.3s ease;
}
.site-header.scrolled .nav a.nav-link, .site-header.scrolled .nav button.nav-link { color: var(--ink); }
.nav a.nav-link::after, .nav button.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 1.5px;
  background: var(--green);
  transition: right 0.3s var(--ease);
}
.site-header.scrolled .nav a.nav-link::after, .site-header.scrolled .nav button.nav-link::after { background: var(--green-dark); }
.nav a.nav-link:hover::after, .nav li.open button.nav-link::after { right: 0; }
.nav .caret { width: 9px; height: 9px; transition: transform 0.3s var(--ease); opacity: 0.7; }
.nav li.open .caret { transform: rotate(180deg); }
.nav .ext-icon { width: 11px; height: 11px; opacity: 0.65; }

.header-actions { display: flex; align-items: center; gap: 1.1rem; }
.menu-toggle { display: none; }

/* ---- mega menu -----------------------------------------------------------*/
.mega {
  position: fixed;
  top: 84px;
  left: 50%;
  width: min(1180px, calc(100vw - 32px));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -24px rgba(17,17,17,0.28);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
  z-index: 90;
}
li.open .mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mega .container { max-width: none; padding: 0; }
.mega-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr) 1.2fr;
  gap: 0;
  padding: 2.4rem 0 2.4rem;
}
.mega-col { padding: 0 2.2rem; border-left: 1px solid var(--line); }
.mega-col:first-child { border-left: none; }
.mega-col h4 {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--green-dark);
  font-weight: 500;
  margin-bottom: 1.1rem;
  display: flex; align-items: baseline; gap: 0.5em;
}
.mega-col h4 .num { color: rgba(17,17,17,0.3); }
.mega-col ul li { margin-bottom: 0.15rem; }
.mega-col ul a {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  font-size: 0.94rem;
  padding: 0.55em 0;
  border-bottom: 1px solid transparent;
  transition: padding-left 0.25s var(--ease), color 0.25s ease;
}
.mega-col ul a .dash { color: var(--green); font-family: "IBM Plex Mono", monospace; font-size: 0.85em; flex: none; }
.mega-col ul a:hover { padding-left: 0.4em; color: var(--green-dark); }
.mega-featured {
  background: var(--green-dark);
  color: var(--paper);
  padding: 1.8rem 1.5rem;
  margin: 0 1.2rem;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  overflow: hidden;
}
.mega-featured::before {
  content: "";
  position: absolute; inset: 0;
  background: url("../images/plexus-white.png") center/cover no-repeat;
  opacity: 0.14;
}
.mega-featured > * { position: relative; }
.mega-featured .eyebrow { color: var(--cream); white-space: nowrap; }
.mega-featured .eyebrow::before { background: var(--cream); }
.mega-featured p { font-size: 0.92rem; color: rgba(255,255,255,0.82); }
.mega-featured .btn { align-self: flex-start; }

/* =====================  HERO  ============================================*/
/* The hero pins in place (position:sticky) while the rest of the page —
   starting at the colour stripe + trust strip — scrolls up over it,
   covering it as it goes. Desktop + no-reduced-motion only; see the media
   query at the bottom. */
.hero-wrap { position: relative; }
.hero {
  position: relative;
  color: var(--paper);
  padding-top: 176px;
  padding-bottom: 96px;
  overflow: hidden;
  background: #0e1510;
}
.hero-parallax {
  position: absolute;
  inset: 0;
  background-image: url("../images/hero-bg.jpg");
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
}
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(11,17,13,0.90) 0%, rgba(11,17,13,0.60) 48%, rgba(20,40,25,0.30) 100%),
    linear-gradient(to bottom, rgba(11,17,13,0.55), rgba(11,17,13,0.15) 40%, rgba(11,17,13,0.55));
  pointer-events: none;
}
.scroll-cover { position: relative; background: var(--cream); }
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero .eyebrow { color: var(--cream); margin-bottom: 1.6rem; }
.hero .eyebrow::before { background: var(--green); }
.hero h1 { color: var(--paper); margin-bottom: 1.5rem; }
.hero h1 .accent { color: var(--green); font-weight: 600; }
.hero .lede { color: rgba(255,255,255,0.82); max-width: 46ch; margin-bottom: 2.2rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center; }
.hero-ctas .link-under {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.4);
  padding-bottom: 2px;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.hero-ctas .link-under:hover { border-color: #fff; color: #fff; }

/* hero request-a-pentest form panel (frosted glass over the photo bg) */
.hero-form-panel {
  position: relative;
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.5);
}
.hero-form-panel h3 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.3rem, 2vw, 1.6rem); margin: 0.9rem 0 0.6rem; }
.hero-form-panel h3:first-child { margin-top: 0; }
.hero-form-panel .form-note { font-size: 0.85rem; color: rgba(255,255,255,0.72); margin-bottom: 1.3rem; }
.hero-form { display: grid; gap: 0.65rem; }
.hero-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
.hero-form input {
  width: 100%;
  padding: 0.85em 1em;
  font: inherit;
  font-size: 0.9rem;
  color: var(--paper);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.hero-form input::placeholder { color: rgba(255,255,255,0.5); }
.hero-form input:focus { outline: none; border-color: var(--green); background: rgba(255,255,255,0.13); }
.hero-form button { width: 100%; justify-content: center; margin-top: 0.2rem; }
.hero-form .fineprint { font-size: 0.74rem; color: rgba(255,255,255,0.52); margin: 0.2rem 0 0; }
.hero-form-success { display: none; }
.hero-form-panel.sent .hero-form { display: none; }
.hero-form-panel.sent .hero-form-success { display: block; }
.hero-form-success h4 {
  font-family: var(--font-display); font-weight: 400; font-size: 1.15rem;
  display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.5rem;
}
.hero-form-success h4 svg { width: 20px; height: 20px; color: var(--green); flex: none; }
.hero-form-success p { color: rgba(255,255,255,0.75); font-size: 0.9rem; }

/* trust strip */
.trust-strip {
  background: var(--green-deeper);
}
.trust-strip .container { display: flex; align-items: center; flex-wrap: wrap; gap: 0.9rem 0; padding-top: 1.1rem; padding-bottom: 1.1rem; }
.trust-strip .trust-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.55);
  margin-right: 1.6rem;
  flex: none;
}
.trust-marks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.9rem; }
.trust-marks span {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
}

/* =====================  SECTION SCAFFOLDING  =============================*/
.section { padding: clamp(4.5rem, 9vw, 8rem) 0; position: relative; }
.section-head { max-width: 760px; margin-bottom: clamp(2.6rem, 5vw, 4rem); }
.section-head h2 { margin-top: 1rem; margin-bottom: 1.1rem; }
.section-light { background: var(--cream); }
.section-paper { background: var(--paper); }
.section-dark { background: var(--ink); color: var(--paper); }
.section-green { background: var(--green-dark); color: var(--paper); }

/* .eyebrow defaults to green-dark text, which disappears on a section-green
   (also green-dark) background — same fix covers section-dark for safety. */
.section-green .eyebrow, .section-dark .eyebrow { color: var(--cream); }
.section-green .eyebrow::before, .section-dark .eyebrow::before { background: var(--green); }

.ruled-top { border-top: 1px solid var(--line); }
.section-dark .ruled-top, .section-green .ruled-top { border-top-color: var(--line-on-dark); }

/* brand colour-block separator (assets/nexaya-strip.png) */
.strip-sep {
  display: block;
  height: 6px;
  border: 0;
  margin: 0;
  background: url("../images/strip.png") left center / 100% 100% no-repeat;
}

/* reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-stagger.in > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* =====================  WHAT WE DO  =======================================*/
.practices {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.practice { background: var(--paper); padding: clamp(1.6rem, 3vw, 2rem); display: flex; flex-direction: column; }
.practice-media {
  margin: calc(-1 * clamp(1.6rem, 3vw, 2rem));
  margin-bottom: clamp(1.6rem, 3vw, 2rem);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--green-deeper);
}
.practice-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.practice:hover .practice-media img { transform: scale(1.04); }
.practice-tag { font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; letter-spacing: 0.1em; color: var(--green-dark); margin-bottom: 1.2rem; }
.practice h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 300; font-family: var(--font-display); margin-bottom: 0.9rem; }
.practice > p { color: rgba(17,17,17,0.68); font-size: 0.98rem; margin-bottom: 1.6rem; }
.practice-list { border-top: 1px solid var(--line); margin-bottom: 1.8rem; }
.practice-list li a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.94rem;
  font-weight: 500;
  transition: gap 0.25s ease, color 0.25s ease;
}
.practice-list li a:hover { color: var(--green-dark); }
.practice-list li a .arrow { opacity: 0.4; transition: transform 0.25s var(--ease), opacity 0.25s ease; }
.practice-list li a:hover .arrow { transform: translateX(3px); opacity: 1; }
.practice .btn { align-self: flex-start; margin-top: auto; }

/* nexayaDynamics banner — its own venture, its own orange accent */
.dynamics-banner {
  margin-top: 1.6rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: clamp(1.8rem, 3.5vw, 2.6rem);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  background: #150c07;
  color: var(--paper);
  isolation: isolate;
}
.dynamics-banner::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(237,107,30,0.35), transparent 60%),
    linear-gradient(120deg, #1a0f08 0%, #150c07 60%);
}
.dynamics-banner .dyn-logo { height: 26px; width: auto; flex: none; }
.dynamics-banner .dyn-copy p {
  font-size: 0.96rem;
  color: rgba(255,255,255,0.78);
  max-width: 58ch;
}
.dynamics-banner .btn-primary { background: var(--dynamics-orange); flex: none; }
.dynamics-banner .btn-primary:hover { background: var(--dynamics-orange-dark); }

/* =====================  WHY NEXAYA  =======================================*/
.why-hero {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  padding: clamp(2.2rem, 5vw, 4rem);
  color: var(--paper);
  isolation: isolate;
  background-color: #16211a;
}
.why-hero::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(15,22,17,0.80), rgba(15,22,17,0.88)),
    url("../images/photo-team.jpg") center/cover no-repeat;
}
.why-hero .eyebrow { color: var(--cream); }
.why-hero .eyebrow::before { background: var(--green); }
.why-hero h2 { color: var(--paper); margin: 1rem 0 1.1rem; }
.why-hero .lede { color: rgba(255,255,255,0.86); max-width: 62ch; margin: 0; }
.reasons {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); margin-top: 2.4rem;
  border-radius: var(--radius); overflow: hidden;
}
.reason { background: var(--paper); padding: 1.9rem 1.7rem; position: relative; }
.reason .rn { font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; color: rgba(17,17,17,0.32); display: block; margin-bottom: 1.1rem; }
.reason h3 { font-family: var(--font-body); font-weight: 600; font-size: 1rem; margin-bottom: 0.7rem; }
.reason p { font-size: 0.9rem; color: rgba(17,17,17,0.65); }
.reasons.cols-3 { grid-template-columns: repeat(3, 1fr); }

/* =====================  PACKAGE / TIER CARDS  ============================= */
.tier-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
  margin-top: 2.4rem;
}
.tier-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.8rem, 3vw, 2.2rem); display: flex; flex-direction: column;
}
.tier-card.featured { border-color: var(--green); box-shadow: 0 0 0 1px var(--green) inset; }
.tier-card .tier-name { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; margin-bottom: 0.5rem; }
.tier-card .tier-for {
  font-size: 0.88rem; color: rgba(17,17,17,0.6); margin-bottom: 1.4rem;
  padding-bottom: 1.3rem; border-bottom: 1px solid var(--line);
}
.tier-card ul { display: grid; gap: 0.7rem; }
.tier-card ul li { font-size: 0.92rem; color: rgba(17,17,17,0.75); padding-left: 1.1rem; position: relative; }
.tier-card ul li::before {
  content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px;
  border-radius: 50%; background: var(--green);
}

/* =====================  COMPLIANCE / BLUEPRINT MAP  =======================*/
.compliance-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
.compliance-copy .lede { color: rgba(255,255,255,0.78); margin-bottom: 1.7rem; }
.compliance-copy h2 { color: var(--paper); }
.map-diagram { position: relative; }
.map-diagram svg { width: 100%; height: auto; }
.map-line { stroke: rgba(255,255,255,0.4); stroke-width: 1; stroke-dasharray: 2 4; fill: none; }
.map-line-solid { stroke: var(--green); stroke-width: 1.4; fill: none; }
.map-node circle.hub { fill: var(--green); }
.map-node circle.ring { fill: none; stroke: rgba(255,255,255,0.5); stroke-width: 1; }
.map-node circle.pt { fill: #fff; }
.map-label { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; fill: rgba(255,255,255,0.85); }
.map-sub { font-family: "IBM Plex Mono", monospace; font-size: 8px; fill: rgba(255,255,255,0.5); }

/* =====================  ASSESSMENT OFFER  =================================*/
.offer { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.offer-list {
  display: grid; gap: 0; margin-top: 1.8rem;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.offer-list li {
  display: grid; grid-template-columns: 28px 1fr; gap: 0.9rem;
  padding: 1.15rem clamp(1rem, 2vw, 1.4rem);
  border-top: 1px solid var(--line);
  font-size: 0.96rem;
}
.offer-list li:first-child { border-top: none; }
.offer-list li .oi { font-family: "IBM Plex Mono", monospace; font-size: 0.78rem; color: var(--green-dark); padding-top: 0.15em; }
.offer-panel {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(2rem, 4vw, 2.8rem);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}
.offer-panel::before {
  content: "";
  position: absolute; inset: 0;
  background: url("../images/plexus-white.png") center/cover no-repeat;
  opacity: 0.18;
}
.offer-panel > * { position: relative; }
.offer-panel .eyebrow { color: var(--green); }
.offer-panel .eyebrow::before { background: var(--green); }
.offer-panel h3 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 1rem 0 1.2rem; }
.offer-panel h3:first-child { margin-top: 0; }
.offer-panel p.small { font-size: 0.88rem; color: rgba(255,255,255,0.62); margin-top: 1.4rem; }
.offer-panel .btn-primary { background: var(--green); }
.offer-panel .btn-primary:hover { background: var(--green-dark); }
.ndaline { display: flex; align-items: flex-start; gap: 0.6em; font-size: 0.85rem; color: rgba(255,255,255,0.72); margin: 1.3rem 0 1.4rem; }
.ndaline svg { flex: none; margin-top: 0.15em; }

/* assessment request form (shared look for the hero form and this one) */
.offer-form { display: grid; gap: 0.7rem; margin-top: 1.5rem; }
.offer-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.offer-form input {
  width: 100%;
  padding: 0.9em 1em;
  font: inherit;
  font-size: 0.92rem;
  color: var(--paper);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.offer-form input::placeholder { color: rgba(255,255,255,0.44); }
.offer-form input:focus { outline: none; border-color: var(--green); background: rgba(255,255,255,0.1); }
.offer-form select, .offer-form textarea {
  width: 100%;
  padding: 0.9em 1em;
  font: inherit;
  font-size: 0.92rem;
  color: var(--paper);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s ease, background 0.2s ease;
  appearance: none;
}
.offer-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1em center;
  background-size: 10px 6px;
  padding-right: 2.4em;
}
.offer-form select option { color: var(--ink); }
.offer-form textarea { resize: vertical; min-height: 90px; font-family: inherit; }
.offer-form select:focus, .offer-form textarea:focus { outline: none; border-color: var(--green); background-color: rgba(255,255,255,0.1); }
.offer-form label.field-label { font-size: 0.78rem; color: rgba(255,255,255,0.55); margin-bottom: -0.3rem; }
.offer-form .checkbox-group { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.offer-form .checkbox-group label {
  display: flex; align-items: center; gap: 0.5em;
  padding: 0.55em 0.9em; border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.05);
  font-size: 0.86rem; color: rgba(255,255,255,0.85); cursor: pointer;
}
.offer-form .checkbox-group input { accent-color: var(--green); }
.offer-form .incident-note {
  font-size: 0.85rem; color: rgba(255,255,255,0.72);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-sm); padding: 0.9em 1em; margin-top: -0.1rem;
}
.offer-form .incident-note a { color: var(--paper); text-decoration: underline; }
.offer-form button { width: 100%; justify-content: center; margin-top: 0.2rem; }
.offer-form .fineprint { font-size: 0.78rem; color: rgba(255,255,255,0.5); margin: 0.2rem 0 0; }

/* =====================  OFFICE GRID (contact page)  ========================
   Richer than the footer's compact .office-card — used in the page body,
   with a featured/HQ variant for the main office. */
.office-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2.4rem; }
.office-tile {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2rem); position: relative;
}
.office-tile.hq { grid-column: span 2; border-color: var(--green); box-shadow: 0 0 0 1px var(--green) inset; background: var(--cream); }
.office-tile .hq-tag {
  display: inline-block; font-family: "IBM Plex Mono", monospace; font-size: 0.7rem;
  letter-spacing: 0.08em; color: var(--green-dark); background: rgba(99,179,73,0.14);
  padding: 0.3em 0.7em; border-radius: var(--radius-pill); margin-bottom: 1rem;
}
.office-tile h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.7rem; }
.office-tile address { font-style: normal; color: rgba(17,17,17,0.68); font-size: 0.94rem; line-height: 1.6; }
.office-tile .office-tel {
  display: inline-block; margin-top: 0.9rem; font-weight: 600; color: var(--green-dark);
  border-bottom: 1px solid transparent; transition: border-color 0.2s ease;
}
.office-tile .office-tel:hover { border-color: var(--green-dark); }
.office-tile .office-note { margin-top: 0.9rem; font-size: 0.88rem; color: rgba(17,17,17,0.55); }
.offer-success { display: none; }
.offer-panel.sent .offer-form { display: none; }
.offer-panel.sent .offer-success { display: block; }
.offer-success h4 {
  font-family: var(--font-display); font-weight: 400; font-size: 1.2rem;
  color: var(--paper); margin-bottom: 0.5rem;
  display: flex; align-items: center; gap: 0.5em;
}
.offer-success h4 svg { width: 20px; height: 20px; color: var(--green); flex: none; }
.offer-success p { color: rgba(255,255,255,0.72); font-size: 0.92rem; }

/* =====================  INSIGHTS TEASER  ===================================*/
.insights-box {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(2.4rem, 4vw, 3.6rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-top: 2.6rem;
}
.insights-box h3 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 0.9rem; }
.insights-box p { color: rgba(17,17,17,0.66); margin-bottom: 1.6rem; }
.insights-meta { display: flex; flex-direction: column; gap: 0.9rem; border-left: 1px solid var(--line); padding-left: clamp(1.5rem, 3vw, 2.4rem); }
.insights-meta .im-row { display: flex; justify-content: space-between; font-size: 0.86rem; }
.insights-meta .im-row span:first-child { color: rgba(17,17,17,0.5); }
.insights-meta .im-row span:last-child { font-weight: 500; }

/* =====================  INTERIOR PAGES — shared components  ================*/
/* A lighter-weight hero for every non-homepage page: dark, on-brand, no
   pin/parallax or form — just eyebrow + h1 + lede so it loads fast and
   reuses the same header/footer as the homepage. */
.page-hero {
  position: relative;
  background: var(--green-dark);
  color: var(--paper);
  padding-top: clamp(150px, 22vw, 196px);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: url("../images/plexus-white.png") center/cover no-repeat;
  opacity: 0.12;
  pointer-events: none;
}
.page-hero .container { position: relative; }
.page-hero .eyebrow { color: var(--cream); }
.page-hero .eyebrow::before { background: var(--green); }
.page-hero h1 { color: var(--paper); margin: 1rem 0 1.2rem; max-width: 18ch; }
.page-hero .lede { color: rgba(255,255,255,0.85); max-width: 62ch; margin: 0; }
.page-hero .hero-ctas { margin-top: 2rem; }

/* service/stage tables — used on the services catalogue hubs */
.table-scroll { overflow-x: auto; margin-top: 2rem; }
.stage-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.stage-table th {
  text-align: left;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.68rem; letter-spacing: 0.1em;
  color: rgba(17,17,17,0.45); font-weight: 500;
  padding: 0 1rem 0.8rem; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.stage-table td {
  padding: 1.1rem 1rem; border-bottom: 1px solid var(--line);
  font-size: 0.95rem; vertical-align: top;
}
.stage-table tr:last-child td { border-bottom: none; }
.stage-table td:first-child, .stage-table th:first-child { padding-left: 0; }
.stage-table td:last-child, .stage-table th:last-child { padding-right: 0; }
.stage-table .stage-tag {
  font-family: "IBM Plex Mono", monospace; font-size: 0.72rem;
  color: var(--green-dark); font-weight: 600; white-space: nowrap;
}
.stage-table .service-name { font-weight: 600; }
.stage-table .service-name a { color: var(--ink); border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; }
.stage-table .service-name a:hover { color: var(--green-dark); border-color: var(--green-dark); }
.stage-table .question { color: rgba(17,17,17,0.65); }

/* services index — the two practice tiles */
.service-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 2.4rem; }
.service-tile { background: var(--paper); padding: clamp(1.8rem, 3.5vw, 2.4rem); display: flex; flex-direction: column; }
.service-tile-media { margin: calc(-1 * clamp(1.8rem, 3.5vw, 2.4rem)); margin-bottom: clamp(1.8rem, 3.5vw, 2.4rem); aspect-ratio: 16 / 9; overflow: hidden; background: var(--green-deeper); }
.service-tile-media img { width: 100%; height: 100%; object-fit: cover; }
.service-tile .practice-tag { font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; letter-spacing: 0.1em; color: var(--green-dark); margin-bottom: 1.2rem; }
.service-tile h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 300; margin-bottom: 0.8rem; }
.service-tile p { color: rgba(17,17,17,0.68); font-size: 0.96rem; margin-bottom: 1.6rem; }
.service-tile .btn { align-self: flex-start; margin-top: auto; }

/* services index — flat catalogue list, all services at a glance */
.catalogue-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; margin-top: 2.4rem; }
.catalogue-col h4 {
  font-family: "IBM Plex Mono", monospace; font-size: 0.7rem; letter-spacing: 0.1em;
  color: var(--green-dark); font-weight: 500; margin-bottom: 1rem;
  padding-bottom: 0.9rem; border-bottom: 1px solid var(--line);
}
.catalogue-col ul li a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 0; border-bottom: 1px solid var(--line);
  font-size: 0.96rem; font-weight: 500; color: var(--ink);
  transition: color 0.2s ease, padding-left 0.25s var(--ease);
}
.catalogue-col ul li a:hover { color: var(--green-dark); padding-left: 0.4em; }
.catalogue-col ul li a .arrow { opacity: 0.4; transition: transform 0.25s var(--ease), opacity 0.25s ease; }
.catalogue-col ul li a:hover .arrow { transform: translateX(3px); opacity: 1; }

/* closing CTA band — the same "photo + dark overlay" language as .why-hero
   and .dynamics-banner on the homepage, reused so every page ends on a
   familiar, on-brand note instead of a flat colour block. Pick a bg-*
   modifier for the photo. */
.cta-band {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  padding: clamp(2.8rem, 6vw, 4.5rem) clamp(1.6rem, 4vw, 3rem);
  color: var(--paper);
  isolation: isolate;
  text-align: center;
  background-color: #16211a;
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
}
.cta-band.bg-team::before { background-image: linear-gradient(rgba(15,22,17,0.82), rgba(15,22,17,0.9)), url("../images/photo-team.jpg"); }
.cta-band.bg-cyber::before { background-image: linear-gradient(rgba(15,22,17,0.82), rgba(15,22,17,0.9)), url("../images/photo-cyber.jpg"); }
.cta-band.bg-transform::before { background-image: linear-gradient(rgba(15,22,17,0.82), rgba(15,22,17,0.9)), url("../images/photo-transform.jpg"); }
.cta-band.bg-pentest::before { background-image: linear-gradient(rgba(15,22,17,0.82), rgba(15,22,17,0.9)), url("../images/photo-pentest-cta.jpg"); }
.cta-band .eyebrow { color: var(--cream); justify-content: center; }
.cta-band .eyebrow::before { background: var(--green); }
.cta-band h2 { color: var(--paper); margin-top: 1rem; max-width: 24ch; margin-left: auto; margin-right: auto; }
.cta-band .lede { color: rgba(255,255,255,0.82); max-width: 52ch; margin: 1rem auto 0; }
.cta-band .cta-actions { margin-top: 2.2rem; display: flex; justify-content: center; }

/* plain wide photo break — no text overlay, just a breathing-room image
   between text-heavy sections on detail pages */
.photo-band { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
.photo-band img { width: 100%; height: 100%; object-fit: cover; }

/* =====================  SECTOR PAGES  ======================================
   Deliberately different template from the service pages: a full-bleed photo
   hero instead of the flat .page-hero banner, a pill-cloud instead of the
   numbered .offer-list, a single bold stat callout instead of a stage-table,
   and no on-page form — the closing CTA sends people into the specific
   service's own request panel instead of duplicating it. */
.sector-hero {
  position: relative;
  color: var(--paper);
  padding-top: clamp(150px, 22vw, 196px);
  padding-bottom: clamp(4rem, 9vw, 7.5rem);
  overflow: hidden;
  isolation: isolate;
  background-color: #14201a;
}
.sector-hero::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
}
.sector-hero.bg-finance::before { background-image: linear-gradient(rgba(12,18,14,0.76), rgba(12,18,14,0.88)), url("../images/photo-finance-hero.jpg"); }
.sector-hero.bg-insurance::before { background-image: linear-gradient(rgba(12,18,14,0.76), rgba(12,18,14,0.88)), url("../images/photo-insurance-hero.jpg"); }
.sector-hero.bg-public::before { background-image: linear-gradient(rgba(12,18,14,0.76), rgba(12,18,14,0.88)), url("../images/photo-public-hero.jpg"); }
.sector-hero.bg-energy::before { background-image: linear-gradient(rgba(12,18,14,0.76), rgba(12,18,14,0.88)), url("../images/photo-energy-hero.jpg"); }
.sector-hero.bg-smb::before { background-image: linear-gradient(rgba(12,18,14,0.76), rgba(12,18,14,0.88)), url("../images/photo-smb-hero.jpg"); }
.sector-hero.bg-transport::before { background-image: linear-gradient(rgba(12,18,14,0.78), rgba(12,18,14,0.9)), url("../images/photo-transport-hero.jpg"); }
.sector-hero.bg-careers::before { background-image: linear-gradient(rgba(12,18,14,0.74), rgba(12,18,14,0.88)), url("../images/photo-team.jpg"); }
.sector-hero .eyebrow { color: var(--cream); }
.sector-hero .eyebrow::before { background: var(--green); }
.sector-hero h1 { color: var(--paper); margin: 1rem 0 1.2rem; max-width: 20ch; }
.sector-hero .lede { color: rgba(255,255,255,0.88); max-width: 62ch; margin: 0; }
.sector-hero .hero-ctas { margin-top: 2rem; }

/* "what we cover" pill cloud — light-background equivalent of the dark
   .btn-ghost-light standards pills used on the cybersecurity pages */
.pill-cloud { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.8rem; }
.pill-cloud .pill {
  display: inline-flex; align-items: center;
  padding: 0.6rem 1.15rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 0.92rem; font-weight: 500; color: var(--ink);
  line-height: 1.3;
}

/* single bold stat callout — replaces the stage-table timeline on sector
   pages, one concrete number instead of a multi-row engagement table */
.stat-callout { text-align: center; max-width: 640px; margin: 0 auto; }
.stat-callout .stat-value {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.8rem, 8vw, 4.6rem); line-height: 1;
  color: var(--paper);
}
.stat-callout .stat-label { color: rgba(255,255,255,0.85); margin-top: 1.2rem; }

/* plain centered closing CTA — no photo, keeps the hero's photo moment
   from repeating at the bottom of a page this short */
.center-cta { text-align: center; max-width: 640px; margin: 0 auto; }
.center-cta .cta-actions {
  margin-top: 2rem; display: flex; gap: 1rem;
  justify-content: center; flex-wrap: wrap;
}

/* =====================  ABOUT PAGE  ========================================
   A deliberately different template again — this one for a page about
   people and identity rather than a product or a market. No numbered
   "01 —" eyebrow rhythm anywhere on this page; a split photo/text hero
   instead of a flat banner or a full-bleed overlay photo; an oversized-
   outline-numeral list instead of .reasons or .offer-list; a plain
   editorial two-column list instead of a table or a diagram; and a new
   team-card grid that exists nowhere else on the site. */

.about-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 620px;
  background: var(--ink);
}
.about-hero-text {
  display: flex;
  align-items: center;
  padding: clamp(150px, 22vw, 196px) clamp(1.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
}
.about-hero-text .inner { max-width: 46ch; }
.about-hero-text .eyebrow { color: var(--cream); }
.about-hero-text .eyebrow::before { background: var(--green); }
.about-hero-text h1 { color: var(--paper); margin: 1rem 0 1.2rem; }
.about-hero-text .lede { color: rgba(255,255,255,0.86); margin: 0; }
.about-hero-text .hero-ctas { margin-top: 2rem; }
.about-hero-media { position: relative; overflow: hidden; }
.about-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,14,11,0.55), transparent 220px);
}

/* large editorial passage — no card, no eyebrow number, just type and air */
.manifesto {
  font-family: var(--font-body);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.55;
  color: var(--ink);
  max-width: 52ch;
}
.manifesto + .manifesto { margin-top: 1.6rem; }

/* vertical principle list — oversized ghost numerals beside each point */
.principle-list { margin-top: 2.4rem; border-top: 1px solid var(--line); }
.principle {
  display: grid; grid-template-columns: 120px 1fr; gap: 1.6rem 2rem;
  padding: clamp(1.8rem, 3vw, 2.6rem) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.principle .pn {
  font-family: var(--font-display); font-weight: 200;
  font-size: clamp(2.6rem, 5.5vw, 4.2rem); line-height: 1;
  color: rgba(17,17,17,0.13);
}
.principle h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 600; margin-bottom: 0.6rem; }
.principle p { color: rgba(17,17,17,0.68); max-width: 62ch; }

/* plain editorial list — market name + its strategy, no table chrome */
.market-list { margin-top: 2rem; border-top: 1px solid var(--line); }
.market-row {
  display: grid; grid-template-columns: 200px 1fr; gap: 1rem 2rem;
  padding: 1.5rem 0; border-bottom: 1px solid var(--line);
}
.market-row .market-name { font-weight: 600; }
.market-row .market-strategy { color: rgba(17,17,17,0.7); }

/* team grid — new component: initials avatar, name, role */
.team-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; margin-top: 2.4rem;
}
.team-card { background: var(--paper); padding: 1.8rem 1.5rem; }
.avatar-initials {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--green-dark); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: 0.92rem;
  margin-bottom: 1.1rem;
}
.team-card .team-name { font-weight: 600; font-size: 1rem; margin-bottom: 0.2rem; }
.team-card .team-role { color: rgba(17,17,17,0.6); font-size: 0.88rem; }

/* section header + a small inset photo, side by side — a lighter-weight
   way to bring a photo into a section without it taking over the page */
.section-head-media { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; margin-bottom: clamp(2.6rem, 5vw, 4rem); }
.media-inset { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
.media-inset img { width: 100%; height: 100%; object-fit: cover; }

/* small "meet the engineer" photo above form-adjacent copy */
.engineer-photo { width: 108px; height: 108px; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 1.6rem; }
.engineer-photo img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .service-tiles, .catalogue-list, .tier-grid, .reasons.cols-3 { grid-template-columns: 1fr; }
  .section-head-media { grid-template-columns: 1fr; }
  .media-inset { order: -1; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .office-grid { grid-template-columns: 1fr 1fr; }
  .office-tile.hq { grid-column: span 2; }
}

@media (max-width: 600px) {
  .office-grid { grid-template-columns: 1fr; }
  .office-tile.hq { grid-column: span 1; }
}

@media (max-width: 820px) {
  .about-hero { grid-template-columns: 1fr; min-height: 0; }
  .about-hero-media { order: -1; aspect-ratio: 4 / 3; }
  .about-hero-text { padding: 2.4rem clamp(1.2rem, 5vw, 2rem) 3rem; }
  .principle, .market-row { grid-template-columns: 1fr; gap: 0.6rem; }
  .principle .pn { font-size: 2.2rem; }
}

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

/* =====================  FOOTER  =============================================*/
.site-footer { background: var(--green-deeper); color: rgba(255,255,255,0.82); padding-top: clamp(3.5rem, 6vw, 5.5rem); }
.footer-top { padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer-brand { max-width: 420px; margin-bottom: 2.8rem; }
.footer-brand .brand { margin-bottom: 1.3rem; }
.footer-brand .brand img { height: 28px; }
.footer-strap { font-size: 0.92rem; color: rgba(255,255,255,0.65); line-height: 1.6; margin-bottom: 1.4rem; }
.footer-strap .accent { color: var(--green); font-weight: 600; }

.footer-social { display: flex; gap: 0.6rem; }
.footer-social a {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.85);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.footer-social a svg { width: 16px; height: 16px; }
.footer-social a:hover { background: var(--green); border-color: var(--green); color: #fff; transform: translateY(-2px); }

/* 4-column nav row, then a 4-column office-address row: a 4x2 grid overall */
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-bottom: 2.8rem; }
.footer-col h4 {
  font-family: "IBM Plex Mono", monospace; font-size: 0.68rem; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.45); margin-bottom: 1.1rem;
}
.footer-col ul li { margin-bottom: 0.65rem; }
.footer-col ul a { font-size: 0.88rem; color: rgba(255,255,255,0.82); transition: color 0.2s ease; }
.footer-col ul a:hover { color: var(--paper); }

.footer-offices {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;
  padding-top: 2.2rem; border-top: 1px solid rgba(255,255,255,0.12);
}
.office-card h4 {
  font-family: "IBM Plex Mono", monospace; font-size: 0.68rem; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.45); margin-bottom: 0.8rem;
}
.office-card address {
  font-style: normal;
  font-size: 0.88rem; line-height: 1.55;
  color: rgba(255,255,255,0.82);
}
.office-card .office-tel {
  display: inline-block; margin-top: 0.5rem;
  font-family: "IBM Plex Mono", monospace; font-size: 0.82rem;
  color: var(--green);
  transition: color 0.2s ease;
}
.office-card .office-tel:hover { color: var(--paper); }

.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding: 1.8rem 0 2.2rem; font-size: 0.78rem; color: rgba(255,255,255,0.5); }
.legal-links { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.legal-links a:hover { color: rgba(255,255,255,0.85); }

/* =====================  RESPONSIVE  ==========================================*/
/* pinned hero: the whole hero stays fixed in place while the rest of the
   page — starting at the colour stripe + trust strip — scrolls up and
   covers it. Desktop only (mobile hero heights are too content-dependent
   to pin safely) and off entirely when the visitor prefers reduced motion. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .hero-wrap { height: 200vh; }
  .hero {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 76px;
    padding-bottom: 0;
  }
  .scroll-cover {
    position: relative;
    z-index: 1;
    margin-top: -100vh;
    box-shadow: 0 -60px 100px -40px rgba(0,0,0,0.4);
  }
}

@media (max-width: 1080px) {
  .mega-grid { grid-template-columns: 1fr 1fr; }
  .mega-featured { grid-column: 1 / -1; }
  .reasons { grid-template-columns: repeat(2, 1fr); }
  .footer-cols, .footer-offices { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-form-panel { order: -1; margin-bottom: 0.5rem; }
  .practices { grid-template-columns: 1fr; }
  .dynamics-banner { grid-template-columns: 1fr; text-align: left; gap: 1.2rem; }
  .dynamics-banner .btn-primary { align-self: flex-start; }
  .compliance-wrap { grid-template-columns: 1fr; }
  .offer { grid-template-columns: 1fr; }
  .offer-form .row2, .hero-form .row2 { grid-template-columns: 1fr; }
  .insights-box { grid-template-columns: 1fr; }
  .insights-meta { border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 1.4rem; }
}
@media (max-width: 760px) {
  .nav, .header-actions .btn-alert span.txt { display: none; }
  .menu-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
  .menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
    content: ""; display: block; width: 20px; height: 1.5px; background: #fff; position: relative; transition: 0.25s ease;
  }
  .site-header.scrolled .menu-toggle span, .site-header.scrolled .menu-toggle span::before, .site-header.scrolled .menu-toggle span::after { background: var(--ink); }
  .menu-toggle span::before { position: absolute; top: -6px; }
  .menu-toggle span::after { position: absolute; top: 6px; }
  .footer-cols, .footer-offices { grid-template-columns: 1fr; }
  .reasons { grid-template-columns: 1fr; }
  .trust-strip .trust-label { margin-right: 0; width: 100%; }

  /* stage/QA tables: stack into cards instead of scrolling sideways —
     easier to read on a phone, and nothing to "discover" by swiping. */
  .table-scroll { overflow-x: visible; margin-top: 1.6rem; }
  .stage-table { min-width: 0; width: 100%; }
  .stage-table thead { display: none; }
  .stage-table, .stage-table tbody, .stage-table tr, .stage-table td { display: block; width: 100%; }
  .stage-table tr { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
  .stage-table tr:first-child { border-top: 1px solid var(--line); }
  .stage-table td { padding: 0.2rem 0; border: none; }
  .stage-table .stage-tag { margin-bottom: 0.3rem; }
}

/* mobile nav drawer */
.mobile-nav {
  position: fixed; inset: 76px 0 0 0; background: var(--cream); z-index: 95;
  padding: 1.5rem var(--gutter) 2.5rem; overflow-y: auto;
  transform: translateX(100%); transition: transform 0.35s var(--ease);
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav .m-item { border-bottom: 1px solid var(--line); }
.mobile-nav .m-item > a, .mobile-nav .m-item > button {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 1.1rem 0; font-family: var(--font-display); font-weight: 500; font-size: 1.15rem;
}
.mobile-nav .m-sub { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease); }
.mobile-nav .m-item.open .m-sub { max-height: 900px; }
.mobile-nav .m-sub a { display: block; padding: 0.6rem 0 0.6rem 0.8rem; font-size: 0.95rem; color: rgba(17,17,17,0.7); }
.mobile-nav .m-item.open .caret { transform: rotate(180deg); }
.mobile-nav .m-cta { margin-top: 1.6rem; display: flex; flex-direction: column; gap: 0.9rem; }

/* =====================  UNDER ATTACK PAGE  =================================
   A functional exception to the site's usual editorial tone — written for
   someone reading under pressure, so the design strips back accordingly:
   the phone number first, stark and dark, no photo, no soft copy. */
.alert-hero {
  background: var(--ink); color: var(--paper);
  padding: clamp(150px, 22vw, 196px) 0 clamp(3.5rem, 7vw, 5.5rem);
  text-align: center;
}
.alert-hero .alert-flag {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: "IBM Plex Mono", monospace; font-size: 0.8rem; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.6); margin-bottom: 1.2rem;
}
.alert-hero .alert-flag .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); position: relative; flex: none; }
.alert-hero .alert-flag .pulse-dot::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1px solid var(--green); animation: pulse-ring 2.2s var(--ease) infinite;
}
.alert-hero h1 { color: var(--paper); max-width: 18ch; margin: 0 auto 1.1rem; }
.alert-hero .lede { color: rgba(255,255,255,0.78); max-width: 52ch; margin: 0 auto 2.2rem; }
.alert-call {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.4rem;
  background: var(--green); color: var(--ink); text-decoration: none;
  padding: 1.3rem 2.4rem; border-radius: var(--radius);
  transition: background 0.2s ease, transform 0.2s ease;
}
.alert-call:hover { background: var(--green-dark); color: var(--paper); transform: translateY(-2px); }
.alert-call .alert-call-label { font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; letter-spacing: 0.1em; opacity: 0.75; }
.alert-call .alert-call-number { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
.alert-hero .alert-note { margin-top: 1.6rem; font-size: 0.92rem; color: rgba(255,255,255,0.62); max-width: 46ch; margin-left: auto; margin-right: auto; }
.alert-hero .alert-note a { color: var(--paper); text-decoration: underline; }

/* vertical response timeline */
.timeline-list { margin-top: 2.4rem; }
.timeline-step {
  display: grid; grid-template-columns: 130px 1fr; gap: 1.2rem 2rem;
  padding: 1.5rem 0; border-bottom: 1px solid var(--line);
  position: relative;
}
.timeline-step:first-child { padding-top: 0; }
.timeline-step .t-time {
  font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: 0.85rem;
  color: var(--green-dark);
}
.timeline-step p { color: rgba(17,17,17,0.72); }

/* "before you call" checklist */
.checklist { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 2.4rem; }
.checklist-item { background: var(--paper); padding: 1.3rem 1.5rem; display: grid; grid-template-columns: 22px 1fr; gap: 0.9rem; align-items: start; }
.checklist-item svg { flex: none; margin-top: 0.2em; color: var(--green-dark); }
.checklist-item p { font-size: 0.96rem; color: rgba(17,17,17,0.75); }
.checklist-item strong { color: var(--ink); }

@media (max-width: 640px) {
  .timeline-step { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* =====================  COMPLIANCE PAGE  ===================================
   "Where organisations get caught" callout — a highlighted aside inside the
   per-country regulatory sections. */
.catch-box {
  background: rgba(99,179,73,0.08);
  border-left: 3px solid var(--green-dark);
  padding: 1rem 1.3rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 1.4rem 0;
}
.catch-box .catch-label {
  display: block; font-family: "IBM Plex Mono", monospace; font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-dark); margin-bottom: 0.4rem;
}
.catch-box p { color: rgba(17,17,17,0.75); font-size: 0.94rem; margin: 0; }

/* =====================  HOW WE WORK PAGE  ==================================
   Each of the four steps gets a takeaway box + a duration tag. */
.step-outcome {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 1.2rem 1.4rem; margin-top: 1.8rem;
}
.step-outcome strong { display: block; margin-bottom: 0.3rem; }
.step-outcome p { color: rgba(17,17,17,0.7); margin: 0; }
.step-duration {
  display: inline-flex; align-items: center; gap: 0.5em; margin-top: 1.2rem;
  font-family: "IBM Plex Mono", monospace; font-size: 0.78rem; letter-spacing: 0.04em;
  color: var(--green-dark);
}

/* =====================  LEGAL PAGES  =======================================
   Privacy notice, cookie notice, terms of use — plain long-form documents,
   many sequential clauses rather than one heading per section. */
.legal-body h3 { margin: 2.2rem 0 0.8rem; }
.legal-body h3:first-child { margin-top: 0; }
.legal-body p { color: rgba(17,17,17,0.72); margin-bottom: 1rem; line-height: 1.7; }
.legal-body ul { margin: 0.6rem 0 1.2rem 1.2rem; }
.legal-body li { color: rgba(17,17,17,0.72); margin-bottom: 0.5rem; line-height: 1.65; }
.legal-meta { font-size: 0.85rem; color: rgba(255,255,255,0.65); margin-top: 0.8rem; }