/* ==========================================================================
   BLUELARK — SERVICE PAGE TEMPLATE
   One stylesheet, applied to every /services/* page.

   Built on the tokens of the Bluelark design system used by the platform
   pages (Salesforce / HubSpot / Odoo), so the service pages read as the same
   site: same palette, same two typefaces, same radii, same 120px section
   rhythm, same pill buttons, same gradient CtaBand, same navy footer.

   WHERE A SERVICE PAGE DELIBERATELY DIFFERS FROM A PLATFORM PAGE
   1. Hero ground is light (--grey-050), not a full-bleed gradient. The
      gradient appears as a panel inside the hero instead — the inverse of
      the platform hero. Platform pages keep the loud brand moment.
   2. Service pages carry a sticky in-page jump nav and a breadcrumb; they
      are long, scannable, SEO-facing documents.
   3. Service pages add components the platform pages never need: comparison
      matrix, integration map, verdict block, scope checklist, next-steps row.
   Everything else is shared on purpose.

   No new colour, font, radius or shadow is introduced below. Every value
   resolves to a token declared in :root.
   ========================================================================== */

/* ==========================================================================
   0 · GLOBAL — the only two rules that leave the .bl-service wrapper.
   Set --bl-header-h to the height of YOUR theme's sticky header so that
   in-page anchors (#problem, #faq …) do not land under it.
   ========================================================================== */
:root{
  /* Height of Bridge's sticky header. Bridge's "scrolled" header is usually
     60px, 70px with a larger logo. Set 0 if the header is not sticky on
     these pages. Only affects where in-page anchors land. */
  --bl-header-h:60px;
  --bl-jump-h:52px;     /* this template's own sticky jump nav */
}
html{scroll-padding-top:calc(var(--bl-header-h) + var(--bl-jump-h) + 16px)}

/* ==========================================================================
   1 · TOKENS  (verbatim from the Bluelark design system)
   ========================================================================== */
.bl-service{
  /* Primary */
  --blue-600:#2940E7;          /* Bluelark Blue */
  --blue-400:#00A9FF;          /* Sky Blue */
  --blue-900:#000084;          /* Deep Blue */

  /* Accent */
  --cyan-400:#2FD8E8;
  --peach-300:#FFC0A1;
  --slate-500:#6E747D;
  --ink-900:#151D29;

  /* Background */
  --white:#FFFFFF;
  --grey-100:#EBEEF0;

  /* Derived neutrals */
  --grey-050:#F6F8F9;
  --grey-200:#DCE1E6;
  --grey-300:#C3CAD2;
  --grey-700:#3D4652;

  /* Derived blues */
  --blue-050:#EEF0FE;
  --blue-100:#D7DCFB;
  --blue-700:#1F33C4;
  --blue-800:#16269B;
  --sky-050:#E5F5FF;
  --sky-600:#0089D1;

  /* Semantic */
  --text-heading:var(--ink-900);
  --text-body:var(--grey-700);
  --text-muted:var(--slate-500);
  --text-on-dark:var(--white);
  --text-on-dark-muted:rgba(255,255,255,.72);
  --text-link:var(--blue-600);
  --text-link-hover:var(--blue-900);

  --surface-page:var(--white);
  --surface-muted:var(--grey-100);
  --surface-subtle:var(--grey-050);
  --surface-card:var(--white);
  --surface-brand:var(--blue-600);
  --surface-brand-deep:var(--blue-900);
  --surface-brand-soft:var(--blue-050);

  --border-subtle:var(--grey-200);
  --border-strong:var(--grey-300);

  --gradient-brand:linear-gradient(120deg,var(--blue-900) 0%,var(--blue-600) 55%,var(--blue-400) 100%);
  --gradient-sky:linear-gradient(120deg,var(--blue-600) 0%,var(--blue-400) 100%);

  /* Type */
  --font-heading:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Roboto","Helvetica Neue",Arial,sans-serif;
  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;

  --text-display-2:clamp(38px,4.6vw,52px);
  --text-h1:clamp(29px,3.4vw,40px);
  --text-h2:clamp(24px,2.4vw,32px);
  --text-h3:24px;
  --text-h4:20px;

  --text-lead:clamp(17px,1.4vw,20px);
  --text-body-lg:18px;
  --text-body-md:16px;
  --text-body-sm:14px;
  --text-caption:12px;
  --text-eyebrow:13px;
  --tracking-eyebrow:.22em;

  --leading-tight:1.1;
  --leading-heading:1.2;
  --leading-snug:1.4;
  --leading-body:1.6;
  --tracking-tight:-.02em;
  --tracking-wide:.04em;

  /* Space */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:40px; --space-8:56px;
  --space-9:80px; --space-10:120px;
  --section-y:var(--space-10);
  --section-y-compact:var(--space-9);
  --gutter:24px;
  --container-max:1200px;
  --container-narrow:760px;

  /* Shape */
  --radius-sm:4px; --radius-md:8px; --radius-lg:16px; --radius-xl:24px;
  --radius-pill:999px;
  --border-width:1px;
  --border-width-thick:2px;

  --shadow-xs:0 1px 2px rgba(21,29,41,.06);
  --shadow-sm:0 2px 8px rgba(21,29,41,.06);
  --shadow-md:0 8px 24px rgba(21,29,41,.08);
  --shadow-lg:0 20px 48px rgba(21,29,41,.10);
  --shadow-brand:0 6px 16px rgba(41,64,231,.16);
  --shadow-panel:0 28px 64px rgba(0,0,80,.22);
  --ring-focus:0 0 0 3px rgba(0,169,255,.45);

  --ease-out:cubic-bezier(.22,.61,.36,1);
  --duration-fast:120ms;
  --duration-base:200ms;
  --blur-glass:12px;

  --header-h:var(--bl-header-h);
  --jump-h:var(--bl-jump-h);
}

