/* ============================================================
   IJT Homepage Redesign — page styles
   Built on the Inner Join Technologies design-system tokens
   (colors_and_type.css supplies all --ijt-* / --ink-* / --s-* vars)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--fg-2);
  background: var(--bg-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }

.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 28px; }
.section { padding: 88px 0; }
.section--tight { padding: 64px 0; }
.eyebrow { font: var(--w-bold) var(--fs-eyebrow)/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.eyebrow--blue { color: var(--blue-600); }
.lead { font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--fg-2); }
.muted { color: var(--fg-3); }
.accent-word { color: var(--accent); }
.blue-word { color: var(--blue-600); }

/* ---------- Buttons (mirror DS Button component) ---------- */
.btn {
  font-family: var(--font-sans); font-weight: 700; border: none; border-radius: var(--r-pill);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  text-decoration: none; line-height: 1; white-space: nowrap;
  transition: all .16s cubic-bezier(.4,0,.2,1); font-size: 16px; padding: 14px 30px;
}
.btn--lg { font-size: 17px; padding: 16px 34px; }
.btn--sm { font-size: 15px; padding: 11px 22px; }
.btn--primary { background: var(--ijt-orange); color: #fff; }
.btn--primary:hover { background: var(--orange-600); box-shadow: var(--shadow-accent); transform: translateY(-1px); }
.btn--primary:active { background: var(--orange-700); transform: scale(.98); }
.btn--blue { background: var(--blue-600); color: #fff; }
.btn--blue:hover { background: var(--blue-700); }
.btn--ghost { background: transparent; color: var(--ink-900); border: 2px solid var(--ink-300); }
.btn--ghost:hover { background: var(--ink-100); border-color: var(--ink-900); }
.btn--ghost-light { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.32); }
.btn--ghost-light:hover { background: rgba(255,255,255,.08); border-color: #fff; }
.btn svg { width: 18px; height: 18px; }

.textlink { color: var(--link); font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; transition: gap .15s, color .15s; }
.textlink:hover { color: var(--link-hover); gap: 11px; }
.textlink svg { width: 17px; height: 17px; }

/* ============================================================
   NAV
   ============================================================ */
.nav { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.9); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: box-shadow .2s, border-color .2s; }
.nav.is-scrolled { box-shadow: var(--shadow-sm); border-color: var(--ink-200); }
.nav__inner { display: flex; align-items: center; gap: 24px; height: 76px; }
.nav__logo img { height: 38px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 2px; margin-left: auto; height: 100%; }
.nav__item { position: relative; display: flex; align-items: center; align-self: stretch; }
.nav__link { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 500; color: var(--ink-700); text-decoration: none; padding: 10px 14px; border-radius: var(--r-md); transition: color .15s, background .15s; cursor: pointer; background: none; border: none; font-family: var(--font-sans); }
.nav__link:hover, .nav__item:hover .nav__link { color: var(--ink-900); background: var(--ink-100); }
.nav__link .chev { width: 15px; height: 15px; transition: transform .18s; }
.nav__item:hover .chev { transform: rotate(180deg); }
.nav__panel { position: absolute; top: calc(100% + 6px); left: 0; background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--ink-200); padding: 10px; min-width: 230px; opacity: 0; visibility: hidden; transform: none; transition: opacity .16s, visibility .16s; }
.nav__item:hover::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
.nav__item:hover .nav__panel { opacity: 1; visibility: visible; transform: none; }
.nav__panel a { display: block; font-size: 14px; color: var(--ink-700); text-decoration: none; padding: 9px 13px; border-radius: var(--r-md); transition: background .12s, color .12s; }
.nav__panel a:hover { background: var(--orange-100); color: var(--orange-700); }

