/* Etherean — brand palette sheet 7A: Twilight blue #2C3E66 (primary, Empower),
   Enchanted pink #D6598A (Envision), Deep teal #1F6F6B (Elucidate), Warm ivory #F5F1EC.
   No pale tints on the website (Word documents only). White text on twilight and teal;
   dark ink on pink and ivory. Flat design: no gradients or shadows. Logos are the approved image files only. */
:root {
  --ivory: #F5F1EC;
  --twilight: #2C3E66;
  --pink: #D6598A;
  --teal: #1F6F6B;
  --ink: #1A1A1A;
  --white: #FFFFFF;
  --muted: #4A5570;
  --line: #E4DED6;          /* hairline on ivory */
  --line-w: #ECE8E2;        /* hairline on white */
  --line-d: rgba(245, 241, 236, .16);
  --deep: #2C3E66;          /* dark-section cards sit on twilight (brand colours only) */

  --disp: "Space Grotesk", system-ui, sans-serif;
  --body: "Manrope", system-ui, sans-serif;

  --wrap: 1240px;
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --shadow: none;           /* flat design: no shadows */
  --shadow-lg: none;

  --accent: var(--pink);
  --on-accent: var(--ink);
}
.t-envision  { --accent: var(--pink);     --on-accent: var(--ink); }
.t-elucidate { --accent: var(--teal);     --on-accent: var(--white); }
.t-empower   { --accent: var(--twilight); --on-accent: var(--white); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 150px; }
body {
  margin: 0; background: var(--ivory); color: var(--ink);
  font-family: var(--body); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--twilight); text-underline-offset: 3px; }
a:hover { color: var(--pink); }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 32px; }
@media (max-width: 700px) { .wrap { padding-inline: 16px; } }

h1, h2, h3, h4 { font-family: var(--disp); color: var(--twilight); line-height: 1.08; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 700; }
h1 { font-size: clamp(2.5rem, 5.4vw, 4.4rem); text-wrap: balance; }
h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); text-wrap: balance; }
h3 { font-size: 1.3rem; letter-spacing: -.01em; line-height: 1.25; text-wrap: balance; }
h1 em, h2 em { font-style: normal; color: var(--pink); }
p { margin: 0 0 1em; }
.lede { font-size: clamp(1.08rem, 1.5vw, 1.25rem); color: var(--muted); max-width: 60ch; line-height: 1.55; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--disp); font-weight: 700; font-size: .78rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--twilight); margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 22px; height: 3px; background: var(--accent); border-radius: 2px; }
.t-empower .eyebrow::before { background: var(--pink); }
.dark .eyebrow { color: var(--ivory); }
.dark .eyebrow::before { background: var(--pink); }
.center { text-align: center; }
.center .lede, .section-head.center { margin-inline: auto; }
.center .eyebrow { justify-content: center; }

/* ---------- Header / mega menu ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--ivory); border-bottom: 1px solid var(--line); }
.site-header > .wrap { display: flex; align-items: center; height: 80px; gap: 28px; }
.brand img { height: 88px; width: auto; max-width: none; margin: -4px 0 -4px -18px; }
.nav { display: flex; align-items: center; gap: 4px; flex: 1; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-cta { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.nav-link, .has-menu > button {
  font: inherit; font-weight: 600; font-size: .95rem; color: var(--ink); background: none; border: 0;
  text-decoration: none; padding: 10px 14px; border-radius: var(--r-sm); cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.nav-link:hover, .has-menu > button:hover { color: var(--pink); }
.nav-link[aria-current="page"], .has-menu > button[aria-current="page"] { color: var(--twilight); text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.has-menu > button svg { transition: transform .2s; }
.has-menu.open > button svg { transform: rotate(180deg); }
.mega {
  position: absolute; left: 0; right: 0; top: 80px; background: var(--white);
  border-bottom: 1px solid var(--line);
  display: none;
}
.has-menu.open .mega { display: block; }
.mega .wrap { display: grid; grid-template-columns: 1fr 1fr 1fr 1.1fr; gap: 20px; padding-block: 28px 32px; }
.mega-card {
  display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: var(--r);
  text-decoration: none; color: var(--ink); border: 1px solid var(--line-w); transition: border-color .15s, background .15s;
}
.mega-card:hover { border-color: var(--accent); background: var(--ivory); color: var(--ink); }
.mega-card.t-empower:hover { border-color: var(--pink); }
.mega-card p { margin: 0; font-size: .92rem; color: var(--muted); }
.mega-card .incl { font-size: .82rem; color: var(--twilight); font-weight: 700; margin-top: auto; }
.mega-aside { background: var(--twilight); color: var(--ivory); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.mega-aside h4 { color: var(--ivory); font-size: 1.15rem; margin: 0; }
.mega-aside p { color: var(--ivory); opacity: .85; font-size: .92rem; margin: 0; }
.mega-aside a { color: var(--ivory); font-weight: 700; margin-top: auto; text-decoration: none; }
.mega-aside a:hover { color: var(--pink); }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px; cursor: pointer; color: var(--twilight); }

@media (max-width: 1199px) {
  .nav-toggle { display: block; }
  .nav { display: none; position: absolute; top: 80px; left: 0; right: 0; background: var(--ivory); flex-direction: column; align-items: stretch; padding: 12px 16px 24px; border-bottom: 1px solid var(--line); max-height: calc(100vh - 80px); overflow: auto; }
  .nav.open { display: flex; }
  .nav-links { flex-direction: column; align-items: stretch; }
  .nav-link, .has-menu > button { width: 100%; justify-content: space-between; padding: 14px 6px; font-size: 1.05rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .mega { position: static; box-shadow: none; border: 0; background: transparent; }
  .mega .wrap { grid-template-columns: 1fr; padding: 12px 0; }
  .mega-card { background: var(--white); }
  .mega-aside { display: none; }
  .nav-cta { margin: 18px 0 0; flex-direction: column; align-items: stretch; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
  font-family: var(--body); font-weight: 700; font-size: .95rem; line-height: 1;
  padding: 15px 24px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.btn svg { transition: transform .15s; }
.btn:hover svg { transform: translateX(3px); }
.btn-primary { background: var(--pink); color: var(--ink); }
.btn-primary:hover { background: var(--twilight); color: var(--white); }
.dark .btn-primary:hover, .cta-band .btn-primary:hover, .sub-panel .btn-primary:hover { background: var(--ivory); color: var(--ink); }
.btn-secondary { background: var(--twilight); color: var(--white); }
.btn-secondary:hover { background: var(--ink); color: var(--white); }
.btn-outline { border-color: var(--twilight); color: var(--twilight); }
.btn-outline:hover { background: var(--twilight); color: var(--white); }
.btn-sm { padding: 11px 18px; font-size: .9rem; }
.dark .btn-outline, .cta-band .btn-outline { border-color: var(--ivory); color: var(--ivory); }
.dark .btn-outline:hover, .cta-band .btn-outline:hover { background: var(--ivory); color: var(--twilight); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.link-arrow { font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; color: var(--twilight); transition: gap .15s; }
.link-arrow:hover { color: var(--pink); gap: 10px; }
.dark .link-arrow { color: var(--ivory); }

/* ---------- Sections ---------- */
section { padding-block: 120px; position: relative; }
@media (max-width: 700px) { section { padding-block: 72px; } }
.section-head { max-width: 780px; margin-bottom: 60px; }
.section-head.row { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; }
.section-head.row > div { max-width: 720px; }
.white { background: var(--white); }
.dark { background: var(--twilight); color: var(--ivory); }
.dark h1, .dark h2, .dark h3, .dark h4 { color: var(--ivory); }
.dark .lede, .dark p { color: var(--ivory); }
.dark .lede { opacity: .82; }