/* ==========================================================================
   2 · BASE
   ========================================================================== */
.bl-service *,.bl-service *::before,.bl-service *::after{box-sizing:border-box}
/* Defensive: neutralise theme / page-builder defaults that leak into the wrapper. */
.bl-service section,.bl-service aside,.bl-service figure,.bl-service table{margin:0}
.bl-service ul,.bl-service ol{margin:0;padding:0}
.bl-service a{box-shadow:none}
.bl-service a:hover,.bl-service a:focus{text-decoration:none}
.bl-service summary::-webkit-details-marker{display:none}
.bl-service table{border:0;width:100%}
.bl-service table th,.bl-service table td{background:none}
.bl-service{-webkit-text-size-adjust:100%}
.bl-service{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--text-body-md);
  font-weight:var(--weight-light);
  line-height:var(--leading-body);
  color:var(--text-body);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
  overflow-x:clip;   /* NOT hidden: hidden would make this div its own scroll container */
}
.bl-service h1,.bl-service h2,.bl-service h3,.bl-service h4,.bl-service h5{
  margin:0;
  font-family:var(--font-heading);
  font-weight:var(--weight-light);
  color:var(--text-heading);
  line-height:var(--leading-heading);
  letter-spacing:var(--tracking-tight);
}
.bl-service p{margin:0}
.bl-service strong,.bl-service b{font-weight:var(--weight-medium)}
.bl-service img,.bl-service svg{display:block;max-width:100%}
.bl-service a{color:var(--text-link);text-decoration:none;transition:color var(--duration-fast) var(--ease-out)}
.bl-service :focus-visible{outline:none;box-shadow:var(--ring-focus);border-radius:var(--radius-sm)}
.bl-service ::selection{background:var(--blue-100);color:var(--blue-900)}

.bl-service .wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}

/* Opt-in: if your theme wraps page content in a max-width or padded container,
   add the class bl-service--fullbleed alongside bl-service on the wrapper and
   the page will break out of it. */
.bl-service--fullbleed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:100vw;width:auto}
.bl-service .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bl-service .sr:focus{position:fixed;top:12px;left:12px;width:auto;height:auto;clip:auto;z-index:200;background:var(--white);padding:10px 16px;border-radius:var(--radius-pill);box-shadow:var(--shadow-md)}

/* ==========================================================================
   3 · TYPOGRAPHIC PRIMITIVES
   ========================================================================== */
.bl-service .eyebrow{
  font-family:var(--font-heading);
  font-size:var(--text-eyebrow);
  font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  line-height:1.3;
  color:var(--blue-600);
}
.bl-service .eyebrow--white{color:var(--white)}
.bl-service .lead{
  font-size:var(--text-lead);
  font-weight:var(--weight-light);
  line-height:var(--leading-snug);
  color:var(--text-body);
  max-width:var(--container-narrow);
}
.bl-service .muted{font-size:var(--text-body-sm);line-height:var(--leading-body);color:var(--text-muted)}

/* ==========================================================================
   4 · BUTTONS + LINKS
   ========================================================================== */
.bl-service .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-heading);font-weight:var(--weight-medium);line-height:1;
  font-size:var(--text-body-md);padding:13px 26px;
  border:var(--border-width-thick) solid transparent;border-radius:var(--radius-pill);
  cursor:pointer;text-decoration:none;
  transition:background var(--duration-base) var(--ease-out),color var(--duration-base) var(--ease-out),
             border-color var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out),
             transform var(--duration-fast) var(--ease-out);
}
.bl-service .btn svg{width:16px;height:16px;flex:0 0 auto;transition:transform var(--duration-base) var(--ease-out)}
.bl-service .btn:hover svg{transform:translateX(3px)}
.bl-service .btn:active{transform:scale(.97)}
.bl-service .btn-sm{font-size:var(--text-body-sm);padding:9px 18px}
.bl-service .btn-lg{font-size:var(--text-body-lg);padding:16px 32px}

.bl-service .btn-primary{background:var(--blue-600);color:var(--white);border-color:var(--blue-600);box-shadow:var(--shadow-brand)}
.bl-service .btn-primary:hover{background:var(--blue-700);border-color:var(--blue-700);color:var(--white)}
.bl-service .btn-secondary{background:transparent;color:var(--blue-600);border-color:var(--blue-600)}
.bl-service .btn-secondary:hover{background:var(--blue-600);color:var(--white)}
.bl-service .btn-inverse{background:var(--white);color:var(--blue-600);border-color:var(--white)}
.bl-service .btn-inverse:hover{background:var(--blue-050);border-color:var(--blue-050);color:var(--blue-700)}
.bl-service .btn-inverse-outline{background:transparent;color:var(--white);border-color:rgba(255,255,255,.7)}
.bl-service .btn-inverse-outline:hover{background:rgba(255,255,255,.14);border-color:var(--white);color:var(--white)}

.bl-service .arrow-link{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-family:var(--font-heading);font-size:var(--text-body-sm);font-weight:var(--weight-medium);
  color:var(--blue-600);
}
.bl-service .arrow-link svg{width:15px;height:15px;transition:transform var(--duration-base) var(--ease-out)}
.bl-service .arrow-link:hover{color:var(--blue-700)}
.bl-service .arrow-link:hover svg{transform:translateX(3px)}
@media(max-width:1020px){
}

/* ==========================================================================
   6 · HERO  — light ground, gradient panel (inverse of the platform hero)
   ========================================================================== */
