/* =========================================================================
   EPX INTELLIGENCE, concept site
   Version 2. Rebuilt after reviewing the live epx.co.uk alongside version 1.

   WHAT CHANGED AND WHY
   Version 1 was over decorated in the hero and under designed in the body:
   a gradient with a particle field on top, then long sparse text rows with
   half empty columns. Exactly the wrong way round. The live EPX IT site is
   flat, confident colour with a full bleed photo and one bold headline. That
   restraint is the thing worth inheriting.

   So version 2:
     - No gradients on the hero, no particle field. Flat ink, photo bled to
       the edge, and one quiet brand gesture: the authentic EPX ghost X, very
       large and very low contrast, drifting slowly.
     - Real surfaces. Cards have fills, borders and hover states instead of
       hairlines floating on white.
     - A section rhythm of ink, bone and white so the page has a pulse.
     - The four pillars promoted to a two by two grid of dark cards, which is
       the centrepiece the brief asked for.
     - Tighter vertical rhythm throughout. Version 1 wasted a lot of height.

   RELATIONSHIP TO EPX IT
   Shared: Poppins, the navy and blue, the X device, big bold headline,
   photo bled from the right, 2px button radius.
   Distinct: near black ink instead of mid indigo; lime accent instead of the
   yellow call to action; IBM Plex Mono for labels and numerals; warm bone
   neutral instead of cool grey; the cut corner mirrored.
   ========================================================================= */

:root {
  /* EPX IT canonical */
  --navy: #002060;
  --blue: #2b3678;
  --red: #e9212e;
  --lime: #9bc55e;
  --charcoal: #231f20;
  --white: #ffffff;

  /* EPX Intelligence extensions */
  --ink: #071634;          /* the dark surface, flatter and deeper than navy */
  --ink-2: #0d2149;        /* lifted panel on ink */
  --ink-3: #16305f;        /* border on ink */
  --bone: #f1ede5;         /* warm neutral, the key differentiator */
  --bone-line: #ded7c9;
  --line: #e4e2dd;         /* rules on white */
  --body-copy: #5a5f6a;
  --mid-grey: #8a8f9e;
  --lime-deep: #55801f;    /* lime that passes contrast as text on light */
  --lime-wash: #f3f8ea;

  --max: 1200px;
  --gutter: 28px;
  --cut: 40px 0 40px 40px;   /* mirrored EPX IT corner */

  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --sans: 'Poppins', Arial, Helvetica, sans-serif;

  --ease: cubic-bezier(.2,.7,.25,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--charcoal);
  font: 400 16.5px/1.72 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
p { margin: 0; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--navy);
  font-family: var(--sans);
  letter-spacing: -0.035em;
  line-height: 1.06;
}
h1 { font-size: clamp(2.5rem, 4.6vw, 3.85rem); font-weight: 800; max-width: 19ch; }
h2 { font-size: clamp(1.9rem, 3.1vw, 2.75rem); font-weight: 800; max-width: 24ch; line-height: 1.1; }
h3 { font-size: 1.22rem; font-weight: 700; letter-spacing: -0.022em; line-height: 1.25; }
h4 { font-size: 1rem; font-weight: 700; }

.wrap { width: min(calc(100% - (var(--gutter) * 2)), var(--max)); margin-inline: auto; }
section { padding: 84px 0; }
.tight { padding: 64px 0; }

/* ---------- mono label system, the EPX Intelligence signature ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 11px;
  margin: 0 0 22px;
  color: var(--lime-deep);
  font: 500 11.5px/1 var(--mono);
  letter-spacing: 0.15em; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--lime); flex: none; }
.on-dark .eyebrow, .dark .eyebrow, .hero .eyebrow, .phero .eyebrow { color: var(--lime); }

.label { font: 500 11px/1.4 var(--mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--mid-grey); }
.num {
  display: block; font: 500 12px/1 var(--mono);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--lime-deep);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 28px;
  border: 1px solid transparent; border-radius: 2px;
  background: var(--lime); color: var(--ink);
  font: 700 14.5px/1 var(--sans); letter-spacing: -0.005em;
  transition: background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover { background: #aad46c; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(155,197,94,.26); }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.09); border-color: #fff; box-shadow: none; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--blue); box-shadow: 0 10px 26px rgba(0,32,96,.22); }
.btn-sm { min-height: 44px; padding: 0 20px; font-size: 13.5px; }

.tlink {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 14px/1.3 var(--sans); color: var(--navy);
}
.tlink::after {
  content: ""; width: 18px; height: 10px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h15M11.5 1.2 15.6 5l-4.1 3.8' fill='none' stroke='%23002060' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center/contain;
  transition: transform .2s var(--ease);
}
.on-dark .tlink::after, .dark .tlink::after, .hero .tlink::after,
.phero .tlink::after, .photo-band .tlink::after, .pillar .tlink::after,
.final .tlink::after, footer .tlink::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h15M11.5 1.2 15.6 5l-4.1 3.8' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E");
}
.tlink:hover::after { transform: translateX(4px); }
.tlink:hover::after { transform: translateX(5px); }
.on-dark .tlink, .dark .tlink { color: #fff; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(7,22,52,.94);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.09);
  color: #fff;
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 76px; }
.lockup { display: flex; align-items: center; flex: none; }
.lockup img { display: block; height: 27px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 26px; font: 500 14px var(--sans); }
.nav-links a:not(.btn) { position: relative; padding: 6px 0; color: rgba(255,255,255,.88); transition: color .18s; }
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease);
}
.nav-links a:not(.btn):hover { color: #fff; }
.nav-links a:not(.btn):hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: #fff; }

/* ---------- dropdowns. Mirrors the EPX IT pattern so it reads as family. ---------- */
.nav-group { position: relative; }
.nav-parent {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 0; background: none; border: 0; cursor: pointer;
  color: rgba(255,255,255,.88); font: 500 14px var(--sans);
  transition: color .18s;
}
.nav-parent::before {
  content: ""; width: 7px; height: 7px; order: 2;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .22s var(--ease);
}
.nav-parent::after {
  content: ""; position: absolute; left: 0; right: 14px; bottom: 0; height: 2px;
  background: var(--lime); transform: scaleX(0); transform-origin: left;
  transition: transform .22s var(--ease);
}
.nav-group:hover .nav-parent, .nav-parent[aria-expanded="true"] { color: #fff; }
.nav-group:hover .nav-parent::after, .nav-parent[aria-expanded="true"]::after { transform: scaleX(1); }
.nav-group:hover .nav-parent::before, .nav-parent[aria-expanded="true"]::before { transform: translateY(1px) rotate(225deg); }

.nav-panel {
  position: absolute; left: -22px; top: calc(100% + 14px);
  width: 340px; padding: 10px;
  background: #0b1f45; border: 1px solid var(--ink-3); border-radius: 2px 0 2px 2px;
  box-shadow: 0 26px 54px rgba(0,0,0,.42);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .2s var(--ease), visibility .2s;
}
/* a hover bridge, so the panel does not close in the gap above it */
.nav-group::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
.nav-group:hover .nav-panel,
.nav-group:focus-within .nav-panel,
.nav-parent[aria-expanded="true"] + .nav-panel { opacity: 1; visibility: visible; transform: none; }

.nav-panel a {
  display: block; padding: 12px 14px; border-radius: 2px;
  transition: background .16s;
}
.nav-panel a:not(.btn)::after { display: none; }
.nav-panel a:hover { background: rgba(155,197,94,.13); }
.nav-panel a b { display: block; font: 600 14px/1.35 var(--sans); color: #fff; }
.nav-panel a i {
  display: block; margin-top: 4px; font-style: normal;
  font: 400 12.5px/1.4 var(--sans); color: rgba(255,255,255,.6);
}
.nav-panel a[aria-current="page"] b { color: var(--lime); }
.nav-panel-foot { margin-top: 6px; border-top: 1px solid var(--ink-3); border-radius: 0; padding-top: 14px !important; }

/* mobile menu button, hidden until the links collapse */
.nav-toggle {
  display: none; position: relative; z-index: 2;
  width: 44px; height: 40px; padding: 11px 9px;
  background: none; border: 1px solid rgba(255,255,255,.28); border-radius: 2px;
  cursor: pointer;
}
.nav-toggle span {
  display: block; height: 2px; background: #fff; border-radius: 1px;
  transition: transform .24s var(--ease), opacity .18s;
}
.nav-toggle span + span { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================================
   HERO. Flat ink, photo bled to the right edge, one quiet brand gesture.
   ========================================================================= */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--ink); color: #fff;
  padding: 92px 0 0;
}
/* the authentic EPX ghost X, large and barely there. The only motion. */
.hero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  /* positioned so the crossing point of the X actually falls on screen.
     Cropped off the left edge it just read as a stray diagonal band. */
  left: -14%; top: -26%; width: 1120px; height: 1120px;
  background: url("brand/ghost-x-lime.svg") no-repeat center/contain;
  opacity: .085;
  animation: x-drift 44s ease-in-out infinite;
}
@keyframes x-drift {
  0%,100% { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
  50%     { transform: translate3d(2.5%,-2%,0) scale(1.06) rotate(-2.5deg); }
}
/* the photo, bled full height off the right edge */
.hero-figure {
  position: absolute; z-index: 0; right: 0; top: 0; bottom: 0;
  width: 46%; margin: 0; overflow: hidden;
}
.hero-figure img {
  width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%;
  filter: brightness(1.16) contrast(1.03) saturate(.92);   /* the source photo is dim */
}
.hero-figure::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(7,22,52,.9) 20%, rgba(7,22,52,.28) 58%, rgba(7,22,52,.06) 100%),
    linear-gradient(to top, rgba(7,22,52,.7) 0%, rgba(7,22,52,0) 38%);
}
.hero-grid { position: relative; z-index: 2; display: block; padding: 8px 0 74px; }
.hero-inner { max-width: 660px; }
.hero-copy { margin-top: 26px; max-width: 52ch; color: rgba(255,255,255,.82); font-size: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 38px; }
.hero h1 { color: #fff; }

/* the four fact strip, sat on a lifted band */
.hero-foot {
  position: relative; z-index: 2;
  background: rgba(255,255,255,.045);
  border-top: 1px solid rgba(255,255,255,.11);
}
.hero-foot-row { display: grid; grid-template-columns: repeat(4,1fr); }
.hero-foot-row div {
  padding: 26px 28px 28px 0; color: rgba(255,255,255,.94);
  font: 500 14.5px/1.5 var(--sans);
  border-right: 1px solid rgba(255,255,255,.11);
}
.hero-foot-row div + div { padding-left: 28px; }
.hero-foot-row div:last-child { border-right: 0; }
.hero-foot-row div span {
  display: block; margin-bottom: 11px;
  font: 500 10.5px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime);
}

