/*
Theme Name: West View IT
Theme URI: https://www.westviewit.co.uk
Author: West View IT
Description: Custom theme for West View IT - the IT company you won't have to call. Ported from the 2026 static site design: deep navy + orange, Bricolage Grotesque display type, the quiet line hero, checklist wall, scroll reveals.
Version: 1.8.0
Requires PHP: 8.0
License: Proprietary
Text Domain: westview
*/
/* ==========================================================================
   West View IT — style.css
   Palette: ink-deep #0B142B · ink #131F3D · navy #3A4563 · orange #F0913E
            ember #E76F1D · mist #A9B6D0 · paper #FFFFFF · paper-tint #F8F4EC (warm)
   Type:    Bricolage Grotesque (display) · Public Sans (body) · IBM Plex Mono (status)
   ========================================================================== */

:root {
  --ink-deep: #0B142B;
  --ink: #131F3D;
  --ink-soft: #1B2A50;
  --navy: #3A4563;
  --orange: #F0913E;
  --ember: #E76F1D;
  --ember-text: #B8540D; /* AA-passing orange for small text on light backgrounds */
  --mist: #A9B6D0;
  --mist-dim: #7787A8;
  --paper: #FFFFFF;
  /* Warm off-white for tinted sections. Was a cool blue-white (#F3F6FB) which
     read clinical; this warmer ivory makes the light sections feel inviting
     while the navy hero keeps its serious, secure tone. Pairs with the orange. */
  --paper-tint: #F8F4EC;
  --line-dark: rgba(169, 182, 208, 0.16);
  --line-light: rgba(58, 69, 99, 0.14);
  --font-display: "Bricolage Grotesque", "Segoe UI", sans-serif;
  --font-body: "Public Sans", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, monospace;
  --radius: 14px;
  --wrap: 1160px;
  --shadow-lift: 0 18px 45px -18px rgba(11, 20, 43, 0.45);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

[id] { scroll-margin-top: 90px; }

.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 100;
  background: var(--orange);
  color: var(--ink-deep);
  font-family: var(--font-display);
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus-visible { top: 12px; outline: 3px solid var(--ink-deep); }

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}
.card:focus-visible { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: rgba(240, 145, 62, 0.5); }

/* ---------- type ---------- */

h1, h2, h3 { font-family: var(--font-display); line-height: 1.08; letter-spacing: -0.015em; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ember-text);
  display: block;
  margin-bottom: 14px;
}
.on-dark .eyebrow { color: var(--orange); }

.lede { font-size: 1.2rem; color: var(--navy); max-width: 42em; }
.on-dark .lede { color: var(--mist); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  padding: 15px 28px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.btn-orange {
  background: linear-gradient(120deg, var(--orange), var(--ember));
  color: var(--ink-deep);
  font-weight: 700;
  box-shadow: 0 10px 28px -10px rgba(231, 111, 29, 0.65);
}
.btn-orange:hover { box-shadow: 0 16px 34px -10px rgba(231, 111, 29, 0.8); }

.btn-ghost { border-color: var(--line-dark); color: #fff; background: rgba(255, 255, 255, 0.04); }
.btn-ghost:hover { border-color: var(--orange); }

.btn-ghost-light { border-color: var(--line-light); color: var(--ink); background: transparent; }
.btn-ghost-light:hover { border-color: var(--ember); color: var(--ember); }

/* ---------- nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  background: rgba(11, 20, 43, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-dark);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.nav-inner {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 24px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-logo { flex: 0 0 auto; }
.nav-logo img { height: 38px; width: auto; transition: height 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s ease; }
.nav.is-scrolled {
  background: rgba(8, 15, 33, 0.94);
  border-bottom-color: rgba(169, 182, 208, 0.2);
  box-shadow: 0 14px 40px -26px rgba(0, 0, 0, 0.85);
}
.nav.is-scrolled .nav-inner { height: 62px; }
.nav.is-scrolled .nav-logo img { height: 32px; transform: translateY(-1px); }
.nav-links { position: relative; display: flex; align-items: center; gap: 4px; list-style: none; }
.nav-links > li { position: relative; z-index: 1; }
.nav-links a {
  position: relative;
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--mist);
  text-decoration: none;
  white-space: nowrap;
  padding: 9px 14px;
  border-radius: 999px;
  transition: color 0.2s ease, background 0.2s ease;
}
.nav-links a:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.nav-links a.active { color: #fff; }
.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 5px;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
  transition: opacity 0.2s ease;
}
.nav.nav-enhanced .nav-links a.active::after { opacity: 0; }
.nav-indicator {
  position: absolute;
  z-index: 0;
  height: 2px;
  left: 0;
  top: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--orange), #ffc072);
  box-shadow: 0 0 14px rgba(240, 145, 62, 0.55);
  opacity: 0;
  pointer-events: none;
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), width 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}
.nav-group { position: relative; }
.nav-group-toggle {
  display: block;
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--mist);
  white-space: nowrap;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.nav-group-toggle span { display: inline-block; margin-left: 3px; transition: transform 0.15s ease; }
.nav-group-toggle:hover, .nav-group-toggle:focus-visible, .nav-group.active .nav-group-toggle { color: #fff; background: rgba(255, 255, 255, 0.07); }
.nav-group.open .nav-group-toggle span { transform: rotate(180deg); }
.nav-submenu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  min-width: 228px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: rgba(11, 20, 43, 0.98);
  border: 1px solid var(--line-dark);
  border-radius: 14px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22);
  display: none;
}
.nav-group.open .nav-submenu { display: block; }
.nav-submenu a { padding: 10px 12px; white-space: normal; }
.nav-submenu--services {
  right: 50%;
  width: min(1040px, calc(100vw - 40px));
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border-color: rgba(169, 182, 208, 0.24);
  background: #091329;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.48);
  backdrop-filter: none;
  transform: translateX(50%);
}
.nav-group.open .nav-submenu--services { display: grid; }
.nav-services-overview { grid-column: 1 / -1; }
.nav-services-overview > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 18px;
  border: 1px solid rgba(240, 145, 62, 0.42);
  border-radius: 11px;
  background: linear-gradient(90deg, rgba(240, 145, 62, 0.12), rgba(240, 145, 62, 0.04));
}
.nav-services-overview span { color: #c5d0e5; font-size: 0.9rem; font-weight: 550; }
.nav-services-overview strong { color: #fff; font-size: 1.05rem; white-space: nowrap; }
.nav-services-overview b { color: var(--orange); }
.nav-services-group {
  min-height: 220px;
  padding: 18px 16px 14px;
  border: 1px solid rgba(169, 182, 208, 0.12);
  border-radius: 11px;
  background: #101c36;
}
.nav-services-label {
  display: block;
  margin: 0 8px 11px;
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nav-services-group ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nav-services-group--problems {
  grid-column: 1 / -1;
  min-height: 0;
}
.nav-services-group--problems ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.nav-services-group--problems a { height: 100%; }
.nav-services-group a {
  display: block;
  padding: 11px 9px;
  border-radius: 7px;
  color: #dce4f3;
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.35;
}
.nav-services-group a:hover,
.nav-services-group a.active { color: #fff; background: rgba(240, 145, 62, 0.11); }
.nav-cta { flex: 0 0 auto; padding: 11px 22px; font-size: 0.92rem; }
.nav-remote {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid rgba(169, 182, 208, 0.22);
  border-radius: 999px;
  color: var(--mist);
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.nav-remote svg { width: 17px; height: 17px; color: var(--orange); }
.nav-remote:hover { color: #fff; border-color: rgba(240, 145, 62, 0.55); background: rgba(240, 145, 62, 0.08); transform: translateY(-1px); }

.nav-burger {
  display: none;
  background: none;
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
}
.nav-burger span { display: block; width: 20px; height: 2px; background: #fff; margin: 4px 0; border-radius: 2px; }

@media (min-width: 1281px) and (max-width: 1490px) {
  .nav-cta { display: none; }
  .nav-inner { gap: 10px; }
  .nav-links > li > a, .nav-group-toggle { padding-left: 9px; padding-right: 9px; font-size: 0.88rem; }
  .nav-logo img { height: 34px; }
  .nav-remote { font-size: 0.82rem; padding-inline: 10px; }
}
@media (max-width: 1280px) {
  .nav-links {
    position: absolute;
    top: 74px;
    left: 0;
    right: 0;
    max-height: calc(100vh - 74px);
    overflow-y: auto;
    overscroll-behavior: contain;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px 20px 20px;
    background: rgba(11, 20, 43, 0.97);
    border-bottom: 1px solid var(--line-dark);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav.is-scrolled .nav-links { top: 62px; max-height: calc(100vh - 62px); }
  .nav-indicator { display: none; }
  .nav.nav-enhanced .nav-links a.active::after { opacity: 1; }
  .nav-links a { padding: 13px 14px; white-space: normal; }
  .nav-group { width: 100%; }
  .nav-group-toggle { width: 100%; padding: 13px 14px; text-align: left; }
  .nav-submenu { position: static; min-width: 0; margin: 2px 0 0 14px; padding: 4px 0; border: 0; border-left: 1px solid var(--line-dark); border-radius: 0; box-shadow: none; background: transparent; }
  .nav-submenu--services { width: auto; grid-template-columns: 1fr; gap: 2px; transform: none; }
  .nav-services-overview { grid-column: auto; }
  .nav-services-overview > a { align-items: flex-start; flex-direction: column; gap: 3px; margin: 0 10px 6px; }
  .nav-services-group { min-height: 0; padding: 12px 10px 8px; border: 0; background: transparent; }
  .nav-services-group--problems { grid-column: auto; }
  .nav-services-group--problems ul { grid-template-columns: 1fr; }
  .nav-submenu a { padding: 10px 14px; }
  .nav-burger { display: block; }
  .nav-cta { padding: 9px 16px; font-size: 0.85rem; }
  .nav-inner { gap: 12px; }
}
@media (max-width: 760px) {
  .nav-cta { display: none; }
}
@media (max-width: 480px) {
  .nav-logo img { height: 30px; }
  .nav.is-scrolled .nav-logo img { height: 28px; }
  .nav-remote { width: 42px; height: 42px; justify-content: center; padding: 0; }
  .nav-remote span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}

/* ---------- hero (home) ---------- */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  flex-direction: column;
  background:
    radial-gradient(1100px 520px at 82% -10%, rgba(240, 145, 62, 0.14), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(58, 69, 99, 0.55), transparent 62%),
    var(--ink-deep);
  color: #fff;
  padding: 178px 0 0;
  overflow: hidden;
}
.hero-content { position: relative; z-index: 2; }
.hero-team-visual {
  position: absolute;
  z-index: 1;
  top: 94px;
  right: 0;
  width: min(63vw, 1100px);
  pointer-events: none;
  /* Fade away the illustration's built-in monitoring line. The page already
     has its own Quietline below the hero; keeping just the team here avoids
     competing with the headline and gives every person room on the right. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 39%, #000 53%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 39%, #000 53%, #000 100%);
}
.hero-team-visual img { width: 100%; height: auto; }
@media (min-width: 1081px) and (max-width: 1320px) {
  .hero-team-visual { top: 118px; right: -2vw; width: min(68vw, 920px); opacity: 0.78; }
}
@media (max-width: 1080px) {
  .hero-team-visual { display: none; }
}
.hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.chip {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  color: var(--mist);
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.03);
}
.chip strong { color: var(--orange); font-weight: 600; }

.hero h1 {
  font-size: clamp(2.6rem, 6.2vw, 4.9rem);
  font-weight: 700;
  max-width: 13.5em;
}
.hero h1 .no-call {
  position: relative;
  color: var(--orange);
  white-space: nowrap;
}
.hero h1 .no-call::after {
  content: "";
  position: absolute;
  left: -2%;
  top: 54%;
  width: 104%;
  height: 0.09em;
  background: #fff;
  border-radius: 3px;
  transform: rotate(-2.5deg) scaleX(0);
  transform-origin: left center;
  animation: strike 0.5s ease-out 0.9s forwards;
}
@keyframes strike { to { transform: rotate(-2.5deg) scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .hero h1 .no-call::after { transform: rotate(-2.5deg) scaleX(1); }
}

.hero .lede { margin: 26px 0 36px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 70px; }
.hero > .quietline { margin-top: auto; }

/* ---------- the quiet line (signature) ---------- */

.quietline {
  position: relative;
  z-index: 2;
  /* Soft lift: a whisper of orange along the top edge + a faint upward glow,
     so the panel reads as "live" without shouting. */
  border-top: 1px solid rgba(240, 145, 62, 0.30);
  background: linear-gradient(180deg, rgba(240, 145, 62, 0.035), rgba(255, 255, 255, 0.02) 45%);
  box-shadow: 0 -20px 44px -30px rgba(240, 145, 62, 0.4);
}
.quietline-head {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 16px 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--mist-dim);
}
.quietline-status { display: flex; align-items: center; gap: 9px; color: var(--mist); }
.quietline-status .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
  animation: pulse-dot 2.4s ease-out infinite;
}
@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
.quietline canvas { display: block; width: 100%; height: 110px; }
.quietline-ticker {
  border-top: 1px solid var(--line-dark);
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--mist-dim);
  padding: 14px 24px;
  max-width: var(--wrap);
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
  mask-image: linear-gradient(to right, #000 82%, transparent);
}
.quietline-ticker .tick { color: #D5DDEC; transition: opacity 0.4s ease; }
.quietline-ticker .tick time { color: var(--orange); font-weight: 600; margin-right: 10px; }

/* Each new notification lands with a brief brightening that settles back —
   enough for the eye to catch the change, quiet again within a second. */
.quietline-ticker .tick.fresh { animation: tick-fresh 1.3s ease-out; }
@keyframes tick-fresh {
  0%   { color: #FFFFFF; text-shadow: 0 0 16px rgba(240, 145, 62, 0.5); }
  100% { color: #D5DDEC; text-shadow: none; }
}

/* LIVE pill — a small, quietly-glowing marker next to the monitoring label */
.quietline-live { display: inline-flex; align-items: center; gap: 10px; }
.live-pill {
  color: #4ADE80;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid rgba(74, 222, 128, 0.35);
  background: rgba(74, 222, 128, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .quietline-ticker .tick.fresh { animation: none; }
}

/* ---------- sections ---------- */

.section { padding: 96px 0; }
.section-dark { background: var(--ink-deep); color: #fff; }
.section-tint { background: var(--paper-tint); }
.section--snug { padding-top: 70px; }
.section--flush { padding-top: 0; }
.home-founder { padding: 64px 0 28px; }
.home-services { padding-top: 40px; }
.split h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin-bottom: 18px; }
.section-head { max-width: 640px; margin-bottom: 56px; }
.section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); font-weight: 700; margin-bottom: 16px; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- service cards ---------- */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cards { grid-template-columns: 1fr; } }

.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 34px 30px 30px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: rgba(240, 145, 62, 0.5); }
.card h3 { font-size: 1.35rem; }
.card p { color: var(--navy); font-size: 0.98rem; flex: 1; }
.card .card-go { font-family: var(--font-display); font-weight: 600; color: var(--ember-text); font-size: 0.95rem; }
.card .card-go::after { content: " →"; transition: margin 0.2s ease; }
.card:hover .card-go::after { margin-left: 5px; }

.card-index {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--orange);
}

.card-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(240, 145, 62, 0.16), rgba(231, 111, 29, 0.08));
  color: var(--ember);
}
.card-icon svg { width: 26px; height: 26px; }

/* dark variant (feature grids on service pages) */
.card-dark {
  background: var(--ink-soft);
  border-color: var(--line-dark);
  color: #fff;
}
.card-dark p { color: var(--mist); }
.card-dark:hover { border-color: var(--orange); box-shadow: 0 18px 45px -18px rgba(0, 0, 0, 0.6); }

.grid-2x3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .grid-2x3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2x3 { grid-template-columns: 1fr; } }

/* ---------- old way vs our way ---------- */

.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; }
@media (max-width: 900px) { .versus { grid-template-columns: 1fr; } }

.versus-col { border-radius: var(--radius); padding: 38px 34px; }
.versus-old { background: var(--paper-tint); border: 1px dashed var(--line-light); color: var(--navy); }
.versus-new {
  background: linear-gradient(160deg, var(--ink-soft), var(--ink-deep));
  color: #fff;
  border: 1px solid var(--line-dark);
  box-shadow: var(--shadow-lift);
}
.versus-col h3 { font-size: 1.25rem; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.versus-old h3 { color: var(--navy); }
.versus-list { list-style: none; display: grid; gap: 13px; }
.versus-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.99rem; }
.versus-list .mark { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 0.7rem; margin-top: 2px; }
.versus-old .mark { background: rgba(58, 69, 99, 0.12); color: var(--navy); }
.versus-new .mark { background: rgba(240, 145, 62, 0.2); color: var(--orange); }
.versus-new .versus-list li { color: #E8EDF7; }

/* ---------- benefits ticks ---------- */

.ticks { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 15px 30px; }
@media (max-width: 700px) { .ticks { grid-template-columns: 1fr; } }
.ticks li { display: flex; gap: 13px; align-items: flex-start; }
.ticks .tickmark {
  flex: none;
  width: 25px; height: 25px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--ember));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  margin-top: 3px;
}

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 36px; } }
.location-note { margin-top: 14px; color: var(--ember-text); font-family: var(--font-body); font-size: 0.86rem; font-weight: 700; }

/* ---------- coverage strip ---------- */

.coverage {
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  background: var(--ink-deep);
  color: var(--mist);
  padding: 26px 0;
}
.coverage-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.015em;
}
.coverage-label { color: var(--orange); letter-spacing: 0.12em; text-transform: uppercase; margin-right: 8px; }
.coverage .town { border: 1px solid var(--line-dark); border-radius: 999px; padding: 6px 14px; }
.coverage .town.hq { border-color: var(--orange); color: #fff; }
.coverage .town.hq::before { content: "◉ "; color: var(--orange); }
/* towns are links to their local pages — keep the chip look, add a quiet hover */
a.town { color: inherit; text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease; }
a.town:hover { border-color: var(--orange); color: #fff; }

/* ---------- quote ---------- */

.quote { max-width: 880px; margin: 0 auto; text-align: center; }
.quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.8vw, 2.05rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.quote blockquote::before { content: "“"; color: var(--orange); }
.quote blockquote::after { content: "”"; color: var(--orange); }
.quote cite {
  display: block;
  margin-top: 26px;
  font-style: normal;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
}
.section-dark .quote cite { color: var(--mist-dim); }
.quote cite strong { color: var(--ember-text); font-weight: 600; }
.section-dark .quote cite strong { color: var(--orange); }

/* ---------- CTA band ---------- */

.cta-band {
  background:
    radial-gradient(700px 300px at 15% 0%, rgba(255, 255, 255, 0.06), transparent 60%),
    linear-gradient(120deg, var(--ember), var(--orange));
  border-radius: 22px;
  color: var(--ink-deep);
  padding: 66px 56px;
  display: grid;
  grid-template-columns: 1.4fr auto;
  align-items: center;
  gap: 36px;
  box-shadow: 0 26px 60px -22px rgba(231, 111, 29, 0.55);
}
@media (max-width: 800px) {
  .cta-band { grid-template-columns: 1fr; padding: 48px 34px; }
  .cta-band > * { min-width: 0; }
  .cta-band .btn { width: 100%; justify-content: center; text-align: center; white-space: normal; }
  .cta-band .cta-founder { min-width: 0; }
  .cta-band .cta-founder-name { min-width: 0; overflow-wrap: anywhere; }
}
.cta-band h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: 12px; }
.cta-band p { color: rgba(11, 20, 43, 0.85); max-width: 34em; }
.cta-band .btn {
  background: var(--ink-deep);
  color: #fff;
  box-shadow: 0 14px 30px -12px rgba(11, 20, 43, 0.7);
  white-space: nowrap;
}
.cta-band .btn:hover { background: var(--ink); }
.cta-band .cta-sub { font-family: var(--font-mono); font-size: 0.82rem; margin-top: 12px; color: var(--ink-deep); letter-spacing: 0.05em; }

/* ---------- page hero (inner pages) ---------- */

.page-hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(900px 420px at 85% -20%, rgba(240, 145, 62, 0.16), transparent 60%),
    var(--ink-deep);
  color: #fff;
  padding: 168px 0 76px;
}
.page-hero > .wrap { position: relative; z-index: 2; }
.page-hero--visual { overflow: hidden; }
.page-hero-visual {
  position: absolute;
  z-index: 1;
  top: 70px;
  right: 0;
  width: min(62vw, 1100px);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 18%, #000 32%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 18%, #000 32%, #000 100%);
}
.page-hero-visual img { width: 100%; height: auto; }
/* The support scene includes its own monitoring line. Hide its left half so
   it cannot compete with the headline or duplicate the Quietline language. */
.page-hero--support .page-hero-visual {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 39%, #000 53%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 39%, #000 53%, #000 100%);
}
@media (min-width: 1081px) {
  .page-hero--visual { min-height: 590px; }
}
@media (min-width: 1081px) and (max-width: 1320px) {
  .page-hero-visual { top: 114px; right: -2vw; width: min(68vw, 920px); opacity: 0.78; }
}
@media (max-width: 1080px) {
  .page-hero-visual { display: none; }
}
.page-hero h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); font-weight: 700; max-width: 15em; }
.page-hero .lede { margin-top: 22px; }
.page-hero .hero-actions { margin: 34px 0 0; }
/* Breadcrumb trail on the dark hero (town pages) — small, muted, quiet. */
.page-hero .breadcrumbs { margin-bottom: 20px; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.55); }
.page-hero .breadcrumbs a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.page-hero .breadcrumbs a:hover { color: #fff; text-decoration: underline; }
.page-hero .breadcrumbs .breadcrumb_last { color: rgba(255, 255, 255, 0.9); }
/* HTML sitemap page */
.sitemap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 40px 36px; }
.sitemap-col h2 { font-size: 1.05rem; letter-spacing: 0.01em; margin: 0 0 14px; }
.sitemap-col ul { list-style: none; margin: 0; padding: 0; }
.sitemap-col li { margin: 8px 0; line-height: 1.4; }
.sitemap-col a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.sitemap-col a:hover { color: var(--orange); border-bottom-color: var(--orange); }