.bl-service .hero{
  position:relative;overflow:hidden;
  background:var(--grey-050);
  border-bottom:var(--border-width) solid var(--border-subtle);
  /* No breadcrumb bar above it, so the hero carries that space itself. */
  padding:var(--space-10) 0 var(--space-9);
}
.bl-service .hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 92% 8%,rgba(41,64,231,.07),transparent 46%);
}
.bl-service .hero-grid{
  position:relative;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(36px,4.6vw,var(--space-8));align-items:center;
}
.bl-service .hero-copy{display:flex;flex-direction:column;gap:var(--space-5);align-items:flex-start}
.bl-service .hero h1{font-size:var(--text-display-2);line-height:var(--leading-tight);max-width:19ch}
.bl-service .hero h1 em{font-style:normal;color:var(--blue-600)}
.bl-service .hero .lead{max-width:52ch}
.bl-service .hero-cta{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-1)}
.bl-service .hero-cta .btn{position:relative}
.bl-service .hero-cta .btn-secondary{z-index:1;background:var(--white)}
.bl-service .hero-note{
  font-size:var(--text-body-sm);line-height:var(--leading-body);color:var(--text-muted);
  max-width:56ch;padding-top:var(--space-4);border-top:var(--border-width) solid var(--border-subtle);
  width:100%;
}

/* gradient panel: the service page's brand moment */
.bl-service .panel{
  position:relative;overflow:hidden;
  background:var(--gradient-brand);color:var(--white);
  border-radius:var(--radius-xl);padding:var(--space-6);
  box-shadow:var(--shadow-panel);
}
.bl-service .panel::after{
  content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16),rgba(255,255,255,0) 68%);pointer-events:none;
}
.bl-service .panel .ph{
  position:relative;z-index:1;
  font-family:var(--font-heading);font-size:var(--text-caption);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--white);
  margin-bottom:var(--space-5);
}
.bl-service .pitem{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:var(--space-4);
  background:rgba(255,255,255,.1);
  border:var(--border-width) solid rgba(255,255,255,.18);
  border-radius:var(--radius-md);
  padding:13px 16px;margin-bottom:var(--space-2);
  transition:background var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out);
}
.bl-service .pitem:last-of-type{margin-bottom:0}
.bl-service .pitem:hover{background:rgba(255,255,255,.16);transform:translateX(2px)}
.bl-service .pitem .logo{flex:0 0 78px;height:24px;display:flex;align-items:center;background:var(--white);border-radius:var(--radius-sm);padding:3px 6px}
.bl-service .pitem .logo img{max-height:18px;max-width:72px;width:auto;height:auto;object-fit:contain;margin:0 auto}
.bl-service .pitem .dot{flex:0 0 8px;height:8px;border-radius:50%;background:var(--white);opacity:.85}
.bl-service .pitem .idx{
  flex:0 0 28px;height:28px;border-radius:50%;background:rgba(255,255,255,.16);
  font-family:var(--font-heading);font-size:var(--text-caption);font-weight:var(--weight-medium);
  color:var(--white);display:flex;align-items:center;justify-content:center;line-height:1;
}
.bl-service .pitem .txt{font-size:var(--text-body-sm);line-height:var(--leading-snug);color:rgba(255,255,255,.84)}
.bl-service .pitem .txt b{
  display:block;font-family:var(--font-heading);font-size:var(--text-body-sm);
  font-weight:var(--weight-medium);color:var(--white);margin-bottom:2px;letter-spacing:0;
}
.bl-service .panel .pf{
  position:relative;z-index:1;
  margin-top:var(--space-5);padding-top:var(--space-4);
  border-top:var(--border-width) solid rgba(255,255,255,.2);
  font-size:var(--text-caption);line-height:var(--leading-snug);color:rgba(255,255,255,.82);
}

/* ==========================================================================
   7 · CREDENTIALS BAND
   ========================================================================== */
.bl-service .stats-band{background:var(--white);border-bottom:var(--border-width) solid var(--border-subtle)}
.bl-service .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-7);padding:var(--space-6) 0}
.bl-service .stats>div{display:flex;flex-direction:column;gap:var(--space-1)}
.bl-service .stats>div+div{border-left:var(--border-width) solid var(--border-subtle);padding-left:var(--space-6)}
.bl-service .stats .n{font-family:var(--font-heading);font-size:var(--text-h2);font-weight:var(--weight-medium);color:var(--blue-600);letter-spacing:var(--tracking-tight);line-height:1}
.bl-service .stats .l{font-size:var(--text-caption);line-height:var(--leading-snug);color:var(--text-muted);max-width:26ch}

/* ==========================================================================
   8 · JUMP NAV
   ========================================================================== */
.bl-service .jump{
  position:sticky;top:var(--header-h);z-index:30;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(var(--blur-glass));-webkit-backdrop-filter:blur(var(--blur-glass));
  border-bottom:var(--border-width) solid var(--border-subtle);
}
.bl-service .jump .wrap{display:flex;gap:var(--space-5);overflow-x:auto;scrollbar-width:none}
.bl-service .jump .wrap::-webkit-scrollbar{display:none}
.bl-service .jump a{
  flex:0 0 auto;
  font-family:var(--font-heading);font-size:var(--text-body-sm);font-weight:var(--weight-regular);
  color:var(--grey-700);white-space:nowrap;
  padding:17px 0 15px;border-bottom:var(--border-width-thick) solid transparent;
}
.bl-service .jump a:hover{color:var(--blue-600);border-bottom-color:var(--blue-600)}

/* ==========================================================================
   9 · SECTIONS
   ========================================================================== */
.bl-service section{padding:var(--section-y) 0}
.bl-service .s-page{background:var(--surface-page)}
.bl-service .s-soft{background:var(--surface-brand-soft)}
.bl-service .s-muted{background:var(--surface-muted)}

.bl-service .sec-head{display:flex;flex-direction:column;gap:var(--space-4);margin-bottom:var(--space-8);max-width:var(--container-max)}
.bl-service .sec-head h2{font-size:var(--text-h1)}
.bl-service .sub-head{font-size:var(--text-h3);font-weight:var(--weight-light);margin:var(--space-8) 0 var(--space-5)}
.bl-service .sec-head.center{text-align:center;align-items:center;max-width:var(--container-narrow);margin-inline:auto}
.bl-service .sec-head.center .lead{margin-inline:auto}

