/* Solid Systems prototype — Ravelin-style structure: sticky bar, centred service heroes,
   alternating paper / night bands, rounded pill buttons. Single light look by choice. */
/* Fonts: self-hosted Inter and Caveat (latin + latin-ext, variable), copied from Google Fonts so pages don't wait on a second
   site before showing text. Same faces and weights as the Google stylesheet the pages used before. If a font file ever
   changes, give it a new file name (nginx caches fonts for a year). */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(fonts/caveat-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(fonts/caveat-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
: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;
  /* Vertical rhythm. --sec-y: a section's top and bottom padding, and so the gap between two sections (96px on desktop,
     56px on phones). --sec-y-sm: strips that continue the section above them, such as the topic cards under a hero. */
  --sec-y: clamp(56px, 7vw, 96px);
  --sec-y-sm: clamp(40px, 5vw, 64px);
  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: var(--sec-y); }
/* Plain sections share the page background, so where two meet (or a light hero meets a section) the gap is one --sec-y,
   not two. Sections with their own background (the bands listed in :not) keep their padding, so content never touches
   an edge. These rules carry a single class's weight, so a section with its own spacing rule further down still wins. */
:where(.section:not(.night, .aa-tint, .cr-perks-sec, .cs-solution, .v2-plan, .ig-dates, .sr-book-sec)) + .section:where(:not(.night, .aa-tint, .cr-perks-sec, .cs-solution, .v2-plan, .ig-dates, .sr-book-sec)),
:where(.hero-c, .rs-hero, .cs-hero:not(.hero-photo-full), .rp-hero, .sr-hero, .cr-hero, .aat-hero) + .section:where(:not(.night, .aa-tint, .cr-perks-sec, .cs-solution, .v2-plan, .ig-dates, .sr-book-sec)) { padding-top: 0; }
.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); }
/* Phones: a tap-to-call button beside Menu (South Africa), and both office numbers at the foot of the open menu */
.head-call { display: none; }
.menu-phones { display: none; }
.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 .req { color: var(--blue-ink); }   /* required-field asterisk (the input itself carries "required" for screen readers) */
.form-done { background: var(--blue-wash); border-radius: var(--radius-sm); padding: 16px 18px; font-size: 15px; }
/* Contact page (get-in-touch/): the form straight under the hero, a trust panel beside it, then the offices as one strip
   (Mike, 28 Oct 2026). Stacks at 900px with the other contact grids, so on phones the form comes first. */
.hero-c.ct-hero { padding-bottom: clamp(32px, 5vw, 56px); }
.hero-c .ct-talk { margin: 0; font-size: 16px; text-wrap: balance; }
.contact-grid.ct-grid { grid-template-columns: 1.25fr 1fr; }
.ct-trust-h { margin: 12px 0 16px; }
.ct-trust-lead { margin: 0 0 24px; }
.ct-trust-card { display: grid; gap: 0; padding: 26px 28px 8px; }
.ct-trust-card .g-reviews { margin: 0 0 20px; padding-top: 0; border-top: 0; }
.ct-trust-card .detail { padding: 14px 0; }
.ct-trust-card .detail:last-child { border-bottom: 0; }
.ct-trust-card .detail p a { color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.ct-trust-card .detail p a:hover { color: var(--blue-ink); text-decoration: underline; }
/* Get in touch: the three offices’ Google ratings stacked (the home page’s review rows), the reply time under them */
.ct-reviews { display: grid; gap: 12px; }
.ct-reply { margin: 18px 0 0; font-size: 15px; color: var(--muted); }
.ct-reply b { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ct-offices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--card); border: 1px solid var(--line); border-radius: 22px; }
.ct-office { display: grid; gap: 8px; align-content: start; padding: 26px 28px; }
.ct-office + .ct-office { border-left: 1px solid var(--line); }
.ct-country { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-ink); }
.ct-office h3 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.ct-tel { font-size: 18px; font-weight: 800; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.ct-tel:hover { color: var(--blue-ink); text-decoration: underline; }
.ct-office address { font-style: normal; font-size: 15px; line-height: 1.55; color: var(--muted); }
.ct-office .dir { justify-self: start; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--blue-ink); text-decoration: none; }
.ct-office .dir:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .contact-grid.ct-grid { grid-template-columns: 1fr; }
  .ct-offices { grid-template-columns: 1fr; }
  .ct-office + .ct-office { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- 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; }
/* The footer shares the page background, so after a plain last section the gap to the Superhuman Brief is that section's
   own --sec-y, not --sec-y plus the footer's top padding (it was 204px at desktop; Mike, 3 Nov 2026). After a band with
   its own background the footer keeps its padding. */
main:has(> .section:last-child:where(:not(.night, .aa-tint, .cr-perks-sec, .cs-solution, .v2-plan, .ig-dates, .sr-book-sec))) ~ .site-foot,
main:has(> .section:last-child:where(:not(.night, .aa-tint, .cr-perks-sec, .cs-solution, .v2-plan, .ig-dates, .sr-book-sec))) ~ #site-footer .site-foot { padding-top: 0; }   /* site.js lifts the footer out of #site-footer */
.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) {
  .head-call { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--blue-ink); box-shadow: 0 10px 30px rgba(17,24,32,.10); }
  .head-call + .burger { margin-left: 8px; }
  .burger { min-height: 44px; }
  .menu.open .menu-phones { display: grid; gap: 10px; padding: 14px 4px 4px; margin-top: 6px; border-top: 1px solid var(--line); font-size: 15px; }
  .menu-phones a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 600; }
  .menu-phones .flag { width: 22px; height: 15px; border-radius: 3px; overflow: hidden; display: inline-block; }
  .menu-phones .flag svg { width: 100%; height: 100%; display: block; }
  .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: 12px; 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 */

/* 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; }
/* One wide team photo, with a soft Solid-blue panel offset behind it */
.aa-photo { position: relative; margin: 0 18px 18px 0; }
.aa-photo::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border-radius: 24px; background: linear-gradient(135deg, var(--blue-wash), #cfe9f8); z-index: 0; }
.aa-photo img { position: relative; z-index: 1; display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 24px; box-shadow: 0 24px 48px rgba(17,24,32,.14); }

/* 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 */
/* Inside the Academy (ai-academy.html): the heading, the intro video large in the middle, the four parts of the Academy
   as numbered cards below (Mike, 3 Nov 2026: the video replaces the tabbed phone mock-up) */
.aa-inside-head { text-align: center; margin-inline: auto; }
.aa-feats { list-style: none; counter-reset: aaf; margin: clamp(32px, 4vw, 48px) auto 0; padding: 0; max-width: 1040px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.aa-feats li { counter-increment: aaf; display: grid; align-content: start; gap: 6px; padding: 22px 22px 24px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid var(--night-line); }
.aa-feats li::before { content: "0" counter(aaf); font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--blue); margin-bottom: 6px; }
.aa-feats b { font-size: 17px; line-height: 1.3; color: #fff; }
.aa-feats span { font-size: 14.5px; line-height: 1.55; color: var(--on-night-muted); }
@media (max-width: 1000px) { .aa-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .aa-feats { grid-template-columns: 1fr; } .aa-video-label { display: none; } }   /* on a phone the label would sit on the poster title; the play button says it */
.aa-video { background: var(--night); color: var(--on-night); padding-block: clamp(56px, 8vw, 96px); }
.aa-video .wrap { display: block; }
/* The video alone in the band: no shadow or hard edge; the poster's edges fade into the night background */
.aa-video-frame { position: relative; display: block; width: 100%; max-width: 960px; margin-inline: auto; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 9; }
.aa-video-frame img { width: 100%; height: 100%; object-fit: cover; }
button.aa-video-frame { padding: 0; border: 0; background: var(--night); cursor: pointer; font: inherit; }
button.aa-video-frame img { display: block; transition: filter .2s;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); mask-composite: intersect, add; }
button.aa-video-frame:hover img, button.aa-video-frame:focus-visible img { filter: brightness(.85); }
button.aa-video-frame:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.aa-video-frame.is-playing { background: #000; }
.aa-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.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-collage-row, .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(220px, 58vw, 520px); object-position: 65% 40%;   /* was 78vw: on a 375px phone the main button sat at the very bottom of the first screen */
    -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(220px, 58vw, 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; } }
/* Phones: the photo sits above the copy, so the copy needs no header-height top padding (the desktop rule above was
   overriding the mobile one and leaving a ~100px blank gap under the photo) */
@media (max-width: 900px) { .hh-in { padding-block: 0 48px; } }

/* ---------- 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); }
@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. */
/* The head is a full section head (Mike, 28 Oct 2026: the label read too small): the hand-lettered line leads at well over the
   cards' 22px "Step one ~" labels, tilted a touch like a margin note, and the H2 takes the site's section-heading scale (.h-lg). */
.jn { display: grid; gap: 32px; }
.jn-head { display: grid; justify-items: center; gap: 6px; text-align: center; }
.jn-head .scribble { font-size: clamp(32px, 3.4vw, 44px); line-height: 1.05; transform: rotate(-2deg); }
.jn-head h2 { margin: 0; font-size: clamp(30px, 4.2vw, 48px); line-height: 1.08; font-weight: 800; letter-spacing: -.025em; text-wrap: balance; }
.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: clamp(28px, 3.5vw, 44px); 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-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 p.lf-consent { margin: 0; }   /* the Brief notice (no tickbox since 28 Oct 2026) */
.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 { display: grid; grid-template-columns: 1fr 1.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; container-type: inline-size; }
.fb-form[hidden] { display: none; }   /* once signed up, the confirmation line replaces the form */
.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-form > * { min-width: 0; }   /* the row fits its column instead of growing to the inputs’ natural width */
.fb-row #fbName { flex-grow: .7; }
.fb-row input + input { border-left: 1px solid #dbe8f0; }   /* first name | email, one pill */
.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-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; } }
/* First name, email and the button share one pill while there is room for all three (about 460px); in a narrower column
   (phones, and the two-column footer on small laptops) they stack in a rounded box */
@container (max-width: 459px) {
  .fb-row { flex-direction: column; border-radius: 18px; padding: 8px; }
  .fb-row input { padding: 10px 8px; }
  .fb-row input + input { border-left: 0; border-top: 1px solid #dbe8f0; }
  .fb-row .btn { justify-content: center; }
}

/* 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,
.wrap > .cta-block, .text-link-on-night + .cta-block { margin-top: clamp(24px, 3vw, 36px); }
/* Hero buttons + their reassurance line (tools/build-ctas.js): one block, so a hero column's grid gap spaces the block
   from the lead without also widening the 12px between the buttons and the line */
.cta-block { min-width: 0; }
.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; font-size: 13.5px; line-height: 1.5; max-width: none; }
.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-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 { margin: 0; font-size: 13.5px; line-height: 1.5; color: #3d4954; text-align: left; }   /* every download also joins The Superhuman Brief: said plainly, no tickbox */
.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; }
/* The form in the hero (Mike, 28 Oct 2026: the form at the top): a white card under the intro line, name and email side
   by side and the button across the card, so the request is on the first screen; on phones it comes before the cover */