/* (E-bar watermark removed: logos are never redrawn) */
.bars-bg { overflow: hidden; }
.bars-bg > .wrap { position: relative; z-index: 1; }

/* ---------- Logos (approved PNG files from Logos/final, never redrawn) ---------- */
/* The PNGs include clear space: about 19% of their height on each side. */
.lockup { display: inline-block; line-height: 0; --lh: 92px; }
.lockup img { height: var(--lh); width: auto; max-width: none; margin: calc(var(--lh) * -.17) 0 calc(var(--lh) * -.17) calc(var(--lh) * -.19); }
.lockup.lg { --lh: 132px; }
.lockup.sm { --lh: 58px; }
@media (max-width: 600px) { .lockup { --lh: 76px; } .lockup.lg { --lh: 104px; } }
.mark-icon { width: 18px; height: auto; flex: 0 0 auto; }
.guide-cover .mark-icon { width: 46px; margin: -8px 0 0 -8px; }

/* ---------- Hero ---------- */
.hero { padding-block: 88px 112px; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.02fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 1000px) { .hero .wrap { grid-template-columns: 1fr; gap: 56px; } .hero { padding-block: 56px 80px; } }
.hero .lede { margin-top: 8px; }
.hero-note { margin-top: 26px; font-size: .92rem; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.hero-note svg { color: var(--teal); flex: 0 0 auto; }

.stage-panel {
  position: relative; background: var(--twilight); border-radius: var(--r-lg);
  min-height: 640px; overflow: hidden; box-shadow: var(--shadow-lg);
}
/* (Grid-line texture removed: flat design, and logos sit on plain brand colour.) */
/* Cards shown slightly smaller and staggered so the overlaps fall on card edges, not on text */
.stage-panel .pos { position: absolute; transform: scale(.82); }
.stage-panel .m1 { left: 26px; top: 26px; width: 56%; z-index: 1; transform-origin: top left; }
.stage-panel .m2 { right: 22px; top: 118px; width: 56%; z-index: 2; transform-origin: top right; }
.stage-panel .m3 { left: 40px; bottom: 30px; width: 54%; z-index: 3; transform-origin: bottom left; }
/* Laptops and wider: a zig-zag, centred as a group in the panel; titles stay visible */
@media (min-width: 1001px) { .stage-panel .m1 { left: 9.8%; top: 32px; } .stage-panel .m2 { right: 9.8%; top: 176px; } .stage-panel .m3 { left: 14.9%; bottom: 32px; } }
/* Phones: the same graphics appear in the services tabs below, so the hero shows text only */
@media (max-width: 600px) { .stage-panel { display: none; } }

/* ---------- Mockup cards (illustrative deliverables) ---------- */
.mock { background: var(--white); border-radius: var(--r); box-shadow: var(--shadow-lg); font-size: 12px; color: var(--ink); overflow: hidden; text-align: left; }
.mock-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line-w); }
.mock-title { font-family: var(--disp); font-weight: 700; font-size: 12.5px; color: var(--twilight); display: flex; align-items: center; gap: 8px; }
.mock-tag { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: var(--accent); color: var(--on-accent); white-space: nowrap; }
.mock-body { padding: 16px; }
.mock-label { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.mock-text { font-family: var(--disp); font-weight: 700; color: var(--twilight); font-size: 13px; line-height: 1.3; margin-bottom: 12px; }
.mock-line { height: 7px; border-radius: 4px; background: var(--ivory); margin-bottom: 6px; }
.mock-line.w60 { width: 60%; } .mock-line.w80 { width: 80%; } .mock-line.w45 { width: 45%; } .mock-line.w70 { width: 70%; }
.mock-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 4px; }
.mock-chip { display: inline-block; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); font-size: 10.5px; font-weight: 600; margin: 0 4px 5px 0; color: var(--twilight); }
.mock-chip.on { background: var(--pink); border-color: var(--pink); color: var(--ink); }
.mock-chip.off { text-decoration: line-through; color: var(--muted); }
.mock-measure { display: grid; grid-template-columns: 74px 1fr; gap: 8px; align-items: center; margin-bottom: 7px; font-size: 10.5px; color: var(--muted); }
.mock-measure span { height: 6px; border-radius: 3px; background: var(--ivory); position: relative; overflow: hidden; }
.mock-measure span::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v, 50%); background: var(--twilight); border-radius: 3px; }
.mock-prin { display: flex; gap: 8px; align-items: center; font-size: 10.5px; color: var(--ink); margin-bottom: 6px; font-weight: 600; }
.mock-prin::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pink); flex: 0 0 auto; }

.heat { display: grid; grid-template-columns: 96px repeat(5, 1fr); gap: 4px; align-items: center; }
.heat .h-row { font-size: 10.5px; font-weight: 600; color: var(--muted); }
.heat .h-col { font-size: 9.5px; text-align: center; color: var(--muted); font-weight: 700; }
.heat i { display: block; height: 18px; border-radius: 3px; background: var(--ivory); }
.heat i.on { background: var(--teal); }
.heat i.tgt { background: var(--white); box-shadow: inset 0 0 0 2px var(--pink); }
.mock-legend { display: flex; gap: 14px; margin-top: 12px; font-size: 10px; color: var(--muted); flex-wrap: wrap; }
.mock-legend b { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--teal); vertical-align: -1px; margin-right: 4px; }
.mock-legend b.t { background: var(--white); box-shadow: inset 0 0 0 2px var(--pink); }