/* ==========================================================================
   10 · GRIDS + CARDS
   ========================================================================== */
.bl-service .grid{display:grid;gap:var(--space-4)}
.bl-service .g2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:860px){.bl-service .g2{grid-template-columns:minmax(0,1fr)}}
.bl-service .g3{grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));grid-auto-rows:1fr}

.bl-service .card{
  height:100%;display:flex;flex-direction:column;gap:var(--space-3);
  background:var(--surface-card);
  border:var(--border-width) solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:var(--space-6);
  box-shadow:var(--shadow-sm);
  transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out);
}
.bl-service .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.bl-service .card h3{font-size:var(--text-h4);font-weight:var(--weight-medium)}
.bl-service .card p{font-size:var(--text-body-sm);line-height:var(--leading-body)}
.bl-service .card .num{
  font-family:var(--font-heading);font-size:var(--text-caption);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--blue-600);
}
.bl-service .card .arrow-link{margin-top:auto;padding-top:var(--space-3)}
.bl-service .card .result{font-size:var(--text-body-sm);color:var(--text-muted);margin-top:auto;padding-top:var(--space-3);border-top:var(--border-width) solid var(--border-subtle)}
.bl-service .card .result b{color:var(--text-heading);font-weight:var(--weight-medium)}

/* symptom card — quiet, hairline-indexed, no icon */
.bl-service .symptom{gap:var(--space-2);border-top:var(--border-width-thick) solid var(--blue-100)}
.bl-service .symptom h4{font-size:var(--text-h4);font-weight:var(--weight-medium);letter-spacing:var(--tracking-tight)}
.bl-service .symptom p{font-size:var(--text-body-sm)}

/* service card — 56px icon circle, as on the platform pages */
.bl-service .svc{
  height:100%;min-height:236px;display:flex;flex-direction:column;gap:var(--space-3);
  background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm);
  transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out);
}
.bl-service .svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.bl-service .svc .ico{
  width:56px;height:56px;border-radius:var(--radius-pill);background:var(--blue-050);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.bl-service .svc .ico svg{width:26px;height:26px;stroke:var(--blue-600);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bl-service .svc h3{font-size:var(--text-h4);font-weight:var(--weight-medium)}
.bl-service .svc p{font-size:var(--text-body-sm);line-height:var(--leading-body)}
.bl-service .svc .arrow-link{margin-top:auto;padding-top:var(--space-2)}

/* platform card */
.bl-service .plat{
  height:100%;display:flex;flex-direction:column;gap:var(--space-3);
  background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm);
  transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out);
}
.bl-service .plat:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.bl-service .plat .plogo{height:38px;display:flex;align-items:center}
.bl-service .plat .plogo img{max-height:34px;max-width:146px;width:auto;height:auto;object-fit:contain}
.bl-service .plat .fit{
  font-family:var(--font-heading);font-size:var(--text-caption);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--blue-600);
}
.bl-service .plat h3{font-size:var(--text-h3);font-weight:var(--weight-light)}
.bl-service .plat p{font-size:var(--text-body-sm);line-height:var(--leading-body)}
.bl-service .plat .tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-1)}
.bl-service .plat .tags span{
  font-family:var(--font-heading);font-size:var(--text-caption);font-weight:var(--weight-regular);
  color:var(--grey-700);background:var(--grey-050);border:var(--border-width) solid var(--border-subtle);
  border-radius:var(--radius-pill);padding:5px 12px;
}
.bl-service .plat-foot{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);margin-top:auto;padding-top:var(--space-4)}
.bl-service .badge{
  display:inline-flex;align-items:center;gap:var(--space-2);padding:6px 14px;
  border-radius:var(--radius-pill);border:var(--border-width) solid var(--blue-100);
  background:var(--blue-050);color:var(--blue-900);
  font-family:var(--font-heading);font-size:var(--text-caption);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;
}
.bl-service .badge.track{background:var(--grey-100);border-color:var(--grey-200);color:var(--grey-700)}

/* ==========================================================================
   11 · TWO-UP SPLIT  (white card vs gradient card — the platform "Fit" idiom)
   ========================================================================== */
.bl-service .split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:var(--space-5);align-items:stretch}
.bl-service .layer{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:var(--space-4);
  background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);
  border-radius:var(--radius-xl);padding:var(--space-7);box-shadow:var(--shadow-sm);
}
.bl-service .layer.alt{background:var(--gradient-brand);border:0;color:var(--white);box-shadow:var(--shadow-panel)}
.bl-service .layer.alt::after{
  content:"";position:absolute;right:-130px;bottom:-130px;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.14),rgba(255,255,255,0) 68%);pointer-events:none;
}
.bl-service .layer>*{position:relative;z-index:1}
.bl-service .ltag{
  font-family:var(--font-heading);font-size:var(--text-caption);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--blue-600);
}
.bl-service .layer.alt .ltag{color:var(--white)}
.bl-service .layer h3{font-size:var(--text-h3);font-weight:var(--weight-light)}
.bl-service .layer.alt h3{color:var(--white)}
.bl-service .layer p{font-size:var(--text-body-md);line-height:var(--leading-body)}
.bl-service .layer.alt p{color:var(--text-on-dark-muted)}
.bl-service .layer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.bl-service .layer li{position:relative;padding-left:30px;font-size:var(--text-body-md);line-height:var(--leading-body)}
.bl-service .layer li::before{
  content:"";position:absolute;left:0;top:8px;width:18px;height:10px;
  border-left:var(--border-width-thick) solid var(--blue-600);
  border-bottom:var(--border-width-thick) solid var(--blue-600);
  transform:rotate(-45deg);
}
.bl-service .layer.alt li{color:var(--white)}
.bl-service .layer.alt li::before{border-color:var(--white)}
.bl-service .layer .foot{
  margin-top:auto;padding-top:var(--space-4);
  border-top:var(--border-width) solid var(--border-subtle);
  font-size:var(--text-body-sm);line-height:var(--leading-body);color:var(--text-muted);
}
.bl-service .layer.alt .foot{border-top-color:rgba(255,255,255,.22);color:var(--text-on-dark-muted)}

