/* Solid Systems prototype — Ravelin-style structure: sticky bar, centred service heroes,
   alternating paper / night bands, rounded pill buttons. Single light look by choice. */
:root {
  --paper: #f3f5f6;
  --card: #ffffff;
  --ink: #15202b;
  --muted: #56626d;
  --line: #dbe2e7;
  --blue: #1a9fdb;
  --blue-ink: #0b74a8;
  --blue-wash: #e3f3fb;
  --night: #111820;
  --night-2: #1a232d;
  --night-line: #2a3541;
  --on-night: #eef3f6;
  --on-night-muted: #9eabb6;
  --ph-bg: #fff3c4;
  --ph-ink: #6b5200;

  --f-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-hand: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;

  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 18px;
  --radius-sm: 12px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--f-sans); color: var(--ink); background: var(--paper); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 9vw, 112px); }
.night { background: var(--night); color: var(--on-night); }

/* Placeholder marker: anything invented that Michael should replace */
mark.ph { background: var(--ph-bg); color: var(--ph-ink); padding: 0 .3em; border-radius: 4px; border-bottom: 1px dashed var(--ph-ink); }
.night mark.ph { background: #3d3412; color: #ffe08a; border-color: #ffe08a; }

/* ---------- Type helpers ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-ink); }
.eyebrow.pill { background: var(--blue-wash); padding: 6px 14px; border-radius: 999px; }
.night .eyebrow { color: var(--blue); }
.h-xl { font-size: clamp(38px, 6vw, 68px); font-weight: 800; letter-spacing: -0.035em; }
.h-lg { font-size: clamp(30px, 4.2vw, 48px); font-weight: 800; }
.h-md { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; }
.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); max-width: 60ch; }
.night .lead, .night p { color: var(--on-night-muted); }
.hand { font-family: var(--f-hand); font-weight: 400; color: var(--blue); letter-spacing: 0; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; background: var(--blue-ink); color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; padding: 14px 24px; border-radius: 999px; border: 0; cursor: pointer; transition: background .2s, transform .2s; font-family: inherit; }
.btn:hover { background: #095f8a; transform: translateY(-1px); }
.btn .plus { width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; font-size: 15px; line-height: 1; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--card); }
.night .btn-ghost { color: var(--on-night); border-color: var(--night-line); }
.night .btn-ghost:hover { background: var(--night-2); }
.btn-sm { padding: 10px 18px; font-size: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Header ---------- */
/* Transparent floating header: no bar. The logo stands on its own; the menu and the
   contact group sit in frosted pills so they stay readable over any section. */
:root { --head-h: 104px; }
main { padding-top: calc(var(--head-h) + env(safe-area-inset-top, 0px)); }
.site-head { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); background: transparent; pointer-events: none; }
.site-head .head-in > * { pointer-events: auto; }
.head-in { display: flex; align-items: center; gap: 24px; min-height: var(--head-h); }
.brand { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; padding-block: 4px; }
.logo-img { width: 66px; height: 66px; display: block; transition: box-shadow .3s, transform .3s; }
.site-head.scrolled .logo-img { box-shadow: 0 10px 26px rgba(17,24,32,.22); }
.foot-cols .logo-img { width: 76px; height: 76px; }
/* The blur lives on a ::before layer: backdrop-filter on the pill itself would trap the
   mega menu inside the pill's box and squash it to the pill's width. */
.frost { position: relative; isolation: isolate; border-radius: 999px; }
.frost::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(255,255,255,.74); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border: 1px solid rgba(255,255,255,.85); box-shadow: 0 10px 30px rgba(17,24,32,.10); pointer-events: none; }

.menu { display: flex; align-items: center; gap: 2px; margin-inline: auto; padding: 5px; }
.menu > a, .menu .dd-btn { font: inherit; font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; padding: 8px 14px; border-radius: 999px; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.menu > a:hover, .menu .dd-btn:hover, .menu [aria-current="page"] { background: var(--card); }
.menu [aria-current="page"] { font-weight: 600; }
.dd { position: relative; }
.dd-btn .chev { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.dd.open .chev { transform: rotate(-135deg) translateY(-2px); }
.dd-panel { display: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 30px 60px rgba(17,24,32,.14); }
.dd.open .dd-panel { display: grid; }

/* Small dropdown (Company) */
.dd-simple { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: 300px; padding: 8px; gap: 2px; }
.dd-simple a { display: block; text-decoration: none; padding: 11px 14px; border-radius: var(--radius-sm); }
.dd-simple a:hover, .dd-simple a[aria-current="page"] { background: var(--paper); }
.dd-simple strong { display: block; font-size: 15px; }
.dd-simple small { display: block; color: var(--muted); font-size: 13px; line-height: 1.45; }

/* Mega menu (Solutions): Services list | Business challenge cards | Who we help */
.head-in { position: relative; }
.dd-mega { position: static; }
/* Fixed to the viewport (not the menu pill) and aligned to the page content column */
.mega { position: fixed; top: calc(var(--head-h) + env(safe-area-inset-top, 0px) - 10px); left: calc(max(0px, (100vw - var(--wrap)) / 2) + var(--gutter)); right: calc(max(0px, (100vw - var(--wrap)) / 2) + var(--gutter)); grid-template-columns: minmax(230px, 1fr) minmax(0, 1.75fr) minmax(220px, 1fr); overflow: hidden; }
.mega-col { padding: 28px 28px 30px; min-width: 0; }
.mega-col h4 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mega-col h4 mark.ph { font-size: 11px; font-weight: 600; letter-spacing: 0; }
.mega-mid { background: var(--paper); border-inline: 1px solid var(--line); }
.mega-side { background: var(--blue-wash); display: flex; flex-direction: column; }
.mega-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega-list a { display: flex; align-items: center; gap: 12px; padding: 8px 0; text-decoration: none; font-size: 15px; color: var(--ink); transition: color .15s; }
.mega-list a svg { flex: 0 0 auto; color: var(--muted); transition: color .15s; }
.mega-list a:hover, .mega-list a[aria-current="page"] { color: var(--blue-ink); }
.mega-list a:hover svg, .mega-list a[aria-current="page"] svg { color: var(--blue-ink); }
.mega-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mega-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 18px 20px; text-decoration: none; display: flex; flex-direction: column; gap: 14px; min-width: 0; transition: border-color .2s, transform .2s, box-shadow .2s; }
.mega-card svg { color: var(--blue-ink); width: 26px; height: 26px; }
.mega-card strong { font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.mega-card:hover { border-color: #b9dcee; transform: translateY(-2px); box-shadow: 0 12px 24px rgba(17,24,32,.07); }
.mega-all { margin-top: auto; padding-top: 18px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
.mega-all:hover { color: var(--blue-ink); }

.btn svg { flex: 0 0 auto; }

.head-right { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; padding: 5px 5px 5px 18px; }
.support { font-size: 12px; line-height: 1.35; text-align: right; }
.support b { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-ink); }
.burger { display: none; margin-left: auto; font: inherit; font-weight: 600; font-size: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; cursor: pointer; color: var(--ink); }

/* ---------- Hero (service pages: centred, like Ravelin) ---------- */
.hero-c { text-align: center; padding-block: clamp(64px, 10vw, 128px) clamp(56px, 8vw, 96px); }
.hero-c .h-xl { margin: 22px auto 20px; max-width: 16ch; }
.hero-c .lead { margin: 0 auto 32px; }
.hero-c .btn-row { justify-content: center; }

/* ---------- Home hero (split) ---------- */
.hero-home { padding-block: clamp(56px, 8vw, 104px); }
.hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-grid > * { min-width: 0; }
.hero-home .h-xl { margin: 20px 0 22px; }
.hero-home .lead { margin-bottom: 32px; }

.eyebrow.pill.dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-ink); }

/* Photo card with floating support badge and stat tiles beneath */
.hero-media { display: grid; gap: 14px; min-width: 0; }
.hero-photo { position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%; border: 1px solid var(--line); background: var(--night); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.hero-chip { position: absolute; left: 18px; bottom: 18px; max-width: calc(100% - 36px); display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.93); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 14px; padding: 10px 16px 10px 10px; box-shadow: 0 10px 30px rgba(17,24,32,.15); }
.hero-chip .chip-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--blue-ink); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.hero-chip b { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-ink); }
.hero-chip span { display: block; font-size: 13px; color: var(--muted); }
.hero-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px 16px; min-width: 0; }
.tile small { display: block; font-size: 13px; color: var(--muted); }
.tile b { display: block; font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; margin-top: 4px; }
.tile.dark { background: var(--night); border-color: var(--night); color: var(--on-night); }
.tile.dark small { color: var(--on-night-muted); }
.tile.dark b { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; margin-top: 8px; }

/* ---------- Trust row ---------- */
.trust { border-block: 1px solid var(--line); background: var(--card); }
.trust-in { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-item { padding: 28px 20px; border-left: 1px solid var(--line); }
.trust-item:first-child { border-left: 0; padding-left: 0; }
.trust-item b { display: block; font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.trust-item span { font-size: 14px; color: var(--muted); }

/* ---------- Section heads ---------- */
.sec-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 72px); align-items: end; margin-bottom: clamp(36px, 5vw, 56px); }
.sec-head > * { min-width: 0; }
.sec-head .h-lg { margin-top: 14px; }
.sec-head.stack { grid-template-columns: 1fr; max-width: 760px; }

/* ---------- How we work (dark band) ---------- */
.how { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 96px); align-items: start; }
.how > * { min-width: 0; }
.how .h-lg { margin-top: 14px; }
.how p { font-size: 18px; line-height: 1.7; }
.how p + p { margin-top: 16px; }

/* ---------- Cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.card .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--blue-wash); color: var(--blue-ink); display: grid; place-items: center; margin-bottom: 6px; }
.card h3 { font-size: 20px; font-weight: 700; }
.card p { color: var(--muted); font-size: 15px; }
a.card { text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
a.card:hover { transform: translateY(-3px); border-color: #b9dcee; box-shadow: 0 18px 40px rgba(17,24,32,.08); }
.card .more { margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 600; color: var(--blue-ink); }

/* ---------- Outcome ---------- */
.outcome { max-width: 980px; }
.outcome p.big { font-size: clamp(24px, 3.2vw, 38px); font-weight: 700; line-height: 1.3; letter-spacing: -.02em; color: var(--ink); margin-top: 18px; text-wrap: balance; }

/* ---------- Journey (Ignite → Embed) ---------- */
.journey { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.journey a { text-decoration: none; padding: 26px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; transition: background .2s; min-width: 0; }
.journey a:first-child { border-left: 0; }
.journey a:hover { background: var(--blue-wash); }
.journey .step { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-ink); }
.journey h3 { font-size: 22px; font-weight: 800; }
.journey p { font-size: 14px; color: var(--muted); }
.night .journey { background: var(--night-2); border-color: var(--night-line); }
.night .journey a { border-color: var(--night-line); }
.night .journey a:hover { background: #22303c; }
.night .journey h3 { color: var(--on-night); }

/* ---------- Why Solid / values ---------- */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.why-grid > * { min-width: 0; }
.photo { border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.values { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.value { border: 1px solid var(--night-line); border-radius: var(--radius-sm); padding: 16px 18px; font-weight: 600; font-size: 15px; color: var(--on-night); display: flex; gap: 10px; align-items: center; }
.value::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex: 0 0 auto; }
.motto { font-family: var(--f-hand); font-size: clamp(28px, 3vw, 36px); color: var(--blue); margin-top: 6px; }

/* ---------- Timeline (About) ---------- */
.tl { display: grid; gap: 0; border-left: 2px solid var(--line); margin-left: 6px; }
.tl-item { position: relative; padding: 0 0 34px 30px; display: grid; grid-template-columns: 150px 1fr; gap: 20px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ''; position: absolute; left: -8px; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--card); border: 3px solid var(--blue); }
.tl-yr { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--blue-ink); font-variant-numeric: tabular-nums; padding-top: 2px; }
.tl-item h3 { font-size: 19px; font-weight: 700; margin-bottom: 4px; }
.tl-item p { color: var(--muted); font-size: 15px; }

/* ---------- Team ---------- */
.person { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; gap: 16px; align-items: center; min-width: 0; }
.avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--blue-wash); color: var(--blue-ink); display: grid; place-items: center; font-weight: 800; flex: 0 0 auto; }
.person b { display: block; }
.person span { font-size: 14px; color: var(--muted); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.contact-grid > * { min-width: 0; }
.detail { padding: 20px 0; border-bottom: 1px solid var(--line); }
.detail:first-of-type { border-top: 1px solid var(--line); }
.detail small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.detail p { font-size: 17px; font-weight: 600; }
.form { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: clamp(22px, 4vw, 36px); display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row > * { min-width: 0; }
.form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.form input, .form select, .form textarea { font: inherit; font-size: 15px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; width: 100%; }
.form textarea { min-height: 120px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash); background: var(--card); }
.form-note { font-size: 13px; color: var(--muted); }
.form-done { background: var(--blue-wash); border-radius: var(--radius-sm); padding: 16px 18px; font-size: 15px; }

/* ---------- Footer ---------- */
.foot-cta { background: var(--night); color: var(--on-night); border-radius: 28px; padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: center; }
.foot-cta > * { min-width: 0; }
.foot-cta .h-lg { color: var(--on-night); margin-top: 12px; }
.foot-cta p { color: var(--on-night-muted); font-size: 17px; }
.foot-cta .side { display: grid; gap: 18px; justify-items: start; }
.site-foot { padding-block: clamp(48px, 7vw, 88px) 32px; }
.foot-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; gap: 32px; margin-top: clamp(48px, 6vw, 72px); }
.foot-cols > * { min-width: 0; }
.foot-cols h4 { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-cols a { text-decoration: none; font-size: 15px; }
.foot-cols a:hover { color: var(--blue-ink); }
.foot-cols p { font-size: 15px; color: var(--muted); }
.foot-cols .about-blurb { margin-top: 14px; max-width: 34ch; }
.social { display: flex; gap: 10px; margin-top: 16px; }
.social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; background: var(--card); }
.social a:hover { border-color: var(--blue); color: var(--blue-ink); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.foot-base nav { display: flex; gap: 18px; }
.foot-base a { text-decoration: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .support { display: none; }
  .head-right { padding: 5px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .journey { grid-template-columns: repeat(2, 1fr); }
  .journey a:nth-child(3) { border-left: 0; }
  .journey a:nth-child(n+3) { border-top: 1px solid var(--line); }
  .night .journey a:nth-child(n+3) { border-top-color: var(--night-line); }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .foot-cols > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .burger { display: inline-flex; box-shadow: 0 10px 30px rgba(17,24,32,.10); }
  .head-right { display: none; }
  :root { --head-h: 84px; }
  .logo-img { width: 54px; height: 54px; }
  .menu { display: none; position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% - 4px); margin: 0; flex-direction: column; align-items: stretch; gap: 2px; background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 18px 18px; box-shadow: 0 24px 50px rgba(17,24,32,.16); max-height: calc(100vh - var(--head-h) - 16px); overflow-y: auto; }
  .menu.open { display: flex; }
  .menu > a, .menu .dd-btn { padding: 12px 4px; border-radius: 0; font-size: 17px; justify-content: space-between; width: 100%; }
  .menu > a:hover, .menu .dd-btn:hover, .menu [aria-current="page"] { background: none; }
  .dd-panel { position: static; transform: none; width: auto; box-shadow: none; border: 0; border-radius: var(--radius-sm); }
  .dd-simple { padding: 0 0 8px; }
  .dd-simple a { padding: 10px 4px 10px 14px; }
  .mega { grid-template-columns: 1fr; margin-bottom: 8px; border: 1px solid var(--line); }
  .mega-col { padding: 18px; }
  .mega-mid { border-inline: 0; border-block: 1px solid var(--line); }
  .mega-card { padding: 14px; gap: 10px; }
  .mega-card strong { font-size: 15px; }
  .hero-tiles { gap: 10px; }
  .tile { padding: 12px 14px; }
  .menu .menu-cta, .menu .menu-cta:hover { margin-top: 10px; justify-content: center; color: #fff; background: var(--blue-ink); border-radius: 999px; padding: 14px 24px; font-weight: 600; }
  .hero-grid, .sec-head, .how, .why-grid, .contact-grid, .foot-cta { grid-template-columns: 1fr; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .trust-in { grid-template-columns: 1fr 1fr; }
  .trust-item:nth-child(3) { border-left: 0; padding-left: 0; }
  .trust-item:nth-child(n+3) { border-top: 1px solid var(--line); }
  .tl-item { grid-template-columns: 1fr; gap: 4px; }
}
@media (min-width: 901px) { .menu .menu-cta { display: none; } }
@media (max-width: 560px) {
  .grid-4, .journey, .values, .form-row, .mega-cards { grid-template-columns: 1fr; }
  .hero-tiles { grid-template-columns: 1fr 1fr; }
  .tile.dark { grid-column: span 2; order: 3; }
  .journey a { border-left: 0; border-top: 1px solid var(--line); }
  .journey a:first-child { border-top: 0; }
  .night .journey a { border-top-color: var(--night-line); }
  .foot-cols { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- Scroll-pinned horizontal journey (Copilot & AI page) ----------
   Desktop: the section is n screens tall; .hs-sticky pins under the header and
   site.js slides .hs-track sideways as you scroll. Phones / short screens /
   reduced motion: a normal swipeable row with the same tabs. */
:root { --t-ignite: #fff0d4; --t-elevate: #dff1fb; --t-expand: #dcf3e6; --t-embed: #e9e6ff;
  /* The Solid Way */ --t-review: #dff1fb; --t-switch: #fff0d4; --t-secure: #e9e6ff; --t-adopt: #dcf3e6; --t-evolve: #ffe4da; }
.hs { position: relative; height: calc(var(--n, 4) * 85vh); }
.hs-sticky { position: sticky; top: calc(var(--head-h) + env(safe-area-inset-top, 0px)); height: calc(100vh - var(--head-h)); display: flex; flex-direction: column; gap: 16px; padding-block: 8px 28px; overflow: hidden; }
/* Full-bleed: the slider starts at the left edge of the screen (plus gutter) at every width */
.hs { --hs-panel: min(1180px, calc(100vw - 2 * var(--gutter) - 72px)); }
.hs-bleed { width: 100%; padding-inline: var(--gutter); }
/* Tabs span the full width of the screen (inside the gutter) at every resolution */
.hs-tabs { width: 100%; }
.hs-tabs { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: clamp(8px, 1vw, 16px); }
.hs-tab { font: inherit; font-size: clamp(12px, .95vw, 15px); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: clamp(14px, 1.4vw, 20px) 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: background .3s, border-color .3s; }
.hs-tab span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; letter-spacing: 0; background: var(--paper); border: 1px solid var(--line); }
.hs-tab:hover { border-color: #b9dcee; }
.hs-tab[aria-selected="true"] { border-color: transparent; background: var(--tint, var(--blue-wash)); }
.hs-tab[aria-selected="true"] span { background: var(--ink); color: #fff; border-color: var(--ink); }
.hs-viewport { flex: 1; min-height: 0; width: 100%; }
.hs-track { display: flex; gap: 20px; height: 100%; will-change: transform; }
.hs-panel { flex: 0 0 var(--hs-panel); min-width: 0; height: 100%; border-radius: 26px; padding: 18px; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(20px, 3vw, 40px); }
.tint-ignite { background: var(--t-ignite); }
.tint-elevate { background: var(--t-elevate); }
.tint-expand { background: var(--t-expand); }
.tint-embed { background: var(--t-embed); }
.tint-review { background: var(--t-review); }
.tint-switch { background: var(--t-switch); }
.tint-secure { background: var(--t-secure); }
.tint-adopt { background: var(--t-adopt); }
.tint-evolve { background: var(--t-evolve); }
.hs-media { min-width: 0; min-height: 0; border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.55); display: grid; place-items: center; padding: 20px; }
.hs-media img { width: 100%; height: 100%; object-fit: cover; }
.hs-copy { min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: clamp(8px, 2vw, 24px) clamp(4px, 2vw, 24px) 6px 0; }
.hs-step { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-ink); }
.hs-copy h3 { font-size: clamp(26px, 2.8vw, 38px); font-weight: 800; letter-spacing: -.03em; }
.hs-copy > p { color: var(--muted); font-size: 16px; max-width: 46ch; }
.hs-points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.hs-points li { display: flex; gap: 10px; align-items: baseline; font-size: 15px; font-weight: 500; }
.hs-points li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-ink); flex: 0 0 auto; transform: translateY(-2px); }
.hs-copy .btn { margin-top: auto; align-self: flex-start; background: var(--ink); }
.hs-copy .btn:hover { background: #000; }

/* Illustrated scenes (stand-ins for photos) */
.scene { width: min(440px, 100%); background: var(--card); border-radius: 16px; box-shadow: 0 24px 50px rgba(17,24,32,.12); padding: 18px 20px 20px; font-size: 13px; display: grid; gap: 14px; }
.slide-bar { display: flex; align-items: center; gap: 6px; }
.slide-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.slide-bar em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--muted); }
.slide-body { display: grid; gap: 12px; }
.slide-q { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.prompt, .answer { border-radius: 14px; padding: 12px 14px; display: grid; gap: 6px; }
.prompt i, .answer i { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.prompt { background: var(--blue-ink); color: #fff; margin-left: 18%; }
.prompt i { color: #cfe9f7; }
.answer { background: var(--paper); margin-right: 12%; }
.answer i { color: var(--blue-ink); }
.answer span { display: block; height: 7px; border-radius: 4px; background: var(--line); }
.habit-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.habit-head b { font-size: 15px; }
.habit-head em { font-style: normal; font-size: 11px; color: var(--muted); }
.habit-grid { display: grid; grid-template-columns: 1fr repeat(5, 26px); gap: 8px 8px; align-items: center; }
.habit-grid b { font-size: 11px; color: var(--muted); text-align: center; }
.habit-grid span { font-weight: 500; }
.habit-grid i { width: 26px; height: 26px; border-radius: 7px; background: var(--paper); border: 1px solid var(--line); }
.habit-grid i.on { background: var(--blue); border-color: var(--blue); }
.habit-next { font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }
.bars { display: flex; align-items: flex-end; gap: 12px; height: 170px; }
.bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; min-width: 0; }
.bar i { width: 100%; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--blue), var(--blue-ink)); }
.bar span { font-size: 11px; color: var(--muted); }
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: f; }
.flow li { counter-increment: f; position: relative; padding: 10px 12px 10px 46px; border: 1px solid var(--line); border-radius: 12px; display: grid; }
.flow li::before { content: counter(f); position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; background: var(--blue-wash); color: var(--blue-ink); font-weight: 800; font-size: 12px; display: grid; place-items: center; }
.flow li:not(:last-child)::after { content: ''; position: absolute; left: 23px; bottom: -11px; width: 2px; height: 10px; background: var(--line); }
.flow b { font-size: 14px; }
.flow span { font-size: 12px; color: var(--muted); }

@media (max-width: 900px), (max-height: 640px), (prefers-reduced-motion: reduce) {
  .hs { height: auto; padding-bottom: clamp(40px, 6vw, 72px); }
  .hs-sticky { position: static; height: auto; overflow: visible; padding-block: 0; }
  .hs-viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 6px; }
  .hs-viewport::-webkit-scrollbar { display: none; }
  .hs-track { transform: none !important; height: auto; }
  .hs-panel { height: auto; scroll-snap-align: start; }
}
@media (max-width: 900px) {
  .hs-tabs { grid-template-columns: repeat(var(--n, 4), minmax(max-content, 1fr)); overflow-x: auto; scrollbar-width: none; }
  .hs-tab { padding: 11px 12px; }
  .hs-panel { flex-basis: 90%; grid-template-columns: 1fr; padding: 14px; }
  .hs-media { padding: 14px; }
  .hs-copy { padding: 4px 6px 8px; }
  .hs-copy .btn { margin-top: 6px; }
}

/* ---------- Full-bleed photo hero (Cyber Security) ----------
   Navy base matches the photo's dark left side; a left-to-right fade keeps text
   readable and the face (right side) clear. Below 900px the photo stacks above the text. */
:root { --hpf-navy: #06101f; }
section[id] { scroll-margin-top: 112px; }
.hero-photo-full { position: relative; overflow: hidden; background: var(--hpf-navy); color: var(--on-night); display: flex; align-items: center; min-height: clamp(540px, 76vh, 1000px); isolation: isolate; }
.hpf-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 72% 38%; z-index: -2; filter: saturate(1.05) contrast(1.04); }
.hero-photo-full::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, var(--hpf-navy) 0%, rgba(6,16,31,.94) 28%, rgba(6,16,31,.62) 44%, rgba(6,16,31,0) 62%),
    linear-gradient(0deg, var(--night) 0%, rgba(17,24,32,0) 22%),
    radial-gradient(60% 80% at 20% 60%, rgba(26,159,219,.16), transparent 70%); }