.org { display: grid; gap: 0; justify-items: center; }
.org .node { background: var(--twilight); color: var(--white); font-weight: 700; font-size: 10.5px; padding: 8px 12px; border-radius: 8px; text-align: center; }
.org .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.org .row .node { background: var(--ivory); color: var(--twilight); border: 1px solid var(--line); }
.org .conn { width: 2px; height: 12px; background: var(--line); }
.raci { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 3px; margin-top: 14px; font-size: 10px; }
.raci > * { padding: 5px 4px; text-align: center; border-radius: 3px; }
.raci .rh { font-weight: 700; color: var(--muted); }
.raci .rl { text-align: left; color: var(--muted); font-weight: 600; }
.raci .r { background: var(--pink); color: var(--ink); font-weight: 700; }
.raci .a { background: var(--twilight); color: var(--white); font-weight: 700; }
.raci .c, .raci .i { background: var(--ivory); color: var(--twilight); font-weight: 700; }
.illus { position: absolute; right: 16px; bottom: 12px; font-size: 10.5px; color: var(--ivory); opacity: .7; letter-spacing: .04em; z-index: 4; }
.panel-visual .illus { color: var(--muted); }

/* ---------- Statement strip ---------- */
.strip { background: var(--twilight); color: var(--ivory); padding-block: 22px; }
.strip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 44px; }
.strip li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .95rem; }
.strip svg { color: var(--pink); flex: 0 0 auto; }

/* ---------- Tabs explorer ---------- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 36px; }
.tab {
  font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer; padding: 12px 22px; border-radius: 999px;
  background: transparent; border: 1.5px solid var(--line); color: var(--twilight); display: inline-flex; align-items: center; gap: 10px;
}
.tab:hover { border-color: var(--twilight); }
.tab[aria-selected="true"] { background: var(--twilight); border-color: var(--twilight); color: var(--white); }
.tab .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--white); }
.tab.t-empower .dot { background: var(--twilight); }
.tab.t-empower[aria-selected="true"] .dot { background: var(--pink); box-shadow: none; }
.panel {
  display: grid; grid-template-columns: 1fr 1fr; background: var(--white); border-radius: var(--r-lg);
  box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--line-w);
}
.panel[hidden] { display: none; }
.panel-copy { padding: 52px; display: flex; flex-direction: column; }
.panel-copy h3 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin-top: 26px; }
.panel-copy > p { color: var(--muted); }
.panel-copy .checklist { margin: 8px 0 30px; }
.panel-visual { background: var(--ivory); padding: 44px; display: flex; align-items: center; justify-content: center; position: relative; border-left: 1px solid var(--line-w); }
.panel-visual .mock { width: 100%; max-width: 440px; }
.panel-sub { margin-top: 30px; padding: 20px; border-radius: var(--r); background: var(--ivory); display: flex; gap: 14px; align-items: flex-start; }
.panel-sub p { margin: 0; font-size: .94rem; color: var(--muted); }
.panel-sub strong { color: var(--twilight); font-family: var(--disp); }
@media (max-width: 920px) {
  .panel { grid-template-columns: 1fr; }
  .panel-copy { padding: 32px 24px; }
  .panel-visual { padding: 28px 16px 40px; border-left: 0; border-top: 1px solid var(--line-w); }
}

/* ---------- Check list ---------- */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checklist li { padding-left: 34px; position: relative; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; border-radius: 50%;
  background: var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.6' fill='none' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat;
}
.t-elucidate .checklist li::before {
  background-color: var(--teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.6' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.t-empower .checklist li::before {
  background-color: var(--twilight);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.6' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Cards ---------- */
.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }
.card {
  background: var(--white); border: 1px solid var(--line-w); border-radius: var(--r); padding: 32px;
  display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.ivory-card { background: var(--ivory); border-color: var(--line); }
a.card { text-decoration: none; color: var(--ink); }
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent); color: var(--ink); }
a.card.t-empower:hover { border-color: var(--pink); }
.card h3 { margin: 22px 0 10px; }
.card p { color: var(--muted); margin: 0; }
.card .link-arrow { margin-top: auto; padding-top: 22px; }
.icon {
  width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center;
  background: var(--ivory); color: var(--twilight); border: 1px solid var(--line); flex: 0 0 auto;
}
.ivory-card .icon { background: var(--white); }
.icon svg { width: 26px; height: 26px; }
.dark .card { background: var(--deep); border-color: var(--line-d); }
.dark .card p { color: var(--ivory); opacity: .8; }
.dark .card .icon { background: transparent; border-color: var(--line-d); color: var(--pink); }

.svc-card { border-top: 5px solid var(--accent); }
.svc-card.t-empower { border-top-color: var(--twilight); }
.svc-card .step { font-family: var(--disp); font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 28px; }
.svc-card h3 { margin-top: 8px; }
.svc-card .incl { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-w); font-size: .9rem; color: var(--muted); }
.svc-card .incl strong { color: var(--twilight); }

/* numbered steps */
.step-card .num {
  font-family: var(--disp); font-weight: 700; font-size: .85rem; letter-spacing: .1em; color: var(--twilight);
  display: inline-flex; align-items: center; gap: 12px;
}
.step-card .num::after { content: ""; width: 40px; height: 2px; background: var(--accent); }
.t-empower .step-card .num::after { background: var(--pink); }
.step-card h3 { margin-top: 18px; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-d); }
@media (max-width: 800px) { .stats { grid-template-columns: 1fr; } }
.stat { padding: 36px 28px 6px 0; }
.stat + .stat { padding-left: 28px; border-left: 1px solid var(--line-d); }
@media (max-width: 800px) { .stat + .stat { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-d); } }
.stat .n { font-family: var(--disp); font-weight: 700; font-size: clamp(2.8rem, 5vw, 4.2rem); line-height: 1; color: var(--ivory); letter-spacing: -.03em; }
.stat .n::after { content: ""; display: block; width: 40px; height: 3px; background: var(--pink); margin-top: 14px; }
.stat p { margin: 14px 0 0; opacity: .85; max-width: 32ch; }
.source { font-size: .8rem; opacity: .6 !important; margin-top: 30px; }