/* ==========================================================================
   12 · PROCESS  (numbered circles + connector, as on the platform pages)
   ========================================================================== */
.bl-service .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:var(--space-6) var(--space-5)}
.bl-service .step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-4)}
.bl-service .step .line{position:absolute;left:calc(50% + 28px);right:calc(-50% + 28px);top:19px;height:2px;background:var(--border-subtle)}
.bl-service .step:last-child .line{display:none}
.bl-service .step .sn{
  width:40px;height:40px;border-radius:var(--radius-pill);background:var(--blue-600);color:var(--white);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  font-family:var(--font-heading);font-size:var(--text-body-sm);font-weight:var(--weight-medium);line-height:1;
}
.bl-service .step h4{font-size:var(--text-h4);font-weight:var(--weight-medium)}
.bl-service .step p{font-size:var(--text-body-sm);line-height:var(--leading-body)}
@media(max-width:860px){.bl-service .step .line{display:none}}

/* ==========================================================================
   13 · CASE CARDS
   ========================================================================== */
.bl-service .case{
  height:100%;display:flex;flex-direction:column;gap:var(--space-3);
  background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm);
  transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out);
}
.bl-service .case:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.bl-service .case .sector{
  align-self:flex-start;
  font-family:var(--font-heading);font-size:var(--text-caption);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;
  padding:6px 12px;border-radius:var(--radius-pill);background:var(--blue-600);color:var(--white);
}
.bl-service .case h3{font-size:var(--text-h4);font-weight:var(--weight-medium);line-height:var(--leading-snug)}
.bl-service .case p{font-size:var(--text-body-sm);line-height:var(--leading-body)}
.bl-service .case .arrow-link{margin-top:auto;padding-top:var(--space-3)}

/* ==========================================================================
   14 · MID-PAGE CTA STRIP
   ========================================================================== */
.bl-service .strip{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);
  background:var(--blue-050);border:var(--border-width) solid var(--blue-100);
  border-radius:var(--radius-xl);padding:var(--space-6) var(--space-7);margin-top:var(--space-8);
}
.bl-service .strip h3{font-size:var(--text-h3);font-weight:var(--weight-light);margin-bottom:var(--space-2)}
.bl-service .strip p{font-size:var(--text-body-sm);line-height:var(--leading-body);max-width:62ch}
.bl-service .strip .btn{flex:0 0 auto}
@media(max-width:820px){.bl-service .strip{flex-direction:column;align-items:flex-start}}

/* ==========================================================================
   15 · SERVICE-PAGE-ONLY COMPONENTS
   ========================================================================== */

/* comparison matrix */
.bl-service .matrix-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:var(--white);border:var(--border-width) solid var(--border-subtle);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
}
.bl-service table.matrix{width:100%;border-collapse:collapse;font-size:var(--text-body-sm);min-width:640px}
.bl-service table.matrix caption{
  caption-side:top;text-align:left;padding:var(--space-5) var(--space-6) var(--space-3);
  font-family:var(--font-heading);font-size:var(--text-body-sm);font-weight:var(--weight-regular);color:var(--text-muted);
}
.bl-service table.matrix th,.bl-service table.matrix td{padding:15px var(--space-6);text-align:left;vertical-align:top;border-bottom:var(--border-width) solid var(--border-subtle)}
.bl-service table.matrix thead th{
  background:var(--grey-050);
  font-family:var(--font-heading);font-size:var(--text-caption);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--blue-600);
  white-space:nowrap;
}
.bl-service table.matrix tbody th{font-family:var(--font-heading);font-size:var(--text-body-sm);font-weight:var(--weight-medium);color:var(--text-heading);width:26%}
.bl-service table.matrix td{color:var(--text-body);line-height:var(--leading-body)}
.bl-service table.matrix tbody tr:last-child th,.bl-service table.matrix tbody tr:last-child td{border-bottom:0}
.bl-service table.matrix tbody tr:hover{background:var(--grey-050)}
.bl-service table.matrix td.strong{color:var(--text-heading);font-weight:var(--weight-medium)}
.bl-service table.matrix td.no{color:var(--grey-300)}
.bl-service table.matrix td .tag{
  display:inline-block;font-family:var(--font-heading);font-size:var(--text-caption);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;
  border-radius:var(--radius-pill);padding:4px 11px;background:var(--blue-050);color:var(--blue-900);
}
.bl-service table.matrix td .tag.alt{background:var(--grey-100);color:var(--grey-700)}
.bl-service .matrix-note{font-size:var(--text-body-sm);line-height:var(--leading-body);color:var(--text-muted);margin-top:var(--space-4);max-width:78ch}

/* ---------- integration map ----------
   A map, not a table: every row runs left (the system) through a central spine
   (the CRM) to the right (what moves). The spine is drawn by stacking a
   segment per row, so it reads as one continuous line down the card. */