/* Real team photography as atmosphere, not a poster: the image fills the
   support hero while a directional navy treatment protects the copy and lets
   the people remain visible on the right. */
.page-hero--support-photo {
  min-height: 660px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: 154px 88px;
  background: var(--ink-deep);
}
.page-hero--support-photo .wrap { width: 100%; }
.page-hero--support-photo .wrap > * { max-width: 700px; }
.page-hero--support-photo h1,
.page-hero--support-photo .eyebrow,
.page-hero--support-photo .lede { text-shadow: 0 2px 22px rgba(7, 13, 29, 0.72); }
.page-hero-photo {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.page-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 62%;
  filter: brightness(0.76) saturate(0.72) contrast(1.06);
}
.page-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11, 20, 43, 0.95) 0%, rgba(11, 20, 43, 0.78) 18%, rgba(11, 20, 43, 0.56) 40%, rgba(11, 20, 43, 0.48) 60%, rgba(11, 20, 43, 0.36) 100%),
    linear-gradient(180deg, rgba(7, 13, 29, 0.28) 0%, transparent 38%, rgba(7, 13, 29, 0.38) 100%);
}
.page-hero--support-photo::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 260px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(11, 20, 43, 0.12) 18%,
    rgba(11, 20, 43, 0.48) 46%,
    rgba(11, 20, 43, 0.82) 70%,
    rgba(11, 20, 43, 0.97) 90%,
    var(--ink-deep) 100%
  );
  pointer-events: none;
}
.page-hero--support-photo + .section--snug { padding-top: 48px; }
/* On desktop the photograph scales with the browser width while its top edge
   moves by the same proportion. This keeps the team's faces in a consistent
   visual band below the navigation at any wide-screen resolution or zoom. */
@media (min-width: 1200px) {
  .page-hero-photo img {
    position: absolute;
    top: calc(110px - 26.7vw);
    left: 0;
    width: 100%;
    height: auto;
    object-fit: initial;
    object-position: center top;
  }
}
@media (max-width: 760px) {
  .page-hero--support-photo { min-height: 620px; padding-block: 126px 66px; }
  .page-hero-photo img { object-position: 61% 46%; }
  .page-hero-photo::after {
    background:
      linear-gradient(90deg, rgba(11, 20, 43, 0.91), rgba(11, 20, 43, 0.78)),
      linear-gradient(180deg, rgba(7, 13, 29, 0.35), transparent 38%, rgba(7, 13, 29, 0.48));
  }
}

/* ---------- managed Microsoft 365 ---------- */

.m365-managed-intro {
  background:
    radial-gradient(circle at 88% 12%, rgba(112, 77, 138, 0.1), transparent 32%),
    #fff;
}
.m365-managed-board {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 4vw, 44px);
  border: 1px solid rgba(169, 182, 208, 0.22);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 4%, rgba(112, 77, 138, 0.34), transparent 36%),
    #111d3a;
  box-shadow: 0 28px 70px -46px rgba(11, 20, 43, 0.9);
}
.m365-managed-status,
.m365-standard-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--mist);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  line-height: 1.4;
}
.m365-managed-status i,
.m365-standard-badge i {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 0 5px rgba(74, 222, 128, 0.1), 0 0 15px rgba(74, 222, 128, 0.42);
}
.m365-managed-board h3 {
  max-width: 24ch;
  margin: 25px 0 28px;
  color: #fff;
  font-size: clamp(1.55rem, 2.3vw, 2.1rem);
  line-height: 1.18;
}
.m365-managed-board ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(169, 182, 208, 0.17); }
.m365-managed-board li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  padding: 17px 0;
  border-bottom: 1px solid rgba(169, 182, 208, 0.17);
  color: #dbe3f1;
  line-height: 1.55;
}
.m365-managed-board li span { color: var(--orange); font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; }
.m365-standard-feature {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 10%, rgba(112, 77, 138, 0.42), transparent 32%),
    radial-gradient(circle, rgba(169, 182, 208, 0.1) 1px, transparent 1.5px),
    var(--ink-deep);
  background-size: auto, 32px 32px, auto;
  border-top: 1px solid rgba(240, 145, 62, 0.26);
  border-bottom: 1px solid var(--line-dark);
}
.m365-standard-feature-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(460px, 1.12fr);
  align-items: center;
  gap: clamp(54px, 8vw, 116px);
}
.m365-standard-feature h2 { max-width: 13ch; color: #fff; }
.m365-standard-feature .lede { max-width: 58ch; color: #c6d0e2; }
.m365-standard-badge { margin: 26px 0 30px; }
.m365-standard-cycle { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(169, 182, 208, 0.22); }
.m365-standard-cycle li {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(169, 182, 208, 0.22);
}
.m365-standard-cycle li > span { color: var(--orange); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; }
.m365-standard-cycle strong { display: block; margin-bottom: 5px; color: #fff; font-family: var(--font-display); font-size: 1.25rem; }
.m365-standard-cycle p { color: #b9c5da; font-size: 0.95rem; line-height: 1.55; }
@media (max-width: 960px) {
  .m365-standard-feature-grid { grid-template-columns: 1fr; }
  .m365-standard-feature h2 { max-width: 16ch; }
}
@media (max-width: 620px) {
  .m365-managed-board { padding: 28px 24px; }
  .m365-standard-cycle li { grid-template-columns: 40px 1fr; }
}

/* ---------- Microsoft 365 governance hero ---------- */

.governance-hero { padding: 126px 0 66px; overflow: hidden; }
.governance-hero-grid {
  max-width: 1460px;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(560px, 1.14fr);
  gap: clamp(42px, 5vw, 82px);
  align-items: center;
}
.governance-hero-copy h1 { max-width: 11.5em; font-size: clamp(2.65rem, 4.5vw, 4.75rem); line-height: 0.98; letter-spacing: -0.035em; }
.governance-hero-copy .lede { max-width: 57ch; }
.governance-framework {
  position: relative;
  padding: 28px;
  border: 1px solid rgba(169, 182, 208, 0.16);
  border-radius: calc(var(--radius) + 8px);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
  box-shadow: 0 34px 80px -48px rgba(0, 0, 0, 0.9);
}
.governance-framework::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -90px;
  top: -110px;
  border-radius: 50%;
  background: rgba(240, 145, 62, 0.12);
  filter: blur(50px);
  pointer-events: none;
}
.governance-framework h2 { position: relative; margin: 7px 0 8px; font-size: clamp(1.8rem, 2.3vw, 2.65rem); }
.governance-framework > p { position: relative; color: var(--mist); max-width: 58ch; margin-bottom: 20px; font-size: 0.95rem; }
.governance-framework .checkwall-frame { position: relative; padding: 22px; background: rgba(17, 29, 58, 0.88); }
.governance-framework .checkwall { grid-template-columns: repeat(auto-fill, minmax(22px, 1fr)); gap: 5px; }
.governance-framework .cw-box { border-radius: 5px; font-size: 0.58rem; }
.governance-framework .checkwall-meta { margin-bottom: 15px; }
.governance-framework .checkwall-count { font-size: 2rem; }
.governance-framework .checkwall-foot { margin-top: 16px; line-height: 1.5; }
@media (max-width: 1120px) {
  .governance-hero-grid { grid-template-columns: 1fr; max-width: 840px; }
  .governance-hero-copy h1 { max-width: 13em; }
}
@media (max-width: 620px) {
  .governance-hero { padding: 112px 0 42px; }
  .governance-hero-grid { gap: 28px; }
  .governance-hero-copy h1 { font-size: 2.25rem; line-height: 1.01; }
  .governance-hero-copy .lede { margin-top: 18px; font-size: 1rem; line-height: 1.55; }
  .governance-hero-copy .hero-actions { margin-top: 26px; }
  .governance-framework { padding: 20px; margin-inline: -6px; }
  .governance-framework .checkwall-frame { padding: 16px; }
  .governance-framework .checkwall { grid-template-columns: repeat(auto-fill, minmax(17px, 1fr)); gap: 4px; }
  .governance-framework .checkwall-label { display: none; }
}

/* ---------- page illustration bands ---------- */


/* ---------- about page ---------- */

.about-manifesto {
  position: relative;
  overflow: hidden;
  padding: clamp(74px, 8vw, 118px) 0;
  background:
    radial-gradient(circle at 82% 18%, rgba(112, 77, 138, 0.28), transparent 31%),
    radial-gradient(circle, rgba(169, 182, 208, 0.11) 1px, transparent 1.5px),
    var(--ink-deep);
  background-size: auto, 34px 34px, auto;
  border-top: 1px solid rgba(240, 145, 62, 0.28);
  border-bottom: 1px solid rgba(169, 182, 208, 0.16);
}
.about-manifesto .wrap {
  width: 100%;
  max-width: 1520px;
  padding-inline: clamp(32px, 4vw, 72px);
}
.about-manifesto::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(24px, 8vw, 140px);
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(240, 145, 62, 0.58), transparent);
}
.about-manifesto-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(420px, 0.75fr);
  align-items: center;
  gap: clamp(64px, 7vw, 112px);
}
.about-manifesto-copy h2 {
  max-width: 17ch;
  margin-top: 14px;
  color: #fff;
  font-size: clamp(2.35rem, 3.2vw, 3.8rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.about-manifesto-copy h2::before { content: "“"; color: var(--orange); }
.about-manifesto-copy h2::after { content: "”"; color: var(--orange); }
.about-manifesto-copy > p {
  max-width: 720px;
  margin-top: 28px;
  color: #C5CEE0;
  font-size: 1.08rem;
  line-height: 1.7;
}
.about-manifesto-copy cite {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-style: normal;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.about-manifesto-copy cite strong { color: var(--orange); }
.about-manifesto-copy cite span { color: var(--mist-dim); }
.about-manifesto-copy cite span::before { content: "·"; margin-right: 12px; color: var(--navy); }
.about-proof-board {
  width: 100%;
  max-width: 520px;
  justify-self: end;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid rgba(169, 182, 208, 0.3);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(35, 54, 101, 0.98), rgba(16, 29, 58, 0.98));
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.95), inset 0 1px rgba(255, 255, 255, 0.04);
}
.about-proof-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
}
.about-proof-status i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 0 5px rgba(74, 222, 128, 0.11), 0 0 18px rgba(74, 222, 128, 0.5);
}
.about-proof-intro {
  max-width: 32ch;
  margin-top: 24px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  font-weight: 600;
  line-height: 1.3;
}
.about-proof-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 32px;
  border-top: 1px solid rgba(169, 182, 208, 0.16);
  border-left: 1px solid rgba(169, 182, 208, 0.16);
}
.about-proof-facts div {
  min-height: 112px;
  padding: 22px 20px;
  border-right: 1px solid rgba(169, 182, 208, 0.16);
  border-bottom: 1px solid rgba(169, 182, 208, 0.16);
}
.about-proof-facts dt {
  color: var(--mist-dim);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.about-proof-facts dd {
  margin-top: 10px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.95rem);
  font-weight: 700;
  line-height: 1.05;
}
.about-review-kpi,
.about-metric-kpi {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
}
.about-review-kpi {
  color: inherit;
  text-decoration: none;
}
.about-review-kpi span,
.about-metric-kpi span { white-space: nowrap; }
.about-review-kpi b {
  color: var(--orange);
  font-size: 0.76em;
}
.about-review-kpi small,
.about-metric-kpi small {
  color: var(--mist);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.about-review-kpi:hover small { color: #fff; }
.about-proof-note {
  margin: 14px 0 0;
  color: var(--mist-dim);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

/* ---------- services hub ---------- */
.services-hero .wrap { max-width: 1040px; }
.services-hero h1 { max-width: 14ch; }
.services-hero .lede { max-width: 760px; }
.services-routes {
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 4%, rgba(112, 77, 138, 0.12), transparent 30%),
    #f7f8fc;
}
.services-routes .section-head { max-width: 840px; }
.services-pillar-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
  margin-top: 52px;
}
.services-pillar-card {
  --pillar-accent: var(--orange);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 30px 30px;
  overflow: hidden;
  border: 1px solid rgba(22, 38, 76, 0.12);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 28px 70px -54px rgba(10, 20, 43, 0.7);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.services-pillar-card--it {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(250px, 0.8fr) minmax(0, 1.45fr);
  grid-template-rows: auto auto auto 1fr;
  column-gap: clamp(36px, 6vw, 82px);
}
.services-pillar-card--cyber { grid-column: span 7; }
.services-pillar-card--ai { grid-column: span 5; }
.services-pillar-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--pillar-accent);
}
.services-pillar-card::after {
  content: "";
  position: absolute;
  top: -110px;
  right: -90px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--pillar-accent) 10%, transparent);
  pointer-events: none;
}
.services-pillar-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--pillar-accent) 38%, transparent);
  box-shadow: 0 34px 80px -52px rgba(10, 20, 43, 0.86);
}
.services-pillar-card--cyber { --pillar-accent: #263e76; }
.services-pillar-card--ai { --pillar-accent: #704d8a; }
.services-pillar-topline {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 34px;
}
.services-pillar-topline span {
  color: var(--pillar-accent);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}
.services-pillar-topline b {
  color: rgba(11, 25, 54, 0.08);
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 0.7;
}
.services-pillar-card h3 {
  position: relative;
  z-index: 1;
  max-width: 13ch;
  margin-bottom: 18px;
  font-size: clamp(1.65rem, 2.4vw, 2.25rem);
  line-height: 1.03;
}
.services-pillar-card > p {
  max-width: 58ch;
  color: var(--text);
  font-size: 1.02rem;
  line-height: 1.7;
}
.services-pillar-fit {
  margin: 24px 0 28px;
  padding: 15px 17px;
  border-left: 3px solid var(--pillar-accent);
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--pillar-accent) 7%, #fff);
  font-size: 0.92rem !important;
}
.services-pillar-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding-top: 4px;
}
.services-pillar-card--it .services-pillar-links {
  grid-column: 2;
  grid-row: 2 / 5;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  margin-top: 0;
  padding-top: 0;
}
.services-pillar-card--it .services-pillar-link--featured {
  grid-column: 1 / -1;
  min-height: 82px;
  border-color: color-mix(in srgb, var(--pillar-accent) 38%, transparent);
  background: color-mix(in srgb, var(--pillar-accent) 9%, #fff);
}
.services-pillar-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 92px;
  padding: 16px 17px;
  border: 1px solid color-mix(in srgb, var(--pillar-accent) 22%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--pillar-accent) 5%, #fff);
  box-shadow: 0 10px 24px -22px rgba(10, 20, 43, 0.7);
  color: var(--ink);
  text-decoration: none;
  transition: color 0.18s ease, transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.services-pillar-links a:hover {
  transform: translateY(-2px);
  border-color: var(--pillar-accent);
  background: color-mix(in srgb, var(--pillar-accent) 9%, #fff);
  box-shadow: 0 16px 30px -22px rgba(10, 20, 43, 0.78);
  color: var(--pillar-accent);
}
.services-pillar-links a > span { display: grid; gap: 4px; }
.services-pillar-links strong {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.25;
}
.services-pillar-links small { color: #64708a; font-size: 0.77rem; line-height: 1.4; }
.services-pillar-links a > b {
  display: grid;
  width: 30px;
  height: 30px;
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: var(--pillar-accent);
  color: #fff;
  font-size: 1rem;
  transition: transform 0.18s ease;
}
.services-pillar-links a:hover > b { transform: translateX(2px); }
.services-position-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 50px;
}
.services-position-card {
  --position-accent: var(--orange);
  position: relative;
  display: flex;
  min-height: 360px;
  flex-direction: column;
  padding: clamp(30px, 4vw, 42px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--position-accent) 38%, transparent);
  border-radius: 22px;
  background: #fff;
  box-shadow: inset 0 5px 0 var(--position-accent), 0 28px 70px -54px rgba(10, 20, 43, 0.7);
}
.services-position-card--co { --position-accent: #6679b9; }
.services-position-card__top { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.services-position-card__top span { padding: 7px 10px; border-radius: 999px; color: color-mix(in srgb, var(--position-accent) 72%, var(--ink)); background: color-mix(in srgb, var(--position-accent) 12%, #fff); font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.09em; }
.services-position-card__top b { color: color-mix(in srgb, var(--position-accent) 20%, transparent); font-family: var(--font-display); font-size: 3rem; line-height: 1; }
.services-position-card h3 { max-width: 17ch; margin: 28px 0 16px; font-size: clamp(1.75rem, 3vw, 2.35rem); }
.services-position-card > p { color: var(--navy); font-size: 0.97rem; line-height: 1.65; }
.services-position-card > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: auto;
  padding: 15px 17px;
  border-radius: 11px;
  color: var(--ink-deep);
  background: color-mix(in srgb, var(--position-accent) 14%, #fff);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
}
.services-position-card > a:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--position-accent) 22%, #fff); }
.services-position-or { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; place-items: center; width: 46px; height: 46px; border: 5px solid #f7f8fc; border-radius: 50%; color: #fff; background: var(--ink-deep); font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; transform: translate(-50%, -50%); }
.services-flow-bridge { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 28px 0; color: var(--navy); font-size: 0.88rem; font-weight: 600; text-align: center; }
.services-flow-bridge span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: var(--ink-deep); }
.services-route-stage { padding: clamp(30px, 4vw, 42px); border: 1px solid var(--line-light); border-radius: 22px; background: #fff; box-shadow: 0 24px 62px -50px rgba(10, 20, 43, 0.62); }
.services-route-stage + .services-route-stage { margin-top: 24px; }
.services-route-stage--specialist { color: #fff; border-color: var(--line-dark); background: linear-gradient(145deg, var(--ink-soft), var(--ink-deep)); }
.services-route-stage__head { display: grid; grid-template-columns: minmax(170px, 0.42fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 70px); align-items: start; }
.services-route-stage__head > span { color: var(--ember-text); font-family: var(--font-mono); font-size: 0.67rem; font-weight: 700; letter-spacing: 0.11em; }
.services-route-stage--specialist .services-route-stage__head > span { color: var(--orange); }
.services-route-stage__head h3 { font-size: clamp(1.65rem, 3vw, 2.25rem); }
.services-route-stage__head p { margin-top: 8px; color: var(--navy); font-size: 0.92rem; }
.services-route-stage--specialist .services-route-stage__head p { color: var(--mist); }
.services-outcome-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.services-outcome-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.services-outcome-grid a {
  display: grid;
  grid-template-columns: 28px 1fr 24px;
  gap: 10px;
  align-items: start;
  min-height: 150px;
  padding: 19px 17px;
  border: 1px solid var(--line-light);
  border-radius: 13px;
  color: var(--ink);
  background: var(--paper-tint);
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.services-route-stage--specialist .services-outcome-grid a { color: #fff; border-color: var(--line-dark); background: rgba(255, 255, 255, 0.04); }
.services-outcome-grid a:hover { transform: translateY(-3px); border-color: rgba(240, 145, 62, 0.55); background: #fff; }
.services-route-stage--specialist .services-outcome-grid a:hover { background: rgba(255, 255, 255, 0.08); }
.services-outcome-grid a > span { color: var(--ember-text); font-family: var(--font-mono); font-size: 0.65rem; font-weight: 700; }
.services-route-stage--specialist .services-outcome-grid a > span { color: var(--orange); }
.services-outcome-grid a > div { display: grid; gap: 6px; }
.services-outcome-grid strong { font-family: var(--font-display); font-size: 0.98rem; line-height: 1.28; }
.services-outcome-grid small { color: #64708a; font-size: 0.76rem; line-height: 1.45; }
.services-route-stage--specialist .services-outcome-grid small { color: var(--mist); }
.services-outcome-grid a > b { color: var(--orange); font-size: 1rem; transition: transform 0.18s ease; }
.services-outcome-grid a:hover > b { transform: translateX(2px); }
.services-route-tools { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; padding: 21px 24px; border: 1px solid var(--line-light); border-radius: 14px; background: rgba(255, 255, 255, 0.72); }
.services-route-tools > span { color: var(--navy); font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em; }
.services-route-tools > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 22px; }
.services-route-tools a { color: var(--ink); font-family: var(--font-display); font-size: 0.84rem; font-weight: 700; text-decoration-color: rgba(240, 145, 62, 0.5); text-underline-offset: 4px; }
.services-problem {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 24%, rgba(112, 77, 138, 0.3), transparent 34%),
    var(--ink-deep);
}
.services-problem::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image: radial-gradient(rgba(255,255,255,0.45) 0.8px, transparent 0.8px);
  background-size: 28px 28px;
  pointer-events: none;
}
.services-problem .wrap { position: relative; z-index: 1; }
.services-problem .section-head { max-width: 820px; }
.services-problem .section-head h2 { color: #fff; }
.services-problem-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 48px;
}
.services-problem-link {
  display: flex;
  min-height: 150px;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  gap: 24px;
  padding: 26px 28px;
  border: 1px solid rgba(171, 188, 224, 0.18);
  border-radius: 17px;
  background: rgba(21, 39, 78, 0.72);
  color: #fff;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.services-problem-link:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 130, 32, 0.56);
  background: rgba(34, 52, 93, 0.9);
}
.services-problem-link > span {
  max-width: 34ch;
  color: #f5f7fc;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 650;
  line-height: 1.3;
}
.services-problem-link strong {
  color: var(--mist);
  font-size: 0.9rem;
}
.services-problem-link b { color: var(--orange); }
.services-problem-link--wide {
  grid-column: 1 / -1;
  min-height: 0;
  align-items: center;
  flex-direction: row;
}

/* ---------- co-managed IT support ---------- */

.comanaged-hero .service-hero-copy { max-width: 880px; }
.comanaged-hero .service-hero-copy h1 { max-width: 13.2em; }
.proof-ribbon--comanaged strong { min-width: fit-content; }

.comanaged-pressure-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(430px, 1.12fr);
  gap: clamp(56px, 8vw, 110px);
  align-items: center;
}
.comanaged-pressure-layout h2 { max-width: 15ch; font-size: clamp(2rem, 4vw, 3.2rem); }
.comanaged-pressure-layout .lede { margin: 22px 0 20px; }
.comanaged-pressure-board {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border: 1px solid rgba(169, 182, 208, 0.2);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(240, 145, 62, 0.16), transparent 34%),
    linear-gradient(145deg, var(--ink-soft), var(--ink-deep));
  box-shadow: 0 32px 70px -48px rgba(7, 13, 29, 0.92);
}
.comanaged-pressure-board::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image: radial-gradient(rgba(255,255,255,0.45) 0.7px, transparent 0.7px);
  background-size: 24px 24px;
  pointer-events: none;
}
.comanaged-pressure-board > * { position: relative; z-index: 1; }
.comanaged-pressure-board__status {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--mist);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.comanaged-pressure-board__status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 5px rgba(240, 145, 62, 0.1), 0 0 18px rgba(240, 145, 62, 0.65);
}
.comanaged-pressure-board h3 {
  max-width: 15ch;
  margin: 26px 0 24px;
  color: #fff;
  font-size: clamp(1.65rem, 3vw, 2.2rem);
}
.comanaged-pressure-board ul { display: grid; margin: 0; padding: 0; list-style: none; }
.comanaged-pressure-board li {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 15px;
  padding: 16px 0;
  border-top: 1px solid var(--line-dark);
}
.comanaged-pressure-board li > span {
  color: var(--orange);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.comanaged-pressure-board li strong {
  display: block;
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.98rem;
}
.comanaged-pressure-board li small { display: block; margin-top: 4px; color: var(--mist); font-size: 0.78rem; line-height: 1.45; }

.comanaged-one-team {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 100%, rgba(240, 145, 62, 0.08), transparent 32%),
    #fff;
}
.comanaged-one-team .section-head { max-width: 820px; }
.comanaged-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.comanaged-lane {
  position: relative;
  min-height: 360px;
  padding: 32px 30px;
  overflow: hidden;
  border: 1px solid var(--line-light);
  border-top: 4px solid var(--navy);
  border-radius: 0 0 16px 16px;
  background: #fff;
  box-shadow: 0 24px 55px -48px rgba(11, 20, 43, 0.72);
}
.comanaged-lane--shared { border-top-color: var(--orange); background: var(--paper-tint); }
.comanaged-lane--wvit {
  border-color: var(--line-dark);
  border-top-color: var(--orange);
  background: linear-gradient(145deg, var(--ink-soft), var(--ink-deep));
}
.comanaged-lane > span {
  color: var(--ember-text);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
}
.comanaged-lane--wvit > span { color: var(--orange); }
.comanaged-lane h3 { margin: 34px 0 24px; font-size: 1.65rem; }
.comanaged-lane--wvit h3 { color: #fff; }
.comanaged-lane ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.comanaged-lane li {
  position: relative;
  padding-left: 22px;
  color: var(--navy);
  font-size: 0.92rem;
  line-height: 1.55;
}
.comanaged-lane li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--ember-text);
  font-weight: 800;
}
.comanaged-lane--wvit li { color: var(--mist); }
.comanaged-lane--wvit li::before { color: var(--orange); }

.comanaged-options .route-card { min-height: 330px; }
.comanaged-options .route-card > strong { line-height: 1.4; }

.comanaged-split-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(440px, 1.18fr);
  gap: clamp(56px, 8vw, 110px);
  align-items: start;
}
.comanaged-split-layout h2 { max-width: 15ch; font-size: clamp(2rem, 4vw, 3.15rem); }
.comanaged-split-layout .lede { margin-top: 22px; }
.comanaged-split-list {
  display: grid;
  border-top: 1px solid var(--line-light);
}
.comanaged-split-list > div {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 6px 22px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-light);
}
.comanaged-split-list span {
  grid-row: 1 / span 2;
  color: var(--ember-text);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.11em;
}
.comanaged-split-list strong { color: var(--ink); font-family: var(--font-display); font-size: 1.02rem; line-height: 1.35; }
.comanaged-split-list p { color: var(--navy); font-size: 0.88rem; line-height: 1.55; }