.timeline { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 72px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: var(--line-d); }
.tl { position: relative; padding-right: 24px; }
.tl::before { content: ""; display: block; width: 20px; height: 20px; border-radius: 50%; background: var(--twilight); border: 3px solid var(--pink); margin-bottom: 18px; position: relative; }
.tl .when { font-family: var(--disp); font-weight: 700; font-size: 1.3rem; color: var(--ivory); }
.tl p { opacity: .8; margin: 4px 0 0; }
@media (max-width: 1000px) { .timeline { grid-template-columns: repeat(2, 1fr); gap: 32px 0; } .timeline::before { display: none; } }
@media (max-width: 700px) { .timeline { grid-template-columns: 1fr; gap: 26px; } .timeline::before { display: none; } }

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.split.top { align-items: start; }
@media (max-width: 920px) { .split { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- Resource feature ---------- */
.feature-card { display: grid; grid-template-columns: 1.1fr 1fr; background: var(--white); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-w); box-shadow: var(--shadow); }
.feature-card .fc-copy { padding: 56px; }
.feature-card .fc-visual { background: var(--teal); padding: 48px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
@media (max-width: 860px) { .feature-card { grid-template-columns: 1fr; } .feature-card .fc-copy { padding: 32px 24px; } }
.guide-cover { background: var(--ivory); width: 250px; aspect-ratio: 3/4; border-radius: 6px; border: 1px solid var(--line); padding: 26px; display: flex; flex-direction: column; transform: rotate(-3deg); position: relative; }
.guide-cover h4 { margin: auto 0 8px; font-size: 1.55rem; }
.guide-cover p { margin: 0; font-size: .78rem; color: var(--muted); }
.guide-cover .gb { height: 4px; width: 40px; background: var(--pink); margin-top: 16px; }

/* ---------- CTA ---------- */
.cta-band { background: var(--twilight); border-radius: var(--r-lg); padding: 72px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; position: relative; overflow: hidden; }
.cta-band h2 { color: var(--ivory); margin: 0; }
.cta-band p { color: var(--ivory); opacity: .82; margin: 16px 0 0; }
.cta-band .btn-row { justify-content: flex-end; margin: 0; position: relative; z-index: 1; }
.cta-band > div { position: relative; z-index: 1; }
@media (max-width: 860px) { .cta-band { grid-template-columns: 1fr; padding: 40px 26px; } .cta-band .btn-row { justify-content: flex-start; } }
.cta-wrap { padding-block: 0 120px; }
@media (max-width: 700px) { .cta-wrap { padding-block: 0 72px; } }

/* ---------- Product pages ---------- */
.p-hero { padding-block: 64px 100px; overflow: hidden; }
.p-hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 1000px) { .p-hero .wrap { grid-template-columns: 1fr; gap: 48px; } .p-hero { padding-block: 48px 80px; } }
.crumbs { font-size: .88rem; color: var(--muted); margin-bottom: 30px; display: flex; gap: 8px; }
.crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { color: var(--pink); }
.p-hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.8rem); margin-top: 28px; }
.p-hero .visual { background: var(--twilight); border-radius: var(--r-lg); padding: 48px 40px 52px; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); }
.p-hero .visual .mock { position: relative; z-index: 1; }
@media (max-width: 600px) { .p-hero .visual { padding: 18px 14px 40px; } }
.t-elucidate .p-hero .visual { background: var(--teal); }

.subnav { position: sticky; top: 80px; z-index: 50; background: var(--white); border-block: 1px solid var(--line-w); }
.subnav .wrap { display: flex; align-items: center; gap: 4px; height: 62px; overflow-x: auto; scrollbar-width: none; }
.subnav .sn-name { margin-right: 18px; white-space: nowrap; }
.subnav a.sn { text-decoration: none; font-weight: 600; font-size: .92rem; color: var(--muted); padding: 8px 12px; border-radius: var(--r-sm); white-space: nowrap; }
.subnav a.sn:hover { color: var(--pink); }
.subnav .btn { margin-left: auto; white-space: nowrap; }
@media (max-width: 700px) { .subnav .btn, .subnav .sn-name { display: none; } }

.tier-k { font-family: var(--disp); font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); margin-bottom: 14px; }
.tiers .card h3 { margin-top: 0; }