.rs-get.rs-get-hero { width: 100%; padding: clamp(20px, 2.4vw, 28px); text-align: left; background: #fff; border-radius: 24px; box-shadow: 0 24px 48px -28px rgba(8,16,24,.25); scroll-margin-top: 110px; }
.rs-get-hero .rs-get-form { max-width: none; margin: 0; gap: 14px; justify-items: stretch; }
.rs-get-hero .rs-get-form h2 { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.35; max-width: none; text-wrap: pretty; }
.rs-intro:has(.rs-get-hero) { grid-template-columns: minmax(0, 1fr); }   /* the card fits the text column, never stretches it under the cover */
.rs-get-hero .rs-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 2px; }
.rs-get-hero .rs-fields input { min-width: 0; width: 100%; }
.rs-get-hero .rs-fields .btn { grid-column: 1 / -1; justify-content: center; }
.rs-get-hero .lf-done { max-width: none; margin: 0; }
.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" "intro" "cover"; }   /* the form before the cover */
  .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-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; }
/* "Your AI Adoption Plan" banner under the Copilot hero buttons: the frosted pill of .hpf-steps, one link to #journey */
.hpf-plan { display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; padding: 6px 20px 6px 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); font-size: 15px; font-weight: 700; color: var(--ink); text-decoration: none; transition: background .2s, transform .2s, box-shadow .2s; }
.hpf-plan .ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--t-ignite); color: var(--ink); border: 1px solid rgba(21,32,43,.08); }
.hpf-plan .arr { color: var(--blue); transition: transform .2s; }
.hpf-plan:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(17,24,32,.10); }
.hpf-plan:hover .arr { transform: translateX(3px); }
.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: a close-up on the right edge, a soft blurred office on the left (Mike, 3 Nov 2026). The photo fills the
   hero edge to edge, pinned right so her face never crops; the copy sits in the page column over the blur and the fade,
   whose colour (--hpf-cream) is sampled from the blur. */
.hero-photo-full.cp-hero { --hc-mpos: 100% 40%; --hpf-cream: 240, 235, 228; --hc-bg: rgb(240, 235, 228); }
.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% 38%; }
}
/* 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 uses the standard section rhythm */
.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-bottom: var(--sec-y); }   /* top: the section rhythm (collapses after a plain section) */
.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, .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-options.qa-one { grid-template-columns: minmax(0, 360px); }   /* a single choice (the Ignite future cohort list) */
.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; }
/* The Superhuman Brief sign-up confirmation (site.js) uses the same dialog, with the footer's green tick above the label */
.fb-confirm .fb-tick { display: block; margin-bottom: 16px; }
.fb-confirm p b { color: var(--ink); overflow-wrap: anywhere; }
.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); }
/* "Follow the white rabbit": a QR card between the timeline and the summary (Business Leader guide). The artwork is
   black on white, so multiply lets its white fall into the warm card while the code stays crisp enough to scan */