.comanaged-faq .faq-item { border-color: var(--line-dark); background: rgba(255, 255, 255, 0.045); }
.comanaged-faq .faq-item summary { color: #fff; }
.comanaged-faq .faq-item p { color: var(--mist); }
.comanaged-compare-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 28px;
  padding: 23px 25px;
  border: 1px solid rgba(240, 145, 62, 0.3);
  border-radius: 14px;
  background: rgba(240, 145, 62, 0.07);
}
.comanaged-compare-link span { color: var(--navy); font-weight: 600; }
.comanaged-compare-link a { flex: none; color: var(--ember-text); font-family: var(--font-display); font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 4px; }

@media (max-width: 980px) {
  .comanaged-pressure-layout,
  .comanaged-split-layout { grid-template-columns: 1fr; }
  .comanaged-pressure-board { width: min(650px, 100%); }
  .comanaged-lanes { grid-template-columns: 1fr; }
  .comanaged-lane { min-height: 0; }
}
@media (max-width: 620px) {
  .comanaged-hero .service-hero-copy h1 { font-size: clamp(2.25rem, 10.5vw, 2.75rem); }
  .comanaged-pressure-board { padding: 24px 21px; }
  .comanaged-pressure-board h3 { margin-top: 22px; }
  .comanaged-split-list > div { grid-template-columns: 1fr; gap: 7px; }
  .comanaged-split-list span { grid-row: auto; }
  .comanaged-compare-link { align-items: flex-start; flex-direction: column; }
}

/* ---------- support model comparison ---------- */