.sub-panel { background: var(--twilight); color: var(--ivory); border-radius: var(--r-lg); overflow: hidden; display: grid; grid-template-columns: .9fr 1.1fr; position: relative; }
.sub-panel .sp-head { padding: 60px 56px; border-right: 1px solid var(--line-d); display: flex; flex-direction: column; }
.sub-panel .sp-body { padding: 60px 56px; }
.sub-panel h2 { color: var(--ivory); }
.sub-panel .sp-label { font-family: var(--disp); font-weight: 700; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ivory); opacity: .75; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.sub-panel .sp-fn { align-self: flex-start; margin-bottom: 22px; font-weight: 700; padding: 6px 14px; border-radius: 999px; background: var(--pink); color: var(--ink); font-size: .85rem; }
.sub-panel p { color: var(--ivory); opacity: .85; }
.sub-panel .sp-head .btn-row { margin-top: auto; padding-top: 28px; }
.sub-panel h3 { color: var(--ivory); font-size: 1.05rem; margin-bottom: 20px; letter-spacing: .02em; }
.sub-panel ol { list-style: none; margin: 0 0 40px; padding: 0; display: grid; gap: 18px; counter-reset: sp; }
.sub-panel ol li { counter-increment: sp; display: grid; grid-template-columns: 40px 1fr; gap: 4px 12px; }
.sub-panel ol li::before { content: "0" counter(sp); font-family: var(--disp); font-weight: 700; color: var(--pink); grid-row: span 2; }
.sub-panel ol li strong { font-family: var(--disp); color: var(--ivory); }
.sub-panel ol li span { opacity: .8; font-size: .95rem; }
.sub-panel ul.deliv { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sub-panel ul.deliv li { border: 1px solid var(--line-d); border-radius: var(--r-sm); padding: 14px; font-size: .92rem; }
@media (max-width: 920px) {
  .sub-panel { grid-template-columns: 1fr; }
  .sub-panel .sp-head { border-right: 0; border-bottom: 1px solid var(--line-d); }
  .sub-panel .sp-head, .sub-panel .sp-body { padding: 36px 24px; }
  .sub-panel ul.deliv { grid-template-columns: 1fr; }
}

.note { font-size: .95rem; color: var(--muted); margin-top: 36px; display: flex; gap: 12px; align-items: flex-start; max-width: 70ch; }
.note svg { flex: 0 0 auto; color: var(--teal); margin-top: 2px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: start; }
@media (max-width: 920px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }
.form-card { background: var(--white); border-radius: var(--r-lg); padding: 44px; box-shadow: var(--shadow); border: 1px solid var(--line-w); }
@media (max-width: 600px) { .form-card { padding: 26px 20px; } }
.form-card h2 { font-size: 1.6rem; margin-bottom: 8px; }
.form-card > p { color: var(--muted); margin-bottom: 28px; }
.form-card label { display: block; font-weight: 700; font-size: .9rem; color: var(--twilight); margin-bottom: 7px; }
.form-card input, .form-card select, .form-card textarea {
  width: 100%; font: inherit; font-size: 1rem; padding: 13px 14px; border-radius: var(--r-sm);
  border: 1.5px solid var(--line); background: var(--white); color: var(--ink); margin-bottom: 18px;
}
.form-card textarea { min-height: 130px; resize: vertical; }
.form-card input:focus, .form-card select:focus, .form-card textarea:focus { outline: none; border-color: var(--twilight); }
.form-card .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .form-card .two { grid-template-columns: 1fr; } }
.form-card .btn { width: 100%; }
.form-card small { display: block; color: var(--muted); margin-top: 14px; font-size: .84rem; }
.expect { display: grid; gap: 28px; margin-top: 44px; }
.expect .e { display: grid; grid-template-columns: 52px 1fr; gap: 18px; }
.expect h3 { font-size: 1.1rem; margin: 2px 0 4px; }
.expect p { margin: 0; color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer { background: var(--twilight); color: var(--ivory); padding-block: 80px 36px; font-size: .95rem; }
.site-footer .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; }
@media (max-width: 900px) { .site-footer .cols { grid-template-columns: 1fr 1fr; } .site-footer .cols > :first-child { grid-column: 1 / -1; } }
.site-footer img { height: 96px; width: auto; max-width: none; margin: -18px 0 8px -20px; }
.site-footer p { opacity: .8; max-width: 38ch; }
.site-footer h4 { color: var(--ivory); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 20px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.site-footer a { color: var(--ivory); text-decoration: none; opacity: .9; }
.site-footer a:hover { color: var(--pink); opacity: 1; }
.site-footer .btn-primary { color: var(--ink); opacity: 1; }
.site-footer .btn-primary:hover { background: var(--ivory); color: var(--ink); }
.site-footer .sub-l a { opacity: .65; padding-left: 14px; font-size: .9rem; }
.site-footer .legal { border-top: 1px solid var(--line-d); margin-top: 56px; padding-top: 26px; font-size: .85rem; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.site-footer .legal > span { opacity: .75; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

/* Dark panel tweaks */
.sub-panel.t-elucidate { background: var(--teal); }
.sub-panel.t-elucidate .sp-fn { background: var(--ivory); color: var(--ink); }
.sub-panel.t-elucidate ol li::before { color: var(--ivory); }
.dark .step-card .num::after { background: var(--pink); }
.dark .step-card .num { color: var(--ivory); }
.dark .t-empower { --accent: var(--ivory); }

/* ---------- Sectors ---------- */
.sectors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1000px) { .sectors { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .sectors { grid-template-columns: 1fr; } }
.sector { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--white); border: 1px solid var(--line-w); border-radius: var(--r); font-weight: 700; color: var(--twilight); }
.sector .icon { width: 42px; height: 42px; border-radius: 10px; }
.sector .icon svg { width: 22px; height: 22px; }
.scale-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 56px; }
@media (max-width: 860px) { .scale-row { grid-template-columns: 1fr; } }
.scale { border-top: 3px solid var(--pink); padding-top: 20px; }
.scale h3 { margin: 0 0 6px; }
.scale p { margin: 0; color: var(--muted); }

/* ---------- Case studies ---------- */
.tagrow { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-block; font-size: .78rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--twilight); background: var(--white); }
.tag.svc { border: 0; background: var(--accent); color: var(--on-accent); }
a.tag { text-decoration: none; transition: opacity .15s; }
a.tag:hover { opacity: .85; color: var(--on-accent); }
.case-card { padding: 0; overflow: hidden; }
.case-card .cc-top { background: var(--twilight); color: var(--ivory); padding: 32px; position: relative; overflow: hidden; min-height: 190px; display: flex; flex-direction: column; justify-content: flex-end; }
.case-card.teal .cc-top { background: var(--teal); }
.case-card .cc-top .sector-k { font-family: var(--disp); font-weight: 700; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.case-card .cc-top h3 { color: var(--ivory); font-size: 1.45rem; margin: 10px 0 0; }
.case-card .cc-body { padding: 28px 32px 32px; display: flex; flex-direction: column; flex: 1; }
.case-card .cc-body p { margin-bottom: 18px; }
.case-card .tagrow { margin-top: auto; }

.case { padding-block: 100px; border-top: 1px solid var(--line); }
.case:first-of-type { border-top: 0; }
.case-head { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: end; margin-bottom: 56px; }
@media (max-width: 920px) { .case-head { grid-template-columns: 1fr; gap: 28px; } }
.case-head h2 { margin-bottom: 18px; }
.profile { background: var(--white); border: 1px solid var(--line-w); border-radius: var(--r); padding: 26px 28px; display: grid; gap: 14px; }
.profile div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; font-size: .95rem; }
.profile dt, .profile .k { font-weight: 700; color: var(--muted); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; padding-top: 2px; }
.profile .v { color: var(--twilight); font-weight: 600; }
.cs-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 1000px) { .cs-cols { grid-template-columns: 1fr; } }
.cs-col h3 { display: flex; align-items: center; gap: 12px; font-size: 1.15rem; margin-top: 0; }
.cs-col h3 .n { font-family: var(--disp); font-size: .8rem; color: var(--pink); letter-spacing: .1em; }
.cs-col ul { margin: 0; padding-left: 18px; color: var(--muted); display: grid; gap: 8px; }
.cs-col.result { background: var(--twilight); border-color: var(--twilight); }
.cs-col.result h3, .cs-col.result li, .cs-col.result p { color: var(--ivory); }
.cs-col.result.teal { background: var(--teal); border-color: var(--teal); }
.cs-maps { margin-top: 28px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-weight: 700; color: var(--twilight); font-size: .92rem; }
.disclaimer { background: var(--white); border: 1px solid var(--line-w); border-radius: var(--r); padding: 22px 26px; display: flex; gap: 14px; align-items: flex-start; color: var(--muted); max-width: 900px; }
.disclaimer svg { flex: 0 0 auto; color: var(--teal); margin-top: 3px; }
.disclaimer p { margin: 0; }