.bl-service .flow{
  background:var(--white);border:var(--border-width) solid var(--border-subtle);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;
}
.bl-service .flow-head,.bl-service .flow-row{
  display:grid;grid-template-columns:minmax(0,1fr) 150px minmax(0,1.3fr);
  gap:var(--space-5);align-items:center;
}
.bl-service .flow-head{
  padding:14px var(--space-6);background:var(--grey-050);
  border-bottom:var(--border-width) solid var(--border-subtle);
  font-family:var(--font-heading);font-size:var(--text-caption);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted);
}
.bl-service .flow-head .hub{
  position:relative;
  justify-self:center;display:inline-flex;align-items:center;gap:var(--space-2);
  background:var(--blue-600);color:var(--white);border-radius:var(--radius-pill);
  padding:6px 14px;letter-spacing:var(--tracking-wide);
}
/* stub that joins the hub chip to the spine running down the rows */
.bl-service .flow-head .hub::after{
  content:"";position:absolute;top:100%;left:50%;width:2px;height:16px;margin-left:-1px;
  background:var(--blue-100);
}
.bl-service .flow-row{
  padding:var(--space-4) var(--space-6);
  border-bottom:var(--border-width) solid var(--border-subtle);
  transition:background var(--duration-base) var(--ease-out);
}
.bl-service .flow-row:last-child{border-bottom:0}
.bl-service .flow-row:hover{background:var(--grey-050)}

.bl-service .flow-row .sys{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-4);align-items:center}
.bl-service .flow-row .sys .sico{
  width:42px;height:42px;border-radius:var(--radius-pill);background:var(--blue-050);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  transition:background var(--duration-base) var(--ease-out);
}
.bl-service .flow-row .sys .sico svg{
  width:20px;height:20px;stroke:var(--blue-600);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
  transition:stroke var(--duration-base) var(--ease-out);
}
.bl-service .flow-row:hover .sys .sico{background:var(--blue-600)}
.bl-service .flow-row:hover .sys .sico svg{stroke:var(--white)}
.bl-service .flow-row .sys .nm{
  font-family:var(--font-heading);font-size:var(--text-body-md);font-weight:var(--weight-medium);
  color:var(--text-heading);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);
}
.bl-service .flow-row .sys .vendors{
  display:block;font-family:var(--font-body);font-size:var(--text-caption);
  font-weight:var(--weight-light);color:var(--text-muted);margin-top:3px;line-height:1.45;
}

/* the CRM spine: one segment per row, flush top to bottom */
.bl-service .flow-row .dir{
  position:relative;align-self:stretch;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
}
.bl-service .flow-row .dir::before{
  content:"";position:absolute;top:calc(var(--space-4) * -1);bottom:calc(var(--space-4) * -1);
  left:50%;width:2px;margin-left:-1px;background:var(--blue-100);
}
.bl-service .flow-row:last-child .dir::before{bottom:0}
.bl-service .flow-row .dir .wire{
  position:relative;z-index:1;display:block;
  background:var(--white);padding:3px 0;
  transition:background var(--duration-base) var(--ease-out);
}
.bl-service .flow-row:hover .dir .wire{background:var(--grey-050)}
.bl-service .flow-row .dir svg{
  width:52px;height:14px;stroke:var(--blue-600);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.bl-service .flow-row .dir svg path.shaft{
  stroke-dasharray:60;stroke-dashoffset:0;
  transition:stroke-dashoffset 700ms var(--ease-out);
}
.bl-service .flow-row:hover .dir svg path.shaft{stroke-dashoffset:120}
.bl-service .flow-row .dir .lbl{
  position:relative;z-index:1;
  font-family:var(--font-heading);font-size:10.5px;font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;
  color:var(--blue-900);background:var(--blue-050);
  border-radius:var(--radius-pill);padding:3px 10px;white-space:nowrap;
}
.bl-service .flow-row .dir .lbl.one{color:var(--grey-700);background:var(--grey-100)}
.bl-service .flow-row .what{font-size:var(--text-body-sm);line-height:var(--leading-body);color:var(--text-body)}

@media(max-width:860px){
  .bl-service .flow-head{display:none}
  .bl-service .flow-row{grid-template-columns:1fr;gap:var(--space-3);padding:var(--space-5)}
  .bl-service .flow-row .dir{align-self:start;flex-direction:row;justify-content:flex-start;gap:var(--space-3)}
  .bl-service .flow-row .dir::before{display:none}
  .bl-service .flow-row .dir .wire{padding:0}
}

/* verdict block */
.bl-service .verdict{
  position:relative;overflow:hidden;
  background:var(--gradient-brand);color:var(--white);
  border-radius:var(--radius-xl);padding:var(--space-7);box-shadow:var(--shadow-panel);
}
.bl-service .verdict::after{
  content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.15),rgba(255,255,255,0) 68%);pointer-events:none;
}
.bl-service .verdict>*{position:relative;z-index:1}
.bl-service .verdict .vlabel{
  font-family:var(--font-heading);font-size:var(--text-caption);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--white);margin-bottom:var(--space-4);
}
.bl-service .verdict h3{color:var(--white);font-size:var(--text-h2);font-weight:var(--weight-light);margin-bottom:var(--space-3);max-width:28ch}
.bl-service .verdict p{color:var(--text-on-dark-muted);font-size:var(--text-body-md);line-height:var(--leading-body);max-width:64ch}
.bl-service .verdict ul{list-style:none;margin:var(--space-5) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--space-3) var(--space-6)}
.bl-service .verdict li{position:relative;padding-left:26px;font-size:var(--text-body-sm);line-height:var(--leading-body);color:var(--white)}
.bl-service .verdict li::before{
  content:"";position:absolute;left:0;top:7px;width:14px;height:8px;
  border-left:var(--border-width-thick) solid var(--white);
  border-bottom:var(--border-width-thick) solid var(--white);
  transform:rotate(-45deg);
}

/* deliverable list */
.bl-service .deliv{list-style:none;margin:var(--space-2) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--space-3) var(--space-7)}
.bl-service .deliv li{position:relative;padding-left:30px;font-size:var(--text-body-sm);line-height:var(--leading-body);color:var(--text-body)}
.bl-service .deliv li svg{position:absolute;left:0;top:4px;width:16px;height:16px;stroke:var(--blue-600);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}


/* ---------- numbered symptom list ----------
   For a section with an odd item count (five, seven) where a card grid would
   leave an orphan on the last row. Full-width hairline rows read as a
   diagnostic checklist and stay clean at any count — the same idiom the
   platform pages use for their numbered service list. */