.hpf-in { width: 100%; padding-block: clamp(72px, 9vw, 120px); }
.hpf-copy { max-width: min(560px, 46%); display: grid; gap: 22px; justify-items: start; }
.hpf-copy .h-xl { color: #fff; }
.hpf-copy .lead { color: #b7c6d3; margin: 0; }
.hero-photo-full .eyebrow.pill { background: rgba(26,159,219,.16); color: #8fd6f7; border: 1px solid rgba(143,214,247,.25); }
.hero-photo-full .btn-ghost { color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.04); }
.hero-photo-full .btn-ghost:hover { background: rgba(255,255,255,.1); }
.hpf-tags { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hpf-tags li { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: #9fb3c4; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 6px 12px; }

@media (max-width: 900px) {
  .hero-photo-full { display: block; min-height: 0; }
  .hpf-img { position: relative; inset: auto; height: clamp(260px, 62vw, 460px); object-position: 82% 35%; z-index: -2; }
  .hero-photo-full::before { inset: auto 0 auto 0; top: 0; height: clamp(260px, 62vw, 460px);
    background: linear-gradient(0deg, var(--hpf-navy) 0%, rgba(6,16,31,.35) 30%, rgba(6,16,31,0) 55%); }
  .hpf-in { padding-block: 8px 56px; margin-top: -24px; position: relative; }
  .hpf-copy { max-width: none; }
}

/* Photo hero runs up under the transparent header */
main > .hero-photo-full:first-child { margin-top: calc(-1 * (var(--head-h) + env(safe-area-inset-top, 0px))); }
main > .hero-photo-full:first-child .hpf-in { padding-top: calc(var(--head-h) + clamp(56px, 7vw, 100px)); }
@media (max-width: 900px) {
  main > .hero-photo-full:first-child .hpf-in { padding-top: 8px; }
}

/* Header support numbers (UK + SA) */
.support span { display: block; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.support i { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--muted); margin-right: 3px; }

/* Footer offices column */
.foot-offices { display: grid; gap: 12px; align-content: start; }
.foot-offices b { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.foot-offices .more-link { font-size: 14px; font-weight: 600; color: var(--blue-ink); }

/* ---------- Contact page: office cards ---------- */
.offices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.office { background: var(--card); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.office-top { padding: 26px 26px 22px; display: grid; gap: 6px; position: relative; color: #fff; background: var(--night); }
.office-top::after { content: ''; position: absolute; right: -30px; top: -30px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(26,159,219,.45), transparent 70%); }
.office-top .country { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #8fd6f7; }
.office-top h3 { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: #fff; }
.office-top .clock { font-size: 13px; color: var(--on-night-muted); font-variant-numeric: tabular-nums; }
.office-body { padding: 22px 26px 26px; display: flex; flex-direction: column; gap: 18px; flex: 1; }
.office address { font-style: normal; font-size: 15px; line-height: 1.6; color: var(--muted); }
.office .tel { font-size: 20px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--ink); text-decoration: none; }
.office .tel small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.office .dir { align-self: start; font-size: 14px; font-weight: 600; color: var(--blue-ink); text-decoration: none; }
.office .dir:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .offices { grid-template-columns: 1fr; }
}

/* Google reviews block on office cards (mirrors the solidsystems.co.uk widget) */
.g-reviews { margin-top: auto; display: grid; justify-items: center; gap: 4px; padding-top: 20px; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.g-logo { font-family: 'Inter', system-ui, sans-serif; font-weight: 600; font-size: 28px; letter-spacing: -.04em; line-height: 1; }
.g-logo i { font-style: normal; }
.g-logo i:nth-child(1), .g-logo i:nth-child(4) { color: #4285f4; }
.g-logo i:nth-child(2), .g-logo i:nth-child(6) { color: #ea4335; }
.g-logo i:nth-child(3) { color: #fbbc05; }
.g-logo i:nth-child(5) { color: #34a853; }
.g-score { display: flex; align-items: center; gap: 8px; }
.g-score b { font-size: 21px; font-weight: 600; color: #f39c12; font-variant-numeric: tabular-nums; }
/* Five stars filled to the rating (--r out of 5) */
.g-stars { --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath d='M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z'/%3E%3C/svg%3E");
  width: 100px; height: 18px; display: inline-block;
  background: linear-gradient(90deg, #fb8e28 calc(var(--r) / 5 * 100%), #dfe3e8 0);
  -webkit-mask: var(--star) 0 0 / 20px 18px repeat-x; mask: var(--star) 0 0 / 20px 18px repeat-x; }
.g-count { font-size: 13px; color: var(--muted); }
.g-reviews:hover .g-count { color: var(--blue-ink); text-decoration: underline; }
.office address a { color: inherit; text-decoration: none; }
.office address a:hover { color: var(--blue-ink); text-decoration: underline; }

/* ---------- Light photo hero variant (Copilot & AI) ----------
   The photo's left side is a pale wall, so text is dark on a soft cream fade.
   .hpf-left anchors the copy to the screen's left gutter instead of the centred
   column, keeping it clear of the person on the right at every width. */
.hero-photo-full.is-light { --hpf-cream: 247, 244, 239; background: rgb(var(--hpf-cream)); color: var(--ink); min-height: clamp(560px, 82vh, 1000px); }
.hero-photo-full.is-light .hpf-img { object-position: 68% 30%; filter: none; }
.hero-photo-full.is-light::before {
  background:
    linear-gradient(90deg, rgba(var(--hpf-cream), .97) 0%, rgba(var(--hpf-cream), .9) 24%, rgba(var(--hpf-cream), .55) 38%, rgba(var(--hpf-cream), 0) 50%); }
.hero-photo-full.is-light .hpf-copy .h-xl { color: var(--ink); font-size: clamp(34px, 4vw, 62px); }
.hero-photo-full.is-light .hpf-copy .lead { color: #4a5560; }
.hero-photo-full.is-light .eyebrow.pill { background: rgba(255,255,255,.75); color: var(--blue-ink); border: 1px solid rgba(11,116,168,.18); }
.hero-photo-full.is-light .btn-ghost { color: var(--ink); border-color: rgba(21,32,43,.2); background: rgba(255,255,255,.55); }
.hero-photo-full.is-light .btn-ghost:hover { background: #fff; }
.hero-photo-full.is-light .hpf-tags li { color: var(--muted); border-color: rgba(21,32,43,.14); background: rgba(255,255,255,.5); }
.hpf-left { padding-inline: clamp(16px, 5.5vw, 110px); }
.hpf-left .hpf-copy { max-width: min(540px, 38vw); }

@media (max-width: 900px) {
  .hero-photo-full.is-light { min-height: 0; background: var(--paper); }
  .hero-photo-full.is-light .hpf-img { object-position: 74% 25%; }
  .hero-photo-full.is-light::before { background: linear-gradient(0deg, var(--paper) 0%, rgba(243,245,246,0) 28%); }
  .hpf-left { padding-inline: var(--gutter); }
  .hpf-left .hpf-copy { max-width: none; }
}

/* Hero step path: Ignite › Elevate › Expand › Embed, each a link into the journey slider */
.hpf-steps { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 6px; border-radius: 999px; background: rgba(255,255,255,.72); border: 1px solid rgba(21,32,43,.08); box-shadow: 0 10px 30px rgba(17,24,32,.08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hpf-steps a { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 6px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; transition: background .2s, transform .2s, box-shadow .2s; }
.hpf-steps a:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(17,24,32,.10); }
.hpf-steps a:hover .n { transform: scale(1.08); }
.hpf-steps .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: var(--ink); font-size: 12px; font-weight: 800; border: 1px solid rgba(21,32,43,.08); transition: transform .2s; }
.hpf-steps .sep { width: 14px; height: 14px; flex: 0 0 auto; position: relative; }
.hpf-steps .sep::before { content: ''; position: absolute; inset: 0; margin: auto; width: 7px; height: 7px; border-top: 2px solid #9aa6b1; border-right: 2px solid #9aa6b1; transform: translateX(-1px) rotate(45deg); }
@media (max-width: 560px) {
  .hpf-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: 22px; width: 100%; }
  .hpf-steps .sep { display: none; }
  .hpf-steps a { padding-right: 10px; }
}

/* Step path inside a centred hero (Managed IT) */
.hero-c .hero-steps { margin-top: 26px; }

/* Solid Way scenes: findings list, onboarding checklist, security toggles, roadmap */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.checks li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-weight: 500; }
.st { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.st.ok { background: #dcf3e6; color: #17734a; }
.st.risk { background: #fde4e1; color: #b3261e; }
.st.next { background: var(--blue-wash); color: var(--blue-ink); }
.tick { width: 20px; height: 20px; border-radius: 50%; background: #20b26b; position: relative; flex: 0 0 auto; }
.tick::after { content: ''; position: absolute; left: 7px; top: 4px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tick.pending { background: var(--paper); border: 2px dashed #9aa6b1; }
.tick.pending::after { display: none; }
.toggle { width: 34px; height: 20px; border-radius: 999px; background: #d5dbe1; position: relative; flex: 0 0 auto; }
.toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.toggle.on { background: var(--blue); }
.toggle.on::after { left: 16px; }
.roadmap { list-style: none; margin: 0; padding: 0 0 0 4px; display: grid; gap: 0; border-left: 2px solid var(--line); margin-left: 10px; }
.roadmap li { position: relative; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; padding: 9px 0 9px 16px; }
.roadmap li::before { content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--card); border: 3px solid var(--blue); }
.roadmap b { font-size: 12px; color: var(--blue-ink); font-variant-numeric: tabular-nums; }
.roadmap span { font-weight: 500; }

/* ---------- Managed IT page ---------- */
.hero-link { margin-top: 18px; font-size: 15px; }
.hero-link a { color: var(--blue-ink); font-weight: 600; text-decoration: none; }
.hero-link a:hover { text-decoration: underline; }
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.split > * { min-width: 0; }
.body-copy { color: var(--muted); font-size: 17px; line-height: 1.75; max-width: 62ch; }
.body-copy + .body-copy { margin-top: 16px; }

/* Value cards on dark bands (Why Solid; The Solid Way promises) */
.promise { border: 1px solid var(--night-line); border-radius: var(--radius); padding: 26px; display: grid; gap: 10px; align-content: start; background: var(--night-2); min-width: 0; }
.promise h3 { font-size: 19px; font-weight: 700; color: var(--on-night); }
.promise p { font-size: 15px; color: var(--on-night-muted); }
.promise-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(26,159,219,.15); color: #8fd6f7; margin-bottom: 4px; }
.exp-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 40px; margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--night-line); }
.exp-strip div { display: grid; }
.exp-strip b { font-size: 20px; color: var(--on-night); }
.exp-strip span { font-size: 14px; color: var(--on-night-muted); }
.exp-strip .btn { margin-left: auto; }

/* Pricing plans */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.plan.featured { border: 2px solid var(--blue); box-shadow: 0 24px 50px rgba(11,116,168,.14); }
.plan-head { display: grid; gap: 6px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.plan-tag { justify-self: start; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-ink); background: var(--blue-wash); padding: 5px 11px; border-radius: 999px; }
.plan h3 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.price { display: flex; align-items: baseline; gap: 8px; }
.price b { font-size: 46px; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.price span { font-size: 14px; color: var(--muted); }
.plan-group h4 { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.plan-group ul { list-style: none; margin: 0; padding: 0; display: grid; }
.plan-group li { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; }
.plan-group li:last-child { border-bottom: 0; }
.plan-group li span { min-width: 0; }
.billed { font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--paper); border: 1px solid var(--line); padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.sla { font-style: normal; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.sla.gold { background: #fff1cf; color: #8a6100; }
.sla.platinum { background: #e6ebf0; color: #33414e; border: 1px solid #cfd8e0; }
.plan-cta { margin-top: auto; justify-content: center; }
.plans-note { margin-top: 16px; font-size: 13px; color: var(--muted); text-align: center; }
.callout-link { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding: 22px 26px; border-radius: 18px; background: var(--night); color: var(--on-night-muted); text-decoration: none; transition: transform .2s; }
.callout-link b { color: #fff; margin-right: 6px; }
.callout-link .more { color: #8fd6f7; font-weight: 600; white-space: nowrap; }
.callout-link:hover { transform: translateY(-2px); }

/* Solutions grid */
.sol-grid .card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.sol-grid .card li { position: relative; padding-left: 18px; font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.sol-grid .card li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }

/* ROI */
.roi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.roi-item { padding: 28px 24px; border-left: 1px solid var(--line); display: grid; gap: 8px; align-content: start; min-width: 0; }
.roi-item:first-child { border-left: 0; }
.roi-ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-wash); color: var(--blue-ink); margin-bottom: 6px; }
.roi-item h3 { font-size: 18px; font-weight: 700; }
.roi-item p { font-size: 15px; color: var(--muted); }

/* Solid Guardian device-health panel (used in blog-solid-guardian.html) */
.guardian-media { background: linear-gradient(135deg, #1b2a3a, #12202d); border-radius: 22px; padding: clamp(24px, 4vw, 48px); min-height: 320px; }

/* Reviews */
.review-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; display: grid; justify-items: center; gap: 6px; text-decoration: none; color: var(--ink); transition: transform .2s, box-shadow .2s; }
.review-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(17,24,32,.08); }
.review-card:hover .g-count { color: var(--blue-ink); text-decoration: underline; }
.review-city { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }

/* Closing CTA band */
.closing { background: var(--blue-wash); border-radius: 28px; padding: clamp(28px, 5vw, 56px); display: grid; grid-template-columns: 1.3fr auto; gap: 24px 40px; align-items: center; }
.closing > * { min-width: 0; }
.closing p { margin-top: 12px; color: var(--muted); font-size: 17px; max-width: 56ch; }

@media (max-width: 1080px) {
  .plans { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .roi { grid-template-columns: 1fr 1fr; }
  .roi-item:nth-child(3) { border-left: 0; }
  .roi-item:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .split, .closing { grid-template-columns: 1fr; }
  .exp-strip .btn { margin-left: 0; }
}
@media (max-width: 560px) {
  .roi { grid-template-columns: 1fr; }
  .roi-item { border-left: 0; border-top: 1px solid var(--line); }
  .roi-item:first-child { border-top: 0; }
  .price b { font-size: 40px; }
}

/* "The Solid Way" feature link at the foot of the mega menu's Services column */
.mega-way { display: grid; gap: 2px; margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--night); color: var(--on-night); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.mega-way small { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8fd6f7; }
.mega-way strong { font-size: 16px; }
.mega-way span { font-size: 12px; color: var(--on-night-muted); }
.mega-way:hover, .mega-way[aria-current="page"] { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(17,24,32,.18); }

/* ---------- Cyber Security: Secure365 ---------- */
.why365 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; }
.why365 div { display: grid; gap: 4px; align-content: start; padding: 18px 20px; border-radius: 16px; background: var(--blue-wash); min-width: 0; }
.why365 b { font-size: 15px; }
.why365 span { font-size: 14px; color: var(--muted); }
.no { width: 20px; height: 20px; flex: 0 0 auto; position: relative; }
.no::after { content: ''; position: absolute; left: 5px; right: 5px; top: 9px; height: 2px; border-radius: 2px; background: #c3ccd4; }
.plan-group li.off span { color: #9aa6b1; }
.industries { margin-top: 32px; display: grid; gap: 12px; }
.industries ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.industries li { font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink); }
.faq-wrap { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(24px, 5vw, 72px); align-items: start; }
.faq-wrap > * { min-width: 0; }
.faq { display: grid; gap: 10px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 0 22px; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 30px 18px 0; font-weight: 700; font-size: 16px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 400; color: var(--blue-ink); }
.faq details[open] summary::after { content: '–'; }
.faq details p { padding: 0 0 20px; color: var(--muted); font-size: 15px; line-height: 1.7; }
@media (max-width: 1080px) { .why365 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .faq-wrap { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .why365 { grid-template-columns: 1fr; } }

/* Team cards with headshots; linked cards open that person's page */
.avatar-img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; flex: 0 0 auto; background: var(--blue-wash); box-shadow: 0 0 0 3px var(--card), 0 0 0 4px var(--line); }
.person em { display: block; font-style: normal; font-size: 13px; font-weight: 600; color: var(--blue-ink); margin-top: 4px; }
a.person.is-link { text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s, border-color .2s; }
a.person.is-link:hover { transform: translateY(-3px); border-color: #b9dcee; box-shadow: 0 18px 40px rgba(17,24,32,.08); }
a.person.is-link:hover .avatar-img { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--blue); }

/* Microsoft Partner logo. The supplied file has white text on a transparent background, so a
   darkened copy shows the text in ink on the light strip, and an untouched copy clipped to the
   four squares sits on top to keep Microsoft's colours. */
.trust-partner { display: grid; align-content: center; gap: 6px; }
.ms-logo { position: relative; display: block; width: min(190px, 100%); }
.ms-logo img { display: block; width: 100%; height: auto; }
.ms-logo img:first-child { filter: brightness(0) invert(.1); }
.ms-logo .ms-squares { position: absolute; inset: 0; clip-path: inset(0 73% 0 0); }

/* ---------- Brand story (VTO): stamps, pillars, values, promise, beliefs ---------- */
.stamp { font-family: var(--f-hand); color: var(--blue); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; margin-top: 22px; }
.stamp.on-night { text-align: center; margin-top: 40px; }
.foot-stamp { font-size: 20px; margin-top: 10px; }
.pillars { margin: 24px 0 0; display: grid; gap: 14px; }
.pillars div { border-left: 0; padding: 16px 18px; border-radius: 14px; background: var(--night-2); border: 1px solid var(--night-line); }
.pillars dt { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8fd6f7; margin-bottom: 4px; }
.pillars dd { margin: 0; color: var(--on-night); font-size: 16px; line-height: 1.55; font-weight: 500; }
.core-values { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.cv { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.cv-n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-wash); color: var(--blue-ink); font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }
.cv h3 { font-size: 18px; font-weight: 800; line-height: 1.25; }
.cv p { font-size: 14.5px; color: var(--muted); }
.promise-head { max-width: 860px; margin-bottom: clamp(32px, 4vw, 48px); display: grid; gap: 16px; }
.accent-on-night { color: var(--blue); }
.promise-k { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8fd6f7; }
.beliefs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.beliefs blockquote { margin: 0; padding: 28px; border-radius: var(--radius); background: var(--blue-wash); display: grid; gap: 14px; align-content: space-between; min-width: 0; }
.beliefs p { font-size: clamp(19px, 1.7vw, 23px); font-weight: 700; line-height: 1.35; letter-spacing: -.01em; color: var(--ink); }
.beliefs cite { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-ink); }
/* Home: three strengths */
.strengths { display: grid; gap: 10px; margin-top: 24px; }
.strengths div { display: grid; gap: 2px; padding: 14px 18px; border: 1px solid var(--night-line); border-radius: 14px; }
.strengths b { color: var(--on-night); font-size: 16px; }
.strengths span { color: var(--on-night-muted); font-size: 14.5px; }
.text-link-on-night { display: inline-block; margin-top: 20px; color: #8fd6f7; font-weight: 600; text-decoration: none; }
.text-link-on-night:hover { text-decoration: underline; }
@media (max-width: 1080px) { .core-values { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .beliefs { grid-template-columns: 1fr; } .core-values { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .core-values { grid-template-columns: 1fr; } }
.hero-c .h-statement { max-width: 22ch; font-size: clamp(34px, 4.4vw, 58px); }

/* ---------- AI Academy page (Quicksmart-style showcase) ---------- */
.aa-hero { background: linear-gradient(180deg, var(--paper) 0%, #e6eef3 100%); padding-top: clamp(20px, 3vw, 36px); overflow: hidden; }
.aa-notice { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--ink); text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 16px 6px 6px; box-shadow: 0 6px 18px rgba(17,24,32,.06); margin-bottom: 28px; }
.aa-notice:hover { border-color: #b9dcee; }
.aa-new { background: var(--blue-ink); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.aa-hero .wrap { text-align: center; }
.aa-hero-copy { display: grid; justify-items: center; gap: 20px; max-width: 820px; margin: 0 auto; }
.aa-hero-copy .lead { margin: 0; }

/* Devices */
.aa-devices { position: relative; max-width: 960px; margin: clamp(40px, 5vw, 64px) auto 0; }
.aa-laptop { width: 86%; margin: 0 auto; }
.aa-screen { background: #1b232d; border-radius: 18px 18px 0 0; padding: 12px; box-shadow: 0 30px 60px rgba(17,24,32,.18); }
.aa-base { height: 16px; background: linear-gradient(#d5dce2, #b9c3cc); border-radius: 0 0 14px 14px; width: 108%; margin-left: -4%; }
.aa-app { background: var(--card); border-radius: 8px; display: grid; grid-template-columns: 170px 1fr; min-height: 300px; text-align: left; overflow: hidden; }
.aa-side { background: var(--night); padding: 16px 12px; display: grid; gap: 4px; align-content: start; font-size: 12px; color: var(--on-night-muted); }
.aa-side span { padding: 7px 10px; border-radius: 8px; }
.aa-side span.on { background: var(--night-2); color: #fff; }
.aa-brand { color: #fff; font-size: 16px; margin-bottom: 10px; padding-left: 10px; }
.aa-brand span { display: block; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #8fd6f7; }
.aa-main { padding: 18px 20px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.aa-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.aa-row b { font-size: 16px; }
.aa-row em { font-style: normal; font-size: 12px; color: var(--muted); }
.aa-modules { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aa-modules div { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; font-size: 12px; }
.aa-modules div.cur { border-color: var(--blue); background: var(--blue-wash); }
.aa-modules span { color: var(--muted); font-size: 11px; }
.aa-modules b { font-size: 13px; }
.aa-modules i { display: block; height: 6px; border-radius: 4px; background: linear-gradient(90deg, var(--blue) var(--p), var(--line) 0); }
.aa-modules small { color: var(--muted); font-size: 11px; }
.aa-coach-strip { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--paper); }
.aa-coach-strip .dot { width: 8px; height: 8px; border-radius: 50%; background: #20b26b; }

.aa-phone { position: absolute; right: 0; bottom: -10px; width: 200px; background: #1b232d; border-radius: 30px; padding: 9px; box-shadow: 0 30px 60px rgba(17,24,32,.28); text-align: left; }
.aa-phone-screen { position: relative; background: var(--card); border-radius: 23px; padding: 30px 16px 18px; display: grid; gap: 10px; min-height: 340px; align-content: start; }
.aa-notch { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 64px; height: 16px; border-radius: 10px; background: #1b232d; }
.aa-phone-screen small { font-size: 11px; color: var(--blue-ink); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.aa-phone-screen b { font-size: 15px; line-height: 1.3; }
.aa-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 13px; }
.aa-tasks li { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--paper); }
.aa-tasks li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #b4bec7; flex: 0 0 auto; }
.aa-tasks li.done::before { background: #20b26b; border-color: #20b26b; }
.aa-tasks li.done { color: var(--muted); text-decoration: line-through; }
.aa-streak { justify-self: start; font-size: 12px; font-weight: 700; color: #b35c00; background: #fff0d4; padding: 4px 10px; border-radius: 999px; }

/* Three columns */
.aa-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 4vw, 56px); }
.aa-cols > div { display: grid; gap: 10px; align-content: start; min-width: 0; }
.aa-cols .ico { width: 48px; height: 48px; border-radius: 14px; background: var(--blue-wash); color: var(--blue-ink); display: grid; place-items: center; }
.aa-cols h3 { font-size: 20px; font-weight: 700; }
.aa-cols p { color: var(--muted); }

/* Tabs */
.aa-tint { background: #eaf1f5; }
.aa-tabs-wrap { display: grid; grid-template-columns: 1fr 300px; gap: clamp(28px, 6vw, 96px); align-items: center; max-width: 1000px; margin: 0 auto; }
.aa-tablist { display: grid; gap: 10px; }
.aa-tab { font: inherit; text-align: left; cursor: pointer; display: grid; gap: 4px; padding: 18px 22px; border-radius: 16px; border: 1px solid transparent; background: transparent; color: var(--ink); transition: background .2s, border-color .2s, box-shadow .2s; }
.aa-tab b { font-size: 18px; }
.aa-tab span { font-size: 15px; color: var(--muted); }
.aa-tab:hover { background: rgba(255,255,255,.6); }
.aa-tab[aria-selected="true"] { background: var(--card); border-color: var(--line); box-shadow: 0 14px 30px rgba(17,24,32,.08); }
.aa-tab[aria-selected="true"] b { color: var(--blue-ink); }
.aa-phone.big { position: relative; right: auto; bottom: auto; width: 100%; max-width: 300px; justify-self: center; }
.aa-phone.big .aa-phone-screen { min-height: 480px; padding: 40px 20px 22px; }
.aa-panel { display: grid; gap: 14px; }
.aa-ring { --p: 50; width: 150px; height: 150px; margin: 8px auto; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--blue) calc(var(--p) * 1%), var(--blue-wash) 0); position: relative; }
.aa-ring::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: var(--card); }
.aa-ring span { position: relative; font-size: 28px; font-weight: 800; }
.aa-prompt { font-size: 14px; padding: 14px; border-radius: 14px; background: var(--blue-ink); color: #fff; }
.aa-chat { display: grid; gap: 8px; }
.aa-chat p { margin: 0; font-size: 13px; padding: 10px 12px; border-radius: 14px; max-width: 85%; }
.aa-chat .them { background: var(--paper); }
.aa-chat .me { background: var(--blue-ink); color: #fff; justify-self: end; }
.aa-bars { display: flex; align-items: flex-end; gap: 10px; height: 170px; padding: 6px 4px 0; }
.aa-bars i { flex: 1; height: var(--h); border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--blue), var(--blue-ink)); }
.aa-note { font-size: 11px; color: var(--muted); margin: 0; }

/* Collage */
.aa-collage-row { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.aa-collage-row > * { min-width: 0; }
.aa-collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; aspect-ratio: 5 / 4; max-width: 100%; }
.aa-collage div { border-radius: 18px; overflow: hidden; min-height: 0; }
.aa-collage img { width: 100%; height: 100%; object-fit: cover; }
.aa-collage .c1 { grid-row: span 2; }
.aa-collage .c2 img { object-position: 70% 30%; }

/* Included */
.aa-included { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.aa-included li { position: relative; padding: 20px 20px 20px 54px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; color: var(--muted); font-size: 14.5px; line-height: 1.5; min-width: 0; }
.aa-included li b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; }
.aa-included li::before { content: ""; position: absolute; left: 20px; top: 22px; width: 20px; height: 20px; border-radius: 50%; background: #20b26b; }
.aa-included li::after { content: ""; position: absolute; left: 27px; top: 26px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Video band */
.aa-video { background: var(--night); color: var(--on-night); padding-block: clamp(56px, 8vw, 96px); }
.aa-video .wrap { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.aa-video .wrap > * { min-width: 0; }
.aa-video .h-lg { color: var(--on-night); margin-top: 14px; }
.aa-video-frame { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 9; max-width: 100%; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.aa-video-frame img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.6); }
.aa-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 84px; height: 84px; border-radius: 50%; background: var(--blue); box-shadow: 0 10px 30px rgba(26,159,219,.5); }
.aa-play::after { content: ""; position: absolute; left: 55%; top: 50%; transform: translate(-50%,-50%); border-style: solid; border-width: 14px 0 14px 23px; border-color: transparent transparent transparent #fff; }
.aa-video-label { position: absolute; left: 20px; bottom: 18px; font-size: 14px; font-weight: 600; color: #fff; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Testimonials */
.aa-quote { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.aa-quote blockquote { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--ink); }
.aa-quote figcaption { margin-top: auto; font-size: 14px; color: var(--muted); display: grid; }
.aa-quote figcaption b { color: var(--ink); font-size: 15px; }

/* Register CTA */
.aa-cta { background: linear-gradient(135deg, #0b74a8 0%, #1a9fdb 100%); color: #fff; padding-block: clamp(56px, 8vw, 104px); }
.aa-cta-in { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.aa-cta-in > * { min-width: 0; }
.aa-cta .eyebrow { color: #d9f1fc; }
.aa-cta .h-lg { color: #fff; margin: 14px 0 16px; }
.aa-cta p { color: #e3f4fc; font-size: 17px; }
.aa-cta .stamp { color: #fff; }
.aa-cta .form { color: var(--ink); box-shadow: 0 30px 60px rgba(4,40,62,.3); }
.aa-cta .form p { color: var(--muted); font-size: 13px; }
.aa-cta .form .form-done { color: var(--ink); font-size: 15px; }

@media (max-width: 900px) {
  .aa-cols, .aa-included { grid-template-columns: 1fr; }
  .aa-tabs-wrap, .aa-collage-row, .aa-video .wrap, .aa-cta-in { grid-template-columns: 1fr; }
  .aa-laptop { width: 100%; }
  .aa-app { grid-template-columns: 1fr; }
  .aa-side { display: none; }
  .aa-phone:not(.big) { width: 150px; right: -6px; }
  .aa-phone:not(.big) .aa-phone-screen { min-height: 260px; }
}
@media (max-width: 560px) {
  .aa-modules { grid-template-columns: 1fr; }
  .aa-phone:not(.big) { display: none; }
}
@media (min-width: 901px) and (max-width: 1080px) { .aa-included { grid-template-columns: 1fr 1fr; } }

.hs-copy .hs-actions { margin-top: auto; }
.hs-copy .hs-actions .btn { margin-top: 0; }

/* ---------- Ignite page ----------
   Ignite keeps the warm "Ignite" tint from the journey as its accent, alongside Solid blue. */
:root { --ig-gold: #c98a12; }
.ig-hero { padding-block: clamp(28px, 4vw, 56px) clamp(56px, 8vw, 96px); background: radial-gradient(70% 90% at 85% 0%, var(--t-ignite), transparent 60%), var(--paper); }
.ig-crumb { display: inline-block; font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; margin-bottom: 28px; }
.ig-crumb:hover { color: var(--blue-ink); }
.ig-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: end; }
.ig-head > * { min-width: 0; }
.ig-head .h-xl { margin-top: 18px; }
.eyebrow.pill.ig-pill { background: var(--t-ignite); color: #8a5a00; }
.ig-accent { color: var(--ig-gold); }
.ig-right { display: grid; gap: 16px; }
.ig-lede { font-size: 18px; line-height: 1.6; color: var(--muted); }
.ig-lede b { color: var(--ink); }
.ig-meta { list-style: none; margin: 4px 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ig-meta li { font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.ig-small { font-size: 15px; color: var(--muted); }
.ig-small a { color: var(--blue-ink); font-weight: 600; }

.ig-why { display: grid; gap: 24px; max-width: 1000px; }
.ig-statement { font-size: clamp(28px, 3.6vw, 46px); font-weight: 800; line-height: 1.15; letter-spacing: -.03em; color: var(--on-night) !important; text-wrap: balance; }
.ig-why .ig-accent { color: #f5c25a; }
.ig-why-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 48px); }
.ig-why-cols p, .ig-why-end p { font-size: 17px; line-height: 1.7; }
.ig-why-end { display: grid; gap: 10px; padding-top: 22px; border-top: 1px solid var(--night-line); }
.ig-why-end b { color: var(--on-night); }
.ig-why-punch { font-size: 20px !important; font-weight: 700; color: var(--on-night) !important; }

.ig-hosts { padding-block: clamp(56px, 7vw, 80px); background: var(--t-ignite); text-align: center; }
.ig-avatars { display: flex; justify-content: center; gap: 20px; margin: 24px 0 28px; }
.ig-avatars img { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; background: #fff; box-shadow: 0 0 0 4px #fff, 0 12px 30px rgba(17,24,32,.18); transition: transform .2s; }
.ig-avatars a:hover img { transform: translateY(-3px); }
.ig-hosts-line { max-width: 760px; margin: 0 auto; font-size: clamp(19px, 2.2vw, 25px); font-weight: 500; line-height: 1.45; }
.ig-hand { font-family: var(--f-hand); font-weight: 400; color: var(--ig-gold); font-size: 1.2em; letter-spacing: 0; }

.ig-frame { position: relative; display: block; max-width: 980px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 26px; overflow: hidden; text-decoration: none; color: #fff; background: radial-gradient(60% 80% at 30% 20%, rgba(245,194,90,.35), transparent 60%), radial-gradient(70% 90% at 90% 100%, rgba(26,159,219,.45), transparent 60%), var(--night); box-shadow: 0 30px 80px rgba(17,24,32,.22); }
.ig-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 92px; height: 92px; border-radius: 50%; background: #f5c25a; color: var(--night); display: grid; place-items: center; box-shadow: 0 0 0 12px rgba(245,194,90,.2), 0 20px 50px rgba(0,0,0,.4); transition: transform .25s; }
.ig-play svg { width: 36px; height: 36px; margin-left: 5px; }
.ig-frame:hover .ig-play { transform: translate(-50%, -50%) scale(1.08); }
.ig-cap { position: absolute; left: 28px; bottom: 24px; right: 28px; font-size: 18px; font-weight: 600; display: grid; gap: 6px; }
.ig-cap small { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #f5c25a; }
.ig-video-meta { text-align: center; margin-top: 20px; }
.ig-video-meta a { font-weight: 600; color: var(--blue-ink); text-decoration: none; }

.ig-dates { background: linear-gradient(180deg, var(--paper), #fbf3e3); }
.ig-date-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 860px; margin: 0 auto; }
.ig-date { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 30px; display: grid; gap: 12px; justify-items: start; min-width: 0; box-shadow: 0 18px 40px rgba(17,24,32,.06); }
.ig-city { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #8a5a00; background: var(--t-ignite); padding: 5px 12px; border-radius: 999px; }
.ig-day { display: flex; align-items: baseline; gap: 12px; }
.ig-day b { font-size: clamp(64px, 8vw, 96px); font-weight: 800; letter-spacing: -.05em; line-height: .95; font-variant-numeric: tabular-nums; }
.ig-day span { font-size: 18px; font-weight: 600; color: var(--muted); }
.ig-detail { color: var(--muted); }
.ig-kicker { font-family: var(--f-hand); color: var(--ig-gold); font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; margin-top: 12px; }
.ig-list li::before { background: var(--ig-gold); }
.ig-who { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(24px, 5vw, 72px); align-items: start; }
.ig-who > * { min-width: 0; }
.ig-who a { color: var(--blue-ink); font-weight: 600; }
.ig-who .body-copy + .body-copy { margin-top: 16px; }
.ig-who b { color: var(--ink); }
.ig-cta { text-align: center; display: grid; gap: 16px; justify-items: center; padding: clamp(36px, 6vw, 72px) clamp(20px, 5vw, 64px); border-radius: 28px; background: radial-gradient(70% 90% at 50% 0%, var(--t-ignite), transparent 70%), var(--card); border: 1px solid var(--line); }
.ig-cta .h-lg { max-width: 24ch; }
.ig-accent-dark { color: var(--ig-gold); }
.ig-cta p { color: var(--muted); max-width: 62ch; font-size: 17px; }
.ig-cta p b { color: var(--ink); }
.hpf-steps a.is-on { background: #fff; box-shadow: 0 6px 16px rgba(17,24,32,.10); }

@media (max-width: 900px) {
  .ig-head, .ig-why-cols, .ig-who, .ig-date-grid { grid-template-columns: 1fr; }
  .ig-avatars img { width: 108px; height: 108px; }
  .ig-play { width: 68px; height: 68px; }
  .ig-play svg { width: 26px; height: 26px; }
  .ig-cap { font-size: 15px; left: 18px; bottom: 16px; }
}

/* ---------- Resources page ---------- */
.res-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.res-filter { font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: inline-flex; align-items: center; gap: 8px; transition: background .2s, color .2s, border-color .2s; }
.res-filter span { font-size: 12px; color: var(--muted); background: var(--paper); border-radius: 999px; padding: 1px 8px; }
.res-filter:hover { border-color: #b9dcee; }
.res-filter[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.res-filter[aria-pressed="true"] span { background: rgba(255,255,255,.18); color: #fff; }
.res-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.res { min-width: 0; }
.res > a { display: flex; flex-direction: column; height: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; text-decoration: none; color: var(--ink); transition: transform .2s, box-shadow .2s, border-color .2s; }
.res > a:hover { transform: translateY(-3px); border-color: #b9dcee; box-shadow: 0 18px 40px rgba(17,24,32,.08); }
.res-cover { aspect-ratio: 3 / 2; max-width: 100%; position: relative; padding: 18px; display: grid; align-content: space-between; overflow: hidden; }
.res-cover::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.35); }
.t-check { background: var(--blue-wash); color: var(--blue-ink); }
.t-template { background: var(--t-ignite); color: #8a5a00; }
.t-info { background: var(--t-secure); color: #4b3fa8; }
.res-type { justify-self: start; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; background: rgba(255,255,255,.75); padding: 4px 10px; border-radius: 999px; position: relative; z-index: 1; }
.res-big { font-size: 64px; font-weight: 800; letter-spacing: -.05em; line-height: .9; position: relative; z-index: 1; }
.res-ico { width: 54px; height: 54px; position: relative; z-index: 1; }
.res-ico svg { width: 100%; height: 100%; }
.res-sub { font-size: 14px; font-weight: 700; position: relative; z-index: 1; }
.res-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.res-topic { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.res-body h2 { font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.res-body p { font-size: 14.5px; color: var(--muted); }
.res-foot { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); }
.res-foot .more { font-weight: 600; color: var(--blue-ink); }
.res-empty { text-align: center; color: var(--muted); padding: 40px 0; }
@media (max-width: 1080px) { .res-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .res-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .res-grid { grid-template-columns: 1fr; } }

/* ---------- Home hero (eye photo) ----------
   The photo covers the right ~60% of the hero, runs up under the transparent header and
   fades into the page colour on its left edge, so the copy always sits on clear background. */
.home-hero { position: relative; overflow: hidden; background: var(--paper); margin-top: calc(-1 * (var(--head-h) + env(safe-area-inset-top, 0px))); min-height: clamp(620px, 92vh, 960px); display: flex; align-items: center; }
.hh-img { position: absolute; top: 0; right: 0; height: 100%; width: 62%; max-width: none; object-fit: cover; object-position: 62% 45%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%); mask-image: linear-gradient(90deg, transparent 0%, #000 34%); }
.hh-in { position: relative; z-index: 1; width: 100%; padding-block: calc(var(--head-h) + clamp(40px, 6vw, 80px)) clamp(48px, 7vw, 96px); }
.hh-copy { max-width: min(600px, 48%); display: grid; gap: 22px; justify-items: start; }
.hh-copy .h-xl { margin: 0; }
.hh-copy .lead { margin: 0; }
.hh-copy .hero-tiles { width: 100%; max-width: 520px; margin-top: 10px; }
.hh-chip { left: auto; right: clamp(16px, 4vw, 56px); bottom: clamp(24px, 4vw, 48px); z-index: 2; }

@media (max-width: 1100px) {
  .hh-img { width: 70%; object-position: 66% 45%; }
  .hh-copy { max-width: 52%; }
}
@media (max-width: 900px) {
  .home-hero { display: block; min-height: 0; }
  .hh-img { position: relative; width: 100%; height: clamp(300px, 78vw, 520px); object-position: 65% 40%;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
  .hh-in { padding-block: 0 56px; margin-top: -12px; }
  .hh-copy { max-width: none; }
  .hh-chip { top: calc(clamp(300px, 78vw, 520px) - 84px); bottom: auto; right: 16px; }
}
.hh-copy .h-xl { font-size: clamp(36px, 4.3vw, 62px); }
.hh-in { padding-block: calc(var(--head-h) + clamp(24px, 4vw, 56px)) clamp(40px, 5vw, 72px); }
.hh-copy { gap: 18px; }
@media (max-width: 900px) { .hh-chip { display: none; } }

/* ---------- Homepage V2 (StoryBrand wireframe flow) ---------- */
/* Stakes: eight pain points on the dark band */
.v2-stakes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.v2-stake { display: grid; gap: 14px; align-content: start; padding: 22px; border-radius: var(--radius); background: var(--night-2); border: 1px solid var(--night-line); min-width: 0; transition: border-color .2s, transform .2s; }
.v2-stake:hover { border-color: #3c5b74; transform: translateY(-2px); }
.v2-stake p { color: var(--on-night) !important; font-size: 16px; font-weight: 600; line-height: 1.4; }
.v2-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(245,120,98,.14); color: #ff9a85; }
.v2-ico svg { width: 22px; height: 22px; }
.v2-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 32px; }
.v2-cta-row span { color: var(--on-night-muted); font-size: 15px; }
.v2-cta-row.center { justify-content: center; }
.grid-4 .card .more { text-decoration: none; }
.grid-4 .card .more:hover { text-decoration: underline; }

/* Empathy & competency */
.motto-inline { display: block; margin-top: 8px; font-family: var(--f-hand); color: var(--blue); font-size: 26px; }
.v2-proof-grid { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 20px; align-items: stretch; }
.v2-badge-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: grid; gap: 12px; align-content: start; justify-items: start; min-width: 0; }
.v2-badge-card h3 { font-size: 19px; font-weight: 700; margin-top: 6px; }
.v2-badge-card p { color: var(--muted); font-size: 15px; }
.v2-ms { width: min(200px, 100%); }
.v2-testimonial { margin: 0; background: var(--night); color: var(--on-night); border-radius: var(--radius); padding: 30px; display: flex; flex-direction: column; gap: 18px; min-width: 0; position: relative; overflow: hidden; }
.v2-quote-mark { width: 44px; height: 44px; color: var(--blue); }
.v2-testimonial blockquote { margin: 0; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; font-weight: 600; }
.v2-testimonial figcaption { margin-top: auto; display: grid; font-size: 14px; color: var(--on-night-muted); }
.v2-testimonial figcaption b { color: #fff; font-size: 15px; }

/* Plan: three numbered steps joined by a line */
.v2-plan { background: linear-gradient(180deg, var(--paper), var(--blue-wash)); }
.v2-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; counter-reset: none; }
.v2-steps::before { content: ""; position: absolute; top: 28px; left: 16%; right: 16%; height: 2px; background: repeating-linear-gradient(90deg, var(--blue) 0 8px, transparent 8px 16px); opacity: .5; }
.v2-steps li { position: relative; display: grid; justify-items: center; text-align: center; gap: 12px; padding: 0 12px 28px; min-width: 0; }
.v2-num { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-ink); color: #fff; font-size: 22px; font-weight: 800; box-shadow: 0 0 0 8px var(--paper); position: relative; z-index: 1; }
.v2-step-ico { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--card); color: var(--blue-ink); border: 1px solid var(--line); margin-top: 10px; box-shadow: 0 12px 26px rgba(17,24,32,.06); }
.v2-step-ico svg { width: 28px; height: 28px; }
.v2-steps h3 { font-size: 20px; font-weight: 700; }
.v2-steps p { color: var(--muted); max-width: 30ch; }

@media (max-width: 1080px) {
  .v2-stakes { grid-template-columns: repeat(2, 1fr); }
  .v2-proof-grid { grid-template-columns: 1fr 1fr; }
  .v2-testimonial { grid-column: span 2; }
}
@media (max-width: 760px) {
  .v2-steps { grid-template-columns: 1fr; }
  .v2-steps::before { display: none; }
}
@media (max-width: 560px) {
  .v2-stakes, .v2-proof-grid { grid-template-columns: 1fr; }
  .v2-testimonial { grid-column: auto; }
}
/* Centred section heads: centre the eyebrow label too */
.sec-head.stack[style*="text-align:center"] { justify-items: center; }

/* ---------- Word of mouth (home page) ---------- */
.wom-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.wom-grid > * { min-width: 0; }
.wom-quotes { position: relative; border-radius: 24px; padding: clamp(26px, 3vw, 36px); background: linear-gradient(180deg, var(--blue-wash) 0%, #cfe8f5 100%); display: flex; flex-direction: column; min-height: 520px; overflow: hidden; }
.wom-mark { width: 40px; height: 40px; color: var(--blue-ink); opacity: .9; }
.wom-slides { position: relative; flex: 1; margin-top: 14px; }
.wom-slide { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; gap: 24px; opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.wom-slide.is-on { opacity: 1; transform: none; pointer-events: auto; }
.wom-slide blockquote { margin: 0; font-size: clamp(20px, 1.9vw, 25px); line-height: 1.38; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.wom-slide figcaption { margin-top: auto; display: flex; align-items: center; gap: 12px; padding-bottom: 8px; }
.wom-slide figcaption span:last-child { display: grid; font-size: 14px; color: var(--muted); }
.wom-slide figcaption b { color: var(--ink); font-size: 16px; }
.wom-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-ink); color: #fff; font-weight: 800; flex: 0 0 auto; box-shadow: 0 0 0 3px rgba(255,255,255,.7); }
.wom-dots { display: flex; gap: 8px; margin-top: 18px; }
.wom-dots button { flex: 1; height: 16px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; }
.wom-dots i { display: block; width: 100%; height: 3px; border-radius: 3px; background: rgba(11,116,168,.22); overflow: hidden; position: relative; }
.wom-dots i::after { content: ""; position: absolute; inset: 0; background: var(--blue-ink); transform: scaleX(0); transform-origin: left; }
.wom-dots button.done i::after { transform: scaleX(1); }
.wom-dots button[aria-selected="true"] i::after { animation: wom-fill var(--wom-ms, 7000ms) linear forwards; }
.wom.paused .wom-dots button[aria-selected="true"] i::after { animation-play-state: paused; }
@keyframes wom-fill { to { transform: scaleX(1); } }


/* Reviews column: the three office review cards from managed-it.html as compact rows, then the success stories card in the same style */
.wom-side { display: grid; grid-template-rows: repeat(4, 1fr); gap: 14px; }
.review-row { grid-template-columns: minmax(0, 1fr) auto; justify-items: stretch; align-items: center; gap: 16px; padding: 18px 22px; text-align: left; border-radius: 20px; }
.rr-place { display: grid; justify-items: start; gap: 6px; }
.review-row .review-city { margin: 0; }
.review-row .g-logo { font-size: 25px; }
.rr-score { display: grid; justify-items: end; gap: 4px; }
.wom-stories strong { font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.rr-arrow { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; transition: background .2s, transform .2s; }
.wom-stories:hover .rr-arrow { background: var(--blue-ink); transform: translateX(2px); }
.wom-btn { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 18px 24px; border-radius: 999px; background: var(--night); color: #fff; font-weight: 600; text-decoration: none; transition: background .2s, transform .2s; }
.wom-btn:hover { background: #000; transform: translateY(-1px); }

@media (max-width: 1080px) {
  .wom-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .wom-grid { grid-template-columns: 1fr; }
  .wom-quotes { min-height: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .wom-slide { transition: none; }
  .wom-dots button[aria-selected="true"] i::after { animation: none; transform: scaleX(1); }
}
.wom-slide blockquote { font-size: clamp(20px, 2.1vw, 30px); line-height: 1.32; letter-spacing: -.018em; max-width: 34ch; }
.wom-quotes { min-height: 480px; }
@media (max-width: 760px) { .wom-quotes { min-height: 440px; } }
.sec-head.stack { gap: 12px; }
.sec-head.stack .h-lg { margin-top: 0; }


/* ---------- Case study pages ---------- */
.cs-hero { padding-block: clamp(28px, 4vw, 56px) clamp(56px, 8vw, 96px); background: radial-gradient(60% 80% at 90% 0%, var(--blue-wash), transparent 65%), var(--paper); }
.cs-hero-in { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: end; }
.cs-hero-in > * { min-width: 0; }
.cs-hero-in > div { display: grid; gap: 18px; justify-items: start; }
.cs-hero .ig-crumb { margin-bottom: 8px; }
.cs-hero .h-xl { font-size: clamp(56px, 9vw, 120px); letter-spacing: -.05em; line-height: .95; }
.cs-facts { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 26px; display: grid; gap: 18px; box-shadow: 0 24px 50px rgba(17,24,32,.07); }
.cs-facts-label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-ink); }
.cs-facts dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.cs-facts dt { font-size: 12px; color: var(--muted); }
.cs-facts dd { margin: 2px 0 0; font-weight: 700; font-size: 16px; }
.cs-facts-stat { display: grid; gap: 2px; padding: 18px; border-radius: 16px; background: var(--night); color: var(--on-night); }
.cs-facts-stat b { font-size: 44px; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.cs-facts-stat span { color: var(--on-night-muted); font-size: 14px; }

.cs-story { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.cs-story > * { min-width: 0; }
.cs-side { position: sticky; top: calc(var(--head-h) + 24px); display: grid; gap: 12px; }
.cs-num { font-size: 14px; font-weight: 800; color: var(--blue-ink); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-wash); }
.cs-body { display: grid; gap: 22px; }
.cs-body > p { font-size: 17px; line-height: 1.75; color: var(--muted); max-width: 64ch; }
.cs-pull { margin: 0; padding: 24px 26px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; font-weight: 500; color: var(--ink); display: grid; gap: 12px; }
.cs-pull cite { font-style: normal; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-ink); }
.cs-solution { background: linear-gradient(180deg, var(--paper), var(--blue-wash)); }
.cs-intro { font-weight: 600; color: var(--ink) !important; margin-bottom: -6px; }
.cs-wins { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cs-wins li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); font-weight: 600; font-size: 16px; }
.cs-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-wash); color: var(--blue-ink); flex: 0 0 auto; }
.cs-ico svg { width: 20px; height: 20px; }

.cs-quote-band { text-align: center; }
.cs-big-quote { margin: 0 auto; max-width: 900px; display: grid; justify-items: center; gap: 24px; }
.cs-big-quote > svg { width: 56px; height: 56px; color: var(--blue); }
.cs-big-quote blockquote { margin: 0; font-size: clamp(26px, 3.4vw, 42px); font-weight: 700; line-height: 1.25; letter-spacing: -.02em; color: var(--on-night); text-wrap: balance; }
.cs-big-quote figcaption { display: flex; align-items: center; gap: 12px; text-align: left; }
.cs-big-quote figcaption span:last-child { display: grid; color: var(--on-night-muted); font-size: 14px; }
.cs-big-quote figcaption b { color: #fff; font-size: 16px; }

.cs-results { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 24px; background: var(--card); overflow: hidden; }
.cs-results div { padding: 30px 26px; display: grid; gap: 8px; align-content: start; border-left: 1px solid var(--line); min-width: 0; }
.cs-results div:first-child { border-left: 0; }
.cs-results b { font-size: clamp(44px, 5vw, 64px); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--blue-ink); font-variant-numeric: tabular-nums; }
.cs-results span { color: var(--muted); font-size: 15px; line-height: 1.5; }

@media (max-width: 1080px) {
  .cs-results { grid-template-columns: 1fr 1fr; }
  .cs-results div:nth-child(3) { border-left: 0; }
  .cs-results div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .cs-hero-in, .cs-story { grid-template-columns: 1fr; }
  .cs-side { position: static; }
}
@media (max-width: 560px) {
  .cs-results { grid-template-columns: 1fr; }
  .cs-results div { border-left: 0; border-top: 1px solid var(--line); }
  .cs-results div:first-child { border-top: 0; }
}
.wom-slide figcaption a { color: var(--blue-ink); font-weight: 600; }

/* ---------- Why businesses choose us (home) ---------- */
.why-choose { background: var(--card); border-block: 1px solid var(--line); padding-block: clamp(36px, 5vw, 56px); }
.why-choose-h { margin: 0 0 22px; font-size: inherit; }
.why-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.why-stat { display: grid; gap: 8px; align-content: start; padding: 4px 28px; border-left: 1px solid var(--line); min-width: 0; }
.why-stat:first-child { border-left: 0; padding-left: 0; }
.why-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-wash); color: var(--blue-ink); margin-bottom: 4px; }
.why-ico svg { width: 20px; height: 20px; }
.why-ms { width: 150px; height: 40px; display: flex; align-items: center; margin-bottom: 4px; }
.why-label { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.why-stat b { font-size: clamp(40px, 4.4vw, 56px); font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.why-stat b small { font-size: .45em; font-weight: 700; letter-spacing: 0; color: var(--blue-ink); margin-left: 2px; }
.why-stat p { font-size: 14.5px; color: var(--muted); line-height: 1.55; }
@media (max-width: 1080px) { .why-stats { grid-template-columns: 1fr 1fr; row-gap: 28px; } .why-stat:nth-child(3) { border-left: 0; padding-left: 0; } }
@media (max-width: 560px) { .why-stats { grid-template-columns: 1fr; } .why-stat { border-left: 0; padding-left: 0; padding-top: 22px; border-top: 1px solid var(--line); } .why-stat:first-child { border-top: 0; padding-top: 0; } }

/* ---------- Homepage V2: assessment CTA band ---------- */
.v2-assess { position: relative; overflow: hidden; color: #fff;
  background:
    repeating-linear-gradient(-45deg, rgba(255,255,255,.10) 0 1px, transparent 1px 18px),
    radial-gradient(70% 120% at 85% 100%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, #1a9fdb 0%, #0b74a8 100%); }
.v2-assess-in { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: end; min-height: clamp(440px, 46vw, 600px); }
.v2-assess-in > * { min-width: 0; }
.v2-assess-copy { align-self: center; display: grid; gap: 18px; justify-items: start; padding-block: clamp(56px, 7vw, 96px); }
.v2-assess .eyebrow { color: #d9f1fc; }
.v2-assess .h-lg { color: #fff; font-size: clamp(32px, 4vw, 52px); max-width: 16ch; }
.v2-assess p { color: #e6f5fc; font-size: 18px; line-height: 1.6; max-width: 48ch; }
.v2-assess-btn { background: var(--night); }
.v2-assess-btn:hover { background: #000; }
.v2-assess-ghost { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.45); }
.v2-assess-ghost:hover { background: rgba(255,255,255,.22); }
/* The photo's subject spans x 476–1640 of a 1920px square with transparent margins, so it is
   scaled by height and nudged so he stands on the band's bottom edge. */
.v2-assess-person { justify-self: center; align-self: end; display: block; width: auto; max-width: none; height: clamp(400px, 44vw, 600px); margin-bottom: 0; filter: drop-shadow(0 24px 40px rgba(4, 40, 62, .35)); }

@media (max-width: 900px) {
  .v2-assess-in { grid-template-columns: 1fr; min-height: 0; }
  .v2-assess-copy { padding-block: 56px 8px; }
  .v2-assess-person { height: clamp(300px, 80vw, 420px); }
}

/* Stakes icons, refined: one line-icon set in Solid blue, in soft circular badges beside the text */
.v2-stake { grid-template-columns: auto 1fr; align-items: center; gap: 16px; padding: 20px 22px; }
.v2-ico { width: 48px; height: 48px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgba(143,214,247,.22), rgba(26,159,219,.08) 70%); color: #8fd6f7; box-shadow: inset 0 0 0 1px rgba(143,214,247,.28); }
.v2-ico svg { width: 22px; height: 22px; }
.v2-stake:hover .v2-ico { color: #fff; background: var(--blue); box-shadow: 0 0 0 6px rgba(26,159,219,.15); }
.v2-stake .v2-ico { transition: background .2s, color .2s, box-shadow .2s; }
.v2-stake p { font-size: 15.5px; }
/* Stakes, final: icon above text so each point reads on two or three lines */
.v2-stake { grid-template-columns: 1fr; align-items: start; gap: 16px; padding: 24px; }
.v2-ico { width: 52px; height: 52px; color: #a9e1fa; background: radial-gradient(circle at 30% 25%, rgba(143,214,247,.28), rgba(26,159,219,.12) 72%); box-shadow: inset 0 0 0 1px rgba(143,214,247,.35); }
.v2-ico svg { width: 24px; height: 24px; stroke-width: 1.9; }
.v2-stake p { font-size: 16px; }

/* ---------- Elevate page: Ignite structure with Elevate's blue accent ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.el .ig-hero { background: radial-gradient(70% 90% at 85% 0%, var(--t-elevate), transparent 60%), var(--paper); }
.el .eyebrow.pill.ig-pill { background: var(--t-elevate); color: var(--blue-ink); }
.el .ig-accent { color: var(--blue-ink); }
.el .ig-why .ig-accent { color: #8fd6f7; }

.el-weeks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: wk; }
.el-weeks li { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 26px 24px 24px; display: grid; gap: 10px; align-content: start; min-width: 0; overflow: hidden; transition: transform .2s, box-shadow .2s, border-color .2s; }
.el-weeks li::after { counter-increment: wk; content: counter(wk); position: absolute; right: 14px; top: -10px; font-size: 96px; font-weight: 800; letter-spacing: -.05em; color: var(--t-elevate); line-height: 1; z-index: 0; }
.el-weeks li > * { position: relative; z-index: 1; }
.el-weeks li:hover { transform: translateY(-3px); border-color: #b9dcee; box-shadow: 0 18px 40px rgba(17,24,32,.08); }
.el-wk { justify-self: start; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-ink); background: var(--blue-wash); padding: 5px 11px; border-radius: 999px; }
.el-weeks h3 { font-size: 19px; font-weight: 700; line-height: 1.3; max-width: 22ch; }
.el-weeks p { color: var(--muted); font-size: 15px; }

.el-rc { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px 48px; align-items: center; padding: clamp(28px, 5vw, 56px); border-radius: 28px; background: radial-gradient(70% 100% at 100% 0%, var(--t-elevate), transparent 60%), var(--card); border: 1px solid var(--line); }
.el-rc > * { min-width: 0; }
.el-rc .h-lg { margin: 6px 0 12px; }
.el-rc p { color: var(--muted); font-size: 17px; }
.el-rc-actions { display: grid; gap: 10px; justify-items: start; }
.el-rc-actions span { font-size: 13px; color: var(--muted); }

.el-book p a { color: #fff; font-weight: 700; }
.el-toggle { border: 0; margin: 0 0 4px; padding: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--paper); border-radius: 999px; }
.el-toggle label { display: block; margin: 0; cursor: pointer; }
.el-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.el-toggle span { display: block; text-align: center; padding: 10px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--muted); letter-spacing: 0; text-transform: none; transition: background .2s, color .2s; }
.el-toggle input:checked + span { background: var(--card); color: var(--ink); box-shadow: 0 4px 12px rgba(17,24,32,.1); }
.el-toggle input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }

@media (max-width: 1080px) { .el-weeks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .el-rc { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .el-weeks { grid-template-columns: 1fr; } }
.el-toggle label { position: relative; }
.el-toggle input { width: 1px; height: 1px; margin: 0; padding: 0; inset: 0; }

/* ---------- Embed page: Elevate structure with Embed's lilac accent ---------- */
.em { --em-ink: #4b3fa8; }
.em .ig-hero { background: radial-gradient(70% 90% at 85% 0%, var(--t-embed), transparent 60%), var(--paper); }
.em .eyebrow.pill.ig-pill { background: var(--t-embed); color: var(--em-ink); }
.em .ig-accent { color: var(--em-ink); }
.em .ig-why .ig-accent { color: #c4bcff; }
.em .el-rc { background: radial-gradient(70% 100% at 100% 0%, var(--t-embed), transparent 60%), var(--card); }
.em-deliver { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; margin-bottom: clamp(28px, 4vw, 44px); }
.em-deliver > * { min-width: 0; }
.em-deliver-copy { display: grid; gap: 14px; }
.em-scene-wrap { background: var(--t-embed); border-radius: 24px; padding: clamp(24px, 4vw, 44px); }
.em .flow li::before { background: var(--t-embed); color: var(--em-ink); }
.em-list li::before { background: var(--em-ink); }
.em-book { background: linear-gradient(135deg, #3d3290 0%, #6a5ce0 100%); }
.em-book .eyebrow { color: #e4e0ff; }
@media (max-width: 900px) { .em-deliver { grid-template-columns: 1fr; } }

/* ---------- Caveat: the hand-written voice (shared with the Copilot site) ----------
   Used sparingly for the human beat in a headline, scribbled intros and stamps.
   Caveat is narrower than a display sans, so it runs ~16% larger and bold to hold its weight. */
:root { --hand: #1592d0; }
em.hand { font-family: var(--f-hand); font-style: normal; font-weight: 700; font-size: 1.16em; line-height: .9; letter-spacing: 0; color: var(--hand); }
.night em.hand, .aa-cta em.hand, .v2-assess em.hand { color: #8fd6f7; }
.ig-accent.hand { color: var(--ig-gold); }
.el .ig-accent.hand { color: var(--blue-ink); }
.em .ig-accent.hand { color: var(--em-ink); }
.scribble { display: inline-block; font-family: var(--f-hand); font-weight: 700; font-size: 28px; line-height: 1; color: var(--hand); }
.hs-step.hs-scribble { font-family: var(--f-hand); font-size: 26px; font-weight: 700; letter-spacing: 0; text-transform: none; line-height: 1; color: var(--hand); }

/* Existing hand-drawn touches, resized for Caveat */
.stamp { font-weight: 700; font-size: clamp(28px, 3vw, 36px); }
.foot-stamp { font-size: 24px; }
.motto { font-weight: 700; font-size: clamp(32px, 3.4vw, 42px); }
.motto-inline { font-weight: 700; font-size: 32px; }
.ig-hand { font-weight: 700; font-size: 1.3em; }
.ig-kicker { font-weight: 700; font-size: clamp(36px, 4vw, 52px); }
.hand { font-weight: 700; }

/* Footer bar: copyright with legal links on the left, the Made Superhuman stamp on the right */
.foot-base { align-items: center; }
.foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.foot-legal a { text-decoration: none; color: var(--muted); }
.foot-legal a:hover { color: var(--blue-ink); text-decoration: underline; }
.foot-base .foot-stamp { margin: 0; font-size: 26px; line-height: 1; }
@media (max-width: 560px) { .foot-base { flex-direction: column; align-items: flex-start; gap: 14px; } }

/* Elevate week numbers: sit fully inside the card with even breathing room from the top and right edges */
.el-weeks li::after { top: 20px; right: 24px; font-size: clamp(64px, 6vw, 84px); line-height: .8; }
.el-weeks h3 { max-width: calc(100% - 72px); }
.el-weeks h3 { max-width: calc(100% - 60px); text-wrap: balance; }

/* ---------- Journey navigator (foot of each stage page) ----------
   Mid-weight: four compact cards, between the full slider and the small pill strip. */
.jn { display: grid; gap: 22px; }
.jn-head { display: grid; justify-items: center; gap: 4px; text-align: center; }
.jn-head h2 { margin: 0; font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; letter-spacing: -.02em; }
.jn-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.jn-item { position: relative; min-width: 0; --jn-tint: var(--t-ignite); --jn-ink: #8a5a00; }
.jn-elevate { --jn-tint: var(--t-elevate); --jn-ink: var(--blue-ink); }
.jn-expand { --jn-tint: var(--t-expand); --jn-ink: #17734a; }
.jn-embed { --jn-tint: var(--t-embed); --jn-ink: #4b3fa8; }
/* small chevron between cards */
.jn-item + .jn-item::before { content: ""; position: absolute; left: -15px; top: 50%; width: 12px; height: 12px; border-top: 2px solid #b4bec7; border-right: 2px solid #b4bec7; transform: translate(-25%, -50%) rotate(45deg); z-index: 1; }
.jn-item a { height: 100%; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 6px; padding: 18px 20px 18px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: transform .2s, box-shadow .2s, border-color .2s, background .2s; }
.jn-item a:hover { transform: translateY(-3px); border-color: var(--jn-tint); box-shadow: 0 16px 34px rgba(17,24,32,.08); }
.jn-top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.jn-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: var(--jn-tint); color: var(--jn-ink); flex: 0 0 auto; }
.jn-step { font-family: var(--f-hand); font-weight: 700; font-size: 22px; line-height: 1; color: var(--jn-ink); }
.jn-name { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.jn-what { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.jn-line { font-size: 14.5px; color: var(--muted); line-height: 1.45; }
.jn-cta { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--jn-ink); }
.jn-item.is-here a { background: var(--jn-tint); border-color: transparent; box-shadow: 0 14px 30px rgba(17,24,32,.06); }
.jn-item.is-here .jn-n { background: var(--ink); color: #fff; }
.jn-item.is-here .jn-line, .jn-item.is-here .jn-what { color: #46525c; }
.jn-item.is-here .jn-cta { display: inline-flex; justify-self: start; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.7); color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.jn-item.is-here .jn-cta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--jn-ink); }

@media (max-width: 1000px) {
  .jn-grid { grid-template-columns: 1fr 1fr; }
  .jn-item + .jn-item::before { display: none; }
}
@media (max-width: 520px) { .jn-grid { grid-template-columns: 1fr; } }

/* ---------- Blog ---------- */
.blog-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px 20px; margin-bottom: 18px; }
.blog-filters { margin-bottom: 0; }
.blog-search { display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 42px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); min-width: min(260px, 100%); color: var(--muted); }
.blog-search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash); }
.blog-search svg { width: 18px; height: 18px; flex: 0 0 auto; }
.blog-search input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--ink); width: 100%; min-width: 0; }
.blog-count { font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.post { min-width: 0; --c-bg: var(--blue-wash); --c-ink: var(--blue-ink); }
.post.cat-m365 { --c-bg: var(--t-expand); --c-ink: #17734a; }
.post.cat-cyber { --c-bg: #1b2a3a; --c-ink: #8fd6f7; }
.post.cat-ai { --c-bg: var(--t-ignite); --c-ink: #8a5a00; }
.post > a { height: 100%; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; text-decoration: none; color: var(--ink); transition: transform .2s, box-shadow .2s, border-color .2s; }
.post > a:hover { transform: translateY(-3px); border-color: #b9dcee; box-shadow: 0 18px 40px rgba(17,24,32,.08); }
.post-cover { position: relative; aspect-ratio: 16 / 7; max-width: 100%; background: var(--c-bg); color: var(--c-ink); display: flex; align-items: flex-end; justify-content: space-between; padding: 16px 18px; overflow: hidden; }
.post-cover::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,.18); }
.post.cat-cyber .post-cover::after { background: rgba(143,214,247,.10); }
.post-ico { width: 46px; height: 46px; position: relative; z-index: 1; }
.post-ico svg { width: 100%; height: 100%; }
.post-cat { position: relative; z-index: 1; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: rgba(255,255,255,.75); color: var(--ink); padding: 4px 10px; border-radius: 999px; }
.post.cat-cyber .post-cat { background: rgba(255,255,255,.12); color: #e6f5fc; }
.post-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.post-tags li { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--paper); color: var(--muted); border: 1px solid var(--line); }
.post-body h2 { font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.post-body p { font-size: 14.5px; color: var(--muted); line-height: 1.55; }
.post-more { margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 600; color: var(--blue-ink); }
/* Featured first post spans the full row with the cover on the left */
.post.is-featured { grid-column: 1 / -1; }
.post.is-featured > a { flex-direction: row; }
.post.is-featured .post-cover { aspect-ratio: auto; width: 44%; min-height: 280px; align-items: flex-end; }
.post.is-featured .post-ico { width: 72px; height: 72px; position: absolute; left: 28px; top: 28px; }
.post.is-featured .post-body { padding: clamp(22px, 3vw, 36px); justify-content: center; gap: 14px; }
.post.is-featured .post-body h2 { font-size: clamp(22px, 2.4vw, 30px); }
.post.is-featured .post-body p { font-size: 16px; max-width: 60ch; }
.blog-empty { text-align: center; padding: 48px 20px; border: 1px dashed var(--line); border-radius: 20px; display: grid; gap: 6px; }
.blog-empty b { font-size: 18px; }
.blog-empty p { color: var(--muted); }
.blog-empty a { color: var(--blue-ink); font-weight: 600; }

@media (max-width: 1000px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .post.is-featured > a { flex-direction: column; }
  .post.is-featured .post-cover { width: auto; min-height: 0; aspect-ratio: 16 / 7; }
  .post.is-featured .post-ico { position: relative; left: auto; top: auto; width: 46px; height: 46px; }
}
@media (max-width: 560px) { .blog-grid { grid-template-columns: 1fr; } .blog-search { width: 100%; } }



/* ---------- Case studies ----------
   The featured story runs full width (dark cover with its results beside the story); the rest sit two to a row.
   Each card: a short colour-coded cover (type, icon, client name) over a roomy body (tags, outcome headline,
   summary, client quote with a coloured rule, size + read link). */
.csx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); }
.csx { min-width: 0; --bg: var(--blue-wash); --ink-c: var(--blue-ink); --bar: var(--blue-ink); --name: var(--ink); }
.csx.tone-night { --bg: #15202b; --ink-c: #8fd6f7; --bar: var(--blue-ink); --name: #fff; }
.csx.tone-green { --bg: var(--t-expand); --ink-c: #17734a; --bar: #17734a; }
.csx.tone-warm { --bg: var(--t-ignite); --ink-c: #8a5a00; --bar: #b37a0c; }
.csx.tone-lilac { --bg: var(--t-embed); --ink-c: #4b3fa8; --bar: #4b3fa8; }
.csx > a { height: 100%; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 26px; overflow: hidden; text-decoration: none; color: var(--ink); transition: transform .25s, box-shadow .25s, border-color .25s; }
.csx > a:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 26px 56px rgba(17,24,32,.11); }
.csx > a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* Cover: label top-left, icon top-right, client name at the foot (and results, when featured) */
.csx-cover { position: relative; overflow: hidden; min-height: clamp(150px, 15vw, 190px); background: var(--bg); padding: clamp(20px, 2vw, 28px); display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; align-items: start; gap: 12px; }
.csx-cover::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 230px; height: 230px; border-radius: 50%; background: rgba(255,255,255,.3); transition: transform .5s; }
.csx > a:hover .csx-cover::after { transform: scale(1.12); }
.csx.tone-night .csx-cover::after { background: rgba(143,214,247,.09); }
.csx-type { position: relative; z-index: 1; grid-row: 1; grid-column: 1; justify-self: start; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.75); color: var(--ink); }
.csx.tone-night .csx-type { background: rgba(255,255,255,.12); color: #e6f5fc; }
.csx-ico { position: relative; z-index: 1; grid-row: 1; grid-column: 2; width: 40px; height: 40px; color: var(--ink-c); }
.csx-ico svg { width: 100%; height: 100%; }
.csx-name { position: relative; z-index: 1; grid-row: 3; grid-column: 1 / -1; align-self: end; font-size: clamp(32px, 3.2vw, 44px); font-weight: 800; letter-spacing: -.045em; line-height: .95; color: var(--name); }

/* Body */
.csx-body { padding: clamp(22px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 14px; flex: 1; }
.csx-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.csx-tags li { font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: var(--paper); color: #4a5560; border: 1px solid var(--line); }
.csx-body h2 { margin: 2px 0 0; font-size: clamp(21px, 1.9vw, 26px); font-weight: 800; line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; }
.csx-body p { margin: 0; font-size: 16px; color: #4a5560; line-height: 1.6; max-width: 52ch; }
.csx-quote { margin: 6px 0 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--bar); font-size: clamp(17px, 1.35vw, 19px); font-weight: 600; font-style: italic; line-height: 1.45; letter-spacing: -.01em; color: var(--ink); display: grid; gap: 8px; }
.csx-quote cite { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.csx-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.csx-foot .more { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--ink); padding-bottom: 3px; border-bottom: 2px solid var(--bar); transition: color .2s; }
.csx > a:hover .csx-foot .more { color: var(--blue-ink); }

/* Featured story: full width, dark cover with its results on the left, the story on the right */
.csx.is-featured { grid-column: 1 / -1; }
.csx.is-featured > a { flex-direction: row; }
.csx.is-featured .csx-cover { width: 46%; flex: 0 0 46%; min-height: clamp(380px, 34vw, 460px); grid-template-rows: auto 1fr auto auto; padding: clamp(26px, 3vw, 40px); }
.csx.is-featured .csx-name { grid-row: 3; align-self: end; margin-bottom: 8px; font-size: clamp(56px, 7vw, 96px); letter-spacing: -.055em; }
.csx-stats { position: relative; z-index: 1; grid-row: 4; grid-column: 1 / -1; list-style: none; margin: 0; padding: 20px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; border-top: 1px solid rgba(143,214,247,.2); }
.csx-stats li { display: grid; gap: 4px; min-width: 0; }
.csx-stats b { font-size: clamp(28px, 2.8vw, 40px); font-weight: 300; letter-spacing: -.04em; color: #8fd6f7; line-height: 1; font-variant-numeric: tabular-nums; }
.csx-stats span { font-size: 13px; color: var(--on-night-muted); line-height: 1.35; }
.csx.is-featured .csx-body { padding: clamp(28px, 3.6vw, 52px); gap: 16px; justify-content: center; }
.csx.is-featured .csx-body h2 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.12; letter-spacing: -.035em; }
.csx.is-featured .csx-body p { font-size: 17px; }
.csx.is-featured .csx-quote { font-size: clamp(19px, 1.6vw, 23px); }
.csx.is-featured .csx-foot { margin-top: 10px; }

@media (max-width: 900px) {
  .csx-grid { grid-template-columns: 1fr; }
  .csx.is-featured > a { flex-direction: column; }
  .csx.is-featured .csx-cover { width: auto; flex: none; min-height: 320px; }
}

/* Company mega menu: resource cards carry a short description; the side column lists the latest videos */
.mega-card small { margin-top: -8px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.mega-vids { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mega-vids a { display: grid; grid-template-columns: 80px 1fr; gap: 12px; align-items: center; text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.3; }
.mega-vids img { width: 80px; height: 45px; object-fit: cover; border-radius: 8px; display: block; background: #cfe6f2; transition: transform .2s; }
.mega-vids span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mega-vids a:hover { color: var(--blue-ink); }
.mega-vids a:hover img { transform: scale(1.04); }

/* ---------- AI Education: video library ---------- */
.vid-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vid { min-width: 0; }
.vid > a { height: 100%; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; text-decoration: none; color: var(--ink); transition: transform .2s, box-shadow .2s, border-color .2s; }
.vid > a:hover { transform: translateY(-3px); border-color: #b9dcee; box-shadow: 0 18px 40px rgba(17,24,32,.08); }
.vid-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--night); }
.vid-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.vid > a:hover .vid-thumb img { transform: scale(1.04); }
.vid-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,24,32,0) 55%, rgba(17,24,32,.35)); }
.vid-play { position: absolute; z-index: 1; right: 14px; bottom: 14px; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.94); box-shadow: 0 8px 24px rgba(17,24,32,.25); transition: transform .2s, background .2s; }
.vid-play::before { content: ""; position: absolute; left: 20px; top: 16px; border-style: solid; border-width: 10px 0 10px 15px; border-color: transparent transparent transparent var(--blue-ink); transition: border-color .2s; }
.vid > a:hover .vid-play { transform: scale(1.08); background: var(--blue-ink); }
.vid > a:hover .vid-play::before { border-left-color: #fff; }
.vid-new { display: inline-block; margin-right: 10px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: var(--blue-ink); color: #fff; }
.vid-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.vid-topic { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-ink); }
.vid-body h2, .vid-body h3 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
.vid-body p { font-size: 14.5px; color: var(--muted); line-height: 1.55; }
.vid-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.vid-foot .more { font-weight: 600; color: var(--blue-ink); display: inline-flex; align-items: center; gap: 6px; }
.vid-foot .more::before { content: ""; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; }

/* Featured (latest) lesson: a large tile two columns wide and two rows tall, with the next two lessons stacked beside it */
.vid.is-featured { grid-column: span 2; grid-row: span 2; }
.vid.is-featured .vid-play { right: 22px; bottom: 22px; width: 72px; height: 72px; }
.vid.is-featured .vid-play::before { left: 28px; top: 22px; border-width: 14px 0 14px 21px; }

.vid.is-featured .vid-body { padding: clamp(22px, 2.6vw, 32px); gap: 12px; }
.vid.is-featured .vid-body h2, .vid.is-featured .vid-body h3 { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.025em; line-height: 1.15; }
.vid.is-featured .vid-body p { font-size: 16px; max-width: 60ch; }

/* Pop-up player */
.vid-modal { width: min(1040px, calc(100vw - 32px)); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 20px; background: var(--night); color: var(--on-night); overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.vid-modal::backdrop { background: rgba(10,14,19,.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vid-modal-head { display: flex; align-items: center; gap: 16px; padding: 14px 14px 14px 22px; }
.vid-modal-head h2 { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vid-modal-yt { font-size: 13px; font-weight: 600; color: #8fd6f7; text-decoration: none; white-space: nowrap; }
.vid-modal-yt:hover { text-decoration: underline; }
.vid-modal-x { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; font-size: 24px; line-height: 1; color: #fff; background: rgba(255,255,255,.12); }
.vid-modal-x:hover { background: rgba(255,255,255,.22); }
.vid-frame { aspect-ratio: 16 / 9; background: #000; }
.vid-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 1000px) {
  .vid-grid { grid-template-columns: 1fr 1fr; }
  .vid.is-featured { grid-row: auto; }
}
@media (max-width: 620px) {
  .vid-grid { grid-template-columns: 1fr; }
  .vid.is-featured { grid-column: auto; }
  .vid-modal-yt { display: none; }
}
/* Chapter list on the featured lesson; clicking a chapter starts the video there */
.vid-ch-h { margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.vid-chapters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.vid-chapters li { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink); transition: color .15s; }
.vid-chapters b { flex: 0 0 34px; font-size: 12px; font-weight: 700; color: var(--blue-ink); font-variant-numeric: tabular-nums; }
.vid-chapters li:hover { color: var(--blue-ink); }
.vid:not(.is-featured) .vid-ch-h, .vid:not(.is-featured) .vid-chapters { display: none; }
@media (max-width: 620px) { .vid-chapters { grid-template-columns: 1fr; } }

/* ---------- Blog post (blog-cloud-security.html is the template) ---------- */
.bp-hero { padding-block: clamp(28px, 4vw, 48px) clamp(36px, 5vw, 64px); background: radial-gradient(60% 80% at 90% 0%, var(--blue-wash), transparent 70%); }
.bp-hero-in { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.bp-hero-in > * { min-width: 0; }
.bp-head { display: grid; gap: 18px; justify-items: start; }
.bp-title { margin: 0; font-size: clamp(34px, 4.6vw, 58px); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; text-wrap: balance; }
.bp-head .lead { margin: 0; max-width: 58ch; }
.bp-byline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 4px; }
.bp-byline img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.bp-byline > span:not(.bp-meta) { display: grid; line-height: 1.3; }
.bp-byline b { font-size: 15px; }
.bp-byline > span > span { font-size: 13px; color: var(--muted); }
.bp-meta { font-size: 14px; color: var(--muted); padding-left: 14px; border-left: 1px solid var(--line); }
.bp-cover { position: relative; aspect-ratio: 5 / 4; border-radius: 28px; background: radial-gradient(70% 70% at 50% 45%, #22364a, var(--night) 75%); color: #8fd6f7; overflow: hidden; display: grid; place-items: center; }
.bp-cover::before { content: ""; position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%; border: 1px dashed rgba(143,214,247,.25); }
.bp-cloud { width: 46%; height: auto; position: relative; filter: drop-shadow(0 10px 30px rgba(26,159,219,.35)); }
.bp-chip { position: absolute; font-size: 12.5px; font-weight: 600; color: #e6f5fc; background: rgba(255,255,255,.08); border: 1px solid rgba(143,214,247,.25); padding: 7px 12px; border-radius: 999px; white-space: nowrap; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.bp-chip::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ff8a7a; margin-right: 8px; vertical-align: 1px; }
.bp-chip.c1 { left: 7%; top: 12%; }
.bp-chip.c2 { right: 7%; top: 24%; }
.bp-chip.c3 { left: 9%; bottom: 22%; }
.bp-chip.c4 { right: 6%; bottom: 10%; }

.bp-section { padding-top: clamp(24px, 3vw, 40px); }
.bp-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.bp-toc { position: sticky; top: calc(var(--head-h) + 24px); display: grid; gap: 14px; }
.bp-toc-h { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.bp-toc ol { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); display: grid; gap: 10px; counter-reset: toc; }
.bp-toc ol a { text-decoration: none; font-size: 14.5px; color: var(--ink); }
.bp-toc ol a:hover { color: var(--blue-ink); }
.bp-toc-cta { margin-top: 10px; display: grid; gap: 4px; padding: 16px; border-radius: 16px; background: var(--night); color: var(--on-night); text-decoration: none; transition: transform .2s; }
.bp-toc-cta small { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8fd6f7; }
.bp-toc-cta strong { font-size: 15px; line-height: 1.3; }
.bp-toc-cta span { font-size: 13px; color: #8fd6f7; }
.bp-toc-cta:hover { transform: translateY(-2px); }

.bp-body { max-width: 760px; display: grid; gap: 20px; }
.bp-body > h2 { margin: 28px 0 0; font-size: clamp(24px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.025em; line-height: 1.2; scroll-margin-top: calc(var(--head-h) + 20px); }
.bp-body > h2:first-child { margin-top: 0; }
.bp-body > p { font-size: 17px; line-height: 1.75; color: #3d4a55; }
.bp-story { padding: 24px 26px; border-radius: 20px; background: #fff4f1; border: 1px solid #f6d5cd; display: grid; gap: 10px; }
.bp-story-h { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #b4432f; }
.bp-story p { font-size: 16.5px; line-height: 1.7; color: #3d4a55; }
.bp-story b { color: var(--ink); }

.bp-challenges { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bp-challenges > li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; padding: 24px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.bp-num { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; font-weight: 800; color: var(--blue-ink); background: var(--blue-wash); }
.bp-challenges h3 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin: 9px 0 6px; }
.bp-challenges p { font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.bp-fix { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--paper); }
.bp-fix > span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #17734a; margin-bottom: 8px; }
.bp-fix ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.bp-fix li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.5; }
.bp-fix li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 11px; height: 6px; border-left: 2px solid #17734a; border-bottom: 2px solid #17734a; transform: rotate(-45deg); }

.bp-checks { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--line); border-radius: 20px; background: var(--card); overflow: hidden; }
.bp-checks li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; padding: 16px 20px; border-top: 1px solid var(--line); }
.bp-checks li:first-child { border-top: 0; }
.bp-checks li::before { content: "✓"; grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 800; color: #fff; background: var(--blue-ink); }
.bp-checks b { font-size: 16px; }
.bp-checks span { font-size: 15px; color: var(--muted); line-height: 1.5; }

.bp-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bp-tools > div { display: grid; gap: 6px; align-content: start; padding: 20px; border-radius: 18px; background: var(--night); color: var(--on-night); }
.bp-tools b { font-size: 16px; line-height: 1.3; color: #fff; }
.bp-tools span { font-size: 14.5px; color: var(--on-night-muted); line-height: 1.5; }

.bp-author { margin-top: 18px; display: flex; gap: 16px; align-items: center; padding: 20px 22px; border-radius: 20px; background: var(--blue-wash); }
.bp-author img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.bp-author span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-ink); }
.bp-author b { display: block; font-size: 17px; margin: 2px 0 4px; }
.bp-author p { font-size: 14.5px; color: var(--muted); line-height: 1.5; }

@media (max-width: 1000px) {
  .bp-hero-in { grid-template-columns: 1fr; }
  .bp-cover { aspect-ratio: 16 / 9; max-height: 340px; width: 100%; }
  .bp-layout { grid-template-columns: 1fr; }
  .bp-toc { position: static; }
  .bp-toc-cta { display: none; }
}
@media (max-width: 620px) {
  .bp-tools { grid-template-columns: 1fr; }
  .bp-challenges > li { grid-template-columns: 1fr; gap: 6px; padding: 20px; }
  .bp-chip { font-size: 11px; padding: 6px 10px; }
  .bp-cover { aspect-ratio: 1 / 1; max-height: none; }
  .bp-cloud { width: 40%; }
  .bp-meta { padding-left: 0; border-left: 0; width: 100%; }
}

/* "From the blog" carousel at the foot of service pages (built by assets/blog-data.js) */
.rail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.rail-head .h-lg { margin-top: 12px; }
.rail-ctrl { display: flex; align-items: center; gap: 10px; }
.rail-all { font-size: 14px; font-weight: 600; color: var(--blue-ink); text-decoration: none; margin-right: 6px; }
.rail-all:hover { text-decoration: underline; }
.rail-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s, border-color .2s, opacity .2s; }
.rail-btn:hover:not(:disabled) { background: var(--ink); color: #fff; border-color: var(--ink); }
.rail-btn:disabled { opacity: .35; cursor: default; }
.rail-static .rail-btn { display: none; }
.rail { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: -12px -12px 0; padding: 12px 12px 24px; scroll-padding-inline: 12px; }
.rail::-webkit-scrollbar { display: none; }
.rail:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 22px; }
.rail-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); gap: 20px; }
.rail-track > .post { scroll-snap-align: start; }
.rail .post-cover { aspect-ratio: 16 / 9; }
.post-video .post-cover { padding: 0; background: var(--night); }
.post-video .post-cover::after { display: none; }
.post-video .post-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.post-video > a:hover .post-cover img { transform: scale(1.04); }
.post-video > a:hover .vid-play { transform: scale(1.08); background: var(--blue-ink); }
.post-video > a:hover .vid-play::before { border-left-color: #fff; }
@media (max-width: 1000px) {
  .rail-track { grid-auto-columns: calc((100% - 20px) / 2); }
}
@media (max-width: 620px) {
  .rail-track { grid-auto-columns: 86%; gap: 14px; }
  .rail-all { margin-right: auto; }
  .rail-ctrl { width: 100%; }
}

/* Blog post template, generated pages: icon cover with the article's key topics as chips */
.bp-cover-auto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 2.4vw, 28px); padding: clamp(22px, 3vw, 36px); }
.bp-cover-auto::before { top: 50%; left: 50%; width: 70%; transform: translate(-50%, -62%); }
.bp-cover-ico { position: relative; width: clamp(84px, 9vw, 120px); height: clamp(84px, 9vw, 120px); filter: drop-shadow(0 10px 30px rgba(26,159,219,.35)); }
.bp-cover-ico svg { width: 100%; height: 100%; }
.bp-cover-chips { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 420px; }
.bp-cover-chips .bp-chip { position: static; white-space: normal; text-align: left; }
.bp-cover-chips:empty { display: none; }

/* Numbered steps (e.g. how to run an assessment) */
.bp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: step; }
.bp-steps li { counter-increment: step; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; padding: 16px 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.bp-steps li::before { content: counter(step); grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 800; color: #fff; background: var(--blue-ink); }
.bp-steps b { font-size: 16px; }
.bp-steps span { font-size: 15px; color: var(--muted); line-height: 1.5; }

/* Un-numbered sub-sections (e.g. the stages of an attack) */
.bp-subs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bp-sub { padding: 20px 22px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.bp-sub h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.bp-sub p { font-size: 15px; line-height: 1.6; color: var(--muted); }
.bp-sub .bp-checks li { padding: 10px 14px; }
.bp-sub-step { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-ink); }
.bp-challenges .bp-checks { margin-top: 10px; }
.bp-checks .solo { grid-row: span 2; align-self: center; color: var(--ink); font-size: 15.5px; }
@media (max-width: 620px) { .bp-subs { grid-template-columns: 1fr; } }

/* Secure365 guides (blog-secure365-*.html) */
.post-tags li.tag-s365 { background: var(--night); color: #8fd6f7; border-color: var(--night); }
.bp-logo { border-radius: 12px !important; object-fit: contain !important; background: transparent; }
.bp-chip.ok::before { background: #5fd49a; }
.bp-risk ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bp-risk li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.55; color: #3d4a55; }
.bp-risk li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: #e2614a; }
.bp-quote { margin: 8px 0 0; padding: 26px 28px; border-radius: 20px; background: var(--blue-wash); display: grid; gap: 12px; }
.bp-quote blockquote { margin: 0; font-family: var(--f-hand); font-weight: 700; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; color: var(--hand); }
.bp-quote figcaption { font-size: 13px; color: var(--muted); letter-spacing: .02em; }
.bp-quote figcaption b { color: var(--ink); margin-right: 4px; }
.bp-path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.bp-path li { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.bp-path-top { display: flex; align-items: center; justify-content: space-between; }
.bp-path-top i { font-style: normal; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 800; color: #fff; background: var(--blue-ink); }
.bp-path-top em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--blue-ink); background: var(--blue-wash); padding: 3px 10px; border-radius: 999px; }
.bp-path b { font-size: 16px; }
.bp-path span:not(.bp-path-top) { font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.bp-path li:nth-child(-n+2) { border-color: #bfe3cf; }
.bp-path-note { font-size: 15px !important; color: var(--muted) !important; }
.bp-path-note b { color: #17734a; }
.plan-link { color: inherit; text-decoration: underline; text-decoration-color: rgba(11,116,168,.35); text-underline-offset: 3px; }
.plan-link:hover { color: var(--blue-ink); text-decoration-color: currentColor; }
@media (max-width: 760px) { .bp-path { grid-template-columns: 1fr; } }

/* Guides from the UK "Explore further" pages (blog-guide-*.html) */
.post-tags li.tag-guide { background: var(--blue-ink); color: #fff; border-color: var(--blue-ink); }
.bp-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bp-compare > div { padding: 22px 24px; border-radius: 20px; display: grid; gap: 10px; align-content: start; }
.bp-compare p { font-size: 16px; line-height: 1.5; color: var(--ink); }
.bp-gain { background: #eefaf3; border: 1px solid #c9ead6; }
.bp-gain .bp-story-h { color: #17734a; }
.bp-gain ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bp-gain li { position: relative; padding-left: 24px; font-size: 16px; line-height: 1.55; color: #3d4a55; }
.bp-gain li::before { content: ""; position: absolute; left: 3px; top: .45em; width: 11px; height: 6px; border-left: 2px solid #17734a; border-bottom: 2px solid #17734a; transform: rotate(-45deg); }
.bp-faq { margin: 0; }
.bp-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: start; }
.bp-plan { padding: 22px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); display: grid; gap: 8px; }
.bp-plan.is-mid { border-color: var(--blue); box-shadow: 0 14px 30px rgba(26,159,219,.12); }
.bp-plan > b { font-size: 20px; letter-spacing: -.02em; }
.bp-plan-sum { font-size: 14px; color: var(--muted); line-height: 1.45; }
.bp-plan ul { list-style: none; margin: 6px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 7px; }
.bp-plan li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.4; }
.bp-plan li::before { content: ""; position: absolute; left: 2px; top: .38em; width: 10px; height: 5px; border-left: 2px solid var(--blue-ink); border-bottom: 2px solid var(--blue-ink); transform: rotate(-45deg); }
.bp-plan a { color: var(--blue-ink); text-decoration: none; font-weight: 600; }
.bp-plan a:hover { text-decoration: underline; }
.bp-tools-links > a { display: grid; gap: 6px; align-content: start; padding: 20px; border-radius: 18px; background: var(--night); color: var(--on-night); text-decoration: none; transition: transform .2s; }
.bp-tools-links > a:hover { transform: translateY(-2px); }
.bp-tools-links em { font-style: normal; font-size: 13px; font-weight: 600; color: #8fd6f7; margin-top: 4px; }
.bp-body > p a { color: var(--blue-ink); }
@media (max-width: 900px) { .bp-plans { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .bp-compare { grid-template-columns: 1fr; } }

/* Blog: content-type toggle (All / Articles / Guides / Secure365 services) above the service filters */
.blog-types { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); max-width: 100%; }
.blog-types-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 0 8px 0 12px; }
.blog-types button { font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; border: 0; background: transparent; color: var(--ink); padding: 8px 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; transition: background .15s, color .15s; }
.blog-types button span { font-size: 12px; color: var(--muted); }
.blog-types button:hover { background: var(--paper); }
.blog-types button[aria-pressed="true"] { background: var(--blue-ink); color: #fff; }
.blog-types button[aria-pressed="true"] span { color: rgba(255,255,255,.8); }
.blog-types button[data-type="secure365"][aria-pressed="true"] { background: var(--night); }
@media (max-width: 560px) {
  .blog-types { border-radius: 18px; }
  .blog-types-label { width: 100%; padding: 6px 10px 2px; }
}

/* Links under the Secure365 plans: plans guide and the Secure365 service guides */
.plans-links { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.plans-links a { display: grid; gap: 2px; padding: 12px 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--blue-ink); font-size: 15px; font-weight: 600; transition: border-color .2s, transform .2s, box-shadow .2s; }
.plans-links a:hover { border-color: #b9dcee; transform: translateY(-2px); box-shadow: 0 12px 24px rgba(17,24,32,.07); }
.plans-links small { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 560px) { .plans-links a { width: 100%; } }

/* Ignite hero: no breadcrumb, and both columns start at the top so the headline leads */
.ig-hero-top { padding-top: clamp(36px, 5vw, 64px); }
.ig-hero-top .ig-head { align-items: start; }
.ig-hero-top .ig-right { padding-top: 6px; }

/* Journey page label: the stage word over the programme name, tied together by a bar in the page's colour */
.stage-mark { --sm: var(--ig-gold); display: inline-grid; justify-items: start; gap: 6px; padding: 3px 0 3px 14px; border-left: 3px solid var(--sm); text-align: left; line-height: 1; }
.stage-mark-word { font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--sm); }
.stage-mark-name { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: clamp(24px, 2.2vw, 30px); font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.el .stage-mark { --sm: var(--blue-ink); }
.em .stage-mark { --sm: var(--em-ink); }
.stage-mark.sm-expand { --sm: #17734a; }
.stage-soon { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--t-embed); color: var(--em-ink); }
.ig-head .stage-mark + .h-xl { margin-top: 22px; }
.aa-hero-copy .stage-mark { margin-bottom: -4px; }
/* Stage word alone (Elevate, Embed: the headline already names the programme) */
.stage-mark-solo { padding-block: 6px; }
.stage-mark-solo .stage-mark-word { display: inline-flex; align-items: center; gap: 12px; font-size: 12.5px; }
/* Hero label in the journey navigator's words: handwritten step, name, then what it is */
.stage-mark { gap: 5px; padding-block: 2px 4px; }
.stage-mark-step { font-family: var(--f-hand); font-weight: 700; font-size: 25px; line-height: 1; color: var(--sm); margin-bottom: 1px; }
.stage-mark .stage-mark-word { color: var(--muted); font-size: 11.5px; letter-spacing: .16em; }
.stage-mark-solo { padding-block: 2px 4px; }
.stage-mark-solo .stage-mark-word { font-size: 12px; }

/* Journey slider: each slide leads like the hero labels (step, name, what it is), then its tagline */
.hs-panel { --sc: var(--blue-ink); }
.hs-panel.tint-ignite { --sc: var(--ig-gold); }
.hs-panel.tint-elevate { --sc: var(--blue-ink); }
.hs-panel.tint-expand { --sc: #17734a; }
.hs-panel.tint-embed { --sc: #4b3fa8; }
.hs-head { display: grid; justify-items: start; gap: 6px; padding: 2px 0 4px 16px; border-left: 3px solid var(--sc); }
.hs-head .hs-step.hs-scribble { color: var(--sc); font-size: 27px; }
.hs-copy h3.hs-name { font-size: clamp(40px, 4.4vw, 60px); font-weight: 800; letter-spacing: -.045em; line-height: .95; margin: 2px 0 0; }
.hs-what { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.hs-copy > p.hs-tagline { margin-top: 6px; font-size: clamp(20px, 1.9vw, 25px); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; color: var(--ink); max-width: 34ch; text-wrap: balance; }
.hs-panel .hs-points li::before { background: var(--sc); }
/* Keep slides within short laptop screens: headings scale with the viewport height too */
.hs-copy h3.hs-name { font-size: clamp(34px, min(4.4vw, 6.2vh), 60px); }
.hs-copy > p.hs-tagline { font-size: clamp(18px, min(1.9vw, 2.9vh), 25px); }
@media (min-width: 901px) and (max-height: 780px) {
  .hs-copy { gap: 10px; }
  .hs-head { gap: 4px; }
  .hs-head .hs-step.hs-scribble { font-size: 23px; }
  .hs-copy > p { font-size: 15px; line-height: 1.5; }
  .hs-points { gap: 5px; }
  .hs-points li { font-size: 14px; }
}

/* ---------- The Solid Way slider: bold, uniform card headings ----------
   Outlined step number, step name as the heading, then the tagline. Colour follows the step. */
.hs-panel.tint-review { --sc: #0b74a8; }
.hs-panel.tint-switch { --sc: #a86b00; }
.hs-panel.tint-secure { --sc: #4b3fa8; }
.hs-panel.tint-adopt { --sc: #17734a; }
.hs-panel.tint-evolve { --sc: #c2492f; }
.sw-head { display: flex; align-items: flex-end; gap: clamp(12px, 1.6vw, 20px); }
.sw-num { font-size: clamp(56px, min(6vw, 9vh), 92px); font-weight: 800; letter-spacing: -.06em; line-height: .78; color: transparent; -webkit-text-stroke: 2px var(--sc); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.sw-kicker { display: block; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sc); margin-bottom: 6px; }
.hs-copy h3.sw-name { margin: 0; font-size: clamp(34px, min(4.2vw, 6vh), 56px); font-weight: 800; letter-spacing: -.045em; line-height: .92; color: var(--ink); }
.hs-copy > p.sw-tagline { margin-top: 4px; font-size: clamp(18px, min(1.8vw, 2.8vh), 24px); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; color: var(--ink); max-width: 30ch; text-wrap: balance; }
.hs-panel.tint-review .hs-points li::before, .hs-panel.tint-switch .hs-points li::before, .hs-panel.tint-secure .hs-points li::before, .hs-panel.tint-adopt .hs-points li::before, .hs-panel.tint-evolve .hs-points li::before { background: var(--sc); }

/* Homepage V2: experience banner under the Why trust us cards */
.v2-stats { margin-top: 20px; padding: clamp(26px, 3.4vw, 40px) clamp(24px, 3.4vw, 44px); border-radius: 24px; background: var(--card); border: 1px solid var(--line); display: grid; gap: 22px; }

/* Microsoft Solutions Partner lockup, drawn in code so it stays sharp (replaces the dark-background GIF) */
.ms-lockup { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 6px; }
.ms-sq { display: grid; grid-template-columns: repeat(2, 20px); grid-auto-rows: 20px; gap: 2px; flex: 0 0 auto; }
.ms-sq i:nth-child(1) { background: #f25022; }
.ms-sq i:nth-child(2) { background: #7fba00; }
.ms-sq i:nth-child(3) { background: #00a4ef; }
.ms-sq i:nth-child(4) { background: #ffb900; }
.ms-words { display: grid; gap: 3px; font-family: "Segoe UI", "Segoe UI Variable Text", Inter, system-ui, sans-serif; color: #5e5e5e; line-height: 1; }
.ms-words b { font-size: 25px; font-weight: 600; letter-spacing: -.015em; }
.ms-words span { font-size: 15px; font-weight: 400; letter-spacing: .005em; }
/* "We're human, not robots." matches the handwritten accent in section headings (e.g. "digital future.") */
.motto-inline { font-size: calc(clamp(30px, 4.2vw, 48px) * 1.16); line-height: 1; color: var(--hand); margin-top: 14px; letter-spacing: 0; }
/* Case study names never run under the At a glance panel */
.cs-hero .h-xl { overflow-wrap: break-word; }

/* ---------- Lead magnets: Copilot Playbook and Quick Win checklist ---------- */
/* Covers drawn in CSS so they stay crisp. Size with --w. */
.doc-stack { position: relative; display: inline-block; --w: 280px; }
.doc-stack::before, .doc-stack::after { content: ""; position: absolute; inset: 0; border-radius: 6px 14px 14px 6px; background: #fff; box-shadow: 0 10px 30px rgba(17,24,32,.12); }
.doc-stack::before { transform: rotate(7deg) translate(9%, 2%); background: linear-gradient(#fff, #f3f6f8); }
.doc-stack::after { transform: rotate(3.5deg) translate(4%, 1%); background: repeating-linear-gradient(#fff 0 14px, #eef2f5 14px 15px); }
.doc-cover { position: relative; z-index: 1; width: var(--w); aspect-ratio: 3 / 4; font-size: calc(var(--w) / 16); border-radius: 6px 14px 14px 6px; padding: 10% 9% 9%; display: grid; grid-template-rows: auto 1fr auto; color: #fff; overflow: hidden; transform: rotate(-3deg);
  background: radial-gradient(70% 55% at 85% 12%, rgba(26,159,219,.55), transparent 70%), linear-gradient(160deg, #0b74a8 0%, #0b3b5c 52%, #111820 100%);
  box-shadow: inset 6px 0 0 rgba(0,0,0,.18), inset 7px 0 0 rgba(255,255,255,.12), 0 30px 60px rgba(11,40,62,.35); }
.doc-cover::after { content: ""; position: absolute; right: -18%; bottom: -12%; width: 70%; aspect-ratio: 1; border-radius: 50%; border: .12em solid rgba(143,214,247,.22); }
.doc-kicker { font-size: .5em; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: #8fd6f7; }
.doc-title { align-self: center; font-size: 1.72em; font-weight: 800; letter-spacing: -.035em; line-height: 1.02; }
.doc-title em { display: block; font-family: var(--f-hand); font-style: normal; font-weight: 700; font-size: 1.12em; letter-spacing: 0; color: #8fd6f7; margin-top: .12em; }
.doc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: .5em; }
.doc-foot b { font-size: 1.05em; font-weight: 800; letter-spacing: -.02em; }
.doc-foot span { font-size: .38em; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.65); text-align: right; line-height: 1.5; }

.doc-sheet { position: relative; z-index: 1; width: var(--w); aspect-ratio: 3 / 4; font-size: calc(var(--w) / 16); border-radius: 10px; padding: 9% 9% 8%; background: #fff; color: var(--ink); display: grid; grid-template-rows: auto auto 1fr auto; gap: .55em; transform: rotate(2.5deg); box-shadow: 0 30px 60px rgba(17,24,32,.18); }
.doc-sheet .doc-kicker { color: var(--blue-ink); font-size: .46em; }
.doc-sheet .doc-title { font-size: 1.28em; align-self: start; }
.doc-rows { list-style: none; margin: .3em 0 0; padding: 0; display: grid; gap: .55em; align-content: start; }
.doc-rows li { display: grid; grid-template-columns: .9em 1fr; gap: .55em; align-items: center; }
.doc-rows li::before { content: ""; width: .9em; height: .9em; border-radius: .2em; border: .1em solid var(--blue-ink); }
.doc-rows li:nth-child(-n+2)::before { background: var(--blue-ink); box-shadow: inset 0 0 0 .14em #fff; }
.doc-rows i { display: grid; gap: .25em; }
.doc-rows i::before, .doc-rows i::after { content: ""; height: .28em; border-radius: 1em; background: #dfe6eb; }
.doc-rows i::after { width: 62%; }
.doc-sheet .doc-foot b { color: var(--ink); }
.doc-sheet .doc-foot span { color: var(--muted); }

/* Resource landing pages */
.rp-hero { padding-block: clamp(28px, 4vw, 56px) clamp(56px, 7vw, 96px); background: radial-gradient(60% 80% at 88% 10%, var(--blue-wash), transparent 70%), var(--paper); overflow: hidden; }
.rp-hero-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.rp-hero-in > * { min-width: 0; }
.rp-copy { display: grid; gap: 20px; justify-items: start; }
.rp-copy .h-xl { margin: 0; }
.rp-copy .lead { margin: 0; }
.rp-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rp-meta li { font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.rp-art { display: grid; place-items: center; padding: 24px 0 24px 8%; }
.rp-art .doc-stack { --w: clamp(220px, 24vw, 320px); }
.rp-why { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.rp-why > * { min-width: 0; }
.rp-big-line { font-size: clamp(28px, 3.4vw, 44px); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; margin: 14px 0 0; }
.rp-why p { font-size: 17px; line-height: 1.7; color: var(--muted); }
.rp-why p + p { margin-top: 14px; }
.rp-parts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: part; }
.rp-parts li { counter-increment: part; padding: 22px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.rp-parts li::before { content: "Part " counter(part); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-ink); }
.rp-parts b { font-size: 18px; letter-spacing: -.01em; }
.rp-parts span { font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.rp-parts li.rp-plus { background: var(--night); color: var(--on-night); border-color: var(--night); }
.rp-parts li.rp-plus::before { content: "Plus"; color: #8fd6f7; }
.rp-parts li.rp-plus span { color: var(--on-night-muted); }
.rp-prompt { border-radius: 18px; background: var(--night); color: var(--on-night); padding: 22px 24px; display: grid; gap: 10px; }
.rp-prompt-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rp-prompt-top span { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #8fd6f7; }
.rp-prompt p { font-size: 15.5px; line-height: 1.6; color: #fff; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
.rp-copy-btn { font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; transition: background .15s; }
.rp-copy-btn:hover { background: rgba(255,255,255,.18); }
.rp-copy-btn.done { background: #17734a; border-color: #17734a; }
.rp-arenas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.rp-arenas > div { padding: 22px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); display: grid; gap: 6px; align-content: start; }
.rp-arenas small { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rp-arenas b { font-size: 20px; letter-spacing: -.02em; }
.rp-arenas span { font-size: 14.5px; color: var(--muted); line-height: 1.5; }

/* Get-your-copy form section */
.rp-get { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(28px, 4vw, 56px); border-radius: 32px; background: radial-gradient(80% 90% at 0% 0%, rgba(26,159,219,.35), transparent 60%), var(--night); color: var(--on-night); scroll-margin-top: calc(var(--head-h) + 20px); }
.rp-get > * { min-width: 0; }
.rp-get h2 { color: #fff; }
.rp-get .lead { color: var(--on-night-muted); margin-top: 12px; }
.rp-gets { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.rp-gets li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.5; color: #dbe7ef; }
.rp-gets li::before { content: ""; position: absolute; left: 4px; top: .4em; width: 11px; height: 6px; border-left: 2px solid #8fd6f7; border-bottom: 2px solid #8fd6f7; transform: rotate(-45deg); }
.lead-form { background: var(--card); color: var(--ink); border-radius: 22px; padding: clamp(22px, 3vw, 32px); display: grid; gap: 14px; box-shadow: 0 30px 60px rgba(0,0,0,.25); }
.lead-form h3 { font-size: 20px; letter-spacing: -.01em; }
.lead-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.lead-form input[type="text"], .lead-form input[type="email"] { font: inherit; font-size: 15px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); outline: 0; transition: border-color .15s, box-shadow .15s; }
.lead-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash); background: #fff; }
.lead-form .lf-consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; color: var(--muted); font-size: 13px; line-height: 1.45; }
.lead-form .lf-consent input { margin-top: 2px; accent-color: var(--blue-ink); }
.lead-form .btn { justify-content: center; }
.lead-form .lf-small { font-size: 12px; color: var(--muted); text-align: center; }
.lf-done { display: grid; gap: 12px; justify-items: start; }
.lf-done-tick { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #dcf3e6; color: #17734a; }
.lf-done-tick svg { width: 22px; height: 22px; }
.lf-done p { color: var(--muted); font-size: 15px; line-height: 1.55; }

/* Quick Win: the five moves */
.qw-moves { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.qw-move { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); padding: clamp(22px, 3vw, 30px); border-radius: 24px; background: var(--card); border: 1px solid var(--line); }
.qw-move-n { display: grid; align-content: start; gap: 4px; }
.qw-move-n small { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-ink); }
.qw-move-n b { font-size: 56px; font-weight: 800; letter-spacing: -.05em; line-height: .9; color: transparent; -webkit-text-stroke: 2px var(--blue-ink); }
.qw-move-n.is-start b { font-size: 22px; -webkit-text-stroke: 0; color: var(--ink); letter-spacing: -.02em; line-height: 1.1; }
.qw-move-body { display: grid; gap: 12px; }
.qw-move-body h3 { font-size: clamp(20px, 2vw, 24px); letter-spacing: -.02em; }
.qw-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.qw-steps li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 15.5px; line-height: 1.5; }
.qw-steps li::before { content: ""; width: 16px; height: 16px; margin-top: 3px; border-radius: 4px; border: 2px solid var(--blue-ink); }
@media (max-width: 1000px) { .rp-parts, .rp-arenas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  .rp-hero-in, .rp-why, .rp-get { grid-template-columns: 1fr; }
  .rp-art { padding: 8px 0 24px; }
}
@media (max-width: 560px) {
  .rp-parts, .rp-arenas { grid-template-columns: 1fr; }
  .qw-move { grid-template-columns: 1fr; gap: 10px; }
  .qw-move-n { grid-auto-flow: column; justify-content: start; align-items: end; gap: 12px; }
  .qw-move-n b { font-size: 40px; }
}

/* Lead capture: a calm slide-up panel (built by site.js) */
.lc { position: fixed; z-index: 60; left: 50%; bottom: 18px; width: min(940px, calc(100vw - 24px)); transform: translate(-50%, calc(100% + 40px)); opacity: 0; transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .4s; pointer-events: none; }
.lc.is-open { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.lc-in { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 18px 54px 18px 22px; border-radius: 24px; color: var(--on-night);
  background: radial-gradient(60% 120% at 0% 100%, rgba(26,159,219,.45), transparent 60%), #111820; box-shadow: 0 24px 60px rgba(8,16,24,.38); }
.lc-art { position: relative; height: 92px; }
.lc-art .doc-stack { --w: 104px; position: absolute; left: 18px; bottom: -4px; }
.lc-art .doc-stack::before, .lc-art .doc-stack::after { box-shadow: none; }
.lc-text { display: grid; gap: 4px; min-width: 0; }
.lc-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #8fd6f7; }
.lc-title { font-size: clamp(19px, 2vw, 24px); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; color: #fff; }
.lc-title em { font-family: var(--f-hand); font-style: normal; font-weight: 700; font-size: 1.15em; letter-spacing: 0; color: #8fd6f7; }
.lc-sub { font-size: 14px; color: var(--on-night-muted); line-height: 1.45; }
.lc-actions { display: flex; align-items: center; gap: 10px; }
.lc .btn-light { background: #fff; color: var(--ink); }
.lc .btn-light:hover { background: #e9f5fc; }
.lc-x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,.08); color: #cfe3ee; display: grid; place-items: center; font-size: 18px; line-height: 1; transition: background .15s; }
.lc-x:hover { background: rgba(255,255,255,.18); }
.lc-form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; align-items: center; margin-top: 8px; }
.lc-form input { font: inherit; font-size: 14px; padding: 11px 13px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #fff; outline: 0; min-width: 0; }
.lc-form input::placeholder { color: rgba(220,232,240,.55); }
.lc-form input:focus { border-color: #8fd6f7; background: rgba(255,255,255,.1); }
.lc-fine { grid-column: 1 / -1; font-size: 11.5px; color: rgba(220,232,240,.6); }
.lc[data-step="form"] .lc-in, .lc[data-step="done"] .lc-in { grid-template-columns: 150px minmax(0, 1fr); }
.lc[data-step="form"] .lc-actions, .lc[data-step="done"] .lc-actions { display: none; }
.lc:not([data-step="form"]) .lc-form { display: none; }
.lc .lc-done { display: none; }
.lc[data-step="done"] .lc-done { display: flex; }
.lc[data-step="done"] .lc-sub-pitch { display: none; }
.lc-done { align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
@media (max-width: 760px) {
  .lc { bottom: 10px; }
  .lc-in, .lc[data-step="form"] .lc-in, .lc[data-step="done"] .lc-in { grid-template-columns: 1fr; gap: 12px; padding: 18px 18px 16px; }
  .lc-art { display: none; }
  .lc-title { padding-right: 34px; }
  .lc-sub { font-size: 13px; }
  .lc-form { grid-template-columns: 1fr; }
  .lc-actions .btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .lc { transition: opacity .2s; } }

/* Resources page: playbook card with a mini cover peeking up from the bottom */
.res-cover.t-play { background: radial-gradient(70% 90% at 100% 0%, rgba(26,159,219,.5), transparent 65%), var(--night); color: #8fd6f7; }
.res-cover.t-play::after { background: rgba(143,214,247,.08); }
.t-play .res-type { background: rgba(255,255,255,.12); color: #e6f5fc; }
.res-doc { --w: 104px; position: absolute; right: 14%; bottom: -34%; z-index: 1; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.res-doc::before, .res-doc::after { box-shadow: none; }
.res > a:hover .res-doc { transform: translateY(-10px); }
/* Phones: keep the uninvited panel compact (headline + button); it grows only once someone taps in */
@media (max-width: 760px) { .lc[data-step="pitch"] .lc-sub-pitch { display: none; } .lc[data-step="pitch"] .lc-in { padding: 14px 16px; gap: 10px; } .lc-title { font-size: 18px; } }

/* Sitemap page (generated by tools/build-sitemap.js) */
.smap { columns: 3 300px; column-gap: 20px; }
.smap-group { break-inside: avoid; margin: 0 0 20px; padding: 24px 26px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.smap-group h2 { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-ink); margin: 0 0 12px; }
.smap-group h2 span { font-size: 11px; letter-spacing: 0; color: var(--muted); background: var(--paper); border-radius: 999px; padding: 2px 8px; }
.smap-group ul { list-style: none; margin: 0; padding: 0; display: grid; }
.smap-group li + li { border-top: 1px solid var(--line); }
.smap-group a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; text-decoration: none; color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.35; transition: color .15s; }
.smap-group a::after { content: "→"; color: var(--muted); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
.smap-group a:hover { color: var(--blue-ink); }
.smap-group a:hover::after { opacity: 1; transform: none; color: var(--blue-ink); }
/* Homepage: six stakes in a three-by-two grid */
.v2-stakes.v2-stakes-6 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .v2-stakes.v2-stakes-6 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .v2-stakes.v2-stakes-6 { grid-template-columns: 1fr; } }
/* Ignite hero: headline, then the invitation line */
.ig-hero-top .ig-head .h-xl { margin-top: 0; }
.ig-join { display: flex; align-items: center; gap: 14px; margin-top: clamp(18px, 2.2vw, 26px); font-size: clamp(20px, 2vw, 26px); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; color: var(--ink); }
.ig-join::before { content: ""; flex: 0 0 auto; width: 34px; height: 3px; border-radius: 3px; background: var(--ig-gold); }
.ig-hero-top .ig-head .stage-mark + .h-xl { margin-top: 22px; }
/* Journey hero typography (Ignite first): label, headline and invitation on an 8-point rhythm.
   Label: small handwritten step over a larger name. Headline: sans lines, then the script payoff on its own line. */
.ig-hero-top .stage-mark { gap: 2px; padding-block: 2px; }
.ig-hero-top .stage-mark-step { font-size: 22px; margin-bottom: 0; }
.ig-hero-top .stage-mark-name { font-size: clamp(28px, 2.4vw, 34px); letter-spacing: -.035em; line-height: 1.05; }
.ig-hero-top .ig-head .stage-mark + .h-xl { margin-top: 32px; }
.ig-title { line-height: 1; letter-spacing: -.04em; }
.ig-title em.hand { display: block; margin-top: .14em; font-size: 1.12em; line-height: 1; letter-spacing: -.005em; }
.ig-join { margin-top: 28px; gap: 12px; font-size: clamp(18px, 1.5vw, 21px); font-weight: 600; letter-spacing: -.01em; color: #2b3640; }
.ig-join::before { width: 28px; height: 2px; }
.ig-title em.hand { font-size: 1.04em; white-space: nowrap; }
@media (max-width: 400px) { .ig-title em.hand { white-space: normal; } }
/* About: founders photo in Our story. No text on the image; the crop keeps both faces in the upper third. */
.founders { margin: 0 0 clamp(36px, 5vw, 64px); }
.founders-photo { border-radius: 28px; overflow: hidden; background: #e9eef1; aspect-ratio: 2 / 1; box-shadow: 0 30px 60px rgba(17,24,32,.12); }
.founders-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 48% 32%; display: block; }
.founders figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-top: 16px; padding: 0 6px; }
.founders figcaption span { font-size: 15px; color: var(--muted); }
.founders figcaption b { color: var(--ink); font-weight: 700; margin-right: 8px; }
.founders figcaption em.hand { font-size: 28px; line-height: 1; }
@media (max-width: 760px) { .founders-photo { aspect-ratio: 4 / 3; border-radius: 22px; } .founders figcaption b { display: block; margin: 0 0 2px; } }

/* The Superhuman Brief: monthly email sign-up, built into the footer of every page (no pop-up) */
.foot-brief { margin-top: 20px; display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; padding: clamp(24px, 3.4vw, 40px) clamp(24px, 4vw, 48px); border-radius: 28px; background: radial-gradient(80% 140% at 100% 0%, rgba(26,159,219,.16), transparent 60%), var(--blue-wash); border: 1px solid #cfe7f4; scroll-margin-top: calc(var(--head-h) + 20px); }
.foot-brief > * { min-width: 0; }
.fb-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-ink); }
.fb-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(26,159,219,.18); }
.fb-title { margin: 10px 0 0; font-size: clamp(22px, 2.3vw, 30px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: var(--ink); text-wrap: balance; }
.fb-copy p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--muted); max-width: 52ch; }
.fb-form { display: grid; gap: 10px; }
.fb-row { display: flex; gap: 8px; padding: 6px; border-radius: 999px; background: #fff; border: 1px solid #cfe1ec; box-shadow: 0 10px 24px rgba(11,116,168,.08); transition: border-color .15s, box-shadow .15s; }
.fb-row:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(26,159,219,.15); }
.fb-row input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; padding: 0 14px; color: var(--ink); }
.fb-row .btn { flex: 0 0 auto; white-space: nowrap; }
.foot-brief.is-invalid .fb-row { border-color: #e2614a; box-shadow: 0 0 0 4px rgba(226,97,74,.14); }
.fb-fine { font-size: 12.5px; color: var(--muted); padding-left: 18px; }
.fb-done { display: flex; align-items: center; gap: 14px; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.fb-done[hidden] { display: none; }
.fb-tick { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: #dcf3e6; position: relative; }
.fb-tick::after { content: ""; position: absolute; left: 13px; top: 13px; width: 13px; height: 7px; border-left: 2.5px solid #17734a; border-bottom: 2.5px solid #17734a; transform: rotate(-45deg); }
@media (max-width: 900px) { .foot-brief { grid-template-columns: 1fr; } }
@media (max-width: 460px) {
  .fb-row { flex-direction: column; border-radius: 18px; padding: 8px; }
  .fb-row input { padding: 10px 8px; }
  .fb-row .btn { justify-content: center; }
  .fb-fine { padding-left: 4px; }
}

/* Migrated blog posts (original photo cover, intro paragraph, call-out box, inline figure) */
.bp-cover.bp-cover-photo { aspect-ratio: 3 / 2; background: #e9eef1; display: block; }
.bp-cover.bp-cover-photo::before { display: none; }
.bp-cover-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp-body > p.bp-intro { font-size: 19px; line-height: 1.65; color: var(--ink); }
.bp-body > p a, .bp-intro a { color: var(--blue-ink); text-decoration: underline; text-decoration-color: rgba(11,116,168,.35); text-underline-offset: 3px; }
.bp-body > p a:hover { text-decoration-color: currentColor; }
.bp-callout { margin: 8px 0; padding: clamp(22px, 3vw, 32px); border-radius: 22px; display: grid; gap: 10px; justify-items: start; color: var(--on-night);
  background: radial-gradient(80% 120% at 100% 0%, rgba(26,159,219,.4), transparent 60%), var(--night); }
.bp-body .bp-callout h2 { margin: 0; color: #fff; font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; letter-spacing: -.025em; line-height: 1.2; }
.bp-callout p { color: var(--on-night-muted); font-size: 16px; }
.bp-callout .btn { margin-top: 6px; background: #fff; color: var(--ink); }
.bp-callout .btn:hover { background: #e9f5fc; }
.bp-figure { margin: 6px 0 4px; padding: clamp(10px, 2vw, 18px); border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.bp-figure img { display: block; width: 100%; max-width: 720px; height: auto; margin: 0 auto; border-radius: 12px; }
.bp-body > h3 { margin: 22px 0 0; font-size: clamp(21px, 2vw, 25px); font-weight: 800; letter-spacing: -.02em; scroll-margin-top: calc(var(--head-h) + 20px); }

/* ==========================================================================
   CTA system (one style for every button on the site)
   Matches the Secure365 hero pair: near-black pill with an arrow (primary), outline pill (secondary).
   Colours come from the existing tokens: --night fill, white text, Solid blue focus ring.
   Buttons are written by tools/build-ctas.js from tools/cta.config.js.
   ========================================================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 999px; border: 1px solid var(--night);
  background: var(--night); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: -.005em; text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease; transform: none; }
.btn:hover { background: #26323e; border-color: #26323e; transform: none; }
.btn svg { flex: 0 0 auto; transition: transform .18s ease; }
.btn:hover .cta-arrow, .btn:hover > svg:first-child { transform: translateX(3px); }
.btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.btn .plus { display: none; }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 14px; }
/* Secondary: same pill and height, outline only, never filled */
.btn-ghost { background: transparent; color: var(--night); border: 1px solid var(--night); }
.btn-ghost:hover { background: rgba(17,24,32,.06); border-color: var(--night); color: var(--night); }
/* On dark or blue backgrounds: white outline and text, with a dark tint so text keeps 4.5:1 even on the lightest Solid blue (#1a9fdb) */
.cta-on-dark .btn-ghost, .night .btn-ghost, .v2-assess .btn-ghost, .aa-cta .btn-ghost, .rp-get .btn-ghost, .lc .btn-ghost, .bp-callout .btn-ghost {
  color: #fff; border-color: rgba(255,255,255,.85); background: rgba(17,24,32,.32); }
.cta-on-dark .btn-ghost:hover, .night .btn-ghost:hover, .v2-assess .btn-ghost:hover, .aa-cta .btn-ghost:hover, .rp-get .btn-ghost:hover, .lc .btn-ghost:hover { background: rgba(17,24,32,.46); border-color: #fff; color: #fff; }
/* Primary on dark: same fill, with a hairline edge so the pill stays visible */
.cta-on-dark .btn:not(.btn-ghost), .night .btn:not(.btn-ghost), .aa-cta .btn:not(.btn-ghost), .rp-get .btn:not(.btn-ghost), .lc .btn:not(.btn-ghost), .foot-cta .btn { box-shadow: inset 0 0 0 1px rgba(255,255,255,.32); }
.cta-on-dark .btn:focus-visible, .night .btn:focus-visible, .aa-cta .btn:focus-visible, .v2-assess .btn:focus-visible, .rp-get .btn:focus-visible, .lc .btn:focus-visible { outline-color: #8fd6f7; }
.lc .btn-light, .lc .btn-light:hover { background: var(--night); color: #fff; }

/* Groups */
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cta-center { justify-content: center; text-align: center; }
.cta-micro { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.cta-micro.cta-on-dark { color: var(--on-night-muted); }
.wrap > .cta-row, .wrap > .cta-micro + .cta-row, .text-link-on-night + .cta-row { margin-top: clamp(24px, 3vw, 36px); }
.how > .cta-row { grid-column: 1 / -1; margin-top: 8px; }
.closing-cta { display: grid; justify-items: start; gap: 0; }
.closing-cta .cta-micro { margin-top: 10px; }
.closing-aside { margin-top: 10px !important; font-size: 14px !important; }
.aa-cta-actions { align-self: center; display: grid; justify-items: start; }
.cta-endbox .eyebrow { display: block; margin-bottom: 10px; }
@media (max-width: 560px) {
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; white-space: normal; }
  .closing-cta, .aa-cta-actions { justify-items: stretch; }
}

/* Text links that replace buttons outside the agreed CTA spots */
.cta-textlink { font-weight: 700; color: var(--blue-ink); text-decoration: none; border-bottom: 1.5px solid rgba(11,116,168,.3); transition: border-color .15s; }
.cta-textlink:hover { border-bottom-color: currentColor; }
.cta-textlink:focus-visible, .hs-link:focus-visible, .wom-link:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.night .cta-textlink, .on-night .cta-textlink, .aa-cta .cta-textlink, .el-rc .cta-textlink.on-dark { color: #8fd6f7; border-bottom-color: rgba(143,214,247,.4); }
.cta-textlink-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-top: 32px; font-size: 15.5px; }
.cta-textlink-row.on-night span { color: var(--on-night-muted); }
.hs-copy .hs-link { margin-top: auto; align-self: flex-start; display: inline-flex; min-height: 44px; align-items: center; font-weight: 700; font-size: 16px; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--sc, var(--blue)); line-height: 1.2; min-height: 0; padding-bottom: 3px; }
.wom-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; font-size: 16px; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--blue); align-self: start; justify-self: start; }
.wom-link:hover { color: var(--blue-ink); }
.ig-date-card .cta-textlink, .ig-dates .cta-textlink { display: inline-flex; min-height: 44px; align-items: center; }

/* Mobile sticky booking bar (site.js shows it once the hero button has scrolled away) */
.cta-sticky { display: none; }
@media (max-width: 760px) {
  .cta-sticky { display: block; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 55; transform: translateY(calc(100% + 30px)); opacity: 0; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s; pointer-events: none; }
  .cta-sticky.is-on { transform: none; opacity: 1; pointer-events: auto; }
  .cta-sticky .btn { width: 100%; box-shadow: 0 14px 34px rgba(8,16,24,.32), inset 0 0 0 1px rgba(255,255,255,.18); }
}
@media (prefers-reduced-motion: reduce) { .btn, .btn svg, .cta-sticky { transition: none; } }
/* Header and footer phone numbers are plain tap-to-call links, not buttons */
.support a { display: block; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: inherit; text-decoration: none; }
.support a:hover { color: var(--blue-ink); }
.foot-offices a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); }
.foot-offices a:hover { color: var(--blue-ink); border-bottom-color: currentColor; }

/* ==========================================================================
   Booking page (schedule-free-it-consultation/)
   The calendar is on the first screen: copy left, Calendly right on desktop; copy then calendar on mobile.
   ========================================================================== */
.book-hero { padding-block: clamp(28px, 4vw, 56px) clamp(24px, 3vw, 40px); background: linear-gradient(180deg, var(--blue-wash) 0%, rgba(227,243,251,0) 100%); }
.book-hero .eyebrow.pill { background: #fff; }
.book-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.book-copy { padding-top: clamp(4px, 2vw, 28px); }
.book-title { margin: 16px 0 0; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -.025em; font-weight: 800; color: var(--ink); max-width: 15ch; }
.book-points { list-style: none; margin: clamp(20px, 3vw, 32px) 0 0; padding: 0; display: grid; gap: 18px; }
.book-points li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: start; font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.book-points b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 2px; }
.book-ico { width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--line); color: var(--blue-ink); display: grid; place-items: center; }
.book-ico svg { width: 20px; height: 20px; }
.book-faces { display: flex; width: 52px; }
.book-faces img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(8,16,24,.12); background: #dfe7ee; }
.book-faces img + img { margin-left: -12px; }
.book-cal { min-width: 0; }
.book-cal .calendly-inline-widget { min-width: 280px; height: 700px; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(8,16,24,.08); }
.book-fallback { margin: 14px 4px 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.book-fallback a, .book-ignite a:not(.cta-textlink) { color: var(--blue-ink); font-weight: 700; text-decoration: none; border-bottom: 1.5px solid rgba(11,116,168,.3); }
.book-fallback a:hover { border-bottom-color: currentColor; }
.book-fallback a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.book-noscript { padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.book-who { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 72px); align-items: start; }
.book-qualify { margin: 20px 0 0; padding-left: 20px; display: grid; gap: 10px; font-size: 16px; line-height: 1.55; color: var(--ink); }
.book-then { margin: 0 0 16px; font-size: 17px; line-height: 1.55; font-weight: 600; color: var(--ink); }
.book-bios { display: grid; grid-template-columns: minmax(0, 760px); gap: 20px; }
.book-bio { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: start; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.book-bio img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: #dfe7ee; }
.book-bio h3 { margin: 4px 0 8px; font-size: 20px; }
.book-bio p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.book-values .card h3 { font-size: 18px; margin: 0; }
.book-values .card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.book-ignite { margin: clamp(24px, 3vw, 36px) 0 0; font-size: 16px; line-height: 1.6; color: var(--muted); }
@media (max-width: 900px) {
  .book-in { grid-template-columns: 1fr; }
  .book-copy { padding-top: 0; }
  .book-title { max-width: none; }
  .book-points { gap: 12px; margin-top: 18px; }
  .book-points li { font-size: 14.5px; }
  .book-who, .book-bios { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .book-hero .eyebrow.pill { display: none; }
  .book-title { margin-top: 0; font-size: 28px; }
  .book-points li { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .book-points { gap: 10px; }
  .book-points li { line-height: 1.42; }
  .book-points li > span:last-child, .book-points li span > span { font-size: 14px; }
  .book-points b { font-size: 15px; margin-bottom: 0; }
  .book-ico { width: 38px; height: 38px; }
  .book-faces { width: 44px; }
  .book-faces img { width: 38px; height: 38px; }
  .book-cal .calendly-inline-widget { height: 1000px; border-radius: 16px; margin-inline: -4px; }
  .book-bio { grid-template-columns: 72px minmax(0, 1fr); padding: 20px; gap: 16px; }
  .book-bio img { width: 72px; height: 72px; }
}

/* CTA contrast on the dark photo hero (Secure365) and the blue gradient panels (Elevate, Expand, Embed) */
.hero-photo-full:not(.is-light) .cta-micro { color: var(--on-night-muted); }
.hero-photo-full:not(.is-light) .btn:not(.btn-ghost) { box-shadow: inset 0 0 0 1px rgba(255,255,255,.32); }
.hero-photo-full:not(.is-light) .btn:focus-visible { outline-color: #8fd6f7; }
.aa-cta .cta-micro.cta-on-dark, .v2-assess .cta-micro { justify-self: start; display: inline-block; padding: 5px 12px; border-radius: 999px; background: rgba(17,24,32,.32); color: #fff; }
.hs-copy .hs-link:hover { border-bottom-color: var(--ink); }
/* Text links keep their look but get a 44px-tall tap area */
.hs-copy .hs-link, .cta-textlink { position: relative; }
.hs-copy .hs-link::after, .cta-textlink::after { content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }

/* Closing band: the home-v2 assessment band reused as every page's closing call to action */
.cta-band { margin-top: clamp(8px, 2vw, 24px); }
.cta-band + .section { padding-top: clamp(56px, 7vw, 96px) !important; }
.cta-band .cta-row { margin-top: 6px; }
.v2-assess .cta-band-aside { margin: 0; font-size: 15px; color: #e6f5fc; }
.v2-assess .cta-band-aside .cta-textlink { color: #fff; border-bottom-color: rgba(255,255,255,.6); }
.v2-assess .cta-band-aside .cta-textlink:hover { border-bottom-color: #fff; }
.v2-assess .cta-textlink:focus-visible { outline-color: #fff; }

/* ==========================================================================
   Resource pages (resources/<slug>/), migrated from solidsystems.co.za/resources
   1. Hero: H1 + intro + download button on the left, a large cover on the right (mobile: H1, cover, intro).
   2. What's inside: the "It will help you" points as a numbered list.
   3. The ask: a full-width panel with the form heading on top and the fields in one row.
   ========================================================================== */
.rs-hero { padding-block: clamp(16px, 2.4vw, 32px) clamp(48px, 6vw, 88px); background: radial-gradient(60% 80% at 88% 0%, var(--blue-wash), transparent 70%), var(--paper); overflow: hidden; }
.rs-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); grid-template-areas: "head cover" "intro cover"; column-gap: clamp(32px, 5vw, 80px); row-gap: 20px; align-items: end; }
.rs-head { grid-area: head; display: grid; gap: 14px; justify-items: start; align-self: end; }
.rs-intro { grid-area: intro; display: grid; gap: 22px; justify-items: start; align-self: start; }
.rs-crumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; font-weight: 600; color: var(--muted); }
.rs-crumb a { color: var(--muted); text-decoration: none; }
.rs-crumb a:hover { color: var(--blue-ink); }
.rs-title { margin: 0; font-size: clamp(32px, 3.9vw, 54px); line-height: 1.04; max-width: 15ch; }
.rs-lead { margin: 0; font-size: 17px; line-height: 1.6; color: #3d4954; max-width: 54ch; }
.rs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.rs-meta { font-size: 13.5px; color: var(--muted); }
.rs-cover { grid-area: cover; align-self: center; margin: 0; border-radius: 26px; overflow: hidden; background: #e7eef3; box-shadow: 0 40px 80px -20px rgba(8,16,24,.28), 0 0 0 1px rgba(8,16,24,.04); transform: rotate(1.2deg); }
.rs-cover img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

.rs-inside-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.rs-inside-lead { margin: 16px 0 0; font-size: clamp(21px, 2.1vw, 27px); line-height: 1.45; font-weight: 600; letter-spacing: -.012em; color: var(--ink); max-width: 30ch; }
.rs-gets { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.rs-gets li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--ink); }
.rs-num { font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--blue-ink); }

.rs-get-sec { padding-top: 0; }
.rs-get { border-radius: 30px; padding: clamp(32px, 6vw, 72px) clamp(20px, 5vw, 64px); text-align: center; border: 1px solid #cfe7f4;
  background: radial-gradient(70% 120% at 50% 0%, #fff 0%, rgba(255,255,255,0) 70%), var(--blue-wash); }
.rs-get-form { max-width: 860px; margin: 0 auto; display: grid; gap: 18px; justify-items: center; }
.rs-get-form h2 { margin: 0; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.25; letter-spacing: -.02em; max-width: 34ch; text-wrap: balance; }
.rs-get .eyebrow.pill { background: #fff; }
.rs-fields { width: 100%; display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; margin-top: 10px; text-align: left; }
.rs-fields label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.rs-fields input { font: inherit; font-size: 16px; min-height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid #c9dbe6; background: #fff; color: var(--ink); outline: 0; transition: border-color .15s, box-shadow .15s; }
.rs-fields input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26,159,219,.25); }
.rs-fields .btn { min-height: 52px; padding-inline: 26px; }
.rs-get-form .lf-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: #3d4954; text-align: left; }
.rs-get-form .lf-consent input { margin-top: 3px; accent-color: var(--blue-ink); }
.rs-get-form .lf-small { margin: 0; font-size: 12.5px; color: var(--muted); }
.rs-get .lf-done { max-width: 560px; margin: 0 auto; text-align: left; box-shadow: none; }
.rs-form.lf-done h2 { font-size: 22px; }
.rs-form.lf-done p { margin: 0; }

.rs-rels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.rs-rel { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; text-decoration: none; color: var(--ink); transition: border-color .2s, transform .2s; }
.rs-rel:hover { border-color: #b9dcee; transform: translateY(-2px); }
.rs-rel:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.rs-rel img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.rs-rel-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.rs-rel-body b { font-size: 17px; line-height: 1.3; }
.rs-rel-body > span:not(.more) { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.rs-rel-body .more { margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 700; color: var(--blue-ink); }
@media (max-width: 900px) {
  .rs-in { grid-template-columns: 1fr; grid-template-areas: "head" "cover" "intro"; }
  .rs-cover { transform: none; border-radius: 20px; }
  .rs-title { max-width: none; }
  .rs-inside-in, .rs-rels { grid-template-columns: 1fr; }
  .rs-fields { grid-template-columns: 1fr; }
  .rs-fields .btn { width: 100%; }
}
@media (max-width: 560px) {
  .rs-actions .btn { width: 100%; }
  .rs-lead { font-size: 16.5px; }
  .rs-gets li { font-size: 16.5px; grid-template-columns: 40px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .rs-rel { transition: none; } }

/* Hub: the live H1 ("Resources") shown as the pill above the display headline */
h1.res-h1 { display: inline-block; margin: 0; font-size: 12px; line-height: 1.4; }
.hero-c p.h-xl { margin: 22px auto 20px; max-width: 16ch; line-height: 1.12; text-wrap: balance; color: var(--ink); }


/* 404 page */
.nf-search { display: flex; gap: 10px; max-width: 560px; margin: 8px auto 0; }
.nf-search input { flex: 1; min-width: 0; font: inherit; font-size: 16px; min-height: 52px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.nf-search input:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26,159,219,.25); }
.nf-search .btn { min-height: 52px; }
.nf-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.nf-links a { display: grid; gap: 6px; height: 100%; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); text-decoration: none; transition: border-color .2s, transform .2s; }
.nf-links a:hover { border-color: #b9dcee; transform: translateY(-2px); }
.nf-links a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.nf-links b { font-size: 16px; }
.nf-links span { font-size: 14px; line-height: 1.5; color: var(--muted); }
@media (max-width: 900px) { .nf-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .nf-links { grid-template-columns: 1fr; } .nf-search { flex-direction: column; } }

/* ==========================================================================
   Industry picker (tools/build-industries.js + assets/industry-picker.js)
   Chips reuse the resource filter style. On the Secure365 plans the recommended plan gets a ribbon and a blue edge;
   the others step back (paper background, no shadow) but keep full-contrast text.
   ========================================================================== */
.ind-pick { display: grid; gap: 14px; margin-bottom: 28px; }
.ind-pick-q { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.ind-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ind-chip { min-height: 44px; }
.ind-chip:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.ind-pick-out { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); min-height: 1.55em; }
.ind-pick-out b { color: var(--ink); }
.ind-pick-out a { font-weight: 700; color: var(--blue-ink); text-decoration: none; border-bottom: 1.5px solid rgba(11,116,168,.3); }
.ind-all { font: inherit; font-weight: 700; color: var(--blue-ink); background: none; border: 0; border-bottom: 1.5px solid rgba(11,116,168,.3); padding: 0; margin-left: 4px; cursor: pointer; min-height: 0; }
.ind-all:focus-visible, .ind-pick-out a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

/* Plans: recommended vs the rest */
.plan { position: relative; transition: background-color .25s, box-shadow .25s, border-color .25s, transform .25s; }
.plan-rec { position: absolute; top: -13px; right: 22px; padding: 6px 12px; border-radius: 999px; background: var(--night); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; box-shadow: 0 8px 20px rgba(8,16,24,.25); }
.plan-rec[hidden] { display: none; }
.plans.has-rec .plan.featured:not(.is-rec) { border: 1px solid var(--line); box-shadow: none; }
.plan.is-rec { border: 2px solid var(--blue); box-shadow: 0 28px 60px rgba(11,116,168,.2); transform: translateY(-6px); }
.plan.is-dim { background: var(--paper); box-shadow: none; }
.plan.is-dim .plan-tag { background: #e6ebef; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .plan { transition: none; } .plan.is-rec { transform: none; } }

/* /industries/ */
.ind-hero .lead { max-width: 60ch; }
.ind-sec { scroll-margin-top: 96px; }
.ind-pick-h { margin: 0 0 4px; }
.ind-panels { display: grid; gap: 22px; }
.ind-panel { border: 1px solid var(--line); border-radius: 26px; background: var(--card); padding: clamp(22px, 3.5vw, 40px); display: grid; gap: 20px; scroll-margin-top: 110px; }
.ind-panel:focus { outline: none; }
.ind-panel[hidden] { display: none; }
.ind-panel-head { display: flex; align-items: center; gap: 16px; }
.ind-ico { width: 54px; height: 54px; flex: 0 0 auto; border-radius: 16px; background: var(--blue-wash); color: var(--blue-ink); display: grid; place-items: center; }
.ind-kicker { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ind-panel h3 { margin: 2px 0 0; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.02em; }
.ind-stakes { margin: 0; font-size: 17.5px; line-height: 1.65; color: #3d4954; max-width: 72ch; }
.ind-rec { display: grid; grid-template-columns: minmax(200px, .42fr) 1fr; border-radius: 20px; overflow: hidden; border: 1px solid #cfe7f4; }
.ind-rec-plan { display: grid; align-content: center; gap: 6px; padding: 24px; background: var(--night); color: #fff; }
.ind-rec-label { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8fd6f7; }
.ind-rec-name { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.ind-rec-tag { font-size: 14px; color: var(--on-night-muted); }
.ind-rec-why { display: grid; gap: 10px; align-content: center; padding: 22px 26px; background: var(--blue-wash); }
.ind-rec-why p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink); }
.ind-rec-why .ind-rec-adds { font-size: 14.5px; color: #3d4954; }
.ind-rec-why .cta-textlink { justify-self: start; }
.ind-also-h { margin: 4px 0 0; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ind-also { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ind-also a { display: grid; gap: 6px; height: 100%; padding: 18px; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; color: var(--ink); transition: border-color .2s, background-color .2s; }
.ind-also a:hover { border-color: #b9dcee; background: #fbfdfe; }
.ind-also a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.ind-also b { font-size: 15.5px; line-height: 1.35; }
.ind-also span { font-size: 14px; line-height: 1.55; color: var(--muted); }
.ind-glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ind-glance-col { display: grid; align-content: start; gap: 10px; padding: 26px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); }
.ind-glance-col.is-mid { border: 2px solid var(--blue); }
.ind-glance-col h3 { margin: 0; font-size: 26px; letter-spacing: -.02em; }
.ind-glance-col > p { margin: 0; font-size: 14px; font-weight: 600; color: var(--blue-ink); }
.ind-glance-col ul { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; }
.ind-glance-col li a { display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15.5px; }
.ind-glance-col li a:hover { color: var(--blue-ink); }
.ind-glance-col li a:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.ind-glance-col .cta-textlink { justify-self: start; margin-top: 6px; }
@media (max-width: 900px) {
  .ind-rec { grid-template-columns: 1fr; }
  .ind-also, .ind-glance { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ind-panel-head { align-items: flex-start; }
  .ind-ico { width: 46px; height: 46px; border-radius: 14px; }
  .ind-stakes { font-size: 16px; }
}

/* AI Education: three series (AI & Copilot, Productivity Hacks, Cyber Habits) */
.edu-nav-sec { padding-top: 0; padding-bottom: 0; }
.edu-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.edu-nav a { display: grid; gap: 4px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); color: var(--ink); text-decoration: none; transition: border-color .2s, transform .2s; }
.edu-nav a:hover { border-color: #b9dcee; transform: translateY(-2px); }
.edu-nav a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.edu-nav b { font-size: 17px; }
.edu-nav b::after { content: " →"; color: var(--blue-ink); }
.edu-nav span { font-size: 14px; line-height: 1.5; color: var(--muted); }
.edu-series { scroll-margin-top: 90px; }
.edu-series + .edu-series { padding-top: 0; }
.edu-series .sec-head { margin-bottom: 26px; }
.edu-series .res-filters { margin-bottom: 24px; }
.vid-grid-even { grid-template-columns: repeat(4, 1fr); }
.vid-grid-even .vid-body p { font-size: 14px; }
.edu-more { margin: 26px 0 0; font-size: 15.5px; color: var(--muted); }
@media (max-width: 1080px) { .vid-grid-even { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .edu-nav { grid-template-columns: 1fr; } .vid-grid-even { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .vid-grid-even { grid-template-columns: 1fr; } }

/* Column-aligned photo hero (.hpf-col): Modern Workplace, Copilot & AI, The Solid Way (light, .is-light) and Managed IT (dark, .is-dark)
   Desktop (1101px+): full-bleed photo, but the content follows the page column. The copy starts at the column's left edge
   (under the logo) and the person stands a fixed gap after it, so they stay near the centre on every screen width.
   The photo is placed by measurement rather than cropped: each page sets --hc-person, the person's left edge in its wide
   photo divided by that photo's height, so left = (where they should stand) - --hc-person x hero height. The wide photos
   have soft background added on every side, so they still fill the screen; --hc-bg matches that background for very wide
   screens. Tablet and phone (up to 1100px): the narrower photo sits above the copy, cropped at --hc-mpos. */
.hero-photo-full.hpf-col {
  --hpf-cream: 238, 232, 227;
  --mw-h: clamp(700px, 78vh, 920px);         /* hero height */
  --mw-col: 500px;                           /* copy column */
  --mw-gap: 64px;                            /* copy to the person */
  --mw-left: calc(50% - min(590px, 50%) + var(--gutter));   /* the page column's left edge (.wrap) */
  height: var(--mw-h); min-height: 0; background: var(--hc-bg, rgb(220, 214, 208)); }
.hero-photo-full.hpf-col .hpf-img {
  inset: 0 auto auto 0; left: calc(var(--mw-left) + var(--mw-col) + var(--mw-gap) - var(--mw-h) * var(--hc-person));
  width: auto; height: var(--mw-h); max-width: none; object-fit: fill; }
.hero-photo-full.is-light.hpf-col::before {
  background:
    linear-gradient(90deg, rgba(var(--hpf-cream), .94) 0, rgba(var(--hpf-cream), .86) calc(var(--mw-left) + var(--mw-col) * .55), rgba(var(--hpf-cream), .4) calc(var(--mw-left) + var(--mw-col) + 8px), rgba(var(--hpf-cream), 0) calc(var(--mw-left) + var(--mw-col) + var(--mw-gap))),
    linear-gradient(0deg, rgba(var(--hpf-cream), .5) 0%, rgba(var(--hpf-cream), 0) 22%); }
main > .hpf-col:first-child .hpf-in { padding-top: calc(var(--head-h) + 24px); padding-bottom: 40px; }
.hpf-col .hpf-copy { max-width: var(--mw-col); gap: 0; grid-template-columns: minmax(0, 1fr); }   /* lines wrap inside the column instead of widening it */
.hpf-col .hpf-copy .eyebrow.pill { margin-bottom: 22px; }
.hero-photo-full.hpf-col .hpf-copy .h-xl { margin: 0; font-size: clamp(42px, 4vw, 64px); line-height: 1.02; letter-spacing: -.035em; }
.hero-photo-full.hpf-col .hpf-copy .lead { margin: 24px 0 0; max-width: 42ch; font-size: clamp(17px, 1.2vw, 19px); line-height: 1.6; }
.hero-photo-full.is-light.hpf-col .hpf-copy .lead { color: #3f4a54; }
.hpf-col .cta-row { margin-top: 32px; }
.hpf-col .cta-micro { margin-top: 12px; }
.is-light.hpf-col .cta-micro { color: #56626d; }
.hpf-col .hpf-tags, .hpf-col .hpf-steps { margin-top: 24px; }
.hero-photo-full.is-light.hpf-col .hpf-tags li { color: #4a5560; background: rgba(255,255,255,.6); border-color: rgba(21,32,43,.12); }

/* Modern Workplace: two colleagues; "Modern Workplace" set as the hand accent on its own line */
.hero-photo-full.mw-hero { --hc-person: 1.638; --hc-bg: rgb(203, 186, 175); --hc-mpos: 100% 50%; }  /* man at x 2000 of 3872 x 1221 */
.mw-hero .hpf-copy .h-xl .hand { display: block; margin-top: .06em; font-size: 1.12em; line-height: .95; letter-spacing: 0; color: var(--blue-ink); }
/* Copilot & AI: Alice at her desk in the full office scene (two windows, plant, Table Mountain). The photo fills the hero
   edge to edge (no added background at the sides); the copy sits in the page column over the pale wall and the soft fade.
   Vertical position 42% keeps her face clear of the header and the added headroom tucked under it at every width. */
.hero-photo-full.cp-hero { --hc-mpos: 96% 50%; }
.hero-photo-full.is-light.hpf-col.cp-hero { --mw-h: clamp(760px, 84vh, 960px); }   /* longer copy: headline, intro, CTAs and the four-step path */
@media (min-width: 1101px) {
  .hero-photo-full.is-light.hpf-col.cp-hero .hpf-img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 42%; }
}
/* Very wide screens: the photo scales to the screen width, so make the hero taller and crop lower to keep her hands and desk */
@media (min-width: 2000px) {
  .hero-photo-full.is-light.hpf-col.cp-hero { --mw-h: min(41vw, 1100px); }
  .hero-photo-full.is-light.hpf-col.cp-hero .hpf-img { object-position: 100% 50%; }
}

/* The Solid Way: four of the team around a laptop.
   Desktop: the woman on the left always stands --sw-gap after the copy, and the photo scales so the real office reaches the
   right edge of the screen (on wider screens the team simply gets larger). If that would leave the photo shorter than the
   hero, it scales up to cover it and only the far right edge is trimmed (second laptop, the man's back; never a face).
   Vertically, their heads sit about 110px below the header, within the limits of covering the hero.
   Coordinates are in solid-way-hero-wide.webp (3472 x 1260): woman's left edge x 2315, photo's right edge x 3472
   (1157 after her), heads y 480. Clean wall tone is added above the team and to the left; it stays under the header and
   behind the copy's fade. */
.hero-photo-full.sw-hero { --hc-mpos: 75% 60%; --hc-bg: rgb(204, 205, 207); }
.hero-photo-full.is-light.hpf-col.sw-hero { --mw-h: clamp(810px, 88vh, 980px); }   /* headline, intro, CTAs and the five-step path */
@media (min-width: 1101px) {
  .hero-photo-full.is-light.hpf-col.sw-hero {
    --sw-gap: 40px;
    --sw-x: calc(50vw - min(590px, 50vw) + var(--gutter) + var(--mw-col) + var(--sw-gap));   /* where the woman stands */
    --sw-s: max((100vw - var(--sw-x)) / 1157, var(--mw-h) / 1260); }                         /* screen px per photo px */
  .hero-photo-full.is-light.hpf-col.sw-hero .hpf-img {
    height: calc(var(--sw-s) * 1260); left: calc(var(--sw-x) - var(--sw-s) * 2315);
    top: clamp(var(--mw-h) - var(--sw-s) * 1260, var(--head-h) + 110px - var(--sw-s) * 480, 0px); }
}
.hero-photo-full.is-light.hpf-col.sw-hero .hpf-copy .h-xl { font-size: clamp(40px, 3.4vw, 54px); }   /* the longest headline of the three photo heroes */
.sw-hero .hpf-copy .h-xl .hand { display: block; margin-top: .08em; font-size: 1.04em; line-height: 1; letter-spacing: 0; color: var(--blue-ink); }
/* Five steps in the 500px column: the numbers carry the order, so the chevrons go and each step tightens a little */
.sw-hero .hpf-steps { gap: 6px; }
.sw-hero .hpf-steps .sep { display: none; }
.sw-hero .hpf-steps a { gap: 7px; padding: 6px 9px 6px 6px; font-size: 13.5px; }
.sw-hero .hpf-steps .n { width: 26px; height: 26px; }

/* Dark version (.is-dark): white copy on a dark wall in the photo itself. --hc-dark is that wall's colour, used for the
   section background and a light fade behind the copy so the added wall and the photo read as one surface. */
.hero-photo-full.is-dark.hpf-col { background: rgb(var(--hc-dark)); color: var(--on-night); }
.hero-photo-full.is-dark.hpf-col::before {
  background:
    linear-gradient(90deg, rgba(var(--hc-dark), .55) 0, rgba(var(--hc-dark), .35) calc(var(--mw-left) + var(--mw-col) * .6), rgba(var(--hc-dark), 0) calc(var(--mw-left) + var(--mw-col) + var(--mw-gap))),
    linear-gradient(0deg, rgba(var(--hc-dark), .45) 0%, rgba(var(--hc-dark), 0) 20%); }
.hero-photo-full.is-dark.hpf-col .hpf-copy .h-xl { color: #fff; }
.hero-photo-full.is-dark.hpf-col .hpf-copy .lead { color: #c4d0da; }
.hero-photo-full.is-dark.hpf-col .cta-micro { color: #aebcc8; }
.hpf-col.is-dark .hero-link { margin: 22px 0 0; }
.hpf-col.is-dark .hero-link a { color: #8fd6f7; font-weight: 700; text-decoration: none; border-bottom: 1.5px solid rgba(143,214,247,.45); }
.hpf-col.is-dark .hero-link a:hover { border-bottom-color: #8fd6f7; }

/* Managed IT: a smiling colleague in front of the service dashboard, navy wall to the left.
   Desktop: his shoulder stands --mi-gap after the copy and the photo scales so the real office reaches the right edge,
   up to 1.2x; beyond that he drifts right instead of growing. Coordinates are in managed-it-hero-wide.webp (2972 x 941):
   left shoulder x 2100, photo's right edge 872 after it, head y 205. Clean navy wall is added on the left only. */
.hero-photo-full.mi-hero { --hc-dark: 36, 56, 76; --hc-mpos: 72% 40%; }
.hero-photo-full.is-dark.hpf-col.mi-hero { --mw-h: clamp(800px, 88vh, 980px); --mw-col: 540px; }
.hero-photo-full.is-dark.hpf-col.mi-hero .hpf-copy .h-xl { font-size: clamp(40px, 3.6vw, 58px); }   /* three lines: "Align technology / with your / business goals." */
@media (min-width: 1101px) {
  .hero-photo-full.is-dark.hpf-col.mi-hero {
    --mi-gap: 40px;
    --mi-x: calc(50vw - min(590px, 50vw) + var(--gutter) + var(--mw-col) + var(--mi-gap));   /* where his shoulder stands */
    --mi-s: clamp(var(--mw-h) / 941, (100vw - var(--mi-x)) / 872, 1.2px); }                 /* screen px per photo px */
  .hero-photo-full.is-dark.hpf-col.mi-hero .hpf-img {
    height: calc(var(--mi-s) * 941);
    left: calc(max(var(--mi-x), 100vw - var(--mi-s) * 872) - var(--mi-s) * 2100);
    top: clamp(var(--mw-h) - var(--mi-s) * 941, var(--head-h) + 90px - var(--mi-s) * 205, 0px); }
}

@media (max-width: 1100px) {
  .hero-photo-full.hpf-col { display: block; height: auto; }
  .hero-photo-full.is-light.hpf-col { background: var(--paper); }
  .hero-photo-full.is-dark.hpf-col::before { inset: 0 0 auto 0; height: clamp(380px, 56vw, 560px); background: linear-gradient(0deg, rgb(var(--hc-dark)) 0%, rgba(var(--hc-dark), 0) 30%); }
  .hero-photo-full.hpf-col .hpf-img { position: relative; inset: auto; left: auto; width: 100%; height: clamp(380px, 56vw, 560px); object-fit: cover; object-position: var(--hc-mpos); }
  .hero-photo-full.is-light.hpf-col::before { inset: 0 0 auto 0; height: clamp(380px, 56vw, 560px); background: linear-gradient(0deg, var(--paper) 0%, rgba(243,245,246,0) 24%); }
  main > .hpf-col:first-child .hpf-in { padding-top: 8px; padding-bottom: 56px; margin-top: -24px; position: relative; }
  .hpf-col .hpf-copy { max-width: 640px; }
  .hpf-col .hpf-copy .eyebrow.pill { margin-bottom: 16px; }
  .hero-photo-full.hpf-col .hpf-copy .h-xl { font-size: clamp(34px, 6vw, 52px); }
}

/* ==========================================================================
   Step cards for The Solid Way (#solid-way) and the Copilot journey (#journey): type-led and using the whole card.
   A light-weight step number beside a heavy title is the focal point; tagline, paragraph and points step down in a clear
   scale; the block is centred vertically (no dead space above the link); the product mock on the left is enlarged.
   Sizes use min(vw, vh) because the panel height follows the viewport in this sticky slider.
   ========================================================================== */
:is(#solid-way, #journey) .hs-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: clamp(24px, 3.4vw, 56px); padding: clamp(14px, 1.4vw, 20px); }
:is(#solid-way, #journey) .hs-media { border-radius: 22px; background: linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.38)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); padding: clamp(18px, 3vw, 44px); }
:is(#solid-way, #journey) .hs-copy { justify-content: center; gap: 0; padding: clamp(8px, 2vh, 24px) clamp(12px, 3vw, 48px) clamp(8px, 2vh, 24px) 0; }

/* Number + title on one baseline */
:is(#solid-way, #journey) .sw-head { align-items: baseline; gap: clamp(10px, 1.4vw, 22px); }
:is(#solid-way, #journey) .sw-num { font-weight: 200; color: var(--sc); -webkit-text-stroke: 0; font-size: clamp(76px, min(9.2vw, 14vh), 150px); letter-spacing: -.06em; line-height: .8; }
:is(#solid-way, #journey) .sw-kicker { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* read out, not shown: the tabs show the step */
:is(#solid-way, #journey) .hs-copy h3.sw-name { font-size: clamp(52px, min(6.6vw, 10vh), 104px); letter-spacing: -.05em; line-height: .86; }

/* Tagline, paragraph, points, link */
:is(#solid-way, #journey) .hs-copy > p.sw-tagline { margin: clamp(18px, 3.2vh, 34px) 0 0; font-size: clamp(24px, min(2.7vw, 4.2vh), 42px); font-weight: 700; letter-spacing: -.028em; line-height: 1.12; max-width: 19ch; }
:is(#solid-way, #journey) .hs-copy > p:not(.sw-tagline) { margin: clamp(14px, 2.6vh, 26px) 0 0; font-size: clamp(16px, min(1.3vw, 2.25vh), 19.5px); line-height: 1.6; color: #4a5560; max-width: 44ch; }
:is(#solid-way, #journey) .hs-points { margin: clamp(16px, 3vh, 30px) 0 0; gap: clamp(10px, 1.8vh, 16px); }
:is(#solid-way, #journey) .hs-points li { align-items: center; gap: 14px; font-size: clamp(15px, min(1.2vw, 2.1vh), 18.5px); font-weight: 500; color: var(--ink); line-height: 1.35; }
:is(#solid-way, #journey) .hs-points li::before { content: '✓'; width: clamp(24px, 3.4vh, 30px); height: clamp(24px, 3.4vh, 30px); border-radius: 50%; display: grid; place-items: center; transform: none;
  background: color-mix(in srgb, var(--sc) 15%, #fff); color: var(--sc); font-size: clamp(12px, 1.7vh, 14px); font-weight: 800; }
:is(#solid-way, #journey) .hs-copy .hs-link { margin-top: clamp(22px, 4vh, 40px); font-size: clamp(16px, min(1.25vw, 2.2vh), 19px); padding-bottom: 5px; border-bottom-width: 2px; }

/* The product mock: larger, readable rows */
:is(#solid-way, #journey) .scene { width: min(560px, 100%); padding: clamp(20px, 3vh, 30px) clamp(20px, 2.2vw, 30px); gap: clamp(14px, 2.2vh, 20px); border-radius: 20px; font-size: clamp(14px, min(1.15vw, 2vh), 16.5px); box-shadow: 0 30px 70px rgba(17,24,32,.13), 0 0 0 1px rgba(17,24,32,.04); }
:is(#solid-way, #journey) .habit-head b { font-size: clamp(16px, min(1.4vw, 2.5vh), 20px); letter-spacing: -.01em; }
:is(#solid-way, #journey) .habit-head em { font-size: clamp(12px, 1.9vh, 14px); }
:is(#solid-way, #journey) .checks { gap: clamp(8px, 1.4vh, 12px); }
:is(#solid-way, #journey) .checks li { padding: clamp(11px, 1.9vh, 16px) clamp(14px, 1.4vw, 18px); border-radius: 14px; }
:is(#solid-way, #journey) .checks .st { font-size: clamp(12px, 1.8vh, 14px); padding: 5px 13px; }
:is(#solid-way, #journey) .habit-next { font-size: clamp(12.5px, 1.9vh, 14.5px); padding-top: clamp(12px, 2vh, 16px); }
:is(#solid-way, #journey) .habit-grid { grid-template-columns: 1fr repeat(5, clamp(26px, 4vh, 34px)); gap: clamp(8px, 1.4vh, 12px); }
:is(#solid-way, #journey) .habit-grid i { width: clamp(26px, 4vh, 34px); height: clamp(26px, 4vh, 34px); border-radius: 9px; }
:is(#solid-way, #journey) .habit-grid b { font-size: 12px; }
:is(#solid-way, #journey) .roadmap li { padding: clamp(10px, 1.8vh, 15px) 0 clamp(10px, 1.8vh, 15px) 18px; grid-template-columns: 40px 1fr; }
:is(#solid-way, #journey) .roadmap b { font-size: 13px; }

@media (max-width: 900px) {
  :is(#solid-way, #journey) .hs-panel { grid-template-columns: 1fr; }
  :is(#solid-way, #journey) .hs-copy { padding: 8px 6px 10px; }
  :is(#solid-way, #journey) .sw-num { font-size: clamp(60px, 18vw, 96px); }
  :is(#solid-way, #journey) .hs-copy h3.sw-name { font-size: clamp(42px, 12vw, 72px); }
  :is(#solid-way, #journey) .hs-copy > p.sw-tagline { font-size: clamp(22px, 6vw, 30px); }
}

/* Copilot journey extras: what each step is (a tinted label above the number), and its larger mock screens */
#journey .sw-what { align-self: flex-start; margin-bottom: clamp(14px, 2.6vh, 26px); padding: 7px 14px; border-radius: 999px; font-size: clamp(12px, 1.7vh, 13.5px); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; color: color-mix(in srgb, var(--sc) 68%, #000); background: color-mix(in srgb, var(--sc) 12%, #fff); }
#journey .slide-bar span { width: 11px; height: 11px; }
#journey .slide-bar em { font-size: clamp(12px, 1.8vh, 13.5px); }
#journey .slide-body { gap: clamp(12px, 2vh, 16px); }
#journey .slide-q { font-size: clamp(20px, min(1.8vw, 3.2vh), 26px); }
#journey .prompt, #journey .answer { padding: clamp(12px, 2vh, 16px) clamp(14px, 1.4vw, 18px); border-radius: 16px; gap: 8px; }
#journey .prompt i, #journey .answer i { font-size: 11px; }
#journey .answer span { height: 9px; }
#journey .bars { height: clamp(150px, 26vh, 230px); gap: clamp(10px, 1.2vw, 16px); }
#journey .bar span { font-size: clamp(11.5px, 1.7vh, 13px); }
#journey .flow { gap: clamp(10px, 1.6vh, 14px); }
#journey .flow li { padding: clamp(11px, 1.8vh, 15px) 16px clamp(11px, 1.8vh, 15px) 54px; border-radius: 14px; }
#journey .flow li::before { left: 14px; width: 28px; height: 28px; font-size: 13px; }
#journey .flow li:not(:last-child)::after { left: 27px; }
#journey .flow b { font-size: clamp(14px, 2.1vh, 16px); }
#journey .flow span { font-size: clamp(12.5px, 1.85vh, 14px); }

#journey .hs-copy > p.sw-tagline { max-width: 22ch; }
/* Short laptop screens: the label adds a line, so the journey cards close up their spacing */
@media (min-width: 901px) and (max-height: 860px) {
  #journey .sw-what { margin-bottom: 12px; padding: 5px 12px; }
  #journey .hs-copy > p.sw-tagline { margin-top: 14px; }
  #journey .hs-copy > p:not(.sw-tagline) { margin-top: 12px; line-height: 1.55; }
  #journey .hs-points { margin-top: 14px; gap: 8px; }
  #journey .hs-copy .hs-link { margin-top: 18px; }
}

/* The Solid Way: "Our proven process" intro above the steps */
.sw-proven { padding-block: clamp(64px, 8vw, 120px) clamp(40px, 5vw, 80px); }
.sw-proven-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); align-items: end; }
.sw-proven-head .h-lg { margin: 0; font-size: clamp(38px, 4.4vw, 68px); line-height: 1.02; letter-spacing: -.04em; max-width: 13ch; }
.sw-proven-head .h-lg .hand { display: block; margin-top: .08em; font-size: 1.08em; line-height: .95; letter-spacing: 0; color: var(--blue-ink); }
.sw-proven-copy .lead { margin: 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; color: #3f4a54; max-width: 46ch; }
.sw-proven-note { margin: 18px 0 0; padding-left: 18px; border-left: 2px solid var(--blue-ink); font-size: clamp(15px, 1.05vw, 16.5px); line-height: 1.6; color: var(--muted); max-width: 50ch; }
@media (max-width: 1100px) { .sw-proven-head { grid-template-columns: 1fr; align-items: start; } }

/* Frequently asked questions (Cyber Security): portrait answer videos alternate with written answers in a swipe rail.
   Every card shares the videos' 5:6 shape; the play overlay gives way to the native controls once a video starts. */
.faqv .rail-head { align-items: center; }
.faqv .rail-head .h-lg { margin: 0; }
.faqv .hand { color: var(--blue-ink); }
.faqv-track { grid-auto-columns: calc((100% - 2 * 20px) / 3); }
.faqv-card { scroll-snap-align: start; position: relative; border-radius: 22px; overflow: hidden; }
.faqv-video { aspect-ratio: 5 / 6; background: var(--night); }
.faqv-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.faqv-over { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding: clamp(18px, 1.8vw, 24px);
  background: linear-gradient(180deg, rgba(14,20,27,0) 38%, rgba(14,20,27,.82) 100%); transition: opacity .25s; }
.faqv-over h3 { margin: 0; color: #fff; font-size: clamp(17px, 1.35vw, 20px); font-weight: 700; letter-spacing: -.015em; line-height: 1.3; text-wrap: balance; }
.faqv-play { position: relative; align-self: flex-start; display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.faqv-play::after { content: ''; position: absolute; inset: -400px -40px -40px; }   /* the whole card is the play target */
.faqv-play .vid-play { position: relative; inset: auto; width: 46px; height: 46px; flex: 0 0 auto; }
.faqv-play .vid-play::before { left: 18px; top: 14px; border-width: 9px 0 9px 13px; }
.faqv-video:hover .vid-play { transform: scale(1.08); background: var(--blue-ink); }
.faqv-video:hover .vid-play::before { border-left-color: #fff; }
.faqv-play:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 999px; }
.faqv-video.is-playing .faqv-over { opacity: 0; pointer-events: none; }
.faqv-text { background: linear-gradient(170deg, var(--fq) 0%, color-mix(in srgb, var(--fq) 40%, #fff) 100%); padding: clamp(22px, 2vw, 30px); display: flex; flex-direction: column; gap: 14px; }
.faqv-text h3 { margin: 0; font-size: clamp(19px, 1.5vw, 23px); font-weight: 800; letter-spacing: -.025em; line-height: 1.2; color: var(--ink); }
.faqv-text p { margin: 0; font-size: clamp(14.5px, 1.05vw, 16px); line-height: 1.6; color: #3f4a54; }
@media (max-width: 1100px) { .faqv-track { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (max-width: 640px) { .faqv-track { grid-auto-columns: 82%; gap: 14px; } }

/* The outcome (Cyber Security): a dark feature card, the outcome sentence beside its three promises */
.oc-sec { padding-block: clamp(48px, 6vw, 88px) clamp(8px, 2vw, 24px); }
.oc-card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center;
  padding: clamp(32px, 4.6vw, 64px); border-radius: 30px; color: #fff;
  background: radial-gradient(70% 120% at 100% 0%, rgba(77,176,229,.35), transparent 60%), radial-gradient(60% 90% at 0% 100%, rgba(11,116,168,.35), transparent 65%), var(--night); }
.oc-card::after { content: ''; position: absolute; right: -90px; bottom: -90px; width: 300px; height: 300px; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 0 0 40px rgba(255,255,255,.025), 0 0 0 80px rgba(255,255,255,.02); pointer-events: none; }
.oc-lead { position: relative; }
.oc-lead .eyebrow { color: #8fd0f2; }
.oc-big { margin: 16px 0 0; font-size: clamp(26px, 2.7vw, 40px); font-weight: 700; line-height: 1.22; letter-spacing: -.025em; text-wrap: balance; }
.oc-points { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.oc-points li { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(6px); }
.oc-ic { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 14px; display: grid; place-items: center; color: #8fd0f2; background: rgba(77,176,229,.16); }
.oc-points li > span:last-child { display: grid; gap: 2px; font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.72); }
.oc-points b { font-size: 17px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
@media (max-width: 900px) { .oc-card { grid-template-columns: 1fr; } }

/* Article panel: an illustrative mock (e.g. the Solid Guardian device-health view) with a caption beneath */
.bp-panel { margin: 28px 0; }
.bp-panel .guardian-media { min-height: 0; display: grid; place-items: center; }
.bp-panel figcaption { margin-top: 10px; font-size: 13.5px; color: var(--muted); text-align: center; }

/* Article: the four AI journey stages as tinted cards (thin step number, status, name, tagline, facts, link) */
.bp-journey { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 8px 0 6px; }
.bp-stage { --st: var(--t-ignite); --sc: var(--ig-gold); position: relative; overflow: hidden; display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: 22px; text-decoration: none; color: var(--ink);
  background: linear-gradient(170deg, var(--st) 0%, color-mix(in srgb, var(--st) 35%, #fff) 100%); transition: transform .2s, box-shadow .2s; }
.bp-stage:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(17,24,32,.1); }
.bp-stage.st-elevate { --st: var(--t-elevate); --sc: var(--blue-ink); }
.bp-stage.st-expand { --st: var(--t-expand); --sc: #17734a; }
.bp-stage.st-embed { --st: var(--t-embed); --sc: #4b3fa8; }
.bp-stage-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.bp-stage-num { font-size: 52px; font-weight: 200; letter-spacing: -.06em; line-height: .8; color: var(--sc); }
.bp-stage-status { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.75); color: color-mix(in srgb, var(--sc) 70%, #000); }
.bp-stage-what { margin-top: 10px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--sc) 70%, #000); }
.bp-stage-name { font-size: 30px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.bp-stage-tag { font-size: 17px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; }
.bp-stage ul { list-style: none; margin: 6px 0 0; padding: 12px 0 0; border-top: 1px solid rgba(17,24,32,.1); display: grid; gap: 7px; }
.bp-stage li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.45; color: #3f4a54; }
.bp-stage li::before { content: ""; position: absolute; left: 2px; top: .4em; width: 10px; height: 5px; border-left: 2px solid var(--sc); border-bottom: 2px solid var(--sc); transform: rotate(-45deg); }
.bp-stage em { margin-top: 6px; font-style: normal; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.bp-stage:hover em { color: color-mix(in srgb, var(--sc) 75%, #000); }
.bp-weeks > li { padding: 18px 22px; }
.bp-weeks h3 { margin-top: 6px; }
@media (max-width: 640px) { .bp-journey { grid-template-columns: 1fr; } }

/* Article comparison table: plans across, features down; scrolls sideways on small screens */
.bp-table-wrap { margin: 8px 0 6px; overflow-x: auto; border-radius: 20px; border: 1px solid var(--line); background: var(--card); }
.bp-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.bp-table th, .bp-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.bp-table tbody tr:last-child th, .bp-table tbody tr:last-child td { border-bottom: 0; }
.bp-table thead th { font-size: 13px; font-weight: 800; letter-spacing: -.005em; color: var(--ink); background: var(--paper); }
.bp-table thead th:nth-child(3) { color: var(--blue-ink); }
.bp-table tbody th { font-weight: 600; color: var(--ink); }
.bp-table td { color: #3f4a54; }
.bp-table td:nth-child(3) { background: color-mix(in srgb, var(--blue-wash) 45%, transparent); }
.bp-yes, .bp-billed, .bp-no { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.bp-yes { color: #17734a; }
.bp-yes::before { content: '✓'; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: #dcf3e6; }
.bp-billed { color: #8a5a00; }
.bp-billed::before { content: '+'; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--t-ignite); }
.bp-no { color: var(--muted); font-weight: 500; }
.bp-no::before { content: '–'; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--paper); }

/* Case study pages: "More stories" (Real businesses. Real results.) as tinted, clickable story cards.
   Each tone matches the client's card on case-studies.html. */
.cs-more { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.cs-more-card { --bg: var(--blue-wash); --ink-c: var(--blue-ink); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; min-height: 260px;
  padding: clamp(20px, 2vw, 26px); border-radius: 24px; text-decoration: none; color: var(--ink);
  background: linear-gradient(170deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 40%, #fff) 100%); transition: transform .25s, box-shadow .25s; }
.cs-more-card.tone-green { --bg: var(--t-expand); --ink-c: #17734a; }
.cs-more-card.tone-warm { --bg: var(--t-ignite); --ink-c: #8a5a00; }
.cs-more-card.tone-lilac { --bg: var(--t-embed); --ink-c: #4b3fa8; }
.cs-more-card.tone-night { --bg: #15202b; --ink-c: #8fd6f7; color: #fff; background: linear-gradient(170deg, #1b2a3a 0%, #15202b 100%); }
.cs-more-card::after { content: ''; position: absolute; right: -50px; bottom: -60px; width: 170px; height: 170px; border-radius: 50%; background: rgba(255,255,255,.35); transition: transform .5s; pointer-events: none; }
.cs-more-card.tone-night::after { background: rgba(143,214,247,.08); }
.cs-more-card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(17,24,32,.12); }
.cs-more-card:hover::after { transform: scale(1.15); }
.cs-more-card:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.cs-more-card > * { position: relative; z-index: 1; }
.cs-more-card small { order: -1; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--ink-c) 75%, #000); line-height: 1.4; }
.cs-more-card.tone-night small { color: var(--ink-c); }
.cs-more-card b { font-size: clamp(24px, 2vw, 28px); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.cs-more-card span { font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; color: #3f4a54; text-wrap: balance; }
.cs-more-card.tone-night span { color: var(--on-night-muted); }
.cs-more-card em { margin-top: auto; padding-top: 14px; align-self: flex-start; font-style: normal; font-size: 14.5px; font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--ink-c); padding-bottom: 2px; }
.cs-more-card.tone-night em { color: #fff; }
@media (max-width: 1000px) { .cs-more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cs-more { grid-template-columns: 1fr; } .cs-more-card { min-height: 0; } }

/* Section heading link (e.g. "All case studies →", "All posts and guides →"): sits bottom-right of the heading row */
.sec-head > .more-link { justify-self: end; align-self: end; display: inline-flex; align-items: center; gap: 6px; padding-bottom: 3px; border-bottom: 2px solid var(--blue); font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; transition: color .2s, border-color .2s; }
.sec-head > .more-link:hover { color: var(--blue-ink); border-color: var(--blue-ink); }
@media (max-width: 760px) { .sec-head > .more-link { justify-self: start; white-space: normal; } }

/* Case study page styles restored (dropped by mistake in a156ff2): five-result strip, outcomes, facts quote, "what set it apart" */
.cs-results.cs-results-5 { grid-template-columns: repeat(5, 1fr); }
.cs-results-5 b { font-size: clamp(36px, 3.6vw, 54px); }
.cs-results-5 div { padding: 28px 22px; }
@media (max-width: 1080px) {
  .cs-results.cs-results-5 { grid-template-columns: repeat(3, 1fr); }
  .cs-results-5 div { border-left: 1px solid var(--line); border-top: 0; }
  .cs-results-5 div:nth-child(3n+1) { border-left: 0; }
  .cs-results-5 div:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .cs-results.cs-results-5 { grid-template-columns: 1fr; }
  .cs-results-5 div { border-left: 0; border-top: 1px solid var(--line); }
  .cs-results-5 div:first-child { border-top: 0; }
}
.cs-outcome-text { text-align: center; margin: 0 auto 26px; max-width: 64ch; }
.cs-outcomes { max-width: 760px; margin: 0 auto; }
.cs-facts-quote span { color: var(--on-night); font-size: 16px; line-height: 1.5; font-weight: 600; }
.cs-apart { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cs-apart > div { padding: 26px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.cs-apart h3 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin: 6px 0 0; }
.cs-apart p { font-size: 15px; color: var(--muted); line-height: 1.6; }
@media (max-width: 1000px) { .cs-apart { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cs-hero .h-xl { font-size: clamp(38px, 12.5vw, 56px); } }

/* Booking page: the host card (who you'll meet) sits under the headline, above what the call covers */
.book-host { position: relative; display: flex; align-items: center; gap: 16px; margin-top: clamp(20px, 2.6vw, 28px); padding: 14px 22px 14px 14px; max-width: 440px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(17,24,32,.07); }
.book-host img { width: 72px; height: 72px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; background: #dfe7ee; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--blue-wash); }
.book-host > div { display: grid; gap: 2px; min-width: 0; }
.book-host-k { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-ink); }
.book-host b { font-size: clamp(20px, 1.8vw, 24px); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; color: var(--ink); }
.book-host b + span { font-size: 15px; color: var(--muted); }
@media (max-width: 560px) {
  .book-host { gap: 12px; padding: 10px 16px 10px 10px; margin-top: 16px; }
  .book-host img { width: 56px; height: 56px; }
  .book-host b { font-size: 19px; }
}

/* ---------- Phone polish (audit at 375px: no sideways scrolling; these fix small labels and small tap targets) ---------- */
@media (max-width: 640px) {
  /* Small uppercase labels and tags: 11px is hard to read on a phone, so lift them to 12px */
  .post-tags li, .post-cat, .vid-topic, .vid-ch-h, .vid-new, .ind-rec-label, .res-type, .res-topic, .plan-tag, .el-wk, .csx-type,
  .bp-chip, .bp-story-h, .promise-k, .office-top .country, .tel small, .blog-types-label, .stage-mark-word, .book-host-k,
  .bp-author span, .aa-panel small, .aa-note, .qw-move-n small { font-size: 12px; }
  /* Standalone text links: a larger invisible tap area (about 44px tall) without moving anything */
  .cta-textlink, .hs-link, .more-link, .rail-all, .plan-link, .office-body .dir, .text-link-on-night, .ig-crumb,
  .hero-link a, .ind-pick-out a, .ig-video-meta a, .foot-legal a, .foot-offices .more-link { position: relative; }
  .cta-textlink::before, .hs-link::before, .more-link::before, .rail-all::before, .plan-link::before, .office-body .dir::before,
  .text-link-on-night::before, .ig-crumb::before, .hero-link a::before, .ind-pick-out a::before, .ig-video-meta a::before,
  .foot-legal a::before { content: ''; position: absolute; inset: -10px -6px; }
  .site-foot a[href^="mailto:"], .site-foot a[href^="tel:"] { display: inline-block; padding-block: 8px; }
  /* Testimonial progress dots: same thin bar, taller hit area */
  .wom-dots button { height: 32px; }
  .blog-search input { align-self: stretch; }
}
@media (max-width: 640px) {
  .pillars dt, .aa-hero-copy .stage-mark .stage-mark-word, .stage-mark .stage-mark-word, .aa-modules span, .aa-modules small, .bp-stage-status,
  .bp-sub-step, .bp-fix > span, .cs-more-card small, .office-body .tel small, .plans-links a small, .stage-mark-word .stage-soon, .rp-arenas small { font-size: 12px; }
}
/* Booking page: "Choose a time" in the closing band scrolls to the calendar, clear of the fixed header */
#calendly { scroll-margin-top: calc(var(--head-h) + 32px); }

/* Expand (ai-academy.html) hero: copy on the left and the Academy laptop + phone on the right, like the other stage pages.
   Below 1000px it stacks: copy first, then the devices. */
.aa-hero .wrap { text-align: left; }
.aa-hero-copy { justify-items: start; max-width: 640px; margin: 0; gap: 18px; }
.aa-hero-copy .aa-notice { margin-bottom: 4px; }
@media (min-width: 1001px) {
  .aa-hero { padding-top: clamp(28px, 3.5vw, 48px); }
  .aa-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(36px, 4.5vw, 72px); align-items: center; padding-bottom: clamp(56px, 6vw, 96px); }
  .aa-hero-copy .h-xl { font-size: clamp(40px, 4.1vw, 62px); }
  .aa-devices { margin: 0; max-width: none; padding-bottom: 14px; }
  .aa-laptop { width: 88%; margin: 0; }
  .aa-phone { width: clamp(180px, 14vw, 200px); right: 0; bottom: -4px; }
  .aa-phone .aa-phone-screen { min-height: 300px; }
}
.aa-hero-copy .aa-notice { flex-wrap: nowrap; align-items: center; text-align: left; border-radius: 16px; font-size: 13.5px; line-height: 1.4; }
.aa-hero-copy .aa-notice .aa-new { flex: 0 0 auto; }
/* AI Academy: "Try a module" links land on the form clear of the fixed header */
#register { scroll-margin-top: calc(var(--head-h) + 12px); }

/* AI Academy closing section: copy top-left, Alice standing on the bottom edge beneath it, the form on the right.
   Phones: copy, form, then Alice. (Her <img> keeps the v2-assess-person class so tools/band-people.js manages it.) */
.aa-close.aa-cta { padding-bottom: 0; }
.aa-close .aa-cta-in { grid-template-areas: "copy form" "person form"; grid-template-rows: auto 1fr; align-items: start; row-gap: 0; }
.aa-cta-copy { grid-area: copy; padding-top: clamp(8px, 2vw, 24px); }
.aa-close .form { grid-area: form; align-self: center; margin-bottom: clamp(56px, 8vw, 104px); }
.aa-cta .v2-assess-person { grid-area: person; justify-self: start; align-self: end; height: clamp(300px, 30vw, 430px); margin: 20px 0 0 -24px; }
@media (max-width: 900px) {
  .aa-close .aa-cta-in { grid-template-areas: "copy" "form" "person"; grid-template-rows: auto; }
  .aa-close .form { margin-bottom: 0; }
  .aa-cta .v2-assess-person { justify-self: center; margin: 24px 0 0; height: clamp(280px, 78vw, 400px); }
}
p.aa-notice { margin: 0 0 4px; }
p.aa-notice:hover { border-color: var(--line); }

/* Expand hero, three areas across the full width: the step (far left), headline + actions (middle), the Academy on screen (far right).
   Below 1100px the areas stack: step, headline, devices. */
.aa-hero-full { padding-inline: var(--gutter); }
.aa-hero-side { display: grid; justify-items: start; gap: 18px; margin-bottom: 18px; }
@media (max-width: 1100px) {
  .aa-hero-full { max-width: 1180px; margin: 0 auto; }
  .aa-hero-grid { display: block; padding-bottom: 0; }
  .aa-devices { margin: clamp(32px, 5vw, 56px) auto 0; max-width: 960px; padding-bottom: 0; }
  .aa-laptop { width: 86%; margin: 0 auto; }
}
@media (min-width: 1101px) {
  .aa-hero-full { max-width: 1760px; margin: 0 auto; padding-inline: clamp(28px, 3.2vw, 64px); }
  .aa-hero-grid { display: grid; grid-template-columns: minmax(190px, .5fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(28px, 3vw, 64px); align-items: center; padding-bottom: clamp(56px, 6vw, 96px); }
  .aa-hero-side { align-self: center; margin: 0; gap: 22px; }
  .aa-hero-side .stage-mark { padding: 6px 0 8px 20px; gap: 10px; border-left-width: 4px; }
  .aa-hero-side .stage-mark-step { font-size: clamp(28px, 2.2vw, 36px); }
  .aa-hero-side .stage-mark-name { font-size: clamp(40px, 3.6vw, 60px); letter-spacing: -.045em; }
  .aa-hero-side .stage-mark-word { font-size: clamp(12px, .9vw, 14px); }
  .aa-hero-side .aa-notice { margin: 0; }
  .aa-hero-copy { max-width: 600px; }
  .aa-hero-copy .h-xl { font-size: clamp(38px, 3.4vw, 62px); }
  .aa-hero-copy .lead { font-size: clamp(16px, 1.15vw, 19px); }
  .aa-devices { margin: 0; max-width: none; padding-bottom: 14px; }
  .aa-laptop { width: 88%; margin: 0; }
  .aa-phone { width: clamp(170px, 12vw, 220px); right: 0; bottom: -4px; }
}
@media (min-width: 1101px) {
  .aa-hero-side .aa-notice { display: grid; justify-items: start; gap: 8px; padding: 12px 16px; border-radius: 16px; max-width: 240px; font-size: 14px; line-height: 1.45; }
}
@media (max-width: 1100px) {
  .aa-hero-side .aa-notice { flex-wrap: nowrap; align-items: center; text-align: left; border-radius: 999px; font-size: 13.5px; line-height: 1.4; }
  .aa-hero-side .aa-notice .aa-new { flex: 0 0 auto; }
}
.aa-cta .form .form-alt { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.aa-cta .form .form-alt .cta-textlink { color: var(--blue-ink); border-bottom-color: rgba(11,116,168,.35); }

/* Ignite hero: Daniel presenting, full width, in three areas like the Expand hero.
   Desktop: the photo fills the hero behind the header; a warm fade over the soft screen on the left carries the copy.
   Left: the step and the essentials. Middle: headline, intro and actions. Right: Daniel (the photo).
   Below 1100px the photo sits on top, cropped to Daniel, and the copy follows. */
.ig-photo-hero { position: relative; overflow: hidden; padding: 0; background: #ece6e0; }
.ig-photo-img { display: block; width: 100%; height: clamp(300px, 62vw, 520px); object-fit: cover; object-position: 88% 30%; }
.ig-photo-in { position: relative; z-index: 1; padding: 24px var(--gutter) clamp(48px, 8vw, 72px); background: var(--paper); }
.ig-photo-side { display: grid; justify-items: start; gap: 16px; margin-bottom: 22px; }
.ig-photo-side .stage-mark { padding: 4px 0 6px 16px; border-left-width: 4px; }
.ig-photo-copy { display: grid; justify-items: start; gap: 16px; max-width: 640px; }
.ig-photo-copy .h-xl { margin: 0; }
.ig-photo-copy .ig-join { margin-top: 0; }
.ig-photo-copy .cta-row { margin-top: 6px; }
@media (max-width: 1100px) { main > .ig-photo-hero:first-child { margin-top: 0; } }
@media (min-width: 1101px) {
  main > .ig-photo-hero:first-child { margin-top: calc(-1 * (var(--head-h) + env(safe-area-inset-top, 0px))); }
  .ig-photo-hero { min-height: clamp(660px, 86vh, 900px); display: flex; align-items: center; }
  .ig-photo-img { position: absolute; inset: 0; height: 100%; object-position: 78% 32%; }
  .ig-photo-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(240,235,230,.97) 0%, rgba(240,235,230,.93) 34%, rgba(240,235,230,.7) 50%, rgba(240,235,230,0) 62%),
                linear-gradient(0deg, rgba(240,235,230,.5) 0%, rgba(240,235,230,0) 20%); }
  .ig-photo-in { z-index: 2; width: 100%; max-width: 1760px; margin: 0 auto; background: none;
    padding: calc(var(--head-h) + 32px) clamp(28px, 3.2vw, 64px) clamp(48px, 5vw, 80px);
    display: grid; grid-template-columns: minmax(190px, .5fr) minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 3vw, 64px); align-items: center; }
  .ig-photo-side { margin: 0; gap: 22px; }
  .ig-photo-side .stage-mark { padding: 6px 0 8px 20px; gap: 10px; }
  .ig-photo-side .stage-mark-step { font-size: clamp(28px, 2.2vw, 36px); }
  .ig-photo-side .stage-mark-name { font-size: clamp(40px, 3.6vw, 60px); letter-spacing: -.045em; }
  .ig-photo-side .ig-meta { flex-direction: column; align-items: flex-start; }
  .ig-photo-side .ig-meta li { background: rgba(255,255,255,.75); }
  .ig-photo-copy .h-xl { font-size: clamp(38px, 3.3vw, 60px); }
  .ig-photo-copy .ig-lede { font-size: clamp(16px, 1.12vw, 18px); color: #45505a; }
}
@media (min-width: 1101px) {
  .ig-photo-hero::before { background:
      linear-gradient(90deg, rgba(240,235,230,.97) 0%, rgba(240,235,230,.95) 50%, rgba(240,235,230,.8) 57%, rgba(240,235,230,.3) 63%, rgba(240,235,230,0) 68%),
      linear-gradient(0deg, rgba(240,235,230,.5) 0%, rgba(240,235,230,0) 20%); }
  .ig-photo-copy { max-width: 540px; }
}
/* Elevate uses the same photo hero; its step label is the solo kind (Step two ~ / Executive coaching), so enlarge that */
@media (min-width: 1101px) {
  .ig-photo-side .stage-mark-solo .stage-mark-word { font-size: clamp(13px, 1vw, 15px); }
  .el .ig-photo-copy .h-xl { font-size: clamp(44px, 4.2vw, 76px); }
  .el .ig-photo-img { object-position: 82% 30%; }
}
@media (max-width: 1100px) { .el .ig-photo-img { object-position: 92% 30%; height: clamp(360px, 96vw, 560px); } }

/* ---------- Apply for Ignite (ignite-apply.html): the qualifying form ----------
   One card of five numbered sections with large tap-friendly option tiles; result cards replace it in place. */
.qa-hero { padding-block: clamp(24px, 4vw, 48px) clamp(64px, 8vw, 112px); background: radial-gradient(70% 60% at 85% 0%, var(--t-ignite), transparent 60%), var(--paper); }
.qa-wrap { max-width: 860px; }
.qa-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 14.5px; font-weight: 600; color: var(--muted); text-decoration: none; }
.qa-back:hover { color: var(--ink); }
.qa-card { background: var(--card); border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 24px 60px rgba(17,24,32,.07); padding: clamp(24px, 4.4vw, 52px); }
.qa-head { display: grid; justify-items: start; gap: 16px; padding-bottom: clamp(20px, 3vw, 30px); border-bottom: 1px solid var(--line); }
.qa-head .stage-mark-name { font-size: clamp(22px, 2vw, 28px); }
.qa-title { margin: 6px 0 0; font-size: clamp(32px, 4.2vw, 52px); font-weight: 800; line-height: 1.04; letter-spacing: -.04em; color: var(--ink); }
.qa-title .hand { display: block; font-size: 1.05em; letter-spacing: 0; margin-top: .06em; }
.qa-intro { margin: 0; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: #45505a; max-width: 58ch; }
.qa-meta { margin: 0; }
.qa-form { display: grid; gap: clamp(22px, 3vw, 30px); padding-top: clamp(22px, 3vw, 30px); }
.qa-section { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; min-width: 0; }
.qa-section legend { display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 2px; }
.qa-num { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #8a5a00; background: var(--t-ignite); }
.qa-label { font-size: clamp(18px, 1.6vw, 21px); font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.qa-help { margin: -4px 0 0 46px; font-size: 14.5px; color: var(--muted); }
.qa-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qa-field { display: grid; gap: 6px; min-width: 0; }
.qa-field label, .qa-choice-label { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.qa-field input[type="text"], .qa-field input[type="email"] { font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; min-height: 48px; transition: border-color .15s, box-shadow .15s; }
.qa-field input:focus { outline: 0; border-color: var(--ig-gold); box-shadow: 0 0 0 3px rgba(201,138,18,.18); background: #fff; }
.qa-field-error, .qa-error { display: none; margin: 0; font-size: 13px; font-weight: 600; color: #c2412b; }
.qa-field.is-invalid .qa-field-error, .qa-section.is-invalid .qa-error { display: block; }
.qa-field.is-invalid input[type="text"], .qa-field.is-invalid input[type="email"] { border-color: #e08a78; }
.qa-section.is-invalid .qa-option > span { border-color: #e9b3a6; }
.qa-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qa-options.qa-three { grid-template-columns: repeat(3, 1fr); }
.qa-options.qa-inline { grid-template-columns: repeat(2, minmax(0, 150px)); }
.qa-option { position: relative; display: block; cursor: pointer; }
.qa-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qa-option > span { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 12px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.35; transition: border-color .15s, background .15s, box-shadow .15s; }
.qa-option > span::before { content: ''; width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%; border: 2px solid #c3ccd3; background: #fff; transition: border-color .15s, box-shadow .15s; }
.qa-option:hover > span { border-color: #e2c58c; }
.qa-option input:checked + span { border-color: var(--ig-gold); background: #fffaf0; box-shadow: 0 6px 18px rgba(201,138,18,.12); }
.qa-option input:checked + span::before { border-color: var(--ig-gold); box-shadow: inset 0 0 0 4px #fff; background: var(--ig-gold); }
.qa-option input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.qa-session > span > span { display: grid; gap: 2px; }
.qa-session b { font-size: 16px; }
.qa-session small { font-size: 13px; font-weight: 500; color: var(--muted); }
.qa-submit { display: grid; justify-items: start; gap: 10px; padding-top: clamp(18px, 2.4vw, 24px); border-top: 1px solid var(--line); }
.qa-submit .btn { min-height: 52px; padding-inline: 26px; font-size: 16px; }
.qa-status { margin: 0; font-size: 14.5px; font-weight: 600; color: #17734a; }
.qa-fine { margin: 0; font-size: 13.5px; color: var(--muted); }
.qa-cap { border: 0; border-radius: 24px; padding: clamp(24px, 4vw, 36px); max-width: 460px; width: calc(100% - 32px); box-shadow: 0 40px 90px rgba(17,24,32,.3); }
.qa-cap::backdrop { background: rgba(14,20,27,.55); backdrop-filter: blur(2px); }
.qa-cap h2 { margin: 10px 0 8px; font-size: 24px; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; }
.qa-cap p { margin: 0; color: #45505a; }
.qa-cap-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.qa-result { display: grid; justify-items: start; gap: 14px; }
.qa-result h2 { margin: 0; font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
.qa-result h2 .hand { display: block; letter-spacing: 0; }
.qa-result p { margin: 0; font-size: 16.5px; line-height: 1.6; color: #45505a; max-width: 60ch; }
.qa-result-icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; font-weight: 800; color: #b35c00; background: var(--t-ignite); }
.qa-result-icon.ok { color: #17734a; background: var(--t-expand); }
.qa-better { display: grid; gap: 10px; width: 100%; margin-top: 8px; }
.qa-better-card { display: grid; gap: 3px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--paper); text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.qa-better-card:hover { border-color: #b9dcee; transform: translateY(-2px); }
.qa-better-card b { font-size: 16px; }
.qa-better-card span { font-size: 14px; color: var(--muted); }
.qa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 8px; }
@media (max-width: 640px) {
  .qa-row, .qa-options, .qa-options.qa-three { grid-template-columns: 1fr; }
  .qa-options.qa-inline { grid-template-columns: 1fr 1fr; }
  .qa-help { margin-left: 0; }
  .qa-submit .btn { width: 100%; justify-content: center; }
}

/* ---------- Ignite tickets (ignite-tickets.html): the Quicket checkout embedded on our site ---------- */
.qt-wrap { max-width: 1040px; }
.qt-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: end; margin-bottom: clamp(22px, 3vw, 32px); }
.qt-head .qa-title { margin-top: 14px; }
.qt-head .qa-intro { margin-top: 14px; }
.qt-notes { list-style: none; margin: 0; padding: 18px 20px; display: grid; gap: 10px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); font-size: 14.5px; line-height: 1.5; color: #45505a; }
.qt-notes b { color: var(--ink); }
.qt-notes a { color: var(--blue-ink); font-weight: 600; }
.qt-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.qt-tab { display: grid; gap: 2px; padding: 14px 18px; border-radius: 16px; border: 1.5px solid var(--line); background: #fff; text-decoration: none; color: var(--ink); transition: border-color .15s, background .15s; }
.qt-tab b { font-size: 16px; }
.qt-tab span { font-size: 13.5px; color: var(--muted); }
.qt-tab:hover { border-color: #e2c58c; }
.qt-tab[aria-selected="true"] { border-color: var(--ig-gold); background: #fffaf0; box-shadow: 0 6px 18px rgba(201,138,18,.12); }
.qt-embed { border-radius: 24px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(17,24,32,.07); }
.qt-embed iframe { display: block; width: 100%; height: 800px; border: 0; }
.qt-fallback { margin: 14px 0 0; font-size: 14.5px; color: var(--muted); }
@media (max-width: 760px) {
  .qt-head { grid-template-columns: 1fr; align-items: start; }
  .qt-embed iframe { height: 900px; }
}
/* Journey card with two text links stacked (Copilot & AI: Ignite has Explore Ignite + Reserve a seat) */
.hs-copy .hs-links { display: grid; justify-items: start; gap: 6px; margin-top: auto; }
:is(#solid-way, #journey) .hs-copy .hs-links { margin-top: clamp(22px, 4vh, 40px); }
:is(#solid-way, #journey) .hs-copy .hs-links .hs-link { margin-top: 0; }

/* Blog and Resources split into topic sections, like AI Education: jump cards, then one section per topic */
.edu-nav.blog-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.blog-bar-sections { margin-top: clamp(20px, 2.6vw, 28px); align-items: center; }
.blog-bar-sections .blog-types { margin: 0; }
.blog-series .sec-head, .res-series .sec-head { margin-bottom: 26px; }
.blog-series + .blog-series, .res-series + .res-series { border-top: 1px solid var(--line); padding-top: clamp(40px, 5vw, 64px); }
.res-filters-top { margin: clamp(20px, 2.6vw, 28px) 0 0; }
.more-link-inline { display: inline-block; margin-left: 4px; font-weight: 700; color: var(--blue-ink); text-decoration: none; white-space: nowrap; }
.more-link-inline:hover { text-decoration: underline; }
.blog-empty-sec .blog-empty:not([hidden]), .res-empty-sec .res-empty:not([hidden]) { margin: 0; }
@media (max-width: 1000px) { .edu-nav.blog-nav { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .edu-nav.blog-nav { grid-template-columns: 1fr; } .more-link-inline { white-space: normal; margin-left: 0; } }

/* Migrated Sendmarc post: initials avatar (no photo), Daniel's quote, protocol list and "Keep reading" links */
.bp-avatar { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 800; letter-spacing: .02em; color: #fff; background: linear-gradient(135deg, var(--blue-ink), var(--night)); }
.bp-avatar-lg { width: 64px; height: 64px; font-size: 19px; }
.bp-body > p.bp-pull { margin: 6px 0; padding: 22px 24px 22px 26px; border-left: 4px solid var(--blue-ink); border-radius: 0 20px 20px 0; background: var(--blue-wash); font-size: 18px; line-height: 1.6; color: var(--ink); }
.bp-protocols li { grid-template-columns: 28px minmax(0, 1fr); }
.bp-protocols b a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(11,116,168,.35); text-underline-offset: 3px; }
.bp-protocols b a:hover { color: var(--blue-ink); text-decoration-color: currentColor; }
.bp-related { margin-top: 18px; display: grid; gap: 10px; }
.bp-related-h { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.bp-related a { display: grid; gap: 4px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); text-decoration: none; color: var(--ink); transition: border-color .2s, transform .2s; }
.bp-related a:hover { border-color: var(--blue-ink); transform: translateY(-2px); }
.bp-related b { font-size: 16px; line-height: 1.35; }
.bp-related span { font-size: 14px; font-weight: 600; color: var(--blue-ink); }

/* ==========================================================================
   Careers (careers/) and Internship (internship/): migrated at their live URLs.
   Headings keep the live levels (H2 heroes, H1 mid-page, H5/H4 cards), so sizes here are set by class, not by tag.
   ========================================================================== */
.cr-hero { padding-block: clamp(36px, 6vw, 80px) clamp(48px, 6vw, 80px); background: radial-gradient(60% 70% at 85% 0%, var(--blue-wash), transparent 70%), radial-gradient(50% 60% at 0% 30%, rgba(26,159,219,.08), transparent 70%); }
.cr-hero-copy { display: grid; justify-items: center; gap: 18px; max-width: 860px; margin: 0 auto; text-align: center; }
.cr-title { margin: 4px 0 0; max-width: 15ch; line-height: 1.05; text-wrap: balance; }
.cr-lead { margin: 0; max-width: 46ch; font-size: clamp(19px, 1.6vw, 22px); color: var(--ink); font-weight: 500; }
.cr-hero-text { max-width: 62ch; font-size: 17px; line-height: 1.65; color: var(--muted); }
.cr-readon { font-family: var(--f-hand); font-weight: 700; font-size: clamp(24px, 2vw, 28px); line-height: 1.1; color: var(--hand); }
.cr-hero-copy .cta-row { justify-content: center; margin-top: 4px; }
.cr-team { margin: clamp(36px, 5vw, 64px) 0 0; position: relative; }
.cr-team-photo { border-radius: 28px; overflow: hidden; aspect-ratio: 2 / 1; background: #e9eef1; box-shadow: 0 30px 60px rgba(17,24,32,.14); }
.cr-team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }
.cr-team figcaption { position: absolute; right: clamp(16px, 3vw, 36px); bottom: -18px; padding: 8px 22px 10px; border-radius: 999px; background: #fff; box-shadow: 0 12px 30px rgba(17,24,32,.14); }
.cr-team figcaption .hand { font-size: clamp(24px, 2.2vw, 32px); line-height: 1; }

.cr-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.cr-pillar { display: grid; align-content: start; gap: 12px; padding: clamp(24px, 2.6vw, 34px); border-radius: var(--radius); background: var(--night-2); border: 1px solid var(--night-line); }
.cr-pillar-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #8fd6f7; background: rgba(26,159,219,.16); margin-bottom: 6px; }
.cr-pillar-ico svg { width: 26px; height: 26px; }
.cr-pillar h2 { margin: 0; font-size: clamp(26px, 2.4vw, 32px); font-weight: 800; letter-spacing: -.03em; color: #fff; }
.cr-pillar .cr-pillar-h { margin: 0; font-size: 18px; line-height: 1.35; font-weight: 700; letter-spacing: -.01em; color: #8fd6f7; }
.cr-pillar p { color: var(--on-night-muted); font-size: 15.5px; line-height: 1.65; }

.cr-values-head { max-width: 900px; }
.cr-values-head h1 { max-width: 20ch; text-wrap: balance; }
.cr-sub { margin: 4px 0 0; font-size: clamp(18px, 1.6vw, 21px); font-weight: 600; letter-spacing: -.01em; color: var(--muted); }
.core-values.cr-values { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.cr-values .cv { padding: clamp(22px, 2.4vw, 30px); gap: 12px; transition: transform .2s, border-color .2s, box-shadow .2s; }
.cr-values .cv:hover { transform: translateY(-3px); border-color: rgba(11,116,168,.35); box-shadow: 0 18px 40px rgba(17,24,32,.08); }
.cr-values .cv h2 { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; }
.cr-values .cv p { font-size: 15px; line-height: 1.6; }

.cr-perks-sec { background: linear-gradient(180deg, var(--blue-wash), transparent 85%); }
.cr-perks-title { max-width: 24ch; text-wrap: balance; }
.cr-perks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cr-perks li { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.cr-perk-ico { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: var(--blue-ink); background: var(--blue-wash); }
.cr-perk-ico svg { width: 24px; height: 24px; }
.cr-perks h4 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }

.cr-offices-title { max-width: 30ch; text-wrap: balance; margin-bottom: clamp(24px, 3vw, 40px); }
.cr-offices-title span { display: block; margin-top: 14px; max-width: 46ch; font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; line-height: 1.45; letter-spacing: -.01em; color: var(--muted); }
.cr-offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.cr-office { position: relative; margin: 0; border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 3; background: #e9eef1; }
.cr-office img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.cr-office:hover img { transform: scale(1.03); }
.cr-office figcaption { position: absolute; left: 18px; bottom: 18px; display: grid; gap: 2px; padding: 12px 18px; border-radius: 16px; background: rgba(255,255,255,.94); box-shadow: 0 10px 30px rgba(17,24,32,.18); }
.cr-office figcaption b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.cr-office figcaption span { font-size: 13px; font-weight: 600; color: var(--muted); }

.v2-assess p.cr-band-title, .v2-assess p.hap-band-title { margin: 0; line-height: 1.08; letter-spacing: -.03em; max-width: 16ch; color: #fff; }
.cr-band-link { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255,255,255,.6); text-underline-offset: 3px; }
.cr-band-link:hover { text-decoration-color: #fff; }

/* Internship: same photo hero as Ignite/Elevate, in Solid blue instead of warm beige */
.hap .ig-photo-hero { background: #dceaf5; }
.hap-mark { --sm: var(--blue-ink); }
.hap-accent { color: var(--blue-ink); }
.hap .ig-photo-img { object-position: 82% 30%; }
@media (min-width: 1101px) {
  .hap .ig-photo-hero::before { background:
      linear-gradient(90deg, rgba(236,244,250,.97) 0%, rgba(236,244,250,.94) 48%, rgba(236,244,250,.75) 56%, rgba(236,244,250,.2) 64%, rgba(236,244,250,0) 70%),
      linear-gradient(0deg, rgba(236,244,250,.5) 0%, rgba(236,244,250,0) 20%); }
  .hap .ig-photo-img { object-position: 70% 30%; }
  .hap .ig-photo-copy .h-xl { font-size: clamp(44px, 4vw, 70px); line-height: 1.04; }
}
.hap-q { max-width: 880px; margin-inline: auto; text-align: center; justify-items: center; }
.hap-q h1 { max-width: 20ch; text-wrap: balance; }
.hap-q .lead { margin: 0 auto; }
.hap-points { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hap-points li { display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.hap-point-ico { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: var(--blue-ink); background: var(--blue-wash); }
.hap-point-ico svg { width: 24px; height: 24px; }
.hap-points p { display: grid; gap: 4px; margin: 0; }
.hap-points b { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.hap-points span { font-size: 15px; color: var(--muted); line-height: 1.5; }
.hap-tech { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.hap-tech-photo { border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--night-2); }
.hap-tech-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; display: block; }
.hap-tech-copy { display: grid; gap: 18px; justify-items: start; }
.hap-tech-copy .eyebrow { color: #8fd6f7; }
.hap-tech-copy h2 { margin: 0; color: #fff; max-width: 16ch; }
.hap-tech-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hap-tech-list li { padding: 9px 16px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--on-night); background: var(--night-2); border: 1px solid var(--night-line); }
.hap-tech-more { margin-top: 6px; font-size: 16px; }

@media (max-width: 1000px) {
  .cr-pillars, .cr-perks, .hap-points { grid-template-columns: 1fr 1fr; }
  .core-values.cr-values { grid-template-columns: 1fr 1fr; }
  .hap-tech { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .cr-pillars, .cr-perks, .hap-points, .core-values.cr-values, .cr-offices { grid-template-columns: 1fr; }
  .cr-team-photo { aspect-ratio: 4 / 3; border-radius: 22px; }
  .cr-team-photo img { object-position: 60% 40%; }
  .cr-hero-text { font-size: 16px; }
}
/* Careers offices: photo card with the address beneath (replaces the overlay caption) */
.cr-office { aspect-ratio: auto; display: grid; background: var(--card); border: 1px solid var(--line); }
.cr-office-photo { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.cr-office-body { display: grid; gap: 6px; justify-items: start; padding: 20px 24px 24px; }
.cr-office-body b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.cr-office-body p { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.5; }
.cr-office-body p a { color: var(--ink); text-decoration: none; font-weight: 600; }
.cr-office-body .cta-textlink { margin-top: 8px; font-size: 15px; }

/* Author box: the initials avatar is a span, so undo the box's span label styling */
.bp-author .bp-avatar { display: grid; place-items: center; font-size: 19px; font-weight: 800; letter-spacing: .02em; text-transform: none; color: #fff; }
.bp-author .bp-author-name { margin: 2px 0 4px; font-size: 17px; font-weight: 700; letter-spacing: 0; }

/* Managed IT plans: the Systems Review line links to its page */
.plan-link { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(11,116,168,.4); text-underline-offset: 3px; }
.plan-link:hover { color: var(--blue-ink); text-decoration-color: currentColor; }

/* ==========================================================================
   Solid Systems Review (solid-systems-review/): migrated at its live URL.
   The live page has no H1 and uses H2 for the hero, tiers and booking, H3 for "What kinds of companies" and the six inclusions.
   ========================================================================== */
.sr-hero { padding-block: clamp(32px, 5vw, 72px) clamp(48px, 6vw, 88px); background: radial-gradient(60% 70% at 90% 0%, var(--blue-wash), transparent 70%); }
.sr-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.sr-hero-copy { display: grid; gap: 18px; justify-items: start; }
.sr-title { margin: 0; line-height: 1.02; }
.sr-lead { margin: 0; max-width: 34ch; font-size: clamp(19px, 1.7vw, 23px); color: var(--ink); font-weight: 500; }
.sr-hero-copy .cta-row { margin-top: 6px; }
.sr-hero-photo { border-radius: 28px; overflow: hidden; aspect-ratio: 19 / 12; background: #e9eef1; box-shadow: 0 30px 60px rgba(17,24,32,.14); }
.sr-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; display: block; }

.sr-core-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.sr-core-copy { display: grid; gap: 16px; }
.sr-core-copy h2 { margin: 0; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.15; text-wrap: balance; }
.sr-core-copy p { font-size: 17px; line-height: 1.7; color: var(--muted); }
.sr-core-photo { border-radius: 26px; overflow: hidden; background: #e9eef1; }
.sr-core-photo img { width: 100%; height: auto; display: block; }

.sr-who { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: start; padding: clamp(28px, 4vw, 48px); border-radius: 28px; background: var(--blue-wash); }
.sr-who-head { display: grid; gap: 14px; }
.sr-who-head h3 { margin: 0; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.sr-who-head p { color: var(--muted); font-size: 16px; line-height: 1.65; }
.sr-who-head .sr-who-q { font-family: var(--f-hand); font-weight: 700; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; color: var(--hand); }
.sr-acc { display: grid; gap: 10px; }
.sr-acc details { border-radius: 18px; background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.sr-acc details[open] { border-color: rgba(11,116,168,.35); box-shadow: 0 14px 34px rgba(17,24,32,.07); }
.sr-acc summary { display: flex; align-items: center; gap: 14px; padding: 18px 20px; cursor: pointer; list-style: none; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.sr-acc summary::-webkit-details-marker { display: none; }
.sr-acc summary::after { content: ""; margin-left: auto; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.sr-acc details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.sr-acc summary:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; border-radius: 18px; }
.sr-acc-n { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--blue-ink); background: var(--blue-wash); }
.sr-acc details p { padding: 0 20px 20px 68px; color: var(--muted); font-size: 15.5px; line-height: 1.65; }

.sr-inc-head { max-width: 900px; }
.sr-inc-head h2 { color: #fff; }
.sr-inc-head p { color: var(--on-night-muted); font-size: 16.5px; line-height: 1.7; }
.sr-inc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); counter-reset: inc; }
.sr-inc li { display: grid; align-content: start; gap: 10px; padding: clamp(22px, 2.4vw, 30px); border-radius: var(--radius); background: var(--night-2); border: 1px solid var(--night-line); }
.sr-inc-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #8fd6f7; background: rgba(26,159,219,.16); margin-bottom: 4px; }
.sr-inc-ico svg { width: 24px; height: 24px; }
.sr-inc h3 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.sr-inc p { color: var(--on-night-muted); font-size: 15px; line-height: 1.6; }

.sr-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); align-items: stretch; }
.sr-tier { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 2.6vw, 32px); border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.sr-tier-std { border-color: rgba(11,116,168,.45); box-shadow: 0 24px 50px rgba(11,116,168,.12); }
.sr-tier-k { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-ink); background: var(--blue-wash); padding: 5px 12px; border-radius: 999px; }
.sr-tier h2 { margin: 0; font-size: clamp(26px, 2.4vw, 32px); font-weight: 800; letter-spacing: -.03em; }
.sr-tier ul { list-style: none; margin: 0; padding: 0; display: grid; flex: 1; align-content: start; }
.sr-tier li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 15px; }
.sr-tier li:last-child { border-bottom: 0; }
.sr-tier li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: #20b26b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
.sr-tier-btn { align-self: stretch; justify-content: center; margin-top: 6px; }
.sr-tiers-note { margin-top: clamp(20px, 2.4vw, 28px); font-size: 15.5px; color: var(--muted); }
.sr-tiers-note a:not(.cta-textlink) { color: var(--blue-ink); }

.sr-book-sec { background: linear-gradient(180deg, var(--blue-wash), transparent 80%); scroll-margin-top: calc(var(--head-h) + 12px); }
.sr-book { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.sr-book-copy { display: grid; gap: 14px; justify-items: start; }
.sr-book-copy h2 { margin: 0; font-size: clamp(26px, 3vw, 40px); line-height: 1.15; text-wrap: balance; }
.sr-book-copy p { color: var(--muted); font-size: 16px; line-height: 1.65; }
.sr-book-copy .sr-book-lead { color: var(--ink); font-weight: 600; }
.sr-book-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sr-book-list li { position: relative; padding-left: 28px; font-size: 15.5px; }
.sr-book-list li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; background: var(--blue-ink); }
.sr-host { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 12px 18px 12px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.sr-host img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.sr-host > span { display: grid; line-height: 1.3; }
.sr-host b { font-size: 15px; }
.sr-host span span { font-size: 13px; color: var(--muted); }

@media (max-width: 1000px) {
  .sr-hero-in, .sr-core-in, .sr-who, .sr-book { grid-template-columns: 1fr; }
  .sr-inc, .sr-tiers { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .sr-inc, .sr-tiers { grid-template-columns: 1fr; }
  .sr-acc details p { padding-left: 20px; }
  .sr-who { padding: 22px 18px; border-radius: 22px; }
}

/* 10 Commandments of Computer Care: numbered commandment headings and the Popular Searches list */
.cc-body h2 .cc-num { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; margin-right: 6px; border-radius: 12px; font-size: 18px; color: #fff; background: var(--blue-ink); vertical-align: 3px; }
.cc-body h2.cc-list-title { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.cc-callout { background-image: linear-gradient(90deg, rgba(14,20,27,.92), rgba(14,20,27,.7)), url("../wp-content/uploads/2022/04/Check-them-out-scaled.jpg"); background-size: cover; background-position: center; }
.cc-callout .cta-textlink { color: #8fd6f7; border-bottom-color: rgba(143,214,247,.45); }
.cc-popular { margin-top: 18px; padding: 22px 24px; border-radius: 20px; border: 1px solid var(--line); background: var(--card); }
.cc-popular h4 { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cc-popular ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
.cc-popular a { color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; }
.cc-popular a:hover { color: var(--blue-ink); border-bottom-color: currentColor; }
@media (max-width: 560px) { .cc-popular ul { grid-template-columns: 1fr; } }
/* Online shopping security post: H5 threats and safety measures (the live heading levels), styled like the numbered commandments */
.os-body h5 { margin: 26px 0 0; font-size: clamp(20px, 1.9vw, 24px); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; scroll-margin-top: calc(var(--head-h) + 20px); }
.os-body h5 .cc-num { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px; margin-right: 6px; border-radius: 11px; font-size: 16px; color: #fff; background: var(--blue-ink); vertical-align: 2px; }
.os-body h5.os-measure { display: flex; align-items: center; gap: 12px; }
.os-body h5.os-measure::before { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #20b26b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 16px no-repeat; }

/* Technology For Humans (Sendmarc) post: team quotes, the "excited" panel, blog tip cards and the MFA note */
.th-quotes { display: grid; gap: 14px; margin: 4px 0 6px; }
.th-quote { margin: 0; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 18px; align-items: start; padding: 20px 22px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.th-quote img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 4px var(--blue-wash); }
.bp-body .th-quote h3 { margin: 4px 0 6px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.th-quote p { font-size: 16px; line-height: 1.65; color: var(--ink); }
.th-quote p::before { content: "“"; margin-right: 1px; color: var(--blue-ink); font-weight: 800; }
.th-quote p::after { content: "”"; margin-left: 1px; color: var(--blue-ink); font-weight: 800; }
.th-excited { display: grid; gap: 18px; padding: clamp(18px, 2.4vw, 26px); border-radius: 24px; background: var(--blue-wash); }
.th-excited img { width: 100%; height: auto; border-radius: 16px; display: block; }
.th-excited p { font-size: 17px; line-height: 1.7; color: var(--ink); }
.th-excited-btns { margin-top: 14px; }
.th-tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.th-tip { display: grid; gap: 10px; align-content: start; padding: 14px 14px 20px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); transition: transform .2s, box-shadow .2s; }
.th-tip:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(17,24,32,.08); }
.th-tip-img { display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; }
.th-tip-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp-body .th-tip h3 { margin: 4px 6px 0; font-size: 18px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
.th-tip h3 a { color: var(--ink); text-decoration: none; }
.th-tip h3 a:hover { color: var(--blue-ink); }
.th-tip p { margin: 0 6px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.th-tip .cta-textlink { margin: 4px 6px 0; justify-self: start; font-size: 15px; }
.th-dyk { display: grid; gap: 12px; padding: clamp(20px, 2.6vw, 28px); border-radius: 22px; color: var(--on-night); background: radial-gradient(80% 120% at 100% 0%, rgba(26,159,219,.4), transparent 60%), var(--night); }
.th-dyk p { color: var(--on-night-muted); font-size: 16.5px; line-height: 1.7; }
.th-dyk h4 { margin: 0; font-size: 18px; font-weight: 800; }
.th-dyk h4 a { color: #8fd6f7; text-decoration: underline; text-decoration-color: rgba(143,214,247,.45); text-underline-offset: 4px; }
.th-dyk h4 a::after { content: " →"; }
@media (max-width: 640px) {
  .th-tips { grid-template-columns: 1fr; }
  .th-quote { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 18px; }
  .th-quote img { width: 64px; height: 64px; }
}
/* Ignite form outcome pages (ignite-waitlist.html, ignite-not-a-fit.html): the result heading is the page's H1 */
.qa-result .qa-result-title { margin: 0; font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
.qa-result .qa-result-title .hand { display: block; letter-spacing: 0; }
/* Ignite recap video: the YouTube thumbnail (saved locally) behind the play button, shaded at the bottom for the caption */
.ig-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.ig-frame::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(10,14,20,.78) 0%, rgba(10,14,20,.2) 42%, rgba(10,14,20,.08) 100%); }
.ig-frame .ig-play, .ig-frame .ig-cap { z-index: 2; }
.ig-frame:hover .ig-poster { transform: scale(1.03); }
/* Ignite: tighter gap between the recap video and the dates below it */
.ig-video { padding-bottom: clamp(24px, 3vw, 40px); }
.ig-video + .ig-dates { padding-top: clamp(32px, 4vw, 56px); }
/* Header phone numbers: small rounded flags in one column, numbers left-aligned in the next, digits in step */
.support { display: grid; justify-items: start; gap: 3px; text-align: left; font-size: 12px; line-height: 1.3; }
.support a { display: flex; align-items: center; gap: 7px; }
.support .flag { flex: none; display: block; width: 16px; height: 11px; border-radius: 2.5px; overflow: hidden; box-shadow: 0 0 0 1px rgba(15,23,32,.14); }
.support .flag svg { display: block; width: 100%; height: 100%; }
.support .num { display: inline; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.support a:hover .flag { box-shadow: 0 0 0 1px rgba(11,116,168,.45); }
/* Homepage hero tag: three services. One line with "·" separators; on phones each item gets its own dot and wraps cleanly */
.hero-tags .sep { opacity: .55; }
@media (max-width: 560px) {
  .eyebrow.pill.hero-tags { flex-wrap: wrap; column-gap: 14px; row-gap: 4px; border-radius: 16px; padding: 7px 14px; }
  .eyebrow.pill.hero-tags::before { display: none; }
  .hero-tags .sep { display: none; }
  .hero-tags > span:not(.sep) { display: inline-flex; align-items: center; gap: 7px; }
  .hero-tags > span:not(.sep)::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-ink); flex: none; }
}
/* Cyber Security: the industry picker above the plans fits on two lines on desktop (chips stretch so both rows end flush) */
@media (min-width: 1000px) {
  .ind-pick[data-ind-mode="plans"] .ind-chips { gap: 6px; }
  .ind-pick[data-ind-mode="plans"] .ind-chip { flex: 1 1 auto; justify-content: center; padding: 9px 11px; font-size: 13.5px; min-height: 42px; }
}
@media (min-width: 1000px) and (max-width: 1239px) {
  .ind-pick[data-ind-mode="plans"] .ind-chip { padding: 8px 8px; font-size: 13px; }
}
/* ≥1240px: force exactly two rows (10 + 9 chips) with an invisible full-width break; chips stretch so both rows end flush */
@media (min-width: 1240px) {
  .ind-pick[data-ind-mode="plans"] .ind-chips { column-gap: 5px; row-gap: 3px; }
  .ind-pick[data-ind-mode="plans"] .ind-chips::after { content: ""; flex-basis: 100%; height: 0; order: 1; }
  .ind-pick[data-ind-mode="plans"] .ind-chip { padding: 9px 10px; font-size: 13px; }
  .ind-pick[data-ind-mode="plans"] .ind-chip:nth-child(n+11) { order: 2; }
}
/* Homepage hero fills the whole screen on desktop (it starts under the header, so 100% of the viewport height is exact):
   the next section ("Why businesses choose us") only appears on scroll. svh = the stable viewport height on browsers with toolbars. */
@media (min-width: 901px) {
  .home-hero { min-height: max(620px, 100vh); min-height: max(620px, 100svh); }
}
/* Full-screen photo heroes on desktop, like the homepage: the next section only appears on scroll.
   These heroes start under the header, so 100% of the viewport height is exact (svh = stable height with browser toolbars). */
@media (min-width: 901px) {
  main > .hero-photo-full:not(.hpf-col):first-child { min-height: max(540px, 100vh); min-height: max(540px, 100svh); }
}
@media (min-width: 1101px) {
  main > .ig-photo-hero:first-child { min-height: max(660px, 100vh); min-height: max(660px, 100svh); }
  /* Expand (AI Academy) sits below the header rather than under it: fill the rest of the screen and centre the three areas */
  main > .aa-hero:first-child { min-height: max(560px, calc(100vh - var(--head-h))); min-height: max(560px, calc(100svh - var(--head-h))); display: flex; flex-direction: column; justify-content: center; }
  main > .aa-hero:first-child .aa-hero-full { width: 100%; }
}
/* Cyber Security: "Looking for Managed IT?" sits between the FAQ and the closing CTA band */
.cs-mit-sec { padding-block: 0 clamp(32px, 4vw, 56px); }
.cs-mit-sec .callout-link { margin-top: 0; }
.section:has(+ .cs-mit-sec) { padding-bottom: clamp(40px, 5vw, 72px); }
/* Plan cards (Cyber Security, Managed IT): a pricing call to action in place of the price */
.price-cta { display: grid; gap: 3px; justify-items: start; margin-top: 2px; text-decoration: none; color: inherit; }
.price-cta b { display: inline-flex; align-items: center; gap: 8px; font-size: clamp(22px, 2vw, 26px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--blue-ink); }
.price-cta b span { transition: transform .2s; }
.price-cta > span { font-size: 13.5px; color: var(--muted); }
.price-cta:hover b span { transform: translateX(4px); }
.price-cta:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 6px; }
/* Column photo heroes (Microsoft 365, Copilot & AI, The Solid Way, Managed IT) size and place their photo from --mw-h,
   so the full-screen height is set there: the photo grows with the hero instead of stopping short of the bottom. */
@media (min-width: 1101px) {
  .hero-photo-full.hpf-col { --mw-h: max(700px, 100vh); }
  .hero-photo-full.is-light.hpf-col.cp-hero { --mw-h: max(760px, 100vh); }
  .hero-photo-full.is-light.hpf-col.sw-hero { --mw-h: max(810px, 100vh); }   /* keeps room for the five-step path */
  .hero-photo-full.is-dark.hpf-col.mi-hero { --mw-h: max(800px, 100vh); }
}
/* Homepage: Microsoft Solutions Partner designations, a white band between the closing CTA and the newsletter */
.ms-proof { background: #fff; padding-block: clamp(56px, 7vw, 104px); border-bottom: 1px solid var(--line); }
.ms-proof-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.ms-proof-copy { display: grid; gap: 16px; justify-items: start; }
.ms-proof-copy .h-lg { margin: 0; max-width: 17ch; text-wrap: balance; }
.ms-proof-copy .h-lg .hand { display: block; margin-top: .08em; }
.ms-proof-copy p { margin: 0; max-width: 52ch; font-size: 17px; line-height: 1.65; color: var(--muted); }
.ms-proof-copy .cta-textlink { margin-top: 6px; font-size: 16px; }
@media (max-width: 900px) {
  .ms-proof-in { grid-template-columns: 1fr; }
  .ms-proof-copy .h-lg { max-width: 20ch; }
  .ms-proof-logo { padding: 30px 22px; border-radius: 22px; }
}
/* Homepage partner section: the Microsoft Solutions Partner logo on a white card in a soft tinted panel, designations as labels */
.ms-proof-logo { display: grid; justify-items: center; align-content: center; gap: 22px; min-height: 300px;
  padding: clamp(36px, 4vw, 56px) clamp(24px, 3vw, 48px); border-radius: 28px;
  background: radial-gradient(70% 90% at 25% 15%, rgba(26,159,219,.16), transparent 70%),
              radial-gradient(60% 80% at 95% 100%, rgba(245,194,90,.18), transparent 70%), var(--paper); }
.ms-proof-mark { display: block; width: min(100%, 480px); height: auto; padding: clamp(22px, 2.6vw, 34px) clamp(26px, 3vw, 40px); box-sizing: border-box;
  background: #fff; border-radius: 18px; box-shadow: 0 22px 44px rgba(17,24,32,.11), 0 3px 8px rgba(17,24,32,.05); }
.ms-proof-areas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ms-proof-areas li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: #505050; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.ms-proof-areas li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #7fba00; flex: none; }
.ms-proof-areas li + li::before { background: #00a4ef; }
@media (max-width: 900px) {
  .ms-proof-logo { min-height: 0; padding: 28px 18px; border-radius: 22px; gap: 18px; }
  .ms-proof-mark { width: min(100%, 340px); padding: 18px 20px; }
}
/* Partner logo without a box: the logo sits on the white band, larger, with a hairline divider from the copy (desktop)
   and the designations as light outlined labels under it */
.ms-proof-logo { background: none; border-radius: 0; padding: 8px 0 8px clamp(32px, 5vw, 80px); min-height: 0; justify-items: start; gap: 26px;
  border-left: 1px solid var(--line); }
.ms-proof-mark { width: min(100%, 440px); padding: 0; background: none; border-radius: 0; box-shadow: none; }
.ms-proof-areas { justify-content: flex-start; gap: 10px; }
.ms-proof-areas li { background: #fff; color: var(--ink); border: 1px solid var(--line); padding: 8px 16px; font-size: 14px; }
@media (max-width: 900px) {
  .ms-proof-logo { border-left: 0; border-top: 1px solid var(--line); padding: 28px 0 0; gap: 20px; }
  .ms-proof-mark { width: min(100%, 320px); padding: 0; }
}
/* Sitemap: total pages and sections under the intro */
.smap-stats { list-style: none; margin: 26px auto 0; padding: 0; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.smap-stats li { display: grid; justify-items: center; gap: 2px; min-width: 150px; padding: 16px 26px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.smap-stats b { font-size: clamp(34px, 3.4vw, 46px); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--blue-ink); font-variant-numeric: tabular-nums; }
.smap-stats span { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* ==========================================================================
   The Ignite masterclass (ignite-masterclass.html): the 30-day Copilot success plan run live in one half day
   ========================================================================== */
.im-more { margin: 10px 0 0; font-size: 15.5px; }
.im-hero { padding-block: clamp(28px, 4vw, 48px) clamp(48px, 6vw, 80px); background: radial-gradient(60% 80% at 90% 0%, var(--t-ignite), transparent 65%), radial-gradient(50% 70% at 0% 100%, rgba(26,159,219,.08), transparent 70%), var(--paper); }
.im-hero-in { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: 18px; }
.im-hero-copy { display: grid; gap: 18px; justify-items: start; }
.im-title { margin: 0; line-height: 1.04; }
.im-title .hand { display: block; margin-top: .04em; }
.im-lead { margin: 0; max-width: 54ch; }
.im-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.im-facts li { display: grid; gap: 4px; padding: 18px 20px; border-radius: 20px; background: rgba(255,255,255,.8); border: 1px solid rgba(21,32,43,.08); box-shadow: 0 12px 30px rgba(17,24,32,.06); }
.im-facts b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.im-facts span { font-size: 14px; line-height: 1.45; color: var(--muted); }

.im-compress { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); align-items: center; padding: clamp(24px, 3.4vw, 44px); border-radius: 28px; background: var(--card); border: 1px solid var(--line); }
.im-compress-col { display: grid; gap: 6px; }
.im-compress-k { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.im-compress-big { margin: 0; font-size: clamp(34px, 3.6vw, 52px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: #9aa6b1; }
.im-compress-col p:not(.im-compress-big) { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); max-width: 44ch; }
.im-compress-col.is-ignite .im-compress-k { color: #8a5a00; }
.im-compress-col.is-ignite .im-compress-big { color: var(--ink); }
.im-compress-col.is-ignite p:not(.im-compress-big) { color: var(--ink); }
.im-compress-arrow { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; font-weight: 800; color: var(--night); background: var(--ig-gold); box-shadow: 0 0 0 10px rgba(245,194,90,.2); }

.im-agenda { list-style: none; margin: clamp(8px, 2vw, 20px) 0 0; padding: 0; display: grid; gap: 0; position: relative; }
.im-agenda::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; background: linear-gradient(180deg, var(--ig-gold), rgba(245,194,90,.25)); }
.im-step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: clamp(16px, 2.4vw, 28px); padding-block: 14px; }
.im-num { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 800; color: var(--night); background: #fff; border: 2px solid var(--ig-gold); box-shadow: 0 8px 20px rgba(17,24,32,.08); }
.im-step-open .im-num, .im-step-close .im-num { background: var(--ig-gold); }
.im-step-body { display: grid; gap: 10px; padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 32px); border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.im-step-close .im-step-body { border-color: rgba(245,194,90,.6); box-shadow: 0 18px 40px rgba(245,194,90,.14); }
.im-k { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8a5a00; }
.im-step h3 { margin: 0; font-size: clamp(21px, 2vw, 26px); font-weight: 800; letter-spacing: -.02em; }
.im-step p { margin: 0; font-size: 16px; line-height: 1.65; color: #45505a; max-width: 70ch; }
.im-example, .im-takeaway { padding: 12px 16px; border-radius: 14px; background: var(--t-ignite); color: var(--ink) !important; }
.im-example b, .im-takeaway b { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8a5a00; }
.im-takeaway { background: rgba(26,159,219,.08); }
.im-takeaway b { color: var(--blue-ink); }

.im-home { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.im-home h2 { margin-top: 14px; }
.im-home-lead { margin-top: 18px; color: var(--on-night-muted); font-size: 17px; line-height: 1.65; max-width: 44ch; }
.im-home-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.im-home-list li { display: grid; gap: 6px; padding: 18px 20px; border-radius: 18px; background: var(--night-2); border: 1px solid var(--night-line); color: var(--on-night-muted); font-size: 14.5px; line-height: 1.55; }
.im-home-list b { color: #fff; font-size: 16px; }
.im-home-list b::before { content: "✓"; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; font-size: 12px; color: var(--night); background: var(--ig-gold); vertical-align: 1px; }

@media (max-width: 900px) {
  .im-hero-in, .im-home { grid-template-columns: 1fr; }
  .im-compress { grid-template-columns: 1fr; text-align: left; }
  .im-compress-arrow { transform: rotate(90deg); justify-self: start; }
}
@media (max-width: 560px) {
  .im-facts, .im-home-list { grid-template-columns: 1fr; }
  .im-agenda::before { left: 21px; }
  .im-step { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .im-num { width: 44px; height: 44px; font-size: 17px; }
}

/* ==========================================================================
   Masterclass two (ignite-front-door.html): Copilot as the front door. Reuses the .im-* layout; .fd-* adds the parts it needs
   ========================================================================== */
.fd .im-compress-big { font-size: clamp(30px, 3vw, 44px); }
.fd-note { margin: 18px 0 0; max-width: 72ch; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.fd .im-step p:not(.im-example):not(.im-takeaway) b { color: var(--ink); }
.fd-flow { list-style: none; margin: 4px 0 2px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; counter-reset: fd; }
.fd-flow li { counter-increment: fd; display: grid; gap: 3px; align-content: start; padding: 12px 14px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.fd-flow li::before { content: counter(fd); display: grid; place-items: center; width: 24px; height: 24px; margin-bottom: 4px; border-radius: 50%; font-size: 12.5px; font-weight: 800; color: var(--night); background: var(--ig-gold); }
.fd-flow b { font-size: 14.5px; font-weight: 800; color: var(--ink); }

.fd-ssc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fd-ssc-col { display: grid; gap: 14px; align-content: start; padding: clamp(22px, 2.6vw, 30px); border-radius: 24px; background: var(--card); border: 1px solid var(--line); }
.fd-ssc-k { justify-self: start; padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.fd-ssc-col.is-start .fd-ssc-k { color: var(--night); background: var(--ig-gold); }
.fd-ssc-col.is-stop .fd-ssc-k { color: #9b2c2c; background: #fde8e6; }
.fd-ssc-col.is-continue .fd-ssc-k { color: var(--blue-ink); background: rgba(26,159,219,.1); }
.fd-ssc-col.is-start { border-color: rgba(245,194,90,.6); box-shadow: 0 18px 40px rgba(245,194,90,.14); }
.fd-ssc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fd-ssc li { display: grid; gap: 3px; font-size: 15px; line-height: 1.55; color: #45505a; }
.fd-ssc li b { font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }

.fd-trust { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fd-trust li { display: grid; gap: 8px; align-content: start; padding: clamp(20px, 2.4vw, 28px); border-radius: 22px; background: var(--t-ignite); font-size: 15px; line-height: 1.6; color: #45505a; }
.fd-trust b { font-size: 18px; font-weight: 800; letter-spacing: -.015em; line-height: 1.3; color: var(--ink); }

@media (max-width: 1100px) {
  .fd-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .fd-ssc, .fd-trust { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .fd-flow { grid-template-columns: 1fr; gap: 6px; }
  .fd-flow li { grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; padding: 10px 14px; }
  .fd-flow li::before { grid-row: span 2; margin: 0; align-self: center; }
}

/* ==========================================================================
   IT Support (it-services/it-support/): migrated ranking page. Reuses the photo hero, the Review accordion (.sr-acc) and the AI Academy form band (.aa-cta)
   ========================================================================== */
.sol-more { display: inline-block; margin-top: 14px; font-size: 14.5px; font-weight: 700; color: var(--blue-ink); text-decoration: none; border-bottom: 1px solid rgba(11,116,168,.35); }
.sol-more:hover { border-bottom-color: currentColor; }
.sol-grid .card h3 .plan-link { text-decoration: none; }
.sol-grid .card h3 .plan-link:hover { text-decoration: underline; }

.its-hero .hpf-img { object-position: 78% 30%; }
@media (min-width: 901px) {
  .its-hero::before { background: linear-gradient(90deg, var(--hpf-navy) 0%, rgba(6,16,31,.92) 26%, rgba(6,16,31,.5) 40%, rgba(6,16,31,0) 52%), linear-gradient(0deg, var(--night) 0%, rgba(17,24,32,0) 22%); }
}
.its-hero .hpf-copy { gap: 18px; }
.its-title { margin: 0; }
.its-sub { margin: -4px 0 0; font-family: var(--f-hand); font-size: clamp(28px, 2.6vw, 38px); font-weight: 700; line-height: 1.1; color: #8fd6f7; }
.its-hero .lead a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); text-underline-offset: 3px; }

.its-what { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.its-what-copy h1 { margin: 14px 0 18px; }
.its-what-photo { border-radius: 28px; overflow: hidden; aspect-ratio: 1; box-shadow: 0 30px 60px rgba(17,24,32,.14); }
.its-what-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.its-ticks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.its-ticks li { position: relative; padding: 12px 16px 12px 46px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font-size: 15.5px; line-height: 1.5; }
.its-ticks li::before { content: "✓"; position: absolute; left: 14px; top: 12px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--blue); }

.its-lead { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 72px); align-items: start; padding: clamp(28px, 4vw, 52px); border-radius: 28px; background: var(--blue-wash); }
.its-lead h2 { margin: 0; }
.its-lead .body-copy:last-child { margin-bottom: 0; }

.its-ben-head { display: grid; gap: 14px; max-width: 80ch; margin-bottom: clamp(28px, 4vw, 44px); }
.its-ben-head h2 { margin: 0; }
.its-ben-head p { margin: 0; color: var(--on-night-muted); font-size: 16.5px; line-height: 1.7; }
.its-ben { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.its-ben li { display: grid; gap: 10px; align-content: start; padding: 22px 20px; border-radius: 20px; background: var(--night-2); border: 1px solid var(--night-line); }
.its-ben h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.015em; color: #fff; }
.its-ben p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--on-night-muted); }
.its-ben-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #8fd6f7; background: rgba(26,159,219,.16); }
.its-ben-ico svg { width: 22px; height: 22px; }

.its-get { display: grid; gap: 10px; justify-items: start; margin-top: 12px; padding: 22px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.its-get h3 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.015em; }
.its-get p { margin: 0; }
.its-get .cta-row { margin-top: 4px; }
.sr-acc details[id] { scroll-margin-top: calc(var(--head-h) + 20px); }
.sr-acc details p a { color: var(--blue-ink); }

.its-why { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 72px); align-items: start; margin-bottom: clamp(24px, 3vw, 36px); }
.its-why h2 { margin: 0; }
.its-gallery { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.its-gallery img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 20px; display: block; grid-column: span 2; }
.its-gallery img:nth-child(4), .its-gallery img:nth-child(5) { grid-column: span 3; aspect-ratio: 16 / 9; }

.its-form-sec { scroll-margin-top: var(--head-h); }
.its-form-sec .aa-cta-in { align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.its-form-sec .aa-cta-copy, .its-form-sec .form { grid-area: auto; }
.its-form-sec .h-lg { margin: 0 0 22px; }
.its-about-h { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .16em; color: #d9f1fc; }
.its-form-sec .aa-cta-copy p { margin: 0 0 14px; font-size: 16px; line-height: 1.7; }
.its-optin { display: flex !important; align-items: flex-start; gap: 10px; font-weight: 500 !important; color: var(--muted); }
.its-optin input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--blue); }

.its-faq { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.its-faq-head { display: grid; gap: 12px; position: sticky; top: calc(var(--head-h) + 24px); }
.its-faq-head h3 { margin: 0; }

@media (max-width: 1100px) {
  .its-ben { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .its-what, .its-lead, .its-why, .its-faq, .its-form-sec .aa-cta-in { grid-template-columns: 1fr; }
  .its-what-photo { max-width: 520px; }
  .its-faq-head { position: static; }
  .its-ben { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .its-ben { grid-template-columns: 1fr; }
  .its-gallery { grid-template-columns: 1fr 1fr; }
  .its-gallery img, .its-gallery img:nth-child(4), .its-gallery img:nth-child(5) { grid-column: span 1; aspect-ratio: 1; }
  .its-gallery img:first-child { grid-column: span 2; aspect-ratio: 3 / 2; }
}

/* ==========================================================================
   Guide: a business manager's day with Copilot (resource-copilot-business-manager.html). Reuses the Quick Win timeline (.qw-moves) and prompt cards (.rp-prompt)
   ========================================================================== */
.dl-clock { width: min(100%, 340px); display: grid; gap: 14px; padding: 26px 26px 22px; border-radius: 26px; background: var(--night); color: var(--on-night); box-shadow: 0 30px 60px rgba(17,24,32,.22); transform: rotate(-2deg); }
.dl-clock-k { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #8fd6f7; }
.dl-clock ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dl-clock li { display: grid; grid-template-columns: 62px 1fr; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--night-line); font-size: 15px; color: #dbe5ee; }
.dl-clock li b { font-size: 17px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.dl-clock-foot { margin-top: 4px; font-size: 14px; color: var(--on-night-muted); }
.dl-clock-foot b { color: #f5c25a; font-size: 18px; margin-right: 4px; }

.dl-fill { color: var(--blue-ink); background: var(--blue-wash); border-radius: 6px; padding: 0 4px; font-weight: 600; }
.rp-prompt .dl-fill { color: #f5c25a; background: rgba(245,194,90,.14); }
.dl-time b { font-size: 40px; -webkit-text-stroke: 1.6px var(--blue-ink); font-variant-numeric: tabular-nums; }
.dl .rp-prompt-top span, .dl .qw-move-n small { font-size: 12px; }
.dl-why { margin: 0; font-size: 16px; line-height: 1.65; color: #45505a; max-width: 72ch; }

.dl-sum { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding: clamp(26px, 4vw, 48px); border-radius: 28px; background: var(--blue-wash); }
.dl-sum-big { display: grid; gap: 6px; }
.dl-sum-big b { font-size: clamp(64px, 8vw, 104px); font-weight: 800; letter-spacing: -.05em; line-height: .9; color: var(--blue-ink); }
.dl-sum-big span { font-size: 19px; font-weight: 700; line-height: 1.35; max-width: 18ch; }
.dl-sum-big small { font-size: 13px; color: var(--muted); }
.dl-sum-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.dl-sum-list li { display: grid; gap: 4px; padding: 16px 20px; border-radius: 18px; background: rgba(255,255,255,.75); font-size: 15px; line-height: 1.55; color: #45505a; }
.dl-sum-list b { font-size: 16.5px; color: var(--ink); }

.dl-tips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: tip; }
.dl-tips li { counter-increment: tip; display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); font-size: 15px; line-height: 1.6; color: #45505a; }
.dl-tips li::before { content: counter(tip); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 14px; font-weight: 800; color: #fff; background: var(--blue); }
.dl-tips b { font-size: 18px; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }

@media (max-width: 900px) {
  .dl-sum, .dl-tips { grid-template-columns: 1fr; }
  .dl-clock { transform: none; }
}
@media (max-width: 560px) {
  .dl-time b { font-size: 32px; }
}
.dl-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.dl-open { text-decoration: none; display: inline-flex; align-items: center; gap: 4px; background: var(--blue); border-color: var(--blue); }
.dl-open:hover { background: #1590c9; }
.dl-open:focus-visible { outline: 2px solid #8fd6f7; outline-offset: 2px; }
@media (max-width: 560px) {
  .dl .rp-prompt-top { flex-wrap: wrap; row-gap: 10px; }
  .dl .dl-acts { flex-wrap: nowrap; }
}
.dl-note { margin: 18px 0 0; max-width: 80ch; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.dl-roles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dl-roles a { display: grid; gap: 6px; padding: 24px 26px; border-radius: 22px; background: var(--t-ignite); color: var(--ink); text-decoration: none; border: 1px solid transparent; transition: border-color .2s, transform .2s; }
.dl-roles a:hover { border-color: rgba(201,138,18,.5); transform: translateY(-2px); }
.dl-roles span { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8a5a00; }
.dl-roles b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.dl-roles small { font-size: 15px; color: #45505a; }
.dl-roles i { margin-top: 6px; font-style: normal; font-size: 14.5px; font-weight: 700; color: var(--blue-ink); }
@media (max-width: 900px) { .dl-roles { grid-template-columns: 1fr; } }

/* Day-in-the-life guides: a vertical timeline (line + time markers + cards), in the style of the masterclass agenda */
.dl-day { position: relative; gap: 0; }
.dl-day::before { content: ""; position: absolute; left: 47px; top: 30px; bottom: 30px; width: 2px; background: linear-gradient(180deg, var(--blue), rgba(26,159,219,.18)); }
.dl-day .qw-move { grid-template-columns: 96px minmax(0, 1fr); gap: clamp(16px, 2.4vw, 32px); padding: 14px 0; background: none; border: 0; border-radius: 0; }
.dl-day .dl-time { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; gap: 8px; padding-top: 18px; }
.dl-day .dl-time b { order: -1; width: 96px; padding: 11px 0; border-radius: 999px; text-align: center; font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 1; color: #fff; -webkit-text-stroke: 0; background: var(--blue-ink); box-shadow: 0 0 0 6px var(--paper), 0 10px 24px rgba(11,116,168,.25); }
.dl-day .dl-time small { max-width: 96px; padding: 3px 6px; border-radius: 8px; background: var(--paper); text-align: center; line-height: 1.3; letter-spacing: .1em; }
.dl-day .qw-move-body { position: relative; z-index: 1; padding: clamp(20px, 2.6vw, 30px); border-radius: 24px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(17,24,32,.05); }
.dl-day .qw-move:first-child .dl-time b { background: var(--blue); }
@media (max-width: 560px) {
  .dl-day::before { left: 31px; top: 24px; bottom: 24px; }
  .dl-day .qw-move { grid-template-columns: 1fr; gap: 10px; padding: 10px 0 14px; }
  .dl-day .dl-time { grid-auto-flow: column; justify-content: start; align-items: center; justify-items: start; gap: 12px; padding-top: 0; }
  .dl-day .dl-time b { width: 64px; padding: 9px 0; font-size: 15px; }
  .dl-day .dl-time small { max-width: none; padding: 3px 8px; letter-spacing: .1em; }
  .dl-day .qw-move-body { padding: 18px 16px; }
}
.ms-proof-areas li:nth-child(3)::before { background: #ffb900; }

/* ==========================================================================
   Ignite Johannesburg agenda (ignite-jhb-agenda.html): event-day page, Ignite gold
   ========================================================================== */
.ag-hero { padding-block: clamp(28px, 4vw, 48px) clamp(48px, 6vw, 80px); background: radial-gradient(60% 80% at 90% 0%, var(--t-ignite), transparent 65%), radial-gradient(50% 70% at 0% 100%, rgba(26,159,219,.08), transparent 70%), var(--paper); }
.ag-hero-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; margin-top: 18px; }
.ag-hero-copy { display: grid; gap: 18px; justify-items: start; }
.ag-title { margin: 0; line-height: 1.04; }
.ag-title .hand { display: block; margin-top: .04em; }
.ag-hero-copy .lead { margin: 0; max-width: 54ch; }
.ag-facts { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, auto); gap: 10px; }
.ag-facts li { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 12px 16px; border-radius: 16px; background: rgba(255,255,255,.85); border: 1px solid rgba(21,32,43,.08); font-size: 15px; font-weight: 700; }
.ag-facts li > span { grid-row: span 2; font-size: 20px; }
.ag-facts b { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ag-facts a { color: var(--blue-ink); text-decoration: none; }
.ag-facts a:hover { text-decoration: underline; }

.ag-side { display: grid; gap: 12px; }
.ag-count { display: grid; gap: 2px; padding: 22px 24px; border-radius: 22px; background: var(--night); color: #fff; box-shadow: 0 24px 50px rgba(17,24,32,.18); }
.ag-count b { font-size: clamp(44px, 5vw, 64px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: #f5c25a; }
.ag-count span { font-size: 18px; font-weight: 700; }
.ag-count small { font-size: 14px; color: var(--on-night-muted); }
.ag-moments { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ag-moments li { display: grid; gap: 2px; padding: 14px 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); font-size: 14.5px; line-height: 1.5; color: #45505a; }
.ag-moments span { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8a5a00; }
.ag-moments b { color: var(--ink); font-size: 16px; }

.ag-stats { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ag-stats li { display: grid; justify-items: center; gap: 2px; padding: 18px; border-radius: 18px; background: rgba(255,255,255,.7); border: 1px solid var(--line); font-size: 14px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.ag-stats b { font-size: clamp(34px, 3.6vw, 48px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--ink); text-transform: none; }

.ag-list { list-style: none; margin: clamp(8px, 2vw, 20px) 0 0; padding: 0; display: grid; position: relative; }
.ag-list::before { content: ""; position: absolute; left: 47px; top: 30px; bottom: 30px; width: 2px; background: linear-gradient(180deg, var(--ig-gold), rgba(245,194,90,.25)); }
.ag-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: clamp(16px, 2.4vw, 32px); padding: 10px 0; }
.ag-time { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; gap: 6px; padding-top: 16px; }
.ag-time b { width: 96px; padding: 11px 0; border-radius: 999px; text-align: center; font-size: 19px; font-weight: 800; color: var(--night); background: #fff; border: 2px solid var(--ig-gold); box-shadow: 0 0 0 6px var(--paper); font-variant-numeric: tabular-nums; }
.ag-time span { padding: 2px 8px; border-radius: 8px; background: var(--paper); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: center; }
.ag-card { position: relative; z-index: 1; display: grid; gap: 8px; padding: clamp(18px, 2.4vw, 26px) clamp(20px, 2.6vw, 30px); border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.ag-card h3 { margin: 0; font-size: clamp(20px, 2vw, 25px); font-weight: 800; letter-spacing: -.02em; }
.ag-card p { margin: 0; font-size: 16px; line-height: 1.6; color: #45505a; }
.ag-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ag-tag { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8a5a00; background: var(--t-ignite); }
.ag-len { font-size: 13px; font-weight: 700; color: var(--muted); }
.ag-n { margin-left: auto; font-size: 22px; font-weight: 800; color: var(--ig-gold); }
.ag-now { display: none; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: #c53030; }
.ag-who { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink) !important; }
.ag-who img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(17,24,32,.15); }
.ag-who img + img { margin-left: -18px; }
.ag-item.is-break .ag-card { background: #fafbfc; border-style: dashed; }
.ag-item.is-break .ag-time b { border-color: #c7ced5; color: var(--muted); }
.ag-item.is-star .ag-card { border-color: rgba(245,194,90,.6); box-shadow: 0 18px 40px rgba(245,194,90,.16); }
.ag-item.is-star .ag-time b { background: var(--ig-gold); }
.ag-item.is-live .ag-now { display: inline-block; }
.ag-item.is-live .ag-card { border-color: #c53030; box-shadow: 0 18px 40px rgba(197,48,48,.16); }
.ag-item.is-live .ag-time b { background: #c53030; border-color: #c53030; color: #fff; }
.ag-item.is-done { opacity: .55; }

.ag-layers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ag-layers li { display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: 20px; background: var(--night-2); border: 1px solid var(--night-line); }
.ag-layers span { font-size: 14px; font-weight: 800; color: #f5c25a; }
.ag-layers h3 { margin: 0; font-size: 20px; color: #fff; }
.ag-layers p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--on-night-muted); }
.ag-journey { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ag-journey a { display: grid; gap: 2px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--night-line); color: var(--on-night-muted); font-size: 14px; text-decoration: none; transition: border-color .2s; }
.ag-journey a:hover { border-color: #8fd6f7; }
.ag-journey span { font-size: 12px; font-weight: 800; letter-spacing: .12em; color: #8fd6f7; }
.ag-journey b { font-size: 18px; color: #fff; }

.ag-details { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 14px; }
.ag-box { padding: clamp(22px, 3vw, 32px); border-radius: 24px; background: var(--card); border: 1px solid var(--line); }
.ag-box h3 { margin: 0 0 14px; font-size: 20px; font-weight: 800; }
.ag-box dl { margin: 0; display: grid; gap: 14px; }
.ag-box dl div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ag-box dl div:last-child { border-bottom: 0; padding-bottom: 0; }
.ag-box dt { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.ag-box dd { margin: 0; display: grid; gap: 2px; font-size: 16px; font-weight: 700; }
.ag-box dd small { font-size: 14px; font-weight: 500; color: var(--muted); }
.ag-box dd a { color: var(--blue-ink); }
.ag-contact ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ag-contact li { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 8px; }
.ag-contact li > span { font-size: 18px; text-align: center; }
.ag-contact a { display: grid; gap: 1px; padding: 8px 12px; border-radius: 12px; color: var(--muted); font-size: 14.5px; text-decoration: none; overflow-wrap: anywhere; }
.ag-contact a:hover { background: var(--blue-wash); }
.ag-contact a b { color: var(--ink); font-size: 15.5px; }

.ag-spk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ag-spk article { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: center; padding: 22px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); }
.ag-spk img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
.ag-spk h3 { margin: 0; font-size: 22px; font-weight: 800; }
.ag-role { display: block; margin: 2px 0 10px; font-size: 14px; font-weight: 700; color: #8a5a00; }
.ag-spk ul { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ag-spk li { padding: 4px 10px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-size: 13px; font-weight: 600; }

@media (max-width: 900px) {
  .ag-hero-in, .ag-details, .ag-spk, .ag-layers { grid-template-columns: 1fr; }
  .ag-facts { grid-template-columns: 1fr; }
  .ag-journey { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .ag-stats { grid-template-columns: 1fr 1fr; }
  .ag-list::before { left: 31px; top: 24px; bottom: 24px; }
  .ag-item { grid-template-columns: 1fr; gap: 10px; }
  .ag-time { grid-auto-flow: column; justify-content: start; align-items: center; gap: 12px; padding-top: 0; }
  .ag-time b { width: 64px; padding: 9px 0; font-size: 15px; }
  .ag-spk article { grid-template-columns: 80px minmax(0, 1fr); gap: 14px; padding: 18px; }
  .ag-spk img { width: 80px; height: 80px; }
  .ag-box dl div { grid-template-columns: 1fr; gap: 4px; }
}
.ig-agenda-link { justify-self: start; margin-top: 4px; font-size: 14.5px; font-weight: 600; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.ig-agenda-link:hover { color: var(--blue-ink); }
.dl-apps { order: -1; display: flex; gap: 5px; justify-content: center; }
.dl-apps img { width: 30px; height: 30px; display: block; border-radius: 8px; background: var(--paper); box-shadow: 0 0 0 3px var(--paper); }
@media (max-width: 560px) { .dl-apps { justify-content: start; } }