.support-model-hero .service-hero-copy { max-width: 860px; }
.support-model-hero .service-hero-copy h1 { max-width: 13.5em; }
.support-model-answer .section-head,
.support-model-compare-section .section-head,
.support-model-choice .section-head { max-width: 820px; }
.support-model-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.support-model-card {
  display: flex;
  min-height: 500px;
  flex-direction: column;
  padding: clamp(30px, 4vw, 46px);
  overflow: hidden;
  border: 1px solid var(--line-light);
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 28px 70px -54px rgba(11, 20, 43, 0.78);
}
.support-model-card--managed {
  color: #fff;
  border-color: var(--line-dark);
  background:
    radial-gradient(circle at 100% 0%, rgba(240, 145, 62, 0.18), transparent 35%),
    linear-gradient(145deg, var(--ink-soft), var(--ink-deep));
}
.support-model-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line-light);
}
.support-model-card--managed .support-model-card__top { border-bottom-color: var(--line-dark); }
.support-model-card__top span { color: var(--ember-text); font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.13em; }
.support-model-card--managed .support-model-card__top span { color: var(--orange); }
.support-model-card__top small { color: var(--navy); font-size: 0.78rem; font-weight: 700; }
.support-model-card--managed .support-model-card__top small { color: var(--mist); }
.support-model-card h3 { max-width: 15ch; margin: 34px 0 18px; font-size: clamp(1.65rem, 3vw, 2.25rem); }
.support-model-card > p { color: var(--navy); font-size: 0.96rem; }
.support-model-card--managed > p { color: var(--mist); }
.support-model-card ul { display: grid; gap: 12px; margin: 27px 0 30px; padding: 0; list-style: none; }
.support-model-card li { position: relative; padding-left: 23px; color: var(--navy); font-size: 0.91rem; }
.support-model-card li::before { content: "✓"; position: absolute; left: 0; color: var(--ember-text); font-weight: 800; }
.support-model-card--managed li { color: var(--mist); }
.support-model-card--managed li::before { color: var(--orange); }
.support-model-card > a { margin-top: auto; color: var(--ember-text); font-family: var(--font-display); font-weight: 700; text-decoration: none; }
.support-model-card--managed > a { color: var(--orange); }
.support-model-card > a b { display: inline-block; transition: transform 0.18s ease; }
.support-model-card > a:hover b { transform: translateX(3px); }
.support-model-compare-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 18%, rgba(112, 77, 138, 0.3), transparent 32%),
    var(--ink-deep);
}
.support-model-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(169, 182, 208, 0.22);
  border-radius: 17px;
  box-shadow: 0 28px 70px -40px rgba(0, 0, 0, 0.85);
}
.support-model-table-hint { display: none; }
.support-model-table { width: 100%; min-width: 760px; border-collapse: collapse; background: #101c36; }
.support-model-table caption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.support-model-table th,
.support-model-table td { padding: 21px 24px; border-bottom: 1px solid var(--line-dark); text-align: left; vertical-align: top; }
.support-model-table thead th { color: #fff; background: #17274a; font-family: var(--font-display); font-size: 0.96rem; }
.support-model-table thead th:first-child { background: #081126; }
.support-model-table thead th:nth-child(2) { box-shadow: inset 0 4px 0 var(--orange); }
.support-model-table tbody th { width: 23%; color: #fff; background: rgba(255, 255, 255, 0.025); font-family: var(--font-display); font-size: 0.94rem; }
.support-model-table tbody td { width: 38.5%; color: var(--mist); font-size: 0.9rem; }
.support-model-table tbody td:nth-child(2) { color: #f4f6fb; background: rgba(240, 145, 62, 0.055); }
.support-model-table tr:last-child > * { border-bottom: 0; }
.support-model-ownership__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(430px, 1.15fr);
  gap: clamp(54px, 8vw, 110px);
  align-items: center;
}
.support-model-ownership__grid h2 { max-width: 14ch; font-size: clamp(2rem, 4vw, 3.2rem); }
.support-model-ownership__grid .lede { margin: 22px 0 18px; }
.support-model-ownership__lanes { display: grid; gap: 10px; }
.support-model-ownership__lanes > div {
  display: grid;
  grid-template-columns: 116px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 22px 23px;
  border: 1px solid var(--line-light);
  border-left: 4px solid var(--navy);
  border-radius: 0 13px 13px 0;
  background: #fff;
}
.support-model-ownership__lanes > div:nth-child(2) { border-left-color: var(--orange); background: var(--paper-tint); }
.support-model-ownership__lanes > div:nth-child(3) { border-color: var(--line-dark); border-left-color: var(--orange); background: var(--ink-soft); }
.support-model-ownership__lanes span { color: var(--ember-text); font-family: var(--font-mono); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; }
.support-model-ownership__lanes strong { color: var(--ink); font-family: var(--font-display); font-size: 0.96rem; line-height: 1.35; }
.support-model-ownership__lanes i { padding: 6px 9px; border-radius: 999px; color: var(--navy); background: rgba(58, 69, 99, 0.08); font-family: var(--font-mono); font-size: 0.57rem; font-style: normal; white-space: nowrap; }
.support-model-ownership__lanes > div:nth-child(3) span,
.support-model-ownership__lanes > div:nth-child(3) i { color: var(--orange); }
.support-model-ownership__lanes > div:nth-child(3) strong { color: #fff; }
.support-model-ownership__lanes > div:nth-child(3) i { background: rgba(240, 145, 62, 0.09); }
.support-model-faq .faq-item,
.pricing-faq .faq-item { border-color: var(--line-dark); background: rgba(255, 255, 255, 0.045); }
.support-model-faq .faq-item summary,
.pricing-faq .faq-item summary { color: #fff; }
.support-model-faq .faq-item p,
.pricing-faq .faq-item p { color: var(--mist); }

/* ---------- business IT support pricing ---------- */

.service-hero--pricing { background: linear-gradient(145deg, #081126 0%, #172c53 56%, #0b142b 100%); }
.service-hero--pricing .service-hero-copy h1 { max-width: 12.5em; font-size: clamp(2.55rem, 4.8vw, 4.2rem); }
.pricing-hero-board {
  position: relative;
  display: grid;
  gap: 10px;
  justify-self: end;
  width: min(470px, 100%);
  padding: 25px;
  border: 1px solid rgba(169, 182, 208, 0.22);
  border-radius: 20px;
  background: rgba(7, 15, 33, 0.76);
  box-shadow: 0 34px 80px -28px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(9px);
}
.pricing-hero-board::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(240, 145, 62, 0.7), transparent 35%, rgba(169, 182, 208, 0.2));
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.pricing-hero-board__head { display: flex; justify-content: space-between; padding: 1px 3px 8px; color: var(--mist-dim); font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; }
.pricing-hero-board__head strong { color: var(--orange); font-weight: 600; }
.pricing-hero-factor {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 13px;
  align-items: center;
  padding: 15px 16px;
  border: 1px solid var(--line-dark);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.045);
}
.pricing-hero-factor > span { color: var(--orange); font-family: var(--font-mono); font-size: 0.67rem; }
.pricing-hero-factor strong { display: block; color: #fff; font-family: var(--font-display); font-size: 0.92rem; }
.pricing-hero-factor small { display: block; margin-top: 3px; color: var(--mist); font-size: 0.7rem; line-height: 1.35; }
.pricing-hero-factor i { padding: 5px 8px; border-radius: 999px; color: #f2c590; background: rgba(240, 145, 62, 0.09); font-family: var(--font-mono); font-size: 0.55rem; font-style: normal; }
.pricing-hero-board > p { margin-top: 4px; padding: 16px 17px; border-radius: 11px; color: var(--ink-deep); background: linear-gradient(135deg, #ffbe75, var(--orange), var(--ember)); font-family: var(--font-display); font-size: 0.92rem; font-weight: 700; }
.pricing-hero-board > p span { margin-right: 8px; }
.pricing-drivers .section-head,
.pricing-options .section-head,
.pricing-quote .section-head { max-width: 820px; }
.pricing-driver-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.pricing-driver {
  min-height: 300px;
  padding: 28px 25px;
  border: 1px solid var(--line-light);
  border-top: 4px solid var(--orange);
  border-radius: 0 0 15px 15px;
  background: #fff;
  box-shadow: 0 18px 46px -40px rgba(11, 20, 43, 0.75);
}
.pricing-driver > span { color: var(--ember-text); font-family: var(--font-mono); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.11em; }
.pricing-driver h3 { margin: 35px 0 14px; font-size: 1.28rem; }
.pricing-driver p { color: var(--navy); font-size: 0.9rem; line-height: 1.58; }
.pricing-support-difference {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 100%, rgba(240, 145, 62, 0.11), transparent 32%),
    var(--ink-deep);
}
.pricing-support-difference .section-head { max-width: 830px; }
.pricing-support-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pricing-support-card {
  padding: clamp(30px, 4vw, 42px);
  border: 1px solid var(--line-dark);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.04);
}
.pricing-support-card--not-offered { border-color: rgba(232, 82, 82, 0.48); box-shadow: inset 0 4px 0 #e85252; }
.pricing-support-card--managed { border-color: rgba(82, 196, 120, 0.55); background: linear-gradient(145deg, rgba(27, 42, 80, 0.94), rgba(12, 22, 46, 0.97)); box-shadow: inset 0 4px 0 #52c478; }
.pricing-support-card__label { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 21px; border-bottom: 1px solid var(--line-dark); }
.pricing-support-card__label-main { display: flex; align-items: center; gap: 11px; min-width: 0; }
.pricing-support-card__label-main strong { color: var(--orange); font-family: var(--font-mono); font-size: 0.67rem; font-weight: 700; letter-spacing: 0.12em; }
.pricing-support-card--not-offered .pricing-support-card__label-main strong { color: #ff9b9b; }
.pricing-support-card--managed .pricing-support-card__label-main strong { color: #8de4aa; }
.pricing-support-card__status { display: inline-grid; place-items: center; flex: 0 0 31px; width: 31px; height: 31px; border: 1px solid currentColor; border-radius: 50%; font-family: var(--font-display); font-size: 1.08rem; font-weight: 800; line-height: 1; }
.pricing-support-card__status--negative { color: #ff7777; background: rgba(232, 82, 82, 0.14); }
.pricing-support-card__status--positive { color: #74dc96; background: rgba(82, 196, 120, 0.14); }
.pricing-support-card__label i { color: var(--mist); font-size: 0.75rem; font-style: normal; }
.pricing-support-card h3 { max-width: 16ch; margin: 32px 0 17px; color: #fff; font-size: clamp(1.55rem, 3vw, 2.1rem); }
.pricing-support-card > p { color: var(--mist); font-size: 0.93rem; }
.pricing-support-card ul { display: grid; gap: 11px; margin: 26px 0 0; padding: 0; list-style: none; }
.pricing-support-card li { position: relative; padding-left: 22px; color: var(--mist); font-size: 0.88rem; }
.pricing-support-card li::before { content: "→"; position: absolute; left: 0; color: var(--orange); }
.pricing-model-decision {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 24px;
  padding: 25px 28px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--ink-deep), var(--ink-soft));
}
.pricing-model-decision > div:first-child { display: grid; gap: 4px; }
.pricing-model-decision > div:first-child span { color: var(--orange); font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.11em; }
.pricing-model-decision > div:first-child strong { font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.25; }
.pricing-model-decision__routes { display: flex; gap: 10px; flex: 0 0 auto; }
.pricing-model-decision__routes span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--line-dark); border-radius: 999px; color: var(--mist); font-size: 0.78rem; white-space: nowrap; }
.pricing-model-decision__routes b { display: inline-grid; place-items: center; min-width: 31px; height: 24px; padding: 0 8px; border-radius: 999px; color: var(--ink-deep); background: var(--orange); font-family: var(--font-display); }
.pricing-model-decision__routes span:last-child b { color: #fff; background: #6679b9; }
.pricing-model-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pricing-model-card {
  display: flex;
  min-height: 610px;
  flex-direction: column;
  padding: clamp(30px, 4vw, 42px);
  border: 1px solid var(--line-light);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 62px -42px rgba(11, 20, 43, 0.7);
}
.pricing-model-card--full { border-color: rgba(240, 145, 62, 0.48); box-shadow: inset 0 5px 0 var(--orange), 0 24px 62px -42px rgba(11, 20, 43, 0.7); }
.pricing-model-card--co { border-color: rgba(102, 121, 185, 0.5); box-shadow: inset 0 5px 0 #6679b9, 0 24px 62px -42px rgba(11, 20, 43, 0.7); }
.pricing-model-card__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pricing-model-card__head span { padding: 7px 10px; border-radius: 999px; color: var(--ember-text); background: rgba(240, 145, 62, 0.12); font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.09em; }
.pricing-model-card--co .pricing-model-card__head span { color: #43548f; background: rgba(102, 121, 185, 0.13); }
.pricing-model-card__head i { color: var(--mist-dim); font-family: var(--font-mono); font-size: 0.72rem; font-style: normal; }
.pricing-model-card h3 { margin: 28px 0 10px; color: var(--ink); font-size: clamp(1.75rem, 3vw, 2.3rem); }
.pricing-model-card__promise { min-height: 58px; color: var(--navy); font-size: 1rem; font-weight: 600; line-height: 1.5; }
.pricing-model-card dl { display: grid; margin: 29px 0 0; }
.pricing-model-card dl > div { display: grid; grid-template-columns: 145px 1fr; gap: 18px; padding: 17px 0; border-top: 1px solid var(--line-light); }
.pricing-model-card dt { color: var(--ember-text); font-family: var(--font-mono); font-size: 0.63rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.pricing-model-card--co dt { color: #43548f; }
.pricing-model-card dd { color: var(--navy); font-size: 0.88rem; line-height: 1.5; }
.pricing-model-card > a { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: auto; padding: 15px 17px; border-radius: 10px; color: var(--ink-deep); background: rgba(240, 145, 62, 0.13); font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; text-decoration: none; transition: transform 0.2s ease, background 0.2s ease; }
.pricing-model-card--co > a { color: #293764; background: rgba(102, 121, 185, 0.13); }
.pricing-model-card > a:hover { transform: translateY(-2px); background: rgba(240, 145, 62, 0.21); }
.pricing-model-card--co > a:hover { background: rgba(102, 121, 185, 0.21); }
.pricing-model-or { position: absolute; z-index: 2; top: 52px; left: 50%; display: grid; place-items: center; width: 44px; height: 44px; border: 4px solid #fff; border-radius: 50%; color: #fff; background: var(--ink-deep); font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; transform: translateX(-50%); }
.pricing-context-intro { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin: 70px 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line-light); }
.pricing-context-intro span { color: var(--navy); font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; }
.pricing-context-intro p { max-width: 650px; color: var(--navy); font-size: 0.92rem; text-align: right; }
.pricing-option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pricing-option {
  display: flex;
  min-height: 450px;
  flex-direction: column;
  padding: 32px 30px;
  border: 1px solid var(--line-light);
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 22px 56px -48px rgba(11, 20, 43, 0.75);
}
.pricing-option--managed { color: #fff; border-color: var(--line-dark); background: linear-gradient(145deg, var(--ink-soft), var(--ink-deep)); box-shadow: inset 0 4px 0 var(--orange), var(--shadow-lift); }
.pricing-option--context { border-style: dashed; background: #f7f8fb; box-shadow: none; }
.pricing-option--context > span { color: var(--navy); }
.pricing-option--context h3 { color: var(--navy); }
.pricing-option > span { color: var(--ember-text); font-family: var(--font-mono); font-size: 0.67rem; font-weight: 700; letter-spacing: 0.12em; }
.pricing-option--managed > span { color: var(--orange); }
.pricing-option h3 { margin: 25px 0 23px; font-size: 1.65rem; }
.pricing-option dl { display: grid; margin: 0; }
.pricing-option dl > div { padding: 15px 0; border-top: 1px solid var(--line-light); }
.pricing-option--managed dl > div { border-top-color: var(--line-dark); }
.pricing-option dt { color: var(--ember-text); font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.pricing-option--managed dt { color: var(--orange); }
.pricing-option dd { margin-top: 5px; color: var(--navy); font-size: 0.9rem; line-height: 1.48; }
.pricing-option--managed dd { color: var(--mist); }
.pricing-option > strong { margin-top: auto; padding-top: 24px; color: var(--ink); font-family: var(--font-display); font-size: 0.9rem; line-height: 1.45; }
.pricing-option--managed > strong { color: #fff; }
.pricing-hiring__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(450px, 1.18fr);
  gap: clamp(54px, 8vw, 108px);
  align-items: center;
}
.pricing-hiring__grid h2 { max-width: 14ch; font-size: clamp(2rem, 4vw, 3.2rem); }
.pricing-hiring__grid .lede { margin: 22px 0 28px; }
.pricing-hiring-board { overflow: hidden; border: 1px solid var(--line-light); border-radius: 18px; background: #fff; box-shadow: var(--shadow-lift); }
.pricing-hiring-board__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 25px; color: #fff; background: var(--ink-deep); }
.pricing-hiring-board__head span { color: var(--orange); font-family: var(--font-mono); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.11em; }
.pricing-hiring-board__head strong { font-family: var(--font-display); }
.pricing-hiring-board > div:not(.pricing-hiring-board__head) { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 19px 24px; border-top: 1px solid var(--line-light); }
.pricing-hiring-board > div:not(.pricing-hiring-board__head) span { color: var(--ember-text); font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.09em; }
.pricing-hiring-board p { color: var(--navy); font-size: 0.88rem; line-height: 1.5; }
.pricing-quote-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pricing-quote-card { padding: 34px 30px; border: 1px solid var(--line-light); border-radius: 17px; background: var(--paper-tint); }
.pricing-quote-card--warning { border-color: rgba(199, 68, 68, 0.25); background: #fff7f5; }
.pricing-quote-card--clarify { color: #fff; border-color: var(--line-dark); background: linear-gradient(145deg, var(--ink-soft), var(--ink-deep)); }
.pricing-quote-card > span { color: var(--ember-text); font-family: var(--font-mono); font-size: 0.67rem; font-weight: 700; letter-spacing: 0.12em; }
.pricing-quote-card--warning > span { color: #a93f3f; }
.pricing-quote-card--clarify > span { color: var(--orange); }
.pricing-quote-card h3 { margin-top: 18px; color: var(--ink); font-size: 1.35rem; }
.pricing-quote-card--clarify h3 { color: #fff; }
.pricing-quote-card ul { display: grid; gap: 14px; margin: 25px 0 0; padding: 0; list-style: none; }
.pricing-quote-card li { position: relative; padding: 0 0 14px 28px; border-bottom: 1px solid var(--line-light); color: var(--navy); font-size: 0.92rem; }
.pricing-quote-card li:last-child { padding-bottom: 0; border-bottom: 0; }
.pricing-quote-card li::before { content: "✓"; position: absolute; left: 0; color: var(--ember-text); font-weight: 800; }
.pricing-quote-card--warning li::before { content: "×"; color: #c74444; }
.pricing-quote-card--clarify li { color: var(--mist); border-bottom-color: var(--line-dark); }
.pricing-quote-card--clarify li::before { content: "?"; color: var(--orange); }
.pricing-fixed-fee { display: grid; grid-template-columns: 230px 1fr; gap: clamp(28px, 5vw, 68px); align-items: start; margin-top: 24px; padding: 30px 32px; border: 1px solid rgba(240, 145, 62, 0.3); border-radius: 17px; background: rgba(240, 145, 62, 0.08); }
.pricing-fixed-fee > span { color: var(--ember-text); font-family: var(--font-mono); font-size: 0.67rem; font-weight: 700; letter-spacing: 0.11em; }
.pricing-fixed-fee h3 { color: var(--ink); font-size: 1.45rem; }
.pricing-fixed-fee p { margin-top: 8px; color: var(--navy); font-size: 0.93rem; }
.service-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 980px) {
  .support-model-ownership__grid,
  .pricing-hiring__grid { grid-template-columns: 1fr; }
  .support-model-ownership__lanes,
  .pricing-hiring-board { width: min(690px, 100%); }
  .pricing-hero-board { justify-self: start; }
  .pricing-driver-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .support-model-cards,
  .pricing-support-cards,
  .pricing-model-grid,
  .pricing-option-grid,
  .pricing-quote-grid { grid-template-columns: 1fr; }
  .pricing-model-grid { gap: 62px; }
  .pricing-model-or { top: 50%; transform: translate(-50%, -50%); }
  .support-model-table-hint { display: block; margin: -23px 0 14px; color: var(--orange); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; }
  .support-model-card { min-height: 0; }
  .support-model-ownership__lanes > div { grid-template-columns: 95px 1fr; }
  .support-model-ownership__lanes i { grid-column: 2; width: fit-content; }
  .service-steps--3 { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .support-model-hero .service-hero-copy h1,
  .service-hero--pricing .service-hero-copy h1 { font-size: clamp(2.18rem, 10.6vw, 2.8rem); }
  .pricing-hero-board { padding: 17px; }
  .pricing-hero-factor { grid-template-columns: 25px 1fr; }
  .pricing-hero-factor i { grid-column: 2; width: fit-content; }
  .pricing-driver-grid { grid-template-columns: 1fr; }
  .pricing-driver { min-height: 0; }
  .pricing-support-card__label { align-items: flex-start; flex-direction: column; gap: 10px; }
  .pricing-support-card__label i { padding-left: 42px; }
  .pricing-model-decision { align-items: stretch; flex-direction: column; padding: 22px; }
  .pricing-model-decision__routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-model-decision__routes span { align-items: flex-start; flex-direction: column; white-space: normal; }
  .pricing-model-card { min-height: 0; padding: 29px 25px; }
  .pricing-model-card__promise { min-height: 0; }
  .pricing-model-card dl > div { grid-template-columns: 1fr; gap: 5px; }
  .pricing-model-card > a { margin-top: 27px; }
  .pricing-context-intro { align-items: flex-start; flex-direction: column; gap: 8px; margin-top: 56px; }
  .pricing-context-intro p { text-align: left; }
  .pricing-fixed-fee { grid-template-columns: 1fr; gap: 8px; padding: 26px 24px; }
  .pricing-hiring-board__head { align-items: flex-start; flex-direction: column; }
  .pricing-hiring-board > div:not(.pricing-hiring-board__head) { grid-template-columns: 1fr; gap: 6px; }
}

.services-one-team {
  background:
    linear-gradient(90deg, rgba(112, 77, 138, 0.05), transparent 50%),
    #fff;
}
.services-one-team-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  gap: clamp(56px, 8vw, 120px);
  align-items: start;
}
.services-one-team-grid h2 { max-width: 14ch; }
.services-principles {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-light);
}
.services-principles li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  padding: 25px 0;
  border-bottom: 1px solid var(--line-light);
}
.services-principles li > span {
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0.12em;
}
.services-principles strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.25rem;
}
.services-principles p { color: var(--text); }
.services-proof {
  padding: 0 0 20px;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  background: #081126;
}
.services-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.services-proof-grid > * {
  display: flex;
  min-height: 150px;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  padding: 30px 34px;
  border-left: 1px solid var(--line-dark);
  color: #fff;
  text-decoration: none;
}
.services-proof-grid > *:last-child { border-right: 1px solid var(--line-dark); }
.services-proof-grid span {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 750;
  line-height: 1;
}
.services-proof-grid b { color: var(--orange); font-size: 0.7em; }
.services-proof-grid small {
  max-width: 25ch;
  margin-top: 9px;
  color: var(--mist);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
}
.services-proof-grid a:hover small { color: #fff; }
.services-proof-note {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  color: var(--mist-dim);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-align: right;
}
.services-faq { background: #f7f8fc; }

/* ---------- problem page: unhappy with IT provider ---------- */
body.page-template-template-unhappy-it-provider .page-hero.problem-provider-hero {
  display: flex;
  align-items: center;
  min-height: 690px;
  padding: 132px 0 78px;
  background: #081126;
}
body.page-template-template-unhappy-it-provider .page-hero.problem-provider-hero::before {
  background-color: #081126;
  background-image:
    radial-gradient(circle at 88% 18%, rgba(112, 77, 138, 0.44), transparent 27%),
    radial-gradient(circle at 64% 82%, rgba(240, 145, 62, 0.13), transparent 25%),
    linear-gradient(126deg, #081126 8%, #111d3a 58%, #171936 100%);
  background-size: 100% 100%;
  background-position: center;
}
.problem-provider-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
  gap: clamp(48px, 8vw, 112px);
  align-items: center;
}
.problem-provider-hero__copy h1 { max-width: 780px; }
.problem-provider-hero__copy .lede { max-width: 680px; }
.problem-provider-signal {
  position: relative;
  overflow: hidden;
  padding: 26px;
  border: 1px solid rgba(169, 182, 208, 0.24);
  border-radius: 21px;
  background: linear-gradient(145deg, rgba(27, 42, 80, 0.96), rgba(8, 17, 38, 0.98));
  box-shadow: 0 35px 72px -42px rgba(0, 0, 0, 0.95);
}
.problem-provider-signal::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.24;
  pointer-events: none;
  background-image: radial-gradient(rgba(169, 182, 208, 0.48) 0.7px, transparent 0.7px);
  background-size: 22px 22px;
}
.problem-provider-signal > * { position: relative; z-index: 1; }
.problem-provider-signal__head {
  display: flex;
  gap: 9px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-dark);
  color: var(--mist);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.problem-provider-signal__head i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 5px rgba(240, 145, 62, 0.1), 0 0 18px rgba(240, 145, 62, 0.7);
}
.problem-provider-signal__head b { margin-left: auto; color: var(--orange); font-size: 0.58rem; }
.problem-provider-signal__rows { display: grid; }
.problem-provider-signal__rows > div {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-dark);
}
.problem-provider-signal__rows span { color: var(--orange); font-family: var(--font-mono); font-size: 0.64rem; }
.problem-provider-signal__rows strong { color: #fff; font-family: var(--font-display); font-size: 0.92rem; line-height: 1.25; }
.problem-provider-signal__rows em {
  padding: 5px 7px;
  border: 1px solid rgba(240, 145, 62, 0.23);
  border-radius: 5px;
  color: #ffc58e;
  background: rgba(240, 145, 62, 0.08);
  font-family: var(--font-mono);
  font-size: 0.54rem;
  font-style: normal;
  letter-spacing: 0.06em;
}
.problem-provider-signal > p { margin-top: 18px; color: var(--mist); font-size: 0.76rem; line-height: 1.5; }

.problem-provider-signs { background: linear-gradient(180deg, #fff, #fafbfe); }
.problem-provider-signs .section-head { max-width: 820px; }
.problem-sign-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 48px; }
.problem-sign {
  min-height: 260px;
  padding: 30px 28px;
  border: 1px solid var(--line-light);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 22px 50px -42px rgba(11, 20, 43, 0.75);
}
.problem-sign > span { color: var(--ember-text); font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; }
.problem-sign h3 { margin: 34px 0 13px; font-size: 1.32rem; }
.problem-sign p { color: var(--navy); font-size: 0.93rem; line-height: 1.58; }

.problem-provider-checks__grid,
.problem-page-checks__grid { display: grid; grid-template-columns: 0.88fr 1.12fr; gap: clamp(50px, 8vw, 112px); align-items: start; }
.problem-provider-checks h2 { max-width: 560px; }
.problem-provider-pull,
.problem-page-pull { margin-top: 28px; padding: 19px 21px; border-left: 4px solid var(--orange); background: rgba(240, 145, 62, 0.08); color: var(--ink); font-family: var(--font-display); font-size: 1.04rem; font-weight: 600; line-height: 1.48; }
.problem-check-list { list-style: none; border-top: 1px solid var(--line-light); }
.problem-check-list li { display: grid; grid-template-columns: 62px 1fr; gap: 19px; padding: 26px 0; border-bottom: 1px solid var(--line-light); }
.problem-check-list li > span { color: var(--ember-text); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.11em; }
.problem-check-list strong { display: block; font-family: var(--font-display); font-size: 1.22rem; }
.problem-check-list p { margin-top: 6px; color: var(--navy); font-size: 0.92rem; line-height: 1.55; }

.problem-provider-compare-section .section-head { max-width: 800px; }
.problem-compare-wrap { margin-top: 44px; overflow-x: auto; border: 1px solid var(--line-light); border-radius: 17px; box-shadow: var(--shadow-lift); }
.problem-compare { width: 100%; min-width: 720px; border-collapse: collapse; background: #fff; }
.problem-compare caption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.problem-compare th, .problem-compare td { padding: 21px 24px; border-bottom: 1px solid var(--line-light); text-align: left; vertical-align: top; }
.problem-compare thead th { color: #fff; background: var(--ink-soft); font-family: var(--font-display); font-size: 0.92rem; }
.problem-compare thead th:first-child { background: var(--ink-deep); }
.problem-compare tbody th { width: 24%; color: var(--ink); background: var(--paper-tint); font-family: var(--font-display); font-size: 0.98rem; }
.problem-compare tbody td { width: 38%; color: var(--navy); font-size: 0.9rem; }
.problem-compare tbody td:last-child { color: var(--ink); background: rgba(240, 145, 62, 0.055); font-weight: 600; }
.problem-compare tr:last-child > * { border-bottom: 0; }

.problem-provider-actions { position: relative; overflow: hidden; background: radial-gradient(circle at 90% 20%, rgba(112, 77, 138, 0.34), transparent 32%), var(--ink-deep); }
.problem-provider-actions__grid,
.problem-page-actions__grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(48px, 8vw, 110px); align-items: start; }
.problem-action-cards { display: grid; gap: 12px; }
.problem-action-card { display: grid; grid-template-columns: 54px 1fr; gap: 6px 18px; padding: 23px 24px; border: 1px solid var(--line-dark); border-radius: 13px; background: rgba(255, 255, 255, 0.045); }
.problem-action-card > span { grid-row: 1 / span 2; color: var(--orange); font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; }
.problem-action-card h3 { color: #fff; font-size: 1.2rem; }
.problem-action-card p { color: var(--mist); font-size: 0.88rem; line-height: 1.52; }

.problem-provider-routes { background: #f8f9fc; }
.problem-provider-routes .section-head { max-width: 800px; }
.problem-route-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 46px; }
.problem-route { display: flex; min-height: 330px; flex-direction: column; padding: 30px 28px; border: 1px solid var(--line-light); border-radius: 17px; background: #fff; color: var(--ink); text-decoration: none; transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease; }
.problem-route:hover { transform: translateY(-4px); border-color: rgba(240, 145, 62, 0.58); box-shadow: var(--shadow-lift); }
.problem-route > span { color: var(--ember-text); font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; }
.problem-route h3 { margin: 31px 0 14px; font-size: 1.45rem; }
.problem-route p { color: var(--navy); font-size: 0.91rem; line-height: 1.56; }
.problem-route strong { margin-top: auto; padding-top: 28px; color: var(--ember-text); font-family: var(--font-display); font-size: 0.9rem; }
.problem-route--primary { color: #fff; background: linear-gradient(145deg, var(--ink-soft), var(--ink-deep)); border-color: rgba(169, 182, 208, 0.2); }
.problem-route--primary h3 { color: #fff; }
.problem-route--primary p { color: var(--mist); }
.problem-route--primary > span, .problem-route--primary strong { color: var(--orange); }
.problem-provider-faq { background: var(--paper-tint); }

@media (max-width: 980px) {
  body.page-template-template-unhappy-it-provider .page-hero.problem-provider-hero { display: block; min-height: 0; padding: 126px 0 66px; }
  .problem-provider-hero__grid,
  .problem-provider-checks__grid,
  .problem-provider-actions__grid,
  .problem-page-checks__grid,
  .problem-page-actions__grid { grid-template-columns: 1fr; }
  .problem-provider-signal { width: min(590px, 100%); }
  .problem-sign-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .problem-route-grid { grid-template-columns: 1fr; }
  .problem-route { min-height: 0; }
}
@media (max-width: 620px) {
  .services-problem-link--wide { align-items: flex-start; flex-direction: column; }
  body.page-template-template-unhappy-it-provider .page-hero.problem-provider-hero { padding-top: 112px; }
  .problem-provider-signal { padding: 20px; }
  .problem-provider-signal__rows > div { grid-template-columns: 27px 1fr; }
  .problem-provider-signal__rows em { grid-column: 2; width: fit-content; }
  .problem-sign-grid { grid-template-columns: 1fr; }
  .problem-sign { min-height: 0; padding: 27px 24px; }
  .problem-sign h3 { margin-top: 25px; }
  .problem-check-list li { grid-template-columns: 44px 1fr; gap: 14px; }
  .problem-action-card { grid-template-columns: 40px 1fr; padding: 21px 20px; }
  .problem-route { padding: 27px 23px; }
}

@media (max-width: 960px) {
  .services-pillar-grid,
  .services-problem-grid { grid-template-columns: 1fr; }
  .services-outcome-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-pillar-card--it,
  .services-pillar-card--cyber,
  .services-pillar-card--ai { grid-column: auto; }
  .services-pillar-card--it { display: flex; }
  .services-pillar-card--it .services-pillar-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: auto;
    padding-top: 4px;
  }
  .services-one-team-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 700px) {
  .services-position-grid { grid-template-columns: 1fr; gap: 62px; }
  .services-position-card { min-height: 0; padding: 29px 25px; }
  .services-position-card > a { margin-top: 28px; }
  .services-position-or { top: 50%; }
  .services-route-stage { padding: 28px 23px; }
  .services-route-stage__head { grid-template-columns: 1fr; gap: 8px; }
  .services-outcome-grid,
  .services-outcome-grid--three { grid-template-columns: 1fr; }
  .services-outcome-grid a { min-height: 0; }
  .services-route-tools { align-items: flex-start; flex-direction: column; }
  .services-route-tools > div { justify-content: flex-start; }
  .services-pillar-card { padding: 28px 24px 26px; border-radius: 18px; }
  .services-pillar-topline b { font-size: 3.2rem; }
  .services-pillar-card h3 { font-size: 1.8rem; }
  .services-pillar-card--it .services-pillar-links { grid-template-columns: 1fr; }
  .services-pillar-links a { min-height: 0; }
  .services-proof-grid { grid-template-columns: 1fr; }
  .services-proof-grid > * { min-height: 120px; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
  .services-proof-note { padding-top: 14px; text-align: left; }
  .services-principles li { grid-template-columns: 46px 1fr; }
}
.about-story .section-head { max-width: 760px; }
.about-story-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 54px;
}
.about-story-step {
  position: relative;
  min-height: 250px;
  padding: 30px 28px 34px;
  overflow: hidden;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 18px 45px -40px rgba(11, 20, 43, 0.55);
}
.about-story-step::after {
  content: "";
  position: absolute;
  right: -38px;
  bottom: -54px;
  width: 150px;
  height: 150px;
  border: 24px solid rgba(112, 77, 138, 0.07);
  border-radius: 50%;
}
.about-story-step > span {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--ink-deep);
  background: var(--orange);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
}
.about-story-step h3 { margin-top: 30px; font-size: 1.45rem; }
.about-story-step p { position: relative; z-index: 1; margin-top: 12px; color: var(--navy); }
.about-story-close {
  margin-top: 28px;
  padding-left: 18px;
  border-left: 3px solid var(--orange);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
}
@media (max-width: 900px) {
  .about-manifesto-grid { grid-template-columns: 1fr; }
  .about-manifesto-copy h2 { max-width: 16ch; }
  .about-proof-board { max-width: 620px; justify-self: start; }
  .about-story-steps { grid-template-columns: 1fr; }
  .about-story-step { min-height: 0; }
}
@media (max-width: 560px) {
  .about-manifesto { padding: 64px 0; }
  .about-manifesto::before { display: none; }
  .about-manifesto-copy h2 { font-size: 2.35rem; }
  .about-manifesto-copy cite { align-items: flex-start; flex-direction: column; gap: 4px; }
  .about-manifesto-copy cite span::before { display: none; }
  .about-proof-facts { grid-template-columns: 1fr; }
  .about-proof-facts div { min-height: 94px; }
}

/* ---------- team ---------- */

/* Row gap leaves headroom for the stickers that overlap each card's top edge.
   Row gap and top margin are both set to overlap + 28px, so the whitespace
   above row 1 and between every row reads as the same consistent beat. */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 104px 22px; margin-top: 104px; }
@media (max-width: 900px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .team-grid { grid-template-columns: 1fr; } }

.person {
  background: #fff;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 0 28px 30px;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.person:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.person-avatar {
  width: 62px; height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: #fff;
  background: linear-gradient(135deg, var(--navy), var(--ink));
  margin-bottom: 18px;
}
.person.good-dog .person-avatar { background: linear-gradient(135deg, var(--orange), var(--ember)); font-size: 1.7rem; }

/* photo avatars — the circular team stickers, stuck over the card's top edge */
.person-photo {
  position: relative;
  width: 220px;
  height: 220px;
  border: 4px solid #fff;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
  overflow: hidden;
  margin: -78px auto 20px;
  background: var(--ink);
  box-shadow: 0 12px 30px -10px rgba(11, 20, 43, 0.45);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.14); /* crop the PNG's outer grey shadow cleanly to its white circular edge */
  display: block;
}
/* A second, matching illustration can gently take over on hover. This is
   limited to pointer devices, so touch users retain the clear static portrait. */
.person-photo .pose-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* The generated alternate has a thin checkerboard apron outside its white
     sticker rim. Match the default portrait crop so that apron stays beyond
     the circular mask. */
  transform: scale(1.14);
  transition: opacity 0.22s ease;
}
.person-photo .pose-default { transition: opacity 0.22s ease; }
@media (hover: hover) and (pointer: fine) {
  .person:hover .person-photo--interactive .pose-default { opacity: 0; }
  .person:hover .person-photo--interactive .pose-hover { opacity: 1; }
}
/* sticker-peel: the photo tilts as the card lifts */
.person:hover .person-photo {
  transform: rotate(-3deg) scale(1.03);
  box-shadow: 0 0 0 3px var(--orange), 0 14px 30px -12px rgba(11, 20, 43, 0.5);
}
/* Jasper's sticker wasn't stuck on quite straight */
.person.good-dog .person-photo { transform: rotate(3deg); }
.person.good-dog:hover .person-photo { transform: rotate(6deg) scale(1.03); }
.person h3 { font-size: 1.25rem; }
.person .role {
  font-family: var(--font-mono);
  font-size: 0.73rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember-text);
  margin: 5px 0 13px;
}
.person p { font-size: 0.95rem; color: var(--navy); }
@media (prefers-reduced-motion: reduce) {
  .person, .person-photo, .person-photo .pose-default, .person-photo .pose-hover { transition: none; }
  .person:hover .person-photo { transform: none; }
  .person.good-dog:hover .person-photo { transform: rotate(3deg); }
}

/* ---------- gated resource form ---------- */

.gate-form, .gate-success {
  background: #fff;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: var(--shadow-lift);
}
.gate-form h3, .gate-success h3 { font-size: 1.35rem; margin-bottom: 6px; }
.gate-sub { color: var(--navy); font-size: 0.95rem; margin-bottom: 20px; }
.gate-form label { display: block; font-weight: 600; font-size: 0.9rem; margin: 14px 0 6px; }
.gate-form label span { color: var(--orange); }
.gate-form input {
  width: 100%;
  border: 1px solid var(--line-light);
  border-radius: 10px;
  padding: 11px 13px;
  font: inherit;
  font-size: 0.95rem;
  background: #FAFBFD;
}
.gate-form input:focus { outline: 2px solid rgba(240, 145, 62, 0.5); outline-offset: 1px; border-color: var(--orange); }
.gate-form .gate-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  line-height: 1.45;
  cursor: pointer;
}
.gate-form .gate-consent input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--orange);
}
.gate-form .gate-consent span { color: var(--navy); }
.gate-form button { width: 100%; margin-top: 22px; }
.gate-form button[disabled] { opacity: 0.6; cursor: wait; }
.gate-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gate-error { color: #C2410C; font-size: 0.9rem; margin-top: 12px; }
.gate-privacy { color: var(--mist-dim); font-size: 0.82rem; margin-top: 16px; line-height: 1.5; }
.gate-success .gate-download { margin-top: 18px; }

/* ---------- FAQ accordion ---------- */

.faq { max-width: 780px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item {
  background: #fff;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 52px 18px 22px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  position: relative;
  transition: color 0.15s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: var(--orange);
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item summary:hover { color: var(--ember-text); }
.faq-item p { padding: 0 22px 20px; color: var(--navy); font-size: 0.97rem; max-width: 64ch; }

/* ---------- case studies ---------- */

.cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .cs-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .cs-grid { grid-template-columns: 1fr; } }

.cs-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 26px 26px 24px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cs-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.cs-card h2 { font-size: 1.25rem; line-height: 1.3; }
.cs-card p { font-size: 0.95rem; color: var(--navy); flex: 1; }
.cs-card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cs-chip {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember-text);
  border: 1px solid rgba(240, 145, 62, 0.35);
  background: rgba(240, 145, 62, 0.07);
  border-radius: 999px;
  padding: 3px 10px;
}
.cs-town { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--mist-dim); text-transform: uppercase; }
.cs-card-stat { display: flex; align-items: baseline; gap: 10px; border-top: 1px solid var(--line-light); padding-top: 14px; }
.cs-card-stat .n { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; color: var(--orange); }
.cs-card-stat .l { font-size: 0.85rem; color: var(--navy); }

/* single: the headline-results band under the hero */
.cs-statband { background: var(--ink); border-top: 1px solid var(--line-dark); }
.cs-statband-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-top: 34px; padding-bottom: 38px; }
@media (max-width: 700px) { .cs-statband-inner { grid-template-columns: 1fr; gap: 22px; } }
.cs-stat { text-align: center; }
.cs-stat .n { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4.5vw, 3rem); color: var(--orange); line-height: 1.1; }
.cs-stat .l { display: block; margin-top: 6px; font-size: 0.92rem; color: var(--mist); }

/* ---------- contact ---------- */

.contact-enquiry-section .section-head { max-width: 860px; }
.contact-enquiry-section .section-head .lede {
  max-width: 760px;
  color: var(--mist);
}

.contact-enquiry-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(330px, 0.75fr);
  gap: 24px;
  align-items: stretch;
}

.contact-enquiry-path,
.contact-details-panel {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 40px 36px;
}

.contact-enquiry-path {
  background:
    radial-gradient(circle at 100% 0%, rgba(240, 145, 62, 0.14), transparent 38%),
    var(--ink-soft);
  border-color: rgba(240, 145, 62, 0.34);
}

.contact-details-panel { background: rgba(255, 255, 255, 0.035); }

.contact-panel-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
}

.contact-enquiry-steps { margin-top: 20px; }

.contact-enquiry-step {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 18px;
  padding: 24px 0;
  border-top: 1px solid var(--line-dark);
}

.contact-enquiry-step > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(240, 145, 62, 0.45);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--orange);
}

.contact-enquiry-step h3 {
  margin: 1px 0 7px;
  font-size: 1.12rem;
}

.contact-enquiry-step p {
  max-width: 650px;
  color: var(--mist);
  font-size: 0.94rem;
  line-height: 1.65;
}

.contact-enquiry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  padding-top: 6px;
}

.contact-enquiry-email {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 145, 62, 0.5);
}

.contact-enquiry-email:hover { color: var(--orange); }

.contact-lines { list-style: none; display: grid; gap: 4px; }
.contact-lines li {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-dark);
}
.contact-lines .k {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist-dim);
  flex: none;
  width: 92px;
}
.contact-lines a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 145, 62, 0.4);
  overflow-wrap: anywhere;
}
.contact-lines a:hover { color: var(--orange); }

.reg-line {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--mist);
  margin-top: 26px;
}

@media (max-width: 960px) {
  .contact-enquiry-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .contact-enquiry-path,
  .contact-details-panel { padding: 30px 22px; }

  .contact-enquiry-step {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
  }

  .contact-enquiry-step > span {
    width: 36px;
    height: 36px;
  }

  .contact-enquiry-actions .btn { width: 100%; }
  .contact-lines li {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: start;
  }
  .contact-lines .k { width: auto; }
}

/* ---------- checklist wall (M365 setup page signature) ---------- */

.checkwall-frame {
  background: var(--ink-soft);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 34px;
}
.checkwall-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  font-family: var(--font-mono);
}
.checkwall-count { font-size: 2.4rem; font-weight: 600; color: var(--orange); }
.checkwall-count .of { font-size: 0.95rem; color: var(--mist-dim); font-weight: 400; }
.checkwall-label { font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mist-dim); text-align: right; }

.checkwall {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  gap: 7px;
}
.cw-box {
  aspect-ratio: 1;
  border: 1px solid var(--line-dark);
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 0.68rem;
  color: transparent;
  background: rgba(255, 255, 255, 0.02);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.cw-box.ticked {
  background: linear-gradient(135deg, var(--orange), var(--ember));
  border-color: transparent;
  color: #fff;
}
.checkwall-foot {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--mist-dim);
  letter-spacing: 0.04em;
}
.checkwall-foot .hl { color: var(--mist); }

/* spotlight sequence — after the wall fills, a few boxes highlight in turn */
.cw-box.spotlight {
  transform: scale(1.4);
  border-color: transparent;
  color: #fff;
  z-index: 4;
  box-shadow: 0 0 0 3px var(--orange), 0 10px 24px -6px rgba(0, 0, 0, 0.55);
  animation: cw-pulse 1.6s ease-in-out infinite;
}
@keyframes cw-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--orange), 0 10px 24px -6px rgba(0, 0, 0, 0.55); }
  50% { box-shadow: 0 0 0 6px rgba(240, 145, 62, 0.35), 0 10px 24px -6px rgba(0, 0, 0, 0.55); }
}

.cw-popup {
  position: absolute;
  z-index: 6;
  width: min(260px, 72vw);
  background: var(--ink-soft);
  border: 1px solid var(--orange);
  border-radius: 10px;
  padding: 13px 15px;
  box-shadow: var(--shadow-lift);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.cw-popup.show { opacity: 1; transform: translateY(0); }
.cw-popup .cw-popup-setting {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--orange);
  margin-bottom: 6px;
}
.cw-popup .cw-popup-plain {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.3;
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .cw-box.spotlight { animation: none; }
}

/* "where most setups stop" mini-wall */
.stopwall { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
.stopwall .cw-box { width: 30px; }
.stopwall .cw-box.ticked { animation: none; }

/* plain-english translation cards */
.translate-row {
  display: grid;
  grid-template-columns: 1fr auto 1.2fr;
  gap: 18px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-light);
}
.section-dark .translate-row { border-color: var(--line-dark); }
@media (max-width: 700px) {
  .translate-row { grid-template-columns: 1fr; gap: 8px; }
  .translate-row .translate-arrow { transform: rotate(90deg); width: fit-content; }
}
.translate-setting {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--mist-dim);
  letter-spacing: 0.02em;
}
.translate-arrow { color: var(--orange); flex: none; font-size: 1.1rem; }
.translate-plain { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; color: #fff; }

/* paired framework-to-outcome translation */
.translation-list { display: grid; gap: 12px; }
.translation-head {
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0 22px 4px;
}
.translation-head span:last-child { grid-column: 3; }
.translation-card {
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}
.translation-card:hover { transform: translateY(-2px); border-color: rgba(240, 145, 62, 0.45); background: rgba(255, 255, 255, 0.045); }
.translation-control, .translation-outcome { display: flex; flex-direction: column; justify-content: center; padding: 22px 24px; }
.translation-control { color: var(--mist); font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.55; }
.translation-control strong { font-weight: 500; }
.translation-outcome { background: linear-gradient(105deg, rgba(240, 145, 62, 0.11), rgba(240, 145, 62, 0.035)); color: #fff; font-family: var(--font-display); font-size: 1.08rem; line-height: 1.38; }
.translation-outcome strong { font-weight: 650; }
.translation-bridge { display: grid; place-items: center; color: var(--orange); font-size: 1.35rem; background: linear-gradient(90deg, transparent, rgba(240, 145, 62, 0.07), transparent); }
.translation-label { display: none; margin-bottom: 7px; color: var(--orange); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.11em; text-transform: uppercase; }
@media (max-width: 760px) {
  .translation-head { display: none; }
  .translation-card { grid-template-columns: 1fr; }
  .translation-control, .translation-outcome { padding: 20px; }
  .translation-bridge { height: 32px; transform: rotate(90deg); background: none; }
  .translation-label { display: block; }
}

/* numbered process steps (a real sequence) */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: step; }
.steps.steps--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .steps.steps--four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .steps.steps--four { grid-template-columns: 1fr; } }
.step {
  background: #fff;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 32px 28px;
  counter-increment: step;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ember);
  letter-spacing: 0.12em;
  display: block;
  margin-bottom: 14px;
}
.step h3 { font-size: 1.25rem; margin-bottom: 10px; }
.step p { font-size: 0.97rem; color: var(--navy); }