/* ---- mega menus ---- */
.nav__mega { position: fixed; left: 0; right: 0; top: 76px; width: 100%; min-width: 0; padding: 0; border-radius: 0; border: none; border-top: 1px solid var(--ink-200); box-shadow: var(--shadow-md); overflow: hidden; }
.nav__mega .m-grid { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
.nav__mega .m-grid { display: grid; }
.nav__mega.mega--solutions .m-grid,
.nav__mega.mega--resources .m-grid { grid-template-columns: 0.82fr 1.18fr; }
.nav__mega.mega--about .m-grid { grid-template-columns: repeat(3,1fr); }
.nav__mega .m-main { padding: 28px 40px 28px 0; }
.nav__mega .m-feat { position: relative; background: var(--canvas); border-left: 1px solid var(--ink-200); padding: 28px 0 28px 40px; }
.nav__mega .m-feat::after { content: ''; position: absolute; top: 0; bottom: 0; left: 100%; width: 50vw; background: var(--canvas); }
.nav__mega .m-col { padding: 28px 18px; }
.nav__mega .m-h { font: 700 11px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-400); margin: 0 0 10px; padding: 0 12px; }
.nav__mega .m-tx { display: block; }
.nav__mega .m-link { display: block; padding: 9px 12px; border-radius: var(--r-md); text-decoration: none; transition: background .12s; }
.nav__mega .m-link:hover { background: var(--orange-100); }
.nav__mega .m-link strong { display: block; font-size: 14px; font-weight: 600; color: var(--ink-900); }
.nav__mega .m-link:hover strong { color: var(--orange-700); }
.nav__mega .m-link small { display: block; font-size: 12px; color: var(--ink-500); margin-top: 2px; line-height: 1.4; }
.nav__mega .m-col a { display: block; font-size: 13.5px; color: var(--ink-700); text-decoration: none; padding: 8px 12px; border-radius: var(--r-md); transition: background .12s, color .12s; }
.nav__mega .m-col a:hover { background: var(--orange-100); color: var(--orange-700); }
.nav__mega .m-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.nav__mega .m-card { display: flex; gap: 11px; align-items: flex-start; padding: 11px; border-radius: var(--r-md); text-decoration: none; transition: background .12s, box-shadow .12s; }
.nav__mega .m-card:hover { background: #fff; box-shadow: var(--shadow-sm); }
.nav__mega .m-ic { width: 36px; height: 36px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; }
.nav__mega .m-ic svg { width: 19px; height: 19px; }
.nav__mega .m-ic.o { background: var(--orange-100); color: var(--orange-600); }
.nav__mega .m-ic.b { background: var(--blue-100); color: var(--blue-600); }
.nav__mega .m-card strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-900); }
.nav__mega .m-card small { display: block; font-size: 11.5px; color: var(--ink-500); margin-top: 2px; line-height: 1.35; }
.nav__mega .m-post { display: flex; gap: 12px; align-items: center; padding: 9px 11px; border-radius: var(--r-md); text-decoration: none; transition: background .12s, box-shadow .12s; }
.nav__mega .m-post:hover { background: #fff; box-shadow: var(--shadow-sm); }
.nav__mega .m-thumb { width: 52px; height: 52px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; }
.nav__mega .m-thumb svg { width: 22px; height: 22px; }
.nav__mega .m-post strong { display: block; font-size: 13px; font-weight: 600; color: var(--ink-900); line-height: 1.3; }
.nav__mega .m-post small { display: block; font-size: 11.5px; color: var(--ink-500); margin-top: 4px; }
.nav__mega .m-promo { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--ink-900); padding: 14px max(28px, calc((100vw - 1104px) / 2)); }
.nav__mega .m-promo strong { display: block; font-size: 13.5px; color: #fff; }
.nav__mega .m-promo small { font-size: 12px; color: var(--ink-300); }
.nav__mega .m-promo .btn { flex: none; }
.nav__cta { margin-left: 6px; }
.nav__burger { display: none; margin-left: auto; background: none; border: none; cursor: pointer; padding: 6px; color: var(--ink-900); }
.nav__burger svg { width: 26px; height: 26px; }

/* ---- account / auth ---- */
.nav__account { display: flex; align-items: center; }
.nav__login { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 600; color: var(--ink-900); text-decoration: none; padding: 9px 14px; border-radius: var(--r-pill); border: 1px solid var(--ink-200); transition: background .15s, border-color .15s; }
.nav__login svg { width: 17px; height: 17px; }
.nav__login:hover { background: var(--ink-100); border-color: var(--ink-300); }
.acct { position: relative; }
.acct__btn { display: inline-flex; align-items: center; gap: 9px; background: none; border: 1px solid transparent; border-radius: var(--r-pill); padding: 5px 8px 5px 5px; cursor: pointer; font-family: var(--font-sans); transition: background .15s, border-color .15s; }
.acct__btn:hover { background: var(--ink-100); }
.acct__btn .chev { width: 15px; height: 15px; transition: transform .18s; color: var(--ink-400); }
.acct.is-open .acct__btn .chev { transform: rotate(180deg); }
.acct__av { width: 34px; height: 34px; border-radius: var(--r-pill); overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; background: var(--blue-100); color: var(--blue-700); }
.acct__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acct__av--ph svg { width: 19px; height: 19px; }
.acct__av--lg { width: 46px; height: 46px; }
.acct__av--lg.acct__av--ph svg { width: 26px; height: 26px; }
.acct__av--ini { font-size: 13px; font-weight: 700; letter-spacing: .02em; user-select: none; }
.acct__av--lg.acct__av--ini { font-size: 17px; }
.acct__name { font-size: 15px; font-weight: 600; color: var(--ink-900); max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct__menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 250px; background: #fff; border: 1px solid var(--ink-200); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s, transform .16s, visibility .16s; z-index: 70; }
.acct.is-open .acct__menu { opacity: 1; visibility: visible; transform: none; }
.acct__head { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; border-bottom: 1px solid var(--ink-200); margin-bottom: 6px; }
.acct__meta { display: flex; flex-direction: column; min-width: 0; }
.acct__meta strong { font-size: 15px; color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct__meta small { font-size: 12.5px; color: var(--ink-400); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct__item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; font-family: var(--font-sans); font-size: 14.5px; font-weight: 500; color: var(--ink-800, var(--ink-900)); background: none; border: none; border-radius: var(--r-md); padding: 10px 12px; cursor: pointer; text-decoration: none; transition: background .13s; }
.acct__item svg { width: 18px; height: 18px; color: var(--ink-400); flex: none; }
.acct__item:hover { background: var(--ink-100); }
.acct__item--logout { color: var(--orange-700); margin-top: 4px; border-top: 1px solid var(--ink-200); border-radius: 0 0 var(--r-md) var(--r-md); }
.acct__item--logout svg { color: var(--orange-700); }

/* drawer account variant */
.drawer__account { display: block; }
.drawer__account .nav__login--drawer { display: inline-flex; margin-bottom: 4px; }
.drawer__account .acct { position: static; }
.drawer__account .acct__btn { width: 100%; justify-content: flex-start; padding: 6px 0; }
.drawer__account .acct__btn .chev { margin-left: auto; }
.drawer__account .acct__menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; padding: 6px 0 0; min-width: 0; }
.drawer__account .acct__head { padding-left: 0; padding-right: 0; }
.drawer__account .acct__item { font-size: 16px; padding: 11px 0; }
.drawer__account .acct__item--logout { border-radius: 0; }

/* mobile drawer */
.drawer { position: fixed; inset: 0; background: #fff; z-index: 90; display: none; flex-direction: column; padding: 0 28px 28px; overflow-y: auto; }
.drawer.is-open { display: flex; animation: fade .2s ease; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.drawer__head img { height: 36px; }
.drawer__close { background: var(--ink-100); border: none; width: 40px; height: 40px; border-radius: var(--r-pill); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.drawer__close svg { width: 22px; height: 22px; }
.drawer__group { border-bottom: 1px solid var(--ink-200); padding: 14px 0; }
.drawer__group > p { font: var(--w-bold) 12px/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 10px; }
.drawer__group a { display: block; font-size: 17px; font-weight: 500; color: var(--ink-900); text-decoration: none; padding: 9px 0; }
.drawer__cta { margin-top: 22px; width: 100%; }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }

@media (max-width: 980px) {
  .nav__links, .nav__cta, .nav__account { display: none; }
  .nav__burger { display: block; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff 0%, var(--canvas) 100%); }
.hero__net { position: absolute; inset: 0; pointer-events: none; opacity: .5; z-index: 0; }
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr .98fr; gap: 60px; align-items: center; padding: 86px 0 78px; }
.hero__kicker { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; color: var(--ink-700); background: #fff; border: 1px solid var(--ink-200); box-shadow: var(--shadow-sm); padding: 8px 16px 8px 12px; border-radius: var(--r-pill); margin-bottom: 26px; }
.hero__kicker .star { width: 22px; height: 22px; }
.hero h1 { font-weight: 700; font-size: clamp(38px, 5vw, 56px); line-height: 1.07; letter-spacing: -0.015em; color: var(--fg-1); }
.hero__body { font-size: 18px; line-height: var(--lh-body); color: var(--ink-700); margin-top: 22px; max-width: 33em; }
.hero__sub { font-size: 15.5px; line-height: 1.6; color: var(--ink-500); margin-top: 14px; max-width: 33em; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.hero__media { position: relative; }
.hero__media img.shot { width: 100%; border-radius: 20px; box-shadow: var(--shadow-lg); aspect-ratio: 4/3.4; object-fit: cover; }
.hero__chip { position: absolute; left: -20px; bottom: 30px; background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 15px 20px 15px 16px; display: flex; align-items: center; gap: 13px; }
.hero__chip .bar { width: 4px; align-self: stretch; border-radius: 3px; background: var(--ijt-orange); }
.hero__chip strong { display: block; font-size: 22px; color: var(--ink-900); line-height: 1.1; }
.hero__chip span { font-size: 12.5px; color: var(--ink-500); }
@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; gap: 36px; padding: 56px 0; }
  .hero__media { order: -1; }
}
/* centered text-only variant (ijt-hero layout="center" / no image) */
.hero--center .hero__grid { grid-template-columns: 1fr; }
.hero--center .hero__text { max-width: 760px; margin: 0 auto; text-align: center; }
.hero--center .hero__body, .hero--center .hero__sub { margin-left: auto; margin-right: auto; }
.hero--center .hero__actions { justify-content: center; }

/* trust bar */
.trustbar { background: var(--paper); border-bottom: 1px solid var(--ink-200); }
.trustbar__in { display: flex; align-items: center; justify-content: center; gap: 18px 54px; flex-wrap: wrap; padding: 26px 0; }
.trustbar img { height: 78px; width: auto; object-fit: contain; }
@media (max-width: 620px) { .trustbar img { height: 60px; } }

/* ============================================================
   FEATURE ROWS
   ============================================================ */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.feature--rev .feature__media { order: 2; }
.feature__media img { width: 100%; border-radius: 20px; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; object-fit: cover; }
.feature h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.18; color: var(--fg-1); }
.feature__copy > p { color: var(--ink-600, var(--ink-700)); margin-top: 16px; line-height: var(--lh-body); }
.feature__copy .lead { color: var(--ink-900); font-weight: 500; font-size: 18px; margin-top: 18px; }
@media (max-width: 880px) {
  .feature { grid-template-columns: 1fr; gap: 32px; }
  .feature__media, .feature--rev .feature__media { order: -1; }
}

/* ============================================================
   TRIAD BAND  (Stronger / Faster / Sharper)
   ============================================================ */
.triad { background: var(--ink-900); color: #fff; position: relative; overflow: hidden; }
.triad__net { position: absolute; inset: 0; opacity: .14; pointer-events: none; }
.triad__in { position: relative; z-index: 1; }
.triad h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 700; line-height: 1.15; text-align: center; max-width: 18ch; margin: 0 auto; }
.triad h2 .o { color: var(--orange-400); }
.triad h2 .b { color: var(--blue-400); }
.triad__copy { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 56px; max-width: 880px; margin: 34px auto 0; }
.triad__copy p { color: var(--ink-300); font-size: 16.5px; line-height: 1.65; }
.triad__words { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 40px; }
.triad__pill { display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-pill); padding: 12px 22px; font-weight: 700; font-size: 17px; }
.triad__pill .dot { width: 9px; height: 9px; border-radius: 50%; }
@media (max-width: 700px) { .triad__copy { grid-template-columns: 1fr; } }

/* ============================================================
   VALUE CARDS
   ============================================================ */
.band-head { text-align: center; max-width: 760px; margin: 0 auto 52px; }
.band-head h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.18; color: var(--fg-1); margin-top: 14px; }
.band-head p { color: var(--ink-500); font-size: 17px; line-height: var(--lh-body); margin-top: 16px; }

.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.vcard { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 38px 30px; text-align: center; transition: transform .18s, box-shadow .18s; }
.vcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.vcard__icon { width: 78px; height: 78px; object-fit: contain; margin: 0 auto 20px; }
.vcard h3 { font-size: var(--fs-h3); font-weight: 700; color: var(--ink-900); margin-bottom: 10px; }
.vcard p { color: var(--ink-500); font-size: 15px; line-height: 1.6; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }

/* ============================================================
   SERVICE CARDS (mirror DS ServiceCard)
   ============================================================ */
