/* =====================================================================
   LOVALTO v2 shared stylesheet: PRECISION, QUIETLY
   White paper, ink typography, one oxblood accent used sparingly.
   Owned by the design-system layer. Page builders: do not edit this
   file. Page-specific layout goes in a small page-scoped <style> block.
   Version: bump the ?v= query on every page when this file changes.
   ===================================================================== */

/* ---------- fonts (self-hosted, verified paths) ---------- */
@font-face{
  font-family:'BBH Hegarty';
  src:url('/Fonts/BBH_Hegarty/BBHHegarty-Regular.woff2') format('woff2'),
      url('/Fonts/BBH_Hegarty/BBHHegarty-Regular.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('/Fonts/JetBrains_Mono/JetBrainsMono-Regular-web.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('/Fonts/JetBrains_Mono/JetBrainsMono-Medium-web.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Archivo';
  src:url('/Fonts/Archivo/Archivo-Variable.woff2') format('woff2') tech('variations'),
      url('/Fonts/Archivo/Archivo-Variable.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}

/* ---------- tokens ---------- */
:root{
  --paper:#FFFFFF;         /* primary surface */
  --ink:#0A0A0A;           /* headlines, footer / CTA band background */
  --body:#1F1F1F;          /* body text */
  --muted:#5C5C5C;         /* secondary text on light */
  --faint:#8A8A8A;         /* tertiary text, placeholders */
  --hairline:#E4E4E2;      /* rules, borders */
  --panel:#F6F6F4;         /* quiet alternating band */
  --accent:#980000;        /* the single accent */
  --accent-dark:#6F0000;   /* accent hover / pressed */
  --on-dark:#A1A1A1;       /* secondary text on ink surfaces */
  --sans:'Archivo',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --bbh:'BBH Hegarty',Arial,sans-serif;
  --wrap:1200px;
  --gutter:6vw;
  --head-h:68px;
}

/* ---------- reset / base ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--paper);color:var(--body);
  font:400 17px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
b,strong{font-weight:600}
[id]{scroll-margin-top:calc(var(--head-h) + 24px)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent);color:#fff}

.wrap{width:min(var(--wrap),100% - (var(--gutter) * 2));margin-inline:auto}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--ink);color:#fff;padding:10px 18px;
  font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.08em;
}
.skip-link:focus{left:0}

.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ---------- type system ---------- */
h1,h2,h3,h4{color:var(--ink);font-family:var(--sans);hyphens:none}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
h2{font-weight:600;font-size:clamp(30px,3.4vw,44px);line-height:1.12;letter-spacing:-.015em}
h3{font-weight:600;font-size:22px;line-height:1.3;letter-spacing:-.008em}

/* interior page H1: Archivo, sentence case. BBH is reserved for the
   wordmark and the homepage hero only. */
.page-h1{font-weight:650;font-size:clamp(36px,4.5vw,56px);line-height:1.06;letter-spacing:-.018em}

.lede{font-size:clamp(19px,1.6vw,21px);line-height:1.6;color:#3A3A3A;max-width:56ch;text-wrap:balance}
.eyebrow{
  display:block;font:500 11px/1.4 var(--mono);
  text-transform:uppercase;letter-spacing:.14em;color:var(--muted);
  margin-bottom:20px;
}
.eyebrow-accent{color:var(--accent)}
.small{font:400 13px/1.6 var(--mono);color:var(--muted)}
.caption{font:400 12px/1.6 var(--mono);color:var(--muted)}
.fig{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums}
.measure{max-width:68ch}

/* text links */
.text-link{
  color:var(--ink);font-weight:500;
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;text-decoration-color:var(--faint);
}
html.motion .text-link{transition:color .18s,text-decoration-color .18s}
.text-link:hover,.text-link:focus-visible{color:var(--accent);text-decoration-color:var(--accent)}
.link-quiet{
  color:var(--muted);text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;text-decoration-color:var(--hairline);
}
.link-quiet:hover,.link-quiet:focus-visible{color:var(--ink);text-decoration-color:var(--ink)}
.link-quiet-light{
  color:var(--on-dark);text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;text-decoration-color:rgba(255,255,255,.3);
}
.link-quiet-light:hover,.link-quiet-light:focus-visible{color:#fff;text-decoration-color:#fff}

/* ---------- buttons: square, uppercase, mono ---------- */
.btn{
  display:inline-block;padding:16px 28px;border:1px solid transparent;
  font:500 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;
  text-align:center;border-radius:0;cursor:pointer;
}
html.motion .btn{transition:background-color .18s,color .18s,border-color .18s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-inverse{border-color:#fff;color:#fff;background:transparent}
.btn-inverse:hover{background:#fff;color:var(--ink)}
.btn-sm{padding:11px 18px;font-size:12px}

/* ---------- header / nav ---------- */
.site-head{
  position:sticky;top:0;z-index:100;background:var(--paper);
  border-bottom:1px solid var(--hairline);
}
.head-bar{
  width:min(var(--wrap),100% - (var(--gutter) * 2));margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;
  height:var(--head-h);gap:16px;
}
.brand{display:inline-flex;align-items:center}
.brand-word{
  font-family:var(--bbh);font-size:20px;letter-spacing:.01em;
  text-transform:uppercase;color:var(--ink);
}
.nav{display:flex;align-items:center;gap:4px}
.nav-item{position:relative}
.nav-item.has-menu{position:relative} /* .has-menu is also the JS hook for dropdown behavior */
.nav-item > a:not(.btn){
  display:inline-block;padding:24px 14px;
  font:500 15px/1 var(--sans);color:var(--ink);
}
/* animated 1px underline, left to right, on hover and current page.
   Desktop only: the full-screen mobile menu keeps its border rows. */
@media(min-width:1025px){
  .nav-item > a:not(.btn){position:relative}
  .nav-item > a:not(.btn)::after{
    content:"";position:absolute;left:14px;right:14px;bottom:19px;height:1px;
    background:var(--ink);transform:scaleX(0);transform-origin:left;
  }
  html.motion .nav-item > a:not(.btn)::after{transition:transform .16s cubic-bezier(.2,0,0,1)}
  .nav-item > a:not(.btn):hover::after,
  .nav-item > a:not(.btn)[aria-current="page"]::after{transform:scaleX(1)}
}
.nav-cta{margin-left:12px}

/* mega-menu panels: white, hairline, generous padding */
.menu{
  display:none;position:absolute;top:100%;left:0;min-width:280px;
  background:var(--paper);border:1px solid var(--hairline);
  padding:28px 32px;z-index:110;
}
.menu.menu-wide{display:none;min-width:580px;grid-template-columns:1fr 1fr;gap:0 48px}
.nav-item:hover > .menu,
.nav-item:focus-within > .menu,
.nav-item.open > .menu{display:block}
.nav-item:hover > .menu-wide,
.nav-item:focus-within > .menu-wide,
.nav-item.open > .menu-wide{display:grid}
/* panel entrance: fade + 6px rise on open, snap on close (display:none).
   Desktop only; mobile panels are static blocks. */
@media(min-width:1025px){
  html.motion .nav-item:hover > .menu,
  html.motion .nav-item:focus-within > .menu,
  html.motion .nav-item.open > .menu{animation:v2-menu .16s cubic-bezier(.2,0,0,1)}
}
@keyframes v2-menu{from{opacity:0;transform:translateY(6px)}}
.menu-head{
  display:block;font:500 11px/1.4 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
  padding-bottom:10px;margin-bottom:8px;border-bottom:1px solid var(--hairline);
}
.menu-head:hover,.menu-head:focus-visible{color:var(--ink)}
.menu a.mi{
  display:block;padding:7px 0;font:400 15px/1.5 var(--sans);
  color:var(--body);white-space:nowrap;
}
.menu a.mi:hover,.menu a.mi:focus-visible{
  color:var(--ink);text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;
}
.menu-col{padding:2px 0}
.nav-toggle{
  display:none;border:1px solid var(--ink);
  font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;
  padding:10px 16px;color:var(--ink);border-radius:0;
}

/* "/" hint chip: quiet, shown only when JS is running */
.nav-hint{
  display:none;align-items:center;gap:8px;margin-left:10px;
  border:1px solid var(--hairline);background:var(--paper);color:var(--muted);
  font:400 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  padding:9px 12px;border-radius:0;
}
.nav-hint kbd{font:500 11px/1 var(--mono);color:var(--ink);border:1px solid var(--hairline);padding:2px 6px}
.nav-hint:hover{border-color:var(--muted);color:var(--ink)}
html.js .nav-hint{display:inline-flex}
@media(max-width:1024px){html.js .nav-hint{display:none}}

/* full-screen menu at 1024 */
@media(max-width:1024px){
  .nav{
    display:none;position:fixed;top:var(--head-h);left:0;right:0;bottom:0;
    background:var(--paper);overflow-y:auto;
    flex-direction:column;align-items:stretch;gap:0;
    padding:16px var(--gutter) 56px;
  }
  .site-head.open .nav{display:flex}
  .nav-toggle{display:inline-block}
  .nav-item > a{
    display:block;padding:18px 0;border-bottom:1px solid var(--hairline);
    font-size:20px;font-weight:600;
  }
  .nav-item > a:hover,.nav-item > a[aria-current="page"]{text-decoration:none}
  .menu,.menu.menu-wide{
    display:block;position:static;border:0;min-width:0;
    padding:8px 0 20px;background:transparent;
  }
  .nav-item:hover > .menu-wide,
  .nav-item:focus-within > .menu-wide,
  .nav-item.open > .menu-wide{display:block}
  .menu a.mi{white-space:normal;font-size:16px;padding:9px 0}
  .menu-head{margin-top:12px}
  .nav-cta{margin:28px 0 0}
  .nav-cta .btn{display:block}
}

/* embedded tool mode (?embed=1): strip page + app-shell chrome so a tool can be iframed inline */
html.rs-embed .site-head,
html.rs-embed .lv-shell-chrome,
html.rs-embed .lv-utility-bar,
html.rs-embed .page-hero,
html.rs-embed .site-foot,
html.rs-embed .cta-band,
html.rs-embed .skip-link{display:none!important}
html.rs-embed,
html.rs-embed body{background:var(--paper)!important;padding-bottom:0!important}
html.rs-embed .section:first-of-type{padding-top:clamp(20px,3vw,28px)}
/* embedded in a dynamically-sized iframe: skip scroll-reveal so the tool is always visible */
html.rs-embed [data-reveal]{opacity:1!important;transform:none!important}

/* ---------- sections ---------- */
.section{padding:clamp(44px,5vw,72px) 0}
.section-rule{border-top:1px solid var(--hairline)}
.band{background:var(--panel)}
.section-head{margin-bottom:clamp(28px,3.5vw,44px)}
.section-head h2{max-width:24ch}
.section-head .lede{margin-top:20px}

/* ---------- scroll reveal, motion-gated, one-time only ---------- */
/* Content never re-hides: JS adds .in-view once and unobserves.
   Without JS the .motion class is never added, so everything is visible.
   Animation (not transition) so hover transitions on the same element
   (cards) stay instant. Direct children of [data-reveal-group] get
   data-reveal plus a JS-assigned --stagger index (60ms steps, cap 5). */
html.motion [data-reveal]{opacity:0;transform:translateY(12px)}
html.motion [data-reveal].in-view{
  animation:v2-reveal .24s ease-out both;
  animation-delay:calc(var(--stagger,0) * 60ms);
}
@keyframes v2-reveal{to{opacity:1;transform:none}}

/* ---------- hero load choreography ---------- */
/* .hero-seq elements rise 10px and fade in on load, ordered by an
   inline --rd delay (eyebrow 0ms, H1 lines +80ms steps, lede 180ms,
   CTAs 260ms, trust strip / fact row 340ms). Motion-gated: without JS
   or with reduced motion everything is simply visible. */
html.motion .hero-seq{animation:v2-rise .42s cubic-bezier(.2,0,0,1) both;animation-delay:var(--rd,0ms)}
@keyframes v2-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
html.motion h1.hero-seq,
html.motion h1 .hero-seq{animation:none;opacity:1;transform:none}
.hero-line{display:inline-block}

/* ---------- homepage hero ---------- */
.hero{padding:clamp(64px,8vw,112px) 0 clamp(56px,6vw,88px)}
.hero-grid{
  display:grid;grid-template-columns:7fr 5fr;
  gap:clamp(40px,5vw,80px);align-items:center;
}
.hero-grid > *{min-width:0}
@media(max-width:1024px){.hero-grid{grid-template-columns:1fr;gap:56px}}
.hero h1{
  font-family:var(--bbh);font-weight:400;
  font-size:clamp(34px,10.5vw,96px);line-height:.98;letter-spacing:.01em;
  text-transform:uppercase;
}
/* two-column hero: size the H1 to its 7fr track so the long first line
   never spills into the schematic column. BBH sets tighter at poster
   size, so open the tracking a touch at desktop scale. */
@media(min-width:1025px){
  .hero h1{font-size:min(78px,5.7vw);letter-spacing:.005em}
}
.hero .lede{margin-top:28px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}

/* ---------- interior page hero ---------- */
.page-hero{padding:clamp(72px,8vw,112px) 0 clamp(48px,5vw,72px)}
.page-hero .lede{margin-top:24px}
.page-hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.fact-row{
  display:flex;flex-wrap:wrap;gap:14px 40px;margin-top:44px;
  padding-top:20px;border-top:1px solid var(--hairline);
}
.fact-row .fact{font:500 12px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--body);font-variant-numeric:tabular-nums}

/* interior hero with a mini-schematic column: 7/5 split at desktop,
   figure drops below the text column at 1024, hidden at 480. The
   diagram's single oxblood annotation is the page's hero accent moment. */
.page-hero-grid{
  display:grid;grid-template-columns:7fr 5fr;
  gap:clamp(40px,5vw,80px);align-items:center;
}
.page-hero-grid > *{min-width:0}
.page-hero-fig{margin:0}
.page-hero-fig .schem{max-width:480px}
@media(max-width:1024px){
  .page-hero-grid{grid-template-columns:1fr;gap:48px}
  .page-hero-fig .schem{max-width:420px}
}
@media(max-width:480px){.page-hero-fig{display:none}}

/* ---------- org schematic (the one signature) ---------- */
.hero-fig{margin:0}
.schem{display:block;width:100%;height:auto}
.schem text{font-family:var(--mono)}
.schem .n-title{font-size:12px;font-weight:500;fill:var(--ink);letter-spacing:.04em}
.schem .n-sub{font-size:9.5px;fill:var(--muted);letter-spacing:.1em}
.schem .n-box{fill:var(--paper);stroke:var(--ink);stroke-width:1}
.schem .n-box-ext{fill:var(--paper);stroke:var(--muted);stroke-width:1;stroke-dasharray:3 4}
.schem .wire{fill:none;stroke:var(--ink);stroke-width:1}
.schem .wire-ext{fill:none;stroke:var(--faint);stroke-width:1;stroke-dasharray:3 4}
.schem .mk-line{stroke:var(--accent);stroke-width:1;fill:none}
.schem .mk-text{fill:var(--accent);font-size:10px;font-weight:500;letter-spacing:.08em}
/* mini-schematic vocabulary (PAGE-KIT "Diagrams"): compact node label,
   ink detail strokes inside nodes, and the one accent-stroked node a
   diagram may spend its oxblood on instead of a mark. */
.schem .n-mini{font-size:10px;font-weight:500;fill:var(--ink);letter-spacing:.06em}
/* Services hero rail: fixed 76px boxes, so ease the long labels
   ("Quick Start", "Health Check") off the box edges with smaller, tighter text. */
.schem-svc .n-mini{font-size:8.5px;letter-spacing:.03em}
.schem .glyph{fill:none;stroke:var(--ink);stroke-width:1}
.schem .n-box-acc{fill:var(--paper);stroke:var(--accent);stroke-width:1}
/* Draw orchestration: wires draw, nodes register, marks land last.
   Every animated .wire path MUST carry pathLength="1" in the SVG so the
   dasharray/dashoffset draw completes to a solid line. Dashed .wire-ext
   paths must NOT carry pathLength (it would break the dash pattern);
   they fade with class="wire-ext node". JS adds .draw when the figure
   enters view. Without JS or with reduced motion the schematic renders
   complete and static. */
html.motion .schem .wire{stroke-dasharray:1;stroke-dashoffset:1}
html.motion .schem .node{opacity:0}
html.motion .schem .mark{opacity:0}
html.motion .schem.draw .wire{animation:v2-draw .6s ease-out forwards;animation-delay:var(--d,.8s)}
html.motion .schem.draw .node{animation:v2-fadein .4s ease-out forwards;animation-delay:var(--d,.5s)}
html.motion .schem.draw .mark{animation:v2-fadein .5s ease-out forwards;animation-delay:2s}
@keyframes v2-draw{to{stroke-dashoffset:0}}
@keyframes v2-fadein{to{opacity:1}}

/* ---------- trust strip ---------- */
.trust{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.trust-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 40px;
  padding:18px 0;
}
.trust-item{
  font:500 12px/1.6 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--body);
  font-variant-numeric:tabular-nums;
}
/* homepage instance gets extra vertical breathing room */
.trust-roomy .trust-row{padding:38px 0}
.trust-logos{display:flex;align-items:center;gap:24px;margin-left:auto}
.trust-logos img{height:30px;width:auto;filter:grayscale(1);opacity:.8}
@media(max-width:768px){.trust-logos{margin-left:0}}

/* ---------- cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:1024px){.card-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.card-grid{grid-template-columns:1fr}}
.card{
  display:flex;flex-direction:column;gap:14px;
  border:1px solid var(--hairline);padding:32px;background:var(--paper);
}
html.motion .card{transition:border-color .18s}
.card:hover{border-color:var(--ink)}
/* Informational summary card (not a link): no hover affordance. */
.card-static{cursor:default}
.card-static:hover{border-color:var(--hairline)}
/* Spec footer: timeline + pricing pinned to the card bottom. */
.card-spec{margin-top:auto;padding-top:14px;border-top:1px solid var(--hairline);display:flex;flex-direction:column;gap:8px}
.card-spec > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.card-spec dt{font:500 11px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.card-spec dd{font:500 13px/1.5 var(--sans);color:var(--ink);text-align:right}
.card h3{font-size:19px}
.card p{font-size:15.5px;color:var(--muted)}
.card-fact{font:500 12px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--body)}
.card-more{
  margin-top:auto;padding-top:10px;display:flex;align-items:baseline;gap:8px;
  font:500 15px/1 var(--sans);color:var(--ink);
}
/* when a spec table already pins to the card bottom, the more-link follows it */
.card-spec + .card-more{margin-top:0}
/* card icon: 28px rendered, ink, above the title. Snippets in PAGE-KIT. */
.card-ico{display:block;width:28px;height:28px;color:var(--ink);flex:0 0 auto}

/* flip cards (capabilities): click / keyboard to reveal the back face */
.flip-card{
  position:relative;min-height:clamp(268px,23vw,300px);
  perspective:1400px;cursor:pointer;
}
.flip-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.flip-card-inner{position:absolute;inset:0;transform-style:preserve-3d}
html.motion .flip-card-inner{transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.flip-card.is-flipped .flip-card-inner{transform:rotateY(180deg)}
.flip-face{
  position:absolute;inset:0;overflow:auto;
  display:flex;flex-direction:column;gap:14px;
  border:1px solid var(--hairline);padding:32px;background:var(--paper);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.flip-back{transform:rotateY(180deg)}
html.motion .flip-face{transition:border-color .18s}
.flip-card:hover .flip-face{border-color:var(--ink)}
.flip-card h3{font-size:19px}
.flip-card p{font-size:15.5px;color:var(--muted)}
.flip-placeholder{font-style:italic;color:var(--faint)}
.flip-cue{
  margin-top:auto;padding-top:10px;
  font:500 12px/1.6 var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
}

/* arrow nudge: works inside cards and on any text link carrying .arr */
.arr{display:inline-block}
html.motion .arr{transition:transform .18s}
a:hover .arr,a:focus-visible .arr,.card:hover .arr{transform:translateX(4px)}

/* industries: editorial long-list (name | description) */
.ind-row{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(16px,3vw,48px);
  padding:clamp(22px,3vw,34px) 0;border-top:1px solid var(--hairline);
}
.ind-row:first-child{border-top:0;padding-top:0}
.ind-row h3{font-size:clamp(20px,2vw,24px)}
.ind-row p{color:var(--muted);font-size:16px;max-width:60ch}
.ind-copy{min-width:0}
.ind-kicker{
  display:block;margin-bottom:9px;
  font:500 11px/1.6 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.ind-link{display:inline-block;margin-top:15px;font-size:14px}
@media(max-width:700px){.ind-row{grid-template-columns:1fr;gap:10px}}

.industry-tracks{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(36px,5vw,56px);
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
}
.industry-track{
  display:flex;flex-direction:column;gap:10px;min-width:0;
  padding:26px clamp(20px,2.5vw,32px) 28px 0;color:inherit;
}
.industry-track + .industry-track{
  border-left:1px solid var(--hairline);
  padding-left:clamp(20px,2.5vw,32px);
}
.industry-track h3{font-size:clamp(19px,1.8vw,23px)}
.industry-track p{font-size:15px;line-height:1.6;color:var(--muted)}
.industry-track .card-more{margin-top:auto;padding-top:12px}
.industry-track:hover h3,.industry-track:focus-visible h3{color:var(--accent)}
@media(max-width:768px){
  .industry-tracks{grid-template-columns:1fr}
  .industry-track{padding:24px 0}
  .industry-track + .industry-track{
    border-left:0;border-top:1px solid var(--hairline);padding-left:0;
  }
}

/* quiet inline capability links */
.caplinks{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 0;
  margin-top:clamp(36px,4vw,56px);
}
.caplinks-label{
  font:500 11px/1.6 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);padding-right:16px;
}
.caplinks a{
  font:400 14px/1.6 var(--sans);color:var(--muted);
  padding:0 12px;border-left:1px solid var(--hairline);
}
.caplinks a:first-of-type{border-left:0;padding-left:0}
.caplinks a:hover,.caplinks a:focus-visible{
  color:var(--ink);text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;
}

/* ---------- split layout + stats ---------- */
.split{display:grid;grid-template-columns:7fr 5fr;gap:clamp(40px,5vw,80px);align-items:start}
@media(max-width:1024px){.split{grid-template-columns:1fr;gap:48px}}
.stats{display:flex;flex-direction:column;gap:36px}
.stat{border-top:1px solid var(--hairline);padding-top:20px}
.stat-fig{
  font:500 clamp(34px,3.5vw,44px)/1.1 var(--mono);
  font-variant-numeric:tabular-nums;color:var(--ink);display:block;
}
.stat-lbl{
  display:block;margin-top:8px;
  font:400 12px/1.6 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
@media(max-width:1024px){.stats{flex-direction:row;flex-wrap:wrap;gap:36px 64px}.stats .stat{flex:1 1 200px}}
.split-links{display:flex;flex-wrap:wrap;gap:14px 32px;align-items:baseline;margin-top:36px}

/* ---------- principles list (how we work) ---------- */
.principles{border-top:1px solid var(--hairline)}
.principles li{
  display:grid;grid-template-columns:88px 1fr;gap:24px;
  padding:clamp(32px,4vw,48px) 0;border-bottom:1px solid var(--hairline);
  align-items:start;
}
.principle-no{
  font:500 14px/1.9 var(--mono);letter-spacing:.1em;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.principles h3{margin-bottom:10px}
.principles p{max-width:60ch;color:var(--body)}
@media(max-width:480px){
  .principles li{grid-template-columns:1fr;gap:8px}
}
/* process variant: oversized JBM step numerals */
.steps .principle-no{font-size:24px;line-height:1.3;letter-spacing:.04em}

/* ---------- editorial quotes ---------- */
.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,72px)}
@media(max-width:768px){.quote-grid{grid-template-columns:1fr;gap:48px}}
.quote{position:relative;border-left:1px solid var(--accent);padding-left:clamp(20px,2.5vw,32px);padding-top:44px}
/* oversized hanging open-quote, ink at 12% opacity, above-left of the text */
.quote::before{
  content:"\201C";position:absolute;top:-8px;left:clamp(20px,2.5vw,32px);
  font:700 64px/1 var(--sans);color:var(--ink);opacity:.12;
  pointer-events:none;user-select:none;
}
.quote blockquote{
  font:400 clamp(20px,1.9vw,23px)/1.5 var(--sans);color:var(--ink);
  letter-spacing:-.008em;
}
.quote-attr{
  display:block;margin-top:22px;
  font:500 12px/1.6 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.quote-src{display:block;margin-top:4px;font:400 12px/1.6 var(--mono);color:var(--muted)}
.quote-cta{margin-top:clamp(40px,5vw,56px)}

/* proof: AppExchange rating badge — lead evidence at the top of the section */
.rating-badge{
  display:flex;align-items:center;gap:clamp(20px,3vw,44px);flex-wrap:wrap;
  margin-bottom:clamp(40px,5vw,64px);
  padding:clamp(22px,2.6vw,30px) clamp(24px,3vw,38px);
  background:var(--panel);border-left:3px solid var(--accent);
  text-decoration:none;color:inherit;
}
.rating-badge__score{display:flex;align-items:center;gap:18px}
.rating-stars{display:inline-flex;gap:5px}
.rb-star{width:24px;height:24px;fill:var(--accent);display:block}
.rating-num{
  font:500 clamp(42px,4.6vw,58px)/1 var(--mono);
  font-variant-numeric:tabular-nums;
  color:var(--ink);letter-spacing:-.01em;
}
.rating-badge__meta{display:flex;flex-direction:column;gap:8px}
.rating-lbl{
  font:500 12px/1.5 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.rating-link{
  font:500 14px/1.4 var(--sans);color:var(--accent);
  display:inline-flex;align-items:center;gap:6px;
}
.rating-arr{transition:transform .18s}
html.motion .rating-badge:hover .rating-arr,
html.motion .rating-badge:focus-visible .rating-arr{transform:translateX(3px)}
.rating-badge:hover .rating-link,.rating-badge:focus-visible .rating-link{color:var(--accent-dark)}
.rating-badge:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- proof system: snippet cards, snippet wall, proof line ---------- */
/* Review text is law: verbatim substrings of .content/reviews.md only. */
.snip-wall{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  margin-top:clamp(40px,5vw,64px);
}
@media(max-width:768px){.snip-wall{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.snip-wall{grid-template-columns:1fr}}
.snip{
  display:flex;flex-direction:column;gap:18px;
  border:1px solid var(--hairline);background:var(--paper);padding:28px;
}
.snip blockquote{font:400 17.5px/1.55 var(--sans);color:var(--ink);letter-spacing:-.005em}
.snip figcaption{margin-top:auto}
.snip-attr{
  display:block;font:500 11px/1.6 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.snip-src{display:block;margin-top:2px;font:400 11px/1.6 var(--mono);color:var(--muted)}
/* proof line: one quiet inline snippet on interior pages */
.proof-line{
  max-width:68ch;border-top:1px solid var(--hairline);
  padding-top:22px;margin-top:clamp(40px,5vw,64px);
}
.proof-line blockquote{font:400 17px/1.6 var(--sans);font-style:normal;color:var(--ink)}
.proof-line figcaption{
  display:flex;flex-wrap:wrap;gap:2px 16px;align-items:baseline;margin-top:10px;
}
.proof-line .snip-src{margin-top:0}

/* ---------- team block ---------- */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px)}
@media(max-width:768px){.team-grid{grid-template-columns:1fr;gap:40px}}
.person img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  filter:grayscale(1) contrast(1.06);
  border:1px solid var(--hairline);
}
.person-name{margin-top:18px;font:600 17px/1.4 var(--sans);color:var(--ink)}
.person-role{font:400 15px/1.5 var(--sans);color:var(--muted)}
/* quiet caption row under a portrait (team page: certs or focus area) */
.person-note{margin-top:8px;font:400 12px/1.6 var(--mono);color:var(--muted)}
.team-cta{margin-top:clamp(36px,4vw,52px)}

/* ---------- full-bleed ink band (hub pages, one strong claim) ---------- */
.ink-band{background:var(--ink);color:var(--on-dark)}
.ink-band .eyebrow{color:var(--on-dark)}
.ink-band h2{color:#fff;max-width:24ch}
.ink-band .lede{color:var(--on-dark);max-width:52ch;margin-top:20px}
.ink-band-fact{
  display:inline-block;margin-top:36px;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.14);
  font:500 12px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-dark);font-variant-numeric:tabular-nums;
}

/* ---------- CTA band ---------- */
.cta-band{background:var(--ink);color:var(--on-dark)}
.cta-band h2{color:#fff;max-width:20ch}
.cta-band p{margin-top:20px;max-width:52ch}
.cta-band-ctas{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;margin-top:40px}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:var(--on-dark)}
/* hairline-separated top row: small BBH wordmark left, one line right */
.foot-top{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:16px 40px;flex-wrap:wrap;
  padding:clamp(32px,3.5vw,48px) 0 22px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.foot-top .brand-word{color:#fff;font-size:22px}
.foot-top p{font:400 15px/1.6 var(--sans);color:var(--on-dark)}
.foot-links{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(28px,4vw,56px);padding:clamp(34px,4vw,52px) 0;
}
.foot-col{min-width:0}
.foot-col-title{
  margin-bottom:14px;font:500 11px/1.4 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;color:#fff;
}
.foot-col-title a{color:#fff}
.foot-col ul{display:grid;gap:0}
.foot-badges{display:flex;gap:24px;align-items:center;margin-top:28px;flex-wrap:wrap}
.foot-badges img{height:52px;width:auto;filter:grayscale(1);opacity:.72}
.foot-badges img.badge-tint{filter:grayscale(1);opacity:.85}
/* badges as their own row (new footer canon): brand marks left, social right */
.foot-badges-row{margin-top:0;padding:0 0 clamp(44px,5vw,60px);justify-content:space-between}
.foot-badge-group{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.foot-social{color:var(--on-dark);display:inline-flex;align-items:center;justify-content:center;transition:color .15s ease}
.foot-social svg{display:block;width:46px;height:46px}
.foot-social:hover,.foot-social:focus-visible{color:#fff}
.foot-col li a{display:inline-block;padding:5px 0;font:400 15px/1.5 var(--sans);color:var(--on-dark)}
.foot-col li a:hover,.foot-col li a:focus-visible{
  color:#fff;text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;
}
@media(max-width:900px){
  .foot-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 48px}
}
@media(max-width:520px){
  .foot-links{grid-template-columns:1fr;gap:30px}
}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.14);
  padding:26px 0 44px;
  display:flex;flex-wrap:wrap;gap:10px 36px;align-items:baseline;
  font:400 12px/1.7 var(--mono);color:var(--faint);
}
.foot-bottom a{color:var(--on-dark)}
.foot-bottom a:hover,.foot-bottom a:focus-visible{color:#fff;text-decoration:underline}
/* non-affiliation disclaimer, its own full-width line spanning the whole row */
.foot-disclaimer{flex-basis:100%;color:var(--faint)}
/* self-credit, its own line at the very bottom */
.foot-credit{flex-basis:100%;color:var(--faint)}

/* ---------- forms ---------- */
.form{max-width:760px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:768px){.form-grid{grid-template-columns:1fr}}
.form-field{display:flex;flex-direction:column;gap:8px}
.form-field.full{grid-column:1 / -1}
.form-field label{
  font:500 12px/1.4 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);
}
.form-field label .req{color:var(--accent)}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="url"],
.form-field select,
.form-field textarea{
  width:100%;border:1px solid var(--hairline);border-radius:0;
  background:var(--paper);padding:13px 14px;
  font:400 16px/1.5 var(--sans);color:var(--ink);
}
.form-field input:hover,.form-field select:hover,.form-field textarea:hover{border-color:var(--muted)}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  outline:2px solid var(--accent);outline-offset:1px;border-color:var(--ink);
}
.form-field ::placeholder{color:var(--faint)}
.form-field select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0 L5 6 L10 0' fill='%230A0A0A'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;
}
.form-field textarea{min-height:150px;resize:vertical}
.form-note{font:400 13px/1.6 var(--sans);color:var(--muted)}
.form-actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:18px;align-items:center}

/* ---------- FAQ accordion (native details/summary) ---------- */
.faq{border-top:1px solid var(--hairline)}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:22px 0;cursor:pointer;list-style:none;
  font:500 17px/1.5 var(--sans);color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 22px/1 var(--mono);color:var(--muted);flex:0 0 auto}
html.motion .faq summary::after{transition:transform .22s cubic-bezier(.2,0,0,1)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--accent)}
/* animate open where the platform supports it; closes snap. Progressive:
   unsupported browsers just toggle instantly. Reduced motion is covered
   by the html.motion gate plus the global duration lock. */
@supports (interpolate-size:allow-keywords){
  html.motion .faq details{interpolate-size:allow-keywords}
  html.motion .faq details::details-content{
    block-size:0;overflow:clip;
    transition:block-size .22s cubic-bezier(.2,0,0,1),content-visibility .22s allow-discrete;
  }
  html.motion .faq details[open]::details-content{block-size:auto}
}
.faq .faq-a{padding:0 0 24px;color:var(--body);max-width:68ch}
.faq .faq-a p + p{margin-top:12px}

/* ---------- spec table (scrolls inside its own container) ---------- */
.table-scroll{overflow-x:auto}
.spec-table{width:100%;border-collapse:collapse;font:400 15.5px/1.6 var(--sans);font-variant-numeric:tabular-nums}
.spec-table caption{
  text-align:left;padding-bottom:14px;
  font:500 11px/1.4 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.spec-table th{
  font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  text-align:left;color:var(--muted);
  border-bottom:1px solid var(--ink);padding:12px 16px 12px 0;
}
.spec-table td{
  border-bottom:1px solid var(--hairline);
  padding:16px 16px 16px 0;color:var(--body);vertical-align:top;
}
.spec-table td:first-child{color:var(--ink);font-weight:500}
.spec-table tbody tr:hover td{background:var(--panel)}
.spec-table .fig{font:500 14px/1.6 var(--mono)}

/* stat count-up targets: tabular so nothing shifts while counting */
[data-count]{font-variant-numeric:tabular-nums}

/* ---------- quick navigation (palette) ---------- */
/* Injected by /assets/site.js. Progressive enhancement only:
   the full nav works without it. */
.qn{position:fixed;inset:0;z-index:200}
.qn[hidden]{display:none}
.qn-backdrop{position:absolute;inset:0;background:#000;opacity:.4}
.qn-panel{
  position:relative;max-width:640px;margin:10vh auto 0;
  background:var(--paper);border:1px solid var(--hairline);
}
html.motion .qn-panel{animation:v2-qn .16s cubic-bezier(.2,0,0,1)}
@keyframes v2-qn{from{opacity:0;transform:scale(.985)}}
@media(max-width:768px){.qn-panel{margin:6vh 16px 0}}
.qn-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:14px 20px;border-bottom:1px solid var(--hairline);
}
.qn-title{
  font:500 11px/1.6 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.qn-esc{
  border:1px solid var(--hairline);border-radius:0;
  font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  padding:6px 10px;color:var(--muted);
}
.qn-esc:hover{color:var(--ink);border-color:var(--muted)}
.qn-search{padding:6px 20px;border-bottom:1px solid var(--hairline)}
.qn-input{
  width:100%;border:0;background:transparent;padding:10px 0;
  font:400 16px/1.5 var(--sans);color:var(--ink);
}
.qn-input:focus{outline:none}
.qn-input::placeholder{color:var(--faint)}
.qn-list{max-height:52vh;overflow-y:auto;padding:8px 0}
.qn-row{
  display:flex;gap:16px;align-items:baseline;justify-content:space-between;
  padding:10px 20px 10px 18px;font:400 15px/1.5 var(--sans);color:var(--ink);
  border-left:2px solid transparent;
}
.qn-name{flex:0 1 auto}
.qn-path{font:400 12px/1.5 var(--mono);color:var(--muted);word-break:break-all;text-align:right}
.qn-row.active,.qn-row:hover{background:var(--panel)}
.qn-row.active{border-left-color:var(--accent)}
.qn-row.active .qn-name{font-weight:600}
.qn-empty{padding:22px 20px;color:var(--muted);font-size:14px}

/* ---------- utilities ---------- */
.u-muted{color:var(--muted)}
.u-faint{color:var(--faint)}
.u-mt-1{margin-top:8px}
.u-mt-2{margin-top:16px}
.u-mt-3{margin-top:24px}
.u-mt-4{margin-top:40px}
.u-mt-5{margin-top:64px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:32px}
@media(max-width:768px){.grid-2{grid-template-columns:1fr}}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
@media(max-width:1024px){.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.grid-3{grid-template-columns:1fr}}

/* ---------- reduced motion: second lock ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-delay:0ms !important;
    transition-duration:.01ms !important;
  }
}