/* ---------- Events ---------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.filter { font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; padding: 10px 18px; border-radius: 999px; background: transparent; border: 1.5px solid var(--line); color: var(--twilight); }
.filter:hover { border-color: var(--twilight); }
.filter[aria-pressed="true"] { background: var(--twilight); border-color: var(--twilight); color: var(--white); }
.events { display: grid; gap: 18px; }
.event { display: grid; grid-template-columns: 112px 1fr auto; gap: 28px; align-items: center; background: var(--white); border: 1px solid var(--line-w); border-radius: var(--r); padding: 26px 28px; transition: box-shadow .2s, border-color .2s; }
.event:hover { box-shadow: var(--shadow); border-color: var(--line); }
@media (max-width: 760px) { .event { grid-template-columns: 76px 1fr; gap: 18px; padding: 20px; } .event .ev-cta { grid-column: 1 / -1; } }
.ev-date { background: var(--ivory); border-radius: 12px; text-align: center; padding: 14px 6px; }
.ev-date .d { font-family: var(--disp); font-weight: 700; font-size: 2.2rem; line-height: 1; color: var(--twilight); }
.ev-date .m { font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--twilight); margin-top: 6px; }
.ev-date .y { font-size: .78rem; color: var(--muted); }
.ev-type { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.ev-type.virtual { background: var(--teal); color: var(--white); }
.ev-type.inperson { background: var(--pink); color: var(--ink); }
.ev-sample { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border: 1px dashed var(--muted); padding: 3px 8px; border-radius: 999px; margin-left: 8px; }
.event h3 { margin: 12px 0 6px; font-size: 1.3rem; }
.event p { margin: 0 0 10px; color: var(--muted); }
.ev-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: .9rem; color: var(--twilight); font-weight: 600; }
.ev-meta span { display: inline-flex; align-items: center; gap: 6px; }
.ev-meta svg { color: var(--muted); }
.ev-empty { text-align: center; background: var(--white); border: 1px dashed var(--line); border-radius: var(--r-lg); padding: 64px 28px; }
.ev-empty h3 { font-size: 1.5rem; margin: 22px 0 10px; }
.ev-empty p { color: var(--muted); max-width: 52ch; margin: 0 auto; }
.ev-empty .icon { margin: 0 auto; }

/* ---------- Legal pages ---------- */
main .legal { padding: 40px 0 0; border-top: 1px solid var(--line); }
main .legal p, main .legal li { max-width: 34em; }
.legal h2 { font-size: 1.35rem; margin: 36px 0 12px; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--ink); }
.legal p { margin: 0 0 1em; }
.legal ul { padding-left: 20px; display: grid; gap: 8px; margin: 0 0 1em; }

/* Resources dropdown */
.mega .wrap.mega-res { grid-template-columns: 1fr 1fr 1fr; max-width: 980px; margin-left: auto; margin-right: auto; }
.mega-card .mc-title { font-family: var(--disp); font-size: 1.1rem; color: var(--twilight); }
.mega-card .icon { width: 44px; height: 44px; }
.mega-card .icon svg { width: 22px; height: 22px; }
@media (max-width: 1199px) { .mega .wrap.mega-res { grid-template-columns: 1fr; } }


/* Guide request pop-up */
.guide-dialog { border: 0; padding: 0; background: transparent; width: min(520px, calc(100% - 32px)); max-height: calc(100vh - 32px); overflow: auto; }
.guide-dialog::backdrop { background: rgba(29, 36, 54, .55); }
.guide-dialog .form-card { position: relative; margin: 0; box-shadow: var(--shadow-lg); }
.gd-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--twilight); cursor: pointer; display: grid; place-items: center; }
.gd-close:hover { border-color: var(--twilight); }
.form-card .check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: .9rem; color: var(--muted); margin: 4px 0 22px; }
.form-card .check input { width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--twilight); }

/* ---------- Added in v2 ---------- */
.uk-eu { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 64px; }
@media (max-width: 860px) { .uk-eu { grid-template-columns: 1fr; } }
.uk-eu .card h3 { margin-top: 0; }
.uk-eu ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.dark .uk-eu li { color: var(--ivory); opacity: .85; }
.founder-k { font-family: var(--disp); font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); margin-top: 22px; }
.founder-k + h3 { margin-top: 6px; }
.creds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }

/* Skip link: hidden until focused with the keyboard */
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--twilight); color: var(--white); padding: 12px 18px; border-radius: var(--r-sm); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; color: var(--white); }

/* ---------- Guided assistant (assistant.js) ---------- */
.ea-launch { position: fixed; right: 24px; bottom: 24px; z-index: 150; font: inherit; font-weight: 700; font-size: .95rem; padding: 14px 22px; border-radius: 999px; border: 0; background: var(--pink); color: var(--ink); cursor: pointer; }
.ea-launch:hover { background: var(--twilight); color: var(--white); }
.ea-launch.is-open { background: var(--twilight); color: var(--white); }
.ea-panel { position: fixed; right: 24px; bottom: 88px; z-index: 150; width: min(400px, calc(100vw - 48px)); max-height: min(620px, calc(100vh - 120px)); display: flex; flex-direction: column; background: var(--white); border: 1.5px solid var(--twilight); border-radius: var(--r); overflow: hidden; }
.ea-panel[hidden] { display: none; }
.ea-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; background: var(--twilight); color: var(--white); padding: 16px 18px; }
.ea-title strong { display: block; font-family: var(--disp); font-size: 1.1rem; }
.ea-title span { display: block; font-size: .85rem; opacity: .85; margin-top: 2px; }
.ea-close { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-sm); border: 1px solid var(--line-d); background: transparent; color: var(--white); cursor: pointer; }
.ea-close:hover { background: var(--white); color: var(--twilight); }
.ea-log { position: relative; flex: 1 1 auto; overflow-y: auto; padding: 16px 18px 8px; display: grid; gap: 10px; align-content: start; background: var(--ivory); }
.ea-msg { max-width: 92%; padding: 12px 14px; border-radius: 12px; font-size: .93rem; line-height: 1.5; }
.ea-msg p { margin: 0 0 8px; } .ea-msg p:last-child { margin-bottom: 0; }
.ea-bot { background: var(--white); border: 1px solid var(--line); color: var(--ink); justify-self: start; }
.ea-user { background: var(--twilight); color: var(--white); justify-self: end; font-weight: 600; }
.ea-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ea-links .btn { padding: 10px 14px; font-size: .85rem; }
.ea-choices { display: grid; gap: 6px; padding: 2px 0 8px; }
.ea-choice { text-align: left; font: inherit; font-size: .9rem; font-weight: 600; color: var(--twilight); background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; cursor: pointer; }
.ea-choice:hover { border-color: var(--twilight); }
.ea-restart { color: var(--muted); border-style: dashed; }
.ea-note { flex: 0 0 auto; margin: 0; padding: 10px 18px 12px; border-top: 1px solid var(--line); font-size: .78rem; color: var(--muted); background: var(--white); }
@media (max-width: 600px) {
  .ea-launch { right: 16px; bottom: 16px; padding: 12px 18px; }
  .ea-panel { right: 8px; left: 8px; bottom: 76px; width: auto; max-height: calc(100vh - 96px); }
}
@media print { .ea-launch, .ea-panel { display: none !important; } }

