:root{
    --bg:#ffffff;
    --bg-alt:#f4f4f6;
    --surface:#ffffff;
    --navy:#2e63c6;
    --navy-soft:#2a5cba;
    --ink:#0b0d12;
    --text:#2b2f39;
    --muted:#6b7180;
    --primary:#2e63c6;
    --primary-700:#234fa3;
    --primary-050:#eaf1fb;
    --accent:#2e63c6;
    --accent-700:#234fa3;
    --border:#e6e6ea;
    --ring:rgba(46,99,198,.35);
    --shadow-sm:0 1px 2px rgba(11,13,18,.05),0 1px 3px rgba(11,13,18,.05);
    --shadow-md:0 1px 2px rgba(11,13,18,.04),0 8px 20px -12px rgba(11,13,18,.14);
    --shadow-lg:0 24px 56px -22px rgba(11,13,18,.22);
    --radius:10px;
    --radius-sm:8px;
    --radius-lg:16px;
    --maxw:1200px;
    --space:clamp(80px,10vw,140px);
    --font-head:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  }
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{
    margin:0;font-family:var(--font-body);color:var(--text);background:var(--bg);
    line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{font-family:var(--font-head);color:var(--ink);line-height:1.1;margin:0;letter-spacing:-.02em;font-weight:600}
  p{margin:0}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  ::selection{background:var(--primary);color:#fff}
  .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
  .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:600;
    font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
    background:var(--bg-alt);border:1px solid var(--border);padding:7px 14px;border-radius:999px;margin-bottom:22px}
  .services .eyebrow,.frameworks .eyebrow,.contact .eyebrow{background:#fff}
  .section{padding:var(--space) 0}
  .section-head{max-width:720px;margin-bottom:52px}
  .section-head.center{margin-left:auto;margin-right:auto;text-align:center}
  h2.title{font-size:clamp(2rem,4.4vw,3.2rem);text-transform:uppercase;font-weight:700;letter-spacing:-.02em;line-height:1.02}
  .lead{color:var(--muted);font-size:clamp(1.02rem,1.6vw,1.18rem);margin-top:20px}

  /* buttons */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;
    font-family:var(--font-head);font-weight:600;font-size:.98rem;padding:14px 24px;border-radius:12px;
    border:1px solid transparent;transition:transform .18s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
    will-change:transform}
  .btn:focus-visible{outline:none;box-shadow:0 0 0 4px var(--ring)}
  .btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 20px -8px rgba(46,99,198,.5)}
  .btn-primary:hover{background:var(--accent-700);transform:translateY(-2px);box-shadow:0 14px 28px -10px rgba(46,99,198,.55)}
  .btn-ghost{background:#fff;color:var(--ink);border-color:var(--border);box-shadow:var(--shadow-sm)}
  .btn-ghost:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px)}
  .btn-dark{background:var(--primary);color:#fff}
  .btn-dark:hover{background:var(--primary-700);transform:translateY(-2px)}
  .btn-lg{padding:16px 30px;font-size:1.02rem}
  .btn svg{width:18px;height:18px}

  /* header */
  header.site{position:fixed;inset:0 0 auto 0;z-index:60;transition:background .3s ease,box-shadow .3s ease,border-color .3s ease;
    border-bottom:1px solid transparent}
  header.site.scrolled{background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(14px);
    -webkit-backdrop-filter:saturate(180%) blur(14px);box-shadow:var(--shadow-sm);border-bottom-color:var(--border)}
  /* Header height is driven by the logo, not the other way round. The wordmark's cap-height
     is only ~21% of the logo file's box (815x290 — the cube mark is much taller than the
     text), so a 54px logo rendered the letters at 11.4px against 15.4px nav links, i.e. a
     quarter smaller. 66px puts the wordmark at ~13.9px, near parity; the nav grew to 92px
     to keep the breathing room either side. Hero top padding below tracks this. */
  .nav{display:flex;align-items:center;justify-content:space-between;height:92px}
  .brand{display:flex;align-items:center;gap:11px;font-family:var(--font-head);font-weight:700;font-size:1.16rem;color:var(--ink);letter-spacing:-.02em}
  .brand-logo{height:66px;width:auto;display:block}
  .footer-logo{height:56px;filter:brightness(0) invert(1)}
  .nav-links{display:flex;align-items:center;gap:30px}
  .nav-links a{font-weight:500;font-size:.96rem;color:var(--text);position:relative;padding:6px 0}
  .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--primary);
    transition:right .25s ease;border-radius:2px}
  .nav-links a:hover{color:var(--ink)}
  .nav-links a:hover::after{right:0}
  .nav-cta{display:flex;align-items:center;gap:14px}
  .menu-btn{display:none;background:none;border:1px solid var(--border);border-radius:10px;padding:9px;cursor:pointer;color:var(--ink)}
  .menu-btn svg{width:22px;height:22px;display:block}

  /* mega menu */
  .nav-trigger{display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;
    font-family:var(--font-body);font-weight:500;font-size:.96rem;color:var(--text);padding:6px 0}
  .nav-trigger .chev{width:16px;height:16px;transition:transform .3s ease}
  .nav-trigger[aria-expanded="true"] .chev{transform:rotate(180deg)}
  .nav-trigger[aria-expanded="true"]{color:var(--ink)}
  .mega-wrap{display:grid;grid-template-rows:0fr;opacity:0;background:#fff;
    transition:grid-template-rows .4s cubic-bezier(.4,0,.2,1),opacity .3s ease;border-top:1px solid transparent}
  .mega-wrap.open{grid-template-rows:1fr;opacity:1;border-top-color:var(--border)}
  .mega-inner{overflow:hidden;min-height:0}
  .mega-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:30px;padding:34px 0 42px}
  .mega-col h4{font-family:var(--font-head);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:0 0 2px}
  .mega-col .desc{font-size:.8rem;color:var(--muted);margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid var(--border)}
  .mega-col a{display:block;font-size:.95rem;font-weight:500;color:var(--text);padding:8px 0;transition:color .18s ease,transform .18s ease}
  .mega-col a:hover{color:var(--primary);transform:translateX(4px)}
  /* About Us panel: fewer, wider columns than Services. A full-width panel holding one
     link reads as broken, so the first column carries a short company statement. */
  .mega-cols.about{grid-template-columns:1.7fr 1fr 1fr}
  .mega-blurb{font-size:.94rem;line-height:1.7;color:var(--muted);margin:0;max-width:48ch}
  header.site.menu-open{background:#fff;box-shadow:var(--shadow-md);border-bottom-color:var(--border)}
  .mega-backdrop{position:fixed;inset:0;background:rgba(11,13,18,.18);opacity:0;visibility:hidden;
    transition:opacity .3s ease,visibility .3s;z-index:55}
  .mega-backdrop.open{opacity:1;visibility:visible}
  @media (max-width:760px){.nav-trigger,.mega-wrap,.mega-backdrop{display:none}}

  /* mobile drawer */
  .drawer{position:fixed;inset:0;z-index:70;background:rgba(10,23,48,.4);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}
  .drawer.open{opacity:1;visibility:visible}
  .drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(86vw,360px);background:#fff;padding:24px;
    display:flex;flex-direction:column;gap:6px;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-lg)}
  .drawer.open .drawer-panel{transform:translateX(0)}
  .drawer-panel a{padding:14px 8px;font-family:var(--font-head);font-weight:600;font-size:1.05rem;color:var(--ink);border-bottom:1px solid var(--border)}
  .drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
  .drawer-close{background:none;border:none;cursor:pointer;color:var(--ink);padding:6px}
  .drawer-close svg{width:26px;height:26px}

  /* hero */
  .hero{position:relative;padding-top:170px;padding-bottom:100px;overflow:hidden;
    background:radial-gradient(1000px 520px at 82% -10%,#ecefff 0%,rgba(236,239,255,0) 58%),
               linear-gradient(180deg,#f6f6f8 0%,#ffffff 72%)}
  #hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:1;pointer-events:none}
  .hero .wrap{position:relative;z-index:2}
  .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
  .hero-badge{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--border);
    box-shadow:var(--shadow-sm);border-radius:999px;padding:7px 15px 7px 9px;font-size:.85rem;font-weight:500;color:var(--text);margin-bottom:24px}
  .hero-badge .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(46,99,198,.15)}
  .hero h1{font-size:clamp(2.5rem,6vw,4.7rem);line-height:.98;font-weight:700;text-transform:uppercase;letter-spacing:-.025em}
  .hero h1 .grad{color:var(--primary)}
  .hero p.sub{font-size:clamp(1.05rem,1.8vw,1.22rem);color:var(--muted);margin-top:22px;max-width:560px}
  .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
  .hero-meta{display:flex;align-items:center;gap:18px;margin-top:30px;color:var(--muted);font-size:.9rem;flex-wrap:wrap}
  .hero-meta .sep{width:1px;height:16px;background:var(--border)}
  .hero-meta strong{color:var(--ink);font-weight:600}

  /* hero card / scorecard */
  .score-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:28px;position:relative}
  .score-card::before{content:"";position:absolute;inset:0;border-radius:var(--radius-lg);padding:1px;
    background:linear-gradient(140deg,rgba(46,99,198,.45),rgba(46,99,198,.2),transparent 62%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
  .score-card h3{font-size:1.15rem;margin-bottom:4px}
  .score-card .sc-sub{font-size:.88rem;color:var(--muted);margin-bottom:18px}
  .score-ring{display:flex;align-items:center;gap:18px;margin-bottom:18px}
  .ring{position:relative;width:96px;height:96px;flex:none}
  .ring svg{transform:rotate(-90deg);width:96px;height:96px}
  .ring .rv{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:1.4rem;color:var(--ink)}
  .pillars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
  .pillars li{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--text)}
  .pillars li svg{width:17px;height:17px;color:var(--accent);flex:none}
  .score-card .btn{width:100%;margin-top:20px}

  /* logo strip */
  .logos{padding:34px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-alt)}
  .logos .wrap{display:flex;flex-direction:column;align-items:center;gap:26px}
  .logos .lbl{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}

  /* Partner logos. Sources are a mix of wordmarks and square bugs in seven different
     brand colors, so two normalisations happen here:
     1. brightness(0) flattens every mark to one solid silhouette — identical tone
        regardless of source colour, and it rescues the Databricks file, whose
        wordmark ships white-on-transparent and would otherwise vanish on --bg-alt.
     2. heights are set per logo, not shared, so they match by optical mass rather
        than by number. Square bugs carry more height than wide wordmarks, and the
        marks with generous internal padding (Collibra, OpenAI) get more still. */
  .logo-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:20px 44px;list-style:none;margin:0;padding:0}
  .logo-row li{position:relative}
  .logo-row img{display:block;width:auto;filter:brightness(0);opacity:.45}
  .logo-row li{transition-delay:calc(var(--i,0) * 70ms)} /* staggers the .reveal on each logo */
  .logo-row li:nth-child(1){--i:0} .logo-row li:nth-child(2){--i:1} .logo-row li:nth-child(3){--i:2}
  .logo-row li:nth-child(4){--i:3} .logo-row li:nth-child(5){--i:4} .logo-row li:nth-child(6){--i:5}
  .logo-row li:nth-child(7){--i:6} .logo-row li:nth-child(8){--i:7} .logo-row li:nth-child(9){--i:8}

  /* Recolour-on-hover. A filter chain can't hit an exact hex, and brand accuracy matters
     here, so each logo is re-drawn as a mask on ::after and filled with a real colour —
     var(--primary) is the true #2E63C6, not an approximation of it. The <img> stays in the
     markup (alt text, SEO) and is only made transparent. Guarded by @supports: without mask
     support the block never applies and the plain brightness(0) silhouette above still shows. */
  @supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){
    .logo-row img{opacity:0}
    .logo-row li::after{
      content:"";position:absolute;inset:0;background:var(--ink);opacity:.45;
      -webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;
      transition:background-color .28s ease,opacity .28s ease,transform .28s ease}
    /* hover:hover so a tap on touch doesn't leave a logo stuck blue */
    @media (hover:hover){
      .logo-row li:hover::after{background:var(--primary);opacity:1;transform:translateY(-3px)}
    }
  }

  /* Heights are matched by optical mass, not shared — see HANDOFF §5. */
  .lg-snowflake {--logo:url(partners/snowflake.png)}  .lg-snowflake  img{height:34px}
  .lg-databricks{--logo:url(partners/databricks.png)} .lg-databricks img{height:20px}
  .lg-azure     {--logo:url(partners/azure.webp)}     .lg-azure      img{height:26px}
  .lg-alation   {--logo:url(partners/alation.png)}    .lg-alation    img{height:28px}
  .lg-collibra  {--logo:url(partners/collibra.webp)}  .lg-collibra   img{height:52px} /* sparse bar-grid + 29% internal padding */
  .lg-strategy  {--logo:url(partners/strategy.webp)}  .lg-strategy   img{height:22px} /* very heavy letterforms — runs small */
  .lg-mosaic    {--logo:url(partners/mosaic.png)}     .lg-mosaic     img{height:40px} /* rebuilt with alpha — see HANDOFF §5 */
  .lg-openai    {--logo:url(partners/openai.webp)}    .lg-openai     img{height:36px}
  .lg-anthropic {--logo:url(partners/anthropic.svg)}  .lg-anthropic  img{height:35px}

  /* stats band */
  .stats{background:var(--bg)}
  .stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
  .stat{padding:26px 18px;border-radius:var(--radius);background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid var(--border);text-align:center;box-shadow:var(--shadow-sm)}
  .stat .num{font-family:var(--font-head);font-weight:700;font-size:clamp(1.8rem,3.4vw,2.6rem);color:var(--ink);line-height:1}
  .stat .num .suf{color:var(--primary)}
  .stat .lab{margin-top:10px;font-size:.86rem;color:var(--muted);font-weight:500}

  /* manifesto statement */
  .statement{background:var(--bg)}
  .statement .st-row{display:grid;grid-template-columns:1.35fr .9fr;gap:48px;align-items:end}
  .statement .big{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:-.028em;
    font-size:clamp(2rem,5.6vw,4.2rem);line-height:.98;color:var(--ink);margin:0}
  .statement .big em{font-style:normal;color:var(--primary)}
  .statement .st-sub{color:var(--muted);font-size:clamp(1.02rem,1.5vw,1.18rem);max-width:46ch;padding-bottom:6px}
  @media (max-width:760px){.statement .st-row{grid-template-columns:1fr;gap:24px}}

  /* services */
  .services{background:var(--bg-alt)}