.bl-service .symptom-list{list-style:none;margin:0;padding:0;border-top:var(--border-width) solid var(--border-subtle)}
.bl-service .symptom-list li{
  position:relative;
  display:grid;grid-template-columns:56px minmax(0,0.9fr) minmax(0,1.4fr);
  gap:var(--space-5);align-items:start;
  padding:var(--space-5) 0;
  border-bottom:var(--border-width) solid var(--border-subtle);
}
/* The hover highlight is drawn by a pseudo-element that extends past the row
   on both sides, so the number badge gets breathing room inside it while the
   hairlines and the text stay aligned with the rest of the page. */
.bl-service .symptom-list li::before{
  content:"";position:absolute;z-index:0;top:4px;bottom:4px;
  left:calc(var(--space-5) * -1);right:calc(var(--space-5) * -1);
  border-radius:var(--radius-lg);background:transparent;pointer-events:none;
  transition:background var(--duration-base) var(--ease-out);
}
.bl-service .symptom-list li:hover::before{background:rgba(255,255,255,.72)}
.bl-service .symptom-list li>*{position:relative;z-index:1}
.bl-service .symptom-list .sn-num{
  width:56px;height:56px;border-radius:var(--radius-pill);
  background:var(--white);border:var(--border-width) solid var(--border-subtle);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);font-size:var(--text-body-md);font-weight:var(--weight-medium);
  color:var(--blue-600);line-height:1;
  transition:background var(--duration-base) var(--ease-out),color var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out);
}
.bl-service .symptom-list li:hover .sn-num{background:var(--blue-600);border-color:var(--blue-600);color:var(--white)}
.bl-service .symptom-list h3{
  font-size:var(--text-h4);font-weight:var(--weight-medium);
  line-height:var(--leading-snug);padding-top:var(--space-3);
}
.bl-service .symptom-list p{
  font-size:var(--text-body-sm);line-height:var(--leading-body);color:var(--text-body);
  padding-top:var(--space-3);
}
@media(max-width:860px){
  .bl-service .symptom-list li{grid-template-columns:48px minmax(0,1fr);gap:var(--space-4)}
  .bl-service .symptom-list li::before{left:calc(var(--space-3) * -1);right:calc(var(--space-3) * -1)}
  .bl-service .symptom-list .sn-num{width:48px;height:48px;font-size:var(--text-body-sm)}
  .bl-service .symptom-list h3{padding-top:var(--space-2)}
  .bl-service .symptom-list p{grid-column:2;padding-top:var(--space-2)}
}

/* ---------- statement panel ----------
   Replaces the old left-bar "note". Used where a section ends on a claim that
   deserves weight — it spans the full content width and carries the brand
   gradient, so it reads as the section's conclusion rather than an aside. */
.bl-service .principle{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-5);align-items:start;
  background:var(--gradient-brand);color:var(--white);
  border-radius:var(--radius-xl);padding:var(--space-6) var(--space-7);
  box-shadow:var(--shadow-panel);margin-top:var(--space-5);
}
.bl-service .principle::after{
  content:"";position:absolute;right:-130px;top:-130px;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.15),rgba(255,255,255,0) 68%);pointer-events:none;
}
.bl-service .principle>*{position:relative;z-index:1}
.bl-service .principle .pico{
  width:56px;height:56px;border-radius:var(--radius-pill);background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;
}
.bl-service .principle .pico svg{width:26px;height:26px;stroke:var(--white);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bl-service .principle p{font-size:var(--text-body-md);line-height:var(--leading-body);color:rgba(255,255,255,.86);max-width:76ch}
.bl-service .principle p+p{margin-top:var(--space-3)}
.bl-service .principle b{
  display:block;font-family:var(--font-heading);font-size:var(--text-h3);font-weight:var(--weight-light);
  letter-spacing:var(--tracking-tight);line-height:var(--leading-heading);color:var(--white);margin-bottom:var(--space-3);
}
@media(max-width:700px){
  .bl-service .principle{grid-template-columns:1fr;gap:var(--space-4);padding:var(--space-5)}
  .bl-service .principle b{font-size:var(--text-h4);font-weight:var(--weight-medium)}
}

/* ---------- editorial footnote ----------
   The quiet counterpart: a single clarifying sentence under a block of cards.
   Centred, rule above, no box — deliberately not competing with the cards. */
.bl-service .footnote{
  max-width:74ch;margin:var(--space-7) auto 0;padding-top:var(--space-5);
  text-align:center;font-size:var(--text-body-md);line-height:var(--leading-body);color:var(--text-muted);
  position:relative;
}
.bl-service .footnote::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:40px;height:2px;border-radius:2px;background:var(--blue-600);opacity:.5;
}
.bl-service .footnote b{color:var(--text-heading);font-weight:var(--weight-medium)}

/* countable scope checklist */
.bl-service .checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--space-4)}
.bl-service .chk-group{background:var(--white);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm)}
.bl-service .chk-group .cnum{
  font-family:var(--font-heading);font-size:var(--text-caption);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--blue-600);display:block;margin-bottom:var(--space-2);
}
.bl-service .chk-group h4{font-size:var(--text-h4);font-weight:var(--weight-medium);margin-bottom:var(--space-3)}
.bl-service .chk-group ul{list-style:none;margin:0;padding:0}
.bl-service .chk-group li{position:relative;padding:9px 0 9px 20px;font-size:var(--text-body-sm);line-height:var(--leading-snug);color:var(--text-body);border-bottom:var(--border-width) solid var(--grey-050)}
.bl-service .chk-group li:last-child{border-bottom:0}
.bl-service .chk-group li::before{content:"";position:absolute;left:0;top:17px;width:6px;height:6px;border-radius:50%;background:var(--blue-600);opacity:.5}