/* Switching page: a clear handover journey rather than three disconnected cards */
.switching-process {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 8%, rgba(112, 77, 138, 0.24), transparent 34%),
    radial-gradient(circle at 8% 100%, rgba(240, 145, 62, 0.08), transparent 30%),
    var(--ink-deep);
}
.switching-process::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.18;
  pointer-events: none;
  background-image: radial-gradient(rgba(169, 182, 208, 0.5) 0.7px, transparent 0.7px);
  background-size: 22px 22px;
}
.switching-process .wrap { position: relative; z-index: 1; }
.switching-process .section-head {
  max-width: 780px;
  margin-bottom: 44px;
}
.switching-process .section-head h2 { margin-bottom: 18px; }
.switching-process .section-head h2 span {
  display: block;
  color: var(--orange);
}
.switching-process .section-head p {
  max-width: 650px;
  color: var(--mist);
  font-size: 1.08rem;
}
.switching-process__steps { gap: 20px; }
.switching-process__steps .step {
  position: relative;
  min-height: 330px;
  padding: 92px 30px 32px;
  overflow: visible;
  color: #fff;
  background: linear-gradient(145deg, rgba(27, 42, 80, 0.98), rgba(15, 26, 54, 0.98));
  border: 1px solid rgba(169, 182, 208, 0.2);
  border-radius: 18px;
  box-shadow: 0 24px 55px -38px rgba(0, 0, 0, 0.95);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.switching-process__steps .step:hover {
  transform: translateY(-4px);
  border-color: rgba(240, 145, 62, 0.52);
  box-shadow: 0 28px 60px -34px rgba(0, 0, 0, 0.98);
}
.switching-process__steps .step::before {
  position: absolute;
  top: 26px;
  left: 30px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  color: var(--ink-deep);
  background: linear-gradient(135deg, var(--orange), var(--ember));
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  box-shadow: 0 12px 30px -12px rgba(240, 145, 62, 0.9);
  z-index: 2;
}
.switching-process__steps .step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 47px;
  right: -21px;
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), rgba(240, 145, 62, 0.24));
}
.switching-process__steps .step h3 {
  position: relative;
  z-index: 1;
  margin-bottom: 15px;
  color: #fff;
  font-size: clamp(1.28rem, 1.8vw, 1.55rem);
}
.switching-process__steps .step p {
  position: relative;
  z-index: 1;
  color: var(--mist);
  font-size: 0.98rem;
  line-height: 1.68;
}
@media (max-width: 900px) {
  .switching-process__steps .step { min-height: 0; padding: 88px 26px 28px; }
  .switching-process__steps .step::before { left: 26px; }
  .switching-process__steps .step:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -21px;
    left: 47px;
    width: 2px;
    height: 20px;
    background: linear-gradient(var(--orange), rgba(240, 145, 62, 0.24));
  }
}
@media (max-width: 600px) {
  .switching-process .section-head { margin-bottom: 34px; }
  .switching-process .section-head h2 span { margin-top: 4px; }
}

/* CIS credibility panel */
.cis-panel {
  position: relative;
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 36px;
  align-items: center;
  max-width: 920px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 42px 44px;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.cis-panel::before {
  content: "";
  position: absolute;
  top: -90px;
  right: -90px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(240, 145, 62, 0.16), transparent 70%);
  pointer-events: none;
}
@media (max-width: 640px) {
  .cis-panel { grid-template-columns: 1fr; gap: 24px; padding: 32px 26px; }
}

.cis-panel-mark { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cis-mark-roundel {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--orange), var(--ember));
  box-shadow: 0 16px 32px -10px rgba(231, 111, 29, 0.55);
}
.cis-mark-roundel svg { width: 54px; height: 54px; color: #fff; }
.cis-mark-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  color: var(--ember-text);
  font-weight: 600;
}
@media (max-width: 640px) {
  .cis-panel-mark { flex-direction: row; justify-content: flex-start; gap: 16px; }
  .cis-mark-roundel { width: 68px; height: 68px; }
  .cis-mark-roundel svg { width: 34px; height: 34px; }
}

.cis-panel-body h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 4px 0 14px; color: var(--ink); }
.cis-panel-body p { color: var(--navy); font-size: 1.02rem; }

.cis-badges {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px 24px;
  margin-top: 26px;
}
@media (max-width: 520px) { .cis-badges { grid-template-columns: 1fr; } }
.cis-badges li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}
.cis-badges svg { flex: none; width: 21px; height: 21px; color: var(--ember-text); }

/* ---------- footer ---------- */

.footer {
  background: #070D1D;
  color: var(--mist);
  padding: 70px 0 36px;
  border-top: 1px solid var(--line-dark);
}
/* human sign-off — the illustrated faces from the About page, so every page
   ends on real people instead of a cold corporate footer */
.footer-signoff {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding-bottom: 34px; margin-bottom: 40px;
  border-bottom: 1px solid var(--line-dark);
}
.footer-signoff-faces { display: flex; }
.footer-face {
  width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
  margin-left: -12px; flex: none;
  border: 2px solid var(--footer-bg, #070D1D);
  background: var(--ink);
  transition: transform 0.2s ease;
}
.footer-face:first-child { margin-left: 0; }
.footer-signoff:hover .footer-face { transform: translateY(-3px); }
.footer-face img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); display: block; }
.footer-signoff p { color: var(--mist); font-size: 0.98rem; margin: 0; }
.footer-signoff a { color: var(--orange); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .footer-face { transition: none; } }

.footer-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: clamp(40px, 8vw, 100px);
  align-items: end;
  margin-bottom: 46px;
}
.footer-logo img { height: 42px; width: auto; margin-bottom: 18px; }
.footer-logo p { max-width: 590px; }
.footer p { font-size: 0.93rem; }
.footer-contact-card {
  padding: 22px 24px;
  border: 1px solid rgba(169, 182, 208, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
}
.footer-contact-card > span {
  display: block;
  margin-bottom: 4px;
  color: var(--orange);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer-contact-card > strong {
  display: block;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.3rem;
}
.footer-contact-card > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 12px;
}
.footer-links {
  margin-bottom: 50px;
  padding: 36px 0 40px;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.footer-links-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.footer-links-heading h3 { color: #fff; font-size: 1.35rem; }
.footer-links-heading > a { color: var(--orange); font-weight: 700; }
.footer-link-grid {
  display: grid;
  grid-template-columns: 1.08fr 1fr 0.95fr 0.72fr 0.82fr 1fr;
  gap: clamp(20px, 2.7vw, 36px);
}
.footer h4 {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mist-dim);
  margin-bottom: 16px;
}
.footer ul { list-style: none; display: grid; gap: 10px; }
.footer a { color: var(--mist); text-decoration: none; font-size: 0.95rem; }
.footer a:hover { color: var(--orange); }
.footer-link-group--find-us li { color: var(--mist); font-size: 0.92rem; line-height: 1.6; }
@media (max-width: 980px) {
  .footer-link-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
}
@media (max-width: 760px) {
  .footer-intro { grid-template-columns: 1fr; gap: 28px; }
  .footer-contact-card { width: min(520px, 100%); }
  .footer-link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .footer-links-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .footer-link-grid { grid-template-columns: 1fr; }
}
.footer-bottom {
  border-top: 1px solid var(--line-dark);
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--mist-dim);
}


/* ---------- founder welcome strip (home) ---------- */

/* A warm card, not floating text — paper-tint with the same orange spine as
   blog blockquotes, so it reads as "a person talking" in the house style. */
.founder-note-inner {
  display: flex; align-items: center; gap: 30px;
  width: 100%; margin: 0;
  background: var(--paper-tint);
  border: 1px solid var(--line-light);
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 34px 40px;
}
@media (max-width: 620px) { .founder-note-inner { flex-direction: column; text-align: center; gap: 18px; padding: 28px 24px; } }
.founder-note-avatar {
  width: 112px; height: 112px; flex: none;
  border-radius: 50%; overflow: hidden;
  background: var(--ink);
  box-shadow: 0 12px 30px -12px rgba(11, 20, 43, 0.4);
}
.founder-note-avatar img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); display: block; }
.founder-note-hello { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--ink); margin-bottom: 6px; }
.founder-note-text { font-size: 1.12rem; color: var(--navy); max-width: 40em; }
.founder-note-sign {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ember-text);
  margin-top: 12px;
}

/* ---------- testimonial monogram avatar ---------- */

.quote-avatar {
  width: 68px; height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 26px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: #fff;
  background: linear-gradient(135deg, var(--orange), var(--ember));
  box-shadow: 0 12px 30px -12px rgba(231, 111, 29, 0.5);
}

/* ---------- founder chip in CTA band ---------- */

.cta-band .cta-founder { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
/* Same crop trick as .footer-face: circle wrapper clips the sticker PNG's
   corners; scale(1.08) pushes the sticker's own edge past the crop so no
   transparent corner ever shows. Never put the radius on the img itself. */
.cta-band .cta-founder-photo {
  width: 52px; height: 52px; flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 6px 16px -6px rgba(11, 20, 43, 0.5);
}
.cta-band .cta-founder-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  display: block;
}
.cta-band .cta-founder-name {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(11, 20, 43, 0.78);
}

/* ==========================================================================
   WordPress additions — blog, posts, landing, a11y
   ========================================================================== */

/* WP essentials */
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
img.alignleft { float: left; margin: 6px 24px 12px 0; }
img.alignright { float: right; margin: 6px 0 12px 24px; }
img.aligncenter { margin: 24px auto; }

/* ---------- blog archive ---------- */

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .blog-grid { grid-template-columns: 1fr; } }

.post-card { padding: 0; overflow: hidden; }
.post-card .post-thumb {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--ink-soft), var(--ink-deep));
  display: block;
  position: relative;
  overflow: hidden;
}
.post-card .post-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.post-card:hover .post-thumb img { transform: scale(1.04); }
.post-card .post-thumb .thumb-fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
}
.post-card .post-thumb .thumb-fallback img {
  width: 42%; height: auto; object-fit: contain; opacity: 0.85;
}
.post-card .post-card-body {
  padding: 26px 28px 28px;
  display: flex; flex-direction: column; gap: 12px; flex: 1;
}
.post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
}
.post-meta .cat { color: var(--ember-text); font-weight: 600; }
.post-card h2, .post-card h3 { font-size: 1.25rem; line-height: 1.25; }
.post-card p { color: var(--navy); font-size: 0.96rem; flex: 1; }