.dl-qr-sec { padding-top: 0; scroll-margin-top: calc(var(--head-h) + 20px); }
.dl-qr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 24vw, 300px); gap: clamp(20px, 4vw, 56px); align-items: center; max-width: 940px; margin: 0 auto; padding: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 56px); border-radius: 28px; background: linear-gradient(135deg, #fffaf0 0%, #fbf3e3 100%); border: 1px solid rgba(201,138,18,.18); box-shadow: 0 18px 50px rgba(120,84,20,.08); overflow: hidden; }
.dl-qr::before { content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 70%); pointer-events: none; }
.dl-qr-copy { position: relative; display: grid; gap: 12px; justify-items: start; }
.dl-qr-copy .h-lg { margin: 0; }
.dl-qr-copy p { margin: 0; max-width: 46ch; font-size: 16.5px; line-height: 1.6; color: #45505a; }
.dl-qr-img { position: relative; display: block; width: 100%; height: auto; mix-blend-mode: multiply; transform: rotate(2deg); }
@media (max-width: 700px) {
  .dl-qr { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .dl-qr-copy { justify-items: center; }
  .dl-qr-img { width: min(260px, 80%); }
}
.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: 10px; justify-content: center; align-items: center; padding: 4px 6px; border-radius: 12px; background: var(--paper); }   /* official app logos, spaced; the paper strip hides the timeline line behind them */
.dl-apps img { width: 30px; height: 30px; display: block; object-fit: contain; }
@media (max-width: 560px) { .dl-apps { justify-content: start; } }

/* Blogs & guides (blog.html): full-screen photo hero like Microsoft 365. Coordinates in blog-hero-wide.jpg (3344 x 1200,
   the portrait photo with its wall extended 2600 px left and 1700 px right at 2000 high): his left arm at x 2660 of 2000 high. */
.hero-photo-full.bl-hero { --hc-person: 1.33; --hc-bg: rgb(222, 218, 221); --hc-mpos: 50% 18%; --hpf-cream: 236, 232, 231; }
.bl-hero .hpf-copy .h-xl .hand { color: var(--blue-ink); }
/* Case studies (case-studies/): the close-up (case-studies-hero-closeup.jpg, 2000 x 1125; Mike, 3 Nov 2026) fills the
   hero edge to edge, pinned right so her face never crops, as on Copilot & AI. Its left third is already white, so the
   fade (--hpf-cream) is the page colour and the hero runs into the story grid below without a seam. Own class: cs-hero
   is the Cloud services hero and the case-study story pages.
   Resources (resources/, res-hero): Irfaan (resources-hero-irfaan.jpg, 2000 x 1125, the same white-to-wall photo) the same way. */
.hero-photo-full.csi-hero { --hc-mpos: 80% 6%; --hpf-cream: 243, 245, 246; --hc-bg: var(--paper); }
.hero-photo-full.res-hero { --hc-mpos: 72% 0%; --hpf-cream: 243, 245, 246; --hc-bg: var(--paper); }
@media (max-width: 1100px) {   /* phone and tablet: the photo starts under the menu bar too, its top fading in from the page colour */
  .hero-photo-full.is-light.hpf-col.res-hero .hpf-img { margin-top: var(--head-h); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 56px); mask-image: linear-gradient(to bottom, transparent 0, #000 56px); }
  .hero-photo-full.is-light.hpf-col.res-hero::before { top: var(--head-h); }
}
@media (min-width: 1101px) {
  .hero-photo-full.is-light.hpf-col:is(.csi-hero, .res-hero) .hpf-img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 8%; }
  /* Irfaan's head is near the top of his photo, so the photo starts below the menu bar (Mike, 3 Nov 2026): its top edge
     fades into a strip coloured like the wall (sampled along the photo's top row: white on the left to grey on the right) */
  .hero-photo-full.is-light.hpf-col.res-hero { background: linear-gradient(90deg, #fff 0%, rgb(253, 253, 253) 25%, rgb(235, 235, 233) 35%, rgb(220, 218, 219) 50%, rgb(211, 211, 211) 70%, rgb(199, 201, 200) 80%, rgb(162, 162, 160) 90%, rgb(112, 108, 104) 100%); }
  .hero-photo-full.is-light.hpf-col.res-hero .hpf-img { top: calc(var(--head-h) + 16px); height: calc(100% - var(--head-h) - 16px); object-position: 100% 0%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 72px); mask-image: linear-gradient(to bottom, transparent 0, #000 72px); }
  /* the grey wall meets the copy column in a soft band of the page colour, then clears before the face */
  .hero-photo-full.is-light.hpf-col:is(.csi-hero, .res-hero)::before {
    background:
      linear-gradient(90deg, rgba(var(--hpf-cream), .96) 0, rgba(var(--hpf-cream), .9) calc(var(--mw-left) + var(--mw-col) * .6), rgba(var(--hpf-cream), .45) calc(var(--mw-left) + var(--mw-col) + 16px), rgba(var(--hpf-cream), 0) calc(var(--mw-left) + var(--mw-col) + var(--mw-gap) + 40px)),
      linear-gradient(0deg, rgb(var(--hpf-cream)) 0%, rgba(var(--hpf-cream), 0) 26%); }
}
.csi-hero .hpf-copy .h-xl .hand { color: var(--blue-ink); }
/* About (about.html): the team on the Cape Town footbridge, light version. about-hero-team.jpg is the photo cropped to
   1400 x 1200 (the Luno sign on the building behind painted out) with the first person at x 112 and the right edge of the team at x 1336 (team 1224 wide).
   Desktop: the first person stands 72px after the copy and the photo starts just past the copy, so no text sits on it.
   It scales to fill the hero height, or smaller so the team ends at most 40px past the right edge; it then sits on the
   bottom and its top fades into the background. Its left edge (and the far right) fade too, so it blends into the light. */
.hero-photo-full.ab-hero { --hpf-cream: 239, 243, 247; --hc-bg: rgb(239, 243, 247); --hc-mpos: 55% 45%; }
.hero-photo-full.is-light.hpf-col.ab-hero { --mw-col: 460px; }
.hero-photo-full.is-light.hpf-col.ab-hero .hpf-copy .h-xl { font-size: clamp(36px, 3vw, 50px); line-height: 1.06; }
.ab-hero .hpf-copy .h-xl .hand { color: var(--blue-ink); }
.ab-hero .stamp { margin-top: 26px; color: var(--blue); }
@media (min-width: 1101px) {
  .hero-photo-full.is-light.hpf-col.ab-hero {
    --ab-x: calc(50vw - min(590px, 50vw) + var(--gutter) + var(--mw-col) + 72px);   /* where the first person stands */
    --ab-s: min(var(--mw-h) / 1200, (100vw - var(--ab-x) + 40px) / 1224); }          /* screen px per photo px */
  .hero-photo-full.is-light.hpf-col.ab-hero .hpf-img {
    height: calc(var(--ab-s) * 1200); left: calc(var(--ab-x) - var(--ab-s) * 112); top: calc(var(--mw-h) - var(--ab-s) * 1200);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 calc(var(--ab-s) * 100), #000 calc(100% - var(--ab-s) * 60), transparent 100%), linear-gradient(180deg, transparent 0, #000 calc(var(--ab-s) * 180));
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(90deg, transparent 0, #000 calc(var(--ab-s) * 100), #000 calc(100% - var(--ab-s) * 60), transparent 100%), linear-gradient(180deg, transparent 0, #000 calc(var(--ab-s) * 180));
            mask-composite: intersect; }
}
/* Long prompts (several lines, sections and bullets) keep their line breaks on screen and when copied */
.rp-prompt.rp-long p { white-space: pre-line; font-size: 14.5px; line-height: 1.55; }

/* Business Leader guide (resource-copilot-business-leader.html): full-screen photo hero in the warm cream of the Microsoft 365
   page. guide-business-leader-hero.jpg is the photo cropped to 1118 x 1086 (the booth on the left cut off); her hand on the
   mouse, the first part of her, is at x 140. Desktop: her hand stands 56px after the copy and the photo scales to fill the
   hero height and always reach the right edge (the desk runs off the bottom); its left and top (dark window strip) fade into the cream. Tablet and phone: the photo sits above the copy. */
.hero-photo-full.gl-hero { --hpf-cream: 238, 232, 227; --hc-bg: rgb(238, 232, 227); --hc-mpos: 50% 40%; }
.dl-hero-copy .ig-crumb { margin-bottom: 18px; }
.dl-hero-copy .h-xl .hand { display: block; margin-top: .04em; color: var(--blue-ink); }
.dl-hero-copy .btn-row { margin-top: 26px; }
@media (min-width: 1101px) {
  .hero-photo-full.is-light.hpf-col.gl-hero {
    --gl-x: calc(50vw - min(590px, 50vw) + var(--gutter) + var(--mw-col) + 56px);   /* where her hand starts */
    --gl-s: max(var(--mw-h) / 1086, (100vw - var(--gl-x)) / 978); }                   /* screen px per photo px: fills the height and always reaches the right edge */
  .hero-photo-full.is-light.hpf-col.gl-hero .hpf-img {
    height: calc(var(--gl-s) * 1086); left: calc(var(--gl-x) - var(--gl-s) * 140); top: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 calc(var(--gl-s) * 125)), linear-gradient(180deg, transparent 0, #000 calc(var(--gl-s) * 150));
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(90deg, transparent 0, #000 calc(var(--gl-s) * 125)), linear-gradient(180deg, transparent 0, #000 calc(var(--gl-s) * 150));
            mask-composite: intersect; }
}

/* ==========================================================================
   Call-to-action tracker (cta-map.html, internal planning page built by tools/build-cta-map.js)
   ========================================================================== */
.ctm .hero-c .h-xl { max-width: 18ch; }
.ctm-h { margin: 0 0 16px; }
.ctm-groups { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.ctm-groups button { width: 100%; display: grid; gap: 8px; justify-items: start; padding: 16px 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, transform .2s; }
.ctm-groups button:hover { border-color: rgba(11,116,168,.4); transform: translateY(-1px); }
.ctm-groups b { font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.ctm-dest { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.5; color: #45505a; background: #eef1f4; }
.ctm-dest.is-booking { color: #0b5d2a; background: #dff3e6; }
.ctm-dest.is-ignite { color: #8a5a00; background: #fff0d4; }
.ctm-dest.is-downloads { color: #0b4f74; background: #e0f1fa; }
.ctm-dest.is-reality, .ctm-dest.is-apps { color: #5b3bc4; background: #efe9fd; }
.ctm-dest.is-review { color: #0b74a8; background: #e3f2fb; }
.ctm-dest.is-careers { color: #8a3b12; background: #fde9dc; }
.ctm-dest.is-contact, .ctm-dest.is-email { color: #9b2c2c; background: #fde8e6; }

.ctm-bar { position: sticky; top: calc(var(--head-h) + 8px); z-index: 5; display: flex; flex-wrap: wrap; align-items: end; gap: 10px 14px; padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,.94); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(17,24,32,.06); scroll-margin-top: calc(var(--head-h) + 16px); }
.ctm-bar label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ctm-bar input[type="search"], .ctm-bar select { font: inherit; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--ink); padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: #fff; min-width: 160px; }
.ctm-search { flex: 1 1 240px; }
.ctm-search input { width: 100%; }
.ctm-check { display: flex !important; align-items: center; gap: 8px; text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; color: var(--ink) !important; padding-bottom: 8px; }
.ctm-check input { width: 18px; height: 18px; accent-color: var(--blue); }
.ctm-count { margin: 14px 0 2px; font-size: 14px; font-weight: 700; }
.ctm-help { margin: 0 0 14px; font-size: 13.5px; color: var(--muted); }

.ctm-table-wrap { overflow-x: auto; border-radius: 18px; border: 1px solid var(--line); background: var(--card); }
.ctm-table { width: 100%; min-width: 980px; border-collapse: collapse; font-size: 14px; }
.ctm-table th { position: sticky; top: 0; text-align: left; padding: 12px 14px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: #f6f8fa; border-bottom: 1px solid var(--line); }
.ctm-table td { padding: 12px 14px; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.45; }
.ctm-table tr:last-child td { border-bottom: 0; }
.ctm-table td small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.ctm-table td a { color: var(--blue-ink); word-break: break-word; }
.ctm-table td .ctm-dest { display: table; margin-bottom: 4px; }
.ctm-page { min-width: 190px; }
.ctm-label { font-weight: 700; min-width: 170px; }
.ctm-label small { font-weight: 500; text-transform: capitalize; }
.ctm-loc { display: inline-block; padding: 2px 8px; border-radius: 8px; font-size: 12.5px; font-weight: 700; background: #f1f4f6; }
.ctm-status, .ctm-note { font: inherit; font-size: 13.5px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.ctm-note { width: 100%; min-width: 220px; }
.ctm-note::placeholder { color: #8a949d; }
@media (max-width: 700px) {
  .ctm-bar { position: static; }
  .ctm-bar label:not(.ctm-check) { flex: 1 1 100%; }
  .ctm-bar select { width: 100%; }
}

/* ==========================================================================
   Calls to action, after Conversion Rate Experts' tests (Oct 2026): "What you can do next" at the end of every article
   (learn → check → talk). Built by tools/build-ctas.js
   ========================================================================== */
.cta-next-h, .v2-assess .cta-next-h { margin: 4px 0 -8px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.cta-next { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; width: 100%; max-width: 560px; }
.cta-next a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 3px; align-items: center; padding: 14px 18px; border-radius: 18px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.24); color: #fff; text-decoration: none; transition: background .2s, transform .2s; }
.cta-next a::after { content: "→"; grid-column: 2; grid-row: 1 / span 3; font-size: 18px; font-weight: 700; transition: transform .2s; }
.cta-next a:hover { background: rgba(255,255,255,.18); }
.cta-next a:hover::after { transform: translateX(3px); }
.cta-next a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cta-next small { grid-column: 1; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.cta-next b { grid-column: 1; font-size: 16.5px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
.cta-next span:not(.sr-only) { grid-column: 1; display: flex; align-items: center; gap: 8px; font-size: 13.5px; line-height: 1.45; opacity: .88; }
.cta-next b span[aria-hidden] { display: inline; font-size: inherit; font-weight: 700; opacity: 1; }
.cta-next-talk a { background: var(--ink, #111820); border-color: transparent; box-shadow: 0 12px 30px rgba(17,24,32,.25); }
.cta-next-talk a:hover { background: #000; transform: translateY(-1px); }
.cta-next-talk span:not(.sr-only) { opacity: .92; }

/* ==========================================================================
   Homepage V3 (home-v3.html): growthexperts.co's section flow in Solid's light look. Hero with tabbed service
   folders, founder's letter, service cards, fit check, before/after, plans, The Solid Way steps
   ========================================================================== */
.hv3 { --t-support: #e3f3fb; --t-support-ink: #0b5f8a; --t-security: #e2f4e8; --t-security-ink: #1d6b3a; --t-workplace: #ece7fc; --t-workplace-ink: #5133b0;
  --t-ai: #fff0d4; --t-ai-ink: #8a5a00; --t-review: #fde8dc; --t-review-ink: #9a4313; --t-partner: #eef1f4; --t-partner-ink: #3d4954; }
.hv3-center { text-align: center; margin-inline: auto; justify-items: center; }
.hv3-center .lead { margin-inline: auto; }

/* Hero */
.hv3-hero { position: relative; overflow: hidden; padding-top: clamp(28px, 5vw, 64px);
  background: radial-gradient(900px 520px at 85% 10%, rgba(26,159,219,.16), transparent 70%), radial-gradient(700px 480px at 0% 90%, rgba(255,214,140,.22), transparent 70%), var(--paper); }
.hv3-hero-in { display: grid; gap: 22px; justify-items: start; padding-bottom: clamp(40px, 6vw, 72px); }
.hv3-rating { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 13.5px; font-weight: 700; color: var(--ink); text-decoration: none; box-shadow: 0 6px 18px rgba(17,24,32,.05); }
.hv3-stars { color: #f2a900; letter-spacing: 1px; }
.hv3-h1 { font-size: clamp(40px, 6.2vw, 76px); font-weight: 800; letter-spacing: -.04em; line-height: 1.02; max-width: 15ch; }
.hv3-h1-sub { display: block; margin-top: .3em; font-size: .62em; font-weight: 600; letter-spacing: -.025em; color: #2c3a46; }
.hv3-hero .lead { max-width: 58ch; }
.hv3-hero .cta-row { margin-top: 6px; }
.hv3-facts { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hv3-facts li { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.7); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: #3d4954; }

/* Tabbed service folders along the bottom of the hero */
.hv3-tabs { overflow-x: auto; scrollbar-width: none; padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
.hv3-tabs::-webkit-scrollbar { display: none; }
.hv3-tabs-row { display: flex; gap: 12px; width: max-content; padding-top: 18px; }
.hv3-tab { position: relative; display: grid; gap: 4px; width: 210px; min-height: 96px; padding: 18px 18px 22px; border-radius: 0 16px 0 0; background: var(--tab); color: var(--tab-ink); text-decoration: none; transition: transform .25s; }
.hv3-tab::before { content: ""; position: absolute; left: 0; top: -14px; width: 92px; height: 16px; border-radius: 10px 10px 0 0; background: var(--tab); }
.hv3-tab:hover, .hv3-tab:focus-visible { transform: translateY(-8px); }
.hv3-tab small { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hv3-tab b { font-size: 17px; font-weight: 800; line-height: 1.25; color: var(--ink); letter-spacing: -.01em; }
.t-support { --tab: var(--t-support); --tab-ink: var(--t-support-ink); }
.t-security { --tab: var(--t-security); --tab-ink: var(--t-security-ink); }
.t-workplace { --tab: var(--t-workplace); --tab-ink: var(--t-workplace-ink); }
.t-ai { --tab: var(--t-ai); --tab-ink: var(--t-ai-ink); }
.t-review { --tab: var(--t-review); --tab-ink: var(--t-review-ink); }
.t-partner { --tab: var(--t-partner); --tab-ink: var(--t-partner-ink); }

/* Founder's letter */
.hv3-letter { max-width: 720px; margin: 0 auto; padding: clamp(28px, 5vw, 56px); border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(17,24,32,.06); display: grid; gap: 18px; font-size: clamp(16.5px, 1.4vw, 18.5px); line-height: 1.7; color: #2c3a46; }
.hv3-hello { font-family: var(--f-hand); font-size: 40px; font-weight: 700; line-height: 1; color: var(--blue-ink); }
.hv3-sign { display: flex; align-items: center; gap: 14px; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--line); }
.hv3-sign img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.hv3-sign span { display: grid; }
.hv3-sign b { font-size: 30px; line-height: 1; color: var(--ink); }
.hv3-sign small { font-size: 13.5px; color: var(--muted); }

/* Service cards */
.hv3-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 18px; padding-top: 14px; }
.hv3-card { position: relative; display: grid; align-content: start; gap: 12px; padding: 28px 26px 26px; border-radius: 0 22px 22px 22px; background: var(--tab); scroll-margin-top: calc(var(--head-h, 96px) + 40px); }
.hv3-card-tab { position: absolute; left: 0; top: -26px; padding: 6px 16px 8px; border-radius: 12px 12px 0 0; background: var(--tab); color: var(--tab-ink); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hv3-card h3 { font-size: 21px; font-weight: 800; }
.hv3-card p { font-size: 15px; line-height: 1.55; color: #3d4954; }
.hv3-card ul { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid rgba(17,24,32,.08); display: grid; gap: 7px; }
.hv3-card li { position: relative; padding-left: 24px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.hv3-card li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--tab-ink); }
.hv3-card .cta-textlink { margin-top: 4px; justify-self: start; }

/* Fit check */
.hv3-fit { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.hv3-fit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hv3-fit-list label { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); cursor: pointer; font-size: 15.5px; font-weight: 600; line-height: 1.45; transition: border-color .2s, background .2s; }
.hv3-fit-list input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--blue-ink); }
.hv3-fit-list label:has(input:checked) { border-color: var(--blue); background: var(--blue-wash); }
.hv3-fit-result { position: sticky; top: calc(var(--head-h, 96px) + 24px); display: grid; gap: 16px; padding: 28px; border-radius: 24px; background: linear-gradient(150deg, #1a9fdb, #0b74a8); color: #fff; box-shadow: 0 22px 50px rgba(11,116,168,.22); }
.hv3-fit-result .eyebrow { color: #d9f1fc; }
.hv3-meter { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hv3-meter li { padding: 9px 14px; border-radius: 12px; background: rgba(255,255,255,.14); color: #e6f5fc; font-size: 14.5px; font-weight: 700; transition: background .25s, color .25s; }
.hv3-meter li.is-on { background: #fff; color: var(--ink); }
.hv3-fit-msg { font-size: 15.5px; line-height: 1.55; color: #fff; }
.hv3-fit-result .cta-row { margin: 0; /* spacing-ok: home-v3 test page; the result card spaces its rows with gap */ }

/* Before / after */
.hv3-ba { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(14px, 3vw, 32px); align-items: center; }
.hv3-before, .hv3-after { padding: clamp(24px, 3vw, 36px); border-radius: 24px; display: grid; gap: 16px; }
.hv3-before { background: #fbf3ea; border: 1px dashed #e0c9ad; }
.hv3-after { background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(17,24,32,.07); }
.hv3-ba h3 { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hv3-ba ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hv3-ba li { position: relative; padding-left: 28px; font-size: 16px; font-weight: 600; line-height: 1.45; }
.hv3-before li { color: #6b5a47; }
.hv3-before li::before { content: "✕"; position: absolute; left: 0; color: #c0703a; font-weight: 800; }
.hv3-before li:nth-child(odd) { transform: rotate(-.6deg); }
.hv3-after li::before { content: "✓"; position: absolute; left: 0; color: #1d8a4a; font-weight: 800; }
.hv3-ba-arrow { font-size: 34px; font-weight: 700; color: var(--blue); }

/* Plans */
.hv3-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.hv3-plan { display: grid; align-content: start; gap: 10px; padding: 28px 26px; border-radius: 24px; background: #fff; border: 1px solid var(--line); }
.hv3-plan.is-main { border: 2px solid var(--blue); box-shadow: 0 22px 50px rgba(11,116,168,.12); }
.hv3-plan-k { justify-self: start; padding: 4px 12px; border-radius: 999px; background: var(--blue-wash); color: var(--blue-ink); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hv3-plan h3 { font-size: 24px; font-weight: 800; }
.hv3-plan p { font-size: 15px; color: var(--muted); }
.hv3-plan ul { list-style: none; margin: 6px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.hv3-plan li { position: relative; padding-left: 24px; font-size: 14.5px; font-weight: 600; }
.hv3-plan li::before { content: "✓"; position: absolute; left: 0; color: var(--blue-ink); font-weight: 800; }
.hv3-plans-note { margin: 22px auto 0; max-width: 70ch; text-align: center; font-size: 15px; color: var(--muted); }
.hv3-plans-sec .cta-row { margin-top: 22px; }

/* The Solid Way steps */
.hv3-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; position: relative; }
.hv3-steps li:not(:last-child)::after { content: ""; position: absolute; left: 52px; right: -8px; top: 22px; height: 2px; background: linear-gradient(90deg, var(--blue), #8fd6f7); }
.hv3-steps li { position: relative; display: grid; gap: 8px; align-content: start; }
.hv3-steps b { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 18px; font-weight: 800; box-shadow: 0 0 0 6px var(--paper); }
.hv3-steps h3 { font-size: 20px; font-weight: 800; margin-top: 6px; }
.hv3-steps p { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.hv3-steps-sec .hv3-center { margin-top: 28px; }

@media (max-width: 1000px) {
  .hv3-cards, .hv3-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hv3-steps { grid-template-columns: 1fr; gap: 18px; }
  .hv3-steps li:not(:last-child)::after { left: 22px; right: auto; top: 52px; bottom: -14px; width: 2px; height: auto; background: linear-gradient(180deg, var(--blue), #8fd6f7); }
  .hv3-steps li { grid-template-columns: 46px 1fr; column-gap: 16px; }
  .hv3-steps li b { grid-row: span 2; }
  .hv3-steps h3 { margin-top: 10px; }
}
@media (max-width: 820px) {
  .hv3-fit, .hv3-ba { grid-template-columns: 1fr; }
  .hv3-fit-result { position: static; }
  .hv3-ba-arrow { justify-self: center; transform: rotate(90deg); }
}
@media (max-width: 640px) {
  .hv3-cards, .hv3-plans { grid-template-columns: 1fr; }
  .hv3-tab { width: 180px; }
}

/* Managed IT at its ranking address (it-services/managed-it-services/): the live page's sections inside the new design */
.mi-ticks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; max-width: 62ch; }
.mi-ticks li { position: relative; padding-left: 28px; color: var(--muted); font-size: 16.5px; line-height: 1.6; }
.mi-ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--blue-ink); font-weight: 800; }
.mi-who { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.mi-scenario { display: grid; gap: 14px; padding: clamp(24px, 3vw, 36px); border-radius: 24px; background: var(--blue-wash); color: #2c3a46; font-size: 16.5px; line-height: 1.65; }
.mi-scenario-k { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-ink); }
.mi-diff .card h3, .mi-risks .card h3 { font-size: 19px; font-weight: 800; margin-bottom: 10px; }
.mi-diff .card p, .mi-risks .card p { color: var(--muted); font-size: 15px; line-height: 1.6; }
.mi-risks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.mi-detail { margin-top: clamp(28px, 4vw, 44px); display: grid; gap: 14px; }
.mi-detail-h { font-size: 17px; font-weight: 700; }
.mi-detail .faq details p:not(:last-child) { padding-bottom: 10px; }
.mi-ticks + .body-copy { margin-top: 20px; }
.mi-diff .card h3, .mi-risks .card h3 { text-wrap: pretty; }
@media (max-width: 1100px) { .mi-risks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .mi-who { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .mi-risks { grid-template-columns: 1fr; } }
.mi-local { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.mi-offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mi-offices .card { gap: 8px; }
.mi-offices h3 { font-size: 20px; font-weight: 800; }
.mi-offices p { color: var(--muted); font-size: 15px; line-height: 1.55; }
.mi-offices a { font-weight: 700; color: var(--blue-ink); text-decoration: none; }
@media (max-width: 900px) { .mi-local { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .mi-offices { grid-template-columns: 1fr; } }
.mi-local .h-lg { margin-bottom: 18px; }
.mi-offices a.mi-office-more { font-size: 14px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }

/* IT company in Cape Town (it-company-in-cape-town/): the live location page in the new design */
/* Hero: a colleague with a laptop in a bright office (it-company-cape-town-hero.jpg, 1672 x 1141: the photo plus 200px of
   plain wall added above for headroom; her left edge x 985, top of her hair y 285). Desktop: the photo covers the hero and
   is pinned to the right, so she stands right of the copy at every width; her head sits 64px under the header where the
   cover allows. Tablet and phone: the photo sits above the copy, cropped to her side. */
.hero-photo-full.ct-hero { --hpf-cream: 246, 240, 233; --hc-bg: rgb(246, 240, 233); --hc-mpos: 100% 0%; }
@media (min-width: 1101px) {
  .hero-photo-full.is-light.hpf-col.ct-hero { --ct-s: max(100vw / 1672, var(--mw-h) / 1141); }   /* screen px per photo px */
  .hero-photo-full.is-light.hpf-col.ct-hero .hpf-img {
    left: auto; right: 0; width: calc(var(--ct-s) * 1672); height: calc(var(--ct-s) * 1141);
    top: clamp(var(--mw-h) - var(--ct-s) * 1141, var(--head-h) + 64px - var(--ct-s) * 285, 0px); }
}
.cpt-strap { margin: 22px 0 0; font-size: clamp(19px, 1.6vw, 23px); font-weight: 600; line-height: 1.4; letter-spacing: -.01em; color: #2c3a46; max-width: 30ch; }
.cpt-intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.cpt-intro .h-lg { margin-bottom: 18px; }
.cpt-lead { font-weight: 600; color: var(--ink); }
.cpt-office { display: grid; gap: 12px; }
.cpt-office p { color: var(--muted); font-size: 15px; line-height: 1.6; }
.cpt-office a { color: var(--blue-ink); font-weight: 600; }
.cpt-review { margin-top: 4px; }
.cpt-trusted-h { font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); text-align: center; margin-bottom: 22px; }
.cpt-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(20px, 4vw, 56px); }
.cpt-logos img { height: 40px; width: auto; max-width: 170px; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; }
.cpt-logos a:hover img, .cpt-logos a:focus-visible img { filter: none; opacity: 1; }
/* Copy beside a supporting block (proof tiles, cards or a photo), so no section is a lone column of text */
.cpt-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.cpt-split .h-lg { margin-bottom: 18px; }
.cpt-proof { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cpt-proof li { display: grid; gap: 8px; align-content: start; padding: 24px 22px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(17,24,32,.05); }
.cpt-proof b { font-size: clamp(34px, 3.4vw, 46px); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--blue-ink); }
.cpt-proof span { font-size: 15px; line-height: 1.5; color: var(--muted); }
.cpt-proof a { color: var(--blue-ink); }
/* Why choose us: heading and the question side by side, then the answer in two cards */
.cpt-why { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.cpt-why > div:first-child { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: end; }
.cpt-why > div:first-child .h-lg { margin: 0; }
.cpt-why-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cpt-why-card { margin: 0; padding: 26px 28px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); font-size: 16px; line-height: 1.7; color: var(--muted); }
.cpt-why-card b { display: block; margin-bottom: 8px; font-size: 18px; letter-spacing: -.01em; color: var(--ink); }
.cpt-why-card a { color: var(--blue-ink); }
.cpt-about-photo { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 28px; box-shadow: 0 30px 70px rgba(17,24,32,.12); }
.cpt-wom-h { margin-bottom: 22px; text-align: center; }
.cpt-services-h { margin: 6px 0 22px; }
.cpt-services .card h5 { margin: 0 0 10px; font-size: 19px; font-weight: 800; }
.cpt-services .card h5 a { color: var(--ink); text-decoration: none; }
.cpt-services .card h5 a:hover { color: var(--blue-ink); }
.cpt-services .card p { color: var(--muted); font-size: 15px; line-height: 1.6; }
.cpt-services .card p a { color: var(--blue-ink); }
.cpt-team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cpt-team li { padding: 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); color: var(--muted); font-size: 15px; line-height: 1.55; }
.cpt-team b { display: block; margin-bottom: 6px; color: var(--ink); font-size: 16.5px; }
@media (max-width: 1000px) { .cpt-team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .cpt-intro, .cpt-split, .cpt-why > div:first-child, .cpt-why-cards { grid-template-columns: 1fr; } .cpt-why > div:first-child { gap: 18px; } }
@media (max-width: 560px) { .cpt-team { grid-template-columns: 1fr; } .cpt-logos img { height: 32px; } }

/* Advice Pack SLA guide (advicepack/sla/): the SLA priority matrix and response-time tables, one colour per priority
   from red (1, emergency) to green (5, low). The generic comparison highlight on the third column is switched off here. */
.bp-table.sla-table thead th:nth-child(3) { color: var(--ink); }
.bp-table.sla-table td:nth-child(3) { background: none; }
.sla-table thead th { vertical-align: bottom; }
.sla-matrix th, .sla-matrix td { width: 25%; }
.sla-matrix thead th { font-weight: 700; line-height: 1.4; }
.sla-matrix tbody th { font-size: 14px; line-height: 1.45; }
.sla-times td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sla-p { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.sla-p1 { background: #fde1df; color: #a1221a; }
.sla-p2 { background: #fde8d2; color: #974a0b; }
.sla-p3 { background: #fbf1c7; color: #7a5a00; }
.sla-p4 { background: #e3f1fb; color: #0f5c86; }
.sla-p5 { background: #e2f4e8; color: #1d6a3f; }
.sla-note { font-size: 15px; font-style: italic; color: var(--muted); }
.sla-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sla-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .sla-three, .sla-levels { grid-template-columns: 1fr; } }
.sla-figure { margin: 8px 0 0; }
.sla-figure img { display: block; width: 100%; height: auto; border-radius: 22px; border: 1px solid var(--line); box-shadow: 0 24px 50px rgba(17,24,32,.08); }
.sla-words { margin-top: -4px; }
.sla-words summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--blue-ink); list-style: none; }
.sla-words summary::-webkit-details-marker { display: none; }
.sla-words summary::after { content: "+"; font-size: 18px; font-weight: 700; }
.sla-words[open] summary::after { content: "–"; }
.sla-words summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

/* Location pages, extra blocks (the-it-company-in-johannesburg/): a video beside the intro, a row of reason cards, four services */
.cpt-video { position: relative; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: var(--night); box-shadow: 0 30px 70px rgba(17,24,32,.14); }
.cpt-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cpt-diff-cards { margin-top: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cpt-diff-cards.cpt-better { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cpt-why-card h4 { margin: 0 0 8px; font-size: 18px; letter-spacing: -.01em; line-height: 1.3; color: var(--ink); }
.cpt-why-card h4 + p { margin: 0; }
.cpt-services-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1100px) { .cpt-diff-cards, .cpt-services-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cpt-diff-cards, .cpt-diff-cards.cpt-better, .cpt-services-4 { grid-template-columns: 1fr; } }

/* Blog posts: an answer-first summary box at the top, and a one-line text link set apart inside the article */
.bp-answer { padding: clamp(20px, 2.6vw, 28px); border-radius: 22px; background: var(--blue-wash); border: 1px solid color-mix(in srgb, var(--blue) 25%, transparent); }
.bp-body .bp-answer h2 { margin: 0 0 10px; font-size: clamp(19px, 1.8vw, 22px); }
.bp-answer p { margin: 0; color: var(--ink); }
.bp-aside { padding: 18px 22px; border-left: 4px solid var(--blue); border-radius: 0 16px 16px 0; background: var(--card); }
.bp-aside a { color: var(--blue-ink); font-weight: 700; white-space: nowrap; }

/* Microsoft Licensing (it-services/microsoft-licensing/): the live page's photo with wall added (microsoft-licensing-hero.jpg,
   2640 x 1250: 600 added left, 500 right, 250 above; his left edge x 1209, so --hc-person 1209 / 1250). Cool white wall. */
.hero-photo-full.ml-hero { --hc-person: .967; --hpf-cream: 241, 242, 242; --hc-bg: rgb(240, 241, 241); --hc-mpos: 61% 0%; }
.ml-hero .cpt-strap .hand { color: var(--blue-ink); }
.eyebrow.ml-label { margin: 0 0 14px; }
.ml-intro { align-items: start; }
.ml-intro .cpt-proof { margin-top: 44px; }
.ml-answer { margin: 0 0 22px; max-width: 20ch; font-size: clamp(30px, 3vw, 42px); line-height: 1.12; letter-spacing: -.03em; font-weight: 800; color: var(--ink); }
.ml-csp { align-items: start; }
.ml-covers ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.ml-covers li { display: grid; gap: 3px; padding-top: 14px; border-top: 1px solid var(--line); }
.ml-covers li:first-child { padding-top: 0; border-top: 0; }
.ml-covers b { font-size: 17px; color: var(--ink); }
.ml-covers span { font-size: 15px; line-height: 1.5; color: var(--muted); }
.cpt-why-card h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: -.01em; line-height: 1.3; color: var(--ink); }
.cpt-why-card h3 + p { margin: 0; }
.cpt-why-card p a { color: var(--blue-ink); }
.ml-benefits { margin-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ml-agreements { list-style: none; margin: 0; padding: 0; }
.ml-callout { margin: clamp(28px, 4vw, 44px) 0 0; padding: 22px 26px; border-left: 4px solid var(--blue); border-radius: 0 18px 18px 0; background: var(--blue-wash); font-size: clamp(18px, 1.6vw, 21px); font-weight: 700; line-height: 1.45; letter-spacing: -.01em; color: var(--ink); max-width: 60ch; }
.ml-help { margin-top: 24px; }
@media (max-width: 1100px) { .ml-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ml-benefits { grid-template-columns: 1fr; } }

/* Blog: a tall infographic inside an article, kept to a readable size */
.fin-figure { margin: 8px 0 4px; }
.fin-figure img { display: block; width: 100%; max-width: 640px; height: auto; border-radius: 22px; border: 1px solid var(--line); box-shadow: 0 24px 50px rgba(17,24,32,.08); }

/* Blog: a dated timeline (blog/a-brief-history-of-microsoft/): a round picture or icon per year on a vertical line */
.mst-note { font-size: 15px; color: var(--muted); font-style: italic; }
.ms-timeline { list-style: none; margin: 8px 0 0; padding: 0; position: relative; }
.ms-timeline::before { content: ""; position: absolute; left: 39px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--line), var(--blue-wash) 85%, var(--blue)); }
.mst-item { position: relative; display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 22px; padding: 4px 0 26px; scroll-margin-top: 120px; }
.mst-media { position: relative; z-index: 1; width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 8px 20px rgba(17,24,32,.12); background: var(--card); }
.mst-icon { display: grid; place-items: center; background: var(--blue-wash); }
.mst-icon svg { width: 34px; height: 34px; fill: none; stroke: var(--blue-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mst-body h3 { margin: 18px 0 8px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--blue-ink); }
.mst-body p + p { margin-top: 12px; }
.mst-item.is-new .mst-body h3::after { content: "New"; margin-left: 10px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; vertical-align: 5px; color: #17734a; background: #e2f4e8; }
.mst-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.mst-jump a { padding: 4px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ink); text-decoration: none; background: var(--card); border: 1px solid var(--line); }
.mst-jump a:hover { border-color: var(--blue); color: var(--blue-ink); }
@media (max-width: 640px) { .ms-timeline::before { left: 27px; } .mst-item { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; } .mst-media { width: 56px; height: 56px; } .mst-icon svg { width: 26px; height: 26px; } .mst-body h3 { margin-top: 10px; font-size: 22px; } }

/* Cloud services (cloud-services/) and Cloud storage (cloud-services/cloud-storage/): the live pages' photos with flat wall
   added (cloud-services-hero.jpg 2024 x 1224: photo at x 700, his arms from x 1030; cloud-storage-hero.jpg 1672 x 928: photo
   at x 900, his arm from x 940), so --hc-person is that x / the image height. */
.hero-photo-full.cs-hero { --hc-person: .841; --hpf-cream: 243, 244, 245; --hc-bg: rgb(243, 244, 245); --hc-mpos: 100% 0%; }
.hero-photo-full.cst-hero { --hc-person: 1.013; --hpf-cream: 238, 239, 239; --hc-bg: rgb(238, 239, 239); --hc-mpos: 94% 0%; }
.hero-photo-full.hpf-col.cst-hero .hpf-copy .h-xl { font-size: clamp(36px, 3vw, 48px); line-height: 1.08; }
/* Service pages: icon cards, a second intro line under a section head, checklists and a three-way comparison */
.svc-ico { width: 52px; height: 52px; margin-bottom: 16px; border-radius: 15px; background: var(--blue-wash); display: grid; place-items: center; }
.svc-ico svg { width: 28px; height: 28px; fill: none; stroke: var(--blue-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svc-cards { margin-top: 24px; }
.cpt-diff-cards.svc-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-lead2 { margin: 0; max-width: 72ch; }
.cs-list { margin: 8px 0 18px; }
.cs-covered h3 { margin: 0 0 10px; font-size: 22px; letter-spacing: -.02em; }
.cs-covered p { color: var(--muted); }
.cs-covered .cta-textlink { display: inline-block; margin-top: 14px; }
.cs-services .card .cta-textlink { display: inline-block; justify-self: start; width: fit-content; margin-top: 12px; font-size: 15px; }
.cs-covered .cta-textlink { width: fit-content; }
.cs-sa { align-items: start; }
.st-invest { background: var(--blue-wash); border-color: color-mix(in srgb, var(--blue) 25%, transparent); }
.st-invest h3 { margin: 0 0 10px; font-size: 20px; letter-spacing: -.02em; }
.st-types-intro { margin-bottom: 8px; align-items: start; }
.st-compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.st-compare > div { padding: 24px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.st-compare b { display: block; margin-bottom: 8px; font-size: 17px; color: var(--ink); }
.st-compare p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--muted); }
@media (max-width: 1100px) { .cpt-diff-cards.svc-3, .st-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cpt-diff-cards.svc-3, .st-compare { grid-template-columns: 1fr; } }

/* Plain bulleted lists and H4 sub-headings in migrated WordPress posts */
.bp-body > ul.bp-list { margin: 0; padding-left: 22px; display: grid; gap: 8px; font-size: 17px; line-height: 1.7; color: #3d4a55; }
.bp-body > ul.bp-list li::marker { color: var(--blue-ink); }
.bp-body > ul.bp-list a { color: var(--blue-ink); }
.bp-body > h4 { margin: 14px 0 0; font-size: 19px; font-weight: 800; letter-spacing: -.015em; }

/* IT Consulting and IT Audit (it-services/it-consulting/, it-services/it-audit/): hero photos measured like .ml-hero.
   Consulting: 1600 x 944 (700 added left, 300 right, 250 above); the laptop's left edge at x 760, so --hc-person 760 / 944.
   Audit: 1718 x 732 (700 added left, 250 right, 220 above); the laptop's left edge at x 745, so --hc-person 745 / 732. */
.hero-photo-full.itc-hero { --hc-person: .805; --hpf-cream: 236, 237, 239; --hc-bg: rgb(232, 233, 235); --hc-mpos: 64% 0%; }
.hero-photo-full.ita-hero { --hc-person: 1.018; --hpf-cream: 236, 234, 236; --hc-bg: rgb(232, 230, 232); --hc-mpos: 63% 0%; }
.itc-hero .hpf-copy .h-xl .hand, .ita-hero .cpt-strap .hand { color: var(--blue-ink); }
.itc-checks { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.itc-checks li { position: relative; padding-left: 32px; font-size: 16px; line-height: 1.6; color: var(--ink); }
.itc-checks li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--blue-ink); }
.itc-callout { display: grid; gap: 10px; justify-items: start; padding: clamp(22px, 3vw, 32px); border-left: 4px solid var(--blue); border-radius: 0 22px 22px 0; background: var(--blue-wash); }
.itc-callout h2, .itc-callout h3 { margin: 0; font-size: clamp(20px, 2vw, 26px); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; color: var(--ink); }
.itc-callout h4 { margin: 0; font-size: 15px; font-weight: 700; color: var(--blue-ink); }
.itc-callout p { margin: 0; max-width: 62ch; font-size: 17px; line-height: 1.6; color: #3d4a55; }
.cpt-about .itc-callout { margin-top: 12px; }
.itc-about { display: grid; gap: 18px; }
.itc-about-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 40px; }
.ita-steps { list-style: none; padding: 0; }
.ita-n { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--blue-ink); }
.ita-expect { margin-top: clamp(32px, 4vw, 48px); display: grid; gap: 14px; max-width: 760px; }
.ita-expect .h-md { margin: 0; }
@media (max-width: 760px) { .itc-about-cols { grid-template-columns: 1fr; } }

/* Advice Pack index (advicepack/): the eight live categories as cards, every article title listed (linked where rebuilt) */
main > .ap-hero:first-child { padding-top: clamp(28px, 4vw, 56px); background: radial-gradient(60% 80% at 90% 0%, var(--blue-wash), transparent 65%), var(--paper); }
.ap-hero .sec-head { max-width: 760px; }
.ap-hero .lead a { color: var(--blue-ink); }
.ap-jump { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.ap-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; }
.ap-jump a:hover { border-color: var(--blue-ink); color: var(--blue-ink); }
.ap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ap-cat { padding: 26px 28px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); scroll-margin-top: calc(var(--head-h) + 20px); }
.ap-cat-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ap-cat-head .svc-ico { margin: 0; flex: none; }
.ap-cat-head h2 { margin: 0; font-size: clamp(20px, 1.8vw, 24px); font-weight: 800; letter-spacing: -.02em; }
.ap-list { list-style: none; margin: 0; padding: 0; display: grid; }
.ap-list li { border-top: 1px solid var(--line); }
.ap-list h3 { margin: 0; padding: 11px 0; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--muted); }
.ap-list h3 a { color: var(--blue-ink); font-weight: 700; text-decoration: none; }
.ap-list h3 a::after { content: " →"; }
.ap-list h3 a:hover { text-decoration: underline; }
@media (max-width: 860px) { .ap-grid { grid-template-columns: 1fr; } }

/* /microsoft/ hub and the privacy policy */
.ms-hub-intro { align-items: center; }
.ms-hub-intro .sec-head .cta-row { margin-top: 8px; }
.ms-hub-link { display: inline-block; margin-top: 14px; justify-self: start; width: fit-content; }
.ms-hub-reads { align-items: start; }
.ms-hub-list { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--line); border-radius: 22px; background: var(--card); overflow: hidden; }
.ms-hub-list li { border-top: 1px solid var(--line); }
.ms-hub-list li:first-child { border-top: 0; }
.ms-hub-list a { display: block; padding: 16px 22px; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--ink); text-decoration: none; }
.ms-hub-list a::after { content: " →"; color: var(--blue-ink); }
.ms-hub-list a:hover { color: var(--blue-ink); }
.pp-head { display: grid; gap: 14px; max-width: 760px; }
.pp-head .lead a { color: var(--blue-ink); }
.pp-meta { margin: 0; font-size: 14px; color: var(--muted); }
.pp-body > h2.pp-title { margin-top: 0; font-size: clamp(18px, 1.6vw, 21px); letter-spacing: .02em; }
.pp-body > ol.pp-list, .pp-body > ul.pp-list { margin: 0; padding-left: 24px; display: grid; gap: 10px; font-size: 16px; line-height: 1.7; color: #3d4a55; }
.pp-body .pp-list .pp-list { margin-top: 8px; padding-left: 22px; display: grid; gap: 6px; }
.pp-body .pp-list a { color: var(--blue-ink); }
.pp-body > h3 { font-size: clamp(18px, 1.6vw, 21px); }
.pp-table th[scope="row"] p, .pp-table td p { margin: 0 0 4px; }
.pp-table .pp-cell { margin: 0; padding-left: 18px; }
.pp-table th, .pp-table td { vertical-align: top; font-size: 14px; }

/* AI Academy taster (resources/ai-academy/): the hook beside the form on the first screen, then the outcome, the seven
   module steps and the learning path. Expand's green (--t-expand) marks it as part of the Academy. */
.aat-hero { padding-block: clamp(16px, 2.4vw, 32px) clamp(48px, 6vw, 88px); background: radial-gradient(60% 80% at 88% 0%, var(--t-expand), transparent 70%), var(--paper); }
.aat-hero-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.aat-copy { display: grid; gap: 18px; justify-items: start; }
.aat-copy .rs-crumb { margin-bottom: 6px; }
.aat-copy .eyebrow.pill { background: var(--t-expand); color: #17734a; }
.aat-copy .h-xl { margin: 0; font-size: clamp(42px, 5vw, 72px); line-height: 1.02; letter-spacing: -.04em; }
.aat-copy .h-xl .hand { color: #17734a; }
.aat-copy .lead { margin: 0; max-width: 46ch; }
.aat-facts { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.aat-facts li { display: grid; gap: 2px; min-width: 112px; padding: 14px 18px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.aat-facts b { font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: #17734a; }
.aat-facts span { font-size: 14px; color: var(--muted); }
.aat-card { scroll-margin-top: calc(var(--head-h) + 20px); }
.aat-form { display: grid; gap: 14px; padding: clamp(24px, 3vw, 36px); border-radius: 26px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(17, 24, 32, .08); }
.aat-form .eyebrow { color: #17734a; }
.aat-form h2 { margin: -4px 0 0; font-size: clamp(24px, 2.2vw, 30px); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.aat-form-lead, .aat-done p { margin: 0; font-size: 16px; line-height: 1.6; color: #3d4a55; }
.aat-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
.aat-form input { font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 14px; min-height: 48px; width: 100%; }
.aat-form input:focus { outline: none; border-color: #17734a; box-shadow: 0 0 0 3px var(--t-expand); background: var(--card); }
.aat-form input[aria-invalid="true"] { border-color: #b42318; }
.aat-err { margin: -4px 0 0; padding: 10px 12px; border-radius: 12px; background: #fdecea; font-size: 14px; line-height: 1.5; color: #8a1c13; }
.aat-form .btn { justify-self: stretch; justify-content: center; min-height: 50px; }
.aat-form .lf-small { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.aat-done { justify-items: start; }
.aat-done .cta-textlink { color: #17734a; }
.aat-prompts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-self: center; }
.aat-prompts li { position: relative; padding: 20px 24px 20px 56px; border-radius: 20px; background: var(--t-expand); font-size: clamp(17px, 1.5vw, 20px); font-weight: 700; line-height: 1.4; letter-spacing: -.01em; color: #10452d; }
.aat-q { position: absolute; left: 20px; top: 8px; font-family: Caveat, cursive; font-size: 52px; line-height: 1; color: #17734a; }
.aat-steps { list-style: none; margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; counter-reset: none; }
.aat-steps li { display: grid; align-content: start; gap: 6px; padding: 20px 16px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.aat-steps li:nth-child(2), .aat-steps li:nth-child(3) { background: var(--t-expand); border-color: transparent; }
.aat-n { font-size: 13px; font-weight: 800; letter-spacing: .08em; color: #17734a; }
.aat-steps b { font-size: 17px; letter-spacing: -.01em; color: var(--ink); }
.aat-steps span:last-child { font-size: 14px; line-height: 1.5; color: var(--muted); }
.aat-more .cta-textlink { margin-top: 8px; display: inline-block; }
.aat-more .body-copy a { color: var(--blue-ink); }
.aat-path { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.aat-path li { position: relative; display: grid; gap: 4px; padding: 18px 22px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.aat-path li.is-this { border: 2px solid #17734a; background: var(--t-expand); }
.aat-path b { font-size: 17px; color: var(--ink); padding-right: 96px; }
.aat-path span { font-size: 14px; line-height: 1.5; color: var(--muted); }
.aat-path em { position: absolute; top: 16px; right: 18px; padding: 4px 10px; border-radius: 999px; background: #17734a; color: #fff; font-style: normal; font-size: 12px; font-weight: 700; }
@media (max-width: 1100px) { .aat-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .aat-hero-in { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .aat-steps { grid-template-columns: 1fr 1fr; } .aat-path b { padding-right: 0; } .aat-path em { position: static; justify-self: start; margin-top: 4px; } }
.res-cover.t-module { background: var(--t-expand); } .res-cover.t-module .res-big, .res-cover.t-module .res-type { color: #17734a; }
.aat .section .h-lg .hand { color: #17734a; }
@media (max-width: 640px) { .aat-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 8px; } .aat-facts li { min-width: 0; padding: 12px; } .aat-facts b { font-size: 22px; } .aat-facts span { font-size: 13px; } }

/* ---------- Vertical rhythm (spacing audit, Oct 2026) ----------
   Every section uses --sec-y (top of file). Light heroes end with the same space, and the section after them starts
   flush (rule at the top), so hero → content is one --sec-y like every other section break. Bands with their own
   background get --sec-y inside. A strip that continues the block above it uses --sec-y-sm. */
.hero-c, .rs-hero, .cs-hero:not(.hero-photo-full), .rp-hero, .sr-hero, .cr-hero, .aat-hero { padding-bottom: var(--sec-y); }
.aa-cta, .aa-video, .ig-hosts, .ms-proof { padding-block: var(--sec-y); }
/* Topic cards under a hero: under a photo hero they need room from the photo's edge; they always need room before the
   first topic section (the section after them starts flush). */
.edu-nav-sec { padding-top: 0; padding-bottom: var(--sec-y); }
.hero-photo-full + .edu-nav-sec, .ig-photo-hero + .edu-nav-sec { padding-top: var(--sec-y-sm); }
/* blog.html wraps its topic sections in a <div>, so the first one doesn't follow the cards strip directly */
.edu-nav-sec + div > .section:first-child { padding-top: 0; /* spacing-ok: the section rhythm collapse, as at the top of the file */ }

/* AI Academy module pages: two-line examples, and the Copilot Foundations path (numbered; modules with a page are links) */
.aat-pairs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-self: center; }
.aat-pairs li { display: grid; gap: 4px; padding: 20px 24px; border-radius: 20px; background: var(--t-expand); }
.aat-pairs b { font-size: clamp(17px, 1.5vw, 20px); font-weight: 800; letter-spacing: -.01em; color: #10452d; }
.aat-pairs span { font-size: 15px; line-height: 1.5; color: #2c5e45; }
.aat-path li { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: start; }
.aat-path li > b, .aat-path li > span:not(.aat-pn), .aat-path a > b, .aat-path a > span:not(.aat-pn) { grid-column: 2; }
.aat-pn { grid-row: span 2; font-size: 13px; font-weight: 800; letter-spacing: .06em; color: var(--muted); padding-top: 3px; }
.aat-path li.is-this .aat-pn, .aat-path li.has-page .aat-pn { color: #17734a; }
.aat-path li.has-page { padding: 0; }
.aat-path li.has-page a { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 18px 22px; border-radius: 20px; color: inherit; text-decoration: none; }
.aat-path li.has-page:hover { border-color: #17734a; }
.aat-path li.has-page:hover b { color: #17734a; }
.aat-path em.aat-try { background: transparent; color: #17734a; padding: 4px 0; }
.aat-also { margin: 14px 0 0; font-size: 15px; line-height: 1.7; color: var(--muted); }
.aat-also a { color: #17734a; font-weight: 600; }
@media (max-width: 640px) { .aat-path em.aat-try { position: static; justify-self: start; grid-column: 2; padding: 0; } }
.aat-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 540px; }
.aat-facts li { min-width: 0; }
.aat-more .cpt-split { align-items: start; }
.aat-more .cpt-split > div:first-child { position: sticky; top: calc(var(--head-h) + 24px); }
@media (max-width: 900px) { .aat-more .cpt-split > div:first-child { position: static; } }
.aat-facts b { white-space: nowrap; } @media (max-width: 640px) { .aat-facts b { font-size: 20px; } }
/* Module page with a vertical video straight under the H1 (.aat-stage): a dark stage the width of the copy column with the
   clip large in the middle (up to 76% of the window height). Poster = the clip's own frame at 0.5 s (#t=0.5,
   preload="metadata"); the play button starts it with sound and controls. The lead and facts follow underneath. */
.aat-hero-in:has(.aat-stage) { align-items: start; }
.aat-stage { width: 100%; display: grid; place-items: center; padding: clamp(14px, 2.4vw, 28px); border-radius: 28px;
  background: radial-gradient(70% 60% at 50% 35%, #2c4a3b 0%, #142219 60%, #0c140f 100%); box-shadow: 0 30px 60px rgba(17,24,32,.18); }
.aat-reel { position: relative; margin: 0; width: min(100%, calc(min(76vh, 760px) * 9 / 16)); aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden;
  background: #0f1a14; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 20px 50px rgba(0,0,0,.45); }
.aat-reel-vid { display: block; width: 100%; height: 100%; object-fit: cover; }
.aat-reel-play { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 12px; padding: 0; border: 0; cursor: pointer;
  background: linear-gradient(180deg, rgba(15,26,20,0) 40%, rgba(15,26,20,.55) 100%); color: #fff; font: inherit; }
.aat-reel-ico { position: relative; width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,.94); box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: transform .2s ease; }
.aat-reel-ico::before { content: ''; position: absolute; left: 30px; top: 23px; border-style: solid; border-width: 15px 0 15px 23px; border-color: transparent transparent transparent #17734a; }
.aat-reel-play:hover .aat-reel-ico { transform: scale(1.08); }
.aat-reel-tag { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 5px 12px; border-radius: 999px; background: rgba(17,24,32,.72); font-size: 13px; font-weight: 700; white-space: nowrap; }
.aat-reel-play:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; border-radius: 22px; }
.aat-reel.is-playing .aat-reel-play { display: none; }
.aat-reel-tag { font-size: 14px; bottom: 18px; }

/* AI Academy landing page (resources/ai-academy/): the Academy on screen in the hero, module cards, three steps */
.aal-screen { border-radius: 26px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(17, 24, 32, .1); overflow: hidden; }
.aal-bar { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: 15px; }
.aal-logo { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: #1a9fdb; color: #fff; font-size: 10px; font-weight: 800; }
.aal-bar b { margin-right: auto; }
.aal-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.aal-path { display: grid; gap: 4px; padding: 22px 24px 18px; background: linear-gradient(135deg, var(--t-expand), #f2fbf6); }
.aal-kicker { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #17734a; }
.aal-title { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.aal-meta { font-size: 14px; color: var(--muted); }
.aal-progress { margin-top: 10px; height: 8px; border-radius: 99px; background: rgba(23, 115, 74, .15); overflow: hidden; }
.aal-progress span { display: block; height: 100%; border-radius: inherit; background: #17734a; }
.aal-list { list-style: none; margin: 0; padding: 10px 14px 16px; display: grid; gap: 6px; }
.aal-list li { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; }
.aal-list li.now { background: var(--t-expand); }
.aal-dot { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); font-size: 13px; font-weight: 800; color: var(--muted); }
.aal-list li.done .aal-dot { background: #17734a; border-color: #17734a; color: #fff; }
.aal-list li.now .aal-dot { border-color: #17734a; color: #17734a; background: #fff; }
.aal-list b { display: block; font-size: 15px; line-height: 1.3; }
.aal-list small { font-size: 13px; color: var(--muted); }
.aal-modules .sec-head .h-lg .hand, .aal-how .h-lg .hand { color: #17734a; }
.aal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.aal-card { display: grid; grid-template-rows: auto 1fr; border-radius: 22px; background: var(--card); border: 1px solid var(--line); overflow: hidden; color: inherit; text-decoration: none; transition: border-color .2s, transform .2s, box-shadow .2s; }
.aal-card:hover { border-color: #17734a; transform: translateY(-3px); box-shadow: 0 18px 40px rgba(17, 24, 32, .08); }
.aal-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--t-expand); }
.aal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.aal-min { position: absolute; left: 14px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(17, 24, 32, .78); color: #fff; font-size: 13px; font-weight: 700; }
.aal-body { display: grid; align-content: start; gap: 8px; padding: 20px 22px 22px; }
.aal-hook { font-family: var(--f-hand); font-size: 22px; line-height: 1.15; color: #17734a; }
.aal-body b { font-size: 19px; line-height: 1.3; letter-spacing: -.015em; }
.aal-line { font-size: 15px; line-height: 1.55; color: var(--muted); }
.aal-go { margin-top: 6px; font-size: 15px; font-weight: 700; color: #17734a; }
.aal-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.aal-steps li { display: grid; gap: 8px; padding: 26px 28px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.aal-steps b { font-size: 19px; letter-spacing: -.015em; }
.aal-steps span:last-child { font-size: 15px; line-height: 1.6; color: var(--muted); }
@media (max-width: 1000px) { .aal-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .aal-grid, .aal-steps { grid-template-columns: 1fr; } }

/* AI Academy landing: modules in the full Academy that have no taster, shown locked */
.aal-locks { display: grid; gap: 22px; }
.aal-lock-group { display: grid; gap: 8px; }
.aal-lock-path { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 4px 4px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #17734a; }
.aal-lock-path small { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
.aal-lock { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 20px; border-radius: 18px; background: rgba(255, 255, 255, .55); border: 1px dashed #c9d3da; }
.aal-lock-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #eef1f3; }
.aal-lock-ico svg { width: 17px; height: 17px; fill: none; stroke: #7a8792; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aal-lock b { display: block; font-size: 16px; line-height: 1.35; color: #3d4a55; }
.aal-lock b + span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.aal-locks { list-style: none; margin: 0; padding: 0; gap: 10px; align-self: center; }
.aal-more .cpt-split { align-items: center; }
.aal-more .cpt-split > div:first-child { position: static; }

/* AI Academy landing hero: 2372 x 1160 (400 added left, 300 right, 220 above); her elbow at x 1375, so --hc-person 1375 / 1160.
   Warm sunlit wall; the hand accent in Academy green. */
.hero-photo-full.aal-hero { --hc-person: 1.185; --hpf-cream: 236, 226, 214; --hc-bg: rgb(226, 212, 197); --hc-mpos: 67% 0%; }
.aal-hero .hpf-copy .eyebrow.pill { background: var(--t-expand); color: #17734a; }
.aal-hero .hpf-copy .h-xl .hand { color: #17734a; }

/* AI Academy landing: "Not another learning platform" (the live human coach) */
.aal-why .h-lg .hand { display: block; }
.aal-why-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.aal-why-cards li { display: grid; align-content: start; gap: 8px; padding: 28px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.aal-why-cards .svc-ico { margin-bottom: 8px; background: var(--t-expand); }
.aal-why-cards .svc-ico svg { stroke: #17734a; }
.aal-why-cards b { font-size: 19px; letter-spacing: -.015em; }
.aal-why-cards span:last-child { font-size: 15px; line-height: 1.65; color: var(--muted); }
.aal-brand { margin: clamp(24px, 3vw, 36px) 0 0; text-align: center; font-family: var(--f-hand); font-size: clamp(28px, 3vw, 38px); color: #17734a; }
@media (max-width: 860px) { .aal-why-cards { grid-template-columns: 1fr; } }

/* Homepage H1: the eyebrow pill is the first line of the H1 (what we do and where), so it must look exactly as it did as a
   sibling: its own line, its own type settings, and the same 18px gap the hero copy grid used to put under it. */
.hh-h1 > .eyebrow { display: flex; width: fit-content; margin-bottom: 18px; line-height: 1.6; font-family: var(--f-sans); text-wrap: wrap; }
.hh-h1 > .eyebrow > span { white-space: nowrap; flex: none; }

/* Managed IT page additions (Oct 2026): answer-first lead, pricing steps, outsourcing comparison, Touchsides case study */
.lead.mi-answer { margin: 0 0 22px; max-width: 62ch; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.6; color: var(--ink); }
.mi-cost { align-items: center; }
.mi-cost .h-lg { margin: 14px 0 18px; }
.mi-cost .body-copy + .body-copy { margin-top: 14px; }
.mi-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mi-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 4px; padding: 22px 24px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.mi-step-n { grid-row: span 2; font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--blue-ink); padding-top: 3px; }
.mi-steps b { font-size: 18px; letter-spacing: -.01em; }
.mi-steps li > span:last-child { font-size: 15px; line-height: 1.55; color: var(--muted); }
.mi-compare th[scope="row"] { white-space: nowrap; }
.mi-compare td:last-child { color: var(--ink); font-weight: 600; }
.mi-compare a { color: var(--blue-ink); }
.mi-outsource-more { margin-top: 24px; display: grid; gap: 10px; max-width: 760px; }
.mi-case { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: 28px; background: radial-gradient(70% 100% at 100% 0%, var(--blue-wash), transparent 65%), var(--card); border: 1px solid var(--line); }
.mi-case-copy { display: grid; gap: 14px; justify-items: start; }
.mi-case-copy .h-lg { margin: 0; }
.mi-quote { margin: 4px 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--blue); }
.mi-quote p { margin: 0; font-size: clamp(17px, 1.5vw, 20px); font-weight: 600; line-height: 1.5; color: var(--ink); }
.mi-quote cite { display: block; margin-top: 8px; font-style: normal; font-size: 14px; color: var(--muted); }
.mi-case-stat { display: grid; gap: 6px; padding: 28px; border-radius: 22px; background: var(--night); color: var(--on-night); }
.mi-case-stat b { font-size: clamp(48px, 6vw, 72px); line-height: 1; letter-spacing: -.04em; }
.mi-case-stat span { font-size: 16px; line-height: 1.5; color: #c9d6e2; }
@media (max-width: 900px) { .mi-case { grid-template-columns: 1fr; } }
.its-mit-link { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); }
.its-mit-link a { color: var(--blue-ink); font-weight: 700; }

/* Folded sections (old thin pages rewritten as one section of a stronger page): heading left, copy right; stacked on small screens */
.fold-in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.fold-head { display: grid; gap: 14px; justify-items: start; position: sticky; top: 112px; }
.fold-head .h-lg { margin: 0; font-size: clamp(30px, 2.8vw, 42px); }
.fold-body { display: grid; gap: 16px; }
.fold-body .body-copy { margin: 0; }
.fold-steps { counter-reset: fold; }
.fold-steps li { counter-increment: fold; }
.fold-steps li::before { content: counter(fold); }
.mi-case-results { align-self: center; }
.mega-col > .mega-all { display: inline-block; margin-top: 4px; padding-top: 10px; }
@media (max-width: 900px) { .fold-in { grid-template-columns: 1fr; } .fold-head { position: static; } }
/* SharePoint hero: 1825 x 800 (700 added left, 300 right, 250 above, flat wall faded in); the plant's left edge at x 720,
   so --hc-person 720 / 800. */
.hero-photo-full.sp-hero { --hc-person: .9; --hpf-cream: 238, 241, 243; --hc-bg: rgb(238, 241, 243); --hc-mpos: 64% 0%; }
.sp-hero .cpt-strap .hand { color: var(--blue-ink); }
/* A subheading inside a split column (e.g. SharePoint "Picture it:"): room above, close to its copy */
.cpt-split .cpt-sub { margin: 30px 0 10px; }
/* AI Academy landing: "New" tag on the newest module's card */
.aal-new { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 4px 10px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
/* "Areas we serve" strip on the location pages and IT support (tools/build-areas.js) */
.loc-areas-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 32px; }
.loc-area { height: 100%; gap: 6px; padding: 22px 24px; color: inherit; transition: border-color .2s, transform .2s; }
.loc-area b { font-size: 17px; color: var(--ink); }
.loc-area span { font-size: 15px; line-height: 1.5; color: var(--muted); }
.loc-area:hover { border-color: var(--blue); transform: translateY(-2px); }
/* Case study: centred results heading, and the client's other quotes under the results */
.cs-results-head { text-align: center; margin-inline: auto; }
.cs-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 40px; }
.cs-quote-card { margin: 0; justify-content: space-between; }
.cs-quote-card blockquote { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink); }
.cs-quote-card figcaption { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.cs-quote-card figcaption img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.cs-quote-card figcaption b { display: block; color: var(--ink); }

/* Made Superhuman the Solid Way (made-superhuman/): the foundation band's heading and copy, as About's "Who we are" */
/* The "Made Superhuman the Solid Way" stamp links to the page (footer, About) */
.stamp a { color: inherit; text-decoration: none; }
.stamp a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ms-found .h-lg { margin-top: 14px; }
.ms-found .h-lg + p { margin-top: 16px; }
.ms-found .motto { margin-top: 20px; }

/* Meet our humans: the quirky line under the founders and Alice (#team) */
.team-spot { margin-top: 28px; text-align: center; font-size: 17px; color: var(--muted); }
.team-spot em { font-size: 1.35em; color: var(--blue-ink); white-space: nowrap; }

/* AI Academy page: module cards are buttons that open the name + work email pop-up (site.js) */
button.aal-card { width: 100%; padding: 0; font: inherit; text-align: left; cursor: pointer; }
.aal-dialog { position: relative; max-width: 480px; }
.aal-dialog .aat-form { padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.aal-x { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; }
.aal-x:hover { background: var(--paper); color: var(--ink); }

/* AI Academy landing, "Not another learning platform": the 1:53 YouTube Short on the same dark stage as the module videos
   (Mike, 4 Nov 2026). Heading and cards on the left, the video on the right; on phones the video sits between them. */
.aal-why-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); grid-template-areas: "head stage" "cards stage" "brand brand";
  column-gap: clamp(32px, 4.5vw, 64px); align-items: start; }
.aal-why-grid > .sec-head { grid-area: head; margin-bottom: 32px; }
.aal-why-grid > .aal-why-cards { grid-area: cards; grid-template-columns: 1fr; gap: 12px; }
.aal-why-grid > .aal-why-stage { grid-area: stage; }
.aal-why-grid > .aal-brand { grid-area: brand; }
.aal-why-grid .aal-why-cards li { grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; row-gap: 4px; padding: 22px 24px; }
.aal-why-grid .aal-why-cards .svc-ico { grid-row: span 2; margin-bottom: 0; }
.aat-reel iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 900px) {
  .aal-why-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "cards" "brand"; }
  .aal-why-grid > .aal-why-stage { margin-bottom: 24px; }
}

/* AI Academy landing, module cards (Mike, 4 Nov 2026): two actions under each card, "See the module" (its landing page)
   and "Get the module" (the name + work email pop-up). The buttons sit on the card's bottom edge so a row lines up. */
article.aal-card:hover { transform: none; box-shadow: 0 18px 40px rgba(17, 24, 32, .06); }
.aal-card .aal-body { display: flex; flex-direction: column; gap: 8px; }
.aal-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 14px; }
.aal-acts .btn { flex: 1 1 0; min-width: 132px; justify-content: center; white-space: nowrap; }
a.aal-thumb img { transition: transform .3s ease; }
a.aal-thumb:hover img { transform: scale(1.03); }

/* Copilot & AI page, "What you get" (Mike, 5 Nov 2026): heading and the three cards on the left, the 15-second vertical video
   on the right on the same dark stage as the Academy module videos. On phones the video sits between the heading and cards. */
.cmp-get-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); grid-template-rows: auto 1fr; grid-template-areas: "head stage" "cards stage";
  column-gap: clamp(32px, 4.5vw, 64px); align-items: start; }
.cmp-get-grid > .sec-head { grid-area: head; margin-bottom: 32px; }
.cmp-get-grid > .grid-3 { grid-area: cards; grid-template-columns: 1fr; gap: 12px; }
.cmp-get-grid > .cmp-get-stage { grid-area: stage; }
.cmp-get-grid .card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; row-gap: 4px; padding: 22px 24px; }
.cmp-get-grid .card .ico { grid-row: span 2; margin-bottom: 0; }
.cmp-get-grid .card h3 { font-size: 19px; letter-spacing: -.015em; }
@media (max-width: 900px) {
  .cmp-get-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "stage" "cards"; }
  .cmp-get-grid > .cmp-get-stage { margin-bottom: 24px; }
}

/* Day-in-the-life guides (resource-copilot-*.html): crumb and "Make it a team habit" spacing, moved out of inline styles */
.dl .rp-hero .ig-crumb { margin-bottom: 0; }
.dl .rp-get h2 { margin-top: 12px; }
.dl .rp-get .btn-row { margin-top: 22px; }
.dl .rp-get .rp-art { padding: 0; }

/* Cyber security page: the 35-second landscape video from the UK site, centred above "Layers of protection" (same play button as .aat-reel) */
.cyb-reel { width: 100%; aspect-ratio: 16 / 9; margin: 0 auto; }   /* full content width, lined up with the cards below; 16:9 keeps it unstretched */

/* Day-in-the-life guides: a prompt written over several lines (e.g. a numbered list) keeps its line breaks, on screen and when copied */
.rp-prompt p.dl-pre { white-space: pre-line; }