:root{
  --ink:#0F2A2E;
  --ink-70:#2A3C41;
  --muted:#5D6A6E;
  --bg:#FFFFFF;
  --bg-alt:#F5F7FA;
  --accent:#A6A0FF; /* lavender accent from logo */
  --accent-2:#6C63FF;
  --cta:#0D6EFD;
  --ok:#0B8457;
  --shadow:0 6px 28px rgba(15,42,46,0.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  color:var(--ink); background:var(--bg);
}
a{color:var(--accent-2); text-decoration:none}
a:hover{text-decoration:underline}
/* Anything carrying .container must set padding with LONGHANDS. A shorthand
   `padding` in a later equal-specificity rule (.nav, .hero — both are .container
   elements) silently re-zeroes these 20px side gutters, which is how the header
   and the hero headline ended up flush against the screen edge. */
.container{max-width:1200px; margin:0 auto; padding:0 20px}
.header{
  position:sticky; top:0; z-index:1000; background:#fff; box-shadow:0 1px 0 rgba(0,0,0,0.06)
}
.nav{display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:80px; width:auto}
.brand .name{font-weight:800; letter-spacing:.5px}
nav ul{list-style:none; padding:0; margin:0; display:flex; gap:22px; align-items:center}
nav li{display:inline-flex}
.has-dropdown{position:relative}
.dropdown{position:absolute; top:100%; left:0; min-width:210px; background:#fff; border:1px solid #E8EDF0; border-radius:10px; box-shadow:var(--shadow); padding:8px 0; margin:0; list-style:none; display:flex; flex-direction:column; align-items:stretch; gap:0; text-align:left; z-index:1001; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .15s ease, transform .15s ease, visibility .15s}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{opacity:1; visibility:visible; transform:translateY(0)}
.dropdown li{display:block}
.dropdown a{display:block; padding:0.5rem 1rem; white-space:nowrap; color:var(--ink)}
.dropdown a:hover{background:var(--bg-alt); text-decoration:none}
.button{
  padding:10px 16px; border-radius:8px; border:1px solid transparent; font-weight:600; cursor:pointer;
  transition:all .15s ease;
}
.button.primary{background:var(--accent-2); color:#fff}
.button.primary:hover{filter:brightness(0.95)}
.button.ghost{border-color:var(--ink-70); color:var(--ink)}
.badge{display:inline-block; padding:2px 8px; border-radius:999px; background:var(--bg-alt); color:var(--ink-70); font-size:12px}
.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center; padding-top:32px; padding-bottom:72px}
.hero h1{font-size:42px; line-height:1.15; margin:0 0 12px}
.hero p{font-size:18px; color:var(--muted); margin:0 0 20px}
.hero img{width:100%; height:auto;}
.cta-row{display:flex; gap:12px; flex-wrap:wrap}
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px}
.kpi{padding:14px 16px; border-radius:10px; background:var(--bg-alt)}
.kpi strong{font-size:20px; display:block}
.page-hero{padding:52px 0 8px}
.page-hero h1{font-size:38px; line-height:1.15; margin:8px 0 12px}
.page-hero .lead{font-size:19px; color:var(--muted); max-width:760px; margin:0}
.group-label{font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-2); font-weight:700; margin:32px 0 12px}
.serve h3{margin:10px 0 6px}
.serve .example{font-style:italic; color:var(--ink-70); border-left:3px solid var(--accent); padding-left:12px; margin:12px 0}
.serve .tags{font-size:13px; color:var(--muted); margin-top:10px}
.stat-bar{background:linear-gradient(180deg,#F1EFFF,#E6E3FF); border-top:1px solid rgba(108,99,255,.16); border-bottom:1px solid rgba(108,99,255,.16); padding:30px 0}
.logos{background:linear-gradient(180deg,#F1EFFF,#E6E3FF); border-top:1px solid rgba(108,99,255,.16); border-bottom:1px solid rgba(108,99,255,.16)}
.logos-title{text-align:center; color:var(--muted); font-size:14px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; margin:0 0 28px}
.logo-marquee{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-track{display:flex; align-items:center; gap:56px; width:max-content; animation:logo-scroll 156s linear infinite}
.logo-marquee:hover .logo-track{animation-play-state:paused}
.logo-item{height:56px; width:auto; flex:0 0 auto; filter:grayscale(1); opacity:.65; transition:filter .2s ease, opacity .2s ease}
.logo-item:hover{filter:grayscale(0); opacity:1}
@keyframes logo-scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .logo-marquee{overflow-x:auto}
  .logo-track{animation:none}
}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; text-align:center}
.stat strong{display:block; font-size:32px; color:var(--ink); line-height:1.1; margin-bottom:4px}
.stat span{font-size:14px; color:var(--muted)}
.section{padding:56px 0}
.section h2{font-size:28px; margin:0 0 12px}
.section p.lead{color:var(--muted); margin:0 0 24px}
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.tile{background:#fff; border:1px solid #E8EDF0; border-radius:12px; padding:16px; box-shadow:var(--shadow)}
.tile h3{margin:10px 0 6px; font-size:16px}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px}
.card{background:#fff; border:1px solid #E8EDF0; border-radius:12px; padding:18px; box-shadow:var(--shadow)}
.card h3{margin:8px 0}
.cards .card[id]{scroll-margin-top:120px}
.cards-4{grid-template-columns:repeat(4,1fr)}
.cta-card{background:rgba(108,99,255,.08); border:1px solid rgba(108,99,255,.4); box-shadow:none; display:flex; flex-direction:column; justify-content:center; text-decoration:none; color:var(--ink)}
.cta-card:hover{background:rgba(108,99,255,.14)}
.cta-card h3{color:var(--accent-2); margin-top:0}
.testimonials{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:24px}
.quote{padding:24px; border-left:4px solid var(--accent-2); background:#fff; border-radius:8px}
.testimonials .quote{background:#fff; box-shadow:var(--shadow)}
.quote p:first-child{font-size:17px; margin:0 0 12px}
.resources{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.resource{padding:18px; border:1px solid #E8EDF0; border-radius:12px}
.consult{display:grid; grid-template-columns:.85fr 1.15fr; gap:40px; align-items:start}
.consult-intro h1{font-size:36px; line-height:1.15; margin:12px 0}
.checklist{list-style:none; padding:0; margin:16px 0 0}
.checklist li{position:relative; padding-left:28px; margin-bottom:10px; color:var(--ink-70)}
.checklist li::before{content:"✓"; position:absolute; left:0; color:var(--ok); font-weight:700}
.consult-form{background:#fff; border:1px solid #E8EDF0; border-radius:12px; padding:24px; box-shadow:var(--shadow)}
.consult-form iframe, #contact-form-container iframe{width:100% !important; max-width:100% !important; border:0; display:block; margin:0 auto}
.legal{max-width:760px}
.legal h2{font-size:23px; margin:40px 0 10px; padding-top:8px}
.legal h3{font-size:17px; margin:28px 0 8px; color:var(--ink-70)}
.legal p, .legal li{color:var(--ink-70)}
.legal ul{padding-left:22px; margin:12px 0}
.legal li{margin-bottom:8px}
.legal .table-wrap{overflow-x:auto; margin:18px 0}
.table-wrap:focus-visible{outline:2px solid var(--accent-2); outline-offset:3px}
.legal table{width:100%; border-collapse:collapse; font-size:15px; min-width:520px}
.legal th, .legal td{text-align:left; padding:10px 12px; border-bottom:1px solid #E8EDF0; vertical-align:top}
.legal th{background:var(--bg-alt); font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-70)}
.footer{background:#0F2327; color:#E7EEF2; padding:36px 0}
.footer a{color:#E7EEF2}
.footer-links{margin-top:18px; font-size:14px}
.footer-links a{color:#BFD1D7; text-decoration:underline}
.footer-links a:hover{color:#E7EEF2}
.small{font-size:14px; color:var(--muted)}
/* Scroll reveal — fade up and settle as each block enters the viewport.
   The hidden state is scoped to .js (set by an inline script in head.html) so
   that with JS off, or if the observer never runs, every block stays visible.
   Never put .reveal on a full-bleed section with its own background — the
   scale would expose the edges. Put it on the inner items instead. */
.js .reveal{
  opacity:0; transform:translateY(35px) scale(.95);
  transition:opacity .8s ease, transform .8s ease;
  transition-delay:var(--reveal-delay,0ms);
}
.js .reveal.is-revealed{opacity:1; transform:none}
/* Set by the script on anything that must be legible immediately rather than
   animated in — a focused block, or a fragment target. */
.js .reveal.is-instant{transition:none; transition-delay:0ms}
/* !important so these hold regardless of source order or of how specific a
   future .reveal variant is — a stated user preference outranks our animation,
   and the alternative is a rule that silently stops applying one day. */
@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1 !important; transform:none !important;
              transition:none !important; transition-delay:0ms !important}
}
@media print{
  .js .reveal{opacity:1 !important; transform:none !important;
              transition:none !important; transition-delay:0ms !important}
}
.skip{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip:focus{left:8px; top:8px; width:auto; height:auto; background:#fff; padding:8px 12px; border-radius:6px; box-shadow:var(--shadow)}

/* The hamburger exists in the markup on every page but only earns its place
   under .js-nav below the breakpoint — see the mobile block. */
.nav-toggle{display:none}

@media (max-width: 980px){
  .hero{grid-template-columns:1fr; padding-top:40px; padding-bottom:40px}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .kpis{grid-template-columns:1fr 1fr}
  .testimonials{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .resources{grid-template-columns:1fr}
  .consult{grid-template-columns:1fr}

  /* ---- Mobile nav ---------------------------------------------------------
     Two layouts live here. Without JS the links simply stack down the page
     under the logo — long, but complete and operable. With .js-nav that same
     stack becomes a panel behind the hamburger. Everything shared sits first,
     and only the collapsing is scoped to .js-nav, so the fallback is the plain
     reading of these rules rather than a separate branch to keep in sync. */
  /* The wide-text logo is ~336px at its desktop height — on a 390px screen that
     alone overruns the bar once the hamburger needs a slot, which is most of why
     the old header ran off-screen. Reserve the button's 44px + 12px gap and let
     the logo have the rest, scaling by width with height following.
     Both min-width:0 are load-bearing: .brand and its <a> are each flex items, and
     a flex item's default min-width:auto floors it at the image's intrinsic width,
     so without them the cap is simply overflowed rather than obeyed. */
  .brand{min-width:0; max-width:calc(100% - 56px)}
  .brand a{display:block; min-width:0}
  .brand img{height:auto; width:auto; max-height:52px; max-width:100%}
  /* Longhands again — a shorthand here would re-zero .container's side gutter,
     which the toggle's optical margin spends. */
  .nav{padding-top:10px; padding-bottom:10px; flex-wrap:wrap; gap:12px}

  /* Wrap onto its own full-width row under the logo. Only the no-JS stack sees
     this — under .js-nav the panel is position:absolute and out of flex flow. */
  .header nav{flex:1 0 100%}
  nav ul{flex-direction:column; align-items:stretch; gap:0; width:100%}
  nav li{display:block}
  /* `nav >` keeps these off the dropdown's own links, which sit a level deeper
     and are styled below — matching them here would win on specificity and flatten
     the indent that marks them as sub-items. */
  nav > ul > li > a:not(.button){display:block; padding:13px 20px; color:var(--ink); font-weight:600}
  nav > ul > li > a:not(.button):hover{background:var(--bg-alt); text-decoration:none}
  nav > ul > li > a[aria-current="page"]{color:var(--accent-2)}

  /* The Solutions flyout stops being a flyout: it un-hides, drops the card
     chrome, and reads as an indented continuation of its parent link. Resetting
     the positioned/animated properties matters — leaving opacity and visibility
     to the :hover rule would make the products untouchable on a device with no
     hover at all. */
  .dropdown{position:static; opacity:1; visibility:visible; transform:none; transition:none;
            min-width:0; background:transparent; border:0; border-radius:0; box-shadow:none; padding:0}
  .dropdown a{padding:10px 20px 10px 36px; font-size:15px; color:var(--muted)}

  .nav-cta{padding:12px 20px 16px}
  .nav-cta .button{display:block; text-align:center}

  /* --- Collapsed panel (JS only) --- */
  .js-nav .nav{flex-wrap:nowrap}
  /* 44px is the floor for a touch target. The negative margin spends the
     container's gutter so the bars sit optically flush with the content edge
     while the tappable box stays full size; flex-shrink:0 stops the logo from
     eating into it. */
  .js-nav .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    flex:0 0 auto; width:44px; height:44px; margin-right:-10px; padding:0;
    background:none; border:0; border-radius:8px; color:var(--ink); cursor:pointer;
  }
  .js-nav .nav-toggle:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px}

  /* Three bars from one element: the middle is the span, the outer two are its
     pseudo-elements offset up and down. Opening collapses them to the centre and
     crosses them, so the icon animates into its own close button. */
  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after{
    display:block; width:22px; height:2px; border-radius:2px; background:currentColor;
    transition:transform .2s ease, top .2s ease, background-color .2s ease;
  }
  .nav-toggle-bars{position:relative}
  .nav-toggle-bars::before,
  .nav-toggle-bars::after{content:""; position:absolute; left:0}
  .nav-toggle-bars::before{top:-7px}
  .nav-toggle-bars::after{top:7px}
  .js-nav .header[data-nav-open] .nav-toggle-bars{background:transparent}
  .js-nav .header[data-nav-open] .nav-toggle-bars::before{top:0; transform:rotate(45deg)}
  .js-nav .header[data-nav-open] .nav-toggle-bars::after{top:0; transform:rotate(-45deg)}

  /* .header is position:sticky, which is enough to anchor this. display:none
     rather than a visibility/height trick so the links leave the tab order
     outright while closed — a keyboard user must not tab into a shut menu. */
  .js-nav .header nav{
    position:absolute; top:100%; left:0; right:0; display:none;
    background:#fff; border-top:1px solid #E8EDF0; box-shadow:var(--shadow);
    max-height:calc(100vh - 100%); max-height:calc(100dvh - 100%); overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .js-nav .header[data-nav-open] nav{display:block; animation:nav-drop .18s ease}
}

/* A .tile/.card will not compress below roughly 164px — its padding plus the
   longest unbreakable product name — and `1fr` does not override that, because
   a grid item's default min-width:auto floors each track at min-content. Two
   such tracks plus the gap and the page gutter need ~384px, so every phone
   narrower than that (320 SE, 360 Android, 375 iPhone mini) had the grid
   overhang the viewport rather than reflow. Drop to a single column with room
   to spare; two-up was cramped down here regardless. */
@media (max-width: 600px){
  .tiles{grid-template-columns:1fr}
  .cards, .cards-4{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
}

@keyframes nav-drop{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){
  .js-nav .header[data-nav-open] nav{animation:none}
  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after{transition:none}
}