/* ---------- inner page hero ---------- */
.phero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--ink); color: #fff; padding: 74px 0 84px;
}
.phero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -12%; top: -32%; width: 780px; height: 780px;
  background: url("brand/ghost-x-lime.svg") no-repeat center/contain;
  opacity: .07; animation: x-drift 52s ease-in-out infinite;
}
.phero .wrap { position: relative; z-index: 2; }
.phero h1 { color: #fff; font-size: clamp(2.2rem, 3.9vw, 3.3rem); max-width: 20ch; }
.phero-copy { margin-top: 24px; max-width: 60ch; color: rgba(255,255,255,.82); font-size: 17.5px; }
.phero-actions { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; margin-top: 34px; }
.breadcrumb { margin-bottom: 24px; font: 500 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.breadcrumb a:hover { color: var(--lime); }
.breadcrumb span { margin: 0 9px; color: rgba(255,255,255,.35); }

/* ---------- quick answer, the AEO block ---------- */
.qa { background: var(--bone); border-bottom: 1px solid var(--bone-line); padding: 44px 0; }
.qa-inner { display: grid; grid-template-columns: 150px 1fr; gap: 40px; align-items: start; }
.qa h2 {
  font: 500 11px/1.5 var(--mono); letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--lime-deep); max-width: none; padding-top: 8px;
}
.qa p { font: 400 clamp(1.06rem,1.45vw,1.25rem)/1.66 var(--sans); letter-spacing: -0.012em; color: #343841; max-width: 66ch; }

/* ---------- layout helpers ---------- */
.lead { font: 600 clamp(1.35rem,2.1vw,1.85rem)/1.28 var(--sans); letter-spacing: -0.03em; color: var(--navy); max-width: 19ch; }
.dark .lead, .on-dark .lead { color: #fff; }
.prose { max-width: 58ch; color: var(--body-copy); }
.prose p + p { margin-top: 19px; }
.prose h3 { margin: 40px 0 13px; color: var(--navy); }
.prose ul { margin: 16px 0; padding-left: 20px; }
.prose li { margin-bottom: 9px; }
.prose strong { color: var(--charcoal); }
.split { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); gap: 7%; align-items: start; }
.bone { background: var(--bone); }
.dark { background: var(--ink); color: #fff; }
.dark h2, .dark h3, .dark h4 { color: #fff; }
.dark .prose { color: rgba(255,255,255,.78); }
.dark .prose strong { color: #fff; }
.section-intro { max-width: 54ch; margin-top: 20px; color: var(--body-copy); font-size: 16.5px; line-height: 1.68; }
.section-head {
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  gap: 8%; align-items: end;
}
.section-head h2 { max-width: 18ch; }
.section-head .section-intro { margin-top: 0; padding-bottom: 5px; }
.dark .section-intro { color: rgba(255,255,255,.76); }

/* ---------- numbered column grid, now with real presence ---------- */
.grid-rules { display: grid; gap: 22px; margin-top: 44px; }
.grid-rules.c2 { grid-template-columns: repeat(2,1fr); }
.grid-rules.c3 { grid-template-columns: repeat(3,1fr); }
.grid-rules > * {
  padding: 32px 30px 34px; background: var(--white);
  border: 1px solid var(--line); border-radius: 2px 0 2px 2px;
  border-top: 3px solid var(--lime);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.grid-rules > *:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(7,22,52,.09); }
.bone .grid-rules > * { background: #fff; border-color: var(--bone-line); }
.dark .grid-rules > * { background: var(--ink-2); border-color: var(--ink-3); border-top-color: var(--lime); }
.dark .grid-rules > *:hover { box-shadow: 0 16px 34px rgba(0,0,0,.3); }
.grid-rules p { margin-top: 13px; font-size: 14.75px; line-height: 1.68; color: var(--body-copy); }
.dark .grid-rules p { color: rgba(255,255,255,.76); }
.grid-rules .num { margin-bottom: 20px; }

/* =========================================================================
   THE FOUR PILLARS. The centrepiece: a two by two grid of dark cards.
   ========================================================================= */
.pillars {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 20px;
  margin-top: 46px;
}
.pillar {
  position: relative; display: flex; flex-direction: column;
  padding: 38px 36px 34px;
  background: var(--ink-2); border: 1px solid var(--ink-3);
  border-radius: var(--cut);
  overflow: hidden;
  transition: border-color .22s var(--ease), transform .22s var(--ease), background .22s var(--ease);
}
.pillar::after {
  content: ""; position: absolute; right: -70px; bottom: -80px; width: 260px; height: 260px;
  background: url("brand/ghost-x-lime.svg") no-repeat center/contain;
  opacity: .05; transition: opacity .25s var(--ease), transform .35s var(--ease);
}
.pillar:hover { border-color: rgba(155,197,94,.55); transform: translateY(-4px); background: #102750; }
.pillar:hover::after { opacity: .1; transform: translateY(-8px) rotate(-4deg); }
.pillar > * { position: relative; z-index: 1; }

.pillar-num { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; }
.pillar-num b {
  font: 800 2.9rem/1 var(--sans); letter-spacing: -0.07em; color: var(--lime);
}
.pillar-num i {
  font: 500 10.5px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  font-style: normal; color: rgba(255,255,255,.55);
}
.pillar h3 { color: #fff; font-size: 1.42rem; }
.pillar-role {
  margin-top: 10px; font: 500 10.5px/1.5 var(--mono);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--lime);
  opacity: .9;
}
.pillar-body { margin-top: 20px; font-size: 14.75px; line-height: 1.7; color: rgba(255,255,255,.78); }
.pillar-body ul { margin: 16px 0 0; padding: 0; list-style: none; }
.pillar-body li { position: relative; margin-bottom: 9px; padding-left: 20px; }
.pillar-body li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 7px; height: 1.5px; background: var(--lime);
}
.pillar-cta { margin-top: auto; padding-top: 28px; }
.pillar-cta .tlink { color: #fff; }
.pillar-flow {
  display: flex; align-items: center; gap: 14px; margin-top: 34px;
  font: 500 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.pillar-flow::before, .pillar-flow::after { content: ""; height: 1px; background: rgba(255,255,255,.18); flex: 1; }

/* ---------- proof ---------- */
.proof-list { border-left: 2px solid var(--lime); padding-left: 26px; }
.proof-list div { padding: 17px 0; border-bottom: 1px solid var(--line); font: 600 16px/1.45 var(--sans); color: var(--navy); }
.proof-list div:last-child { border-bottom: 0; }
.proof-list em { display: block; margin-top: 6px; font: 400 14px/1.55 var(--sans); font-style: normal; color: var(--body-copy); }

.ladder { margin-top: 34px; }
.rung {
  display: grid; grid-template-columns: 190px 1fr 168px; gap: 26px; align-items: center;
  padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.14);
}
.rung:last-child { border-bottom: 0; }
.rung b { font: 700 16px var(--sans); color: #fff; }
.rung p { font-size: 14.5px; color: rgba(255,255,255,.72); }
.pill {
  display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 2px;
  font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.09em; text-transform: uppercase;
}
.pill-held { background: rgba(155,197,94,.16); color: var(--lime); border: 1px solid rgba(155,197,94,.45); }
.pill-prog { background: rgba(255,255,255,.07); color: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.26); }
.pill-offer { background: rgba(43,54,120,.45); color: #ccd4ee; border: 1px solid rgba(204,212,238,.3); }

.placeholder {
  margin-top: 28px; padding: 24px 26px; border-radius: 2px;
  background: var(--lime-wash); border: 1px dashed #9db86f; border-left-width: 3px;
}
.dark .placeholder { background: rgba(155,197,94,.08); border-color: rgba(155,197,94,.45); }
.placeholder .label { display: block; margin-bottom: 9px; color: var(--lime-deep); }
.dark .placeholder .label { color: var(--lime); }
.placeholder p { font-size: 14.5px; color: var(--body-copy); }
.dark .placeholder p { color: rgba(255,255,255,.78); }

/* ---------- reading paths ---------- */
.paths { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 52px; }
.path {
  display: flex; flex-direction: column; padding: 34px 30px 30px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 2px 0 2px 2px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.path:hover { transform: translateY(-3px); border-color: #cfd4dd; box-shadow: 0 16px 34px rgba(7,22,52,.1); }
.bone .path { background: #fff; border-color: var(--bone-line); }
.path .label { display: block; margin-bottom: 16px; color: var(--lime-deep); }
.path p { margin-top: 12px; font-size: 14.75px; line-height: 1.68; color: var(--body-copy); }
.path .tlink { margin-top: auto; padding-top: 26px; }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 44px; }
.step {
  position: relative; padding: 34px 30px 32px;
  background: #fff; border: 1px solid var(--line); border-radius: 2px 0 2px 2px;
}
.bone .step { border-color: var(--bone-line); }
.step-num {
  display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 24px;
  border-radius: 50%; background: var(--ink); color: var(--lime);
  font: 500 14px/1 var(--mono);
}
.step p { margin-top: 12px; font-size: 14.75px; line-height: 1.68; color: var(--body-copy); }
.step .label { display: block; margin-top: 18px; color: var(--lime-deep); }

/* ---------- tables ---------- */
.tbl { width: 100%; border-collapse: collapse; margin-top: 36px; font-size: 15px; }
.tbl th {
  text-align: left; padding: 0 18px 14px 0; border-bottom: 2px solid var(--navy);
  font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--navy); vertical-align: bottom;
}
.tbl td { padding: 19px 18px 19px 0; border-bottom: 1px solid var(--line); color: var(--body-copy); line-height: 1.66; vertical-align: top; }
.tbl td strong { color: var(--navy); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background .16s; }
.tbl tbody tr:hover { background: var(--lime-wash); }
.bone .tbl td { border-color: var(--bone-line); }

/* ---------- the EPX IT sideline, deliberately quiet ---------- */
.sideline { background: var(--bone); border-top: 1px solid var(--bone-line); border-bottom: 1px solid var(--bone-line); padding: 52px 0; }
.sideline-inner { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.6fr) auto; gap: 44px; align-items: center; }
.sideline h2 { font-size: 1.4rem; font-weight: 700; max-width: 20ch; }
.sideline-cols { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; font-size: 14px; color: var(--body-copy); }
.sideline-cols b { display: block; margin-bottom: 6px; color: var(--navy); font-size: 14.5px; }
.sideline-cols b a { border-bottom: 1.5px solid var(--lime); transition: color .16s; }
.sideline-cols b a:hover { color: var(--lime-deep); }

/* ---------- credentials ---------- */
.creds { padding: 46px 0; border-top: 1px solid var(--line); }
.creds-inner { display: grid; grid-template-columns: 1.15fr repeat(4,1fr); gap: 26px; align-items: center; }
.creds-title { font: 700 15.5px/1.4 var(--sans); color: var(--navy); }
.creds-title span { display: block; margin-top: 7px; font: 400 13px/1.5 var(--sans); color: var(--body-copy); }
.cred { min-height: 80px; display: grid; place-items: center; padding: 4px 14px; border-left: 1px solid var(--line); }
.cred img { max-width: 96px; max-height: 70px; object-fit: contain; filter: grayscale(1) opacity(.5); transition: filter .25s; }
.cred:hover img { filter: none; }

/* ---------- FAQ ---------- */
.faq { margin-top: 46px; border-top: 1px solid var(--line); }
.bone .faq, .bone .faq details { border-color: var(--bone-line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 24px 48px 24px 0;
  font: 700 17.5px/1.4 var(--sans); color: var(--navy); letter-spacing: -0.022em;
  transition: color .16s;
}
.faq summary:hover { color: var(--lime-deep); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after,
.faq summary::before {
  content: ""; position: absolute; right: 6px; top: 50%;
  background: var(--lime-deep); transition: transform .22s var(--ease), opacity .22s;
}
.faq summary::after { width: 15px; height: 2px; margin-top: -1px; }
.faq summary::before { width: 2px; height: 15px; margin-top: -7.5px; right: 12.5px; }
.faq details[open] summary::before { transform: scaleY(0); opacity: 0; }
.faq details > div { padding: 0 60px 28px 0; max-width: 62ch; font-size: 15.5px; line-height: 1.72; color: var(--body-copy); }
.faq details > div p + p { margin-top: 14px; }

/* ---------- final CTA ---------- */
.final {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 104px 0; text-align: center; color: #fff;
  background: var(--ink);
}
.final::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("images/skyline-city.jpg") center 62%/cover no-repeat;
  opacity: .3;
}
.final::after {
  content: ""; position: absolute; z-index: 0; left: -14%; bottom: -46%;
  width: 720px; height: 720px;
  background: url("brand/ghost-x-lime.svg") no-repeat center/contain;
  opacity: .09; animation: x-drift 50s ease-in-out infinite;
}
.final .wrap { position: relative; z-index: 2; }
.final .eyebrow { justify-content: center; }
.final h2 { color: #fff; max-width: 26ch; margin-inline: auto; }
.final p { max-width: 60ch; margin: 22px auto 34px; color: rgba(255,255,255,.86); }
.final-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px; }

/* ---------- footer ---------- */
footer { background: var(--ink); color: rgba(255,255,255,.68); padding: 62px 0 30px; font-size: 14px; }
.foot-grid { display: grid; grid-template-columns: 1.3fr repeat(3,1fr) 1.15fr; gap: 36px; padding-bottom: 38px; border-bottom: 1px solid rgba(255,255,255,.13); }
.foot-logo { display: block; height: 24px; width: auto; margin-bottom: 20px; }
.foot-grid h4 { color: #fff; margin-bottom: 17px; font: 500 10.5px/1 var(--mono); letter-spacing: 0.15em; text-transform: uppercase; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin-bottom: 10px; }
.foot-grid a:hover { color: var(--lime); }
.foot-about { max-width: 40ch; }
.foot-about p { margin-top: 0; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 26px; font-size: 12.5px; color: rgba(255,255,255,.5); }

/* concept banner, remove before any real publish */
.concept-flag { background: var(--red); color: #fff; text-align: center; padding: 10px 20px; font: 500 11px/1.5 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }

/* =========================================================================
   ENTRANCE. Opt in via .motion-ready, added by JS, so if the script never
   runs the text is simply visible rather than stuck invisible.
   ========================================================================= */
.motion-ready .hero-rise { opacity: 0; animation: rise .8s var(--ease) forwards; }
.motion-ready .hero-rise-1 { animation-delay: .05s; }
.motion-ready .hero-rise-2 { animation-delay: .38s; }
.motion-ready .hero-rise-3 { animation-delay: .5s; }
@keyframes rise { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }

.hero h1 .w { display: inline-block; --i: 0; }
.motion-ready .hero h1 .w {
  opacity: 0; transform: translateY(.45em);
  animation: word-in .62s var(--ease) forwards;
  animation-delay: calc(.08s + var(--i, 0) * .042s);
}
@keyframes word-in { to { opacity: 1; transform: none; } }

.hero-foot-row div { --i: 0; }
.motion-ready .hero-foot-row div {
  opacity: 0; animation: rise .7s var(--ease) forwards;
  animation-delay: calc(.75s + var(--i, 0) * .1s);
}

/* reveal on scroll, applied to sections by the same small script */
.motion-ready .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.motion-ready .reveal.in { opacity: 1; transform: none; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1080px) {
  .pillars { grid-template-columns: 1fr; }
  .paths, .steps, .grid-rules.c3 { grid-template-columns: 1fr 1fr; }
  .hero-figure { width: 40%; }
}

@media (max-width: 1080px) {
  .section-head { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .section-head h2 { max-width: 24ch; }
}

@media (max-width: 860px) {
  :root { --gutter: 20px; }
  section { padding: 64px 0; }
  h1 { font-size: clamp(2.1rem, 8vw, 2.8rem); max-width: none; }
  h2 { font-size: clamp(1.65rem, 6vw, 2.1rem); max-width: none; }

  .nav { min-height: 62px; gap: 14px; }
  .lockup img { height: 20px; }
  .nav-toggle { display: block; }

  /* the links become a panel under the bar rather than disappearing.
     Version 2 simply hid them, which left mobile with no navigation at all. */
  .nav-links {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 22px;
    background: var(--ink); border-bottom: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 22px 40px rgba(0,0,0,.35);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .2s var(--ease), transform .22s var(--ease), visibility .22s;
  }
  .site-header.open .nav-links { opacity: 1; visibility: visible; transform: none; }
  .nav-links a:not(.btn) {
    padding: 15px 0; font-size: 16px; font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .nav-links a:not(.btn)::after { display: none; }

  /* dropdowns become plain stacked groups on a phone. No hover on touch. */
  .nav-group { position: static; }
  .nav-group::after { display: none; }
  .nav-parent {
    width: 100%; justify-content: space-between; padding: 16px 0 8px;
    font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
    color: var(--lime); cursor: default; pointer-events: none;
  }
  .nav-parent::before, .nav-parent::after { display: none; }
  .nav-panel {
    position: static; width: auto; padding: 0; opacity: 1; visibility: visible;
    transform: none; background: none; border: 0; box-shadow: none;
  }
  .nav-panel a { padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.1); border-radius: 0; }
  .nav-panel a:hover { background: none; }
  .nav-panel a b { font-size: 15.5px; }
  .nav-panel a i { display: none; }
  .nav-panel-foot { margin-top: 0; border-top: 0; padding-top: 13px !important; }
  .nav-links .btn { margin-top: 18px; width: 100%; min-height: 50px; font-size: 14px; }

  /* the hero photo belongs under the headline on a phone, not above it */
  .hero { display: flex; flex-direction: column; padding-top: 44px; }
  .hero-grid { order: 1; }
  .hero-figure { order: 2; }
  .hero-foot  { order: 3; }

  .hero { padding: 52px 0 0; }
  .hero-figure { position: relative; width: auto; height: 240px; margin: 30px 0 0; }
  .hero-figure::after { background: linear-gradient(to top, rgba(7,22,52,.6) 0%, rgba(7,22,52,.05) 55%); }
  .hero::before { width: 620px; height: 620px; left: -30%; top: -6%; }
  .hero-grid { padding-bottom: 0; }
  .hero-inner { max-width: none; }
  .hero-actions { gap: 16px; }
  .hero-actions .btn { width: 100%; }
  .hero-foot-row { grid-template-columns: 1fr 1fr; }
  .hero-foot-row div,
  .hero-foot-row div + div { padding: 22px 18px 22px 0; }
  .hero-foot-row div:nth-child(2n) { border-right: 0; padding-left: 18px; }
  .hero-foot-row div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.11); }

  .phero { padding: 48px 0 56px; }
  .phero::before { width: 520px; height: 520px; right: -30%; }

  .split, .qa-inner, .sideline-inner { grid-template-columns: 1fr; gap: 28px; }
  .lead, .prose, .qa p, .section-intro { max-width: none; }
  .grid-rules, .grid-rules.c2, .grid-rules.c3,
  .paths, .steps { grid-template-columns: 1fr; gap: 16px; margin-top: 34px; }
  .grid-rules > * { padding: 26px 24px 28px; }
  .pillars { gap: 16px; margin-top: 34px; }
  .pillar { padding: 30px 26px 28px; border-radius: 28px 0 28px 28px; }
  .pillar-num b { font-size: 2.3rem; }
  .pillar h3 { font-size: 1.24rem; }

  .rung { grid-template-columns: 1fr; gap: 9px; }
  .creds-inner { grid-template-columns: 1fr 1fr; }
  .creds-title { grid-column: 1 / -1; }
  .cred { border-left: 0; border-top: 1px solid var(--line); min-height: 68px; }

  .tbl { display: block; }
  .tbl thead { display: none; }
  .tbl tr { display: block; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .tbl td { display: block; padding: 5px 0; border: 0; }
  .tbl td:first-child { font-weight: 600; }

  .faq summary { padding: 20px 44px 20px 0; font-size: 16px; }
  .faq details > div { padding-right: 20px; }

  .final { padding: 72px 0; }
  .final-actions .btn { width: 100%; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .foot-about { grid-column: 1 / -1; max-width: none; }
}

/* Motion is a nicety. Anyone who has asked for less of it gets none. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero::before, .phero::before, .final::after { animation: none; }
  .motion-ready .hero-rise,
  .motion-ready .hero h1 .w,
  .motion-ready .hero-foot-row div { opacity: 1; transform: none; animation: none; }
  .motion-ready .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .pillar:hover, .path:hover, .grid-rules > *:hover { transform: none; }
}

/* =========================================================================
   VERSION 3 ADDITIONS
   From Mark's review of 31 July. Three findings acted on:
     1. The four "about us" facts under the hero were doing no work. They are
        now four buying triggers, which is the strip's real job.
     2. The page read as a compliance practice with AI attached. Envelope
        decision 3 says ambition leads and governance is the proof, so the
        ambition content that was missing entirely is now first.
     3. One photograph and no data graphics for 1,600 words. Added a pillar
        progression diagram, a certification ladder and a stat band.
   ========================================================================= */

/* ---------- trigger strip, replaces the fact strip under the hero ---------- */
.triggers {
  position: relative; z-index: 3;
  background: rgba(255,255,255,.05);
  border-top: 1px solid rgba(255,255,255,.12);
}
.triggers-row { display: grid; grid-template-columns: repeat(4,1fr); }
.trigger {
  padding: 28px 30px 30px 0; --i: 0;
  border-right: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.94); font: 500 14.5px/1.55 var(--sans);
}
.trigger + .trigger { padding-left: 30px; }
.trigger:last-child { border-right: 0; }
.trigger span {
  display: block; margin-bottom: 12px;
  font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lime);
}
/* the icon gets its own line, because these marks need room to read */
.trigger .ico { display: block; margin-bottom: 14px; }
.trigger span::before { display: none; }   /* superseded by the icon */
.motion-ready .trigger { opacity: 0; animation: rise .7s var(--ease) forwards; animation-delay: calc(.75s + var(--i,0) * .1s); }

/* ---------- stat band ---------- */
.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 44px; }
.stat { padding: 30px 28px 32px; background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 2px 0 2px 2px; }
.bone .stat, section:not(.dark) .stat { background: var(--ink); border-color: var(--ink); }
.stat b {
  display: block; font: 800 clamp(2.6rem,4vw,3.5rem)/1 var(--sans);
  letter-spacing: -.06em; color: var(--lime);
}
.stat span { display: block; margin-top: 14px; color: #fff; font: 600 15px/1.4 var(--sans); }
.stat i { display: block; margin-top: 8px; font-style: normal; font: 400 13px/1.55 var(--sans); color: rgba(255,255,255,.62); }

/* ---------- inline SVG graphics ---------- */
.figure-wrap { margin-top: 44px; }
.figure-wrap svg { display: block; width: 100%; height: auto; }
.figure-cap {
  margin-top: 20px; max-width: 66ch;
  font: 400 13.5px/1.65 var(--sans); color: var(--mid-grey);
}
.dark .figure-cap { color: rgba(255,255,255,.5); }

/* ladder graphic states */
.lad-held { fill: var(--lime); }
.lad-prog { fill: #6d7fae; }
.lad-offer { fill: #3c4c7d; }

/* citations to primary sources. GEO rewards corroboration, and there were none. */
.cite { color: inherit; border-bottom: 1px solid rgba(155,197,94,.55); }
.cite:hover { border-bottom-color: var(--lime); color: var(--lime-deep); }
.dark .cite:hover, .on-dark .cite:hover { color: var(--lime); }

@media (max-width: 860px) {
  .triggers-row { grid-template-columns: 1fr 1fr; }
  .trigger, .trigger + .trigger { padding: 22px 18px 22px 0; }
  .trigger:nth-child(2n) { border-right: 0; padding-left: 18px; }
  .trigger:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.12); }
  .stats { grid-template-columns: 1fr; gap: 14px; margin-top: 34px; }
  .stat { padding: 24px 22px 26px; }
  .figure-wrap { margin-top: 34px; }
}

/* =========================================================================
   ICONS
   The real EPX brand icons, copied unchanged from
   reference/brand/icon blue/named. assets/icons/SOURCE.txt records the map.

   HISTORY, so nobody repeats it: these were first rendered with mask-image so
   one file could be tinted with currentColor. That produced an empty box in
   Chromium and Mark spotted the icons were missing. Masks are not reliable
   enough here, so each icon is instead recoloured at build time into two
   variants and drawn with background-image, which is verified to work:
     <name>-deep.png   deep green, for the light sections
     <name>-lime.png   lime, for the ink sections
   The dark variant is selected by CSS context, so the markup stays the same
   wherever an icon appears.
   ========================================================================= */

.ico {
  display: inline-block; flex: none;
  width: 38px; height: 38px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.ico-sm { width: 26px; height: 26px; }
.ico-lg { width: 48px; height: 48px; }

/* deep green by default, for the light sections */
.ico-accountancy { background-image: url("icons/accountancy-deep.png"); }
.ico-ambition { background-image: url("icons/ambition-deep.png"); }
.ico-answered { background-image: url("icons/answered-deep.png"); }
.ico-assess { background-image: url("icons/assess-deep.png"); }
.ico-blocked { background-image: url("icons/blocked-deep.png"); }
.ico-call { background-image: url("icons/call-deep.png"); }
.ico-capacity { background-image: url("icons/capacity-deep.png"); }
.ico-certificate { background-image: url("icons/certificate-deep.png"); }
.ico-connectivity { background-image: url("icons/connectivity-deep.png"); }
.ico-development { background-image: url("icons/development-deep.png"); }
.ico-enablement { background-image: url("icons/enablement-deep.png"); }
.ico-faster { background-image: url("icons/faster-deep.png"); }
.ico-financial { background-image: url("icons/financial-deep.png"); }
.ico-governance { background-image: url("icons/governance-deep.png"); }
.ico-ladder { background-image: url("icons/ladder-deep.png"); }
.ico-leak { background-image: url("icons/leak-deep.png"); }
.ico-legal { background-image: url("icons/legal-deep.png"); }
.ico-partnership { background-image: url("icons/partnership-deep.png"); }
.ico-programme { background-image: url("icons/programme-deep.png"); }
.ico-projects { background-image: url("icons/projects-deep.png"); }
.ico-proof { background-image: url("icons/proof-deep.png"); }
.ico-recognition { background-image: url("icons/recognition-deep.png"); }
.ico-size { background-image: url("icons/size-deep.png"); }
.ico-standard { background-image: url("icons/standard-deep.png"); }
.ico-support { background-image: url("icons/support-deep.png"); }
.ico-team-growth { background-image: url("icons/team-growth-deep.png"); }
.ico-timing { background-image: url("icons/timing-deep.png"); }
.ico-trapped { background-image: url("icons/trapped-deep.png"); }
.ico-exposure { background-image: url("icons/exposure-deep.png"); }
.ico-stalled { background-image: url("icons/stalled-deep.png"); }
.ico-transformation { background-image: url("icons/transformation-deep.png"); }
.ico-users { background-image: url("icons/users-deep.png"); }
.ico-workload { background-image: url("icons/workload-deep.png"); }
.ico-years { background-image: url("icons/years-deep.png"); }

/* lime on the ink surfaces */
.dark .ico-accountancy, .triggers .ico-accountancy, .pillar .ico-accountancy, .on-dark .ico-accountancy,
.dark .ico-ambition, .triggers .ico-ambition, .pillar .ico-ambition, .on-dark .ico-ambition,
.dark .ico-answered, .triggers .ico-answered, .pillar .ico-answered, .on-dark .ico-answered,
.dark .ico-assess, .triggers .ico-assess, .pillar .ico-assess, .on-dark .ico-assess,
.dark .ico-blocked, .triggers .ico-blocked, .pillar .ico-blocked, .on-dark .ico-blocked,
.dark .ico-call, .triggers .ico-call, .pillar .ico-call, .on-dark .ico-call,
.dark .ico-capacity, .triggers .ico-capacity, .pillar .ico-capacity, .on-dark .ico-capacity,
.dark .ico-certificate, .triggers .ico-certificate, .pillar .ico-certificate, .on-dark .ico-certificate,
.dark .ico-connectivity, .triggers .ico-connectivity, .pillar .ico-connectivity, .on-dark .ico-connectivity,
.dark .ico-development, .triggers .ico-development, .pillar .ico-development, .on-dark .ico-development,
.dark .ico-enablement, .triggers .ico-enablement, .pillar .ico-enablement, .on-dark .ico-enablement,
.dark .ico-faster, .triggers .ico-faster, .pillar .ico-faster, .on-dark .ico-faster,
.dark .ico-financial, .triggers .ico-financial, .pillar .ico-financial, .on-dark .ico-financial,
.dark .ico-governance, .triggers .ico-governance, .pillar .ico-governance, .on-dark .ico-governance,
.dark .ico-ladder, .triggers .ico-ladder, .pillar .ico-ladder, .on-dark .ico-ladder,
.dark .ico-leak, .triggers .ico-leak, .pillar .ico-leak, .on-dark .ico-leak,
.dark .ico-legal, .triggers .ico-legal, .pillar .ico-legal, .on-dark .ico-legal,
.dark .ico-partnership, .triggers .ico-partnership, .pillar .ico-partnership, .on-dark .ico-partnership,
.dark .ico-programme, .triggers .ico-programme, .pillar .ico-programme, .on-dark .ico-programme,
.dark .ico-projects, .triggers .ico-projects, .pillar .ico-projects, .on-dark .ico-projects,
.dark .ico-proof, .triggers .ico-proof, .pillar .ico-proof, .on-dark .ico-proof,
.dark .ico-recognition, .triggers .ico-recognition, .pillar .ico-recognition, .on-dark .ico-recognition,
.dark .ico-size, .triggers .ico-size, .pillar .ico-size, .on-dark .ico-size,
.dark .ico-standard, .triggers .ico-standard, .pillar .ico-standard, .on-dark .ico-standard,
.dark .ico-support, .triggers .ico-support, .pillar .ico-support, .on-dark .ico-support,
.dark .ico-team-growth, .triggers .ico-team-growth, .pillar .ico-team-growth, .on-dark .ico-team-growth,
.dark .ico-timing, .triggers .ico-timing, .pillar .ico-timing, .on-dark .ico-timing,
.dark .ico-trapped, .triggers .ico-trapped, .pillar .ico-trapped, .on-dark .ico-trapped,
.dark .ico-exposure, .triggers .ico-exposure, .pillar .ico-exposure, .on-dark .ico-exposure,
.dark .ico-stalled, .triggers .ico-stalled, .pillar .ico-stalled, .on-dark .ico-stalled,
.dark .ico-transformation, .triggers .ico-transformation, .pillar .ico-transformation, .on-dark .ico-transformation,
.dark .ico-users, .triggers .ico-users, .pillar .ico-users, .on-dark .ico-users,
.dark .ico-workload, .triggers .ico-workload, .pillar .ico-workload, .on-dark .ico-workload,
.dark .ico-years, .triggers .ico-years, .pillar .ico-years, .on-dark .ico-years {
  /* placeholder, overridden per icon below */
}
.dark .ico-accountancy, .triggers .ico-accountancy, .pillar .ico-accountancy, .on-dark .ico-accountancy { background-image: url("icons/accountancy-lime.png"); }
.dark .ico-ambition, .triggers .ico-ambition, .pillar .ico-ambition, .on-dark .ico-ambition { background-image: url("icons/ambition-lime.png"); }
.dark .ico-answered, .triggers .ico-answered, .pillar .ico-answered, .on-dark .ico-answered { background-image: url("icons/answered-lime.png"); }
.dark .ico-assess, .triggers .ico-assess, .pillar .ico-assess, .on-dark .ico-assess { background-image: url("icons/assess-lime.png"); }
.dark .ico-blocked, .triggers .ico-blocked, .pillar .ico-blocked, .on-dark .ico-blocked { background-image: url("icons/blocked-lime.png"); }
.dark .ico-call, .triggers .ico-call, .pillar .ico-call, .on-dark .ico-call { background-image: url("icons/call-lime.png"); }
.dark .ico-capacity, .triggers .ico-capacity, .pillar .ico-capacity, .on-dark .ico-capacity { background-image: url("icons/capacity-lime.png"); }
.dark .ico-certificate, .triggers .ico-certificate, .pillar .ico-certificate, .on-dark .ico-certificate { background-image: url("icons/certificate-lime.png"); }
.dark .ico-connectivity, .triggers .ico-connectivity, .pillar .ico-connectivity, .on-dark .ico-connectivity { background-image: url("icons/connectivity-lime.png"); }
.dark .ico-development, .triggers .ico-development, .pillar .ico-development, .on-dark .ico-development { background-image: url("icons/development-lime.png"); }
.dark .ico-enablement, .triggers .ico-enablement, .pillar .ico-enablement, .on-dark .ico-enablement { background-image: url("icons/enablement-lime.png"); }
.dark .ico-faster, .triggers .ico-faster, .pillar .ico-faster, .on-dark .ico-faster { background-image: url("icons/faster-lime.png"); }
.dark .ico-financial, .triggers .ico-financial, .pillar .ico-financial, .on-dark .ico-financial { background-image: url("icons/financial-lime.png"); }
.dark .ico-governance, .triggers .ico-governance, .pillar .ico-governance, .on-dark .ico-governance { background-image: url("icons/governance-lime.png"); }
.dark .ico-ladder, .triggers .ico-ladder, .pillar .ico-ladder, .on-dark .ico-ladder { background-image: url("icons/ladder-lime.png"); }
.dark .ico-leak, .triggers .ico-leak, .pillar .ico-leak, .on-dark .ico-leak { background-image: url("icons/leak-lime.png"); }
.dark .ico-legal, .triggers .ico-legal, .pillar .ico-legal, .on-dark .ico-legal { background-image: url("icons/legal-lime.png"); }
.dark .ico-partnership, .triggers .ico-partnership, .pillar .ico-partnership, .on-dark .ico-partnership { background-image: url("icons/partnership-lime.png"); }
.dark .ico-programme, .triggers .ico-programme, .pillar .ico-programme, .on-dark .ico-programme { background-image: url("icons/programme-lime.png"); }
.dark .ico-projects, .triggers .ico-projects, .pillar .ico-projects, .on-dark .ico-projects { background-image: url("icons/projects-lime.png"); }
.dark .ico-proof, .triggers .ico-proof, .pillar .ico-proof, .on-dark .ico-proof { background-image: url("icons/proof-lime.png"); }
.dark .ico-recognition, .triggers .ico-recognition, .pillar .ico-recognition, .on-dark .ico-recognition { background-image: url("icons/recognition-lime.png"); }
.dark .ico-size, .triggers .ico-size, .pillar .ico-size, .on-dark .ico-size { background-image: url("icons/size-lime.png"); }
.dark .ico-standard, .triggers .ico-standard, .pillar .ico-standard, .on-dark .ico-standard { background-image: url("icons/standard-lime.png"); }
.dark .ico-support, .triggers .ico-support, .pillar .ico-support, .on-dark .ico-support { background-image: url("icons/support-lime.png"); }
.dark .ico-team-growth, .triggers .ico-team-growth, .pillar .ico-team-growth, .on-dark .ico-team-growth { background-image: url("icons/team-growth-lime.png"); }
.dark .ico-timing, .triggers .ico-timing, .pillar .ico-timing, .on-dark .ico-timing { background-image: url("icons/timing-lime.png"); }
.dark .ico-trapped, .triggers .ico-trapped, .pillar .ico-trapped, .on-dark .ico-trapped { background-image: url("icons/trapped-lime.png"); }
.dark .ico-exposure, .triggers .ico-exposure, .pillar .ico-exposure, .on-dark .ico-exposure { background-image: url("icons/exposure-lime.png"); }
.dark .ico-stalled, .triggers .ico-stalled, .pillar .ico-stalled, .on-dark .ico-stalled { background-image: url("icons/stalled-lime.png"); }
.dark .ico-transformation, .triggers .ico-transformation, .pillar .ico-transformation, .on-dark .ico-transformation { background-image: url("icons/transformation-lime.png"); }
.dark .ico-users, .triggers .ico-users, .pillar .ico-users, .on-dark .ico-users { background-image: url("icons/users-lime.png"); }
.dark .ico-workload, .triggers .ico-workload, .pillar .ico-workload, .on-dark .ico-workload { background-image: url("icons/workload-lime.png"); }
.dark .ico-years, .triggers .ico-years, .pillar .ico-years, .on-dark .ico-years { background-image: url("icons/years-lime.png"); }

/* Dave's note: numbered 01 02 03 counters everywhere are a giveaway. The icon
   now carries the slot on its own, so cards lead with the icon and the heading.
   Numbers survive only where they denote a real sequence. */
.card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.card-head .num { margin: 0; }

.pillar-num .ico { margin-left: auto; opacity: .9; }
.trigger .ico { display: block; margin-bottom: 14px; width: 36px; height: 36px; }
.sideline-cols .ico { margin-bottom: 8px; }
.step-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.step-head .step-num { margin: 0; }
.stat-ico { margin-bottom: 16px; }
.faq summary { display: flex; align-items: flex-start; gap: 13px; }
.faq summary .ico { margin-top: 1px; }
.creds-title { display: flex; align-items: flex-start; gap: 12px; }
.creds-title .ico { margin-top: 1px; }

/* ---------- imagery ---------- */
/* a full width photographic band, used to break up long text runs */
.photo-band {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 380px; display: grid; align-items: end;
  background: var(--ink);
}
.photo-band img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-band::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(7,22,52,.94) 0%, rgba(7,22,52,.74) 42%, rgba(7,22,52,.2) 78%, rgba(7,22,52,.1) 100%);
}
.photo-band .wrap { position: relative; z-index: 2; padding: 56px 0; }
.photo-band .lead { color: #fff; max-width: 26ch; }
.photo-band .eyebrow { color: var(--lime); }
.photo-band p.caption { margin-top: 18px; max-width: 46ch; color: rgba(255,255,255,.82); font-size: 15.5px; }

/* a photo beside content, used in the proof section */
.photo-figure {
  position: relative; overflow: hidden; border-radius: var(--cut);
  border: 1px solid var(--bone-line); min-height: 320px;
}
.photo-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-figure figcaption {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: 46px 26px 20px;
  background: linear-gradient(to top, rgba(7,22,52,.9), rgba(7,22,52,0));
  color: #fff; font: 500 13px/1.5 var(--sans);
}
.proof-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr); gap: 34px; align-items: stretch; margin-top: 44px; }

@media (max-width: 860px) {
  .ico { width: 32px; height: 32px; }
  .ico-sm { width: 24px; height: 24px; }
  .ico-lg { width: 38px; height: 38px; }
  .card-head { gap: 12px; margin-bottom: 16px; }
  .photo-band { min-height: 300px; }
  .photo-band .wrap { padding: 40px 0; }
  .proof-grid { grid-template-columns: 1fr; gap: 18px; }
  .photo-figure { min-height: 240px; border-radius: 28px 0 28px 28px; }
  .pillar-num .ico { width: 26px; height: 26px; }
}

/* second wave icon placements */

/* =========================================================================
   AI READINESS ASSESSMENT
   Runs natively in the page, so there is no iframe and no frame-ancestors
   problem. See assets/assessment.js for the question set and the reasoning.
   ========================================================================= */

.as-card {
  background: #fff; border: 1px solid var(--line); border-radius: 2px 0 2px 2px;
  padding: 48px 52px 44px; width: 100%;
}
.bone .as-card { border-color: var(--bone-line); }
.as-card h2 { font-size: clamp(1.7rem, 2.8vw, 2.35rem); max-width: 30ch; margin-top: 10px; }
.as-card h2:focus-visible { outline: 2px solid var(--lime-deep); outline-offset: 6px; }
.as-lede { margin-top: 18px; max-width: 62ch; color: var(--body-copy); font-size: 16.5px; line-height: 1.7; }
.as-help { margin-top: 12px; max-width: 60ch; color: var(--mid-grey); font-size: 14.5px; }

.as-list { margin: 24px 0 0; padding: 0; list-style: none; }
.as-list li {
  position: relative; padding-left: 26px; margin-bottom: 10px;
  color: var(--body-copy); font-size: 15px;
}
.as-list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--lime); border-bottom: 2px solid var(--lime);
  transform: rotate(-45deg);
}
.as-intro .btn { margin-top: 32px; }

/* progress */
.as-progress-head { display: flex; align-items: center; gap: 18px; }
.as-bar { flex: 1; height: 3px; background: var(--line); overflow: hidden; }
.as-bar span { display: block; height: 100%; background: var(--lime); transition: width .3s var(--ease); }
.as-q { margin-top: 22px; }

/* options */
.as-options { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 30px; }
.as-options.is-single { grid-template-columns: 1fr; }
.as-option {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 17px 20px; background: #fff;
  border: 1px solid var(--line); border-radius: 2px;
  font-family: var(--sans);
  transition: border-color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
}
.as-option:hover { border-color: var(--lime-deep); background: var(--lime-wash); transform: translateX(2px); }
.as-option:focus-visible { outline: 2px solid var(--lime-deep); outline-offset: 2px; }
.as-option.is-picked { border-color: var(--lime-deep); background: var(--lime-wash); }
.as-option b { display: block; font: 600 15.5px/1.45 var(--sans); color: var(--navy); }
.as-option i {
  display: block; margin-top: 5px; font-style: normal;
  font: 400 13.5px/1.55 var(--sans); color: var(--body-copy);
}
.as-back {
  margin-top: 26px; padding: 0; background: none; border: 0; cursor: pointer;
  font: 600 14px var(--sans); color: var(--mid-grey);
  border-bottom: 1px solid var(--line);
}
.as-back:hover { color: var(--navy); border-bottom-color: var(--navy); }

/* result */
.as-result h2 { max-width: 24ch; }
.as-dims { margin-top: 30px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.as-dim { display: grid; grid-template-columns: 240px 1fr 52px; gap: 20px; align-items: center; padding: 9px 0; }
.as-dim-l { font: 500 13px/1.4 var(--sans); color: var(--body-copy); }
.as-dim-bar { height: 8px; background: var(--line); }
.as-dim-bar span { display: block; height: 100%; background: var(--lime); }
.as-dim-v { font: 500 12.5px/1 var(--mono); color: var(--navy); text-align: right; }

.as-panel { margin-top: 24px; padding: 28px 30px; background: var(--bone); border-radius: 2px; }
.as-panels { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; margin-top: 24px; }
.as-panels .as-panel { margin-top: 0; }
.bone .as-panel { background: #f7f4ee; }
.as-panel h3 { margin-top: 9px; color: var(--navy); }
.as-panel p:not(.label) { margin-top: 11px; max-width: 60ch; color: var(--body-copy); font-size: 15px; line-height: 1.7; }
.as-panel .tlink { margin-top: 18px; }
.as-panel-flag { background: var(--lime-wash); border-left: 3px solid var(--lime); }

.as-actions { margin: 16px 0 0; padding-left: 22px; }
.as-actions li { margin-bottom: 12px; color: var(--body-copy); font-size: 15px; line-height: 1.7; }
.as-actions li::marker { color: var(--lime-deep); font-weight: 700; }

.as-sector { margin-top: 30px; }
.as-sector-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.as-chip {
  padding: 9px 15px; border: 1px solid var(--line); border-radius: 2px;
  font: 600 13.5px var(--sans); color: var(--navy);
  transition: border-color .16s, background .16s;
}
.as-chip:hover { border-color: var(--lime-deep); background: var(--lime-wash); }

.as-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 34px; }
.as-foot .as-back { margin-top: 0; }
.as-note { margin-top: 24px; max-width: 60ch; color: var(--mid-grey); font-size: 13.5px; line-height: 1.65; }

@media (max-width: 1000px) {
  .as-options { grid-template-columns: 1fr; }
  .as-panels { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .as-card { padding: 26px 20px 24px; }
  .as-dim { grid-template-columns: 1fr 44px; gap: 8px 12px; }
  .as-dim-l { grid-column: 1 / -1; }
  .as-panel { padding: 22px 20px; }
  .as-foot .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .as-bar span, .as-option { transition: none; }
  .as-option:hover { transform: none; }
}

/* =========================================================================
   CONTACT PAGE AND FORM
   Namespaced .cf- so nothing here can leak into another page or, if the
   concept is ported into a CMS, into the wider theme. The form is deliberately
   JavaScript free: validation is native HTML, and the page makes no outbound
   call of any kind. See 11-go-live-checklist.md before changing that.
   ========================================================================= */

.cf-layout {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr);
  gap: 6%;
  align-items: start;
}
.cf-form-col .section-intro { margin-bottom: 6px; }

/* ---------- the form ---------- */
.cf-form { margin-top: 38px; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cf-field { margin-bottom: 20px; }
.cf-field label {
  display: block; margin-bottom: 8px;
  font: 500 11.5px/1.4 var(--mono);
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--navy);
}
.cf-req { color: var(--lime-deep); }

.cf-field input,
.cf-field select,
.cf-field textarea {
  width: 100%; padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--line); border-radius: 2px 0 2px 2px;
  color: var(--charcoal);
  font: 400 15.5px/1.5 var(--sans);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.cf-field textarea { resize: vertical; min-height: 140px; }
.cf-field select { appearance: none; cursor: pointer; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235a5f6a' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px;
}
.cf-field input::placeholder,
.cf-field textarea::placeholder { color: var(--mid-grey); }
.cf-field input:hover,
.cf-field select:hover,
.cf-field textarea:hover { border-color: var(--bone-line); }
.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus {
  outline: none; border-color: var(--lime-deep);
  box-shadow: 0 0 0 3px rgba(155,197,94,.24);
}
.cf-help { margin-top: 9px; color: var(--mid-grey); font-size: 13px; line-height: 1.6; }

.cf-consent {
  display: grid; grid-template-columns: 20px 1fr; gap: 14px; align-items: start;
  margin: 4px 0 28px; padding: 20px 22px;
  background: var(--bone); border: 1px solid var(--bone-line); border-radius: 2px 0 2px 2px;
}
.cf-consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--lime-deep); }
.cf-consent label { margin: 0; font: 400 13.75px/1.62 var(--sans); letter-spacing: 0; text-transform: none; color: var(--body-copy); }
.cf-consent a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.cf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.cf-alt { max-width: 30ch; color: var(--mid-grey); font-size: 13.25px; line-height: 1.6; }

.cf-inline { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cf-inline:hover { color: var(--lime-deep); }
.on-dark .cf-inline, .dark .cf-inline { color: #fff; }

/* ---------- the details panel ---------- */
.cf-details { position: sticky; top: 96px; display: grid; gap: 18px; }
.cf-panel {
  padding: 34px 30px 30px;
  background: var(--ink); color: rgba(255,255,255,.76);
  border-radius: 2px 0 2px 2px; border-top: 3px solid var(--lime);
}
.cf-panel h3 { color: #fff; font-size: 1.18rem; margin-bottom: 26px; }
.cf-panel-alt { background: var(--bone); color: var(--body-copy); border-top-color: var(--navy); }
.cf-panel-alt h3 { color: var(--navy); margin-bottom: 14px; }
.cf-panel-alt p { font-size: 14.5px; line-height: 1.68; }
.cf-panel-alt .tlink { color: var(--navy); }

.cf-detail { display: grid; grid-template-columns: 26px 1fr; gap: 16px; align-items: start; padding: 18px 0; border-top: 1px solid var(--ink-3); }
.cf-detail:first-of-type { padding-top: 0; border-top: 0; }
.cf-detail .ico { margin-top: 2px; }
.cf-detail .label { color: var(--lime); }
.cf-detail p { margin-top: 7px; font-size: 14.5px; line-height: 1.6; }
.cf-strong { color: #fff; font: 600 16.5px/1.4 var(--sans); }
.cf-strong:hover { color: var(--lime); }
.cf-meta { color: rgba(255,255,255,.58); font-size: 13px !important; }
.cf-meta .cf-inline { color: rgba(255,255,255,.82); }
.cf-meta .cf-inline:hover { color: var(--lime); }
.cf-address { font-style: normal; color: rgba(255,255,255,.82); }

/* ---------- footer contact column ---------- */
.foot-contact address { margin-top: 16px; font-style: normal; line-height: 1.75; color: rgba(255,255,255,.6); font-size: 13.25px; }
.foot-contact .foot-legal { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.13); }
.foot-contact .foot-legal li { margin-bottom: 8px; font-size: 13.25px; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .cf-layout { grid-template-columns: 1fr; gap: 44px; }
  .cf-details { position: static; grid-template-columns: 1fr 1fr; align-items: start; }
  .foot-grid { grid-template-columns: 1.25fr repeat(2,1fr); gap: 34px; }
}

@media (max-width: 860px) {
  .cf-row { grid-template-columns: 1fr; gap: 0; }
  .cf-details { grid-template-columns: 1fr; }
  .cf-panel { padding: 28px 22px 26px; }
  .cf-actions .btn { width: 100%; }
  .cf-alt { max-width: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .foot-contact { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .cf-field input, .cf-field select, .cf-field textarea { transition: none; }
}


/* The details panel is an ink surface, so its icons need the lime colourway.
   The site's dark icon rule keys off .dark, .on-dark, .pillar and .triggers,
   and .cf-panel is none of those, so every icon is remapped here rather than
   only the five the page uses today. Read the icon history note further up
   before changing any of this to mask-image. */
.cf-panel:not(.cf-panel-alt) .ico-accountancy { background-image: url("icons/accountancy-lime.png"); }
.cf-panel:not(.cf-panel-alt) .ico-ambition { background-image: url("icons/ambition-lime.png"); }
.cf-panel:not(.cf-panel-alt) .ico-answered { background-image: url("icons/answered-lime.png"); }
.cf-panel:not(.cf-panel-alt) .ico-assess { background-image: url("icons/assess-lime.png"); }
.cf-panel:not(.cf-panel-alt) .ico-blocked { background-image: url("icons/blocked-lime.png"); }
.cf-panel:not(.cf-panel-alt) .ico-call { background-image: url("icons/call-lime.png"); }
.cf-panel:not(.cf-panel-alt) .ico-capacity { background-image: url("icons/capacity-lime.png"); }
.cf-panel:not(.cf-panel-alt) .ico-certificate { background-image: url("icons/certificate-lime.png"); }
.cf-panel:not(.cf-panel-alt) .ico-connectivity { background-image: url("icons/connectivity-lime.png"); }
.cf-panel:not(.cf-panel-alt) .ico-development { background-image: url("icons/development-lime.png"); }
.cf-panel:not(.cf-panel-alt) .ico-enablement { background-image: url("icons/enablement-lime.png"); }
.cf-panel:not(.cf-panel-alt) .ico-faster { background-image: url("icons/faster-lime.png"); }
.cf-panel:not(.cf-panel-alt) .ico-financial { background-image: url("icons/financial-lime.png"); }
.cf-panel:not(.cf-panel-alt) .ico-governance { background-image: url("icons/governance-lime.png"); }
.cf-panel:not(.cf-panel-alt) .ico-ladder { background-image: url("icons/ladder-lime.png"); }
.cf-panel:not(.cf-panel-alt) .ico-leak { background-image: url("icons/leak-lime.png"); }
.cf-panel:not(.cf-panel-alt) .ico-legal { background-image: url("icons/legal-lime.png"); }
.cf-panel:not(.cf-panel-alt) .ico-partnership { background-image: url("icons/partnership-lime.png"); }
.cf-panel:not(.cf-panel-alt) .ico-programme { background-image: url("icons/programme-lime.png"); }
.cf-panel:not(.cf-panel-alt) .ico-projects { background-image: url("icons/projects-lime.png"); }
.cf-panel:not(.cf-panel-alt) .ico-proof { background-image: url("icons/proof-lime.png"); }
.cf-panel:not(.cf-panel-alt) .ico-recognition { background-image: url("icons/recognition-lime.png"); }
.cf-panel:not(.cf-panel-alt) .ico-size { background-image: url("icons/size-lime.png"); }
.cf-panel:not(.cf-panel-alt) .ico-standard { background-image: url("icons/standard-lime.png"); }
.cf-panel:not(.cf-panel-alt) .ico-support { background-image: url("icons/support-lime.png"); }
.cf-panel:not(.cf-panel-alt) .ico-team-growth { background-image: url("icons/team-growth-lime.png"); }
.cf-panel:not(.cf-panel-alt) .ico-timing { background-image: url("icons/timing-lime.png"); }
.cf-panel:not(.cf-panel-alt) .ico-transformation { background-image: url("icons/transformation-lime.png"); }
.cf-panel:not(.cf-panel-alt) .ico-users { background-image: url("icons/users-lime.png"); }
.cf-panel:not(.cf-panel-alt) .ico-workload { background-image: url("icons/workload-lime.png"); }
.cf-panel:not(.cf-panel-alt) .ico-years { background-image: url("icons/years-lime.png"); }