/* pagination */
.pagination-row { margin-top: 48px; display: flex; justify-content: center; }
.pagination-row .nav-links-pages { display: flex; gap: 8px; flex-wrap: wrap; }
.pagination-row .page-numbers {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--line-light);
  border-radius: 999px;
  padding: 9px 17px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.pagination-row .page-numbers:hover { border-color: var(--ember); color: var(--ember-text); }
.pagination-row .page-numbers.current { background: linear-gradient(120deg, var(--orange), var(--ember)); border-color: transparent; color: var(--ink-deep); }

/* ---------- single post ---------- */

.post-hero { padding-bottom: 56px; }
.post-hero .post-meta { color: var(--mist-dim); margin-bottom: 18px; }
.post-hero .post-meta .cat { color: var(--orange); }
.post-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 700; max-width: 20em; }

.post-featured {
  max-width: var(--wrap);
  margin: -40px auto 0;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}
.post-featured img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}

.post-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 24px 32px;
  font-size: 1.05rem;
  line-height: 1.75;
}
.post-body > * + * { margin-top: 1.15em; }
.post-body h2 {
  font-size: 1.65rem;
  margin-top: 1.8em;
  letter-spacing: -0.01em;
}
.post-body h3 { font-size: 1.3rem; margin-top: 1.6em; }
.post-body a { color: var(--ember-text); text-decoration-color: rgba(240, 145, 62, 0.5); text-underline-offset: 3px; }
.post-body a:hover { color: var(--ember); }
.post-body ul, .post-body ol { padding-left: 1.4em; display: grid; gap: 0.55em; }
.post-body li::marker { color: var(--ember); font-weight: 700; }
.post-body img { border-radius: var(--radius); }

/* Standfirst — the opening paragraph sets the scene, a notch larger and darker
   so the post starts with a confident lead rather than flat body text. */
.post-body > p:first-of-type {
  font-size: 1.22rem;
  line-height: 1.6;
  color: var(--ink);
}

/* Section markers — a short orange rule above each H2 breaks a long post into
   clear, scannable sections (the whole point of the layout upgrade). */
.post-body h2 { padding-top: 0.4em; }
.post-body h2::before {
  content: "";
  display: block;
  width: 42px; height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--ember));
  border-radius: 2px;
  margin-bottom: 0.7em;
}

/* Key takeaways — a scannable TL;DR box the Hub emits at the top of the post
   (a <ul class="key-takeaways">; the class is allow-listed in blogHtml.js). */
.post-body ul.key-takeaways {
  list-style: none;
  padding: 24px 28px;
  margin: 0 0 10px;
  background: var(--paper-tint);
  border: 1px solid var(--line-light);
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--radius) var(--radius) 0;
  display: grid;
  gap: 0.7em;
}
.post-body ul.key-takeaways::before {
  content: "Key takeaways";
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember-text);
}
.post-body ul.key-takeaways li {
  position: relative;
  padding-left: 1.7em;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--navy);
}
.post-body ul.key-takeaways li::marker { content: ""; }
.post-body ul.key-takeaways li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--orange);
  font-weight: 700;
}
.post-body blockquote {
  border-left: 3px solid var(--orange);
  background: var(--paper-tint);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 22px 28px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--ink);
}
.post-body blockquote p { margin: 0; }
.post-body code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--paper-tint);
  border: 1px solid var(--line-light);
  border-radius: 6px;
  padding: 2px 7px;
}
.post-body pre {
  background: var(--ink-deep);
  color: var(--mist);
  border-radius: var(--radius);
  padding: 22px 26px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.6;
}
.post-body pre code { background: none; border: none; padding: 0; color: inherit; }
.post-body figure figcaption {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--mist-dim);
  margin-top: 10px;
  text-align: center;
}

/* tables in long-form content — legal pages, comparison tables in posts */
.post-body .table-scroll {
  overflow-x: auto;
  margin: 26px 0;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
}
.post-body table {
  border-collapse: collapse;
  width: 100%;
  min-width: 460px;
  font-size: 0.94rem;
  background: var(--paper);
}
.post-body .table-scroll > table { min-width: 520px; }
.post-body thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ember-text);
  font-weight: 500;
  background: var(--paper-tint);
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-light);
  white-space: nowrap;
}
.post-body tbody td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-light);
  vertical-align: top;
  line-height: 1.5;
  color: var(--ink);
}
.post-body tbody tr:last-child td { border-bottom: none; }
.post-body tbody tr:hover td { background: var(--paper-tint); }
.post-body tbody td:first-child { font-weight: 500; color: var(--ink-soft); }
.post-body td code { font-size: 0.82em; white-space: nowrap; }
@media (max-width: 620px) {
  .post-body thead th,
  .post-body tbody td { padding: 11px 14px; }
  .post-body table { font-size: 0.88rem; }
}

/* prev / next */
.post-nav {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 24px 72px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 620px) { .post-nav { grid-template-columns: 1fr; } }
.post-nav a {
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 18px 22px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.2s ease, transform 0.2s ease;
  display: block;
}
.post-nav a:hover { border-color: var(--ember); transform: translateY(-3px); }
.post-nav .dir {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember-text);
  display: block;
  margin-bottom: 7px;
}
.post-nav .t { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; }
.post-nav .next { text-align: right; }

/* author byline — a human face at the foot of an article (blog + case study).
   Aligns to the same 720px readable column as .post-body / .post-nav. */
.author-byline {
  max-width: 720px;
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  gap: 20px;
  align-items: center;
}
.author-byline .author-photo {
  width: 88px; height: 88px; flex: none;
  border-radius: 50%; overflow: hidden;
  background: var(--ink);
  box-shadow: 0 8px 20px -8px rgba(11, 20, 43, 0.4);
}
.author-byline .author-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); display: block; }
.author-eyebrow { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember-text); }
.author-name { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; color: var(--ink); margin: 3px 0 0; }
.author-role { font-size: 0.85rem; color: var(--mist-dim); margin: 1px 0 8px; }
.author-line { font-size: 0.95rem; color: var(--navy); margin: 0; line-height: 1.5; }
.author-line a { color: var(--ember-text); font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 560px) {
  .author-byline { flex-direction: column; text-align: center; gap: 14px; }
}

/* ---------- quiz landing extras ---------- */

.quiz-stats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.quiz-stat {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
  padding: 18px 24px;
  min-width: 150px;
}
.quiz-stat .n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--orange);
  display: block;
}
.quiz-stat .l {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist-dim);
}

/* ---------- IT buyer's guide landing ---------- */

