/* =====================================================================
   A&J Computers — page section components (FSE)
   Styles for the reusable patterns/sections emitted into pages by the
   generator. Each section group carries an accent class (aj-accent-*,
   defined in design-tokens.css) so monograms, eyebrows, buttons and
   gradients pick up the right hue per page/section.
   ===================================================================== */

:root { --aj-accent: var(--aj-blue); --aj-accent-hover: var(--aj-blue-deep); --aj-accent-tint: #e9f1f9; }

/* ---- Section shell -------------------------------------------------- */
.aj-section { padding-block: 84px; }
.aj-section--sm { padding-block: 56px; }
.aj-section--soft { background: var(--aj-bg-soft); border-top: 1px solid #eef2f6; }
.aj-section--hero { background: linear-gradient(180deg, var(--aj-bg-hero), #fff); }
.aj-section__inner { max-width: var(--aj-container); margin-inline: auto; }
@media (max-width: 782px){ .aj-section { padding-block: 56px; } }

/* Section heading cluster */
.aj-eyebrow { color: var(--aj-accent); }
.aj-h2 { font-family: var(--aj-font-heading); font-weight: 800; font-size: clamp(28px,3.4vw,38px); line-height: 1.14; letter-spacing: -.01em; color: var(--aj-ink); margin: 0; }
.aj-sec-head { margin-bottom: 44px; }
.aj-sec-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.aj-sec-head--center { text-align: center; max-width: 640px; margin-inline: auto; }
.aj-sec-head__intro { max-width: 400px; font-size: 16px; line-height: 1.6; color: var(--aj-muted); margin: 0; }

/* ---- Grids ---------------------------------------------------------- */
.aj-grid-2, .aj-grid-3, .aj-grid-4 { display: grid; gap: 22px; }
.aj-grid-2 { grid-template-columns: repeat(2,1fr); }
.aj-grid-3 { grid-template-columns: repeat(3,1fr); }
.aj-grid-4 { grid-template-columns: repeat(4,1fr); gap: 24px; }
@media (max-width: 980px){ .aj-grid-3,.aj-grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .aj-grid-2,.aj-grid-3,.aj-grid-4 { grid-template-columns: 1fr; } }

/* ---- Monogram tile -------------------------------------------------- */
.aj-mono { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 11px; background: var(--aj-accent-tint); color: var(--aj-accent); font-family: var(--aj-font-heading); font-weight: 800; font-size: 13px; letter-spacing: .02em; margin: 0; flex: none; }

/* ---- Feature card --------------------------------------------------- */
.aj-feature-card { background: #fff; border: 1px solid var(--aj-border); border-radius: 14px; padding: 26px; }
.aj-feature-card .aj-mono { margin-bottom: 16px; }
.aj-feature-card h3 { font-family: var(--aj-font-heading); font-weight: 700; font-size: 18px; color: var(--aj-ink); margin: 0 0 8px; }
.aj-feature-card p { font-size: 14.5px; line-height: 1.55; color: var(--aj-body-soft); margin: 0; }

/* ---- Home hero ------------------------------------------------------ */
.aj-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.aj-hero__media { position: relative; }
@media (max-width: 900px){ .aj-hero__grid { grid-template-columns: 1fr; gap: 36px; } }
.aj-hero h1 { font-family: var(--aj-font-display); font-weight: 800; font-size: clamp(34px,5vw,50px); line-height: 1.18; letter-spacing: -.01em; color: var(--aj-ink); margin: 0 0 24px; }
.aj-hero__lead { font-size: clamp(16px,1.5vw,19px); line-height: 1.6; color: var(--aj-body); max-width: 540px; margin: 0 0 30px; }
.aj-hero__trust { display: flex; align-items: center; gap: 12px; color: var(--aj-muted); font-size: 14px; margin-top: 26px; }
.aj-hero__trust strong { font-family: var(--aj-font-heading); font-weight: 800; color: var(--aj-blue); }
.aj-hero__trust .dot { width: 4px; height: 4px; border-radius: 50%; background: #c4ccd6; display: inline-block; }

/* Photo placeholder + floating cards */
.aj-photo { position: relative; border-radius: 18px; border: 1px solid var(--aj-border); aspect-ratio: 4 / 3.1; display: flex; align-items: center; justify-content: center; background-color: var(--aj-bg-soft); background-image: repeating-linear-gradient(135deg, rgba(0,66,128,.05) 0 14px, transparent 14px 28px); box-shadow: 0 24px 60px -28px rgba(0,48,92,.32); overflow: hidden; }
.aj-photo--accent { background-image: repeating-linear-gradient(135deg, var(--aj-accent-tint) 0 14px, transparent 14px 28px); }
.aj-photo__label { font: 13px/1.5 ui-monospace, Menlo, monospace; color: var(--aj-muted); background: rgba(255,255,255,.72); padding: 8px 14px; border-radius: 8px; }
.aj-float { position: absolute; background: #fff; border: 1px solid var(--aj-border); border-radius: 14px; padding: 16px 20px; box-shadow: 0 18px 40px -18px rgba(0,48,92,.4); display: flex; align-items: center; gap: 14px; }
.aj-float--bl { left: -22px; bottom: -26px; }
.aj-float__icon { width: 44px; height: 44px; border-radius: 10px; background: var(--aj-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--aj-font-heading); font-weight: 800; font-size: 13px; flex: none; }
.aj-float__t { font-family: var(--aj-font-heading); font-weight: 700; color: var(--aj-ink); font-size: 15px; line-height: 1.25; }
.aj-float__s { font-size: 13px; color: var(--aj-muted); }
.aj-badge-1989 { position: absolute; right: -16px; top: -16px; background: var(--aj-red); color: #fff; border-radius: 12px; padding: 11px 16px; text-align: center; line-height: 1; box-shadow: 0 14px 30px -14px rgba(122,22,19,.6); }
.aj-badge-1989 strong { display: block; font-family: var(--aj-font-display); font-weight: 800; font-size: 22px; }
.aj-badge-1989 span { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .85; margin-top: 4px; }
@media (max-width: 900px){ .aj-float--bl{ left: 12px; bottom: 12px; } }

/* ---- Service hero (inner pages) ------------------------------------- */
.aj-breadcrumb { font-size: 13.5px; color: var(--aj-muted-2); margin-bottom: 26px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.aj-breadcrumb a { color: var(--aj-muted-2); }
.aj-breadcrumb a:hover { color: var(--aj-accent); }
.aj-breadcrumb .cur { color: var(--aj-body); font-weight: 600; }
.aj-shero h1 { font-family: var(--aj-font-display); font-weight: 800; font-size: clamp(30px,4.4vw,42px); line-height: 1.2; letter-spacing: -.01em; color: var(--aj-ink); margin: 0 0 22px; }
.aj-shero__lead { font-size: clamp(16px,1.5vw,18px); line-height: 1.6; color: var(--aj-body); max-width: 520px; margin: 0 0 28px; }

/* ---- Buttons (accent-aware) ----------------------------------------- */
.aj-btns { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.aj-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--aj-font-body); font-weight: 600; font-size: 16px; line-height: 1; padding: 14px 26px; border-radius: 9px; border: 1.5px solid transparent; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.aj-btn--accent { background: var(--aj-accent); color: #fff; }
.aj-btn--accent:hover { background: var(--aj-accent-hover); color: #fff; }
.aj-btn--red { background: var(--aj-red); color: #fff; }
.aj-btn--red:hover { background: var(--aj-red-hover); color: #fff; }
.aj-btn--ghost { background: #fff; color: var(--aj-accent); border-color: color-mix(in srgb, var(--aj-accent) 26%, #fff); }
.aj-btn--ghost:hover { border-color: var(--aj-accent); }
.aj-btn--white { background: #fff; color: var(--aj-accent); }
.aj-btn--white:hover { background: #f3f6fa; }
.aj-btn--on-dark { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25); }
.aj-btn--on-dark:hover { background: rgba(255,255,255,.2); }

/* ---- Service cards (home 9-grid) ------------------------------------ */
.aj-scard { text-align: left; display: flex; flex-direction: column; gap: 16px; background: #fff; border: 1px solid var(--aj-border); border-radius: 16px; padding: 28px; transition: border-color .18s, box-shadow .18s, transform .18s; text-decoration: none; }
.aj-scard:hover { border-color: var(--aj-accent); box-shadow: 0 16px 40px -22px rgba(0,48,92,.4); transform: translateY(-3px); }
.aj-scard h3 { font-family: var(--aj-font-heading); font-weight: 700; font-size: 20px; color: var(--aj-ink); margin: 0 0 8px; }
.aj-scard p { font-size: 15px; line-height: 1.55; color: var(--aj-body-soft); margin: 0; }
.aj-scard__more { margin-top: auto; color: var(--aj-accent); font-weight: 600; font-size: 14.5px; }

/* ---- Vendor strip --------------------------------------------------- */
.aj-vendors { border-top: 1px solid #eef2f6; border-bottom: 1px solid #eef2f6; }
.aj-vendors__row { display: flex; align-items: center; gap: 38px; flex-wrap: wrap; padding-block: 26px; }
.aj-vendors__label { font-family: var(--aj-font-heading); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--aj-faint); white-space: nowrap; margin: 0; }
.aj-vendors__list { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; }
.aj-vendors__list span { font-family: var(--aj-font-heading); font-weight: 700; font-size: 16px; color: #aeb8c4; }

/* ---- Why band (deep blue) ------------------------------------------- */
.aj-why { background: var(--aj-blue-deep); color: #fff; }
.aj-why .aj-eyebrow { color: #7fb0e0; }
.aj-why h2 { color: #fff; max-width: 600px; }
.aj-why__col { border-top: 2px solid rgba(127,176,224,.4); padding-top: 22px; }
.aj-why__col h3 { font-family: var(--aj-font-heading); font-weight: 700; font-size: 21px; color: #fff; margin: 0 0 12px; }
.aj-why__col p { font-size: 15.5px; line-height: 1.6; color: #bcd0e6; margin: 0; }

/* ---- Stats ---------------------------------------------------------- */
.aj-stat { text-align: center; }
.aj-stat__num { font-family: var(--aj-font-display); font-weight: 800; font-size: clamp(30px,4vw,40px); color: var(--aj-blue); line-height: 1; }
.aj-stat__label { font-size: 14px; color: var(--aj-muted); margin-top: 8px; font-weight: 500; }

/* ---- AI band (dark indigo) + tiles ---------------------------------- */
.aj-aiband { background: linear-gradient(125deg,#0d1b2a 0%,#10204a 55%,#1b1f52 100%); border-radius: 22px; padding: clamp(32px,5vw,52px) clamp(28px,5vw,56px); color: #fff; display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: center; }
@media (max-width: 900px){ .aj-aiband { grid-template-columns: 1fr; gap: 28px; } }
.aj-aiband h2 { color: #fff; font-size: clamp(26px,3vw,33px); }
.aj-aiband p { font-size: 16.5px; line-height: 1.6; color: #bccadd; max-width: 480px; }
.aj-aiband .aj-eyebrow { color: #a9a2e6; }
.aj-pillnew { background: #5b4ea8; color: #fff; padding: 3px 9px; border-radius: 5px; letter-spacing: .08em; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.aj-aitiles { display: flex; flex-direction: column; gap: 11px; }
.aj-aitile { display: flex; align-items: center; gap: 13px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 11px; padding: 13px 16px; }
.aj-aitile span.t { width: 34px; height: 34px; border-radius: 8px; background: #5b4ea8; color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--aj-font-heading); font-weight: 800; font-size: 11px; flex: none; }
.aj-aitile span.l { font-family: var(--aj-font-heading); font-weight: 600; font-size: 15px; color: #e7ecf5; }

/* ---- CTA band ------------------------------------------------------- */
.aj-cta { background: linear-gradient(120deg, var(--aj-accent), var(--aj-accent-hover)); border-radius: 22px; padding: clamp(36px,5vw,58px); display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap; color: #fff; }
.aj-cta h2 { font-family: var(--aj-font-display); font-weight: 800; font-size: clamp(26px,3vw,34px); color: #fff; margin: 0; letter-spacing: -.01em; max-width: 540px; }
.aj-cta p { font-size: 16px; color: rgba(255,255,255,.82); margin: 10px 0 0; max-width: 480px; }

/* ---- Process steps -------------------------------------------------- */
.aj-2col { display: grid; grid-template-columns: .9fr 1.1fr; gap: 54px; align-items: center; }
@media (max-width: 900px){ .aj-2col { grid-template-columns: 1fr; gap: 32px; } }
.aj-steps { display: flex; flex-direction: column; gap: 14px; }
.aj-step { display: flex; gap: 18px; align-items: flex-start; background: #fff; border: 1px solid var(--aj-border); border-radius: 14px; padding: 22px 24px; }
.aj-step__n { flex: none; width: 38px; height: 38px; border-radius: 9px; background: var(--aj-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--aj-font-heading); font-weight: 800; font-size: 15px; }
.aj-step h3 { font-family: var(--aj-font-heading); font-weight: 700; font-size: 17.5px; color: var(--aj-ink); margin: 0 0 5px; }
.aj-step p { font-size: 14.5px; line-height: 1.5; color: var(--aj-body-soft); margin: 0; }
/* numbered cards (3-col) */
.aj-stepcard { background: #fff; border: 1px solid var(--aj-border); border-radius: 16px; padding: 30px; }
.aj-stepcard .aj-step__n { margin-bottom: 18px; border-radius: 10px; width: 42px; height: 42px; font-size: 16px; }
.aj-stepcard h3 { font-family: var(--aj-font-heading); font-weight: 700; font-size: 19px; color: var(--aj-ink); margin: 0 0 8px; }
.aj-stepcard p { font-size: 15px; line-height: 1.55; color: var(--aj-body-soft); margin: 0; }

/* ---- Differentiator grid (2x2) -------------------------------------- */
.aj-diff { display: flex; gap: 18px; align-items: flex-start; background: #fff; border: 1px solid var(--aj-border); border-radius: 16px; padding: 26px 28px; }
.aj-diff__dot { flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--aj-accent); margin-top: 7px; }
.aj-diff h3 { font-family: var(--aj-font-heading); font-weight: 700; font-size: 19px; line-height: 1.25; color: var(--aj-ink); margin: 0 0 8px; }
.aj-diff p { font-size: 15px; line-height: 1.55; color: var(--aj-body-soft); margin: 0; }

/* ---- Two plans (break/fix vs managed) ------------------------------- */
.aj-plan { background: #fff; border: 1px solid var(--aj-border); border-radius: 18px; padding: 34px; }
.aj-plan--dark { background: linear-gradient(160deg, var(--aj-blue), var(--aj-blue-deep)); color: #fff; position: relative; overflow: hidden; border: none; }
.aj-plan__name { font-family: var(--aj-font-heading); font-weight: 700; font-size: 22px; color: var(--aj-ink); margin: 0 0 6px; }
.aj-plan--dark .aj-plan__name { color: #fff; }
.aj-plan__sub { font-size: 15px; color: var(--aj-muted); margin: 0 0 22px; }
.aj-plan--dark .aj-plan__sub { color: #bcd0e6; }
.aj-plan__badge { position: absolute; top: 20px; right: 22px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--aj-red); color: #fff; padding: 5px 11px; border-radius: 6px; }
.aj-plan ul { list-style: none; margin: 0; padding: 0; }
.aj-plan li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-top: 1px solid #eef2f6; font-size: 15px; color: var(--aj-body); }
.aj-plan li::before { content: "›"; color: var(--aj-blue); font-weight: 800; }
.aj-plan--dark li { border-top-color: rgba(255,255,255,.14); color: #e7eef6; }
.aj-plan--dark li::before { color: #7fb0e0; }

/* ---- Dark feature grid (3CX features on blue) ----------------------- */
.aj-darkfeat { background: var(--aj-blue-deep); color: #fff; }
.aj-darkfeat .aj-eyebrow { color: #7fb0e0; }
.aj-darkfeat h2 { color: #fff; }
.aj-darkfeat__card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 22px; }
.aj-darkfeat__card h3 { font-family: var(--aj-font-heading); font-weight: 700; font-size: 17px; color: #fff; margin: 0 0 7px; }
.aj-darkfeat__card p { font-size: 14px; line-height: 1.55; color: #bcd0e6; margin: 0; }
.aj-darkfeat__note { margin-top: 40px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; color: #7fb0e0; font-size: 14px; }
.aj-darkfeat__note .lbl { font-family: var(--aj-font-heading); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.aj-darkfeat__note .v { color: #cdddf0; font-weight: 600; }

/* ---- AI dark hero + tools strip ------------------------------------- */
.aj-hero--ai { background: linear-gradient(150deg,#0d1b2a 0%,#10204a 55%,#1b1f52 100%); color: #fff; }
.aj-hero--ai h1 { color: #fff; }
.aj-hero--ai .aj-shero__lead { color: #bccadd; }
.aj-hero--ai .aj-breadcrumb { color: #8ea2bf; }
.aj-hero--ai .aj-breadcrumb a { color: #8ea2bf; }
.aj-hero--ai .aj-eyebrow { color: #a9a2e6; }
.aj-toolsstrip { background: var(--aj-navy); color: #fff; }
.aj-toolsstrip__row { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; padding-block: 32px; }
.aj-toolsstrip__label { font-family: var(--aj-font-heading); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8ea2bf; white-space: nowrap; margin: 0; }
.aj-toolsstrip__pills { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.aj-toolsstrip__pills span { font-family: var(--aj-font-heading); font-weight: 700; font-size: 15px; color: #dbe3ef; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); padding: 8px 16px; border-radius: 999px; }
.aj-aiprompt { background: linear-gradient(150deg,#1b1f52,#10204a); border-radius: 16px; padding: 28px; color: #fff; display: flex; flex-direction: column; justify-content: center; }
.aj-aiprompt h3 { font-family: var(--aj-font-heading); font-weight: 700; font-size: 19px; margin: 0 0 10px; color: #fff; }
.aj-aiprompt p { font-size: 15px; line-height: 1.55; color: #bccadd; margin: 0 0 18px; }

/* ---- 3-col "why" (top border accent) -------------------------------- */
.aj-whycol { border-top: 2px solid var(--aj-accent-tint); padding-top: 22px; }
.aj-whycol h3 { font-family: var(--aj-font-heading); font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--aj-ink); margin: 0 0 12px; }
.aj-whycol p { font-size: 15.5px; line-height: 1.6; color: var(--aj-body-soft); margin: 0; }

/* ---- Audience chips (HIPAA) ----------------------------------------- */
.aj-chips { display: flex; gap: 9px; flex-wrap: wrap; margin: 0 0 28px; }
.aj-chips span { font-size: 13px; font-weight: 600; color: var(--aj-accent); background: var(--aj-accent-tint); border: 1px solid color-mix(in srgb, var(--aj-accent) 22%, #fff); padding: 6px 13px; border-radius: 999px; }

/* ---- Web apps cards ------------------------------------------------- */
.aj-webapp { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--aj-border); border-radius: 16px; overflow: hidden; }
.aj-webapp__img { aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #eef2f6; background-color: var(--aj-bg-soft); background-image: repeating-linear-gradient(135deg, rgba(0,66,128,.05) 0 12px, transparent 12px 24px); }
.aj-webapp__img span { font: 11px/1.4 ui-monospace, Menlo, monospace; color: var(--aj-muted); background: rgba(255,255,255,.78); padding: 5px 10px; border-radius: 6px; }
.aj-webapp__body { padding: 22px 24px 26px; }
.aj-webapp__tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--aj-accent); background: var(--aj-accent-tint); padding: 4px 10px; border-radius: 6px; margin-bottom: 12px; }
.aj-webapp h3 { font-family: var(--aj-font-heading); font-weight: 700; font-size: 19px; line-height: 1.25; color: var(--aj-ink); margin: 0 0 8px; }
.aj-webapp p { font-size: 14.5px; line-height: 1.55; color: var(--aj-body-soft); margin: 0; }
.aj-note { font-size: 13px; color: var(--aj-faint); margin: 22px 0 0; font-style: italic; }

/* ---- Blog teaser cards (home) --------------------------------------- */
.aj-bcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--aj-border); border-radius: 16px; overflow: hidden; text-decoration: none; transition: box-shadow .18s, transform .18s; }
.aj-bcard:hover { box-shadow: 0 18px 44px -24px rgba(0,48,92,.4); transform: translateY(-3px); }
.aj-bcard__img { aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #eef2f6; background-color: var(--aj-bg-soft); background-image: repeating-linear-gradient(135deg, rgba(0,66,128,.05) 0 12px, transparent 12px 24px); }
.aj-bcard__img span { font: 11px/1.4 ui-monospace, Menlo, monospace; color: var(--aj-muted); background: rgba(255,255,255,.75); padding: 5px 10px; border-radius: 6px; }
.aj-bcard__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.aj-bcard h3 { font-family: var(--aj-font-heading); font-weight: 700; font-size: 18.5px; line-height: 1.25; color: var(--aj-ink); margin: 0; }
.aj-bcard__meta { margin-top: auto; font-size: 13px; color: var(--aj-muted-2); display: flex; gap: 10px; align-items: center; }

/* ---- Contact -------------------------------------------------------- */
.aj-contact-grid { display: grid; grid-template-columns: 1.3fr .8fr; gap: 48px; align-items: start; }
@media (max-width: 900px){ .aj-contact-grid { grid-template-columns: 1fr; gap: 32px; } }
.aj-infocard { border: 1px solid var(--aj-border); border-radius: 16px; padding: 8px 26px; }
.aj-info { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-top: 1px solid #eef2f6; }
.aj-infocard .aj-info:first-child { border-top: none; }
.aj-info__icon { flex: none; width: 42px; height: 42px; border-radius: 10px; background: var(--aj-accent-tint); color: var(--aj-accent); display: flex; align-items: center; justify-content: center; font-family: var(--aj-font-heading); font-weight: 800; font-size: 12px; }
.aj-info__label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--aj-faint); margin-bottom: 3px; }
.aj-info__value { font-size: 16px; font-weight: 600; color: var(--aj-ink); }
.aj-info__sub { font-size: 13.5px; color: var(--aj-muted); }
.aj-map { border: 1px solid var(--aj-border); border-radius: 16px; overflow: hidden; margin-top: 18px; }
.aj-map__inner { aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; background-color: var(--aj-bg-soft); background-image: repeating-linear-gradient(135deg, rgba(0,66,128,.05) 0 14px, transparent 14px 28px); }
.aj-map__inner span { font: 12px/1.4 ui-monospace, Menlo, monospace; color: var(--aj-muted); background: rgba(255,255,255,.78); padding: 6px 12px; border-radius: 7px; }
.aj-contact-side { display: flex; flex-direction: column; gap: 18px; }

/* ---- Purple accent (Cloud / M365 card) ------------------------------ */
.aj-accent-purple { --aj-accent: #6b3aa0; --aj-accent-hover: #5a2f88; --aj-accent-tint: #f1ebf8; }

/* ---- CTA AI dark variant -------------------------------------------- */
.aj-cta--ai { background: linear-gradient(120deg,#1b1f52,#10204a); }
.aj-cta__txt { min-width: 0; }

/* ---- AI band text cell ---------------------------------------------- */
.aj-aiband__txt { position: relative; }
.aj-aiband__txt .aj-btn { margin-top: 6px; }

/* ---- Contact form (native, styled to match prototype) --------------- */
.aj-contact-form { border: 1px solid var(--aj-border); border-radius: 18px; padding: 38px; box-shadow: 0 18px 50px -34px rgba(0,48,92,.4); background: #fff; }
.aj-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
@media (max-width: 560px){ .aj-form-row { grid-template-columns: 1fr; } }
.aj-field { display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--aj-ink); margin-bottom: 18px; }
.aj-form-row .aj-field { margin-bottom: 0; }
.aj-field input, .aj-field select, .aj-field textarea { font-family: var(--aj-font-body); font-size: 15px; color: var(--aj-ink); border: 1.5px solid #dbe3ec; border-radius: 10px; padding: 12px 14px; outline: none; background: #fff; width: 100%; transition: border-color .15s; }
.aj-field textarea { resize: vertical; min-height: 130px; }
.aj-field input:focus, .aj-field select:focus, .aj-field textarea:focus { border-color: var(--aj-accent); }
.aj-form-submit { background: var(--aj-red); color: #fff; font-weight: 600; font-size: 16px; padding: 15px 30px; border-radius: 10px; width: 100%; border: none; cursor: pointer; transition: background-color .15s; }
.aj-form-submit:hover { background: var(--aj-red-hover); }
.aj-form-fine { font-size: 12.5px; color: var(--aj-faint); text-align: center; margin: 14px 0 0; }
.aj-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aj-form-note { border-radius: 10px; padding: 14px 16px; font-size: 14.5px; margin-bottom: 20px; }
.aj-form-note--ok { background: var(--aj-green-tint); color: var(--aj-green); border: 1px solid #bfe0d3; }
.aj-form-note--err { background: var(--aj-cat-cyber-bg); color: var(--aj-red); border: 1px solid #e3c4c2; }

/* =====================================================================
   Blog (Themer Archive + Singular equivalents)
   ===================================================================== */
.aj-blog-hero h1 { font-family: var(--aj-font-display); font-weight: 800; font-size: clamp(32px,4.6vw,42px); line-height: 1.2; letter-spacing: -.01em; color: var(--aj-ink); margin: 0 0 16px; }
.aj-blog-hero p { font-size: 18px; line-height: 1.6; color: var(--aj-body); max-width: 560px; margin: 0; }

/* Filter pills + search bar */
.aj-blogbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-block: 18px; border-bottom: 1px solid #eef2f6; }
.aj-blogbar__pills { display: flex; gap: 10px; flex-wrap: wrap; }
.aj-pilllink { font-family: var(--aj-font-body); font-size: 14.5px; font-weight: 600; padding: 9px 18px; border-radius: 999px; border: 1.5px solid #dbe3ec; background: #fff; color: var(--aj-body); text-decoration: none; transition: border-color .15s, color .15s; }
.aj-pilllink:hover, .aj-pilllink.is-active { border-color: var(--aj-blue); color: var(--aj-blue); }
.aj-pilllink.is-active { background: var(--aj-blue); color: #fff; }
.aj-blogbar .wp-block-search__inside-wrapper { border: 1.5px solid #dbe3ec; border-radius: 999px; padding: 2px 2px 2px 16px; }
.aj-blogbar .wp-block-search__input { border: none; background: transparent; }

/* Featured post (horizontal) */
.aj-featured .wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.aj-featured li { border: 1px solid var(--aj-border); border-radius: 18px; overflow: hidden; display: grid; grid-template-columns: 1.15fr 1fr; }
@media (max-width: 800px){ .aj-featured li { grid-template-columns: 1fr; } }
.aj-featured .wp-block-post-featured-image { margin: 0; height: 100%; min-height: 300px; }
.aj-featured .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.aj-featured__body { padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; }
.aj-featured__body .wp-block-post-title { font-family: var(--aj-font-heading); font-weight: 800; font-size: clamp(22px,2.4vw,30px); line-height: 1.16; letter-spacing: -.01em; margin: 8px 0 14px; }
.aj-featured__body .wp-block-post-title a { color: var(--aj-ink); }
.aj-featured__body .wp-block-post-excerpt { font-size: 16px; line-height: 1.6; color: var(--aj-body-soft); }

/* Post grid (archive + blog index) */
.aj-postgrid { list-style: none; margin: 0; padding: 0; gap: 24px !important; }
.aj-postgrid > li { background: #fff; border: 1px solid var(--aj-border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.aj-postgrid .wp-block-post-featured-image { margin: 0; aspect-ratio: 16/9; }
.aj-postgrid .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.aj-postgrid .aj-postcard__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.aj-postgrid .wp-block-post-title { font-family: var(--aj-font-heading); font-weight: 700; font-size: 18.5px; line-height: 1.25; margin: 0; }
.aj-postgrid .wp-block-post-title a { color: var(--aj-ink); }
.aj-postgrid .wp-block-post-date { font-size: 13px; color: var(--aj-muted-2); margin-top: auto; }
.aj-postgrid .wp-block-post-terms { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.aj-postgrid .wp-block-post-terms a { color: var(--aj-blue); text-decoration: none; }

/* Pagination */
.aj-pagination { justify-content: center; gap: 8px; margin-top: 40px; }
.aj-pagination .wp-block-query-pagination-numbers a, .aj-pagination .wp-block-query-pagination-numbers .current,
.aj-pagination .wp-block-query-pagination-previous, .aj-pagination .wp-block-query-pagination-next { border: 1.5px solid #dbe3ec; border-radius: 9px; padding: 8px 14px; color: var(--aj-body); text-decoration: none; font-weight: 600; }
.aj-pagination .current { background: var(--aj-blue); color: #fff; border-color: var(--aj-blue); }

/* Single post */
.aj-article { display: grid; grid-template-columns: minmax(0,1fr) 312px; gap: 54px; align-items: start; }
@media (max-width: 900px){ .aj-article { grid-template-columns: 1fr; } }
.aj-article__body { font-size: 17.5px; line-height: 1.75; color: #374150; }
.aj-article__body p { margin: 0 0 22px; }
.aj-article__body h2 { font-family: var(--aj-font-heading); font-weight: 800; font-size: 25px; line-height: 1.2; color: var(--aj-ink); margin: 8px 0 16px; letter-spacing: -.01em; }
.aj-article__body h3 { font-family: var(--aj-font-heading); font-weight: 700; font-size: 20px; color: var(--aj-ink); margin: 6px 0 12px; }
.aj-article__body ul, .aj-article__body ol { margin: 0 0 22px; padding-left: 22px; }
.aj-article__body blockquote { border-left: 4px solid var(--aj-red); background: #faf4f4; border-radius: 0 12px 12px 0; padding: 18px 24px; margin: 0 0 26px; font-style: italic; color: var(--aj-ink); font-weight: 500; }
.aj-aside { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 22px; }
.aj-aside__card { border: 1px solid var(--aj-border); border-radius: 16px; padding: 22px; }
.aj-aside__h { font-family: var(--aj-font-heading); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--aj-red); margin: 0 0 14px; }
.aj-aside__card .wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.aj-aside__card .wp-block-post-template li { padding: 12px 0; border-top: 1px solid #eef2f6; }
.aj-aside__card .wp-block-post-template li:first-child { border-top: none; padding-top: 0; }
.aj-aside__card .wp-block-post-title { font-family: var(--aj-font-heading); font-weight: 700; font-size: 14px; line-height: 1.3; margin: 0; }
.aj-aside__card .wp-block-post-title a { color: var(--aj-ink); }
.aj-aside__cta { border-radius: 16px; padding: 24px; background: linear-gradient(160deg,#0d1b2a,#00305c); color: #fff; }
.aj-aside__cta h3 { font-family: var(--aj-font-heading); font-weight: 700; font-size: 18px; margin: 0 0 8px; color: #fff; }
.aj-aside__cta p { font-size: 14px; line-height: 1.55; color: #bcd0e6; margin: 0 0 16px; }
.aj-article__head .wp-block-post-title { font-family: var(--aj-font-display); font-weight: 800; font-size: clamp(28px,3.6vw,38px); line-height: 1.22; letter-spacing: -.01em; color: var(--aj-ink); margin: 16px 0 18px; }
.aj-article__meta { display: flex; align-items: center; gap: 14px; font-size: 14.5px; color: var(--aj-muted); flex-wrap: wrap; }
.aj-article__meta .wp-block-post-author__name, .aj-article__meta a { color: var(--aj-ink); font-weight: 600; }

/* WP's constrained layout adds margin-inline:auto !important to children, which
   centers our max-width hero leads. Force left-align in these single-column heroes. */
.aj-blog-hero > .aj-section__inner > *,
.aj-article__head > .aj-section__inner > *,
.aj-section--hero > .aj-section__inner > .aj-shero__lead { margin-left: 0 !important; margin-right: 0 !important; }

/* Red eyebrow on blue-accent heroes (home, Concierge, 3CX) per the prototype. */
.aj-eyebrow--red { color: var(--aj-red); }

/* Related list (sidebar) + grid */
.aj-related-list { display: flex; flex-direction: column; }
.aj-related-item { display: flex; gap: 13px; align-items: flex-start; padding: 12px 0; border-top: 1px solid #eef2f6; text-decoration: none; }
.aj-related-list .aj-related-item:first-child { border-top: none; padding-top: 0; }
.aj-related-item:hover { opacity: .75; }
.aj-related-thumb { flex: none; width: 62px; height: 48px; border-radius: 8px; overflow: hidden; background: var(--aj-bg-soft); border: 1px solid #eef2f6; }
.aj-related-thumb img { width: 100%; height: 100%; object-fit: cover; }
.aj-related-title { font-family: var(--aj-font-heading); font-weight: 700; font-size: 14px; line-height: 1.3; color: var(--aj-ink); }
.aj-aside__card .wp-block-categories { list-style: none; margin: 0; padding: 0; }
.aj-aside__card .wp-block-categories li { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid #eef2f6; font-size: 14.5px; }
.aj-aside__card .wp-block-categories li:first-child { border-top: none; }
.aj-aside__card .wp-block-categories a { color: var(--aj-body); text-decoration: none; font-weight: 500; }
.aj-aside__card .wp-block-categories a:hover { color: var(--aj-blue); }