.svc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.scard { background: #fff; border: 1px solid var(--ink-200); border-radius: var(--r-lg); padding: 32px 28px; transition: box-shadow .18s, transform .18s, border-color .18s; }
.scard:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: transparent; }
.scard__icon { width: 58px; height: 58px; object-fit: contain; margin-bottom: 18px; }
.scard h3 { font-size: 20px; font-weight: 700; color: var(--ink-900); margin-bottom: 8px; }
.scard__q { color: var(--blue-600); font-weight: 500; font-size: 15px; margin-bottom: 9px; }
.scard__b { color: var(--ink-500); font-size: 14.5px; line-height: 1.55; }
@media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
@media (min-width: 901px) and (max-width: 1080px) { .svc-grid { grid-template-columns: repeat(2,1fr); } }

/* ============================================================
   TESTIMONIALS (dark band)
   ============================================================ */
.tband { background: var(--ink-900); color: #fff; position: relative; overflow: hidden; }
.tband__net { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .12; pointer-events: none; }
.tband__head { position: relative; z-index: 1; text-align: center; max-width: 720px; margin: 0 auto 46px; }
.tband__head h2 { font-size: var(--fs-h2); font-weight: 700; color: #fff; margin-top: 14px; line-height: 1.2; }
.tband__head p { color: var(--ink-300); font-size: 17px; line-height: 1.6; margin-top: 16px; }
.tgrid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.tcard { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); padding: 34px 32px; display: flex; flex-direction: column; }
.tcard__bar { width: 46px; height: 4px; background: var(--ijt-orange); border-radius: 3px; margin-bottom: 22px; }
.tcard__quote { font-size: 18px; line-height: 1.6; color: #fff; font-weight: 300; flex: 1; }
.tcard__who { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.tcard__who img { width: 56px; height: 56px; border-radius: var(--r-pill); object-fit: cover; background: var(--ink-700); }
.tcard__name { font-weight: 700; color: #fff; }
.tcard__role { font-size: 14px; color: var(--ink-300); margin-top: 2px; }
@media (max-width: 820px) { .tgrid { grid-template-columns: 1fr; } }

/* client strip */
.clients { background: var(--canvas); }
.clients__label { text-align: center; font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 26px; }
.strip { overflow: hidden; padding: 6px 0 16px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.strip__track { display: flex; flex-wrap: nowrap; align-items: center; width: max-content; animation: logoscroll 32s linear infinite; }
.strip:hover .strip__track { animation-play-state: paused; }
.strip img { flex: 0 0 auto; height: 84px; width: auto; object-fit: contain; margin-right: 64px; filter: grayscale(1); opacity: .55; transition: filter .2s, opacity .2s; }
@keyframes logoscroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .strip { overflow-x: auto; }
  .strip__track { animation: none; }
}
.strip img:hover { filter: grayscale(0); opacity: 1; }

/* ============================================================
   INDUSTRY TABS
   ============================================================ */
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 36px; }
.tab { font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--ink-700); background: #fff; border: 1px solid var(--ink-200); border-radius: var(--r-pill); padding: 11px 22px; cursor: pointer; transition: all .15s; }
.tab:hover { background: var(--ink-100); }
.tab.is-on { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }
.indpanel { display: none; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; background: #fff; border: 1px solid var(--ink-200); border-radius: 22px; padding: 46px; box-shadow: var(--shadow-sm); }
.indpanel.is-on { display: grid; animation: fade .25s ease; }
.indpanel h3 { font-size: 27px; font-weight: 700; color: var(--ink-900); margin-bottom: 14px; }
.indpanel__copy > p { color: var(--ink-500); line-height: var(--lh-body); }
.checklist { list-style: none; padding: 0; margin: 22px 0 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 13px 20px; }
.checklist li { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; color: var(--ink-700); line-height: 1.4; }
.checklist svg { width: 19px; height: 19px; color: var(--ijt-orange); flex: none; margin-top: 1px; }
.indpanel__media img { width: 100%; border-radius: 16px; box-shadow: var(--shadow-md); aspect-ratio: 4/3; object-fit: cover; }
@media (max-width: 860px) { .indpanel { grid-template-columns: 1fr; padding: 28px; } .indpanel__media { order: -1; } .checklist { grid-template-columns: 1fr; } }

/* ============================================================
   SOLUTIONS / MS PRODUCTS
   ============================================================ */
.solutions { text-align: center; }
.solutions__copy { max-width: 760px; margin: 0 auto; color: var(--ink-700); font-size: 17px; line-height: var(--lh-body); }
.solutions__copy a { color: var(--link); text-decoration: none; font-weight: 500; }
.solutions__copy a:hover { text-decoration: underline; }
.solutions__products { max-width: 760px; margin: 40px auto 0; }
.solutions__products img { width: 100%; height: auto; }
.solutions__cta { margin-top: 32px; }

/* ============================================================
   FINAL CTA (dark)
   ============================================================ */
.finalcta { background: var(--ink-900); color: #fff; position: relative; overflow: hidden; }
.finalcta__net { position: absolute; inset: 0; opacity: .12; pointer-events: none; }
.finalcta__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.finalcta__media img { width: 100%; border-radius: 18px; }
.finalcta__star { width: 76px; height: 76px; padding: 13px; box-sizing: border-box; object-fit: contain; background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-md); margin-bottom: 24px; }
.finalcta h2 { font-size: clamp(30px, 3.6vw, 42px); font-weight: 700; line-height: 1.12; color: #fff; }
.finalcta p { font-size: 18px; color: var(--ink-300); margin-top: 18px; line-height: 1.6; }
.finalcta p strong { color: #fff; }
.finalcta__actions { margin-top: 30px; }
@media (max-width: 860px) { .finalcta__grid { grid-template-columns: 1fr; gap: 34px; } .finalcta__media { order: -1; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: #101010; color: #fff; padding: 70px 0 0; }
.footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.4fr; gap: 44px; }
.footer__brand img { height: 42px; margin-bottom: 20px; filter: brightness(0) invert(1); }
.footer__brand p { color: var(--ink-300); font-size: 14px; line-height: 1.6; max-width: 30em; margin-bottom: 20px; }
.footer__social { display: flex; gap: 10px; }
.footer__social a { width: 40px; height: 40px; border-radius: var(--r-pill); background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; transition: background .15s; color: #fff; }
.footer__social a:hover { background: var(--ijt-orange); }
.footer__social svg { width: 19px; height: 19px; }
.footer__col h4 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.footer__col a { display: flex; align-items: center; gap: 9px; color: var(--ink-300); text-decoration: none; font-size: 14px; padding: 6px 0; transition: color .15s; }
.footer__col a:hover { color: #fff; }
.footer__col svg { width: 16px; height: 16px; flex: none; color: var(--ink-400); }
.footer__bar { border-top: 1px solid rgba(255,255,255,.1); margin-top: 52px; padding: 24px 0; }
.footer__bar-in { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--ink-400); }
.footer__legal { display: flex; gap: 22px; }
.footer__legal a { color: var(--ink-400); text-decoration: none; }
.footer__legal a:hover { color: #fff; }
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer__grid { grid-template-columns: 1fr; } }

/* ============================================================
   MODAL
   ============================================================ */
.modal { position: fixed; inset: 0; background: rgba(24,24,24,.55); z-index: 100; display: none; }
.modal.is-open { display: block; }
.modal__card { position: absolute; top: 0; right: 0; height: 100%; width: 480px; max-width: 100%; background: #fff; box-shadow: var(--shadow-lg); padding: 40px 36px; overflow-y: auto; transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.2,1); }
.modal.is-open .modal__card { transform: none; }
@keyframes pop { from { transform: translateY(14px) scale(.98); opacity: 0 } to { transform: none; opacity: 1 } }
.modal__x { position: absolute; top: 18px; right: 18px; background: var(--ink-100); border: none; width: 38px; height: 38px; border-radius: var(--r-pill); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.modal__x:hover { background: var(--ink-200); }
.modal__x svg { width: 20px; height: 20px; }
.modal h3 { font-size: 24px; font-weight: 700; color: var(--ink-900); }
.modal__sub { color: var(--ink-500); margin-top: 8px; font-size: 15px; }
.modal__form label .opt { color: var(--ink-400); font-weight: 400; }
.modal__form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1/-1; }
.field label { font-size: 13px; font-weight: 500; color: var(--ink-700); }
.field input, .field textarea { font-family: var(--font-sans); font-size: 15px; padding: 12px 14px; border: 1px solid var(--ink-300); border-radius: 10px; outline: none; color: var(--ink-900); resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--ijt-blue); box-shadow: 0 0 0 3px var(--blue-100); }
.modal__done { text-align: center; padding: 16px 4px; }
.modal__check { width: 66px; height: 66px; border-radius: var(--r-pill); background: var(--ijt-orange); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: #fff; }
.modal__check svg { width: 34px; height: 34px; }
@media (max-width: 540px) { .modal__card { width: 100%; padding: 26px 22px; } }
@media (max-width: 480px) { .modal__form { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .modal__card { transition: none; } }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1); }
  .reveal.is-in { opacity: 1; transform: none; }
}

/* ============================================================
   BOOKING MODAL (3-step slide-in panel)
   ============================================================ */
.bookmodal { position: fixed; inset: 0; z-index: 100; display: none; }
.bookmodal.is-open { display: block; }
.bookmodal__backdrop { position: absolute; inset: 0; background: rgba(24,24,24,.55); opacity: 0; transition: opacity .25s ease; }
.bookmodal.is-open .bookmodal__backdrop { opacity: 1; }
.bookmodal__panel { position: absolute; top: 0; right: 0; height: 100%; width: 480px; max-width: 100%; background: #fff; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow-y: auto; padding: 30px 36px 40px; transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.2,1); }
.bookmodal.is-open .bookmodal__panel { transform: none; }
.bookmodal__close { position: absolute; top: 18px; right: 18px; background: var(--ink-100); border: none; width: 38px; height: 38px; border-radius: var(--r-pill); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink-700); transition: background .15s; z-index: 2; }
.bookmodal__close:hover { background: var(--ink-200); }
.bookmodal__close svg { width: 18px; height: 18px; }
.bookmodal__progress { margin: 4px 0 22px; }
.bookmodal__track { height: 5px; background: var(--ink-100); border-radius: var(--r-pill); overflow: hidden; }
.bookmodal__bar { height: 100%; width: 33.33%; background: var(--ijt-orange); border-radius: var(--r-pill); transition: width .35s cubic-bezier(.4,0,.2,1); }
.bookmodal__steplabel { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); margin-top: 9px; }
.bstep { animation: bstepIn .3s ease; }
.bstep[hidden] { display: none; }
@keyframes bstepIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.bstep__head h2 { font-size: 25px; font-weight: 700; color: var(--ink-900); line-height: 1.2; margin: 10px 0 8px; }
.bstep__head p { color: var(--ink-500); font-size: 15px; line-height: 1.55; }
.brep { display: flex; gap: 13px; align-items: center; background: var(--canvas); border: 1px solid var(--ink-200); border-radius: var(--r-lg); padding: 14px 16px; margin: 20px 0 4px; }
.brep__av { flex: none; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: 15px; letter-spacing: .02em; }
.brep__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brep__av.av-o { background: var(--ijt-orange); }
.brep__body { display: flex; flex-direction: column; line-height: 1.3; }
.brep__body strong { color: var(--ink-900); font-size: 15px; }
.brep__role { font-size: 12.5px; color: var(--ink-500); margin-top: 1px; }
.brep__status { font-size: 12.5px; color: var(--success); display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.brep__status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.bform { display: grid; gap: 16px; margin-top: 20px; }
.bform .field { display: flex; flex-direction: column; gap: 6px; }
.bform .field > span { font-size: 13px; font-weight: 500; color: var(--ink-700); }
.bform .field em { font-style: normal; color: var(--ijt-orange); }
.bform .field em.opt { color: var(--ink-400); font-weight: 400; }
.bform input[type="text"], .bform input[type="email"] { font-family: var(--font-sans); font-size: 15px; padding: 12px 14px; border: 1px solid var(--ink-300); border-radius: 10px; outline: none; color: var(--ink-900); }
.bform input:focus { border-color: var(--ijt-blue); box-shadow: 0 0 0 3px var(--blue-100); }
.field-error { display: none; color: var(--danger); font-size: 12.5px; margin: 0; }
.field.is-invalid input { border-color: var(--danger); }
.field.is-invalid .field-error { display: block; }
.bform__fine { font-size: 12px; color: var(--ink-400); line-height: 1.5; margin: 0; text-align: center; }
.bform fieldset { border: none; padding: 0; margin: 0; }
.bform legend { font-size: 13.5px; font-weight: 600; color: var(--ink-900); margin-bottom: 10px; padding: 0; }
.bform fieldset.is-invalid legend { color: var(--danger); }
.bform fieldset .field-error { display: none; color: var(--danger); font-size: 12.5px; margin: 6px 0 0; }
.bform fieldset.is-invalid .field-error { display: block; }
.pill-options { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill-options label { font-size: 13.5px; color: var(--ink-700); background: #fff; border: 1px solid var(--ink-300); border-radius: var(--r-pill); padding: 9px 16px; cursor: pointer; transition: background .14s, border-color .14s, color .14s; }
.pill-options label:hover { border-color: var(--ink-900); }
.pill-options input:checked + label { background: var(--ijt-orange); border-color: var(--ijt-orange); color: #fff; }
.pill-options input:focus-visible + label { box-shadow: 0 0 0 3px var(--orange-100); }
.bform__nav { display: flex; gap: 12px; }
.bform__nav .btn--ghost { flex: 0 0 auto; }
.bform__nav .btn--primary { flex: 1; }
.bbookings { border: 1px solid var(--ink-200); border-radius: var(--r-lg); overflow: hidden; min-height: 360px; display: flex; margin-top: 20px; }
.bbookings iframe { width: 100%; min-height: 360px; border: 0; }
.bbookings__fallback { padding: 36px 26px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.bbookings__fallback svg { width: 42px; height: 42px; color: var(--ijt-orange); margin-bottom: 4px; }
.bbookings__fallback p { color: var(--ink-600, var(--ink-700)); font-size: 14.5px; line-height: 1.5; margin: 0; }
.bbookings__contact { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
.bstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.bstats > div { text-align: center; }
.bstats strong { display: block; color: var(--ink-900); font-size: 17px; font-weight: 700; }
.bstats span { font-size: 11.5px; color: var(--ink-500); }
.bbookings__powered { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 11.5px; color: var(--ink-400); margin-top: 16px; }
.bbookings__powered svg { width: 12px; height: 12px; }
/* ── Booking calendar picker (Step 3) ───────────────────────────── */
.bookmodal-locked { overflow: hidden; }
.booking-calendar { margin-top: 20px; }
.booking-section-label { font-size: 13px; font-weight: 600; color: var(--ink-700); display: block; margin-bottom: 8px; }
.booking-date-select { font-family: var(--font-sans); font-size: 15px; width: 100%; padding: 12px 14px; border: 1px solid var(--ink-300); border-radius: 10px; color: var(--ink-900); background: #fff; outline: none; cursor: pointer; }
.booking-date-select:focus { border-color: var(--ijt-blue); box-shadow: 0 0 0 3px var(--blue-100); }
.booking-slots-wrap { margin-top: 20px; }
.booking-slots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.booking-slot-chip { font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; padding: 9px 16px; border: 1px solid var(--ink-300); border-radius: var(--r-pill); background: #fff; color: var(--ink-700); cursor: pointer; transition: background .14s, border-color .14s, color .14s; }
.booking-slot-chip:hover { border-color: var(--ink-900); }
.booking-slot-chip.is-selected { background: var(--ijt-orange); border-color: var(--ijt-orange); color: #fff; }
.booking-loading { font-size: 14px; color: var(--ink-500); margin: 0; }
.booking-msg { font-size: 14px; color: var(--ink-600); margin: 0; }
.booking-success { text-align: center; padding: 24px 0; }
.booking-success svg { display: block; margin: 0 auto 16px; }
.booking-success h2 { font-size: 22px; font-weight: 700; color: var(--ink-900); margin-bottom: 10px; }
.booking-success p { color: var(--ink-600); font-size: 15px; line-height: 1.55; margin: 0 0 6px; }
@media (max-width: 540px) {
  .bookmodal__panel { width: 100%; padding: 24px 22px 34px; }
  .bstep__head h2 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .bookmodal__panel, .bookmodal__backdrop, .bstep, .bookmodal__bar { transition: none; animation: none; }
}

/* ============================================================
   PERSONA / AI-CAPABILITY PAGE PATTERNS
   Reusable across the "Who We Serve" pages (Sales Leaders first;
   Marketing / Finance / IT to follow). All keyed to DS tokens.
   ------------------------------------------------------------
   • .sec-head            left-aligned section heading + lead
   • .aichat / .aimsg /
     .airec / .aidiff     "AI conversation → CRM record" demo mock
   • .capgrid / .capcard  three-up capability cards (Lucide icon top)
   • .symptoms            problem-symptom list card
   • .flow                numbered example-flow rail
   • .benefits            two-up benefit checklist
   • .note-callout        reassurance / fine-print callout w/ icon
   • .faq                 accessible <details> accordion (AEO)
   • .slcta               centered dark CTA band
   ============================================================ */

/* section heading (left aligned) */
.sec-head { max-width: 780px; margin-bottom: 18px; }
.sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.16; color: var(--fg-1); letter-spacing: -0.01em; margin-top: 12px; }
.sec-head h2 .o { color: var(--accent); }
.sec-head h2 .b { color: var(--blue-600); }
.sec-head p { color: var(--ink-500); font-size: 17.5px; line-height: var(--lh-body); margin-top: 16px; }
.prose-col { max-width: 760px; }
.prose-col p { color: var(--ink-600, var(--ink-700)); font-size: 16.5px; line-height: 1.75; margin-top: 18px; }
.prose-col p:first-child { margin-top: 0; }

/* ---------- AI conversation → CRM record mock ---------- */
.aichat { background: #fff; border: 1px solid var(--ink-200); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; }
.aichat__bar { display: flex; align-items: center; gap: 9px; padding: 13px 18px; border-bottom: 1px solid var(--ink-200); background: var(--canvas); }
.aichat__bar .star { width: 20px; height: 20px; }
.aichat__bar strong { font-size: 13.5px; font-weight: 600; color: var(--ink-900); }
.aichat__bar small { font-size: 12px; color: var(--ink-400); margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.aichat__bar small .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.aichat__body { padding: 18px; display: flex; flex-direction: column; gap: 15px; }
.aimsg { align-self: flex-end; max-width: 86%; }
.aimsg__who { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 6px; text-align: right; }
.aimsg__bubble { background: var(--ink-900); color: #fff; border-radius: 16px 16px 5px 16px; padding: 13px 16px; font-size: 14.5px; line-height: 1.55; }
.aireply { align-self: flex-start; width: 100%; }
.aireply__who { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-600); margin-bottom: 7px; display: inline-flex; align-items: center; gap: 6px; }
.aireply__who svg { width: 14px; height: 14px; }

/* a "created record" / document card produced by the agent */
.airec { border: 1px solid var(--ink-200); border-radius: 13px; padding: 15px 17px; background: #fff; box-shadow: var(--shadow-sm); }
.airec__top { display: flex; align-items: center; gap: 11px; }
.airec__ic { width: 38px; height: 38px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; }
.airec__ic svg { width: 19px; height: 19px; }
.airec__ic.b { background: var(--blue-100); color: var(--blue-600); }
.airec__ic.o { background: var(--orange-100); color: var(--orange-600); }
.airec__ttl { font-size: 14.5px; font-weight: 700; color: var(--ink-900); line-height: 1.2; }
.airec__sub { font-size: 12px; color: var(--ink-400); margin-top: 2px; }
.airec__chip { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--orange-700); background: var(--orange-100); padding: 5px 10px; border-radius: var(--r-pill); }
.airec__chip svg { width: 13px; height: 13px; }
.airec__fields { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--ink-200); }
.airec__fields dt { font-size: 13px; color: var(--ink-400); }
.airec__fields dd { font-size: 13px; font-weight: 500; color: var(--ink-900); margin: 0; }

/* CRM-vs-M365 comparison (re-engagement) */
.aidiff { display: grid; gap: 9px; margin-top: 2px; }
.aidiff__row { display: flex; gap: 11px; align-items: flex-start; border: 1px solid var(--ink-200); border-radius: 11px; padding: 12px 14px; background: #fff; }
.aidiff__tag { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 9px; border-radius: var(--r-pill); margin-top: 1px; }
.aidiff__row.is-crm .aidiff__tag { background: var(--blue-100); color: var(--blue-700); }
.aidiff__row.is-m365 .aidiff__tag { background: var(--orange-100); color: var(--orange-700); }
.aidiff__row p { font-size: 13px; line-height: 1.5; color: var(--ink-700); margin: 0; }
.aidiff__row p b { color: var(--ink-900); }
.aireply__sugg { display: flex; gap: 11px; align-items: flex-start; background: var(--ink-900); color: #fff; border-radius: 11px; padding: 13px 15px; margin-top: 9px; }
.aireply__sugg svg { width: 18px; height: 18px; flex: none; color: var(--orange-400); margin-top: 1px; }
.aireply__sugg p { font-size: 13.5px; line-height: 1.55; margin: 0; }
.aireply__sugg b { color: var(--orange-400); }

/* ---------- capability cards ---------- */
.capgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.capcard { background: #fff; border: 1px solid var(--ink-200); border-radius: 16px; padding: 32px 28px; height: 100%; transition: box-shadow .18s, transform .18s, border-color .18s; }
.capcard:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: transparent; }
.capcard__ic { width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.capcard__ic svg { width: 26px; height: 26px; }
.capcard__ic.o { background: var(--orange-100); color: var(--orange-600); }
.capcard__ic.b { background: var(--blue-100); color: var(--blue-600); }
.capcard h3 { font-size: 20px; font-weight: 700; color: var(--ink-900); margin-bottom: 11px; line-height: 1.25; }
.capcard p { color: var(--ink-600, var(--ink-700)); font-size: 15px; line-height: 1.65; }
.capcard p + p { margin-top: 13px; }
.capcard .quote-inline { color: var(--ink-900); font-style: italic; }
.capcard__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 14.5px; font-weight: 600; color: var(--blue-600); text-decoration: none; }
.capcard__link:hover { color: var(--orange-700); }
.capcard__link svg { width: 16px; height: 16px; transition: transform .18s cubic-bezier(.4,0,.2,1); }
.capcard__link:hover svg { transform: translateX(3px); }
.capmethod { border-top: 1px solid var(--ink-200); margin-top: 16px; padding-top: 14px; }
.capmethod__tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--ink-900); margin-bottom: 5px; }
.capmethod__tag .pip { width: 8px; height: 8px; border-radius: 2px; }
.capmethod__tag .pip.o { background: var(--ijt-orange); }
.capmethod__tag .pip.b { background: var(--ijt-blue); }
.capmethod p { font-size: 13.5px; color: var(--ink-500); margin-top: 0; }
@media (max-width: 960px) { .capgrid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }

/* ---------- problem symptoms card ---------- */
.problem { display: grid; grid-template-columns: 1.06fr .94fr; gap: 56px; align-items: center; }
.symptoms { background: var(--canvas); border: 1px solid var(--ink-200); border-radius: 18px; padding: 30px 30px 26px; }
.symptoms__h { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 18px; }
.symptom { display: flex; gap: 13px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--ink-200); }
.symptom:first-of-type { border-top: none; padding-top: 0; }
.symptom svg { width: 21px; height: 21px; flex: none; color: var(--ijt-orange); margin-top: 1px; }
.symptom span { font-size: 15px; line-height: 1.5; color: var(--ink-700); }
.symptom span b { color: var(--ink-900); font-weight: 600; }
@media (max-width: 860px) { .problem { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- numbered example flow ---------- */
.flow { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 52px; align-items: center; }
.flow .aichat { margin: 0; }
.flow__steps { display: flex; flex-direction: column; gap: 22px; }
.flow__step { display: flex; gap: 18px; align-items: flex-start; }
.flow__num { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--ink-900); color: #fff; font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.flow__step:nth-child(2) .flow__num { background: var(--ijt-blue); }
.flow__step:nth-child(3) .flow__num { background: var(--ijt-orange); }
.flow__step h4 { font-size: 17px; font-weight: 700; color: var(--ink-900); margin: 6px 0 5px; }
.flow__step p { font-size: 14.5px; line-height: 1.6; color: var(--ink-500); }
@media (max-width: 880px) { .flow { grid-template-columns: 1fr; gap: 34px; } .flow__media { order: -1; } }

/* ---------- benefit checklist ---------- */
.benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 40px; }
.benefit { display: flex; gap: 15px; align-items: flex-start; }
.benefit__tick { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--orange-100); color: var(--orange-600); display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.benefit__tick svg { width: 17px; height: 17px; }
.benefit p { font-size: 16px; line-height: 1.55; color: var(--ink-700); }
.benefit p b { color: var(--ink-900); font-weight: 600; }
@media (max-width: 760px) { .benefits { grid-template-columns: 1fr; } }

/* ---------- reassurance / note callout ---------- */
.note-callout { display: flex; gap: 18px; align-items: flex-start; background: var(--canvas); border: 1px solid var(--ink-200); border-radius: 16px; padding: 24px 26px; max-width: 880px; }
.note-callout__ic { flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--blue-100); color: var(--blue-600); display: flex; align-items: center; justify-content: center; }
.note-callout__ic svg { width: 23px; height: 23px; }
.note-callout h4 { font-size: 17px; font-weight: 700; color: var(--ink-900); margin-bottom: 8px; }
.note-callout p { font-size: 15px; line-height: 1.65; color: var(--ink-600, var(--ink-700)); }

/* ---------- FAQ accordion (AEO) ---------- */
.faq { max-width: 840px; margin: 0 auto; }
.faq__item { border-bottom: 1px solid var(--ink-200); }
.faq__item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 6px; font-size: 18px; font-weight: 600; color: var(--ink-900); line-height: 1.4; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--orange-700); }
.faq__ic { flex: none; width: 26px; height: 26px; color: var(--ijt-orange); transition: transform .22s cubic-bezier(.4,0,.2,1); }
.faq__item[open] .faq__ic { transform: rotate(45deg); }
.faq__a { padding: 0 6px 26px; }
.faq__a p { font-size: 16px; line-height: 1.72; color: var(--ink-600, var(--ink-700)); max-width: 72ch; }
.faq__a p + p { margin-top: 13px; }
@media (prefers-reduced-motion: no-preference) {
  .faq__item[open] .faq__a { animation: faqIn .26s ease; }
  @keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}

/* ---------- centered dark CTA band ---------- */
.slcta { background: var(--ink-900); color: #fff; text-align: center; position: relative; overflow: hidden; }
.slcta__in { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.slcta__star { width: 72px; height: 72px; padding: 13px; box-sizing: border-box; object-fit: contain; background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-md); margin: 0 auto 26px; }
.slcta h2 { font-size: clamp(30px, 3.6vw, 42px); font-weight: 700; line-height: 1.14; color: #fff; letter-spacing: -0.01em; }
.slcta p { font-size: 18px; color: var(--ink-300); margin-top: 18px; line-height: 1.6; }
.slcta__actions { margin-top: 30px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   MARKETING LEADERS PAGE — reusable persona patterns
   (mirrors the Sales Leaders vocabulary; keyed to DS tokens)
   ------------------------------------------------------------
   • .dashmock / .srcrow / .src   unified-dashboard hero mock
   • .dashcard / .bars            spend-vs-pipeline mini chart
   • .dashkpis / .kpi            KPI tiles
   • .casestudy / .cstats / .cstat  case-study layout + stat callouts
   • .qcard                       light on-surface quote card
   • .arrowlink                   text link + arrow (general)
   ============================================================ */
.srcrow { display: flex; flex-wrap: wrap; gap: 7px; }
.src { font-size: 11.5px; font-weight: 600; color: var(--ink-500); background: var(--canvas); border: 1px solid var(--ink-200); border-radius: var(--r-pill); padding: 5px 11px; }
.src--crm { color: var(--blue-600); border-color: color-mix(in srgb, var(--blue-600) 32%, transparent); background: var(--blue-100); }
.dashcard { border: 1px solid var(--ink-200); border-radius: 14px; padding: 16px; }
.dashcard__h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.dashcard__h b { font-size: 13px; color: var(--ink-900); }
.dashcard__h span { font-size: 11.5px; color: var(--ink-400); }
.bars { display: flex; align-items: flex-end; gap: 14px; height: 108px; }
.barcol { flex: 1; display: flex; flex-direction: column; height: 100%; }
.barcol__pair { flex: 1; display: flex; align-items: flex-end; gap: 4px; }
.barcol__pair i { flex: 1; border-radius: 4px 4px 0 0; }
.barcol .sp { background: var(--ink-200); }
.barcol .pl { background: var(--ijt-orange); }
.barcol em { font-size: 10px; color: var(--ink-400); text-align: center; font-style: normal; margin-top: 7px; }
.dashlegend { display: flex; gap: 16px; margin-top: 14px; }
.dashlegend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-500); }
.dashlegend i { width: 10px; height: 10px; border-radius: 3px; }
.dashkpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kpi { background: var(--canvas); border: 1px solid var(--ink-200); border-radius: 12px; padding: 12px 14px; }
.kpi b { display: block; font-size: 18px; font-weight: 700; color: var(--ink-900); line-height: 1.1; }
.kpi span { font-size: 11px; color: var(--ink-500); }

.casestudy { display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: start; }
.casestudy .prose-col { max-width: none; }
.cstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 30px; }
.cstat { border-top: 3px solid var(--ijt-orange); padding-top: 14px; }
.cstat b { display: block; font-size: 32px; font-weight: 700; color: var(--ink-900); line-height: 1; letter-spacing: -0.02em; }
.cstat span { display: block; font-size: 13px; color: var(--ink-500); margin-top: 9px; line-height: 1.45; }
.qcard { background: #fff; border: 1px solid var(--ink-200); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 34px 32px; }
.qcard__bar { width: 46px; height: 4px; background: var(--ijt-orange); border-radius: 3px; margin-bottom: 22px; }
.qcard blockquote { margin: 0; font-size: 18.5px; line-height: 1.6; color: var(--ink-900); font-weight: 300; }
.qcard__who { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.qcard__who img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; background: var(--ink-200); }
.qcard__name { font-weight: 700; color: var(--ink-900); }
.qcard__role { font-size: 14px; color: var(--ink-500); margin-top: 2px; }
.arrowlink { display: inline-flex; align-items: center; gap: 6px; margin-top: 26px; font-size: 15px; font-weight: 600; color: var(--blue-600); text-decoration: none; }
.arrowlink:hover { color: var(--orange-700); }
.arrowlink svg { width: 17px; height: 17px; transition: transform .18s cubic-bezier(.4,0,.2,1); }
.arrowlink:hover svg { transform: translateX(3px); }
@media (max-width: 880px) {
  .casestudy { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 560px) {
  .dashkpis { grid-template-columns: 1fr; }
  .cstats { grid-template-columns: 1fr; gap: 18px; }
}

/* case-study / article page: 2-up capability grid + hero stat panel */
.capgrid--2 { grid-template-columns: repeat(2, 1fr); max-width: 940px; margin: 0 auto; }
@media (max-width: 760px) { .capgrid--2 { grid-template-columns: 1fr; max-width: 480px; } }
.csstats { background: #fff; border: 1px solid var(--ink-200); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 8px 34px; }
.csstats .cstat { border-top: none; border-bottom: 1px solid var(--ink-200); padding: 26px 0; margin: 0; }
.csstats .cstat:last-child { border-bottom: none; }
.csstats .cstat b { font-size: 40px; }
.csstats .cstat span { font-size: 14px; margin-top: 6px; }

/* surveys/infotap: captive-portal survey mock */
.survq { display: flex; gap: 8px; }
.survq__opt { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 8px; border: 1px solid var(--ink-200); border-radius: 12px; background: #fff; font-size: 13px; font-weight: 600; color: var(--ink-600, var(--ink-700)); cursor: default; }
.survq__opt--sel { border-color: transparent; background: var(--orange-100); color: var(--orange-700); box-shadow: inset 0 0 0 1.5px var(--ijt-orange); }
.survq__emoji { font-size: 17px; line-height: 1; color: var(--ijt-orange); }
.survgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.survgrid__cell { text-align: center; padding: 11px 8px; border: 1px solid var(--ink-200); border-radius: 10px; background: #fff; font-size: 12.5px; font-weight: 600; color: var(--ink-500); }
.survgrid__cell--on { border-color: transparent; background: var(--blue-100); color: var(--blue-700); box-shadow: inset 0 0 0 1.5px var(--blue-400); }

/* contact page */
.contactgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.cinfo { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 18px; }
.cinfo li { display: flex; align-items: flex-start; gap: 15px; }
.cinfo__ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.cinfo__ic svg { width: 21px; height: 21px; }
.cinfo__ic.o { background: var(--orange-100); color: var(--orange-700); }
.cinfo__ic.b { background: var(--blue-100); color: var(--blue-700); }
.cinfo__label { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 3px; }
.cinfo__val { font-size: 16px; font-weight: 500; color: var(--ink-900); text-decoration: none; }
.cinfo__val:hover { color: var(--orange-700); }
.hoursbar { display: flex; align-items: flex-start; gap: 13px; background: var(--canvas); border: 1px solid var(--ink-200); border-radius: 14px; padding: 16px 18px; margin-bottom: 26px; }
.hoursbar__ic { flex: none; width: 34px; height: 34px; border-radius: 9px; background: #fff; border: 1px solid var(--ink-200); display: flex; align-items: center; justify-content: center; color: var(--ijt-orange); }
.hoursbar__ic svg { width: 18px; height: 18px; }
.hoursbar p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-700); }
.cmap { border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--ink-200); }
.cmap iframe { display: block; }
.cform-card { background: #fff; border: 1px solid var(--ink-200); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 34px 32px; }
.cform-card h3 { font-size: 22px; font-weight: 700; color: var(--ink-900); }
.cform-card .field select { font-family: var(--font-sans); font-size: 15px; padding: 12px 14px; border: 1px solid var(--ink-300); border-radius: 10px; outline: none; color: var(--ink-900); background: #fff; -webkit-appearance: none; appearance: none; 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='%23181818' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 38px; }
.cform-card .field select:focus { border-color: var(--ijt-blue); box-shadow: 0 0 0 3px var(--blue-100); }
@media (max-width: 860px) { .contactgrid { grid-template-columns: 1fr; gap: 40px; } }

/* case studies index cards */
.cscard { display: flex; flex-direction: column; }
.cscard__eyebrow { display: inline-block; margin-bottom: 12px; }
.cscard .capcard__link { margin-top: auto; }
.cscard__stat { border-top: 1px solid var(--ink-200); margin-top: 20px; padding-top: 18px; }
.cscard__stat b { display: block; font-size: 34px; font-weight: 700; color: var(--ijt-orange); line-height: 1; letter-spacing: -0.02em; }
.cscard__stat span { display: block; font-size: 13.5px; color: var(--ink-500); margin-top: 8px; line-height: 1.4; }
.cscard__note { font-size: 12.5px; color: var(--ink-400); line-height: 1.5; margin-top: 14px; font-style: italic; }

/* ============================================================
   BLOG LISTING (.blog-*) + BLOG POST (.post-*)
   Same function as the reference pages, rebuilt in IJT tokens.
   ============================================================ */
/* charcoal page header band (listing + post hero share the base) */
.bloghead { position: relative; overflow: hidden; background: linear-gradient(135deg, #202020 0%, var(--ink-900) 62%, #151515 100%); color: #fff; padding: 132px 0 60px; }
.bloghead::before { content: ""; position: absolute; top: -160px; right: -120px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--ijt-orange) 22%, transparent) 0%, transparent 70%); pointer-events: none; }
.bloghead__inner { position: relative; z-index: 1; }
.crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; font-size: 13px; color: rgba(255,255,255,.6); margin-bottom: 18px; }
.crumb a { color: rgba(255,255,255,.82); text-decoration: none; }
.crumb a:hover { color: #fff; }
.crumb [aria-current] { color: var(--ijt-orange); }
.bloghead h1 { font-weight: 700; color: #fff; font-size: clamp(34px, 5vw, 52px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 16px; max-width: 18ch; }
.bloghead__sub { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.82); max-width: 640px; margin: 0; }

/* layout */
.blog-body { padding: 56px 0 88px; }
.blog-layout { display: grid; grid-template-columns: minmax(0,1fr) 332px; gap: 48px; align-items: start; }
.blog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

/* search — sits above the grid, not in the site nav */
.blog-search { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--ink-200); border-radius: var(--r-lg); padding: 10px 10px 10px 18px; margin-bottom: 32px; }
.blog-search svg { width: 20px; height: 20px; color: var(--ink-400); flex-shrink: 0; }
.blog-search input[type="search"] { flex: 1; border: none; outline: none; font-size: 15px; color: var(--ink-900); background: transparent; }
.blog-search input[type="search"]::placeholder { color: var(--ink-400); }
.blog-search .btn { flex-shrink: 0; }
.blog-filter-note { display: flex; align-items: center; gap: 14px; font-size: 14.5px; color: var(--ink-600, var(--ink-700)); margin: 0 0 20px; }
.blog-filter-note a { color: var(--orange-700); font-weight: 600; text-decoration: none; }
.blog-filter-note a:hover { text-decoration: underline; }

/* card */
.blogcard { background: #fff; border: 1px solid var(--ink-200); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s, border-color .18s; }
.blogcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--ijt-orange) 45%, transparent); }
.blogcard__thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--ink-900); }
.blogcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blogcard__thumb-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.45); }
.blogcard__thumb-ph svg { width: 40px; height: 40px; }
.blogcard__thumb[data-cat="Dynamics 365"]    { background: linear-gradient(135deg,#2a2a2a,#c2551f); }
.blogcard__thumb[data-cat="Power BI"]         { background: linear-gradient(135deg,#1c2833,#3090c0); }
.blogcard__thumb[data-cat="AI & Copilot"]     { background: linear-gradient(135deg,#2a1f14,#e2681f); }
.blogcard__thumb[data-cat="Managed Services"] { background: linear-gradient(135deg,#1c2833,#2f6f8f); }
.blogcard__thumb[data-cat="Manufacturing"]    { background: linear-gradient(135deg,#242424,#8f5a2f); }
.blogcard__thumb[data-cat="Data & BI"]        { background: linear-gradient(135deg,#1c2833,#3a5a8c); }
.blogcard__body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.blogpill { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--orange-700); background: var(--orange-100); border: 1px solid color-mix(in srgb, var(--ijt-orange) 28%, transparent); padding: 4px 11px; border-radius: var(--r-pill); margin-bottom: 14px; white-space: nowrap; }
.blogcard__title { font-size: 21px; line-height: 1.25; margin: 0 0 12px; letter-spacing: -.01em; text-wrap: pretty; font-weight: 700; }
.blogcard__title a { color: var(--ink-900); text-decoration: none; }
.blogcard__title a:hover { color: var(--orange-700); }
.blogmeta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 12.5px; color: var(--ink-400); margin: 0 0 12px; }
.blogmeta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-300); }
.blogcard__excerpt { font-size: 14.5px; line-height: 1.6; color: var(--ink-600, var(--ink-700)); margin: 0 0 18px; }
.blogmore { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14px; color: var(--ijt-blue); text-decoration: none; }
.blogmore svg { width: 15px; height: 15px; transition: transform .18s; }
.blogmore:hover svg { transform: translateX(4px); }

/* pagination */
.blog-pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 48px; }
.blog-pager a, .blog-pager span { min-width: 42px; height: 42px; padding: 0 14px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 14.5px; font-weight: 600; border: 1px solid var(--ink-200); background: #fff; color: var(--ink-900); text-decoration: none; transition: border-color .15s, background .15s, color .15s; }
.blog-pager a:hover { border-color: var(--ijt-orange); color: var(--orange-700); }
.blog-pager [aria-current="page"] { background: var(--ink-900); border-color: var(--ink-900); color: #fff; pointer-events: none; }
.blog-pager [aria-disabled="true"] { opacity: .4; pointer-events: none; }
.blog-pager svg { width: 16px; height: 16px; }

/* sidebar */
.blog-aside { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 96px; }
.blogwidget { background: #fff; border: 1px solid var(--ink-200); border-radius: var(--r-lg); padding: 24px; }
.blogwidget h3 { font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--orange-700); margin: 0 0 16px; }
.blogwidget p { font-size: 14px; line-height: 1.65; color: var(--ink-600, var(--ink-700)); margin: 0; }
.blogcats { list-style: none; padding: 0; margin: 0; }
.blogcats li + li { border-top: 1px solid var(--ink-100); }
.blogcats a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; font-size: 14.5px; color: var(--ink-900); font-weight: 500; text-decoration: none; }
.blogcats a:hover { color: var(--orange-700); }
.blogcats .count { font-size: 12px; font-weight: 600; color: var(--ink-400); background: var(--ink-100); border-radius: var(--r-pill); padding: 2px 9px; min-width: 26px; text-align: center; }
.blogcats a:hover .count { background: var(--orange-100); color: var(--orange-700); }
.blogfeat__thumb { position: relative; aspect-ratio: 16/9; border-radius: var(--r-md); overflow: hidden; margin-bottom: 14px; }
.blogfeat h4 { font-size: 17px; line-height: 1.3; margin: 0 0 8px; font-weight: 700; }
.blogfeat h4 a { color: var(--ink-900); text-decoration: none; }
.blogfeat h4 a:hover { color: var(--orange-700); }
.blogfeat__meta { font-size: 12px; color: var(--ink-400); }
.blogwidget--cta { background: linear-gradient(140deg, var(--ink-900), #232323); border: none; }
.blogwidget--cta h3 { color: var(--ijt-orange); }
.blogwidget--cta .bw-lead { font-weight: 600; font-size: 20px; line-height: 1.25; color: #fff; margin: 0 0 8px; }
.blogwidget--cta .bw-sub { font-size: 13.5px; color: rgba(255,255,255,.78); line-height: 1.55; margin: 0 0 18px; }
.blogwidget--cta .btn { width: 100%; }

/* empty state */
.blog-empty { text-align: center; max-width: 460px; margin: 40px auto; padding: 56px 32px; background: #fff; border: 1px solid var(--ink-200); border-radius: var(--r-lg); }
.blog-empty__ic { width: 64px; height: 64px; border-radius: 50%; background: var(--orange-100); color: var(--orange-700); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.blog-empty__ic svg { width: 30px; height: 30px; }
.blog-empty h2 { font-size: 24px; margin: 0 0 10px; }
.blog-empty p { font-size: 15.5px; color: var(--ink-600, var(--ink-700)); line-height: 1.6; margin: 0 0 22px; }

@media (max-width: 1040px) {
  .blog-layout { grid-template-columns: 1fr; gap: 44px; }
  .blog-aside { position: static; flex-direction: row; flex-wrap: wrap; }
  .blogwidget { flex: 1 1 240px; }
}
@media (max-width: 680px) {
  .bloghead { padding: 108px 0 48px; }
  .blog-grid { grid-template-columns: 1fr; gap: 22px; }
  .blog-aside { flex-direction: column; }
}

/* ---- BLOG POST ---- */
.post-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; background: var(--ijt-orange); z-index: 90; transform: scaleX(0); transform-origin: 0 50%; transition: transform .1s linear; }
.post-hero.bloghead { padding: 116px 0 64px; }
.post-hero .hero__grid { padding-top: 0; padding-bottom: 0; align-items: center; }
.post-pill { display: inline-block; white-space: nowrap; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--ijt-orange); padding: 5px 13px; border-radius: var(--r-pill); margin-bottom: 18px; text-decoration: none; }
.post-hero h1 { font-weight: 700; color: #fff; font-size: clamp(30px, 3.7vw, 46px); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 26px; text-wrap: pretty; }
.byline { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; }
.byline__who { display: flex; align-items: center; gap: 12px; }
.byline__av { width: 46px; height: 46px; border-radius: 50%; flex: none; background: var(--ijt-orange); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; overflow: hidden; }
.byline__av img { width: 100%; height: 100%; object-fit: cover; }
.byline__meta strong { display: block; font-weight: 600; font-size: 14.5px; color: #fff; }
.byline__meta span { font-size: 12.5px; color: rgba(255,255,255,.7); }
.byline__dates { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,.72); padding-left: 18px; border-left: 1px solid rgba(255,255,255,.18); }
.byline__dates .dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.4); }
.post-feat { position: relative; width: 100%; aspect-ratio: 16/11; border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, #2a2a2a, var(--ink-900)); border: 1px solid rgba(255,255,255,.14); box-shadow: var(--shadow-lg); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.5); }
.post-feat img { width: 100%; height: 100%; object-fit: cover; }
.post-feat svg { width: 46px; height: 46px; }

.post-wrap { padding: 56px 0 88px; }
.post-grid { display: grid; grid-template-columns: 240px minmax(0,720px) 1fr; gap: 0 48px; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.post-article { grid-column: 2; min-width: 0; }
.post-toc-col { grid-column: 1; }
.post-toc { position: sticky; top: 100px; }
.post-toc__title { font-weight: 700; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-400); margin: 0 0 14px; }
.post-toc ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--ink-200); }
.post-toc a { display: block; padding: 7px 0 7px 16px; margin-left: -2px; border-left: 2px solid transparent; font-size: 13.5px; line-height: 1.4; color: var(--ink-500); text-decoration: none; }
.post-toc a:hover { color: var(--orange-700); }
.post-toc a.is-active { color: var(--ink-900); font-weight: 600; border-left-color: var(--ijt-orange); }
.post-toc-m { display: none; }

.post-content { font-size: 18px; line-height: 1.7; color: var(--ink-800, var(--ink-900)); }
.post-content > p { margin: 0 0 24px; }
.post-content > p:first-of-type { font-size: 21px; line-height: 1.6; color: var(--ink-900); }
.post-content h2 { font-weight: 700; font-size: 28px; line-height: 1.2; color: var(--ink-900); letter-spacing: -.01em; margin: 48px 0 18px; scroll-margin-top: 100px; }
.post-content h3 { font-weight: 600; font-size: 21px; line-height: 1.3; color: var(--ink-900); margin: 36px 0 14px; scroll-margin-top: 100px; }
.post-content a:not(.btn) { color: var(--ijt-blue); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.post-content a:not(.btn):hover { color: var(--orange-700); }
.post-content strong { font-weight: 700; color: var(--ink-900); }
.post-content ul, .post-content ol { margin: 0 0 24px; padding-left: 26px; }
.post-content li { margin-bottom: 10px; padding-left: 4px; }
.post-content ul li::marker { color: var(--ijt-orange); }
.post-content ol li::marker { color: var(--ijt-orange); font-weight: 700; }
.post-content blockquote { margin: 32px 0; padding: 6px 0 6px 26px; border-left: 4px solid var(--ijt-orange); font-weight: 500; font-size: 23px; line-height: 1.42; color: var(--ink-900); letter-spacing: -.01em; }
.post-content blockquote p { margin: 0; }
.post-content figure { margin: 32px 0; }
.post-fig { position: relative; aspect-ratio: 16/9; border-radius: var(--r-md); overflow: hidden; background: linear-gradient(135deg,#1c2833,#3a5a8c); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.45); }
.post-fig img { width: 100%; height: 100%; object-fit: cover; }
.post-fig svg { width: 38px; height: 38px; }
.post-content figcaption { margin-top: 10px; font-size: 13.5px; color: var(--ink-400); line-height: 1.5; text-align: center; }

.post-inlinecta { margin: 40px 0; padding: 28px 30px; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--ink-900), #232323); border: 1px solid color-mix(in srgb, var(--ijt-orange) 40%, transparent); display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.post-inlinecta__body { flex: 1 1 300px; }
.post-inlinecta__body strong { display: block; font-weight: 600; font-size: 21px; color: #fff; line-height: 1.25; margin-bottom: 4px; }
.post-inlinecta__body span { font-size: 14px; color: rgba(255,255,255,.75); }
.post-inlinecta .btn { flex: none; }

.post-footer { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.post-foot-block { padding: 28px 0; border-top: 1px solid var(--ink-200); }
.post-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.post-tags .lbl { font-size: 13px; font-weight: 600; color: var(--ink-400); margin-right: 4px; }
.post-tag { white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--orange-700); background: var(--orange-100); border: 1px solid color-mix(in srgb, var(--ijt-orange) 28%, transparent); padding: 5px 13px; border-radius: var(--r-pill); text-decoration: none; }
.post-tag:hover { background: var(--ijt-orange); color: #fff; }
.post-share { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.post-share .lbl { font-weight: 600; font-size: 16px; color: var(--ink-900); }
.post-share__links { display: flex; gap: 10px; }
.post-share__btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--ink-200); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-900); transition: background .15s, color .15s, border-color .15s; }
.post-share__btn:hover { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }
.post-bio { display: flex; gap: 18px; align-items: flex-start; background: var(--canvas); border: 1px solid var(--ink-200); border-radius: var(--r-lg); padding: 24px 26px; }
.post-bio__av { width: 64px; height: 64px; border-radius: 50%; flex: none; background: var(--ink-900); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 22px; overflow: hidden; }
.post-bio__av img { width: 100%; height: 100%; object-fit: cover; }
.post-bio__body h4 { font-weight: 700; font-size: 17px; color: var(--ink-900); margin: 0 0 2px; }
.post-bio__role { font-size: 13.5px; color: var(--orange-700); font-weight: 600; margin: 0 0 10px; }
.post-bio__body p { font-size: 14.5px; line-height: 1.6; color: var(--ink-600, var(--ink-700)); margin: 0; }

.post-related { background: var(--canvas); }
.post-related__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; max-width: 1040px; margin: 0 auto; }

@media (max-width: 1080px) {
  .post-grid { grid-template-columns: minmax(0,720px); justify-content: center; }
  .post-toc-col { display: none; }
  .post-article { grid-column: 1; }
  .post-toc-m { display: block; margin: 0 auto 32px; max-width: 720px; }
  .post-toc-m details { background: var(--canvas); border: 1px solid var(--ink-200); border-radius: var(--r-md); padding: 4px 18px; }
  .post-toc-m summary { font-weight: 600; font-size: 15px; color: var(--ink-900); padding: 14px 0; cursor: pointer; }
  .post-toc-m ol { list-style: none; padding: 0 0 14px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
  .post-toc-m a { font-size: 14px; color: var(--ink-600, var(--ink-700)); text-decoration: none; }
  .post-related__grid { grid-template-columns: 1fr; max-width: 460px; }
}
@media (max-width: 720px) {
  .post-content { font-size: 17px; }
  .post-content h2 { font-size: 24px; }
  .post-inlinecta { flex-direction: column; align-items: flex-start; }
  .byline__dates { padding-left: 0; border-left: none; }
}

/* ─── Toast notifications ─── */
#ijt-toast { position: fixed; bottom: 24px; right: 24px; z-index: 9900; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.ijt-toast__item { display: flex; align-items: center; gap: 11px; background: var(--ink-900); color: #fff; font-size: 14px; font-weight: 500; padding: 12px 18px; border-radius: 10px; box-shadow: 0 4px 18px rgba(0,0,0,.24); pointer-events: auto; opacity: 0; transform: translateY(10px); transition: opacity .22s, transform .22s; }
.ijt-toast__item.is-visible { opacity: 1; transform: none; }
.ijt-toast__ic { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.ijt-toast__item--success .ijt-toast__ic { background: var(--ijt-orange); }
.ijt-toast__item--error .ijt-toast__ic { background: #dc2626; }
.ijt-toast__ic svg { width: 10px; height: 10px; }