/* ===== v3: open style. Cards mean clickable (23/10/2026) =====
   Information blocks sit on the page under a thin line; anything you can click keeps its card. */
.card:not(a):not(:has(a)),
.ivory-card:not(a):not(:has(a)) {
  background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none;
  padding: 26px 0 0; position: relative;
}
.card:not(a):not(:has(a))::before,
.ivory-card:not(a):not(:has(a))::before {
  content: ""; position: absolute; top: -2px; left: 0; width: 36px; height: 3px; background: var(--accent, var(--pink));
}
.dark .card:not(a):not(:has(a)) { background: transparent; border-top-color: var(--line-d); }
.card:not(a):not(:has(a)) .icon,
.ivory-card:not(a):not(:has(a)) .icon { background: transparent; border: 0; width: auto; height: auto; place-items: start; }
.sectors { gap: 4px 28px; }
.sector {
  background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0;
  padding: 16px 0 8px; font-size: 1.05rem;
}
.sector .icon { background: transparent; border: 0; width: auto; height: auto; place-items: start; }
.profile { background: transparent; border: 0; border-top: 2px solid var(--twilight); border-radius: 0; padding: 22px 0 0; }
.feature-card { background: transparent; border: 0; box-shadow: none; border-radius: 0; border-top: 1px solid var(--line); }
.feature-card .fc-copy { padding-left: 0; }
.feature-card .fc-visual { border-radius: var(--r-lg); }

/* ===== v4 (27/10/2026) ===== */
/* Add-ons line across the foot of the Services menu */
.mega-note { grid-column: 1 / -1; margin: 0; padding-top: 18px; border-top: 1px solid var(--line-w); font-size: .92rem; color: var(--ink); }
.mega-note a { font-weight: 700; text-decoration: none; margin-left: 6px; }
@media (max-width: 1199px) { .mega-note { padding: 12px 0 4px; } }
/* Seven menu items: tighten spacing so the menu fits on one line on smaller laptops */
@media (min-width: 1200px) and (max-width: 1340px) {
  .site-header > .wrap { gap: 16px; }
  .nav-link, .has-menu > button { padding: 10px 9px; font-size: .9rem; white-space: nowrap; }
  .brand img { height: 76px; margin-left: -14px; }
}
.nav-link, .has-menu > button, .nav-cta .btn { white-space: nowrap; }

/* ===== v4 pages (27/10/2026) ===== */
.levels { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.levels li { display: flex; align-items: center; gap: 14px; font-weight: 600; }
.levels .num { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--twilight); color: var(--white); font-family: var(--disp); font-size: .95rem; }
.facts { margin: 0; display: grid; grid-template-columns: 170px 1fr; gap: 18px 24px; }
.facts dt { font-family: var(--disp); font-weight: 700; color: var(--twilight); }
.facts dd { margin: 0; }
@media (max-width: 600px) { .facts { grid-template-columns: 1fr; gap: 4px; } .facts dd { margin-bottom: 14px; } }
.table-wrap { overflow-x: auto; margin: 0 0 1.2em; }
.legal table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line-w); }
.legal th { font-family: var(--disp); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--twilight); border-bottom: 2px solid var(--twilight); }
/* The assistant button covers text on phones, so it is hidden there. */
@media (max-width: 600px) { .ea-launch, .ea-panel { display: none !important; } }

