/* =========================================================================
   Visulatics — Design System
   Premium SaaS / consulting look: white bg, navy text, blue/indigo accents,
   soft cards, strong whitespace. Fully responsive.
   ========================================================================= */

:root{
  /* Slalom-inspired bold blue palette */
  --navy:#081124;        /* near-black navy — hero, dark sections */
  --navy-700:#13213f;
  --ink:#16223f;         /* body text */
  --muted:#5a6783;       /* secondary text */
  --primary:#1A5CFF;     /* Slalom bright blue — buttons, links, solid fills */
  --primary-700:#0E3FCC;  /* deeper blue — hover, accent text/icons */
  --royal:#0A2BB5;       /* deep royal blue — footer */
  --blue:#1A5CFF;
  --blue-600:#0E3FCC;
  --accent:#1A5CFF;
  --bg:#FFFFFF;
  --bg-soft:#F1F5FD;     /* very light blue section background */
  --bg-mist:#E5EDFC;
  --card:#FFFFFF;
  --line:#E3E8F2;
  --line-2:#D3DCEC;
  --ring:rgba(26,92,255,.22);
  /* Flat design — no drop shadows anywhere. */
  --shadow-sm:none;
  --shadow:none;
  --shadow-lg:none;
  --radius:14px;
  --radius-lg:22px;
  --radius-xl:28px;
  --container:1640px;
  --fill:#1A5CFF;        /* solid fill for buttons, icon badges, ticks */
  --soft:#E5EDFD;        /* light blue tint for icon chips & soft surfaces */
  --pastel-2:#EAF0FF;    /* alternate soft tint */
  --font-head:'Sora','Inter','Inter Fallback',system-ui,sans-serif;
  --font-body:'Inter','Inter Fallback',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* Metric-matched fallback for Inter (which loads non-render-blocking): Arial
   adjusted to Inter's metrics, so the swap when the webfont arrives barely
   moves the layout. This is what keeps CLS near zero on first view. */
@font-face{
  font-family:'Inter Fallback';
  src:local('Arial');
  size-adjust:107.4%;
  ascent-override:90.2%;
  descent-override:22.48%;
  line-gap-override:0%;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font-body);color:var(--ink);
  background:var(--bg);line-height:1.6;font-size:17px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
/* Global icon sizing fallback — prevents any uncontextualised SVG from rendering oversized.
   Context-specific rules (.btn .icon, .card-ic .icon, etc.) override this via higher specificity. */
.icon,.caret{width:18px;height:18px;flex:none}
a{color:var(--blue);text-decoration:none;transition:color .15s ease}
a:hover{color:var(--blue-600)}
/* Accessible, visible focus for keyboard users */
:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:6px}
a:focus-visible,.btn:focus-visible,.nav-link:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--navy);line-height:1.15;margin:0 0 .5em;font-weight:700;letter-spacing:-.02em}
h1{font-size:clamp(2.1rem,4.5vw,3.4rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}
h3{font-size:1.3rem}
p{margin:0 0 1rem}
ul{margin:0;padding:0}
/* Centered content column with balanced gutters — comfortable reading width.
   Full-width color bands come from the <section> background; content stays centered. */
.container{width:100%;max-width:1360px;margin:0 auto;padding:0 clamp(20px,4vw,44px)}
.skip-link{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:200;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* ---------- Buttons ---------- */
/* --btn-r is the ONE place button roundness is set. Buttons are softly squared
   to match the ruled grid — a pill is the one shape that fights it. Badges,
   chips and tags (.pill, .tool-badge, .cs-chip, …) stay fully round on purpose:
   they are labels, not buttons, and reading as capsules is what separates them. */
/* Menu panels and cards. Slightly softer than a button because they are big
   floating surfaces, but nowhere near the old 22px --radius-lg, which is shared
   with ~20 site-wide card selectors and is therefore left alone. */
:root{--btn-r:6px;--menu-r:8px}
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-body);
  font-weight:600;font-size:1rem;padding:.85em 1.5em;border-radius:var(--btn-r);border:1px solid transparent;
  cursor:pointer;transition:background .15s ease, border-color .15s ease, color .15s ease;white-space:nowrap}