/* Alternating section tint. Marvin's rule: no two adjacent sections may share a
   background. .band-tint darkens a light band; .cta-flip lightens the CTA band,
   needed when a page's fixed sections would otherwise seam against it. Case-study
   and solution pages define band-tint inline too; those win by order, same value. */
/* Third surface, used once on the homepage manifesto. It sits between two bands
   that must keep their current tone, so a tint at that position would invert the
   rest of the page. */
.section.statement.band-brand{background:var(--primary);color:#fff}
.section.statement.band-brand .big{color:#fff}
.section.statement.band-brand .big em{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:6px;text-decoration-thickness:3px}
.section.statement.band-brand .st-sub{color:rgba(255,255,255,.86)}
.fb-legal-link{color:inherit;opacity:.85;text-decoration:underline;text-underline-offset:3px;margin-left:14px;font-size:inherit}
.section.band-alt{background:var(--bg-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cta-band.cta-flip{background:#fff}
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm);
    transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;position:relative;overflow:hidden}
  .card::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--primary),var(--accent));transition:width .3s ease}
  .card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:#d3e0f1}
  .card:hover::after{width:100%}
  .card .ico{width:50px;height:50px;border-radius:9px;display:flex;align-items:center;justify-content:center;
    background:#fff;border:1px solid var(--border);color:var(--primary);margin-bottom:18px;transition:border-color .25s,color .25s}
  .card:hover .ico{border-color:var(--primary)}
  .card .ico svg{width:25px;height:25px}
  .card h3{font-size:1.12rem;margin-bottom:10px;text-transform:uppercase;letter-spacing:-.01em}
  .card p{font-size:.95rem;color:var(--muted)}
  .card .more{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-family:var(--font-head);font-weight:600;font-size:.9rem;color:var(--primary)}
  .card .more svg{width:16px;height:16px;transition:transform .2s}
  .card:hover .more svg{transform:translateX(4px)}

  /* approach / contrast */
  .approach{background:var(--bg)}
  .compare{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:12px}
  .comp{border-radius:var(--radius);padding:30px;border:1px solid var(--border)}
  .comp.bad{background:#fff}
  .comp.good{background:var(--navy);border-color:var(--navy);color:rgba(255,255,255,.9);position:relative;overflow:hidden}
  .comp.good::before{content:"";position:absolute;top:-40%;right:-20%;width:340px;height:340px;border-radius:50%;
    background:radial-gradient(circle,rgba(59,130,246,.35),transparent 65%);pointer-events:none}
  .comp h4{font-size:1.1rem;margin-bottom:18px;display:flex;align-items:center;gap:10px}
  .comp.good h4{color:#fff}
  .comp .tag{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:4px 10px;border-radius:999px}
  .comp.bad .tag{background:#f0f0f2;color:#6b7180}
  .comp.good .tag{background:rgba(255,255,255,.2);color:rgba(255,255,255,.92)}
  .comp ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
  .comp li{display:flex;gap:12px;font-size:.97rem;align-items:flex-start}
  .comp li svg{width:20px;height:20px;flex:none;margin-top:1px}
  .comp.bad li svg{color:#9aa3b2}
  .comp.good li svg{color:#fff}
  .comp.good li{color:rgba(255,255,255,.9)}

  /* frameworks */
  .frameworks{background:var(--bg-alt)}
  .fw-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  .fw{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-sm);position:relative;transition:transform .25s,box-shadow .25s}
  .fw:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
  .fw .tm{font-family:var(--font-head);font-weight:700;font-size:1.35rem;color:var(--ink)}
  .fw .tm sup{color:var(--primary);font-size:.7em}
  .fw p{color:var(--muted);margin-top:12px;font-size:.97rem}
  .fw .badge{position:absolute;top:24px;right:24px;width:44px;height:44px;border-radius:9px;background:#fff;border:1px solid var(--border);color:var(--primary);display:flex;align-items:center;justify-content:center}
  .fw .badge svg{width:23px;height:23px}

  /* testimonials */
  .testi{background:var(--bg)}
  .t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .quote{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm);
    display:flex;flex-direction:column;gap:16px;transition:transform .25s,box-shadow .25s}
  .quote:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
  .quote .stars{display:flex;gap:3px;color:var(--primary)}
  .quote .stars svg{width:17px;height:17px}
  .quote p{font-size:.99rem;color:var(--text);line-height:1.62}
  .quote .who{margin-top:auto;display:flex;align-items:center;gap:12px;padding-top:6px}
  .quote .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;
    display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;flex:none;font-size:.95rem}
  .quote .who .r{font-size:.86rem;color:var(--muted);line-height:1.35}
  .quote .who .r strong{display:block;color:var(--ink);font-size:.92rem;font-weight:600}

  /* CTA band */
  /* The CTA band used to be var(--navy) — the same colour as the footer, so the
     page ended in one unbroken slab of blue with no seam between them. It is now
     a light band: the footer becomes the only heavy element, and the primary
     button can be the actual brand blue instead of the white-on-blue workaround
     that existed only because a blue button was invisible on a blue field. */
  .cta-band{background:var(--bg-alt);color:var(--text);position:relative;overflow:hidden;
    border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
  .cta-inner{position:relative;text-align:center;max-width:720px;margin:0 auto}
  .cta-band h2{color:var(--ink);font-size:clamp(1.9rem,4vw,2.8rem)}
  .cta-band p{color:var(--muted);margin-top:16px;font-size:1.1rem}
  .cta-band .hero-actions{justify-content:center}
  .cta-band .btn-primary{background:var(--primary);color:#fff;border-color:var(--primary);
    box-shadow:0 10px 26px -14px rgba(46,99,198,.55)}
  .cta-band .btn-primary:hover{background:var(--primary-700);color:#fff}
  .cta-band .btn-ghost{background:#fff;border-color:var(--border);color:var(--ink)}
  .cta-band .btn-ghost:hover{border-color:var(--primary);color:var(--primary)}

  /* contact */
  .contact{background:var(--bg-alt)}
  .contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
  .contact-info h2{font-size:clamp(1.8rem,3.6vw,2.6rem)}
  /* The intro paragraph and the contact details were different sizes AND
     different colours (muted #6b7180 at up to 1.18rem vs #2b2f39 at 1rem).
     Matched to one treatment. */
  .contact-info .lead{margin-bottom:28px;color:var(--text);font-size:1.04rem}
  .cinfo{display:flex;flex-direction:column;gap:18px;margin-top:8px}
  .cinfo a,.cinfo div{display:flex;align-items:center;gap:14px;color:var(--text);font-size:1.04rem}
  /* Same treatment as the service card icons. Those look like an empty outlined
     square because their #fff fill sits on a white card; here the icon sits
     directly on the tinted section, so the same fill read as a solid white box.
     Transparent gives the identical appearance. */
  .cinfo .ci-ico{width:50px;height:50px;border-radius:9px;background:transparent;
    border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
    color:var(--primary);flex:none;transition:border-color .25s,color .25s}
  .cinfo a:hover .ci-ico{border-color:var(--primary)}
  .cinfo .ci-ico svg{width:25px;height:25px}
  form.lead-form{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-md)}
  .field{margin-bottom:16px}
  .field.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  label{display:block;font-size:.85rem;font-weight:600;color:var(--ink);margin-bottom:7px;font-family:var(--font-head)}
  input,textarea{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:10px;font:inherit;color:var(--ink);background:#fff;transition:border-color .2s,box-shadow .2s}
  input:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--ring)}
  textarea{resize:vertical;min-height:110px}
  .consent{font-size:.8rem;color:var(--muted);margin-top:6px}
  form.lead-form .btn{width:100%;margin-top:8px}
  .form-note{display:none;margin-top:14px;padding:12px 14px;border-radius:10px;background:#eaf1fb;color:#234fa3;font-size:.9rem;font-weight:500}
  .form-note.show{display:block}

  /* footer */
  footer.site{background:var(--navy);color:rgba(255,255,255,.85);padding:64px 0 30px}
  .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
  footer .brand{color:#fff;margin-bottom:16px}
  footer .about{font-size:.94rem;color:rgba(255,255,255,.8);max-width:300px}
  .foot-col h5{color:#fff;font-family:var(--font-head);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
  .foot-col a{display:block;color:rgba(255,255,255,.82);font-size:.94rem;padding:6px 0;transition:color .2s}
  .foot-col a:hover{color:#fff}
  .social{display:flex;gap:12px;margin-top:18px}
  .social a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;color:#fff;transition:background .2s,color .2s,transform .2s}
  .social a:hover{background:#fff;color:var(--primary);transform:translateY(-2px)}
  .social svg{width:19px;height:19px}
  .foot-bottom{margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.86rem;color:rgba(255,255,255,.72)}

  /* ── Retail & CPG solution-page diagram kit ────────────────────────────────
     Pure CSS + inline SVG, no images, no libraries — the source decks are heavily
     visual and these pages have to carry that without the payload. All of it is
     schematic: NO figures, because the source contains no measured results and a
     chart with numbers on it would read as a client outcome (HANDOFF §8). */

  /* Inputs → engine → outputs. The spine every one of these solutions runs. */
  .iomap{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:0;
    background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:34px 30px}
  .iomap .col{display:grid;gap:9px}
  .iomap .lbl{font-family:var(--font-head);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
    color:var(--muted);margin-bottom:6px}
  .iomap .chip{background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius-sm);
    padding:9px 13px;font-size:.85rem;color:var(--text)}
  .iomap .engine{background:var(--primary);border-color:var(--primary);color:#fff;text-align:center;
    padding:20px 16px;border-radius:var(--radius)}
  .iomap .engine strong{display:block;font-family:var(--font-head);font-size:.95rem;margin-bottom:5px}
  .iomap .engine span{font-size:.78rem;color:rgba(255,255,255,.8);line-height:1.5}
  .iomap .arrow{display:flex;align-items:center;justify-content:center;padding:0 18px;color:var(--border)}
  .iomap .arrow svg{width:26px;height:26px}
  @media (max-width:900px){.iomap{grid-template-columns:1fr;gap:18px}
    .iomap .arrow{transform:rotate(90deg);padding:0}}

  /* Six capabilities as a connected flow. */
  .flow{display:grid;grid-template-columns:repeat(6,1fr);gap:0;position:relative}
  .flow .step{position:relative;padding:0 7px;text-align:center}
  .flow .step::before,.flow .step::after{content:"";position:absolute;top:19px;height:2px;background:var(--border)}
  .flow .step::before{left:0;right:50%}
  .flow .step::after{left:50%;right:0}
  .flow .step:first-child::before,.flow .step:last-child::after{display:none}
  .flow .num{width:38px;height:38px;border-radius:50%;background:#fff;border:2px solid var(--primary);
    color:var(--primary);font-family:var(--font-head);font-weight:700;font-size:.85rem;
    display:flex;align-items:center;justify-content:center;margin:0 auto 12px;position:relative;z-index:2}
  .flow .t{font-family:var(--font-head);font-weight:600;font-size:.82rem;color:var(--ink);line-height:1.35}
  .flow .d{font-size:.75rem;color:var(--primary);margin-top:6px;line-height:1.45}
  @media (max-width:900px){.flow{grid-template-columns:repeat(2,1fr);gap:26px 10px}
    .flow .step::before,.flow .step::after{display:none}}

  /* Four-tier banding — the scoring output shape shared across solutions. */
  .tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .tiers .tier{border:1px solid var(--border);border-radius:var(--radius);padding:20px 20px 22px;background:#fff;
    border-top:3px solid var(--primary)}
  .tiers .tier:nth-child(2){border-top-color:rgba(46,99,198,.72)}
  .tiers .tier:nth-child(3){border-top-color:rgba(46,99,198,.45)}
  .tiers .tier:nth-child(4){border-top-color:rgba(46,99,198,.22)}
  .tiers .tn{font-family:var(--font-head);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .tiers .th{font-family:var(--font-head);font-weight:600;font-size:1rem;color:var(--ink);margin:7px 0 6px}
  .tiers .tb{font-size:.85rem;color:var(--muted);line-height:1.6}
  @media (max-width:820px){.tiers{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:520px){.tiers{grid-template-columns:1fr}}

  /* Two-state contrast (e.g. shelf problem vs demand problem). Differentiated by
     WEIGHT, not by a second hue — the palette is one blue (HANDOFF §5). */
  .vs{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch}
  .vs .side{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:28px 30px}
  .vs .side.a{border-top:3px solid var(--primary)}
  .vs .side.b{border-top:3px solid var(--ink)}
  .vs .ico{width:42px;height:42px;border-radius:var(--radius-sm);border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;margin-bottom:14px}
  .vs .ico svg{width:21px;height:21px;color:var(--primary)}
  .vs .side.b .ico svg{color:var(--ink)}
  .vs h4{font-family:var(--font-head);font-size:1.14rem;margin-bottom:9px}
  .vs p{color:var(--muted);font-size:.94rem;line-height:1.7}
  .vs .fix{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);
    font-family:var(--font-head);font-weight:600;font-size:.88rem;color:var(--primary)}
  .vs .side.b .fix{color:var(--ink)}
  .vs .mid{display:flex;align-items:center;justify-content:center;padding:0 20px}
  .vs .mid span{width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;
    font-family:var(--font-head);font-weight:700;font-size:1.05rem;display:flex;align-items:center;justify-content:center}
  @media (max-width:820px){.vs{grid-template-columns:1fr}.vs .mid{padding:16px 0}}

  /* reveal animation */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
  .reveal.in{opacity:1;transform:none}
  .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
  .reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.4s}

  @media (prefers-reduced-motion:reduce){
    .reveal{opacity:1!important;transform:none!important;transition:none!important}
    .btn,.card,.quote,.fw,.social a{transition:none!important}
    /* keep the blue hover (a colour change, not motion) but drop the lift and the fade */
    .logo-row li::after{transition:none!important}
    .logo-row li:hover::after{transform:none!important}
    #hero-canvas{display:none}
  }

  /* responsive */
  @media (max-width:1000px){
    .hero-grid{grid-template-columns:1fr;gap:40px}
    .score-card{max-width:440px}
    .stat-grid{grid-template-columns:repeat(3,1fr)}
    .cards,.t-grid{grid-template-columns:repeat(2,1fr)}
    .foot-grid{grid-template-columns:1fr 1fr}
  }
  @media (max-width:760px){
    .nav-links,.nav-cta .btn{display:none}
    .menu-btn{display:inline-flex}
    .compare,.fw-grid,.contact-grid{grid-template-columns:1fr}
    .hero{padding-top:130px}
  }
  @media (max-width:560px){
    .stat-grid{grid-template-columns:repeat(2,1fr)}
    .cards,.t-grid{grid-template-columns:1fr}
    .field.row{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr}
    .hero-actions .btn{width:100%}
  }

/* ---------- subpage / service pages ---------- */
.page-hero{position:relative;padding:160px 0 48px;background:radial-gradient(900px 460px at 85% -10%,#eaf1fb 0%,rgba(234,241,251,0) 58%),linear-gradient(180deg,#f6f6f8 0%,#ffffff 74%)}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--muted);margin-bottom:22px}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--primary)}
.breadcrumb svg{width:14px;height:14px;opacity:.6}
.page-hero + .section{padding-top:64px}
.page-hero h1{font-size:clamp(2.1rem,5vw,3.6rem);text-transform:uppercase;font-weight:700;letter-spacing:-.025em;line-height:1.02;max-width:18ch}
.page-hero .sub{font-size:clamp(1.05rem,1.7vw,1.2rem);color:var(--muted);margin-top:20px;max-width:62ch}
.page-hero .hero-actions{margin-top:32px}
.stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.check-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.check-list li{display:flex;gap:12px;align-items:flex-start}
.check-list li svg{width:22px;height:22px;color:var(--primary);flex:none;margin-top:2px}
.check-list li strong{display:block;font-family:var(--font-head);color:var(--ink);font-size:1.02rem;margin-bottom:3px}
.check-list li span{color:var(--muted);font-size:.95rem}
.pill-row{display:flex;flex-wrap:wrap;gap:12px}
.pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);border-radius:999px;padding:10px 16px;font-family:var(--font-head);font-weight:600;font-size:.88rem;color:var(--ink);box-shadow:var(--shadow-sm)}
.pill svg{width:16px;height:16px;color:var(--primary)}
.cards.cols-4{grid-template-columns:repeat(4,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.prose p{color:var(--muted);margin-bottom:16px;font-size:1.02rem}
.prose p:last-child{margin-bottom:0}
@media (max-width:1000px){.cards.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:30px}.check-list{grid-template-columns:1fr}.stats3{grid-template-columns:1fr}}


/* ---------- header: responsive behaviour ----------------------------------
   The desktop nav only collapsed at 760px, but it runs out of room around
   1050px: "About Us" wrapped onto two lines, the AI Readiness button overlapped
   "Contact", and the 66px logo crowded the bar. Three tiers instead of one. */
.nav-links > a,
.nav-links > .nav-trigger{white-space:nowrap}
.nav-cta .btn{white-space:nowrap}

/* tier 2 — tighten before anything breaks */
@media (max-width:1180px){
  .nav-links{gap:20px}
  .nav-links > a,.nav-links > .nav-trigger{font-size:.9rem}
  .brand-logo{height:52px}
  .nav-cta .btn{padding:10px 16px;font-size:.86rem}
  .nav{height:78px}
}

/* tier 3 — hand over to the drawer while the bar is still comfortable */
@media (max-width:1050px){
  .nav-links,.nav-cta .btn{display:none}
  .menu-btn{display:inline-flex}
  .brand-logo{height:48px}
  .nav{height:72px}
}

/* ---- site footer -------------------------------------------------------
   Lifted out of the per-page inline <style>. The blog template replaces that
   block wholesale, so 229 pages were rendering the footer unstyled — the
   social icons expanded to 815px. Shared here so every page gets it. Pages
   that still carry it inline simply override with identical rules. */
/* ---- site footer (approved layout) ---------------------------------- */
  .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px}
  .foot-grid .two{columns:2;column-gap:26px}
  .foot-grid .two a{break-inside:avoid}
  @media(max-width:960px){.foot-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:620px){.foot-grid{grid-template-columns:1fr}.foot-grid .two{columns:1}}
  /* heading reads as a label, not the brightest link in the column */
  .foot-col h5{color:#fff;font-family:var(--font-head);font-size:.75rem;letter-spacing:.14em;
    text-transform:uppercase;font-weight:700;margin:0 0 16px;padding-bottom:12px;
    border-bottom:1px solid rgba(255,255,255,.22)}
  .foot-col a{display:block;color:rgba(255,255,255,.82);font-size:.94rem;padding:6px 0;
    text-decoration:none;transition:color .2s}
  .foot-col a:hover{color:#fff}
  .foot-bottom{margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.18)}
  .fb-row{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
  .fb-row .brand{display:inline-flex;align-items:center;text-decoration:none}
  .footer-logo{height:58px;width:auto;display:block;filter:brightness(0) invert(1);
    opacity:.66;transition:opacity .2s}
  .fb-row .brand:hover .footer-logo{opacity:1}
  .fb-contact{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:.94rem}
  .fb-contact a{color:rgba(255,255,255,.66);text-decoration:none;transition:color .2s}
  .fb-contact a:hover{color:#fff}
  .fb-contact .sep{color:rgba(255,255,255,.4)}
  .fb-social{display:flex;gap:10px;margin-left:auto}
  .fb-social a{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.14);
    display:flex;align-items:center;justify-content:center;color:#fff}
  .fb-social a:hover{background:#fff;color:var(--primary)}
  .fb-social svg{width:17px;height:17px;fill:currentColor}
  .fb-legal{font-size:.84rem;color:rgba(255,255,255,.66);white-space:nowrap}
  @media(max-width:820px){.fb-social{margin-left:0}}

/* ---- consent gate ------------------------------------------------------- */
.dm-consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:9999;
  background:#fff;border:1px solid var(--border);border-radius:14px;
  box-shadow:0 24px 60px -20px rgba(15,23,42,.4);max-width:1000px;margin:0 auto}
.dm-consent-in{display:flex;gap:26px;align-items:center;padding:20px 24px;flex-wrap:wrap}
.dm-consent-tx{flex:1 1 460px;min-width:0}
.dm-consent h2{font-family:var(--font-head);font-size:1rem;margin:0 0 6px;color:var(--ink)}
.dm-consent p{margin:0;font-size:.88rem;line-height:1.55;color:var(--text)}
.dm-consent p a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.dm-consent-opts{display:flex;gap:18px;margin-top:12px;flex-wrap:wrap}
.dm-consent-opts label{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;
  color:var(--ink);cursor:pointer}
.dm-consent-opts input{accent-color:var(--primary);width:15px;height:15px;cursor:pointer}
.dm-consent-btns{display:flex;gap:10px;flex:0 0 auto;flex-wrap:wrap}
.dm-consent-btns button{font-family:var(--font-head);font-weight:600;font-size:.85rem;
  border-radius:10px;padding:11px 18px;cursor:pointer;border:1px solid var(--border);
  background:#fff;color:var(--ink);transition:background .15s,border-color .15s}
.dm-consent-btns button:hover{border-color:#CBD5E1}
.dm-consent-btns .dm-c-accept{background:var(--primary);border-color:var(--primary);color:#fff}
.dm-consent-btns .dm-c-accept:hover{background:#2856ad;border-color:#2856ad}
@media(max-width:720px){
  .dm-consent-in{padding:18px}
  .dm-consent-btns{width:100%}
  .dm-consent-btns button{flex:1 1 auto}
}

/* richer service cards: a positioning line above the body, and an optional
   credibility line under it */
.card .card-lede{font-family:var(--font-head);font-weight:600;font-size:.97rem;
  color:var(--ink);margin-bottom:10px;line-height:1.45}
.card .card-note{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);
  font-size:.85rem;color:#94A3B8;line-height:1.55}
@media(max-width:860px){.cols-2{grid-template-columns:1fr}}

/* ---- 404 ---------------------------------------------------------------- */
.nf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media(max-width:900px){.nf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.nf-grid{grid-template-columns:1fr}}
.nf-card{display:block;border:1px solid var(--border);border-radius:10px;background:#fff;
  padding:22px 24px;text-decoration:none;transition:border-color .2s,box-shadow .2s,transform .2s}
.nf-card:hover{border-color:#CBD9F0;box-shadow:0 14px 34px -22px rgba(15,23,42,.4);transform:translateY(-2px)}
.nf-card b{display:block;font-family:var(--font-head);font-size:1.02rem;color:var(--ink);margin-bottom:6px}
.nf-card span{display:block;font-size:.9rem;color:var(--text);line-height:1.55}

/* who owns what: a linked practice looks clickable, an unlinked one does not */
.own-card a{display:inline-flex;align-items:center;gap:7px;color:var(--primary);
  text-decoration:underline;text-decoration-color:rgba(46,99,198,.35);text-underline-offset:3px;
  transition:text-decoration-color .2s}
.own-card a:hover{text-decoration-color:var(--primary)}
.own-card a svg{width:13px;height:13px;transition:transform .2s}
.own-card a:hover svg{transform:translateX(3px)}
.own-card .area{color:var(--ink);text-decoration:none}