/* ===== v4.1 draft (30/10/2026) ===== */
.addon-k { font-family: var(--disp); font-size: .9rem; font-weight: 700; color: var(--teal); }
/* Footer links: bigger tap targets on phones */
@media (max-width: 600px) { .site-footer ul { gap: 4px; } .site-footer li a { display: inline-block; padding: 6px 0; } .site-footer .sub-l a { padding-left: 14px; } }
.illus { opacity: .9; }
@media (max-width: 600px) { .site-footer .legal a { display: inline-block; padding: 6px 0; } }
/* Tablets: a lone last card in a three-column grid fills the row */
@media (min-width: 641px) and (max-width: 1000px) { .g3 > :last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* ===== v6 (12/11/2026) ===== */
.outcome { margin-top: 18px; max-width: 30em; }
.outcome strong { color: var(--teal); font-family: var(--disp); }
/* Contact: heading, then the form, then what happens next. Side by side on wide screens. */
.p-hero .wrap.contact-grid { grid-template-columns: 1fr 1.05fr; grid-template-rows: auto 1fr; grid-template-areas: "intro form" "next form"; gap: 0 72px; align-items: start; }
.contact-grid .c-intro { grid-area: intro; }
.contact-grid .form-card { grid-area: form; }
.contact-grid .c-next { grid-area: next; }
@media (max-width: 920px) { .p-hero .wrap.contact-grid { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "intro" "form" "next"; gap: 32px; } .contact-grid .expect { margin-top: 12px; } }
/* Phones: a flat arrow shows the service sub-menu scrolls sideways */
@media (max-width: 700px) {
  .subnav .wrap { padding-right: 44px; }
  .subnav::after { content: "›"; position: absolute; right: 0; top: 0; bottom: 0; width: 40px; display: grid; place-items: center; background: var(--white); border-left: 1px solid var(--line-w); color: var(--twilight); font: 700 1.3rem var(--disp); pointer-events: none; }
}
/* Help button: small once the visitor has scrolled */
.ea-launch.is-compact:not(.is-open) { width: 52px; height: 52px; padding: 0; font-size: 0; }
.ea-launch.is-compact:not(.is-open)::before { content: "?"; font: 700 1.35rem var(--disp); }
/* Why now footnote readable on the dark band */
.dark .source { opacity: .9 !important; font-size: .88rem; }
/* Guide: the real cover on an ivory panel */
.feature-card .fc-visual { background: var(--ivory); }
.guide-img { display: block; width: 230px; height: auto; transform: rotate(-3deg); border-radius: 4px; }
.contact-grid .c-intro > :last-child { margin-bottom: 0; }

/* ===== v6.1 (12/11/2026) ===== */
/* Home page: the three cards fade and rise into place once on load, then stay still.
   Off on small screens and for anyone whose device is set to reduce motion. 'backwards' means the cards simply show if animation is blocked. */
@media (prefers-reduced-motion: no-preference) and (min-width: 1001px) {
  /* v6.6: the cards fade in one by one, top card first, gently: a soft fade with a very small rise.
     (Agreed by Rozalia 12/11/2026 as closest to the first version. A card is briefly see-through as it arrives over another.) */
  @keyframes card-in { from { opacity: 0; transform: translateY(8px) scale(.82); } }
  .stage-panel .pos { animation: card-in .7s cubic-bezier(.25, .6, .3, 1) backwards; }
  .stage-panel .m1 { animation-delay: .15s; }
  .stage-panel .m2 { animation-delay: .4s; }
  .stage-panel .m3 { animation-delay: .65s; }
}
/* About: profiles and founder statement */
.profiles .card p { font-size: .98rem; }
.profiles .skills { color: var(--twilight); font-weight: 600; font-size: .9rem; margin-top: 14px; }
.pull-quote { margin: 0; max-width: 46rem; }
.pull-quote blockquote { margin: 0; font-family: var(--disp); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.25; letter-spacing: -.01em; color: var(--white); text-wrap: balance; }
.pull-quote figcaption { margin-top: 26px; color: var(--ivory); font-weight: 600; display: flex; align-items: center; gap: 12px; }
.pull-quote figcaption::before { content: ""; width: 22px; height: 3px; background: var(--pink); border-radius: 2px; }
/* Articles */
.byline { color: var(--muted); font-size: .95rem; margin-top: 18px; }
.article { max-width: 46rem; }
.article h2 { font-size: 1.5rem; margin: 44px 0 12px; }
.article h2:first-child { margin-top: 0; }
.article p, .article li { color: var(--ink); max-width: 36em; }
.article p { margin: 0 0 1em; }
.article ol { padding-left: 22px; display: grid; gap: 10px; margin: 0 0 1em; }
.article .source { margin-top: 36px; color: var(--muted); opacity: 1 !important; font-size: .9rem; }
.profiles .card p + p { margin-top: 10px; }

/* ===== v6.3 (12/11/2026) ===== */
/* Home page only: after the three cards fade in, the graphics build themselves once, then stay still.
   Maturity scores fill in from level 1 to 5, the bars grow and the governance grid fills in. About three seconds in total.
   Laptops only; off for reduced-motion settings. 'backwards' means everything simply shows if animation is blocked. */
@media (prefers-reduced-motion: no-preference) and (min-width: 1001px) {
  @keyframes cell-in { from { opacity: 0; transform: scale(.4); } }
  @keyframes bar-in { from { width: 0; } }
  .stage-panel .heat i { animation: cell-in .4s cubic-bezier(.2, .7, .2, 1) backwards; }
  .stage-panel .heat i:nth-of-type(5n+1) { animation-delay: 1.35s; }
  .stage-panel .heat i:nth-of-type(5n+2) { animation-delay: 1.5s; }
  .stage-panel .heat i:nth-of-type(5n+3) { animation-delay: 1.65s; }
  .stage-panel .heat i:nth-of-type(5n+4) { animation-delay: 1.8s; }
  .stage-panel .heat i:nth-of-type(5n+5) { animation-delay: 1.95s; }
  .stage-panel .mock-measure span::after { animation: bar-in 1s cubic-bezier(.2, .7, .2, 1) backwards; }
  .stage-panel .m1 .mock-measure span::after { animation-delay: 1.1s; }
  .stage-panel .m1 .mock-measure + .mock-measure span::after { animation-delay: 1.25s; }
  .stage-panel .m1 .mock-measure + .mock-measure + .mock-measure span::after { animation-delay: 1.4s; }
  .stage-panel .m2 .mock-measure span::after { animation-delay: 2.1s; }
  .stage-panel .m2 .mock-measure + .mock-measure span::after { animation-delay: 2.25s; }
  .stage-panel .m2 .mock-measure + .mock-measure + .mock-measure span::after { animation-delay: 2.4s; }
  .stage-panel .raci > :is(.a, .r, .c, .i) { animation: cell-in .35s cubic-bezier(.2, .7, .2, 1) backwards; }
  .stage-panel .raci > :nth-child(5n+2) { animation-delay: 2s; }
  .stage-panel .raci > :nth-child(5n+3) { animation-delay: 2.12s; }
  .stage-panel .raci > :nth-child(5n+4) { animation-delay: 2.24s; }
  .stage-panel .raci > :nth-child(5n) { animation-delay: 2.36s; }
}

/* ===== v6.4 (12/11/2026) ===== */
/* Phones: where four cards sit beside a page heading (Resources, Our approach), show them as short rows
   (title and link only) so the page content is not pushed far down the screen. */
@media (max-width: 640px) {
  .p-hero .grid.g2 { gap: 12px; }
  .p-hero .grid.g2 > a.card { padding: 18px 20px; }
  .p-hero .grid.g2 > a.card h3 { margin: 0; }
  .p-hero .grid.g2 > a.card p { display: none; }
  .p-hero .grid.g2 > a.card .link-arrow { padding-top: 6px; }
}

/* ===== v6.5 (12/11/2026): sparkle ===== */
/* Home page: once the cards have built, light catches the pink word in the headline. Two small glints, once.
   sparkle.js adds small stars that follow the mouse over the blue hero panel (home) and the closing band (every page).
   Laptops only; off for reduced-motion settings. */
.glint { display: none; }
@media (prefers-reduced-motion: no-preference) and (min-width: 1001px) {
  .glint-host { position: relative; display: inline-block; }
  .glint { display: block; position: absolute; fill: var(--pink); transform: scale(0); pointer-events: none; }
  .glint.g1 { width: .5em; height: .5em; top: -.2em; right: -.42em; animation: glint 1.2s cubic-bezier(.3, .6, .3, 1) 3.1s both; }
  .glint.g2 { width: .3em; height: .3em; bottom: .02em; left: -.3em; animation: glint 1.1s cubic-bezier(.3, .6, .3, 1) 3.5s both; }
  @keyframes glint { 0% { transform: scale(0) rotate(-40deg); } 45% { transform: scale(1) rotate(0); } 100% { transform: scale(0) rotate(40deg); } }
  /* v6.7: the same glint on the button in the closing band, once, when it scrolls into view (sparkle.js adds the shapes). */
  .glint-btn { position: relative; overflow: visible; }
  .glint-btn .glint { fill: var(--ivory); }
  .btn.glint-btn svg.glint, .btn.glint-btn:hover svg.glint { transform: scale(0); transition: none; }   /* not nudged by the button's hover rule for arrows */
  .glint.b1 { width: 20px; height: 20px; top: -12px; right: -10px; }
  .glint.b2 { width: 12px; height: 12px; bottom: -7px; left: -6px; }
  .glint-btn.go .glint.b1 { animation: glint 1.2s cubic-bezier(.3, .6, .3, 1) .35s both; }
  .glint-btn.go .glint.b2 { animation: glint 1.1s cubic-bezier(.3, .6, .3, 1) .75s both; }
}

/* v6.8: AI news sign-up (Resources page) */
.news-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.news-grid .form-card h2 { margin-bottom: 20px; }
@media (max-width: 920px) { .news-grid { grid-template-columns: 1fr; gap: 32px; } }