.buyers-guide-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 285px;
  gap: clamp(40px, 7vw, 96px);
  align-items: center;
}
.buyers-guide-cover-wrap { margin: 0; text-align: center; }
.buyers-guide-cover {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 30px 70px -26px rgba(0, 0, 0, 0.8);
  transform: rotate(1.5deg);
}
.buyers-guide-cover-wrap figcaption {
  margin-top: 18px;
  color: var(--mist-dim);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.buyers-guide-ticks { grid-template-columns: 1fr; margin-top: 26px; }
.buyers-guide-note {
  margin-top: 28px;
  padding: 18px 20px;
  border-left: 3px solid var(--orange);
  background: var(--paper-tint);
  color: var(--navy);
  font-size: 0.95rem;
}
@media (max-width: 820px) {
  .buyers-guide-hero-grid { grid-template-columns: 1fr; }
  .buyers-guide-cover-wrap { width: min(250px, 72vw); margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .buyers-guide-cover { transform: none; }
}

/* ---------- CIS playbook grid (CIS Controls page signature) ---------- */

.playbook-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pb-item {
  background: var(--ink-soft);
  border: 1px solid var(--line-dark);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.pb-item:hover { transform: translateY(-3px); border-color: var(--orange); }
.pb-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--orange);
  padding-top: 4px;
}
.pb-item h3 { font-size: 1.02rem; margin: 0 0 5px; color: #fff; }
.pb-official {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mist-dim);
}
.pb-footnote {
  margin: 34px auto 0;
  max-width: 720px;
  text-align: center;
  color: var(--mist);
  font-size: 0.98rem;
}
.pb-footnote strong { color: var(--orange); font-weight: 600; }
.pb-tiein { margin-top: 40px; color: var(--navy); font-size: 0.98rem; }
@media (max-width: 900px) { .playbook-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .playbook-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .pb-item { transition: none; } .pb-item:hover { transform: none; } }

/* ========================================================================== 
   Service expansion — Cyber Essentials, AI Readiness, Microsoft 365 Copilot
   ========================================================================== */

/* homepage discovery cards */
.service-highlights {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 18px;
  margin-top: 28px;
}
.service-feature {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  display: grid;
  grid-template-columns: 58px 1fr;
  grid-template-rows: 1fr auto;
  gap: 22px;
  align-items: start;
  padding: 34px;
  border: 1px solid var(--line-light);
  border-radius: 20px;
  text-decoration: none;
  box-shadow: 0 18px 44px -34px rgba(11, 20, 43, 0.7);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.service-feature:hover { transform: translateY(-4px); border-color: rgba(240, 145, 62, 0.68); box-shadow: var(--shadow-lift); }
.service-feature::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -115px;
  bottom: -125px;
  border-radius: 50%;
  pointer-events: none;
}
.service-feature--certify { color: var(--ink); background: linear-gradient(145deg, #fff, #fff8f0); }
.service-feature--certify::after { background: radial-gradient(circle, rgba(240, 145, 62, 0.24), transparent 68%); }
.service-feature--ai { color: #fff; background: radial-gradient(circle at 88% 8%, rgba(112, 77, 138, 0.48), transparent 34%), linear-gradient(145deg, var(--ink-soft), var(--ink-deep)); border-color: var(--line-dark); }
.service-feature--ai::after { background: radial-gradient(circle, rgba(240, 145, 62, 0.25), transparent 68%); }
.service-feature-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  color: var(--ink-deep);
  background: linear-gradient(135deg, var(--orange), #ffc58e);
  border-radius: 17px;
  box-shadow: 0 14px 28px -18px rgba(231, 111, 29, 0.9);
}
.service-feature-icon svg { width: 29px; height: 29px; }
.service-feature-copy { min-width: 0; }
.service-feature-copy strong { display: block; margin: 13px 0 10px; font-family: var(--font-display); font-size: 1.34rem; line-height: 1.2; }
.service-feature-copy small { display: block; color: var(--navy); font-size: 0.9rem; line-height: 1.55; }
.service-feature--ai .service-feature-copy small { color: var(--mist); }
.service-highlight-tag { color: var(--ember-text); font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.service-feature--ai .service-highlight-tag { color: var(--orange); }
.service-feature-link { grid-column: 2; align-self: end; color: var(--ember-text); font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; }
.service-feature--ai .service-feature-link { color: var(--orange); }
.service-feature-link::after { content: "  ›"; font-size: 1.18em; transition: margin-left 0.2s ease; }
.service-feature:hover .service-feature-link::after { margin-left: 5px; }
.service-standard-link { margin-top: 24px; }
.service-standard-link a { text-decoration: none; }
@media (max-width: 820px) {
  .service-highlights { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .home-founder { padding: 44px 0 22px; }
  .home-services { padding-top: 34px; }
  .service-feature { min-height: 0; grid-template-columns: 48px 1fr; gap: 17px; padding: 26px 22px; }
  .service-feature-icon { width: 48px; height: 48px; border-radius: 14px; }
  .service-feature-icon svg { width: 24px; height: 24px; }
  .service-feature-copy strong { font-size: 1.18rem; }
  .service-feature-link { grid-column: 2; }
}

/* shared service hero */
.service-hero { padding: 146px 0 76px; min-height: 720px; display: flex; align-items: center; overflow: hidden; }
.service-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.48;
  background-image: radial-gradient(circle at 1px 1px, rgba(169, 182, 208, 0.17) 1px, transparent 0);
  background-size: 36px 36px;
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000);
  pointer-events: none;
}
.service-hero::after {
  content: "";
  position: absolute;
  width: 650px;
  height: 650px;
  right: -260px;
  top: -260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 145, 62, 0.22), transparent 69%);
  pointer-events: none;
}
.service-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr); gap: clamp(48px, 7vw, 92px); align-items: center; width: 100%; }
.service-hero-copy h1 { max-width: 11.5em; font-size: clamp(2.65rem, 5.1vw, 4.45rem); line-height: 0.99; }
.service-hero-copy .lede { margin-top: 24px; max-width: 40em; }
.service-hero-copy .hero-actions { margin-top: 34px; }
.hero-reassurance { margin-top: 23px; color: var(--mist-dim); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; }
.service-hero--ai { background: linear-gradient(145deg, #0A1630 0%, #14284C 55%, #0B142B 100%); }
.service-hero--copilot { background: linear-gradient(145deg, #0B142B 0%, #172C53 58%, #101A34 100%); }

/* Real West View IT photography across the newer service pages. Each image
   uses a subject-aware but fluid crop, with one shared atmospheric treatment. */
.service-hero--photo {
  --service-photo-subject-y: 26.7vw;
  background: var(--ink-deep);
}
.service-hero--photo::before,
.service-hero--photo::after { display: none; }
.service-hero--photo .service-hero-grid {
  z-index: 2;
  grid-template-columns: 1fr;
}
.service-hero--photo .service-hero-copy {
  max-width: 760px;
  text-shadow: 0 2px 24px rgba(7, 13, 29, 0.8);
}
.service-hero--photo .service-hero-copy h1 { max-width: 12em; }
.service-hero--photo .ce-certificate,
.service-hero--photo .ai-signal-board,
.service-hero--photo .copilot-workboard { display: none; }
.service-hero-photo {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.service-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  filter: brightness(0.68) saturate(0.7) contrast(1.06);
}
.service-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 13, 29, 0.22) 0%, transparent 30%, rgba(11, 20, 43, 0.28) 55%, rgba(11, 20, 43, 0.82) 82%, var(--ink-deep) 100%),
    linear-gradient(90deg, rgba(11, 20, 43, 0.97) 0%, rgba(11, 20, 43, 0.84) 23%, rgba(11, 20, 43, 0.62) 48%, rgba(11, 20, 43, 0.48) 72%, rgba(11, 20, 43, 0.4) 100%);
}
.service-hero--photo-monitoring { --service-photo-subject-y: 28.3vw; }
.service-hero--photo-workshop { --service-photo-subject-y: 22.2vw; }
.service-hero--photo-team { --service-photo-subject-y: 26.7vw; }
@media (min-width: 1200px) {
  .service-hero-photo img {
    position: absolute;
    top: calc(116px - var(--service-photo-subject-y));
    left: 0;
    width: 100%;
    height: auto;
    object-fit: initial;
    object-position: center top;
  }
}
@media (max-width: 760px) {
  .service-hero--photo-monitoring .service-hero-photo img { object-position: 58% 48%; }
  .service-hero--photo-workshop .service-hero-photo img { object-position: 68% 45%; }
  .service-hero--photo-team .service-hero-photo img { object-position: 61% 46%; }
}

/* Site-wide photography system. Pages inherit the collaborative workshop
   image, then switch to the most relevant real team photograph by purpose. */
body {
  --site-hero-image: url("assets/photos/home-team-workshop-purple-v3.webp");
  --site-hero-subject-y: 22.2vw;
  --site-hero-mobile-x: 68%;
  --site-hero-mobile-y: 45%;
}
body.page-template-template-contact,
body.page-template-template-it-keeps-interrupting-work,
body.page-template-template-location,
body.page-template-template-switching {
  --site-hero-image: url("assets/photos/it-support-team-session.webp");
  --site-hero-subject-y: 26.7vw;
  --site-hero-mobile-x: 61%;
  --site-hero-mobile-y: 46%;
}
body.page-template-template-cis-checklist,
body.page-template-template-cis-controls,
body.page-template-template-cost-calculator,
body.page-template-template-cyber-security,
body.page-template-template-email-checker,
body.page-template-template-it-buyers-guide,
body.page-template-template-m365-setup,
body.page-template-template-microsoft-365-messy,
body.page-template-template-prove-business-secure,
body.page-template-template-microsoft-365 {
  --site-hero-image: url("assets/photos/cyber-essentials-monitoring-purple.webp");
  --site-hero-subject-y: 28.3vw;
  --site-hero-mobile-x: 58%;
  --site-hero-mobile-y: 48%;
}

/* Problem page: prove your business is secure */
body.page-template-template-prove-business-secure .page-hero.problem-proof-hero {
  display: flex;
  align-items: center;
  min-height: 700px;
  padding: 132px 0 78px;
}
.problem-proof-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
  gap: clamp(48px, 8vw, 110px);
  align-items: center;
}
.problem-proof-hero__copy h1 { max-width: 800px; }
.problem-proof-hero__copy .lede { max-width: 690px; }
.problem-proof-request {
  position: relative;
  overflow: hidden;
  padding: 25px;
  border: 1px solid rgba(169, 182, 208, 0.24);
  border-radius: 21px;
  background: linear-gradient(145deg, rgba(27, 42, 80, 0.97), rgba(8, 17, 38, 0.99));
  box-shadow: 0 35px 72px -42px rgba(0, 0, 0, 0.95);
}
.problem-proof-request::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.25;
  pointer-events: none;
  background-image: linear-gradient(rgba(169, 182, 208, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(169, 182, 208, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}
.problem-proof-request > * { position: relative; z-index: 1; }
.problem-proof-request__head {
  display: flex;
  gap: 9px;
  align-items: center;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--line-dark);
  color: var(--mist);
  font-family: var(--font-mono);
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.problem-proof-request__head i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(240, 145, 62, 0.1), 0 0 18px rgba(240, 145, 62, 0.72); }
.problem-proof-request__head b { margin-left: auto; color: var(--orange); font-size: 0.56rem; }
.problem-proof-request__status { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 13px; align-items: center; margin: 18px 0 5px; padding: 14px; border: 1px solid rgba(169, 182, 208, 0.15); border-radius: 11px; background: rgba(255, 255, 255, 0.045); }
.problem-proof-request__status > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-deep); background: linear-gradient(135deg, var(--orange), var(--ember)); font-family: var(--font-display); font-size: 1.45rem; font-weight: 750; }
.problem-proof-request__status small { display: block; color: var(--mist); font-family: var(--font-mono); font-size: 0.54rem; letter-spacing: 0.09em; text-transform: uppercase; }
.problem-proof-request__status strong { display: block; margin-top: 3px; color: #fff; font-family: var(--font-display); font-size: 0.9rem; line-height: 1.2; }
.problem-proof-request__status em { padding: 5px 7px; border: 1px solid rgba(240, 145, 62, 0.23); border-radius: 5px; color: #ffc58e; background: rgba(240, 145, 62, 0.08); font-family: var(--font-mono); font-size: 0.52rem; font-style: normal; letter-spacing: 0.06em; }
.problem-proof-request__rows { display: grid; }
.problem-proof-request__rows > div { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 15px 2px; border-bottom: 1px solid var(--line-dark); }
.problem-proof-request__rows span { color: var(--orange); font-family: var(--font-mono); font-size: 0.59rem; }
.problem-proof-request__rows strong { color: #fff; font-family: var(--font-display); font-size: 0.84rem; line-height: 1.25; }
.problem-proof-request__rows em { color: #ffc58e; font-family: var(--font-mono); font-size: 0.52rem; font-style: normal; letter-spacing: 0.06em; }
.problem-proof-request > p { margin-top: 17px; color: var(--mist); font-size: 0.75rem; line-height: 1.48; }

.problem-proof-signs { background: linear-gradient(180deg, #fff, #fafbfe); }
.problem-proof-signs .section-head,
.problem-proof-compare-section .section-head,
.problem-proof-routes .section-head { max-width: 840px; }
.problem-proof-actions { position: relative; overflow: hidden; background: radial-gradient(circle at 90% 20%, rgba(87, 74, 154, 0.42), transparent 34%), var(--ink-deep); }
.problem-proof-routes { background: #f8f9fc; }
.problem-proof-faq { background: var(--paper-tint); }

@media (max-width: 980px) {
  body.page-template-template-prove-business-secure .page-hero.problem-proof-hero { display: block; min-height: 0; padding: 126px 0 66px; }
  .problem-proof-hero__grid { grid-template-columns: 1fr; }
  .problem-proof-request { width: min(620px, 100%); }
}
@media (max-width: 620px) {
  body.page-template-template-prove-business-secure .page-hero.problem-proof-hero { padding-top: 112px; }
  .problem-proof-request { padding: 20px; }
  .problem-proof-request__status { grid-template-columns: 48px 1fr; }
  .problem-proof-request__status em { grid-column: 2; width: fit-content; }
  .problem-proof-request__rows > div { grid-template-columns: 62px 1fr; }
  .problem-proof-request__rows em { grid-column: 2; }
}
body .page-hero:not(.page-hero--support-photo):not(.service-hero--photo) {
  overflow: hidden;
  background: var(--ink-deep);
}
body .page-hero:not(.page-hero--support-photo):not(.service-hero--photo)::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background-color: var(--ink-deep);
  background-image:
    linear-gradient(180deg, rgba(7, 13, 29, 0.24) 0%, transparent 28%, rgba(11, 20, 43, 0.3) 56%, rgba(11, 20, 43, 0.84) 84%, var(--ink-deep) 100%),
    linear-gradient(90deg, rgba(11, 20, 43, 0.97) 0%, rgba(11, 20, 43, 0.86) 24%, rgba(11, 20, 43, 0.66) 50%, rgba(11, 20, 43, 0.5) 74%, rgba(11, 20, 43, 0.44) 100%),
    var(--site-hero-image);
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%, 100% auto;
  background-position: center, center, center calc(110px - var(--site-hero-subject-y));
}
body .page-hero:not(.page-hero--support-photo):not(.service-hero--photo) .page-hero-visual {
  display: none;
}
body.home {
  --site-hero-image: url("assets/photos/home-team-workshop-purple-v3.webp");
}
body.home .hero { background: var(--ink-deep); }
body.home .hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background-color: var(--ink-deep);
  background-image:
    linear-gradient(180deg, rgba(7, 13, 29, 0.34) 0%, transparent 28%, rgba(11, 20, 43, 0.5) 62%, rgba(11, 20, 43, 0.96) 92%, var(--ink-deep) 100%),
    linear-gradient(90deg, rgba(11, 20, 43, 0.995) 0%, rgba(11, 20, 43, 0.96) 30%, rgba(11, 20, 43, 0.82) 56%, rgba(11, 20, 43, 0.66) 100%),
    var(--site-hero-image);
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%, 106% auto;
  background-position: center, center, left 54%;
}
body.home .hero-team-visual { display: none; }
body.home .quietline {
  background:
    linear-gradient(180deg, rgba(240, 145, 62, 0.035), rgba(255, 255, 255, 0.02) 45%),
    var(--ink-deep);
}
body.home .quietline::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 100%;
  right: 0;
  left: 0;
  height: 100vh;
  background: var(--ink-deep);
  pointer-events: none;
}
@media (max-width: 900px) {
  body.home .hero::before {
    background-size: 100% 100%, 100% 100%, cover;
    background-position: center, center, 72% 52%;
  }
}
@media (max-width: 1199px) {
  body .page-hero:not(.page-hero--support-photo):not(.service-hero--photo)::before {
    background-size: 100% 100%, 100% 100%, cover;
    background-position: center, center, var(--site-hero-mobile-x) var(--site-hero-mobile-y);
  }
}
.proof-ribbon { background: #081126; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.proof-ribbon-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.proof-ribbon-grid > div { display: flex; align-items: center; gap: 14px; padding: 24px 28px; border-left: 1px solid var(--line-dark); }
.proof-ribbon-grid > div:last-child { border-right: 1px solid var(--line-dark); }
.proof-ribbon strong { color: var(--orange); font-family: var(--font-display); font-size: 1.35rem; line-height: 1; white-space: nowrap; }
.proof-ribbon span { color: var(--mist); font-size: 0.86rem; line-height: 1.3; }
@media (max-width: 980px) {
  .service-hero { min-height: 0; }
  .service-hero-grid { grid-template-columns: 1fr; }
  .service-hero-copy { max-width: 760px; }
}
@media (max-width: 700px) {
  .service-hero { padding: 116px 0 56px; }
  .service-hero-copy h1 { font-size: clamp(2.35rem, 12vw, 3.2rem); }
  .proof-ribbon-grid { grid-template-columns: 1fr; padding-block: 8px; }
  .proof-ribbon-grid > div, .proof-ribbon-grid > div:last-child { border: 0; border-bottom: 1px solid var(--line-dark); padding: 17px 4px; }
  .proof-ribbon-grid > div:last-child { border-bottom: 0; }
}

/* shared service components */
.service-steps { display: grid; gap: 18px; counter-reset: service-step; }
.service-steps--4 { grid-template-columns: repeat(4, 1fr); }
.service-step { position: relative; background: #fff; border: 1px solid var(--line-light); border-radius: var(--radius); padding: 30px 26px; overflow: hidden; }
.service-step > span { display: block; margin-bottom: 34px; color: var(--ember-text); font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.13em; }
.service-step > span::after { content: ""; position: absolute; top: 39px; left: 54px; width: calc(100% - 76px); height: 1px; background: linear-gradient(90deg, rgba(240,145,62,0.65), transparent); }
.service-step h3 { font-size: 1.18rem; margin-bottom: 10px; }
.service-step p { color: var(--navy); font-size: 0.94rem; }
.service-caveat { margin-top: 24px; padding: 18px 21px; border-left: 3px solid var(--orange); background: var(--paper-tint); color: var(--navy); font-size: 0.96rem; }
.ticks-action { grid-column: 1 / -1; margin-top: 8px; }
.ticks-action .btn { width: fit-content; color: var(--ink-deep); }
.hero-actions--light { margin-top: 30px; }
.evidence-strip { background: var(--paper-tint); border-block: 1px solid var(--line-light); }
.evidence-strip-inner { display: grid; grid-template-columns: 250px 1fr; gap: 36px; align-items: center; padding-top: 28px; padding-bottom: 28px; }
.evidence-strip strong { font-family: var(--font-display); color: var(--ink); }
.evidence-strip p { color: var(--navy); font-size: 0.84rem; line-height: 1.55; }
.evidence-strip a { color: var(--ember-text); font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 960px) { .service-steps--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) {
  .service-steps--4 { grid-template-columns: 1fr; }
  .evidence-strip-inner { grid-template-columns: 1fr; gap: 8px; }
}

/* Cyber Essentials signature */
.service-hero--ce { background: linear-gradient(145deg, #0B142B 0%, #1A2B50 57%, #111C38 100%); }
.ce-certificate {
  position: relative;
  width: min(440px, 100%);
  justify-self: end;
  padding: 34px 38px 32px;
  color: var(--ink-deep);
  background: linear-gradient(150deg, #fff 0%, #fffaf0 100%);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 18px;
  box-shadow: 0 34px 80px -28px rgba(0,0,0,0.75);
  transform: rotate(1.2deg);
  overflow: hidden;
}
.ce-certificate::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(58,69,99,0.16); border-radius: 10px; pointer-events: none; }
.ce-certificate::after { content: ""; position: absolute; width: 170px; height: 170px; right: -65px; bottom: -65px; border: 30px solid rgba(240,145,62,0.09); border-radius: 50%; }
.ce-certificate-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); }
.ce-certificate-top strong { color: var(--ember-text); font-size: 0.86rem; }
.ce-seal { width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; align-content: center; background: linear-gradient(135deg, var(--orange), var(--ember)); box-shadow: 0 15px 30px -16px rgba(231,111,29,0.8); color: var(--ink-deep); }
.ce-seal span { font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 0.9; }
.ce-seal small { margin-top: 5px; font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.18em; }
.ce-certificate h2 { margin-top: 23px; font-size: clamp(1.8rem, 3.5vw, 2.45rem); }
.ce-mini-controls { display: flex; gap: 7px; margin: 24px 0 18px; }
.ce-mini-controls i { display: block; width: 38px; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--orange), var(--ember)); }
.ce-certificate p { color: var(--navy); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; }
.ce-control-path { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.ce-control { position: relative; padding: 24px 20px 26px; background: var(--ink-soft); border: 1px solid var(--line-dark); border-top: 3px solid rgba(240,145,62,0.75); border-radius: 0 0 var(--radius) var(--radius); }
.ce-control > span { display: block; color: var(--orange); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; margin-bottom: 28px; }
.ce-control small { color: var(--mist-dim); font-family: var(--font-mono); font-size: 0.61rem; letter-spacing: 0.11em; text-transform: uppercase; }
.ce-control h3 { margin: 9px 0 11px; color: #fff; font-size: 1.02rem; }
.ce-control p { color: var(--mist); font-size: 0.84rem; line-height: 1.5; }
.alignment-card { padding: 36px 38px; background: linear-gradient(150deg, var(--ink), var(--ink-deep)); color: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lift); }
.alignment-kicker { color: var(--orange); font-family: var(--font-mono); font-size: 0.67rem; letter-spacing: 0.14em; text-transform: uppercase; }
.alignment-card h3 { margin: 10px 0 24px; font-size: 1.55rem; }
.alignment-card ul { list-style: none; display: grid; gap: 12px; }
.alignment-card li { display: flex; gap: 11px; color: var(--mist); font-size: 0.92rem; }
.alignment-card li span { color: var(--orange); font-weight: 700; }
.alignment-card a { display: inline-block; margin-top: 28px; color: var(--orange); font-family: var(--font-display); font-weight: 600; text-underline-offset: 4px; }
.level-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.level-card { position: relative; padding: 38px 36px; background: #fff; border: 1px solid var(--line-light); border-radius: var(--radius); box-shadow: 0 12px 32px -28px rgba(11,20,43,0.7); }
.level-card--plus { color: #fff; background: linear-gradient(145deg, var(--ink), var(--ink-deep)); border-color: var(--line-dark); }
.level-tag { color: var(--ember-text); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }
.level-card--plus .level-tag { color: var(--orange); }
.level-card h3 { margin: 12px 0 18px; font-size: 1.75rem; }
.level-card p { color: var(--navy); margin-bottom: 24px; }
.level-card--plus p { color: var(--mist); }
.level-card > strong { font-family: var(--font-display); font-size: 0.95rem; }
@media (max-width: 980px) {
  .ce-certificate { justify-self: start; transform: none; }
  .ce-control-path { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 650px) {
  .ce-certificate { padding: 30px 28px; }
  .ce-control-path, .level-compare { grid-template-columns: 1fr; }
}

/* AI Readiness signature */
.ai-signal-board { position: relative; width: min(470px, 100%); justify-self: end; display: grid; gap: 11px; padding: 25px; background: rgba(7,15,33,0.72); border: 1px solid rgba(169,182,208,0.2); border-radius: 20px; box-shadow: 0 34px 80px -28px rgba(0,0,0,0.8); backdrop-filter: blur(10px); }
.ai-signal-board::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(240,145,62,0.65), transparent 35%, rgba(169,182,208,0.22)); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.ai-signal-board-head { display: flex; justify-content: space-between; padding: 0 3px 8px; color: var(--mist-dim); font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; }
.ai-signal-board-head strong { color: var(--orange); font-weight: 500; }
.ai-signal { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 15px 16px; color: var(--mist); background: rgba(255,255,255,0.045); border: 1px solid var(--line-dark); border-radius: 11px; }
.ai-signal > span { color: var(--orange); font-family: var(--font-mono); font-size: 0.68rem; }
.ai-signal p { font-size: 0.82rem; line-height: 1.4; }
.ai-signal i { color: #91D8AA; font-family: var(--font-mono); font-style: normal; font-size: 0.58rem; white-space: nowrap; text-transform: uppercase; }
.ai-signal--dim { opacity: 0.55; }
.ai-signal--dim i { color: var(--mist-dim); }
.ai-decision-card { margin-top: 7px; padding: 23px 24px; border-radius: 13px; color: var(--ink-deep); background: linear-gradient(135deg, #FFBE75, var(--orange) 50%, var(--ember)); box-shadow: 0 18px 40px -20px rgba(240,145,62,0.9); }
.ai-decision-card small { display: block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; }
.ai-decision-card strong { display: block; margin: 8px 0 13px; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.2; }
.ai-decision-card span { font-family: var(--font-mono); font-size: 0.63rem; }
.research-callout { padding: 38px; background: linear-gradient(145deg, var(--ink), var(--ink-deep)); border-radius: var(--radius); color: #fff; }
.research-callout-stat { display: block; color: var(--orange); font-family: var(--font-display); font-weight: 750; font-size: clamp(3rem, 7vw, 5rem); line-height: 0.9; }
.research-callout p { margin-top: 17px; color: #fff; font-family: var(--font-display); font-size: 1.12rem; line-height: 1.4; }
.research-callout small { display: block; margin-top: 16px; color: var(--mist); line-height: 1.5; }
.opportunity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.opportunity-card { min-height: 270px; display: flex; flex-direction: column; padding: 28px 26px; background: #fff; border: 1px solid var(--line-light); border-radius: var(--radius); }
.opportunity-card > span { color: var(--ember-text); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; }
.opportunity-card h3 { margin: 28px 0 11px; font-size: 1.24rem; }
.opportunity-card p { color: var(--navy); font-size: 0.93rem; flex: 1; }
.opportunity-card small { display: inline-block; width: fit-content; margin-top: 20px; padding: 6px 10px; border-radius: 999px; color: var(--ember-text); background: rgba(240,145,62,0.11); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; }
.opportunity-card--stop { color: #fff; background: linear-gradient(145deg, var(--ink), var(--ink-deep)); }
.opportunity-card--stop > span, .opportunity-card--stop small { color: var(--orange); }
.opportunity-card--stop p { color: var(--mist); }
.opportunity-card--stop small { background: rgba(240,145,62,0.1); }
.readiness-layout { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: clamp(50px, 8vw, 100px); align-items: start; }
.readiness-copy { position: sticky; top: 110px; }
.readiness-scorecard { display: grid; gap: 10px; }
.readiness-scorecard > div { display: grid; grid-template-columns: 38px 110px 1fr auto; gap: 14px; align-items: center; padding: 19px 20px; background: var(--ink-soft); border: 1px solid var(--line-dark); border-radius: 11px; }
.readiness-scorecard span { color: var(--orange); font-family: var(--font-mono); font-size: 0.68rem; }
.readiness-scorecard strong { color: #fff; font-family: var(--font-display); font-size: 0.95rem; }
.readiness-scorecard p { color: var(--mist); font-size: 0.8rem; line-height: 1.4; }
.readiness-scorecard i { padding: 6px 9px; color: #F2C590; background: rgba(240,145,62,0.09); border-radius: 999px; font-family: var(--font-mono); font-style: normal; font-size: 0.57rem; white-space: nowrap; }
.readiness-scorecard .status-good { color: #9DE0B3; background: rgba(71,181,110,0.1); }
.route-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.route-card { min-height: 300px; display: flex; flex-direction: column; padding: 31px 28px; color: var(--ink); background: #fff; border: 1px solid var(--line-light); border-radius: var(--radius); text-decoration: none; }
.route-card > span { color: var(--ember-text); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }
.route-card h3 { margin: 29px 0 13px; font-size: 1.4rem; }
.route-card p { flex: 1; color: var(--navy); font-size: 0.94rem; }
.route-card > strong { margin-top: 25px; color: var(--ember-text); font-family: var(--font-display); font-size: 0.9rem; }
.route-card--featured { color: #fff; background: linear-gradient(145deg, var(--ink-soft), var(--ink-deep)); border-color: var(--line-dark); box-shadow: var(--shadow-lift); transition: transform 0.2s ease, border-color 0.2s ease; }
.route-card--featured:hover { transform: translateY(-4px); border-color: var(--orange); }
.route-card--featured > span, .route-card--featured > strong { color: var(--orange); }
.route-card--featured p { color: var(--mist); }
@media (max-width: 980px) {
  .ai-signal-board { justify-self: start; }
  .opportunity-grid { grid-template-columns: 1fr 1fr; }
  .readiness-layout { grid-template-columns: 1fr; }
  .readiness-copy { position: static; }
}
@media (max-width: 760px) {
  .readiness-scorecard > div { grid-template-columns: 30px 1fr; }
  .readiness-scorecard p, .readiness-scorecard i { grid-column: 2; }
  .readiness-scorecard i { width: fit-content; }
  .route-cards { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .ai-signal-board { padding: 17px; }
  .ai-signal { grid-template-columns: 25px 1fr; }
  .ai-signal i { grid-column: 2; }
  .opportunity-grid { grid-template-columns: 1fr; }
}

/* Microsoft 365 Copilot signature */
.copilot-workboard { position: relative; width: min(480px, 100%); height: 480px; justify-self: end; }
.copilot-workboard::before, .copilot-workboard::after { content: ""; position: absolute; border: 1px solid rgba(169,182,208,0.15); border-radius: 50%; inset: 56px; }
.copilot-workboard::after { inset: 116px; border-style: dashed; }
.copilot-core { position: absolute; z-index: 2; left: 50%; top: 50%; width: 184px; height: 184px; transform: translate(-50%,-50%); display: grid; place-items: center; align-content: center; border-radius: 50%; color: var(--ink-deep); background: linear-gradient(145deg, #FFCB91, var(--orange) 58%, var(--ember)); box-shadow: 0 26px 55px -20px rgba(240,145,62,0.9); }
.copilot-core small { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.11em; text-transform: uppercase; }
.copilot-core strong { margin: 3px 0; font-family: var(--font-display); font-size: 2rem; line-height: 1; }
.copilot-core span { font-size: 0.68rem; }
.copilot-app { position: absolute; z-index: 3; width: 154px; padding: 14px 16px; color: #fff; background: rgba(19,31,61,0.92); border: 1px solid rgba(169,182,208,0.22); border-radius: 12px; box-shadow: 0 17px 35px -24px rgba(0,0,0,0.9); backdrop-filter: blur(8px); }
.copilot-app b { display: block; color: var(--orange); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; }
.copilot-app span { display: block; margin-top: 5px; color: var(--mist); font-size: 0.74rem; line-height: 1.3; }
.copilot-app--outlook { top: 4px; left: 25px; }
.copilot-app--teams { top: 56px; right: -5px; }
.copilot-app--word { top: 240px; left: -7px; }
.copilot-app--excel { right: 2px; bottom: 74px; }
.copilot-app--powerpoint { left: 157px; bottom: 4px; }
.copilot-scenes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.copilot-scene { display: grid; grid-template-columns: 72px 1fr; gap: 22px; padding: 30px; background: #fff; border: 1px solid var(--line-light); border-radius: var(--radius); }
.scene-time { color: var(--ember-text); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; }
.copilot-scene small { color: var(--ember-text); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.11em; text-transform: uppercase; }
.copilot-scene h3 { margin: 10px 0 11px; font-size: 1.2rem; }
.copilot-scene p { color: var(--navy); font-size: 0.91rem; }
.copilot-learning-note { display: grid; grid-template-columns: 230px 1fr; gap: clamp(28px, 5vw, 70px); align-items: start; margin-top: 22px; padding: 30px 32px; border: 1px solid rgba(112, 77, 138, 0.25); border-radius: var(--radius); background: rgba(112, 77, 138, 0.07); }
.copilot-learning-note > span { color: #704d8a; font-family: var(--font-mono); font-size: 0.67rem; font-weight: 700; letter-spacing: 0.11em; }
.copilot-learning-note h3 { color: var(--ink); font-size: 1.45rem; }
.copilot-learning-note p { margin-top: 8px; color: var(--navy); font-size: 0.93rem; }
.permission-story { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(45px, 8vw, 95px); align-items: center; }
.permission-visual { padding: 32px; background: #fff; border: 1px solid var(--line-light); border-radius: var(--radius); box-shadow: var(--shadow-lift); }
.permission-person { display: grid; grid-template-columns: 52px 1fr; gap: 0 13px; align-items: center; }
.permission-person > span { grid-row: 1 / span 2; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-deep); background: linear-gradient(135deg, var(--orange), var(--ember)); font-family: var(--font-display); font-weight: 700; }
.permission-person strong { font-family: var(--font-display); }
.permission-person small { color: var(--mist-dim); }
.permission-arrow { margin: 23px 0; color: var(--mist-dim); font-family: var(--font-mono); font-size: 0.67rem; letter-spacing: 0.1em; text-transform: uppercase; }
.permission-arrow span { margin-left: 10px; color: var(--ember-text); font-size: 1.2rem; }
.permission-files { display: grid; gap: 9px; }
.permission-files > div { display: flex; gap: 11px; align-items: center; padding: 12px 14px; background: var(--paper-tint); border-radius: 8px; color: var(--navy); font-size: 0.86rem; }
.permission-files i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-weight: 700; }
.file-ok i { color: #27713F; background: rgba(71,181,110,0.14); }
.permission-files .file-no { opacity: 0.5; }
.file-no i { color: var(--navy); background: rgba(58,69,99,0.1); }
.permission-visual > p { margin-top: 20px; color: var(--navy); font-size: 0.8rem; line-height: 1.45; }
.copilot-rollout { max-width: 880px; margin: 0 auto; }
.rollout-step { position: relative; display: grid; grid-template-columns: 80px 1fr; gap: 25px; padding: 8px 0 36px; }
.rollout-step:not(:last-child)::after { content: ""; position: absolute; left: 29px; top: 58px; bottom: -1px; width: 1px; background: linear-gradient(var(--orange), rgba(240,145,62,0.14)); }
.rollout-step > span { position: relative; z-index: 1; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-deep); background: linear-gradient(135deg, var(--orange), var(--ember)); font-family: var(--font-mono); font-weight: 700; font-size: 0.76rem; box-shadow: 0 12px 30px -15px rgba(240,145,62,0.9); }
.rollout-step > div { padding: 5px 0; }
.rollout-step h3 { color: #fff; font-size: 1.35rem; margin-bottom: 9px; }
.rollout-step p { color: var(--mist); }
@media (max-width: 980px) {
  .copilot-workboard { justify-self: start; }
  .permission-story { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .copilot-scenes { grid-template-columns: 1fr; }
  .copilot-learning-note { grid-template-columns: 1fr; gap: 8px; padding: 26px 24px; }
  .copilot-workboard { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .copilot-workboard::before, .copilot-workboard::after { display: none; }
  .copilot-core { position: relative; left: auto; top: auto; grid-column: 1 / -1; width: 150px; height: 150px; transform: none; justify-self: center; margin-bottom: 12px; }
  .copilot-app { position: static; width: auto; }
  .copilot-app--powerpoint { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .copilot-workboard { grid-template-columns: 1fr; }
  .copilot-app--powerpoint { grid-column: auto; }
  .copilot-scene { grid-template-columns: 1fr; gap: 10px; padding: 25px 23px; }
  .permission-visual { padding: 25px 22px; }
  .rollout-step { grid-template-columns: 58px 1fr; gap: 17px; }
  .rollout-step:not(:last-child)::after { left: 28px; }
}

/* Business communications: telephony and the connectivity underneath it */
body.page-template-template-business-communications .page-hero.communications-hero {
  display: flex;
  align-items: center;
  min-height: 650px;
  padding: 136px 0 82px;
  background: #09132a;
}
body.page-template-template-business-communications .page-hero.communications-hero::before {
  background-color: #09132a;
  background-image:
    radial-gradient(circle at 88% 18%, rgba(112, 77, 138, 0.56), transparent 25%),
    radial-gradient(circle at 72% 78%, rgba(240, 145, 62, 0.16), transparent 23%),
    linear-gradient(128deg, #09132a 10%, #101d3b 58%, #151a3b 100%);
  background-size: 100% 100%;
  background-position: center;
}
.communications-hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
  gap: clamp(46px, 8vw, 110px);
  align-items: center;
}
.communications-hero h1 { max-width: 720px; }
.communications-hero__copy .lede { max-width: 650px; }
.communications-hero__panel {
  position: relative;
  overflow: hidden;
  padding: 25px;
  color: #fff;
  background: linear-gradient(145deg, rgba(27, 42, 80, 0.96), rgba(10, 20, 43, 0.98));
  border: 1px solid rgba(169, 182, 208, 0.27);
  border-radius: 22px;
  box-shadow: 0 35px 72px -42px rgba(0, 0, 0, 0.95);
}
.communications-hero__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.42;
  pointer-events: none;
  background-image: radial-gradient(rgba(169, 182, 208, 0.46) 0.7px, transparent 0.7px);
  background-size: 21px 21px;
}
.communications-hero__panel > * { position: relative; z-index: 1; }
.communications-hero__status,
.communications-telephony-board > p {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--mist);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.13em;
}
.communications-hero__status i,
.communications-telephony-board > p i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 0 5px rgba(74, 222, 128, 0.12), 0 0 20px rgba(74, 222, 128, 0.85);
}
.communications-hero__hub {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  width: 204px;
  height: 204px;
  margin: 35px auto 31px;
  border-radius: 50%;
  color: var(--ink-deep);
  text-align: center;
  background: linear-gradient(145deg, #ffcf99, var(--orange) 58%, var(--ember));
  box-shadow: 0 0 0 17px rgba(240, 145, 62, 0.06), 0 25px 50px -23px rgba(240, 145, 62, 0.95);
}
.communications-hero__hub::before,
.communications-hero__hub::after {
  content: "";
  position: absolute;
  inset: -31px;
  border: 1px solid rgba(240, 145, 62, 0.32);
  border-radius: 50%;
}
.communications-hero__hub::after { inset: -59px; border-style: dashed; border-color: rgba(169, 182, 208, 0.23); }
.communications-hero__hub span { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; }
.communications-hero__hub strong { margin: 5px 0 3px; font-family: var(--font-display); font-size: 2.55rem; line-height: 0.95; }
.communications-hero__hub small { font-size: 0.76rem; font-weight: 600; }
.communications-hero__endpoints { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.communications-hero__endpoints > div { min-height: 100px; padding: 12px; background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(169, 182, 208, 0.15); border-radius: 10px; }
.communications-hero__endpoints span { display: block; color: var(--orange); font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.09em; }
.communications-hero__endpoints strong { display: block; margin-top: 8px; font-family: var(--font-display); font-size: 0.9rem; line-height: 1.12; }
.communications-hero__endpoints small { display: block; margin-top: 6px; color: var(--mist); font-size: 0.66rem; line-height: 1.35; }
.communications-hero__note { margin-top: 20px; color: var(--mist); font-size: 0.76rem; line-height: 1.4; text-align: center; }

.communications-foundation { background: #081127; border-top: 1px solid rgba(240, 145, 62, 0.52); border-bottom: 1px solid var(--line-dark); }
.communications-foundation__grid { display: grid; grid-template-columns: 1.14fr 0.93fr 0.93fr; }
.communications-foundation__intro,
.communications-foundation__item { padding: 27px 34px; }
.communications-foundation__intro { border-left: 1px solid var(--line-dark); }
.communications-foundation__intro .eyebrow { margin-bottom: 8px; font-size: 0.62rem; }
.communications-foundation__intro p { color: #fff; font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; line-height: 1.28; }
.communications-foundation__item { border-left: 1px solid var(--line-dark); }
.communications-foundation__item:last-child { border-right: 1px solid var(--line-dark); }
.communications-foundation__item > span { color: var(--orange); font-family: var(--font-mono); font-size: 0.63rem; letter-spacing: 0.1em; }
.communications-foundation__item strong { display: block; margin-top: 7px; color: #fff; font-family: var(--font-display); font-size: 1rem; }
.communications-foundation__item p { margin-top: 4px; color: var(--mist); font-size: 0.76rem; line-height: 1.42; }

.communications-telephony { background: linear-gradient(180deg, #fff, #fbfaf8); }
.communications-telephony-board { padding: 34px; color: #fff; background: linear-gradient(145deg, var(--ink-soft), var(--ink-deep)); border: 1px solid var(--line-dark); border-radius: 18px; box-shadow: var(--shadow-lift); }
.communications-telephony-board h3 { margin: 20px 0 29px; color: #fff; font-size: clamp(1.45rem, 2.4vw, 2rem); }
.communications-telephony-board ul { list-style: none; display: grid; gap: 17px; }
.communications-telephony-board li { display: grid; grid-template-columns: 37px 1fr; gap: 13px; align-items: center; }
.communications-telephony-board li > span { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-deep); background: linear-gradient(135deg, var(--orange), var(--ember)); font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700; }
.communications-telephony-board strong { display: block; color: #fff; font-family: var(--font-display); font-size: 1rem; }
.communications-telephony-board small { display: block; margin-top: 3px; color: var(--mist); font-size: 0.79rem; line-height: 1.4; }
.communications-telephony-features { position: relative; overflow: hidden; background: radial-gradient(circle at 8% 95%, rgba(112, 77, 138, 0.32), transparent 33%), var(--ink-deep); }
.communications-telephony-features .section-head { max-width: 780px; }

.communications-connectivity { background: #f7f3ed; }
.communications-connectivity .section-head { max-width: 760px; }
.connectivity-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.connectivity-option { display: flex; flex-direction: column; min-height: 342px; padding: 32px 29px 27px; background: #fff; border: 1px solid var(--line-light); border-radius: 17px; box-shadow: 0 20px 44px -34px rgba(11, 20, 43, 0.62); transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; }
.connectivity-option:hover { transform: translateY(-4px); border-color: rgba(240, 145, 62, 0.55); box-shadow: var(--shadow-lift); }
.connectivity-option > span { color: var(--ember-text); font-family: var(--font-mono); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; }
.connectivity-option h3 { margin: 28px 0 13px; font-size: 1.42rem; }
.connectivity-option p { color: var(--navy); font-size: 0.95rem; line-height: 1.58; }
.connectivity-option small { margin-top: auto; padding-top: 21px; color: var(--ember-text); font-family: var(--font-display); font-size: 0.79rem; font-weight: 600; line-height: 1.4; }
.connectivity-option--featured { color: #fff; background: linear-gradient(145deg, var(--ink-soft), var(--ink-deep)); border-color: rgba(169, 182, 208, 0.2); }
.connectivity-option--featured > span,
.connectivity-option--featured small { color: var(--orange); }
.connectivity-option--featured p { color: var(--mist); }

.communications-check { position: relative; overflow: hidden; background: linear-gradient(108deg, rgba(112, 77, 138, 0.12), transparent 45%), #fff; }
.communications-check__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(48px, 8vw, 112px); align-items: center; }
.communications-check h2 { max-width: 600px; font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin-bottom: 18px; }
.communications-check__list { list-style: none; display: grid; gap: 20px; counter-reset: communications-check; }
.communications-check__list li { display: grid; grid-template-columns: 58px 1fr; gap: 18px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--line-light); }
.communications-check__list li:first-child { padding-top: 0; }
.communications-check__list li > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-deep); background: linear-gradient(135deg, var(--orange), var(--ember)); font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; }
.communications-check__list strong { font-family: var(--font-display); font-size: 1.15rem; }
.communications-check__list p { margin-top: 5px; color: var(--navy); font-size: 0.92rem; line-height: 1.52; }
.communications-faq { background: radial-gradient(circle at 92% 50%, rgba(112, 77, 138, 0.26), transparent 31%), var(--ink-deep); }
.communications-faq .faq-item { background: rgba(255, 255, 255, 0.045); border-color: var(--line-dark); }
.communications-faq .faq-item summary { color: #fff; }
.communications-faq .faq-item p { color: var(--mist); }

@media (max-width: 980px) {
  body.page-template-template-business-communications .page-hero.communications-hero { display: block; min-height: 0; padding: 126px 0 66px; }
  .communications-hero .wrap { grid-template-columns: 1fr; }
  .communications-hero__panel { width: min(540px, 100%); }
  .communications-foundation__grid { grid-template-columns: 1fr 1fr; }
  .communications-foundation__intro { grid-column: 1 / -1; border-right: 1px solid var(--line-dark); }
  .connectivity-options { grid-template-columns: 1fr; }
  .connectivity-option { min-height: 0; }
  .communications-check__grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  body.page-template-template-business-communications .page-hero.communications-hero { padding-top: 112px; }
  .communications-hero__panel { padding: 20px; }
  .communications-hero__hub { width: 168px; height: 168px; margin: 31px auto 27px; }
  .communications-hero__hub::before { inset: -22px; }
  .communications-hero__hub::after { inset: -42px; }
  .communications-hero__hub strong { font-size: 2.15rem; }
  .communications-hero__endpoints { grid-template-columns: 1fr; }
  .communications-hero__endpoints > div { min-height: 0; display: grid; grid-template-columns: 34px 1fr; column-gap: 11px; align-items: center; }
  .communications-hero__endpoints span { grid-row: 1 / span 2; }
  .communications-hero__endpoints strong { margin: 0; }
  .communications-hero__endpoints small { margin: 3px 0 0; }
  .communications-foundation__grid { grid-template-columns: 1fr; }
  .communications-foundation__intro,
  .communications-foundation__item,
  .communications-foundation__item:last-child { border-right: 1px solid var(--line-dark); }
  .communications-foundation__item { border-top: 1px solid var(--line-dark); }
  .communications-foundation__intro,
  .communications-foundation__item { padding: 23px 24px; }
  .communications-telephony-board { padding: 28px 23px; }
  .communications-check__list li { grid-template-columns: 48px 1fr; gap: 14px; }
}

/* Problem page: Microsoft 365 works, but nobody owns it */
body.page-template-template-microsoft-365-messy .page-hero.problem-m365-hero {
  display: flex;
  align-items: center;
  min-height: 700px;
  padding: 132px 0 78px;
}
.problem-m365-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);
  gap: clamp(48px, 8vw, 110px);
  align-items: center;
}
.problem-m365-hero__copy h1 { max-width: 780px; }
.problem-m365-hero__copy .lede { max-width: 670px; }
.problem-m365-health {
  position: relative;
  overflow: hidden;
  padding: 25px;
  border: 1px solid rgba(169, 182, 208, 0.24);
  border-radius: 21px;
  background: linear-gradient(145deg, rgba(27, 42, 80, 0.96), rgba(8, 17, 38, 0.98));
  box-shadow: 0 35px 72px -42px rgba(0, 0, 0, 0.95);
}
.problem-m365-health::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.25;
  pointer-events: none;
  background-image: radial-gradient(rgba(169, 182, 208, 0.48) 0.7px, transparent 0.7px);
  background-size: 22px 22px;
}
.problem-m365-health > * { position: relative; z-index: 1; }
.problem-m365-health__head {
  display: flex;
  gap: 9px;
  align-items: center;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--line-dark);
  color: var(--mist);
  font-family: var(--font-mono);
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.problem-m365-health__head i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(240, 145, 62, 0.1), 0 0 18px rgba(240, 145, 62, 0.72); }
.problem-m365-health__head b { margin-left: auto; color: var(--orange); font-size: 0.56rem; }
.problem-m365-health__tenant { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 13px; align-items: center; margin: 18px 0 5px; padding: 14px; border: 1px solid rgba(169, 182, 208, 0.15); border-radius: 11px; background: rgba(255, 255, 255, 0.045); }
.problem-m365-health__tenant > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--ink-deep); background: linear-gradient(135deg, var(--orange), var(--ember)); font-family: var(--font-display); font-size: 1.35rem; font-weight: 750; }
.problem-m365-health__tenant small { display: block; color: var(--mist); font-family: var(--font-mono); font-size: 0.54rem; letter-spacing: 0.09em; text-transform: uppercase; }
.problem-m365-health__tenant strong { display: block; margin-top: 3px; color: #fff; font-family: var(--font-display); font-size: 0.9rem; line-height: 1.2; }
.problem-m365-health__tenant em { padding: 5px 7px; border: 1px solid rgba(240, 145, 62, 0.23); border-radius: 5px; color: #ffc58e; background: rgba(240, 145, 62, 0.08); font-family: var(--font-mono); font-size: 0.52rem; font-style: normal; letter-spacing: 0.06em; }
.problem-m365-health__rows { display: grid; }
.problem-m365-health__rows > div { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 15px 2px; border-bottom: 1px solid var(--line-dark); }
.problem-m365-health__rows span { color: var(--orange); font-family: var(--font-mono); font-size: 0.59rem; }
.problem-m365-health__rows strong { color: #fff; font-family: var(--font-display); font-size: 0.84rem; line-height: 1.25; }
.problem-m365-health__rows em { color: #ffc58e; font-family: var(--font-mono); font-size: 0.52rem; font-style: normal; letter-spacing: 0.06em; }
.problem-m365-health > p { margin-top: 17px; color: var(--mist); font-size: 0.75rem; line-height: 1.48; }

.problem-m365-signs { background: linear-gradient(180deg, #fff, #fafbfe); }
.problem-m365-signs .section-head,
.problem-m365-compare-section .section-head,
.problem-m365-routes .section-head { max-width: 830px; }
.problem-source-note { margin-top: 17px; color: #68738b; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.03em; }
.problem-source-note a { color: var(--ember-text); text-underline-offset: 3px; }
.problem-source-note a:hover { color: var(--ember); }
.problem-m365-actions { position: relative; overflow: hidden; background: radial-gradient(circle at 90% 20%, rgba(87, 74, 154, 0.42), transparent 34%), var(--ink-deep); }
.problem-m365-routes { background: #f8f9fc; }
.problem-m365-faq { background: var(--paper-tint); }

@media (max-width: 980px) {
  body.page-template-template-microsoft-365-messy .page-hero.problem-m365-hero { display: block; min-height: 0; padding: 126px 0 66px; }
  .problem-m365-hero__grid { grid-template-columns: 1fr; }
  .problem-m365-health { width: min(620px, 100%); }
}
@media (max-width: 620px) {
  body.page-template-template-microsoft-365-messy .page-hero.problem-m365-hero { padding-top: 112px; }
  .problem-m365-health { padding: 20px; }
  .problem-m365-health__tenant { grid-template-columns: 48px 1fr; }
  .problem-m365-health__tenant em { grid-column: 2; width: fit-content; }
  .problem-m365-health__rows > div { grid-template-columns: 60px 1fr; }
  .problem-m365-health__rows em { grid-column: 2; }
}

/* Final problem pages: recurring interruptions, workplace AI and first-time IT support */
body.page-template-template-it-keeps-interrupting-work .page-hero.problem-final-hero,
body.page-template-template-where-to-start-with-ai .page-hero.problem-final-hero,
body.page-template-template-first-time-it-support .page-hero.problem-final-hero {
  display: flex;
  align-items: center;
  min-height: 700px;
  padding: 132px 0 78px;
}
.problem-final-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
  gap: clamp(48px, 8vw, 110px);
  align-items: center;
}
.problem-final-hero__copy h1 { max-width: 800px; }
.problem-final-hero__copy .lede { max-width: 690px; }
.problem-status-panel {
  position: relative;
  overflow: hidden;
  padding: 25px;
  border: 1px solid rgba(169, 182, 208, 0.24);
  border-radius: 21px;
  background: linear-gradient(145deg, rgba(27, 42, 80, 0.97), rgba(8, 17, 38, 0.99));
  box-shadow: 0 35px 72px -42px rgba(0, 0, 0, 0.95);
}
.problem-status-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.24;
  pointer-events: none;
  background-image: radial-gradient(rgba(169, 182, 208, 0.48) 0.7px, transparent 0.7px);
  background-size: 22px 22px;
}
.problem-status-panel--ai::before {
  background-image: linear-gradient(135deg, transparent 45%, rgba(240, 145, 62, 0.11) 46%, transparent 47%), radial-gradient(rgba(169, 182, 208, 0.38) 0.7px, transparent 0.7px);
  background-size: 80px 80px, 22px 22px;
}
.problem-status-panel > * { position: relative; z-index: 1; }
.problem-status-panel__head {
  display: flex;
  gap: 9px;
  align-items: center;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--line-dark);
  color: var(--mist);
  font-family: var(--font-mono);
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.problem-status-panel__head i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(240, 145, 62, 0.1), 0 0 18px rgba(240, 145, 62, 0.72); }
.problem-status-panel__head b { margin-left: auto; color: var(--orange); font-size: 0.56rem; }
.problem-status-panel__focus { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 13px; align-items: center; margin: 18px 0 5px; padding: 14px; border: 1px solid rgba(169, 182, 208, 0.15); border-radius: 11px; background: rgba(255, 255, 255, 0.045); }
.problem-status-panel__focus > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--ink-deep); background: linear-gradient(135deg, var(--orange), var(--ember)); font-family: var(--font-display); font-size: 1.45rem; font-weight: 750; }
.problem-status-panel--ai .problem-status-panel__focus > span { border-radius: 50%; font-size: 0.88rem; letter-spacing: -0.03em; }
.problem-status-panel__focus small { display: block; color: var(--mist); font-family: var(--font-mono); font-size: 0.54rem; letter-spacing: 0.09em; text-transform: uppercase; }
.problem-status-panel__focus strong { display: block; margin-top: 3px; color: #fff; font-family: var(--font-display); font-size: 0.9rem; line-height: 1.2; }
.problem-status-panel__focus em { padding: 5px 7px; border: 1px solid rgba(240, 145, 62, 0.23); border-radius: 5px; color: #ffc58e; background: rgba(240, 145, 62, 0.08); font-family: var(--font-mono); font-size: 0.52rem; font-style: normal; letter-spacing: 0.06em; }
.problem-status-panel__rows { display: grid; }
.problem-status-panel__rows > div { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 15px 2px; border-bottom: 1px solid var(--line-dark); }
.problem-status-panel__rows span { color: var(--orange); font-family: var(--font-mono); font-size: 0.59rem; }
.problem-status-panel__rows strong { color: #fff; font-family: var(--font-display); font-size: 0.84rem; line-height: 1.25; }
.problem-status-panel__rows em { color: #ffc58e; font-family: var(--font-mono); font-size: 0.52rem; font-style: normal; letter-spacing: 0.06em; }
.problem-status-panel > p { margin-top: 17px; color: var(--mist); font-size: 0.75rem; line-height: 1.48; }

.problem-final-signs { background: linear-gradient(180deg, #fff, #fafbfe); }
.problem-final-signs .section-head,
.problem-final-compare-section .section-head,
.problem-final-routes .section-head { max-width: 850px; }
.problem-workday-actions { position: relative; overflow: hidden; background: radial-gradient(circle at 90% 20%, rgba(60, 93, 142, 0.4), transparent 34%), var(--ink-deep); }
.problem-ai-start-actions { position: relative; overflow: hidden; background: radial-gradient(circle at 90% 20%, rgba(112, 77, 138, 0.42), transparent 34%), var(--ink-deep); }
.problem-first-it-actions { position: relative; overflow: hidden; background: radial-gradient(circle at 90% 20%, rgba(44, 121, 115, 0.38), transparent 34%), var(--ink-deep); }
.problem-final-routes { background: #f8f9fc; }
.problem-final-faq { background: var(--paper-tint); }

@media (max-width: 980px) {
  body.page-template-template-it-keeps-interrupting-work .page-hero.problem-final-hero,
  body.page-template-template-where-to-start-with-ai .page-hero.problem-final-hero,
  body.page-template-template-first-time-it-support .page-hero.problem-final-hero { display: block; min-height: 0; padding: 126px 0 66px; }
  .problem-final-hero__grid { grid-template-columns: 1fr; }
  .problem-status-panel { width: min(620px, 100%); }
}
@media (max-width: 620px) {
  body.page-template-template-it-keeps-interrupting-work .page-hero.problem-final-hero,
  body.page-template-template-where-to-start-with-ai .page-hero.problem-final-hero,
  body.page-template-template-first-time-it-support .page-hero.problem-final-hero { padding-top: 112px; }
  .problem-status-panel { padding: 20px; }
  .problem-status-panel__focus { grid-template-columns: 48px 1fr; }
  .problem-status-panel__focus em { grid-column: 2; width: fit-content; }
  .problem-status-panel__rows > div { grid-template-columns: 52px 1fr; }
  .problem-status-panel__rows em { grid-column: 2; }
}

/* Ordinary marketing labels use the body family. Mono is reserved for live
   monitoring, code and technical interface visuals. */
.nav-services-label,
.card-index,
.cta-band .cta-sub,
.page-hero .breadcrumbs,
.about-proof-facts dt,
.services-pillar-topline span,
.services-principles li > span,
.problem-sign > span,
.problem-check-list li > span,
.problem-route > span,
.person .role,
.cs-chip,
.cs-town,
.contact-lines .k,
.footer h4,
.author-eyebrow,
.service-step > span,
.opportunity-card > span,
.opportunity-card small,
.route-card > span,
.alignment-kicker,
.level-tag,
.connectivity-option > span {
  font-family: var(--font-body);
  font-weight: 700;
}