/* exclusions strip */
.bl-service .excl{
  background:var(--white);border:var(--border-width) solid var(--border-subtle);
  border-left:3px solid var(--blue-900);border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  padding:var(--space-5) var(--space-6);margin-top:var(--space-5);
}
.bl-service .excl h4{
  font-family:var(--font-heading);font-size:var(--text-caption);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-heading);margin-bottom:var(--space-3);
}
.bl-service .excl ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2)}
.bl-service .excl li{font-size:var(--text-caption);color:var(--grey-700);background:var(--grey-100);border-radius:var(--radius-pill);padding:6px 14px}

/* next-steps row */
.bl-service .next-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--space-4);padding:var(--space-9) 0}
.bl-service .next{
  display:flex;flex-direction:column;gap:var(--space-2);
  background:var(--white);border:var(--border-width) solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:var(--space-5) var(--space-6);
  transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out);
}
.bl-service .next:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--blue-100)}
.bl-service .next .nl{
  font-family:var(--font-heading);font-size:var(--text-caption);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted);
}
.bl-service .next .nt{font-family:var(--font-heading);font-size:var(--text-h4);font-weight:var(--weight-medium);color:var(--text-heading);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight)}
.bl-service .next:hover .nt{color:var(--blue-600)}

/* ==========================================================================
   16 · FAQ
   ========================================================================== */
.bl-service .faq{max-width:880px;margin:0 auto;border-top:var(--border-width) solid var(--border-subtle)}
.bl-service .qa{border-bottom:var(--border-width) solid var(--border-subtle)}
.bl-service .qa summary{
  list-style:none;cursor:pointer;position:relative;
  padding:var(--space-5) 52px var(--space-5) 0;
  font-family:var(--font-heading);font-size:var(--text-h4);font-weight:var(--weight-regular);
  color:var(--text-heading);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);
  transition:color var(--duration-base) var(--ease-out);
}
.bl-service .qa summary::-webkit-details-marker{display:none}
.bl-service .qa summary:hover{color:var(--blue-600)}
.bl-service .qa summary::after{
  content:"";position:absolute;right:4px;top:50%;width:28px;height:28px;margin-top:-14px;
  border-radius:var(--radius-pill);background:var(--blue-050);
  transition:background var(--duration-base) var(--ease-out);
}
.bl-service .qa summary::before{
  content:"+";position:absolute;right:4px;top:50%;width:28px;height:28px;margin-top:-14px;z-index:1;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);font-size:18px;font-weight:var(--weight-light);color:var(--blue-600);
  transition:transform var(--duration-base) var(--ease-out);
}
.bl-service .qa[open] summary::before{transform:rotate(45deg)}
.bl-service .qa[open] summary{color:var(--blue-900)}
.bl-service .qa .ans{padding:0 56px var(--space-5) 0;font-size:var(--text-body-md);line-height:var(--leading-body);color:var(--text-body);max-width:84ch}

/* ==========================================================================
   17 · CTA BAND + FOOTER   (matches the design-system CtaBand and Footer)
   ========================================================================== */
.bl-service .cta{
  position:relative;overflow:hidden;
  background:var(--gradient-brand);color:var(--text-on-dark);
  padding:var(--section-y-compact) 0;
}
.bl-service .cta::after{
  content:"";position:absolute;right:-160px;top:-160px;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.14),rgba(255,255,255,0) 68%);pointer-events:none;
}
.bl-service .cta .wrap{position:relative;z-index:1;max-width:var(--container-narrow);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-5)}
.bl-service .cta h2{font-size:var(--text-display-2);font-weight:var(--weight-light);color:var(--white)}
.bl-service .cta p{font-size:var(--text-lead);font-weight:var(--weight-light);line-height:var(--leading-snug);color:var(--text-on-dark-muted)}
.bl-service .cta .btn-row{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;margin-top:var(--space-1)}

/* ==========================================================================
   18 · RESPONSIVE + MOTION
   ========================================================================== */
@media(max-width:980px){
  .bl-service .hero-grid{grid-template-columns:1fr;gap:var(--space-7)}
  .bl-service .hero h1{max-width:22ch}
  .bl-service .hero .panel{max-width:680px}
  .bl-service .stats{grid-template-columns:repeat(2,1fr);gap:var(--space-5)}
  .bl-service .stats>div:nth-child(3){border-left:0;padding-left:0}
}
@media(max-width:700px){
  .bl-service{--section-y:var(--space-9);--section-y-compact:var(--space-8);--gutter:20px}
  .bl-service .hero{padding:var(--space-9) 0 var(--space-8)}
  .bl-service .stats>div+div{padding-left:var(--space-4)}
  .bl-service .stats>div:nth-child(3){padding-left:0}
  .bl-service .layer,.bl-service .verdict,.bl-service .panel{padding:var(--space-5)}
  .bl-service .strip{padding:var(--space-5)}
  .bl-service .card,.bl-service .svc,.bl-service .plat,.bl-service .case,.bl-service .chk-group{padding:var(--space-5)}
  .bl-service .sec-head{margin-bottom:var(--space-7)}
  .bl-service .qa summary{font-size:var(--text-body-lg)}
  .bl-service .qa .ans{padding-right:var(--space-4)}
  .bl-service .hero-cta .btn,.bl-service .cta .btn{white-space:normal}
  .bl-service .next-grid{padding:var(--space-8) 0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bl-service *,.bl-service *::before,.bl-service *::after{transition:none !important;animation:none !important}
  .bl-service .card:hover,.bl-service .svc:hover,.bl-service .plat:hover,.bl-service .case:hover,.bl-service .next:hover,.bl-service .pitem:hover{transform:none !important}
}
@media print{
  .bl-service .hero,.bl-service .cta,.bl-service .panel,.bl-service .layer.alt,.bl-service .verdict{background:var(--white) !important;color:var(--ink-900) !important;box-shadow:none !important}
}