.btn .icon{width:1.05em;height:1.05em}
.btn-primary{background:var(--fill);color:#fff}
.btn-primary:hover{background:var(--primary-700);color:#fff}
.btn-secondary{background:#fff;color:var(--navy);border-color:var(--line-2)}
.btn-secondary:hover{color:var(--navy);border-color:var(--primary);background:var(--soft)}
.btn-lg{font-size:1.08rem;padding:1em 1.8em}
.btn-sm{font-size:.92rem;padding:.65em 1.2em}
.btn-light{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.30)}
.btn-light:hover{background:rgba(255,255,255,.24);color:#fff}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn-outline-light:hover{background:#fff;color:var(--primary);border-color:#fff}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line)}
.site-header.scrolled{border-bottom-color:var(--line-2)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;height:74px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:800;color:var(--navy);font-size:1.7rem;letter-spacing:-.02em}
.brand:hover{color:var(--navy)}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--fill);color:#fff}
.brand-icon{width:36px;height:36px}
.brand-name{background:none;font-family:'Poppins',var(--font-head);font-weight:700;text-transform:lowercase;letter-spacing:-.02em}

.primary-nav{display:flex;align-self:stretch}
.nav-list{display:flex;align-items:stretch;gap:2px;list-style:none;height:100%}
.nav-list>li{display:flex;align-items:center}
.nav-link{display:inline-flex;align-items:center;gap:.25em;background:none;border:none;font-family:var(--font-body);
  white-space:nowrap;font-size:.95rem;font-weight:500;color:var(--ink);padding:.55em .62em;border-radius:var(--btn-r);cursor:pointer;transition:background .15s,color .15s}
.nav-link:hover,.nav-link.is-active{color:var(--navy);background:var(--bg-mist)}
.nav-link .caret{width:15px;height:15px;transform:rotate(90deg);opacity:.55;transition:transform .2s}
.has-mega:hover .nav-link .caret,.has-mega.open .nav-link .caret{transform:rotate(-90deg)}
.has-mega:hover .mega,.has-mega.open .mega{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.mega-allink .caret{width:16px;height:16px;transition:transform .15s}
.mega-allink:hover .caret{transform:translateX(4px)}
.mega-ic.sm .icon{width:17px;height:17px}
.mega-ic .icon{width:21px;height:21px}

.header-actions{display:flex;align-items:center;gap:12px}
.menu-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
  background:none;border:1px solid var(--line);border-radius:11px;cursor:pointer;padding:0 11px}
.menu-toggle span{display:block;height:2px;background:var(--navy);border-radius:2px;transition:transform .25s,opacity .2s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile menu */
.mobile-menu{position:fixed;inset:74px 0 0;background:#fff;z-index:99;transform:translateX(100%);
  transition:transform .28s ease;overflow-y:auto;visibility:hidden}
.mobile-menu.open{transform:translateX(0);visibility:visible}
.mobile-nav{display:flex;flex-direction:column;padding:18px 24px 48px;gap:2px}
.m-cta{justify-content:center;margin-top:18px}

/* ---------- Sections / utilities ---------- */
.section{padding:64px 0}
.section-sm{padding:44px 0}
.section-soft{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-navy{background:var(--navy);color:#cfe0f2}
.section-navy h1,.section-navy h2,.section-navy h3{color:#fff}
.eyebrow{display:inline-flex;align-items:center;gap:.5em;white-space:nowrap;font-size:.8rem;font-weight:700;letter-spacing:.09em;
  line-height:1;text-transform:uppercase;color:var(--primary-700);background:#DCE6FF;padding:.55em 1.05em;border-radius:999px;margin-bottom:1rem}
.eyebrow .icon{width:1.15em;height:1.15em;flex:none}
.section-navy .eyebrow{color:#cfe0f2;background:rgba(255,255,255,.12)}
.section-head{max-width:760px;margin:0 auto 40px;text-align:center}
.section-head.left{margin-left:0;text-align:left}
.section-head p{color:var(--muted);font-size:1.1rem}
.section-navy .section-head p{color:#b9cce4}
.lead{font-size:1.18rem;color:var(--muted)}
.center{text-align:center}
.mt-2{margin-top:2rem}

/* ---------- Hero (dark navy background) ---------- */
.hero{position:relative;overflow:hidden;background:var(--navy)}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-top:84px;padding-bottom:90px}
.hero h1{margin-bottom:.6rem;color:#fff}
.hero .eyebrow{background:rgba(255,255,255,.10);color:#cfe0f2}
.hero .sub{font-size:1.22rem;color:#aab6d2;max-width:560px;margin-bottom:1.7rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:2rem}
.hero-points .tick{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--fill);color:#fff}
.hero-points .tick .icon{width:16px;height:16px;stroke-width:2.4}
.hv-kpi .n{font-family:var(--font-head);font-weight:800;font-size:1.35rem;color:var(--navy);line-height:1}
.hv-float .ic{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--soft);color:var(--primary-700)}
.hv-float .ic .icon{width:18px;height:18px}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.proof-strip .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 30px;padding-top:22px;padding-bottom:22px}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;
  transition:border-color .18s ease, background .18s ease;height:100%}
.card:hover{border-color:var(--primary);background:#fbfcff}
.card-link{display:block;color:inherit}
.card-link:hover{color:inherit}
.card-ic{display:grid;place-items:center;width:54px;height:54px;border-radius:14px;background:var(--soft);color:var(--primary-700);margin-bottom:18px}
.card-ic .icon{width:27px;height:27px}
.card h3{font-size:1.16rem;margin-bottom:.5rem}
.card p{color:var(--muted);margin:0;font-size:.98rem}
.card .more{display:inline-flex;align-items:center;gap:.4em;font-weight:600;color:var(--blue);font-size:.94rem;margin-top:16px}
.card .more .caret{width:16px;height:16px;transition:transform .15s}
.card-link:hover .more .caret{transform:translateX(4px)}

/* ---------- Media cards (image on top, icon badge overlapping) ---------- */
.card.media-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card-media{position:relative;aspect-ratio:16/10;background:var(--bg-mist);overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.card-link:hover .card-media img{transform:scale(1.05)}
.media-card .card-body{padding:26px 28px 28px;display:flex;flex-direction:column;flex:1}
.media-card .card-ic{margin:-50px 0 16px;background:var(--fill);color:#fff;border:4px solid #fff;position:relative;z-index:1}
.media-card .more{margin-top:auto;padding-top:14px}
.card-media .tag{position:absolute;top:14px;left:14px;background:#fff;border:1px solid var(--line)}

/* ---------- Generic framed image ---------- */
.img-frame{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg);background:var(--bg-mist)}
.img-frame img{display:block;width:100%;height:auto}
.img-frame.round-xl{border-radius:var(--radius-xl)}

/* tag */
.tag{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--primary-700);background:var(--soft);padding:.4em .85em;border-radius:999px}
.feature .card-ic{margin-bottom:16px}
.proof-list .tick{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--soft);color:var(--primary-700)}
.proof-list .tick .icon{width:17px;height:17px;stroke-width:2.4}
.stat .n{font-family:var(--font-head);font-weight:800;font-size:2.1rem;color:var(--navy);line-height:1}
.stat .n span{background:var(--fill);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- Page hero (interior) ---------- */
.page-hero{position:relative;overflow:hidden;background:var(--bg-soft)}
.page-hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center}
@media (max-width:900px){.page-hero-grid{grid-template-columns:1fr;gap:32px}.page-hero-grid .img-frame{max-width:620px}}
.page-hero .container{padding-top:64px;padding-bottom:64px}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.88rem;color:var(--muted);margin-bottom:18px}
.breadcrumb a{color:var(--muted);font-weight:500}
.breadcrumb a:hover{color:var(--blue)}
.breadcrumb .sep{opacity:.5}
.page-hero h1{max-width:18ch}
.page-hero .lead{max-width:62ch}

/* ---------- Problem/Service detail content ---------- */
.detail-grid{display:grid;grid-template-columns:1fr 330px;gap:48px;align-items:start}
.prose>*:first-child{margin-top:0}
.block{margin-bottom:40px}
.block h2{font-size:1.5rem;margin-bottom:.6rem}
.block .kicker{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-700);margin-bottom:.5rem;display:block}
.callout{background:var(--bg-soft);border:1px solid var(--line);border-left:4px solid var(--primary);border-radius:12px;padding:20px 22px;color:var(--ink)}
.callout.want{background:var(--soft);border-left-color:var(--blue)}
.pain-list .dot .icon{width:14px;height:14px;stroke-width:2.6}
.win-list{list-style:none;display:grid;gap:12px;margin-top:6px}
.win-list li{display:flex;gap:12px;align-items:flex-start}
.win-list .tick{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--fill);color:#fff}
.win-list .tick .icon{width:15px;height:15px;stroke-width:2.6}

.psab{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin-top:6px}
.psab .ps-item{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--shadow-sm)}
.psab .ps-item .ic{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:var(--soft);color:var(--primary-700);margin-bottom:14px}
.psab .ps-item h3{font-size:1.05rem;margin-bottom:.4rem}
.psab .ps-item p{color:var(--muted);font-size:.95rem;margin:0}

/* Sidebar */
.sidebar{position:sticky;top:98px;display:grid;gap:20px}
.side-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm)}
.side-card.cta-card{background:var(--navy);color:#cfe0f2}
.side-card.cta-card h3{color:#fff}
.side-card.cta-card p{color:#b9cce4;font-size:.96rem}
.side-card h3{font-size:1.1rem;margin-bottom:14px}
.side-list{list-style:none;display:grid;gap:8px}
.side-list a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--navy);font-weight:500;font-size:.95rem;border:1px solid transparent}
.side-list a:hover{background:var(--bg-soft);border-color:var(--line)}
.side-list .ic{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--soft);color:var(--primary-700)}
.side-list .ic .icon{width:17px;height:17px}

/* includes pills */
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.pill{display:inline-flex;align-items:center;gap:.5em;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:.55em 1em;font-size:.92rem;font-weight:500;color:var(--navy);box-shadow:var(--shadow-sm)}
.pill .icon{width:16px;height:16px;color:var(--primary-700)}
.contact-point .ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--soft);color:var(--primary-700)}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;border-radius:var(--radius-xl);
  background:var(--navy);color:#fff;padding:54px;text-align:center}
.cta-band h2{color:#fff;max-width:18ch;margin:0 auto .6rem}
.cta-band p{color:rgba(255,255,255,.88);max-width:54ch;margin:0 auto 1.8rem;font-size:1.1rem}

/* ---------- misc lists on overview pages ---------- */
.mini-link{display:inline-flex;align-items:center;gap:.4em;font-weight:600;font-size:.92rem;margin-top:14px}
.mini-link .caret{width:15px;height:15px;transition:transform .15s}
.card-link:hover .mini-link .caret{transform:translateX(4px)}
.value-list .tick{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--fill);color:#fff}
.value-list .tick .icon{width:16px;height:16px;stroke-width:2.6}
.fit-badge .icon{width:19px;height:19px;stroke-width:2.4}
.fit-yes .tick{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--fill);color:#fff}
.fit-yes .tick .icon{width:15px;height:15px;stroke-width:2.6}
.uniq .card-ic{margin-bottom:16px}
.tavatar .icon{width:24px;height:24px}
.faq-ic .caret{width:18px;height:18px;transform:rotate(90deg)}

/* ---------- Risk reversal (guarantee) ---------- */
.guarantee .section-head{margin-bottom:40px}
.guarantee-grid{margin-top:0}
.gcard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-lg);padding:26px}
.gcard-ic{display:grid;place-items:center;width:50px;height:50px;border-radius:13px;background:var(--fill);color:#fff;margin-bottom:16px}
.gcard-ic .icon{width:25px;height:25px}
.gcard h3{color:#fff;font-size:1.1rem;margin-bottom:.4rem}
.gcard p{color:#b9cce4;margin:0;font-size:.96rem}.mega-ic.sm .icon{width:15px;height:15px}
.mega-allink.block{display:inline-flex;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}

/* Flow steps (ordered, numbered) */
.flow-steps,.agentic-steps{list-style:none;display:grid;gap:16px;counter-reset:none;max-width:760px}
.agentic-steps{margin:0 auto}
.flow-steps li,.agentic-steps li{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 22px}
.flow-num{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--fill);color:#fff;font-family:var(--font-head);font-weight:800}
.flow-steps h3,.agentic-steps h3{font-size:1.1rem;margin:0 0 .25rem}
.flow-steps p,.agentic-steps p{margin:0;color:var(--muted);font-size:.98rem}

/* Two-column win list */
.win-list-2{grid-template-columns:1fr 1fr}
@media (max-width:620px){.win-list-2{grid-template-columns:1fr}}

/* Cost-of-inaction callout */
.callout-cost{background:#FDECEC;border-left-color:#E05656}

/* "Team stays in control" note */
.control-note{display:flex;gap:16px;align-items:flex-start;background:var(--soft);border:1px solid var(--line-2);border-radius:var(--radius-lg);padding:22px 24px}
.control-note p{margin:0;color:var(--ink);font-size:1rem}
.control-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--fill);color:#fff}
.control-ic .icon{width:24px;height:24px}
.center-note{max-width:820px;margin:36px auto 0}

/* Agent cards */
.agent-grid{gap:22px}
.agent-card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;color:inherit;transition:border-color .18s,background .18s}
.agent-card:hover{border-color:var(--primary);background:#fbfcff;color:inherit}
.agent-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.agent-head .card-ic{margin:0;width:46px;height:46px}
.agent-head .card-ic .icon{width:24px;height:24px}
.agent-head h3{margin:0;font-size:1.16rem}
.agent-card>p{color:var(--muted);margin:0 0 14px}
.agent-does{list-style:none;display:grid;gap:8px;margin-bottom:14px}
.agent-does li{display:flex;gap:9px;align-items:flex-start;font-size:.92rem;color:var(--ink)}
.agent-does .caret{width:16px;height:16px;color:var(--primary-700);flex:none;margin-top:2px}

/* Dark cards (Agentic AI band on navy) */
.section-navy .card-dark{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.section-navy .card-dark:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.28)}
.section-navy .card-dark h3{color:#fff}
.section-navy .card-dark p{color:#b9cce4}
.section-navy .card-dark .card-ic{background:var(--fill);color:#fff}

/* Compact service cards (home) */
.card.compact{padding:24px}
.card.compact .card-ic{width:46px;height:46px;margin-bottom:14px}
.card.compact .card-ic .icon{width:23px;height:23px}
.card.compact h3{font-size:1.08rem}
.tool-group-head .card-ic{margin:0;width:46px;height:46px}
.tool-badge .caret{width:14px;height:14px;color:var(--primary-700)}
.tool-preview-group .mini-ic .icon{width:17px;height:17px}

/* Case study flow */
.case-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.case-step{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px}
.case-badge{display:grid;place-items:center;width:50px;height:50px;border-radius:13px;margin-bottom:16px;color:#fff}
.case-badge.problem{background:#E05656}
.case-badge.did{background:var(--fill)}
.case-badge.changed{background:#1FA97A}
.case-badge .icon{width:25px;height:25px}
.case-step h2{font-size:1.2rem;margin-bottom:.5rem}
.case-step p{color:var(--muted);margin:0}

/* Placeholder note */
.placeholder-note{display:inline-flex;align-items:center;gap:.5em;background:#FFF6E6;border:1px solid #F3DFA8;color:#8a6d1f;border-radius:10px;padding:.6em 1em;font-size:.9rem;font-weight:500;margin-top:6px}
.placeholder-note .icon{width:17px;height:17px;flex:none}

/* Sidebar ordered steps */
.side-steps{list-style:none;display:grid;gap:10px}
.side-steps li{display:flex;gap:11px;align-items:center;font-size:.93rem;color:var(--navy);font-weight:500}
.side-steps .n{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--soft);color:var(--primary-700);font-weight:700;font-size:.82rem}

/* Eyebrow on dark surfaces */
.eyebrow-on-dark{background:rgba(255,255,255,.14)!important;color:#dbe6ff!important}

/* Compact / centered hero (Agentic AI page) */
.hero-compact .hero-inner{grid-template-columns:1fr}
.hero-inner-center{text-align:center}
.alert-success .icon{width:20px;height:20px;flex:none}

/* Cookie consent banner */
.consent{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;z-index:150;width:min(720px,calc(100% - 32px));
  background:var(--navy);color:#dbe6ff;border-radius:var(--radius-lg);padding:18px 22px;display:none;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;border:1px solid rgba(255,255,255,.14)}
.consent.show{display:flex}
.consent-text{margin:0;font-size:.92rem;flex:1;min-width:220px}
.consent-actions{display:flex;gap:10px;flex-shrink:0}
.consent .btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.consent .btn-secondary:hover{background:rgba(255,255,255,.12);color:#fff}

/* ---------- Responsive ---------- */
@media (max-width:1200px){
  .primary-nav,.header-cta{display:none}
  .menu-toggle{display:flex}}
@media (max-width:1080px){
  .hero-inner{gap:40px}}
@media (max-width:960px){
  .hero-inner{grid-template-columns:1fr;padding:56px 0 64px}
  .split,.contact-grid,.detail-grid{grid-template-columns:1fr;gap:36px}
  .sidebar{position:static}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .psab{grid-template-columns:1fr}
  .detail-grid .sidebar{order:2}
  .case-flow{grid-template-columns:1fr}}
@media (max-width:680px){
  body{font-size:16px}
  .section{padding:60px 0}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .cta-band{padding:38px 24px}
  .container{padding:0 18px}
  .consent{flex-direction:column;align-items:stretch;text-align:center}
  .consent-actions{justify-content:center}}

/* ---------- Footer (Slalom-style full-bleed bands) ---------- */
.footer-cta-band{background:var(--primary);color:#fff}
.footer-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-top:76px;padding-bottom:76px}
.footer-cta-band h2{color:#fff;margin:0;font-size:clamp(1.9rem,4vw,3rem);max-width:18ch;letter-spacing:-.02em;line-height:1.06}
.footer-cta-band p{color:rgba(255,255,255,.9);margin:.5rem 0 0;max-width:48ch}

.site-footer{background:var(--royal);color:rgba(255,255,255,.78);margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:40px;padding-top:76px;padding-bottom:32px}
.footer-grid .brand .brand-name{color:#fff}
.footer-grid .brand:hover .brand-name{color:#fff}
.footer-grid .brand-mark{background:#fff;color:var(--primary)}
.footer-desc{color:rgba(255,255,255,.72);font-size:.95rem;margin:16px 0;max-width:38ch}
.footer-mail{display:inline-flex;align-items:center;gap:.5em;color:#fff;font-weight:600;font-size:.95rem}
.footer-mail:hover{color:#fff;opacity:.85}
.footer-mail .icon{width:18px;height:18px;color:#fff}
.footer-col h3{color:#fff;font-size:.92rem;letter-spacing:.06em;text-transform:uppercase;margin:0 0 16px}
.footer-col ul{list-style:none;display:grid;gap:10px}
.footer-col a{color:rgba(255,255,255,.78);font-size:.93rem}
.footer-col a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.18);
  padding-top:22px;padding-bottom:42px;font-size:.85rem;color:rgba(255,255,255,.62)}
.footer-bottom p{margin:0}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}.footer-cta-inner{flex-direction:column;align-items:flex-start}}

/* =========================================================================
   HOMEPAGE — modern redesign (gradients, depth, bento, split, timeline)
   Adds selective depth/gradient on top of the flat base system.
   ========================================================================= */
:root{
  --accent-cyan:#22D3EE;
  --accent-violet:#8B5CF6;
  --grad-hero:linear-gradient(125deg,#0A1330 0%,#0b1c48 46%,#0f2d74 100%);
  --grad-blue:linear-gradient(120deg,#1A5CFF 0%,#0A2BB5 100%);
  --grad-bright:linear-gradient(115deg,#1A5CFF 0%,#22D3EE 100%);
  --sh-1:0 1px 2px rgba(16,32,74,.05),0 6px 18px rgba(16,32,74,.06);
  --sh-2:0 10px 26px rgba(16,32,74,.10),0 26px 60px rgba(16,32,74,.10);
  --sh-blue:0 16px 40px rgba(26,92,255,.30);
}

/* ---------- Hero (layered gradient + glow + grid) ---------- */
.hero{background:var(--grad-hero)}
.hero-inner{position:relative;z-index:1}
.hero h1 .grad{background:linear-gradient(100deg,#8fc6ff,#22D3EE);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-points .tick{background:linear-gradient(135deg,#1A5CFF,#22D3EE)}
.hero-trust .pill{font-size:.86rem;font-weight:600;color:#e6eeff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);padding:.42em .95em;border-radius:999px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hero .hv-card{box-shadow:0 34px 80px rgba(2,8,26,.55);border-color:rgba(255,255,255,.7)}

/* ---------- Section head ---------- */
.eyebrow{background:var(--chip);color:#fff}
.section-head p{margin-top:.4rem}
.split-head .eyebrow{margin-bottom:14px}
.split-head .btn{margin-top:18px}
.prob-item .p-ic .icon{width:21px;height:21px}
.svc-row .card-ic{flex:none;margin:0;width:48px;height:48px}
.b .card-ic{margin-bottom:16px}
.b .more{margin-top:auto;padding-top:14px}
.b-lg .card-ic{background:rgba(255,255,255,.14);color:#fff}
.b-lg .more{color:#9fd8ff}
.stat-cell .sub{font-size:.82rem;color:rgba(255,255,255,.62);margin-top:2px}
.section-agentic>.container{position:relative;z-index:1}
.section-agentic .eyebrow{background:rgba(255,255,255,.12);color:#cfe0f2}
.section-agentic .section-head p,.section-agentic>.container>p{color:#b9cce4}
.agent-showcase .as-copy .eyebrow{margin-bottom:16px}
.agent-showcase .lead{color:#b9cce4;font-size:1.14rem;margin-bottom:22px;max-width:46ch}
.agent-chip .ac-ic .icon{width:20px;height:20px}
.control-pill .icon{width:16px;height:16px}
.ind-ic .icon{width:26px;height:26px}
.ind-card .more{margin-top:auto;padding-top:22px;display:inline-flex;align-items:center;gap:.4em;font-weight:600;color:var(--teal)}
.ind-card .more .caret{width:16px;height:16px;transition:transform .15s}
.ind-card:hover .more .caret{transform:translateX(4px)}

/* ---------- Result cards depth ---------- */
.section .card{transition:transform .2s,box-shadow .2s,border-color .2s}
.section .card.card-link:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}

/* ---------- Final CTA gradient ---------- */
.cta-band{background:var(--grad-blue)}
.cta-band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(500px 260px at 12% 0%,rgba(34,211,238,.26),transparent 60%),radial-gradient(520px 300px at 100% 100%,rgba(139,92,246,.24),transparent 60%)}
.cta-band>*{position:relative;z-index:1}
.footer-cta-band{background:var(--grad-blue)}

/* ---------- Reveal-on-scroll (gated by .js-anim so no-JS stays visible) ---------- */
.js-anim .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js-anim .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js-anim .reveal{opacity:1;transform:none;transition:none}}

/* =========================================================================
   HOMEPAGE — reference polish (Slalom depth + geometric motif + accent pop,
   Eaglytics trust/strengths). Additive.
   ========================================================================= */
:root{
  --pop:#FFB020;         /* warm accent pop against navy (Slalom-style) */
  --pop-soft:rgba(255,176,32,.16);
}

/* Accent pop on dark eyebrows: a warm leading marker */
.hero .eyebrow::before,.section-agentic .eyebrow::before,.stats-band .eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--pop);flex:none;box-shadow:0 0 12px rgba(45,224,192,.8)}
.hero-points .tick{box-shadow:0 0 0 3px rgba(34,211,238,.14)}
.pillar .pl-ic .icon{width:28px;height:28px}

/* ---------- Premium spacing + type rhythm ---------- */
.section-head{max-width:820px}
.section-head h2{font-size:clamp(1.9rem,3.4vw,2.95rem)}
.hero h1{font-size:clamp(2.3rem,4.9vw,3.8rem)}
.cta-band{background:var(--navy)}
.cta-band::after{display:none}
.footer-cta-band{background:var(--primary)}
.svc-tab.is-active{color:var(--primary)}
.svc-tab.is-active::before{height:62%}
.svc-tab-ic .icon{width:21px;height:21px}
.svc-tab.is-active .svc-tab-ic{opacity:1}
.svc-tab .caret{flex:none;width:16px;height:16px;opacity:0;transform:translateX(-5px);transition:opacity .15s,transform .15s}
.svc-tab.is-active .caret{opacity:1;transform:none}
.svc-panel.is-active{animation:svcFade .3s ease}
@keyframes svcFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.svc-panel-eyebrow .icon{width:1.1em;height:1.1em}
.svc-panel .btn{align-self:flex-start;margin-bottom:34px}
.svc-inc li .icon{flex:none;width:17px;height:17px;color:var(--teal);stroke-width:2.6;margin-top:2px}
.svc-out li .caret{flex:none;width:15px;height:15px;color:var(--teal);margin-top:3px}

@media (max-width:980px){
  .svc-tab .caret{display:none}}
.carousel-head .section-head{margin:0;max-width:760px}
.cbtn .icon{width:20px;height:20px}
.cbtn.prev .icon{transform:rotate(180deg)}
.case-ic .icon{width:24px;height:24px}
.case-foot .more{margin:0}

.hero-home .hero-inner{display:block;position:relative;z-index:1;padding-top:56px;padding-bottom:8px}
.hero-home .hero-copy{max-width:815px}
.hero-home .eyebrow{background:rgba(255,255,255,.08);color:#cfe0f2}
.hero-home .sub{font-size:1.22rem;color:#aab6d2;max-width:600px;margin-bottom:1.9rem}
.hero-home .hero-actions{margin-bottom:0}

@media (max-width:900px){
  .hero-home .hero-inner{padding-top:72px}}

/* =========================================================================
   Palette: deep navy + teal + electric indigo (dark header & mega menu that
   match the hero). Appended last so it wins the cascade.
   ========================================================================= */
:root{
  --navy:#0A1633;
  --navy-700:#13224A;
  --primary:#5865FF;
  --primary-700:#4A54E0;
  --blue:#4A54E0;
  --blue-600:#3B45C9;
  --accent:#5865FF;
  --fill:#5865FF;
  --teal:#2DE0C0;
  --teal-600:#18C7A8;
  --accent-cyan:#2DE0C0;
  --ring:rgba(88,101,255,.30);
  --soft:#ECEBFF;
}

/* ---------- Header: same navy as the hero ---------- */
.site-header{background:var(--navy);border-bottom:1px solid rgba(255,255,255,.08)}
.site-header.scrolled{background:var(--navy);border-bottom-color:rgba(255,255,255,.16)}
.brand,.brand:hover,.brand-name{color:#fff}
.brand-mark{background:transparent}
.nav-link{color:#fff}
.nav-link:hover,.nav-link.is-active{color:#fff;background:rgba(255,255,255,.08)}
.nav-link .caret{opacity:.55}
.menu-toggle{border-color:rgba(255,255,255,.22)}
.menu-toggle span{background:#fff}
.header-cta.btn-outline-light{border-color:rgba(255,255,255,.55)}
.mega-allink.block{border-top-color:rgba(255,255,255,.12)}
.has-mega-fit:hover .mega,.has-mega-fit.open .mega{transform:translateX(-50%) translateY(0)}
.mega-lc .lc-ic .icon{width:20px;height:20px}
.mega-lc .lc-link .caret{width:15px;height:15px;transition:transform .15s}
.mega-lc .lc-link:hover .caret{transform:translateX(3px)}
.mega-promo .tag{align-self:flex-start;font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--navy);background:var(--teal);padding:.32em .7em;border-radius:999px}
.mega-promo .promo-link .caret{width:15px;height:15px;transition:transform .15s}
.mega-promo .promo-link:hover .caret{transform:translateX(3px)}

/* ---------- Primary CTA: solid teal + dark navy text (drops the indigo) ---------- */
.btn-primary{background:var(--chip);color:#fff;border-color:var(--chip)}
.btn-primary:hover{background:#00248c;color:#fff;border-color:#00248c}
.btn-primary .caret,.btn-primary .icon{color:#fff}
/* Hero primary button stays teal (unchanged) */
.hero-actions .btn-primary{background:var(--teal);color:var(--navy);border-color:var(--teal)}
.hero-actions .btn-primary:hover{background:var(--teal-600);color:var(--navy);border-color:var(--teal-600)}
.hero-actions .btn-primary .caret,.hero-actions .btn-primary .icon{color:var(--navy)}
:focus-visible{outline-color:var(--teal)}
:root{--ring:rgba(45,224,192,.34)}

/* =========================================================================
   PALETTE CONSOLIDATION — navy + teal ONLY.
   Removes every indigo/periwinkle (#5865FF/#4A54E0) and orange/amber
   (#E4572E/#FFB020) from the whole site. Appended last -> wins the cascade.
   Rule of thumb: DARK teal for accents/text/chips on LIGHT backgrounds
   (readable), BRIGHT teal for fills/accents on DARK backgrounds & buttons.
   ========================================================================= */
:root{
  --primary:#002FAF;      /* brand blue — links, borders, accents on light */
  --primary-700:#00248C;  /* darker blue — accent text/icons + link hover */
  --accent:#002FAF;
  --blue:#002FAF;
  --blue-600:#00248C;
  --fill:#002FAF;         /* solid chips/badges w/ white icon (AA on #fff) */
  --royal:#0A1633;        /* was royal blue — footer/stats now navy */
  --soft:#EDF2F7;         /* neutral cool tint — mint #D7F5EF retired per brand */
  --ring:rgba(45,224,192,.34);
  --pop:#2DE0C0;          /* was amber — eyebrow marker / geo dots now teal */
  --pop-soft:rgba(45,224,192,.16);
  --grad-hero:var(--navy);/* was navy→blue gradient — now flat navy */
  --grad-blue:var(--navy);
  --grad-bright:var(--teal);
}
.footer-cta-band{background:var(--navy-700)}
.site-footer .brand-mark{background:transparent}
.hero-points .tick{background:var(--teal);color:var(--navy)}

/* =========================================================================
   Deep-navy #020c24 — hero banner, header/menu (stay blended), icon chips.
   ========================================================================= */
:root{--hero:#020c24;--chip:#002faf}
.site-header,.site-header.scrolled{background:var(--hero)}

/* Icon chips: same deep navy background with a teal glyph */
.ind-ic,.card-ic,.media-card .card-ic,.prob-item .p-ic,.mini-ic,.step-num,
.psab .ps-item .ic,.side-list .ic,.contact-point .ic,.mega-ic,
.hv-float .ic,.tavatar,.faq-ic,.case-ic,.side-steps .n,.proof-list .tick,
.pillar .pl-ic{
  background:var(--chip);color:#fff}

/* Outline-light button (e.g. header "Talk to an Expert"): bright teal text on hover */
.btn-outline-light:hover{background:#fff;color:var(--teal);border-color:#fff}
.btn-outline-light:hover .caret,.btn-outline-light:hover .icon{color:var(--teal)}

/* =========================================================================
   Nav caret -> arrowhead (chevron); nav hover -> font color; CTA -> soft pill
   ========================================================================= */
/* Chevron arrowhead: points down at rest, flips up when the mega is open */
.nav-link .nav-caret{width:14px;height:14px;flex:none;opacity:.7;transition:transform .2s,opacity .2s}
.has-mega:hover .nav-link .nav-caret,.has-mega.open .nav-link .nav-caret{transform:rotate(180deg);opacity:1}

/* Nav links: hover/active/open change FONT color to teal, no background pill */
.nav-link:hover,.nav-link.is-active,.has-mega:hover .nav-link,.has-mega.open .nav-link{
  color:var(--teal);background:transparent}

/* Header CTA "Talk to an Expert": white fill + deep-navy text on hover */
.header-cta.btn-outline-light{border-color:#fff}
.header-cta.btn-outline-light:hover{background:#fff;color:var(--hero);border-color:#fff}
.header-cta.btn-outline-light:hover .caret,.header-cta.btn-outline-light:hover .icon{color:var(--hero)}

/* Hero "Explore Solutions" hover: match the "Talk to an Expert" effect — white fill + deep-navy text */
.hero-actions .btn-outline-light:hover{background:#fff;color:var(--hero);border-color:#fff}
.hero-actions .btn-outline-light:hover .caret,.hero-actions .btn-outline-light:hover .icon{color:var(--hero)}
.mega-allink.block{border-top-color:rgba(10,22,51,.10)}
.mega-promo .tag{color:var(--navy);background:var(--teal)}

/* =========================================================================
   HEADER NAVIGATION — rebuilt (light, simple, conversion-focused).
   Appended last so it supersedes the earlier dark mega-menu styles.
   Desktop mega menus + dropdowns + mobile accordion, all from includes/nav.php.
   ========================================================================= */

/* ---------- Sticky light header ---------- */
.site-header,
.site-header.scrolled{
  position:sticky;top:0;z-index:100;
  background:#fff;border-bottom:1px solid var(--line);
  box-shadow:none;transition:box-shadow .2s ease}
.site-header.scrolled{box-shadow:0 1px 3px rgba(8,17,36,.06),0 8px 24px rgba(8,17,36,.05)}
.site-header .header-inner{display:flex;align-items:center;gap:24px;height:72px}
.site-header .brand-name{color:var(--navy)}
.primary-nav{flex:1;display:flex;justify-content:center}
.nav-list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;height:100%}
.nav-item{position:static}

/* Triggers and plain links */
.site-header .nav-link{
  display:inline-flex;align-items:center;gap:.3em;
  padding:9px 13px;border:0;background:none;cursor:pointer;
  font-family:var(--font-body);font-size:.94rem;font-weight:600;
  color:var(--navy);border-radius:var(--btn-r);white-space:nowrap;
  transition:color .15s,background .15s}
.site-header .nav-link:hover,
.site-header .nav-link:focus-visible,
.site-header .nav-link[aria-expanded="true"],
.site-header .nav-link.is-active{color:var(--chip);background:rgba(0,47,175,.06)}
.site-header .nav-link:focus-visible{outline:2px solid var(--chip);outline-offset:2px}
.site-header .nav-link .nav-caret{width:13px;height:13px;flex:none;opacity:.65;transition:transform .2s}
.site-header .nav-link[aria-expanded="true"] .nav-caret{transform:rotate(180deg);opacity:1}

/* ---------- Panels (shared) ---------- */
.mm-panel{
  position:absolute;left:50%;top:100%;transform:translateX(-50%);
  z-index:99;padding-top:10px}
.mm-panel[hidden]{display:none}
.mm-inner{
  background:#fff;border:1px solid var(--line);border-radius:var(--menu-r);
  box-shadow:0 10px 24px rgba(8,17,36,.06),0 24px 60px rgba(8,17,36,.10);
  padding:28px 30px}
.mm-panel-mega .mm-inner{width:min(1280px,calc(100vw - 40px))}
.mm-panel-drop .mm-inner{min-width:264px;padding:14px}

/* Wide mega menus stay centred on the page (nav-item is position:static, so
   the panel centres on the header). Small dropdowns instead anchor to their
   own trigger and open left-aligned beneath it. */
.has-panel-drop{position:relative}
.mm-panel-drop{left:0;transform:none}

/* Columns */
.mm-cols{display:grid;gap:28px;align-items:start}
.mm-cols-4{grid-template-columns:repeat(3,minmax(0,1fr)) 268px}
.mm-col{min-width:0}
.mm-col-head{display:block;margin:0 0 4px;font-family:var(--font-head);font-weight:700;
  font-size:.98rem;line-height:1.3;color:var(--navy);transition:color .15s}
a.mm-col-head:hover,a.mm-col-head:focus-visible{color:var(--chip)}
.mm-links{list-style:none;display:grid;gap:9px;margin:0;padding:0}
.nav-item-link{display:block;font-size:.9rem;line-height:1.4;color:var(--ink);
  border-radius:6px;transition:color .15s}
.nav-item-link:hover,.nav-item-link:focus-visible{color:var(--chip)}
.nav-item-link:focus-visible{outline:2px solid var(--chip);outline-offset:2px}
.mm-panel-drop .mm-links{gap:2px}
.mm-panel-drop .nav-item-link{padding:10px 12px;font-weight:500}
.mm-panel-drop .nav-item-link:hover{background:var(--bg-soft)}

/* CTA card — light tinted */
.mm-cta{background:#F2F6FF;border:1px solid rgba(0,47,175,.10);border-radius:var(--menu-r);
  padding:22px;display:flex;flex-direction:column;height:100%}
.mm-cta-eyebrow{margin:0 0 8px;font-size:.66rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--chip)}
.mm-cta-head{margin:0 0 8px;font-size:1.02rem;line-height:1.3;color:var(--navy)}
.mm-cta-desc{margin:0 0 16px;font-size:.85rem;line-height:1.5;color:var(--muted)}
.mm-cta-link{margin-top:auto;display:inline-flex;align-items:center;gap:.4em;
  font-weight:700;font-size:.9rem;color:var(--chip)}
.mm-cta-link .caret{width:15px;height:15px;transition:transform .15s}
.mm-cta-link:hover .caret{transform:translateX(3px)}

/* Panel footer link */
.mm-footer-link{display:inline-flex;align-items:center;gap:.4em;margin-top:22px;
  padding-top:16px;border-top:1px solid var(--line);width:100%;
  font-weight:700;font-size:.9rem;color:var(--chip)}
.mm-panel-drop .mm-footer-link{margin-top:8px;padding:12px}
.mm-footer-link .caret{width:15px;height:15px;transition:transform .15s}
.mm-footer-link:hover .caret{transform:translateX(3px)}

/* ---------- Header CTA button ---------- */
.header-actions{display:flex;align-items:center;gap:10px;flex:none}
.site-header .header-cta{background:var(--chip);color:#fff;border-color:var(--chip);
  border-radius:var(--btn-r);padding:.62em 1.2em;font-weight:700;white-space:nowrap}
.site-header .header-cta:hover{background:#00248c;border-color:#00248c;color:#fff}
/* Arrow on the header / mobile CTA — same nudge-on-hover as the homepage hero button. */
.header-cta .caret,.m-cta .caret{width:16px;height:16px;transition:transform .15s ease}
.header-cta:hover .caret,.m-cta:hover .caret{transform:translateX(3px)}
.menu-toggle{display:none}
.menu-toggle span{background:var(--navy)}

/* ---------- Mobile / tablet ---------- */
@media (max-width:1080px){
  .primary-nav{display:none}
  .menu-toggle{display:flex}
  .site-header .header-inner{height:68px;gap:12px}
  .site-header .header-cta{display:none}}
.mobile-menu{position:fixed;inset:68px 0 0;background:#fff;z-index:99;
  width:100%;max-width:100vw;overflow-x:hidden;
  transform:translateX(100%);transition:transform .26s ease;
  overflow-y:auto;visibility:hidden;-webkit-overflow-scrolling:touch}
.mobile-menu.open{transform:translateX(0);visibility:visible}
.mobile-nav{display:flex;flex-direction:column;padding:10px 20px 44px}
.m-acc{border-bottom:1px solid var(--line)}
.m-acc-trigger{display:flex;justify-content:space-between;align-items:center;width:100%;
  min-height:52px;padding:14px 4px;background:none;border:0;cursor:pointer;
  font-family:var(--font-head);font-weight:600;font-size:1.05rem;color:var(--navy);text-align:left}
.m-acc-trigger:focus-visible{outline:2px solid var(--chip);outline-offset:-2px}
/* Plain drawer links (Trust, About) — match the accordion rows' look & feel. */
.m-link{display:flex;align-items:center;min-height:52px;padding:14px 4px;
  font-family:var(--font-head);font-weight:600;font-size:1.05rem;color:var(--navy);
  border-bottom:1px solid var(--line)}
.m-link:active,.m-link:focus-visible{color:var(--chip)}
.m-acc-icon{position:relative;width:14px;height:14px;flex:none}
.m-acc-icon::before,.m-acc-icon::after{content:"";position:absolute;background:var(--chip);
  border-radius:2px;transition:transform .2s}
.m-acc-icon::before{top:6px;left:0;width:14px;height:2px}
.m-acc-icon::after{left:6px;top:0;width:2px;height:14px}
.m-acc-trigger[aria-expanded="true"] .m-acc-icon::after{transform:scaleY(0)}
.m-acc-panel[hidden]{display:none}
.m-acc-panel{display:flex;flex-direction:column;padding:2px 0 14px}
.m-group-head{display:block;min-height:44px;padding:12px 4px 6px;font-size:.72rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--chip)}
.m-group-head.is-static{color:#7c8aa5}
.m-sub-link{display:flex;align-items:center;min-height:44px;padding:11px 12px;
  color:var(--ink);font-size:.97rem;line-height:1.35;border-radius:var(--btn-r)}
.m-sub-link:active,.m-sub-link:focus-visible{background:var(--bg-soft)}
.m-sub-cta{display:inline-flex;align-items:center;gap:.4em;min-height:44px;padding:12px;
  font-weight:700;font-size:.94rem;color:var(--chip)}
.m-cta{justify-content:center;margin-top:22px;min-height:48px;
  background:var(--chip);color:#fff;border-color:var(--chip);border-radius:var(--btn-r)}
.m-cta:hover{background:#00248c;border-color:#00248c;color:#fff}

/* On narrow desktops keep the wide panels inside the viewport */
@media (max-width:1240px){
  .mm-cols-4{grid-template-columns:repeat(2,minmax(0,1fr)) 250px}}

/* =========================================================================
   NAVIGATION PALETTE — one accent per menu.
   Each menu in includes/nav.php declares an `accent` key; the header stamps it
   as data-accent on the trigger, the panel and the mobile accordion. Everything
   below reads --mm-acc / --mm-tint / --mm-line, so recolouring a menu is a
   one-line change here — no template edits.
   Accents are AA-contrast on white; icon chips are solid accent + white icon.
   ========================================================================= */

.nav-item,.mm-panel,.m-acc{
  --mm-acc:#002FAF;--mm-tint:#ECF1FD;--mm-line:rgba(0,47,175,.14)}
[data-accent="blue"] { --mm-acc:#002FAF;--mm-tint:#ECF1FD;--mm-line:rgba(0,47,175,.14)}
[data-accent="teal"] { --mm-acc:#0A7A6D;--mm-tint:#E4F4F1;--mm-line:rgba(10,122,109,.18)}
[data-accent="green"]{ --mm-acc:#15764A;--mm-tint:#E7F4EC;--mm-line:rgba(21,118,74,.18)}
[data-accent="slate"]{ --mm-acc:#33456E;--mm-tint:#EDF0F7;--mm-line:rgba(51,69,110,.18)}

/* ---------- Trigger takes its menu's colour ---------- */
.site-header .nav-item .nav-link:hover,
.site-header .nav-item .nav-link:focus-visible,
.site-header .nav-item .nav-link[aria-expanded="true"],
.site-header .nav-item .nav-link.is-active{color:var(--mm-acc);background:var(--mm-tint)}
.site-header .nav-item .nav-link:focus-visible{outline-color:var(--mm-acc)}

/* ---------- Panel shell ----------
   No accent band. The 1px outline is a box-shadow ring rather than a border so
   nothing sits inside the rounded corners. Tighter padding than the base rule. */
.mm-inner{position:relative;border:0;padding:24px 26px;
  box-shadow:0 0 0 1px var(--line),
             0 10px 24px rgba(8,17,36,.06),
             0 24px 60px rgba(8,17,36,.10)}

/* ---------- Column: icon chip -> heading -> description -> rule -> links ---------- */
.mm-col-head{display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  margin:0 0 6px;font-size:.95rem;color:var(--navy)}
a.mm-col-head:hover,a.mm-col-head:focus-visible{color:var(--mm-acc)}
.mm-col-ic .icon{width:17px;height:17px}
a.mm-col-head:hover .mm-col-ic{transform:translateY(-1px)}
.mm-panel-mega .mm-links{gap:2px;padding-top:12px;border-top:1px solid var(--mm-line)}

/* ---------- Item: accent chevron bullet + hover pill ---------- */
.mm-panel-mega .nav-item-link{display:flex;align-items:flex-start;gap:9px;
  margin-left:-8px;padding:6px 8px;border-radius:var(--btn-r);
  font-weight:500;color:var(--ink)}
.mm-panel-mega .nav-item-link:hover,
.mm-panel-mega .nav-item-link:focus-visible{background:var(--mm-tint);color:var(--mm-acc)}
.nav-item-bullet{flex:none;width:6px;height:6px;
  border-right:1.7px solid var(--mm-acc);border-bottom:1.7px solid var(--mm-acc);
  transform:rotate(-45deg);opacity:.5;transition:opacity .15s,transform .15s}
.mm-panel-mega .nav-item-bullet{margin-top:.45em}
.mm-panel-mega .nav-item-link:hover .nav-item-bullet,
.mm-panel-mega .nav-item-link:focus-visible .nav-item-bullet{
  opacity:1;transform:rotate(-45deg) translate(1.5px,1.5px)}

/* ---------- Dropdown panels (Case Studies, About): one icon per item ---------- */
.mm-panel-drop .mm-inner{min-width:292px}
/* Dropdowns (Case Studies, About) are icon-free: clean text links, no chevron
   bullet, text aligned with the group heading at the same left inset. */
.mm-panel-drop .nav-item-bullet{display:none}
.mm-panel-drop .nav-item-link{padding:8px 10px}

/* Grouped dropdown: a small, quiet section heading above each link group,
   inset to line up with the link labels below it. */
.mm-drop-group{margin:0 0 6px;padding-left:10px;font-family:var(--font-body);
  font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#7c8aa5}
.mm-drop-group ~ .mm-drop-group{margin-top:14px}
.mm-panel-drop .mm-links + .mm-drop-group{margin-top:14px}
.mm-panel-drop .nav-item-link{display:flex;align-items:center;gap:11px;
  padding:8px 10px;border-radius:var(--btn-r);font-weight:600;color:var(--ink)}
.mm-panel-drop .nav-item-link:hover,
.mm-panel-drop .nav-item-link:focus-visible{background:var(--mm-tint);color:var(--mm-acc)}
.nav-item-ic .icon{width:16px;height:16px}
.mm-panel-drop .nav-item-link:hover .nav-item-ic,
.mm-panel-drop .nav-item-link:focus-visible .nav-item-ic{background:var(--mm-acc);color:#fff}

/* Two-column grouped dropdown (the Agentic AI menu, 'two_col' => true in
   nav.php): the groups sit side by side with a hairline between them, so two
   long lists take half the height. Each .mm-dropcol wraps one group, which is
   also why the sibling-margin rules above cannot reach across columns. */
.mm-drop-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.mm-drop-cols .mm-dropcol+.mm-dropcol{border-left:1px solid var(--mm-line);padding-left:18px}
.mm-panel-drop-2col .mm-inner{min-width:560px}

/* ---------- CTA card + footer link inherit the accent ---------- */
.mm-cta{background:var(--mm-tint);border-color:var(--mm-line)}
.mm-cta-eyebrow,.mm-cta-link{color:var(--mm-acc)}
.mm-cta-desc{color:var(--ink);opacity:.78}
.mm-footer-link{color:var(--mm-acc);border-top-color:var(--mm-line)}

/* ---------- Mobile drawer: same colours, same chips ---------- */
.m-acc-icon::before,.m-acc-icon::after{background:var(--mm-acc)}
.m-acc-trigger[aria-expanded="true"]{color:var(--mm-acc)}
.m-group-head{display:flex;align-items:center;gap:10px;
  padding:14px 4px 8px;font-family:var(--font-head);font-size:.94rem;font-weight:700;
  letter-spacing:0;text-transform:none;color:var(--navy)}
.m-group-head.is-static{color:var(--navy)}
.m-group-ic .icon{width:16px;height:16px}
.m-sub-link{gap:11px;font-weight:500}
.m-sub-ic .icon{width:16px;height:16px}
.m-sub-link:active,.m-sub-link:focus-visible{background:var(--mm-tint);color:var(--mm-acc)}
.m-sub-cta{color:var(--mm-acc)}

/* -------------------------------------------------------------------------
   PORTLET COLUMNS — opt-in per menu via 'layout' => 'portlet' (includes/nav.php).
   Each column becomes a tinted card matching the CTA card, with an uppercase
   accent heading and no icon chip. Currently: Solutions.
   ------------------------------------------------------------------------- */
.mm-panel[data-layout="portlet"] .mm-cols{gap:18px;align-items:stretch}
.mm-panel[data-layout="portlet"] .mm-col{
  display:flex;flex-direction:column;height:100%;
  padding:20px 18px;border-radius:var(--menu-r);
  background:var(--mm-tint);border:1px solid var(--mm-line)}

/* Heading: uppercase, accent colour — same treatment as the CTA card eyebrow. */
.mm-panel[data-layout="portlet"] .mm-col-head{
  gap:0;margin:0 0 8px;font-family:var(--font-body);
  font-size:.78rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;line-height:1.35;color:var(--mm-acc)}
/* Heading hover: the label deepens to navy — no underline, no arrow. */
.mm-panel[data-layout="portlet"] a.mm-col-head:hover,
.mm-panel[data-layout="portlet"] a.mm-col-head:focus-visible{
  text-decoration:none;color:var(--navy)}
.mm-panel[data-layout="portlet"] .mm-col-desc{margin:0 0 12px;color:var(--ink);opacity:.72}
.mm-panel[data-layout="portlet"] .mm-links{border-top-color:var(--mm-line)}

/* Hover pill reads as white-on-tint inside the card. */
.mm-panel[data-layout="portlet"] .nav-item-link:hover,
.mm-panel[data-layout="portlet"] .nav-item-link:focus-visible{background:#fff}
.mm-head-cta .mm-cta-eyebrow{margin:0 0 3px}
.mm-head-cta-btn .caret{width:15px;height:15px;transition:transform .15s}
.mm-head-cta-btn:hover .caret{transform:translateX(3px)}

/* Portlet items: no hover fill — the label itself grows and goes bold instead. */
.mm-panel[data-layout="portlet"] .nav-item-link:hover,
.mm-panel[data-layout="portlet"] .nav-item-link:focus-visible{
  background:transparent;color:var(--mm-acc);
  font-size:.95rem;font-weight:700}

/* -------------------------------------------------------------------------
   BROWSE COLUMNS — the combined Solutions menu (layout => 'browse').
   Three flat text columns (By Goal / By Industry / By Service) plus one
   compact CTA, on a plain white surface with hairline separators. No cards,
   no icon chips, no descriptions — scannable in five seconds. Proportions
   follow the brief: 30 / 20 / 25 / 25.
   ------------------------------------------------------------------------- */
.mm-panel[data-layout="browse"] .mm-cols{
  gap:0;align-items:stretch;
  grid-template-columns:repeat(4,minmax(0,1fr))}

/* Flat columns; hairline separators divide the three link columns. */
.mm-panel[data-layout="browse"] .mm-col{padding:2px 30px}
.mm-panel[data-layout="browse"] .mm-col:first-child{padding-left:2px}
.mm-panel[data-layout="browse"] .mm-col + .mm-col{border-left:1px solid var(--mm-line)}

/* Section heading: small, uppercase, quiet — clearly distinct from the links. */
.mm-panel[data-layout="browse"] .mm-col-head{
  gap:0;margin:0 0 14px;font-family:var(--font-body);
  font-size:.72rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;line-height:1.3;color:#7c8aa5}

/* Links: simple medium text, comfortable line height, no bullet, no rule. */
.mm-panel[data-layout="browse"] .mm-links{gap:1px;padding-top:0;border-top:0}
.mm-panel[data-layout="browse"] .nav-item-link{
  margin-left:-8px;padding:7px 8px;border-radius:var(--btn-r);
  font-size:.92rem;font-weight:500;line-height:1.4;color:var(--ink)}
.mm-panel[data-layout="browse"] .nav-item-link:hover,
.mm-panel[data-layout="browse"] .nav-item-link:focus-visible{
  background:var(--mm-tint);color:var(--mm-acc)}
.mm-panel[data-layout="browse"] .nav-item-bullet{display:none}

/* Compact CTA in the fourth column: stays top-aligned, never taller than the
   link columns; the text link renders as the site's small pill button. */
.mm-panel[data-layout="browse"] .mm-cta{
  align-self:start;padding:20px;border-radius:var(--menu-r)}
.mm-panel[data-layout="browse"] .mm-cta-head{font-size:.98rem}
.mm-panel[data-layout="browse"] .mm-cta-desc{margin-bottom:16px;font-size:.83rem}
.mm-panel[data-layout="browse"] .mm-cta-link{
  margin-top:0;justify-content:center;padding:.62em 1.1em;border-radius:var(--btn-r);
  background:var(--mm-acc);color:#fff;font-size:.86rem}
.mm-panel[data-layout="browse"] .mm-cta-link:hover,
.mm-panel[data-layout="browse"] .mm-cta-link:focus-visible{
  filter:brightness(1.15);color:#fff}

/* -------------------------------------------------------------------------
   AI treatments — the "AI-enabled" service badge and the Featured AI Agents
   panel (both live inside the Solutions browse menu).
   ------------------------------------------------------------------------- */

/* Screen-reader-only text utility (used by the AI badge and decorative icons). */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* AI cue: a tiny "AI" superscript beside an AI-enhanced service. No background,
   no border — subtle, never the visual focus. */
.mm-ai-badge{margin-left:2px;font-size:.62em;font-weight:700;letter-spacing:.02em;
  color:var(--mm-acc,#002FAF);vertical-align:super;line-height:0}

/* A browse column can stack two category groups (Tools & Integrations); space
   the second group below the first. */
.mm-panel[data-layout="browse"] .mm-colgrp + .mm-colgrp{margin-top:22px}


/* Featured AI Agents panel — the strongest focal point in the menu without
   dominating it: brand-tinted card, thin brand border, slightly stronger
   shadow, an icon beside the title, one primary button + one quiet secondary.
   Content is vertically centred with generous whitespace. */
.mm-panel[data-layout="browse"] .mm-cta-featured{
  align-self:stretch;justify-content:center;padding:24px;
  background:#F2F6FF;border:1px solid rgba(0,47,175,.32);
  box-shadow:0 10px 28px rgba(0,47,175,.14)}
.mm-panel[data-layout="browse"] .mm-cta-featured .mm-cta-head{
  display:flex;align-items:center;gap:10px;margin:0 0 12px;
  font-size:1.05rem;color:var(--navy)}
.mm-panel[data-layout="browse"] .mm-cta-featured .mm-cta-desc{margin-bottom:20px}
.mm-cta-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:0;background:var(--mm-acc);color:#fff}
.mm-cta-ic .icon{width:16px;height:16px}
.mm-cta-featured .mm-cta-sub{display:block;margin-top:10px;text-align:center;
  font-size:.82rem;font-weight:600;color:var(--muted);transition:color .15s}
.mm-cta-featured .mm-cta-sub:hover,
.mm-cta-featured .mm-cta-sub:focus-visible{color:var(--mm-acc)}

/* Mobile: the same featured block, stacked and compact. */
.m-featured{margin:10px 4px 6px;padding:16px;border-radius:var(--menu-r);
  background:#F2F6FF;border:1px solid rgba(0,47,175,.24)}
.m-featured-eyebrow{margin:0 0 6px;font-size:.66rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mm-acc)}
.m-featured-title{display:flex;align-items:center;gap:9px;margin:0 0 6px;
  font-family:var(--font-head);font-weight:700;font-size:1.05rem;color:var(--navy)}
.m-featured-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:0;background:var(--mm-acc);color:#fff}
.m-featured-ic .icon{width:16px;height:16px}
.m-featured-desc{margin:0 0 14px;font-size:.9rem;line-height:1.5;color:var(--muted)}
.m-featured-btn{justify-content:center;width:100%;min-height:46px;
  background:var(--mm-acc);color:#fff;border-color:var(--mm-acc);border-radius:var(--btn-r)}
.m-featured-btn:hover,.m-featured-btn:focus-visible{color:#fff}
.m-featured-sub{display:flex;align-items:center;justify-content:center;
  min-height:44px;margin-top:6px;font-size:.9rem;font-weight:600;color:var(--muted)}
.m-featured-sub:active,.m-featured-sub:focus-visible{color:var(--mm-acc)}

/* =========================================================================
   HOMEPAGE — pastel, section-based redesign.
   Every selector is prefixed `hm-` and used ONLY by index.php, so this block
   cannot affect another page. Pastels are section/card surfaces; text stays
   near-navy for contrast (all pairings below clear WCAG AA).
   Flat fills only — no gradients.
   ========================================================================= */
/* NOTE: these tokens live on the SECTION selectors, not :root — anything that
   sits outside a section (e.g. .hm-rail, a sibling of them) inherits none of
   them and every var() silently resolves to nothing. Add such elements here. */
.hm-sec,.hm-hero,.hm-rail{
  /* Two pastel surfaces only — one blue, one near-neutral. */
  --p-sky:#E9F0FF;
  --p-cloud:#F5F7FC;
  /* Ink */
  --hm-ink:#141F3B;    /* headings  — 14.9:1 on white */
  /* Section h2s use the same navy as the dark band / Solutions panel background
     (#0B1533), so the deep blue reads as one colour across the page. 17.6:1. */
  --hm-head-ink:#0B1533;
  --hm-body:#4A5570;   /* body copy —  7.4:1 on white */
  --hm-acc:#002FAF;    /* accent    — 10.4:1 on white */
  --hm-teal:#0E9C86;   /* the single secondary accent (matches the logo) */
  --hm-line:rgba(20,31,59,.09);
}

/* ---------- Section furniture ---------- */
.hm-sec{padding:64px 0;position:relative}
.hm-sec-white{background:#fff}
.hm-sec-cloud{background:var(--p-cloud)}
.hm-sec-sky{background:var(--p-sky)}
.hm-sec-dark{background:#0B1533;color:#fff}
/* Hairline separator between adjacent light sections (never around the dark band,
   where the colour change is the separator). */
.hm-sec-white + .hm-sec-white,
.hm-sec-white + .hm-sec-sky,
.hm-sec-white + .hm-sec-cloud,
.hm-sec-sky + .hm-sec-white,
.hm-sec-cloud + .hm-sec-white{border-top:1px solid var(--hm-line)}

/* Section label — no leading icon, larger and stronger for clearer hierarchy. */
.hm-eyebrow{display:inline-flex;align-items:center;margin-bottom:14px;
  font-size:.82rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--hm-acc)}
.hm-eyebrow .icon{display:none}
.hm-eyebrow-dark{color:#8FB0FF}

.hm-head{max-width:912px;margin:0 auto 48px;text-align:center}
.hm-head h2{margin:0 0 14px;font-size:clamp(1.7rem,3.1vw,2.5rem);line-height:1.18;color:var(--hm-ink)}
.hm-head p{margin:0;font-size:1.05rem;line-height:1.65;color:var(--hm-body)}
.hm-sec-dark .hm-head h2{color:#fff}
.hm-sec-dark .hm-head p{color:#B9C4DC}

/* ---------- Buttons ---------- */
.hm-btn{display:inline-flex;align-items:center;gap:.5em;padding:.85em 1.6em;
  border-radius:var(--btn-r);font-weight:700;font-size:.96rem;white-space:nowrap;
  border:1.5px solid transparent;transition:transform .15s,background .15s,color .15s}
.hm-btn .caret{width:16px;height:16px;transition:transform .15s}
.hm-btn:hover .caret{transform:translateX(3px)}
.hm-btn:hover{transform:translateY(-1px)}
.hm-btn-primary{background:var(--hm-acc);color:#fff;border-color:var(--hm-acc)}
.hm-btn-primary:hover{background:#00248C;color:#fff}
.hm-btn-ghost{background:#fff;color:var(--hm-ink);border-color:#C9D5EE}
.hm-btn-ghost:hover{border-color:var(--hm-acc);color:var(--hm-acc)}
.hm-btn-outline{background:transparent;color:var(--hm-acc);border-color:#C0CFF0}
.hm-btn-outline:hover{background:var(--hm-acc);color:#fff;border-color:var(--hm-acc)}
.hm-btn-light{background:#fff;color:#0B1533;border-color:#fff}
.hm-btn-light:hover{background:#E9F0FF;color:#0B1533}

/* ---------- Hero ---------- */
.hm-hero{position:relative;overflow:hidden;background:var(--p-sky);padding:76px 0 0}
.hm-blob{position:absolute;border-radius:50%;pointer-events:none}
.hm-blob-a{width:520px;height:520px;top:-190px;right:-120px;background:#DCE6FF}
.hm-blob-b{width:340px;height:340px;bottom:60px;left:-150px;background:#E3EEFF}
/* The artwork carries the dashboard, so it gets the larger share of the row. */
.hm-hero-inner{position:relative;z-index:1;display:grid;
  grid-template-columns:.86fr 1.14fr;gap:40px;align-items:center}
.hm-hero-copy h1{margin:0 0 20px;font-size:clamp(2.1rem,4.1vw,3.4rem);line-height:1.12;
  letter-spacing:-.015em;color:var(--hm-ink)}
.hm-hl{color:var(--hm-acc)}
.hm-lead{margin:0 0 30px;max-width:56ch;font-size:1.1rem;line-height:1.65;color:var(--hm-body)}
.hm-hero-actions{display:flex;flex-wrap:wrap;gap:12px}
/* At .9rem this line needed 530px in a 528px box, so "on." alone wrapped to a
   second line. Dropped to .85rem for ~30px of headroom rather than shaving the
   exact 2px, so it survives small font/letter-spacing shifts. It still wraps
   below ~1400px, where the copy column is genuinely too narrow — that is a
   normal two-line paragraph rather than one orphaned word. */
.hm-hero-note{display:flex;align-items:center;gap:.5em;margin:26px 0 0;
  font-size:.85rem;color:var(--hm-body)}
.hm-hero-note .icon{width:17px;height:17px;color:var(--hm-teal);flex:none}
.hm-hero-art svg{display:block;width:100%;height:auto}

/* Data flowing into the hub: short dashes whose offset animates, so each dash travels
   along its connector toward the centre. Dash period is 3 + 13 = 16, and the offset runs
   exactly one period, so the loop is seamless. */
.hm-flow{stroke-dasharray:3 13;animation:hmFlow 1.5s linear infinite}
@keyframes hmFlow{from{stroke-dashoffset:0} to{stroke-dashoffset:-16}}
@media (prefers-reduced-motion:reduce){
  /* Hold the dashes still rather than hiding them — the wiring still reads as connected. */
  .hm-flow{animation:none;opacity:.45}}

/* ---------- Client marquee (replaces the old tool-pill trust strip) ----------
   Two rows drift in opposite directions. Each row holds the SAME list twice, so
   translating a track by -50% lands exactly where it started — the loop has no
   seam. The duplicate is aria-hidden, so screen readers read each client once. */
.hm-clients{position:relative;z-index:1;margin-top:38px;padding:16px 0 18px;
  border-top:1px solid rgba(20,31,59,.08)}
.hm-clients-label{margin:0 0 10px;text-align:center;
  font-size:1rem;font-weight:600;color:var(--hm-body)}
.hm-clients-label b{font-weight:800;color:var(--hm-acc)}

.hm-marquee{display:grid;gap:6px;overflow:hidden;
  /* fade the names out at both edges instead of slicing them mid-word */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.hm-marquee-row{display:flex;width:max-content}
.hm-marquee-track{display:flex;align-items:center;list-style:none;margin:0;padding:0;
  flex:none;will-change:transform;
  /* One row of 27 names is a long track, so the duration is long to match — speed is
     track-width / duration, not duration alone. */
  animation:hmDrift 150s linear infinite}
@keyframes hmDrift{from{transform:translateX(0)} to{transform:translateX(-100%)}}
.hm-marquee:hover .hm-marquee-track{animation-play-state:paused}

.hm-marquee-track li{display:flex;align-items:center;white-space:nowrap;
  padding:2px 0;
  font-family:var(--font-head);
  font-size:clamp(1.35rem,2vw,1.75rem);font-weight:700;letter-spacing:-.01em;
  color:var(--hm-ink)}
.hm-marquee-track li::after{content:"";flex:none;width:7px;height:7px;margin:0 30px;
  border-radius:50%;background:var(--hm-acc);opacity:.32}

/* Motion off: freeze everything, drop the duplicate rows, wrap all 27 into view. */
@media (prefers-reduced-motion:reduce){
  .hm-marquee{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .hm-marquee-row{width:auto}
  .hm-marquee-track{animation:none}
  .hm-marquee-track[aria-hidden="true"]{display:none}
  .hm-marquee-track{flex-wrap:wrap;justify-content:center}}

/* ---------- Card grids ---------- */
.hm-grid{display:grid;gap:20px}
.hm-ic .icon{width:21px;height:21px}
.hm-more .caret{width:15px;height:15px;transition:transform .15s}
.hm-card-link:hover .hm-more .caret{transform:translateX(3px)}
.hm-sec-dark .hm-split-copy h2{color:#fff}
.hm-sec-dark .hm-split-copy>p{color:#B9C4DC}
.hm-steps-list a b,.hm-steps-list a small,.hm-steps-list .caret,.hm-step-n{
  transition:color .22s ease,background .22s ease}
.hm-steps-list a:hover .caret{color:#A8C2FF}
.hm-steps-list .caret{flex:none;width:16px;height:16px;color:var(--hm-acc);transition:transform .15s}
.hm-steps-list a:hover .caret{transform:translateX(3px)}
.hm-chip-ic .icon{width:16px;height:16px}
.hm-control{display:flex;align-items:center;gap:.55em;margin:0 0 26px;
  font-size:.9rem;color:#B9C4DC}
.hm-control .icon{width:17px;height:17px;color:#4ED6A8;flex:none}

.hm-console{background:#111E44;border:1px solid rgba(255,255,255,.12);
  border-radius:18px;overflow:hidden}
.hm-console-bar{display:flex;align-items:center;gap:7px;padding:14px 18px;
  background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.1);
  font-size:.85rem;color:#C6D0E6}
.hm-console-bar span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22)}
.hm-console-bar b{margin-left:8px;font-weight:700;color:#fff}
.hm-console-body{padding:18px}
.hm-console-body p{display:flex;gap:10px;margin:0 0 12px;font-size:.92rem;
  line-height:1.55;color:#D3DBEC}
.hm-console-body p:last-child{margin-bottom:0}
.hm-tag{flex:none;align-self:flex-start;padding:.22em .6em;border-radius:6px;
  font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.hm-tag-detect{background:#3A2540;color:#F0A8C4}
.hm-tag-explain{background:#1E2F52;color:#8FB0FF}
.hm-tag-prepare{background:#153A32;color:#4ED6A8}
.hm-console-foot{display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-top:1px solid rgba(255,255,255,.1);
  font-size:.88rem;color:#9FAECB}
.hm-console-btn{padding:.4em 1em;border-radius:999px;background:#fff;
  font-weight:700;font-size:.84rem;color:#0B1533}
.hm-agent-list{display:grid;gap:12px}
.hm-agent-row{display:flex;align-items:flex-start;gap:15px;padding:16px 18px;
  border-radius:16px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  transition:background .2s ease,border-color .2s ease,transform .2s ease}
.hm-agent-row:hover{background:rgba(255,255,255,.08);
  border-color:rgba(143,176,255,.45);transform:translateX(3px)}
.hm-agent-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:12px;background:rgba(143,176,255,.14);color:#8FB0FF}
.hm-agent-ic .icon{width:20px;height:20px}
.hm-agent-txt{flex:1;min-width:0}
.hm-agent-txt b{display:block;font-size:1rem;font-weight:700;color:#fff;line-height:1.3}
.hm-agent-txt small{display:block;margin-top:3px;font-size:.86rem;line-height:1.5;color:#A9B4CE}
.hm-agent-row>.caret{flex:none;width:16px;height:16px;color:#8FB0FF;align-self:center;
  opacity:0;transition:opacity .2s ease,transform .2s ease}
.hm-agent-row:hover>.caret{opacity:1;transform:translateX(2px)}
.hm-agent-foot .hm-control{margin:0}
.hm-aud-ic .icon{width:23px;height:23px}
.hm-aud-row>.caret{flex:none;width:17px;height:17px;margin-top:5px;color:var(--hm-acc);
  opacity:.4;transition:opacity .2s ease,transform .2s ease}
.hm-aud-row:hover>.caret,
.hm-aud-row:focus-visible>.caret{opacity:1;transform:translateX(4px)}
.hm-tool-ic .icon{width:23px;height:23px}
/* margin-top:auto pins every column's logo row to the same baseline */
.hm-tool-logos{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.hm-tool-logo{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--hm-line);
  box-shadow:0 2px 6px rgba(20,31,59,.05);
  transition:transform .18s ease,box-shadow .18s ease}
.hm-tool-logo:hover{transform:translateY(-2px);box-shadow:0 7px 16px rgba(20,31,59,.1)}
.hm-tool-logo img{width:24px;height:24px;object-fit:contain;display:block}
.hm-start-label .icon{width:18px;height:18px;flex:none}
.hm-deliver .hm-way-num .icon{width:22px;height:22px}
.hm-risk-ic{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-bottom:14px;border-radius:12px;
  background:var(--hm-acc);color:#fff}
.hm-risk-ic .icon{width:22px;height:22px}
.hm-sec-cloud .hm-card .hm-badges a{background:var(--p-cloud)}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .hm-hero-inner,.hm-split,.hm-agent-grid{grid-template-columns:1fr;gap:40px}
  .hm-hero-art{max-width:560px}}
@media (max-width:760px){
  .hm-sec{padding:52px 0}
  .hm-hero{padding-top:52px}
  /* Solution tabs stack: goal list above the detail panel; panel text over the
     illustration; single-column checklist. */
  .hm-soltabs{grid-template-columns:1fr;gap:24px}
  .hm-solpanel{grid-template-columns:1fr;gap:26px;padding:32px 26px}
  .hm-solpanel-list{grid-template-columns:1fr}
  .hm-hero-actions .hm-btn{flex:1;justify-content:center}}

/* Homepage only: header shares the hero pastel so there is no white seam above it.
   Every other page keeps the white header. */
.site-header-tinted,
.site-header-tinted.scrolled{background:#E9F0FF;border-bottom-color:transparent}
.site-header-tinted.scrolled{box-shadow:0 1px 3px rgba(8,17,36,.05),0 8px 24px rgba(8,17,36,.05)}
.site-header-tinted .nav-item .nav-link:hover,
.site-header-tinted .nav-item .nav-link:focus-visible,
.site-header-tinted .nav-item .nav-link[aria-expanded="true"],
.site-header-tinted .nav-item .nav-link.is-active{background:rgba(255,255,255,.75)}
.hm-chal-ic .icon{width:22px;height:22px}
.hm-chal-out .caret{width:14px;height:14px;transition:transform .15s}
.hm-chal-out:hover .caret{transform:translateX(3px)}
.hm-svc-more .caret{width:15px;height:15px;transition:transform .15s ease}
.hm-svc-card:hover .hm-svc-more .caret{transform:translateX(3px)}

/* -------------------------------------------------------------------------
   SOLUTIONS — interactive left-nav (goal list) + right detail panel. Built
   with the accessible radio technique: hidden radios drive which tab is active
   and which panel shows; native keyboard arrow-navigation, works with no JS.
   ------------------------------------------------------------------------- */
.hm-soltabs{position:relative;display:grid;grid-template-columns:minmax(232px,.7fr) 1.9fr;
  gap:44px;align-items:start}
.hm-soltab-radio{position:absolute;width:1px;height:1px;opacity:0;margin:-1px;overflow:hidden}

/* Left — a clean text list on white. Active goal: accent colour + short underline. */
.hm-soltabs-nav{display:flex;flex-direction:column}
.hm-soltab{display:block;padding:20px 8px 20px 2px;cursor:pointer;
  border-bottom:1px solid var(--hm-line)}
.hm-soltab:first-child{padding-top:6px}
.hm-soltab:last-child{border-bottom:0}
.hm-soltab-lbl{position:relative;display:inline-block;font-family:var(--font-head);
  font-weight:600;font-size:1.1rem;line-height:1.3;color:var(--hm-ink);transition:color .18s ease}
.hm-soltab-lbl::after{content:"";position:absolute;left:0;bottom:-10px;width:30px;height:3px;
  border-radius:2px;background:var(--hm-acc);opacity:0;transform:scaleX(.3);transform-origin:left;
  transition:opacity .18s ease,transform .18s ease}
.hm-soltab:hover .hm-soltab-lbl{color:var(--hm-acc)}

/* Right — a dark navy panel: white heading, light copy, illustration. */
.hm-soltabs-panels{position:relative;min-width:0}
.hm-solpanel{display:none;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;
  background:#0B1533;border-radius:26px;padding:44px 46px;animation:hm-fade .24s ease}
@keyframes hm-fade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hm-solpanel-main{min-width:0}
.hm-solpanel h3{margin:0 0 12px;font-size:1.6rem;line-height:1.18;color:#fff}
.hm-solpanel-main>p{margin:0 0 24px;font-size:1.04rem;line-height:1.62;color:#B9C4DC;max-width:44ch}
.hm-solpanel-lbl{display:block;margin:0 0 14px;font-size:.7rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:#8397BE}
.hm-solpanel-list{list-style:none;margin:0 0 26px;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:13px 24px}
.hm-solpanel-list li{display:flex;align-items:center;gap:11px;font-size:.96rem;font-weight:500;color:#E4EAF5}
.hm-solpanel-list .tick{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:rgba(143,176,255,.16);color:#8FB0FF}
.hm-solpanel-list .tick .icon{width:13px;height:13px;stroke-width:3}
/* CTA — light outline button on the dark panel. */
.hm-solpanel-cta{background:transparent;border:1.5px solid rgba(255,255,255,.55);color:#fff}
.hm-solpanel-cta:hover,.hm-solpanel-cta:focus-visible{background:#fff;border-color:#fff;color:#0B1533}
/* Illustration — the white-framed mini card floats on the dark panel. */
.hm-solpanel-visual{min-width:0}
.hm-solpanel-visual svg{display:block;width:100%;height:auto;max-width:300px;margin:0 auto}

/* Radio hack — active goal: accent label + short underline; its panel shows. */
#hmsol-0:checked~.hm-soltabs-nav .hm-soltab:nth-of-type(1) .hm-soltab-lbl,
#hmsol-1:checked~.hm-soltabs-nav .hm-soltab:nth-of-type(2) .hm-soltab-lbl,
#hmsol-2:checked~.hm-soltabs-nav .hm-soltab:nth-of-type(3) .hm-soltab-lbl,
#hmsol-3:checked~.hm-soltabs-nav .hm-soltab:nth-of-type(4) .hm-soltab-lbl,
#hmsol-4:checked~.hm-soltabs-nav .hm-soltab:nth-of-type(5) .hm-soltab-lbl,
#hmsol-5:checked~.hm-soltabs-nav .hm-soltab:nth-of-type(6) .hm-soltab-lbl{color:var(--hm-acc)}
#hmsol-0:checked~.hm-soltabs-nav .hm-soltab:nth-of-type(1) .hm-soltab-lbl::after,
#hmsol-1:checked~.hm-soltabs-nav .hm-soltab:nth-of-type(2) .hm-soltab-lbl::after,
#hmsol-2:checked~.hm-soltabs-nav .hm-soltab:nth-of-type(3) .hm-soltab-lbl::after,
#hmsol-3:checked~.hm-soltabs-nav .hm-soltab:nth-of-type(4) .hm-soltab-lbl::after,
#hmsol-4:checked~.hm-soltabs-nav .hm-soltab:nth-of-type(5) .hm-soltab-lbl::after,
#hmsol-5:checked~.hm-soltabs-nav .hm-soltab:nth-of-type(6) .hm-soltab-lbl::after{opacity:1;transform:scaleX(1)}
#hmsol-0:checked~.hm-soltabs-panels .hm-solpanel:nth-of-type(1),
#hmsol-1:checked~.hm-soltabs-panels .hm-solpanel:nth-of-type(2),
#hmsol-2:checked~.hm-soltabs-panels .hm-solpanel:nth-of-type(3),
#hmsol-3:checked~.hm-soltabs-panels .hm-solpanel:nth-of-type(4),
#hmsol-4:checked~.hm-soltabs-panels .hm-solpanel:nth-of-type(5),
#hmsol-5:checked~.hm-soltabs-panels .hm-solpanel:nth-of-type(6){display:grid}
/* Keyboard focus ring on the active label (radio is visually hidden). */
#hmsol-0:focus-visible~.hm-soltabs-nav .hm-soltab:nth-of-type(1) .hm-soltab-lbl,
#hmsol-1:focus-visible~.hm-soltabs-nav .hm-soltab:nth-of-type(2) .hm-soltab-lbl,
#hmsol-2:focus-visible~.hm-soltabs-nav .hm-soltab:nth-of-type(3) .hm-soltab-lbl,
#hmsol-3:focus-visible~.hm-soltabs-nav .hm-soltab:nth-of-type(4) .hm-soltab-lbl,
#hmsol-4:focus-visible~.hm-soltabs-nav .hm-soltab:nth-of-type(5) .hm-soltab-lbl,
#hmsol-5:focus-visible~.hm-soltabs-nav .hm-soltab:nth-of-type(6) .hm-soltab-lbl{outline:2px solid var(--hm-acc);outline-offset:3px}

/* Solutions tabs — MOBILE. Stack the goal list above the detail panel, and the
   panel's text above its illustration. Placed AFTER the base 2-column rules so it
   wins (the earlier @media block near line 1278 was defined before them and lost). */
@media (max-width:760px){
  .hm-soltabs{grid-template-columns:1fr;gap:10px}
  .hm-soltab{padding:16px 4px}
  .hm-soltab:first-child{padding-top:4px}
  .hm-solpanel{grid-template-columns:1fr;gap:22px;padding:28px 22px}
  .hm-solpanel h3{font-size:1.4rem}
  .hm-solpanel-main>p{font-size:1rem}
  .hm-solpanel-list{grid-template-columns:1fr;gap:12px}
  .hm-solpanel-visual{max-width:260px;margin:0 auto}
}

/* ---------- Services: hover-expand accordion ----------
   Cards are the hero's pale blue (--p-sky). Nothing is expanded by default — a row only
   opens on hover or keyboard focus.

   The section height is CONSTANT: the list is a fixed-height flex column, collapsed rows
   keep a fixed basis, and the open row grows into exactly the leftover space.
       height = 4 headers + 3 gaps + tallest panel = 4*76 + 3*10 + 194 = 528
   Because nothing is open by default, the idle stack (4*76 + 30 = 334) is shorter than the
   box, so the rows are centred vertically and the slack reads as padding rather than a hole.

   main.js drives the open card (mouseenter + focusin); collapsed panels use
   visibility:hidden so their links stay out of the tab order. */
/* Anchored to the TOP, so the stack starts at the first card and rows open downward.
   (justify-content:center pushed the whole list into the middle and left a hole above it.) */
.hm-acc{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;justify-content:flex-start;gap:10px;height:528px}

/* Border is the same colour as the card, so it never reads as an outline — it only exists
   to keep the box metrics identical whether or not a card is open. */
.hm-acc-item{flex:0 1 76px;min-height:0;overflow:hidden;
  border-radius:14px;border:1px solid var(--p-sky);background:var(--p-sky);
  transition:flex-grow .32s ease,box-shadow .22s ease}

/* Open state is a CLASS, not :hover — main.js keeps it on the last card you entered, so
   the card stays OPEN after the cursor leaves and only closes when another card is entered.
   :hover has no memory of the card you left, which is exactly why this cannot be pure CSS.
   Card 1 ships with .is-open in the markup, so the section is still correct without JS. */
.hm-acc-item.is-open{flex-grow:1;box-shadow:0 10px 26px rgba(20,31,59,.08)}
/* The arrow was inheriting the global a{color:var(--blue)} — and --blue is redefined to a
   GREEN (#0E7A66) further up this stylesheet, so it rendered green. Pin it to the accent. */
.hm-acc-head .caret{flex:none;width:16px;height:16px;color:var(--hm-acc)}
.hm-acc-item.is-open .hm-acc-panel{opacity:1;visibility:visible}
.hm-svc-art{position:relative;height:528px}
.hm-svc-art svg{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;transition:opacity .3s ease}
/* main.js stamps data-svc on the container to match the open card. No :has(), no JS
   dependency for the default: artwork 1 shows until told otherwise. */
.hm-svc-art .hm-svc-1{opacity:1}
.hm-svc-art[data-svc] svg{opacity:0}
.hm-svc-art[data-svc="1"] .hm-svc-1,
.hm-svc-art[data-svc="2"] .hm-svc-2,
.hm-svc-art[data-svc="3"] .hm-svc-3,
.hm-svc-art[data-svc="4"] .hm-svc-4{opacity:1}

/* Touch and small screens have no hover: drop the fixed height and the panels, leaving the
   four rows as plain links. The sub-services still live in the nav and on each service page. */
@media (max-width:900px){
  .hm-acc{height:auto}
  .hm-acc-item,.hm-acc-item:first-child{flex:0 0 auto;box-shadow:none}
  .hm-svc-art{height:auto;aspect-ratio:520/420}}
@media (prefers-reduced-motion:reduce){
  .hm-acc-item,.hm-acc-panel,.hm-svc-art svg{transition:none}}


/* ============================================================================
   Rich case-study page (template-case-rich.php). Sections are .hm-sec, so the
   pastel tokens (--p-sky / --p-cloud / --hm-ink / --hm-acc / --hm-body /
   --hm-line) resolve on all children below.
   ============================================================================ */
.cs-hero{padding-top:34px;padding-bottom:64px}
.cs-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:26px;font-size:.86rem;color:var(--hm-body)}
.cs-crumb a{color:var(--hm-body)}
.cs-crumb a:hover{color:var(--hm-acc)}
.cs-crumb>span:not(.cs-crumb-here){color:#9AA6BF}
.cs-crumb .cs-crumb-here{color:var(--hm-ink);font-weight:600}
.cs-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center}
.cs-hero-copy h1{margin:14px 0 0;font-size:clamp(1.95rem,3.5vw,2.75rem);line-height:1.1;color:var(--hm-ink)}
.cs-lead{margin:20px 0 0;font-size:1.12rem;line-height:1.6;color:var(--hm-body);max-width:50ch}
.cs-meta{list-style:none;margin:30px 0 0;padding:22px 0 0;display:flex;flex-wrap:wrap;gap:34px;
  border-top:1px solid var(--hm-line)}
.cs-meta li{display:flex;flex-direction:column;gap:7px}
.cs-meta-k{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--hm-body)}
.cs-meta-k .icon{width:15px;height:15px;color:var(--hm-acc)}
.cs-meta-v{font-size:1rem;font-weight:700;color:var(--hm-ink)}
.cs-note{display:flex;gap:9px;margin:28px 0 0;padding:13px 16px;border-radius:12px;
  background:#FFF6E6;border:1px solid #F3DFA8;color:#8a6d1f;font-size:.86rem;line-height:1.5}
.cs-note .icon{width:17px;height:17px;flex:none;margin-top:1px}
.cs-hero-art{margin:0 auto;max-width:440px;width:100%}
.cs-hero-art svg{display:block;width:100%;height:auto;filter:drop-shadow(0 20px 44px rgba(20,31,59,.12))}

/* Before -> After transformation */
.cs-ba{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch}
.cs-ba-panel{border-radius:22px;padding:34px 32px;border:1px solid var(--hm-line)}
.cs-ba-before{background:#FCF4F4;border-color:#F2D9D9}
.cs-ba-after{background:var(--p-sky);border-color:#CFDEFB}
.cs-ba-label{display:inline-block;padding:5px 14px;border-radius:999px;margin-bottom:16px;
  font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.cs-ba-before .cs-ba-label{background:#F4DADA;color:#B4433F}
.cs-ba-after .cs-ba-label{background:#D6E3FE;color:var(--hm-acc)}
.cs-ba-lead{margin:0 0 20px;font-size:1rem;line-height:1.6;color:var(--hm-body)}
.cs-ba-list{list-style:none;margin:0;padding:0;display:grid;gap:15px}
.cs-ba-list li{display:flex;gap:12px;align-items:flex-start;font-size:.96rem;line-height:1.5;color:var(--hm-ink)}
.cs-ba-list li span:last-child{display:flex;flex-direction:column;gap:3px}
.cs-ba-list b{font-weight:700;color:var(--hm-ink)}
.cs-ba-list small{font-size:.86rem;font-weight:400;line-height:1.5;color:var(--hm-body)}
.cs-ba-mark{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:8px;margin-top:1px}
.cs-ba-mark .icon{width:15px;height:15px}
.cs-ba-x{background:#F4DADA;color:#B4433F}
.cs-ba-check{background:#002FAF;color:#fff}
.cs-ba-bridge{display:flex;align-items:center;justify-content:center;width:74px}
.cs-ba-bridge span{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;
  border-radius:50%;background:#fff;border:1px solid var(--hm-line);color:var(--hm-acc);
  box-shadow:0 8px 20px rgba(20,31,59,.1)}
.cs-ba-bridge .icon{width:22px;height:22px}

/* Solution pipeline */
.cs-pipe{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cs-pipe-step{position:relative;background:#fff;border:1px solid var(--hm-line);border-radius:18px;padding:26px 22px}
.cs-pipe-step:not(:last-child)::after{content:"";position:absolute;top:50%;right:-13px;width:10px;height:10px;
  border-top:2.4px solid #9DB6EC;border-right:2.4px solid #9DB6EC;transform:translateY(-50%) rotate(45deg)}
.cs-pipe-num{position:absolute;top:16px;right:20px;font-family:var(--font-head);font-size:1.7rem;
  font-weight:800;color:rgba(0,47,175,.12);line-height:1}
.cs-pipe-ic{display:inline-flex;width:46px;height:46px;border-radius:13px;align-items:center;
  justify-content:center;background:var(--p-sky);color:var(--hm-acc);margin-bottom:16px}
.cs-pipe-ic .icon{width:22px;height:22px}
.cs-pipe-step h3{margin:0 0 8px;font-size:1.05rem;color:var(--hm-ink)}
.cs-pipe-step p{margin:0;font-size:.9rem;line-height:1.55;color:var(--hm-body)}

/* Stack (data sources + tools) */
.cs-stack{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cs-stack-block{background:#fff;border:1px solid var(--hm-line);border-radius:18px;padding:24px 26px}
.cs-stack-block h3{display:flex;align-items:center;gap:9px;margin:0 0 18px;font-size:1rem;color:var(--hm-ink)}
.cs-stack-block h3 .icon{width:18px;height:18px;color:var(--hm-acc)}
.cs-chips{display:flex;flex-wrap:wrap;gap:10px}
.cs-chip{display:inline-flex;align-items:center;gap:9px;padding:9px 15px 9px 10px;border-radius:999px;
  background:var(--p-cloud);border:1px solid var(--hm-line);font-size:.9rem;font-weight:600;color:var(--hm-ink)}
.cs-chip-mark{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center}
.cs-chip-mark img{width:24px;height:24px;display:block}
.cs-chip-mark .icon{width:18px;height:18px;color:var(--hm-acc)}

/* Related */
.cs-related{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cs-rel-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hm-line);
  border-radius:18px;padding:26px 24px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.cs-rel-card:hover{transform:translateY(-3px);border-color:rgba(0,47,175,.3);box-shadow:0 12px 26px rgba(20,31,59,.08)}
.cs-rel-ic{display:inline-flex;width:44px;height:44px;border-radius:12px;align-items:center;
  justify-content:center;background:var(--p-sky);color:var(--hm-acc);margin-bottom:16px}
.cs-rel-ic .icon{width:22px;height:22px}
.cs-rel-kicker{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--hm-acc)}
.cs-rel-card h3{margin:6px 0 8px;font-size:1.08rem;color:var(--hm-ink)}
.cs-rel-card p{margin:0 0 16px;font-size:.92rem;line-height:1.55;color:var(--hm-body);flex:1}
.cs-rel-more{display:inline-flex;align-items:center;gap:.4em;font-weight:700;font-size:.9rem;color:var(--hm-acc)}
.cs-rel-more .caret{width:15px;height:15px;transition:transform .15s ease}
.cs-rel-card:hover .cs-rel-more .caret{transform:translateX(3px)}

@media (max-width:960px){
  .cs-hero-grid{grid-template-columns:1fr;gap:40px}
  .cs-hero-art{max-width:400px}
  .cs-ba{grid-template-columns:1fr;gap:20px}
  .cs-ba-bridge{width:auto;height:40px}
  .cs-ba-bridge span{transform:rotate(90deg)}
  .cs-pipe{grid-template-columns:repeat(2,1fr)}
  .cs-pipe-step:not(:last-child)::after{display:none}
  .cs-stack{grid-template-columns:1fr}
  .cs-related{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){
  .cs-pipe,.cs-related{grid-template-columns:1fr}
  .cs-meta{gap:20px}}

/* ==========================================================================
   HOMEPAGE — RULED GRID SYSTEM
   --------------------------------------------------------------------------
   Structure borrowed from the customers.ai layout system; palette, type and
   content stay Visulatics. The whole page reads as ONE continuous ruled sheet
   rather than a stack of separate bands:

     - Two vertical hairlines run the full page height at the column edges.
       Every section repeats them, and sections butt together with no gap, so
       the rules line up and appear continuous top to bottom.
     - A section is a ROW in that sheet; a horizontal hairline divides rows.
     - Content sits in square CELLS divided by the same hairline. The hairline
       is the only separator — no shadows, no radius, no floating cards.
     - Section headers are left-aligned with a small monospace eyebrow.

   Everything here is `hm-`-scoped, so no other page is affected.
   ========================================================================== */

:root{
  /* System stack — no extra webfont, so this costs nothing to load. */
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

/* ---- The ruled column ---------------------------------------------------
   Same max-width as .container so the rules land where content already sat.
   Sections carry no vertical padding of their own: the padding lives inside
   the cells, which is what lets adjacent rules meet with no seam.

   SCOPING: .hm-sec, .hm-head and .hm-eyebrow are SHARED — template-case-rich.php
   uses them too. Every override of one is prefixed .hm-grid so it cannot escape
   this page. Classes invented here (.hm-ruled, .hm-cell, …) are homepage-only
   and need no prefix. */
.hm-grid .hm-sec{padding:0}
.hm-ruled{max-width:1360px;margin:0 auto;
  border-left:1px solid var(--hm-line);border-right:1px solid var(--hm-line)}
.hm-sec-dark .hm-ruled{border-color:rgba(255,255,255,.14)}

/* ---- Section header (left-aligned, monospace eyebrow) ------------------- */
.hm-grid .hm-head{max-width:none;margin:0;text-align:left;
  padding:clamp(44px,5vw,66px) clamp(22px,3vw,40px) clamp(30px,3.4vw,42px)}
/* Sub-group header (eyebrow + one line, no h2) used INSIDE a section that
   already opened with a full .hm-head — e.g. the agent capability groups on
   /agentic-ai and the solution groups on /solutions. Roughly half the inset,
   so stacked headers read as one flowing section instead of two. */
.hm-grid .hm-head-sub{padding:clamp(26px,3vw,40px) clamp(22px,3vw,40px) clamp(16px,2vw,24px)}
/* Deep navy heading + accent eyebrow. The navy is the same #0B1533 as the dark
   band and Solutions panel backgrounds, so every deep blue on the page matches.
   The dark Agentic AI band keeps white-on-navy and is excluded below. */
.hm-grid .hm-head h2{margin:0 0 14px;max-width:20ch;
  font-size:clamp(1.75rem,3.2vw,2.6rem);line-height:1.14;letter-spacing:-.018em;color:var(--hm-head-ink)}
.hm-grid .hm-head p{margin:0;max-width:72ch;font-size:1.03rem;line-height:1.62;color:var(--hm-body)}
/* Model marks under a section heading. Deliberately NOT .hm-tool-logos (that
   pins to the bottom of a card via margin-top:auto) and NOT
   .hm-tool-logos-strip (the Tools page's own centred divider, which carries a
   max-width, a border-bottom and 76px of trailing space). Here we only want a
   row that starts where the heading text starts. */
.hm-grid .hm-head .hm-ai-marks{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0}
.hm-grid .hm-sec-dark .hm-head h2{color:#fff}
.hm-grid .hm-sec-dark .hm-head p{color:#B7C4E0}

/* Accent, so the section marker registers as you scroll past — the heading
   beside it carries the deep navy. */
.hm-grid .hm-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;
  font-family:var(--font-mono);font-size:.735rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--hm-acc)}
/* Icons stay hidden here — removing them from section titles was an explicit
   earlier decision; the monospace eyebrow carries the look on its own. */
.hm-grid .hm-eyebrow .icon{display:none}
.hm-grid .hm-eyebrow-dark{color:#8FB0FF}

/* ---- Cells --------------------------------------------------------------
   Row 1's border-top doubles as the divider under the header, so .hm-head
   deliberately has no bottom border. The right-most cell in each row leaves
   its border off — the ruled column already draws that line. */
.hm-cells{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
.hm-cell{position:relative;display:flex;flex-direction:column;
  padding:clamp(26px,2.4vw,34px) clamp(22px,2.2vw,30px);
  border-top:1px solid var(--hm-line);border-right:1px solid var(--hm-line)}
.hm-sec-dark .hm-cell{border-color:rgba(255,255,255,.14)}
.hm-cells-2{--cols:2} .hm-cells-2 > .hm-cell:nth-child(2n){border-right:0}
.hm-cells-3{--cols:3} .hm-cells-3 > .hm-cell:nth-child(3n){border-right:0}
.hm-cells-4{--cols:4} .hm-cells-4 > .hm-cell:nth-child(4n){border-right:0}

/* A whole cell as one link. Hover tints rather than lifts — nothing floats. */
a.hm-cell{color:inherit;text-decoration:none;transition:background-color .18s ease}
a.hm-cell:hover,a.hm-cell:focus-visible{background:var(--p-cloud);outline:none}
a.hm-cell:focus-visible{box-shadow:inset 0 0 0 2px var(--hm-acc)}
.hm-sec-dark a.hm-cell:hover{background:rgba(255,255,255,.04)}

/* ---- Cell contents ------------------------------------------------------ */
.hm-cell-ic{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;margin-bottom:16px;flex:none;
  background:var(--p-sky);color:var(--hm-acc)}
.hm-cell-ic .icon{width:19px;height:19px;stroke-width:1.7}
.hm-sec-dark .hm-cell-ic{background:rgba(143,176,255,.14);color:#8FB0FF}
.hm-cell h3{margin:0 0 8px;font-size:1.075rem;line-height:1.32;color:var(--hm-ink);letter-spacing:-.008em}
.hm-sec-dark .hm-cell h3{color:#fff}
.hm-cell p{margin:0;font-size:.925rem;line-height:1.6;color:var(--hm-body)}
.hm-sec-dark .hm-cell p{color:#AFBEDC}
/* Pushes the trailing link to the bottom so cells in a row align. */
.hm-cell-more{margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--hm-acc)}
.hm-cell-more .caret{width:13px;height:13px;transition:transform .18s ease}
a.hm-cell:hover .hm-cell-more .caret{transform:translateX(3px)}

/* Monospace tag — the outcome/goal cue inside a cell. */
.hm-tagm{align-self:flex-start;margin-top:14px;padding:4px 9px;
  background:var(--p-sky);color:var(--hm-acc);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em}

/* Capability list — hairline-ruled, no bullets. */
.hm-cell-caps{list-style:none;margin:16px 0 0;padding:0}
.hm-cell-caps li{padding:7px 0;border-top:1px solid var(--hm-line);
  font-size:.85rem;line-height:1.4;color:var(--hm-body)}
.hm-cell-caps li:first-child{border-top:0}

/* ---- Accent-outlined panel — one highlighted cell per section ----------- */
.hm-accent-panel{border:1px solid var(--hm-acc);background:var(--p-sky);
  padding:clamp(26px,2.4vw,34px)}

/* ---- Stat cell (About) — a big credential figure inside a ruled cell ----- */
.hm-grid .hm-stat-cell{gap:6px}
.hm-grid .hm-statn{display:block;font-family:var(--font-head);
  font-size:clamp(2.1rem,3.2vw,2.7rem);font-weight:800;line-height:1;
  letter-spacing:-.02em;color:var(--hm-acc)}

/* ---- Tools & Integrations — real-logo preview strip + combo heading ------ */
.hm-grid .hm-tool-logos-strip{display:flex;flex-wrap:wrap;justify-content:center;
  gap:14px;margin:0 auto 40px;padding-bottom:36px;max-width:820px;
  border-bottom:1px solid var(--hm-line)}
.hm-grid .hm-combo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;line-height:1.3}
.hm-grid .hm-combo .caret{flex:none;color:var(--hm-acc)}
.hm-grid .hm-combo-chip{display:inline-flex;align-items:center;gap:9px}
.hm-grid .hm-combo-logo{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:9px;background:#fff;border:1px solid var(--hm-line);flex:none}
.hm-grid .hm-combo-logo+.hm-combo-logo{margin-left:-8px}
.hm-grid .hm-combo-logo img{width:20px;height:20px;object-fit:contain;display:block}
.hm-grid .hm-combo-logo-ic{color:var(--hm-acc)}
.hm-grid .hm-combo-logo-ic svg{width:18px;height:18px}

/* ======================= CONTACT PAGE (ruled grid) ======================= */
/* Two-column, left-aligned like the other ruled pages' heroes: the pitch on the
   left, and the stepper + card (form on step 1, scheduler on step 2) on the right.
   Same inner padding as .gl-hero-in so it lines up with every other page. */
.hm-contact{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,3.6vw,60px);
  align-items:start;padding:clamp(40px,4.4vw,60px) clamp(22px,3vw,40px)}
.hm-contact-copy .gl-crumb{margin-bottom:18px}
.hm-contact-copy h1{margin:.4rem 0 .8rem;font-size:clamp(1.9rem,3.6vw,2.8rem);
  line-height:1.1;letter-spacing:-.02em;color:var(--hm-head-ink)}
.hm-contact-copy .gl-lead{max-width:46ch}
.hm-contact-list{list-style:none;margin:26px 0 30px;padding:0;display:grid;gap:12px}
.hm-contact-list li{display:flex;align-items:flex-start;gap:11px;font-size:.98rem;color:var(--hm-ink)}
.hm-contact-tick{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:var(--hm-teal);color:#fff;margin-top:1px}
.hm-contact-tick svg{width:13px;height:13px}
.hm-contact-points{display:grid;gap:16px;padding-top:26px;border-top:1px solid var(--hm-line)}
.hm-contact-point{display:flex;align-items:flex-start;gap:13px}
.hm-contact-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:10px;background:#fff;border:1px solid var(--hm-line);color:var(--hm-acc)}
.hm-contact-ic svg{width:19px;height:19px}
.hm-contact-point b{display:block;font-size:.92rem;color:var(--hm-ink)}
.hm-contact-point a,.hm-contact-point small{font-size:.9rem;color:var(--hm-body);text-decoration:none}
.hm-contact-point a:hover{color:var(--hm-acc)}

/* Right column: stepper on top, then the card. */
.hm-contact-right{min-width:0}
.hm-contact-card{background:#fff;border:1px solid var(--hm-line);border-radius:16px;
  padding:clamp(22px,2.6vw,30px);box-shadow:0 12px 30px rgba(20,31,59,.06);margin-top:18px}
.hm-flow-h2{margin:2px 0 6px;font-size:1.3rem;line-height:1.2;color:var(--hm-ink)}
.hm-flow-sub{margin:0 0 18px;font-size:.98rem;line-height:1.55;color:var(--hm-body)}
.hm-form .hm-field{display:flex;flex-direction:column;margin-bottom:16px}
.hm-form .hm-field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hm-form label{font-size:.82rem;font-weight:700;color:var(--hm-ink);margin-bottom:7px;letter-spacing:.01em}
.hm-req{color:var(--hm-acc)}
.hm-optional{font-weight:500;color:var(--hm-body)}
.hm-form input,.hm-form select,.hm-form textarea{width:100%;font:inherit;font-size:.95rem;color:var(--hm-ink);
  background:#fff;border:1px solid var(--hm-line);border-radius:9px;padding:11px 13px;
  transition:border-color .15s ease,box-shadow .15s ease}
.hm-form input::placeholder,.hm-form textarea::placeholder{color:#9aa6bf}
.hm-form input:focus,.hm-form select:focus,.hm-form textarea:focus{outline:none;border-color:var(--hm-acc);
  box-shadow:0 0 0 3px rgba(0,47,175,.12)}
.hm-form textarea{resize:vertical;min-height:96px}
.hm-form select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7796' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:38px}

/* ---- International phone field ---- */
.hm-tel{display:flex;gap:10px}
.hm-cc{position:relative;flex:none}
.hm-cc-btn{display:inline-flex;align-items:center;gap:8px;height:100%;padding:0 12px;cursor:pointer;
  background:#fff;border:1px solid var(--hm-line);border-radius:9px;color:var(--hm-ink);font:inherit;font-size:.95rem}
.hm-cc-btn:focus-visible{outline:none;border-color:var(--hm-acc);box-shadow:0 0 0 3px rgba(0,47,175,.12)}
.hm-flag{display:inline-flex;width:22px;height:16px;border-radius:2px;overflow:hidden;
  border:1px solid rgba(20,31,59,.12);flex:none}
.hm-flag img{width:22px;height:16px;object-fit:cover;display:block}
.hm-cc-dial{font-weight:600}
.hm-cc-btn .caret{width:15px;height:15px;color:#6b7796}
.hm-tel-num{flex:1;min-width:0}
.hm-cc-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:40;width:290px;max-width:78vw;
  background:#fff;border:1px solid var(--hm-line);border-radius:12px;
  box-shadow:0 16px 40px rgba(20,31,59,.16);padding:8px;overflow:hidden}
.hm-cc-search{width:100%;font:inherit;font-size:.9rem;border:1px solid var(--hm-line);border-radius:8px;
  padding:9px 11px;margin-bottom:6px}
.hm-cc-search:focus{outline:none;border-color:var(--hm-acc)}
.hm-cc-list{list-style:none;margin:0;padding:0;max-height:240px;overflow-y:auto}
.hm-cc-opt{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:.9rem}
.hm-cc-opt img{width:22px;height:16px;object-fit:cover;border-radius:2px;border:1px solid rgba(20,31,59,.12);flex:none}
.hm-cc-name{flex:1;color:var(--hm-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-cc-code{color:var(--hm-body);font-variant-numeric:tabular-nums}
.hm-cc-opt:hover{background:#f2f6ff}
.hm-cc-opt[aria-selected="true"]{background:#e9f0ff}
.hm-cc-opt[aria-selected="true"] .hm-cc-name{font-weight:700;color:var(--hm-acc)}

/* ---- Submit, note, alerts, honeypot ---- */
.hm-form-submit{width:100%;justify-content:center;margin-top:6px}
.hm-alert{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border-radius:10px;
  font-size:.92rem;line-height:1.5;margin-bottom:20px}
.hm-alert svg{flex:none;width:18px;height:18px;margin-top:1px}
.hm-alert-ok{background:#e6f7f1;border:1px solid #b7e6d6;color:#0b6e5a}
.hm-alert-err{background:#fdecec;border:1px solid #f5c6c6;color:#b3261e}
.hm-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- Step 2 scheduler (Calendly) ---- */
.hm-sched-embed{border:1px solid var(--hm-line);border-radius:14px;overflow:hidden;background:#fff}
.hm-sched-embed .calendly-inline-widget{min-width:0;width:100%;height:700px}
.hm-sched-skip{display:inline-flex;align-items:center;gap:6px;margin-top:18px;
  font-size:.92rem;font-weight:600;color:var(--hm-body);text-decoration:none}
.hm-sched-skip:hover{color:var(--hm-acc)}
.hm-sched-skip svg{width:15px;height:15px}
.hm-sched-done p{display:flex;align-items:flex-start;gap:9px;margin:8px 0 20px;
  font-size:1.05rem;line-height:1.55;color:var(--hm-ink)}
.hm-sched-done p svg{flex:none;width:19px;height:19px;color:var(--hm-teal);margin-top:2px}

/* ======================= CASE STUDIES (ruled grid) ======================= */
/* Case card: category + industry tags, title, the result, a read link. */
.hm-grid .hm-case-card{scroll-margin-top:90px}
.hm-case-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}
.hm-case-cat{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;color:var(--hm-acc);
  background:var(--p-sky);padding:4px 9px;border-radius:999px}
.hm-case-cat svg{width:13px;height:13px}
.hm-case-ind{font-size:.78rem;font-weight:600;color:var(--hm-body)}
.hm-case-res{margin:8px 0 0;font-size:.95rem;line-height:1.55;color:var(--hm-body)}
.hm-case-res-lbl{display:inline-block;margin-right:6px;font-size:.66rem;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;color:var(--hm-teal)}

/* Featured example — a two-column bordered panel spanning the ruled row. */
.hm-feature{display:grid;grid-template-columns:1.15fr .85fr;gap:0;
  border:1px solid var(--hm-line);border-radius:18px;overflow:hidden;scroll-margin-top:90px;background:#fff}
.hm-feature-body{padding:clamp(24px,3vw,38px)}
.hm-feature-body h3{margin:2px 0 10px;font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.25;color:var(--hm-ink)}
.hm-feature-sum{margin:0 0 22px;font-size:1rem;line-height:1.6;color:var(--hm-body)}
.hm-feat-flow{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:14px}
.hm-feat-step{display:flex;align-items:flex-start;gap:12px}
.hm-feat-step-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10px;background:var(--p-sky);color:var(--hm-acc)}
.hm-feat-step-ic svg{width:17px;height:17px}
.hm-feat-step b{display:block;font-size:.95rem;color:var(--hm-ink)}
.hm-feat-step small{display:block;font-size:.86rem;line-height:1.5;color:var(--hm-body)}
.hm-feat-logos{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 24px}
.hm-feat-logos-lbl{font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#5C6A87} /* 4.5:1 on white (was #8792ac, 3.1:1) */
.hm-feature-side{padding:clamp(24px,3vw,38px);background:var(--p-sky);border-left:1px solid var(--hm-line)}
.hm-feature-side-lbl{display:inline-flex;align-items:center;gap:7px;margin-bottom:18px;
  font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--hm-acc)}
.hm-feature-side-lbl svg{width:15px;height:15px}
.hm-feat-out{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.hm-feat-out li{display:flex;align-items:flex-start;gap:12px}
.hm-feat-out-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10px;background:#fff;border:1px solid var(--hm-line);color:var(--hm-teal)}
.hm-feat-out-ic svg{width:17px;height:17px}
.hm-feat-out b{display:block;font-size:.95rem;color:var(--hm-ink)}
.hm-feat-out small{display:block;font-size:.86rem;line-height:1.5;color:var(--hm-body)}
@media (max-width:820px){
  .hm-feature{grid-template-columns:1fr}
  .hm-feature-side{border-left:0;border-top:1px solid var(--hm-line)}
}

/* ---- Case detail: hero meta, problem-cell tint, dark result band ---- */
.hm-case-meta{display:flex;flex-wrap:wrap;gap:10px 16px;margin:4px 0 24px}
.hm-case-meta span{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:600;color:var(--hm-body)}
.hm-case-meta svg{width:15px;height:15px;color:var(--hm-acc)}
.hm-grid .hm-cell-ic-warn{color:#b3261e;background:#fdecec}
/* On the ruled grid .hm-sec has no padding and .hm-ruled only draws the side
   borders, so every block inside supplies its own inset — .hm-head does, and
   .hm-result was the one block that did not, leaving the statement and its tag
   flush against the top and bottom of the dark band. Symmetric here (unlike
   .hm-head's 66/42) because nothing follows it inside the sheet. */
.hm-result{max-width:840px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;
  padding:clamp(44px,5vw,66px) clamp(22px,3vw,40px)}
.hm-result-lead{margin:20px 0 22px;font-family:var(--font-head);font-weight:700;
  font-size:clamp(1.4rem,2.7vw,2.05rem);line-height:1.3;letter-spacing:-.01em;color:#fff;max-width:26ch}
.hm-result-tag{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;
  color:#9fb0e8;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);padding:7px 14px;border-radius:999px}
.hm-result-tag svg{width:15px;height:15px;color:var(--hm-teal)}

/* ---- Mobile ---- */
@media (max-width:900px){
  .hm-contact{grid-template-columns:1fr;gap:34px}}
@media (max-width:680px){
  .hm-sched-embed .calendly-inline-widget{height:1000px}}
@media (max-width:520px){
  .hm-form .hm-field-row{grid-template-columns:1fr;gap:0}}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width:980px){
  .hm-cells-3,.hm-cells-4{--cols:2}
  .hm-cells-3 > .hm-cell:nth-child(3n),
  .hm-cells-4 > .hm-cell:nth-child(4n){border-right:1px solid var(--hm-line)}
  .hm-cells-3 > .hm-cell:nth-child(2n),
  .hm-cells-4 > .hm-cell:nth-child(2n){border-right:0}}
@media (max-width:640px){
  .hm-cells-2,.hm-cells-3,.hm-cells-4{--cols:1}
  .hm-cells > .hm-cell{border-right:0}
  .hm-ruled{border-left:0;border-right:0}
  .hm-head h2{max-width:none}}

/* ---- Steps (Getting started) -------------------------------------------- */
.hm-cell-flush{padding:0}
.hm-steps{list-style:none;margin:0;padding:0}
.hm-step{padding:clamp(24px,2.2vw,30px) clamp(22px,2.2vw,30px);
  border-bottom:1px solid var(--hm-line)}
.hm-step:last-child{border-bottom:0}
/* .hm-step-tag, NOT .hm-step-n — that name is already taken further up by a
   fixed 32x32 rounded number badge. Reusing it meant this tag inherited that
   width/height/radius and "Step 1" spilled out of the box. */
.hm-step-tag{display:inline-block;width:auto;height:auto;margin-bottom:10px;
  padding:3px 8px;white-space:nowrap;border-radius:0;
  background:var(--p-sky);color:var(--hm-acc);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
.hm-step b{display:block;margin-bottom:6px;font-size:1.05rem;color:var(--hm-ink)}
.hm-step small{display:block;font-size:.92rem;line-height:1.6;color:var(--hm-body)}

/* The accent panel's own eyebrow reads in the accent, not body grey. */
.hm-accent-panel .hm-eyebrow{color:var(--hm-acc)}
.hm-panel-lead{margin:0 0 18px;font-size:.95rem;line-height:1.6;color:var(--hm-body)}
.hm-risk-list{list-style:none;margin:0;padding:0}
.hm-risk-list li{display:flex;gap:12px;padding:12px 0;border-top:1px solid rgba(0,47,175,.14)}
.hm-risk-list li:first-child{border-top:0}
.hm-risk-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;background:#fff;color:var(--hm-acc)}
.hm-risk-ic .icon{width:14px;height:14px;stroke-width:1.8}
.hm-risk-list b{display:block;margin-bottom:3px;font-size:.92rem;color:var(--hm-ink)}
.hm-risk-list small{display:block;font-size:.85rem;line-height:1.5;color:var(--hm-body)}
.hm-start-row > .hm-cell:last-child{background:var(--p-cloud)}

/* ---- Tools cell logos ---------------------------------------------------
   The base rule gives these a 12px radius, a drop shadow and a hover lift —
   all three belong to the old floating-card language. Square them and let the
   hairline do the work, same as every other tile on the page. */
.hm-cell .hm-tool-logos{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:20px}
.hm-cell .hm-tool-logo{display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;background:#fff;border:1px solid var(--hm-line);
  border-radius:0;box-shadow:none;transition:border-color .18s ease}
.hm-cell .hm-tool-logo:hover{transform:none;box-shadow:none;border-color:var(--hm-acc)}
.hm-cell .hm-tool-logo img{width:20px;height:20px;object-fit:contain}

/* ---- A section's trailing CTA, as its own ruled row --------------------- */
.hm-foot-row{display:flex;justify-content:center;
  padding:26px clamp(22px,2.2vw,30px);border-top:1px solid var(--hm-line)}
.hm-sec-dark .hm-foot-row{border-color:rgba(255,255,255,.14)}

/* ---- Solutions tabs, reframed as ruled cells ----------------------------
   The goal list and the detail panel become two cells of the sheet: the 44px
   gap goes, a hairline divides them, and the panel loses its radius so it sits
   flush in the column. The panel stays navy — it is this section's one
   emphasised cell, the same role the accent-outlined panel plays elsewhere. */
.hm-soltabs{gap:0;border-top:1px solid var(--hm-line);align-items:stretch}
/* display:grid so the one visible panel stretches to the row height and its
   dark block meets the rules on every edge — no stub of white beneath it. */
.hm-soltabs-panels{display:grid}
.hm-soltabs-nav{padding:8px clamp(22px,2.2vw,30px);border-right:1px solid var(--hm-line)}
.hm-soltab{padding:19px 8px 19px 0}
.hm-soltab:first-child{padding-top:19px}
.hm-solpanel{border-radius:0;padding:clamp(32px,3vw,44px) clamp(26px,2.6vw,40px);height:100%}
.hm-solpanel-visual svg{border-radius:0}

/* ---- Hero: carry the vertical rules to the very top of the page ---------
   The hero keeps its pastel band and artwork; it just gains the same two
   edge rules so the ruled column starts at the masthead and runs unbroken
   to the footer, which is what makes the page read as one sheet. */
.hm-hero{position:relative}
.hm-hero-inner{position:relative;max-width:1360px;padding-left:0;padding-right:0}
.hm-hero-inner::before,.hm-hero-inner::after{content:"";position:absolute;top:0;bottom:0;
  width:1px;background:rgba(20,31,59,.10);pointer-events:none;z-index:0}
.hm-hero-inner::before{left:0}
.hm-hero-inner::after{right:0}
.hm-hero-copy{padding-left:clamp(22px,3vw,40px)}
@media (max-width:640px){
  .hm-hero-inner::before,.hm-hero-inner::after{display:none}
  .hm-hero-copy{padding-left:0}
  .hm-hero-inner{padding-left:clamp(20px,4vw,44px);padding-right:clamp(20px,4vw,44px)}}

/* ---- Buttons ------------------------------------------------------------
   Roundness now comes from --btn-r on the base .btn / .hm-btn rules, so the
   header, menus, homepage and footer all match. Only the decorative "Review"
   chip inside the agent console mock is set here — it is drawn UI, not a
   real button, but it should still read square alongside the rest. */
.hm-grid .hm-console-btn{border-radius:5px}

/* ---- Agentic AI, reframed as ruled cells --------------------------------
   Was the last section still on the old language: floating rounded cards with
   gaps and a detached console, which read as a different page. It now uses the
   same two-cell row as Getting started — the agent list becomes hairline-ruled
   rows and the console squares off and sits flush in its cell. */
.hm-grid .hm-agent-list{display:block}
.hm-grid .hm-agent-row{gap:15px;padding:20px clamp(22px,2.2vw,30px);
  border:0;border-bottom:1px solid rgba(255,255,255,.14);
  border-radius:0;background:none;transition:background-color .18s ease}
.hm-grid .hm-agent-row:last-child{border-bottom:0}
.hm-grid .hm-agent-row:hover,.hm-grid .hm-agent-row:focus-visible{
  background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);transform:none;outline:none}
/* Square the icon chip so it matches .hm-cell-ic in the light sections. */
.hm-grid .hm-agent-ic{width:38px;height:38px;border-radius:0}
.hm-grid .hm-agent-ic .icon{width:19px;height:19px;stroke-width:1.7}
/* Console: square, flush, no floating panel. */
.hm-grid .hm-cell-console{justify-content:center;background:rgba(255,255,255,.02)}
.hm-grid .hm-console{border-radius:0;border-color:rgba(255,255,255,.14)}
.hm-grid .hm-console-bar span{border-radius:50%} /* window dots stay round */
/* The control note now sits under the console rather than in a centred footer. */
.hm-grid .hm-cell-console .hm-control{display:flex;align-items:center;gap:8px;
  margin:16px 0 0;font-size:.85rem;color:#9FAECB}
.hm-grid .hm-cell-console .hm-control .icon{width:15px;height:15px;flex:none}

/* ---- Services: split row (heading cell + outlined icon grid) -------------
   The section heading becomes the left cell instead of sitting above the row,
   and the six services fill a 2-column grid on the right. No illustrations —
   each service is an outlined icon box and a label, so the section reads as a
   capability list rather than six pictures competing for attention. */
.hm-svc-split{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr)}
.hm-svc-intro{padding:clamp(44px,5vw,64px) clamp(22px,3vw,40px);
  border-right:1px solid var(--hm-line)}
/* Matches .hm-grid .hm-head h2 — Services builds its heading from its own
   selector, so any heading colour change has to be repeated here. */
.hm-svc-intro h2{margin:0 0 14px;max-width:16ch;
  font-size:clamp(1.75rem,3.2vw,2.6rem);line-height:1.14;letter-spacing:-.018em;color:var(--hm-head-ink)}
.hm-svc-intro p{margin:0;font-size:1rem;line-height:1.62;color:var(--hm-body)}
/* The intro now runs to a second paragraph (the Claude Code note); without this
   they would butt together, since the rule above zeroes every margin. */
.hm-svc-intro p+p{margin-top:14px}

.hm-svc-items{display:grid;grid-template-columns:1fr 1fr}
.hm-svc-item{display:flex;align-items:flex-start;gap:16px;
  padding:clamp(24px,2.4vw,32px) clamp(20px,2.2vw,28px);
  border-right:1px solid var(--hm-line);border-bottom:1px solid var(--hm-line);
  color:inherit;text-decoration:none;transition:background-color .18s ease}
.hm-svc-item:nth-child(2n){border-right:0}
.hm-svc-item:nth-last-child(-n+2){border-bottom:0}
.hm-svc-item:hover,.hm-svc-item:focus-visible{background:var(--p-cloud);outline:none}
.hm-svc-item:focus-visible{box-shadow:inset 0 0 0 2px var(--hm-acc)}

/* Outlined box, not a filled tint chip — the detail that carries the look. */
.hm-svc-box{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border:1px solid var(--hm-acc);color:var(--hm-acc);
  background:#fff;transition:background-color .18s ease,color .18s ease}
.hm-svc-box .icon{width:20px;height:20px;stroke-width:1.6}
.hm-svc-item:hover .hm-svc-box{background:var(--hm-acc);color:#fff}

.hm-svc-lbl{min-width:0}
.hm-svc-lbl b{display:block;font-family:var(--font-head);font-size:1.02rem;font-weight:700;
  line-height:1.34;color:var(--hm-ink)}
.hm-svc-lbl small{display:block;margin-top:5px;font-size:.86rem;line-height:1.5;color:var(--hm-body)}

@media (max-width:980px){
  .hm-svc-split{grid-template-columns:1fr}
  .hm-svc-intro{border-right:0;border-bottom:1px solid var(--hm-line)}
  .hm-svc-intro h2{max-width:none}}
@media (max-width:640px){
  .hm-svc-items{grid-template-columns:1fr}
  .hm-svc-item{border-right:0}
  .hm-svc-item:nth-last-child(-n+2){border-bottom:1px solid var(--hm-line)}
  .hm-svc-item:last-child{border-bottom:0}}

/* ---- Section rail --------------------------------------------------------
   A fixed column of ticks, one per section, with the current one highlighted
   as you scroll — a position indicator plus a jump target. Desktop only:
   below 1180px there is no room beside the 1360px column, and on touch it
   would sit under the thumb. With JS off it stays a plain list of anchors. */
/* Sizing is constrained by the 1360px ruled column: the rail must fit in the
   margin BESIDE it, never on top of it (it would sit over the dark Solutions
   panel and lose all contrast). Widest tick 22px + 6px offset = 28px, so the
   rail needs ~32px of margin — i.e. a viewport of at least 1360 + 2*32 ≈ 1440.
   Below that there is genuinely no room and it hides. */
.hm-rail{position:fixed;top:50%;right:6px;transform:translateY(-50%);z-index:40;display:none}
@media (min-width:1440px){.hm-rail{display:block}}
.hm-rail ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.hm-rail-tick{display:flex;align-items:center;justify-content:flex-end;gap:10px;
  padding:4px 0;text-decoration:none;cursor:pointer}

/* The tick itself. Active = accent and longer, so position reads at a glance. */
.hm-rail-mark{display:block;width:10px;height:2px;flex:none;
  background:rgba(20,31,59,.22);transition:width .2s ease,background-color .2s ease}
.hm-rail-tick:hover .hm-rail-mark{width:22px;background:var(--hm-acc)}
.hm-rail-tick.is-active .hm-rail-mark{width:22px;background:var(--hm-acc)}

/* Label appears on hover/focus only — the ticks stay quiet until wanted. */
.hm-rail-lbl{opacity:0;transform:translateX(6px);pointer-events:none;white-space:nowrap;
  padding:3px 8px;background:#fff;border:1px solid var(--hm-line);
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--hm-acc);transition:opacity .2s ease,transform .2s ease}
.hm-rail-tick:hover .hm-rail-lbl,.hm-rail-tick:focus-visible .hm-rail-lbl{opacity:1;transform:none}
.hm-rail-tick:focus-visible{outline:none}
.hm-rail-tick:focus-visible .hm-rail-mark{width:22px;background:var(--hm-acc)}

/* Over the dark Agentic AI band the ink flips, or the rail would vanish. */
.hm-rail.on-dark .hm-rail-mark{background:rgba(255,255,255,.3)}
.hm-rail.on-dark .hm-rail-tick:hover .hm-rail-mark,
.hm-rail.on-dark .hm-rail-tick.is-active .hm-rail-mark{background:#8FB0FF}
.hm-rail.on-dark .hm-rail-lbl{background:#0B1533;border-color:rgba(255,255,255,.18);color:#8FB0FF}

@media (prefers-reduced-motion:reduce){
  .hm-rail-mark,.hm-rail-lbl{transition:none}}

/* ---- Mega menu density -------------------------------------------------
   The panel height was set by the featured card (283px) while the link
   columns were only 244px, so 41px of blank got stretched underneath them —
   the "space at the bottom". These trim the card back under the columns and
   tighten both, so the panel is driven by its content rather than by one
   oversized card. Everything here is menu-scoped. */
.mm-inner{padding:18px 22px}

/* Columns: shorter link rows and a tighter heading. */
.mm-panel-mega .mm-col-head,.mm-panel[data-layout="browse"] .mm-col-head{margin-bottom:9px}
.mm-panel-mega .nav-item-link,.mm-panel[data-layout="browse"] .nav-item-link{padding:5px 8px}

/* Featured card: the tallest element, so it gets the deepest trim. */
.mm-cta,.mm-panel[data-layout="browse"] .mm-cta{padding:16px}
.mm-cta-eyebrow{margin-bottom:5px}
.mm-cta-head{margin-bottom:7px}
.mm-cta-desc,.mm-panel[data-layout="browse"] .mm-cta-desc{margin-bottom:12px;line-height:1.42}
.mm-cta-sub{margin-top:6px}

/* Tools columns stack two category groups; 22px between them was the last
   meaningful slack once LinkedIn came out of the menu. Matches the specificity
   of the browse-layout rule above, or it would never apply. */
.mm-panel[data-layout="browse"] .mm-colgrp + .mm-colgrp{margin-top:15px}

/* ==========================================================================
   BY GOAL detail page (includes/template-goal.php)
   --------------------------------------------------------------------------
   The page opts into the ruled grid with .hm-grid and reuses the homepage's
   .hm-ruled / .hm-cells / .hm-cell / .hm-foot-row furniture. Only what the
   grid does NOT already provide lives here, all `gl-`-prefixed so it cannot
   reach another page.
   ========================================================================== */

/* Hero: same ruled column as every other row, on the pastel band. */
.gl-hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,3vw,48px);align-items:center;
  padding:clamp(40px,4.4vw,60px) clamp(22px,3vw,40px)}
.gl-hero-copy{min-width:0}
.gl-hero-copy h1{margin:0 0 14px;max-width:14ch;
  font-size:clamp(2rem,3.8vw,3rem);line-height:1.1;letter-spacing:-.02em;color:var(--hm-head-ink)}
.gl-lead{margin:0 0 26px;max-width:46ch;font-size:1.08rem;line-height:1.6;color:var(--hm-body)}
.gl-actions{display:flex;flex-wrap:wrap;gap:12px}
/* Trust line under the hero buttons. Flex + align-items:flex-start keeps the
   icon level with the FIRST text line (not centred on the wrapped block), and a
   clear top margin separates it from the buttons above. */
.gl-hero-note{display:flex;gap:9px;align-items:flex-start;margin:26px 0 0;
  max-width:46ch;font-size:.9rem;line-height:1.55;color:var(--hm-body)}
.gl-hero-note .icon{flex:none;width:16px;height:16px;margin-top:1px;
  color:var(--hm-acc);stroke-width:1.7}
.gl-hero-art svg{display:block;width:100%;height:auto}

/* Breadcrumb — monospace, matching the eyebrows. */
.gl-crumb{display:flex;align-items:center;gap:8px;margin-bottom:18px;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase}
.gl-crumb a{color:var(--hm-body);text-decoration:none}
.gl-crumb a:hover{color:var(--hm-acc)}
.gl-crumb span[aria-hidden]{color:var(--hm-line);color:rgba(20,31,59,.3)}
.gl-crumb [aria-current]{color:var(--hm-acc)}

@media (max-width:980px){
  .gl-hero-in{grid-template-columns:1fr}
  .gl-hero-copy h1{max-width:none}}

/* ---- By Goal: the How-we-help tabs -------------------------------------
   This section IS the homepage's Solutions component (.hm-soltabs), reused
   wholesale — same nav list, same navy panel, same radio mechanics, same
   hover-to-open from main.js. The radio ids are hmsol-0..N on purpose: the
   mapping in that component is written against those exact ids, and this is a
   different page so nothing collides.

   Only two things differ, both because the illustration here is a full chart
   rather than the homepage's small spot drawing. */

/* The homepage caps its panel art at 300px. These charts are drawn on a 460
   canvas with 9-11px labels; squeezed to 300 the type lands under 8px and stops
   being readable. Give the visual an even split and its native width. */
.gl-tabs .hm-solpanel{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.gl-tabs .hm-solpanel-visual svg{max-width:460px}
@keyframes gl-flow{
  0%{opacity:0;stroke-dashoffset:0}
  12%{opacity:.9}
  88%{opacity:.9}
  100%{opacity:0;stroke-dashoffset:-140}
}

@media (max-width:900px){
  .gl-tabs .hm-solpanel{grid-template-columns:1fr}}


/* ---- By Industry detail (includes/template-industry-detail.php) ---------
   Reuses the goal page's hero shell and the homepage's cells wholesale. Only
   the closing CTA cell is new. */

/* The CTA that fills the sixth cell of the five-item help grid. Tinted so it
   reads as an action rather than a sixth capability, but still a cell of the
   same sheet — no radius, no shadow, the hairline does the dividing. */
.hm-cell-cta{background:var(--p-sky)}
.hm-cell-cta:hover,.hm-cell-cta:focus-visible{background:#DDE8FF}
.hm-cell-cta h3{color:var(--hm-acc)}

/* Help cells carry only an icon and a title; without this their heading sits
   hard against the cell floor while the CTA cell beside them is full height. */
.hm-cells .hm-cell > h3:last-child{margin-bottom:auto}

/* =========================================================================
   SERVICE DETAIL PAGE — additions to the ruled grid
   Connect Your Data (template-service-detail.php) reuses the homepage grid
   wholesale; only these three small pieces are page-specific. All scoped under
   .hm-grid so nothing leaks to the shared templates.
   ========================================================================= */

/* A section's trailing note — one muted line under a cell grid (custom systems,
   process reassurance, security caveat). */
.hm-grid .hm-note{display:flex;gap:9px;align-items:flex-start;
  margin:26px 0 0;padding-top:22px;border-top:1px solid var(--hm-line);
  font-size:.9rem;line-height:1.6;color:var(--hm-body)}
.hm-grid .hm-note .icon{flex:none;width:17px;height:17px;margin-top:2px;
  color:var(--hm-acc);stroke-width:1.7}
.hm-grid .hm-note a{color:var(--hm-acc);font-weight:600;text-decoration:underline;
  text-underline-offset:2px}

/* Muted caption inside a "what we connect" cell — the "…and more" line that
   follows the logo row. Sits with the logos at the cell floor. */
.hm-grid .hm-cell-sub{margin-top:12px;font-size:.8rem;line-height:1.5;
  color:var(--hm-body);opacity:.85}

/* =========================================================================
   Nav open / active / hover — highlight by CHANGING THE TEXT COLOUR (the brand
   blue, same as the "Talk to an Expert" button), not by adding a background pill.
   Header background, logo and rest-state links are unchanged. The caret still
   flips (transition + rotate, see above). .nav-item keeps these ahead of the
   earlier pill rule (specificity 0,4,0), and the -tinted variants cover home.
   ========================================================================= */
.site-header .nav-item .nav-link:hover,
.site-header .nav-item .nav-link:focus-visible,
.site-header .nav-item .nav-link[aria-expanded="true"],
.site-header .nav-item .nav-link.is-active,
.site-header-tinted .nav-item .nav-link:hover,
.site-header-tinted .nav-item .nav-link:focus-visible,
.site-header-tinted .nav-item .nav-link[aria-expanded="true"],
.site-header-tinted .nav-item .nav-link.is-active{color:#002FAF;background:transparent}