/* Kuery design system — shared by every page.
   Tokens live in :root at the top; add colours there, never inline. */
/* ============ 1. TOKENS ============ */
:root{
  --navy:#081B3A; --navy-deep:#020817; --navy-mid:#031027;
  --blue:#1E5BFF; --cyan:#19C2FF; --purple:#5B4BDB;
  --white:#fff; --bg:#F5F8FC; --text:#0B1733; --muted:#5E6B7D;
  --border:#DCE5F2; --success:#16B77A; --warning:#FF9F1C;
  --focus:var(--blue);
  --line-dark:rgba(255,255,255,.10);
  --container:1320px; --pad:32px; --radius:16px; --radius-sm:12px;
  --sans:'Manrope','Segoe UI',system-ui,-apple-system,sans-serif;
  --mark:'Montserrat','Manrope',sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --sect:clamp(64px,8vw,120px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
  font-size:clamp(1rem,.955rem + .2vw,1.125rem);line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;line-height:1.12;letter-spacing:-.02em;font-weight:700}
h1{font-size:clamp(2.5rem,1.55rem + 3.4vw,4rem);letter-spacing:-.03em}
h2{font-size:clamp(2rem,1.4rem + 2.1vw,3rem)}
h3{font-size:clamp(1.375rem,1.25rem + .5vw,1.75rem);font-weight:650}
p{margin:0}
/* Focus ring is token-driven so it keeps >=3:1 against whatever it sits on (WCAG 1.4.11).
   Royal Blue is 5.26:1 on white; Electric Cyan is 7.95:1 on Midnight Navy. */
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
.hero,.prob,.lab,.ftr,.hdr,.drawer{--focus:var(--cyan)}
/* Keep focused targets clear of the fixed header (WCAG 2.4.11). */
:target,section[id],a[id]{scroll-margin-top:124px}
main :focus-visible{scroll-margin-top:124px}
.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--pad)}
.eyebrow{font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:14px}
.eyebrow.on-dark{color:var(--cyan)}
.lead{color:var(--muted);max-width:62ch}
.skip{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:12px 20px;z-index:200;border-radius:0 0 8px 0}
.skip:focus{left:0}
.tag{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.04em;padding:5px 11px;border-radius:999px}

/* ============ 2. BUTTONS ============ */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.9375rem;
  padding:14px 24px;border-radius:10px;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background-color .18s,border-color .18s,color .18s;white-space:nowrap}
.btn--primary{background:var(--blue);color:#fff;box-shadow:0 4px 14px rgba(30,91,255,.28)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(30,91,255,.45)}
.btn--primary:active{transform:translateY(1px);box-shadow:0 3px 10px rgba(30,91,255,.3)}
.btn--ghost{border:1px solid rgba(255,255,255,.28);color:#fff}
.btn--ghost:hover{background:rgba(30,91,255,.16);border-color:var(--cyan);transform:translateY(-2px)}
.btn--ghost:active{transform:translateY(1px)}
.btn--outline{border:1px solid var(--border);background:#fff;color:var(--blue)}
.btn--outline:hover{border-color:var(--blue);background:rgba(30,91,255,.06);transform:translateY(-2px)}
.btn[aria-disabled=true]{opacity:.45;pointer-events:none;box-shadow:none}
.btn .ar{transition:transform .18s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}

/* ============ 3. HEADER ============ */
.hdr{position:fixed;inset:0 0 auto;z-index:100;transition:background-color .3s,box-shadow .3s,border-color .3s;border-bottom:1px solid transparent}
.hdr.is-stuck{background:rgba(8,27,58,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line-dark)}
.hdr__in{display:flex;align-items:center;gap:26px;height:112px}
.brand{flex:none}
.brand__logo{height:78px;width:auto;display:block}
.ftr__brand .brand__logo{height:72px;margin-bottom:18px}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav a,.nav button.navlink{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.86);
  font-size:.9375rem;font-weight:600;padding:10px 14px;border-radius:8px;position:relative;transition:color .18s}
.nav a:hover,.nav button.navlink:hover{color:#fff}
.nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--cyan);
  transform:scaleX(0);transform-origin:left;transition:transform .18s var(--ease)}
.nav a:hover::after,.nav a[aria-current=page]::after{transform:scaleX(1)}
.hdr .btn--primary{margin-left:14px}
.has-mega{position:relative}
.mega{position:absolute;top:calc(100% + 10px);left:-8px;min-width:300px;background:#fff;border:1px solid var(--border);
  border-radius:14px;box-shadow:0 24px 60px rgba(4,14,35,.22);padding:14px;opacity:0;visibility:hidden;
  transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s}
.has-mega:hover .mega,.has-mega:focus-within .mega,
.has-mega[data-open=true] .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega__h{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:8px 12px 4px}
.mega a{display:block;color:var(--text);font-weight:500;font-size:.9375rem;padding:9px 12px;border-radius:8px}
.mega a::after{display:none}
.mega a:hover{background:var(--bg);color:var(--blue)}
.burger{display:none;margin-left:auto;padding:10px;color:#fff}
.drawer{position:fixed;inset:0;z-index:99;background:var(--navy-deep);padding:132px 32px 40px;
  display:flex;flex-direction:column;gap:6px;transform:translateX(100%);overflow-y:auto;
  visibility:hidden;transition:transform .3s var(--ease),visibility 0s linear .3s}
/* visibility:hidden keeps the closed drawer out of the tab order and the a11y tree */
.drawer[data-open=true]{transform:translateX(0);visibility:visible;transition:transform .3s var(--ease)}
.drawer a{color:#fff;font-size:1.25rem;font-weight:650;padding:14px 0;border-bottom:1px solid var(--line-dark)}
.drawer .btn{margin-top:24px;justify-content:center}

/* ============ 4. HERO ============ */
.hero{position:relative;background:
    radial-gradient(900px 520px at 78% 34%,rgba(25,194,255,.16),transparent 62%),
    radial-gradient(700px 480px at 8% 8%,rgba(30,91,255,.20),transparent 60%),
    linear-gradient(168deg,var(--navy-deep) 0%,var(--navy-mid) 42%,var(--navy) 100%);
  color:#fff;padding:clamp(146px,11vw,158px) 0 clamp(96px,10vw,120px);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;opacity:.35;pointer-events:none;
  background-image:linear-gradient(var(--line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);
  background-size:72px 72px;mask-image:radial-gradient(circle at 50% 40%,#000,transparent 78%)}
.hero__in{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:start}
.hero__in > .viz{align-self:center;margin-top:-8px}
.hero h1{margin-bottom:22px}
/* The one gradient the philosophy doc sanctions: Royal Blue -> Electric Cyan.
   Scoped to both heroes so a page hero can carry it too, not just the home. */
.hero h1 .grad,.phero h1 .grad{background:linear-gradient(96deg,var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__sub{font-size:clamp(1.25rem,1.05rem + .7vw,1.5rem);font-weight:650;letter-spacing:-.01em;margin-bottom:20px}
.hero__sub b{color:var(--cyan);font-weight:650}
.hero__body{color:rgba(255,255,255,.76);max-width:52ch;margin-bottom:16px}
.hero__note{color:rgba(255,255,255,.6);font-size:.9375rem;max-width:52ch;margin-bottom:34px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px}

/* hero diagram */
/* ---- hero figure -------------------------------------------------------
   Five lit badges on the left, wires converging on a simple K on the right.
   The K is traced from the logo outline -- three components (stem, arm, leg)
   at 9 to 10 vertices each -- filled and stroked as one shape with a light
   mesh over it. Deliberately NOT a cloud of dots: the letterform has to read
   as the mark first and as a network second. */
.viz{width:100%;height:auto}
.viz .lbl-s{fill:rgba(255,255,255,.66);font-size:12.5px;font-weight:500;font-family:var(--sans)}
.viz .lbl-b{fill:#fff;font-size:16px;font-weight:700;font-family:var(--sans)}

/* the badge: halo, lit disc, then a pedestal and a brighter inner pedestal so
   the disc reads as standing on something rather than floating */
.viz .halo{fill:url(#halog);pointer-events:none}
.viz .disc{fill:url(#discg);stroke:rgba(120,230,255,.75);stroke-width:1.4}
.viz .ped{fill:none;stroke:rgba(25,194,255,.42);stroke-width:1.2}
.viz .ped--in{stroke:rgba(143,233,255,.62)}
.viz .ico{fill:none;stroke:#BFF1FF;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.viz .wire{fill:none;stroke:rgba(25,194,255,.34);stroke-width:1.2}
/* The travelling pulse: a short dash that runs each wire from its badge into
   the mark. --len is that path's own measured length, so the dash covers
   exactly its path rather than a guessed distance, and the gap in the
   dasharray is long enough that only one dash is ever on the wire. */
.viz .pulse{fill:none;stroke:#BFF1FF;stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:26px var(--len);stroke-dashoffset:calc(var(--len) + 26px)}

/* the mark */
/* Meridian Order, merged: the K is the datum. A wide soft pass sits under the
   crisp outline -- the same two-pass build that made the plate's meridian
   read as light rather than as a line -- and the accumulation field below
   banks up against its real left boundary. */
.viz .kglow{fill:none;stroke:rgba(143,233,255,.20);stroke-width:7;stroke-linejoin:round;pointer-events:none}
.viz .kshape{fill:url(#kfill);stroke:rgba(200,246,255,.95);stroke-width:1.7;stroke-linejoin:round}
.viz .kfield line{stroke:#9FE4FF}
.viz .kmesh line{stroke:rgba(120,230,255,.34);stroke-width:.9}
.viz .knode{fill:#63DCFF}
.viz .knode--br{fill:#fff}
.viz .kbloom{fill:url(#kbloomg);pointer-events:none}

.viz .stage{animation:stageOn 9s var(--ease) infinite var(--s)}
.viz .pulse{animation:flow 9s linear infinite var(--s)}
.viz .knode{animation:twinkle 4.6s ease-in-out infinite}
.viz .kwrap{animation:kglow 9s ease-in-out infinite}
@keyframes stageOn{0%,100%{opacity:.5}10%,74%{opacity:1}}
/* offset counts DOWN to 0, so the dash travels badge -> mark */
@keyframes flow{
  0%{stroke-dashoffset:calc(var(--len) + 26px);opacity:0}
  5%{opacity:1}
  32%{stroke-dashoffset:0;opacity:1}
  40%{stroke-dashoffset:0;opacity:0}
  100%{stroke-dashoffset:0;opacity:0}}
@keyframes twinkle{0%,100%{opacity:.58}50%{opacity:1}}
@keyframes kglow{0%,52%{opacity:.85}76%{opacity:1}100%{opacity:.85}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinBack{to{transform:rotate(-360deg)}}
@keyframes satPulse{0%,100%{opacity:.35}50%{opacity:.9}}
.orbit .ring{animation:spin 48s linear infinite}
.orbit .ring--b{animation:spinBack 36s linear infinite}
.orbit .sats{animation:spin 30s linear infinite;transform-origin:150px 150px}
.orbit .sat{animation:satPulse 5s ease-in-out infinite}

/* ============ 5. VALUE STRIP ============ */
.values{position:relative;margin-top:calc(-1 * clamp(56px,7vw,84px));z-index:5}
.values__card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 20px 50px rgba(8,27,58,.10);display:grid;grid-template-columns:repeat(4,1fr)}
.value{display:flex;gap:14px;align-items:flex-start;padding:28px 26px;border-left:1px solid var(--border)}
.value:first-child{border-left:0}
.value svg{flex:none;width:30px;height:30px;stroke:var(--blue);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.value__t{font-size:1rem;font-weight:700;margin-bottom:4px;line-height:1.25;letter-spacing:-.01em}
.value p{font-size:.875rem;color:var(--muted);line-height:1.5}

/* ============ 6. PHILOSOPHY ============ */
.phil{padding:var(--sect) 0}
.phil__in{display:grid;grid-template-columns:1.05fr 1fr .85fr;gap:56px;align-items:center}
.phil h2{margin-bottom:26px}
.phil h2 em{font-style:normal;color:var(--blue)}
.phil__narr p{color:var(--muted);margin-bottom:18px;max-width:46ch}
.kuering{font-size:clamp(1.75rem,1.4rem + 1.4vw,2.25rem);font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(96deg,var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;
  margin:2px 0 10px}
.kuering-def{font-size:.9375rem;color:var(--muted);max-width:44ch;margin-bottom:24px;padding-left:16px;border-left:2px solid var(--border)}
.orbit{position:relative;width:100%;max-width:330px;margin-inline:auto;aspect-ratio:1}
.orbit__rings{position:absolute;inset:0;width:100%;height:100%}
.orbit .ring{fill:none;stroke:var(--border);stroke-dasharray:2 8;stroke-linecap:round;
  transform-origin:150px 150px}
.orbit .sat{fill:var(--blue);opacity:.55;transform-origin:150px 150px}
.orbit__mark{position:absolute;top:50%;left:50%;width:42%;height:auto;
  transform:translate(-50%,-50%)}

/* ============ 7. SOLUTIONS ============ */
.sol{padding:0 0 var(--sect);text-align:center}
.sol__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;text-align:left}
/* A card carries one accent, --ca, used by its icon tile, its border on hover
   and its Learn-more link. It defaults to Royal Blue, so every card already on
   the site is unaffected; only cards given a --c1..--c6 class differ. */
.card{--ca:var(--blue);
  display:block;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:30px;
  color:inherit;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.card:hover{transform:translateY(-6px);border-color:var(--ca);box-shadow:0 18px 40px rgba(8,27,58,.12)}
.card__ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px;transition:background-color .2s,box-shadow .2s;
  background:rgba(30,91,255,.08);background:color-mix(in srgb,var(--ca) 9%,#fff)}
.card:hover .card__ic{background:rgba(30,91,255,.14);background:color-mix(in srgb,var(--ca) 17%,#fff);
  box-shadow:0 0 0 5px rgba(30,91,255,.07);box-shadow:0 0 0 5px color-mix(in srgb,var(--ca) 9%,transparent)}
.card__ic svg{width:24px;height:24px;fill:none;stroke:var(--ca);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:1.1875rem;margin-bottom:10px}
.card p{color:var(--muted);font-size:.9375rem;line-height:1.6;margin-bottom:18px}
.more{color:var(--ca,var(--blue));font-weight:600;font-size:.9375rem;display:inline-flex;align-items:center;gap:7px}
.card:hover .more .ar{transform:translateX(4px)}
.more .ar{transition:transform .18s var(--ease)}

/* ---- capability accents -------------------------------------------------
   Six flat, categorical tints — one per capability — so a reader scanning the
   grid can tell six alternatives apart at a glance. This is NOT the thing the
   philosophy doc rules out in section 21: that sentence prohibits rainbow
   *gradients*, and there is no multi-hue gradient here. Each card carries one
   solid hue and no hue ever meets another.
   The five approach steps are an ordered SEQUENCE, not alternatives, so they
   get a progression along the brand arc instead (see .step--s1..s5 below).
   Every value below is contrast-checked at 4.5:1 against BOTH the white card
   and the #EEF3FA band, so Learn-more is AA on either surface:
     c1 5.26/4.71  c2 5.95/5.34  c3 5.93/5.31
     c4 6.04/5.42  c5 5.62/5.04  c6 5.27/4.72
   TO GO BACK TO ONE HUE: delete the six rules. --ca falls back to --blue.
   TO RECOLOUR: change only these six hex values, then re-check contrast. */
.card--c1{--ca:#1E5BFF}  /* Enterprise Data Engineering — brand Royal Blue */
.card--c2{--ca:#0A7068}  /* Database Modernization */
.card--c3{--ca:#8A5A02}  /* Data Intelligence */
.card--c4{--ca:#5B4BDB}  /* AI Enablement — brand Purple */
.card--c5{--ca:#BC2F66}  /* Intelligent Software */
.card--c6{--ca:#0C7594}  /* Cloud & Integration */

/* Six across on the widest band; the copy is short enough to take the
   narrower measure, and the row is the point — six capabilities, one look. */
.sol__grid--6{grid-template-columns:repeat(6,1fr);gap:16px}
/* Titles run to one or two lines depending on the capability, so the card is a
   flex column and Learn-more is pushed to the floor. Otherwise the six links
   sit at six different heights and the row stops reading as a row. */
.sol__grid--6 .card{padding:24px 20px;display:flex;flex-direction:column}
.sol__grid--6 .more{margin-top:auto}
.sol__grid--6 .card__ic{width:52px;height:52px;border-radius:14px;margin-bottom:16px}
.sol__grid--6 .card__ic svg{width:26px;height:26px}
.sol__grid--6 .card h3{font-size:1.0625rem;margin-bottom:8px}
.sol__grid--6 .card p{font-size:.875rem;line-height:1.55;margin-bottom:14px}
.sol__grid--6 .more{font-size:.875rem}

/* ============ 8. PROBLEMS (interactive) ============ */
.prob{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-mid) 100%);color:#fff;padding:var(--sect) 0;position:relative;overflow:hidden}
.prob::after{content:"";position:absolute;width:640px;height:640px;border-radius:50%;top:-18%;right:-12%;
  background:radial-gradient(circle,rgba(25,194,255,.16),transparent 68%);transition:transform .5s var(--ease);pointer-events:none}
.prob[data-active="1"]::after{transform:translate(-60px,40px)}
.prob[data-active="2"]::after{transform:translate(-260px,90px)}
.prob[data-active="3"]::after{transform:translate(-460px,30px)}
.prob[data-active="4"]::after{transform:translate(-660px,70px)}
.prob__tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:36px 0 26px}
.ptab{text-align:left;border:1px solid var(--line-dark);border-radius:var(--radius-sm);padding:20px 18px;
  background:rgba(255,255,255,.03);transition:background-color .2s,border-color .2s,transform .2s var(--ease)}
.ptab:hover{background:rgba(255,255,255,.07);transform:translateY(-3px)}
.ptab[aria-selected=true]{background:rgba(30,91,255,.16);border-color:var(--cyan)}
.ptab svg{width:24px;height:24px;fill:none;stroke:var(--cyan);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px}
.ptab span{display:block;font-weight:650;font-size:.9375rem;line-height:1.4}
.ppanel{border:1px solid var(--line-dark);border-left:3px solid var(--cyan);border-radius:var(--radius-sm);
  padding:26px 30px;background:rgba(255,255,255,.04);max-width:760px}
.ppanel h3{font-size:1.25rem;margin-bottom:8px}
.ppanel p{color:rgba(255,255,255,.72)}

/* ============ 9. INNOVATION LAB ============ */
.lab{background:linear-gradient(120deg,var(--navy-mid) 0%,#1B1A5E 52%,var(--purple) 130%);color:#fff;padding:var(--sect) 0}
.lab__top{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:40px}
.lab__top p{color:rgba(255,255,255,.74);max-width:52ch}
.lab__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.lcard{border:1px solid var(--line-dark);border-radius:var(--radius);padding:20px;background:rgba(255,255,255,.05);
  transition:transform .2s var(--ease),border-color .2s,background-color .2s;display:flex;flex-direction:column}
.lcard:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.09)}
.lcard h3{font-size:1.0625rem;margin-bottom:8px;color:#fff}
/* product cards are links; keep title white and push the accent onto the CTA only */
a.lcard{color:inherit;text-decoration:none}
a.lcard .more{color:var(--cyan);margin-top:16px}
.lcard .more{color:var(--cyan);font-size:.875rem;margin-top:14px}
.lcard p{font-size:.875rem;color:rgba(255,255,255,.72);line-height:1.5}
.lcard .tag{margin-top:16px;align-self:flex-start;background:rgba(255,255,255,.14);color:#fff}
.lcard--soon{display:grid;place-content:center;text-align:center;color:rgba(255,255,255,.7)}

/* ============ 10. WHY KUERY ============ */
.why{padding:var(--sect) 0}
.why__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:44px}
.why__it{border-top:2px solid var(--blue);padding-top:20px}
.why__it h3{font-size:1.125rem;margin-bottom:10px}
.why__it p{color:var(--muted);font-size:.9375rem;line-height:1.6}

/* ============ 11. FINAL CTA ============ */
.fcta{padding:0 0 var(--sect)}
.fcta__in{background:#fff;border:1px solid var(--border);border-radius:20px;padding:clamp(32px,4vw,52px);
  display:grid;grid-template-columns:1.2fr auto;gap:40px;align-items:center;box-shadow:0 18px 44px rgba(8,27,58,.07)}
.fcta h2{margin-bottom:14px}
.fcta h2 em{font-style:normal;color:var(--blue)}
.fcta p{color:var(--muted);max-width:54ch}
.fcta__r{text-align:right}
.fcta__note{font-size:.875rem;color:var(--muted);margin-top:14px}
.fcta__note a{color:var(--blue);font-weight:600}

/* ============ 12. FOOTER ============ */
.ftr{background:var(--navy);color:rgba(255,255,255,.72);padding:64px 0 0;font-size:.9375rem}
.ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1fr 1.2fr;gap:36px;padding-bottom:44px}
.ftr img{height:36px;width:auto;margin-bottom:18px}
.ftr__tag{color:rgba(255,255,255,.6);line-height:1.5}
.ftr details{border:0}
.ftr summary{font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;font-weight:700;
  margin-bottom:16px;list-style:none;cursor:default}
.ftr summary::-webkit-details-marker{display:none}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.ftr a{color:rgba(255,255,255,.72)}
.ftr a:hover{color:var(--cyan)}
.social{display:flex;gap:14px;margin-top:16px}
.social a{width:34px;height:34px;border:1px solid var(--line-dark);border-radius:8px;display:grid;place-items:center;transition:border-color .2s,background-color .2s}
.social a:hover{border-color:var(--cyan);background:rgba(25,194,255,.12)}
.social svg{width:16px;height:16px;fill:currentColor}
.ftr__bar{border-top:1px solid var(--line-dark);padding:20px 0;font-size:.8125rem;color:rgba(255,255,255,.5);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ============ 13. REVEAL ============ */
.js .rv{opacity:0;transform:translateY(24px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease)}

/* ============ 14. RESPONSIVE ============ */
@media (max-width:1199px){
  .hero__in{grid-template-columns:1fr;gap:48px}
  .hero .viz{max-width:560px;margin-inline:auto}
  .phil__in{grid-template-columns:1fr 1fr;gap:40px}
  .phil__viz{grid-column:1/-1;max-width:340px;margin-inline:auto}
  .lab__grid{grid-template-columns:repeat(2,1fr)}
  .ftr__grid{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:1199px){
  .nav,.hdr .btn--primary{display:none}
  .burger{display:block}
  .brand__logo{height:64px}
  .hdr__in{height:96px}
}
@media (max-width:991px){
  :root{--pad:24px}
  .sol__grid{grid-template-columns:repeat(2,1fr)}
  .why__grid{grid-template-columns:repeat(2,1fr)}
  .values__card{grid-template-columns:repeat(2,1fr)}
  .value:nth-child(3){border-left:0}
  .value:nth-child(n+3){border-top:1px solid var(--border)}
  .prob__tabs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--pad));padding:4px var(--pad) 12px}
  .ptab{flex:0 0 74%;scroll-snap-align:center}
  .fcta__in{grid-template-columns:1fr;gap:28px}
  .fcta__r{text-align:left}
}
@media (max-width:767px){
  :root{--pad:16px}
  .phil__in{grid-template-columns:1fr}
  .sol__grid,.why__grid,.lab__grid,.values__card{grid-template-columns:1fr}
  .value{border-left:0}
  .value+.value{border-top:1px solid var(--border)}
  .lab__top{grid-template-columns:1fr;gap:16px}
  .ftr__grid{grid-template-columns:1fr;gap:8px}
  .ftr summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;
    padding:16px 0;margin:0;border-bottom:1px solid var(--line-dark)}
  .ftr summary::after{content:"+";font-size:1.25rem;font-weight:400}
  .ftr details[open] summary::after{content:"–"}
  .ftr details ul{padding:16px 0}
  .ftr__brand{padding-bottom:24px}
  .hero__cta .btn{flex:1 1 100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .viz .pulse{stroke-dasharray:none;stroke-dashoffset:0;opacity:.5}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .js .rv{opacity:1;transform:none}
}

/* ============ 12. INNER PAGES ============ */
.phero{position:relative;color:#fff;overflow:hidden;
  padding:clamp(146px,11vw,172px) 0 clamp(56px,6vw,76px);
  background:
    radial-gradient(760px 420px at 82% 26%,rgba(25,194,255,.15),transparent 62%),
    radial-gradient(620px 400px at 6% 10%,rgba(30,91,255,.20),transparent 60%),
    linear-gradient(168deg,var(--navy-deep) 0%,var(--navy-mid) 46%,var(--navy) 100%)}
.phero::before{content:"";position:absolute;inset:0;opacity:.32;pointer-events:none;
  background-image:linear-gradient(var(--line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(circle at 60% 40%,#000,transparent 78%)}
.phero .wrap{position:relative}
.phero h1{font-size:clamp(2.25rem,1.5rem + 2.6vw,3.5rem);max-width:20ch}
.phero__lead{margin:20px 0 30px;max-width:62ch;font-size:clamp(1rem,.96rem + .22vw,1.1875rem);
  color:rgba(255,255,255,.78);line-height:1.6}
.phero .btn{margin-top:4px}

.sect{padding:clamp(48px,5vw,68px) 0}
.sect--alt{background:var(--bg)}
/* A slightly deeper tint than --bg, so a band of white cards reads as sitting
   ON something rather than floating in the page ground. */
.sect--tint{background:#EEF3FA}
.sect h2{margin-bottom:8px}
/* Section header set as two columns: the title left, the sentence that frames
   it set right on the same baseline. Keeps a wide band from opening with a
   single line of type floating in a lot of nothing. */
.sect__head{display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:end;margin-bottom:6px}
.sect__head .lead{margin-bottom:2px}
/* A dark band inside an otherwise light page. Used once, for the approach
   timeline, so the five ordered steps read as a single deliberate stretch
   rather than as more cards. Foreground tokens are flipped, not overridden
   per element, so anything dropped in here inherits correctly. */
.sect--dark{color:#fff;--focus:var(--cyan);position:relative;overflow:hidden;
  background:linear-gradient(158deg,var(--navy-deep) 0%,var(--navy-mid) 54%,#191A52 100%)}
.sect--dark::before{content:"";position:absolute;inset:0;opacity:.3;pointer-events:none;
  background-image:linear-gradient(var(--line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(circle at 22% 30%,#000,transparent 76%)}
.sect--dark .wrap{position:relative}
.sect--dark .eyebrow{color:var(--cyan)}
.sect--dark .lead{color:rgba(255,255,255,.74)}

/* The six-word rail under the hero lead. Repeats the lead's own six words as
   a scannable index of the grid below; the rule mark echoes the brand sheet,
   which sets INNOVATE INTELLIGENCE in letterspaced caps beside a thin rule. */
.caprail{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin:26px 0 32px;
  font-size:.6875rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,255,255,.7)}
.caprail::before{content:"";width:30px;height:2px;background:var(--cyan);margin-right:14px;flex:0 0 auto}
/* The separator trails its word rather than leading the next one, so if the
   rail does wrap at a narrow width the break is clean instead of opening a
   line with an orphaned pipe. */
.caprail span:not(:last-child)::after{content:"|";margin:0 9px;font-weight:400;opacity:.3;letter-spacing:0}
.wrap--narrow{max-width:860px}

.steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:18px;
  grid-template-columns:repeat(5,1fr)}
.steps--5{grid-template-columns:repeat(5,1fr)}
/* --sa (step accent) is declared here, on .step itself, NOT on
   ".steps--flow .step" — a descendant selector would out-specify the
   .step--s1..s5 ramp below and flatten all five to one colour. */
.step{--sa:var(--cyan);border-top:2px solid var(--border);padding-top:18px}
.step__n{display:block;font-size:.75rem;font-weight:700;letter-spacing:.14em;color:var(--blue);margin-bottom:10px}
.step h3{font-size:1.0625rem;margin-bottom:7px}
.step p{font-size:.875rem;color:var(--muted);line-height:1.55}

/* ---- connected timeline -------------------------------------------------
   The same five steps, drawn as a sequence instead of five separate columns:
   a round glyph badge per step, joined by a dashed rule so the eye is carried
   left to right and the order is the message.
   Because the steps are ORDERED, their accents are a progression along the
   brand arc (Electric Cyan -> Purple) rather than the categorical hues the
   capability cards use. Each is checked on Midnight Navy, where the 01..05
   label needs 4.5:1: 8.31 / 7.45 / 6.80 / 6.46 / 6.28. */
.steps--flow{grid-template-columns:repeat(5,1fr);gap:22px;margin-top:50px}
.steps--flow .step{border-top:0;padding-top:0;position:relative}
.step__ic{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
  position:relative;z-index:1;margin-bottom:20px;
  background:rgba(25,194,255,.14);background:color-mix(in srgb,var(--sa) 17%,var(--navy-deep));
  border:1px solid rgba(25,194,255,.42);border-color:color-mix(in srgb,var(--sa) 45%,transparent)}
.step__ic svg{width:26px;height:26px;fill:none;stroke:var(--sa);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* the dashed run to the next badge, and the dot that lands in it */
.steps--flow .step::before{content:"";position:absolute;top:30px;left:70px;right:-32px;
  border-top:1px dashed rgba(255,255,255,.24)}
.steps--flow .step::after{content:"";position:absolute;top:27px;right:-16px;
  width:5px;height:5px;border-radius:50%;background:var(--sa);opacity:.8}
.steps--flow .step:last-child::before,.steps--flow .step:last-child::after{content:none}
.steps--flow .step__n{color:var(--sa);margin-bottom:8px}
.steps--flow .step h3{color:#fff;margin-bottom:8px}
.steps--flow .step p{color:rgba(255,255,255,.72)}
.step--s1{--sa:#19C2FF}
.step--s2{--sa:#3CB4FE}
.step--s3{--sa:#60A6FC}
.step--s4{--sa:#8499FB}
.step--s5{--sa:#A78BFA}

.probs{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(3,1fr)}
.probs li{background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:22px}
.q{font-size:1.0625rem;font-weight:650;line-height:1.4;color:var(--text)}

.caps{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:0;
  grid-template-columns:repeat(2,1fr)}
.caps li{border-top:1px solid var(--border);padding:20px 0}
.caps h3{font-size:1rem;font-weight:650;padding-right:28px}

.sol__grid--2{grid-template-columns:repeat(2,1fr)}
/* one card on its own: keep it to a readable measure rather than letting it
   span the wrap or sit in a two-column grid with an empty half beside it */
.sol__grid--1{grid-template-columns:1fr;max-width:640px}
.tag--light{background:var(--bg);color:var(--blue);border:1px solid var(--border);
  align-self:flex-start;margin-bottom:12px}
.note{margin-top:26px;font-size:.9375rem;color:var(--muted);max-width:72ch}
.empty{background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:clamp(32px,5vw,56px);text-align:center}
.empty h2{margin-bottom:12px}
.empty p{color:var(--muted);max-width:56ch;margin-inline:auto}

.facts{margin:28px 0 0;display:grid;gap:0 44px;grid-template-columns:repeat(2,1fr)}
.facts>div{border-top:1px solid var(--border);padding:16px 0;display:flex;gap:16px}
.facts dt{flex:0 0 190px;font-weight:650;font-size:.9375rem}
.facts dd{margin:0;color:var(--muted);font-size:.9375rem}
.facts a{color:var(--blue);font-weight:600}

/* ---- form ---- */
.form{display:grid;gap:18px}
.form__row{display:grid;gap:18px;grid-template-columns:1fr 1fr}
.form label{display:block;font-size:.875rem;font-weight:650;color:var(--text)}
.form label>input,.form label>textarea{margin-top:7px}
.form label span[aria-hidden]{color:var(--blue)}
.form input,.form textarea{font:inherit;font-size:1rem;font-weight:400;padding:12px 14px;
  border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;color:var(--text);
  width:100%;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.form input:hover,.form textarea:hover{border-color:#B9CBE6}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(30,91,255,.16)}
.form input:focus-visible,.form textarea:focus-visible{outline:none}
.form textarea{resize:vertical;min-height:120px}
.checks{border:1px solid var(--border);border-radius:var(--radius-sm);padding:18px;margin:0;background:#fff}
.checks legend{font-size:.875rem;font-weight:650;padding:0 6px}
.check{display:flex!important;align-items:center;gap:10px;
  font-weight:400;padding:6px 0;cursor:pointer}
.check input{width:18px;height:18px;flex:none;accent-color:var(--blue);padding:0;margin-top:0}
.form button{justify-self:start;margin-top:4px}
.form__note{font-size:.8125rem;color:var(--muted);line-height:1.55;max-width:62ch}
.form__note a{color:var(--blue);font-weight:600}
.form__err{background:#FFF4E5;border:1px solid var(--warning);color:#7A4A00;
  border-radius:var(--radius-sm);padding:12px 14px;font-size:.875rem;font-weight:600}
.form__ok{background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:clamp(28px,4vw,44px);text-align:center}
.form__ok h2{margin-bottom:10px}
.form__ok p{color:var(--muted)}

/* ---- legal ---- */
.legal__s{margin-top:34px}
.legal__s h2{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);margin-bottom:10px}
.legal__s p{color:var(--muted);line-height:1.7}
.legal a{color:var(--blue);font-weight:600}
.todo{background:#FFF4E5;border:1px solid var(--warning);border-radius:var(--radius-sm);
  padding:18px 20px;color:#7A4A00;line-height:1.65;font-size:.9375rem}

@media (max-width:1199px){
  .steps,.steps--5{grid-template-columns:repeat(3,1fr)}
  .facts{grid-template-columns:1fr}
  .sol__grid--6{grid-template-columns:repeat(3,1fr);gap:20px}
  /* Once the row wraps, a left-to-right connector would run off the end of one
     line and start again on the next, which reads as five unrelated pairs.
     The numbers still carry the order, so the rule and its dot come off. */
  .steps--flow{grid-template-columns:repeat(3,1fr);row-gap:40px}
  .steps--flow .step::before,.steps--flow .step::after{content:none}
}
@media (max-width:991px){
  .probs{grid-template-columns:1fr 1fr}
  .sol__grid--2{grid-template-columns:1fr}
  .sol__grid--6{grid-template-columns:repeat(2,1fr)}
  .steps--flow{grid-template-columns:repeat(2,1fr)}
  .sect__head{grid-template-columns:1fr;gap:14px;align-items:start}
}
@media (max-width:767px){
  .steps,.steps--5{grid-template-columns:1fr}
  .probs{grid-template-columns:1fr}
  .caps{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .facts>div{flex-direction:column;gap:4px}
  .facts dt{flex:none}
  .sol__grid--6{grid-template-columns:1fr}
  /* One column: the badge moves beside the copy so a step is one line of
     reading rather than a stack the thumb has to scroll past. */
  .steps--flow{grid-template-columns:1fr;row-gap:26px}
  .steps--flow .step{display:grid;grid-template-columns:60px 1fr;column-gap:18px;align-items:start}
  .step__ic{margin-bottom:0}
  .steps--flow .step__n,.steps--flow .step h3,.steps--flow .step p{grid-column:2}
}

/* ============ 13. HERO DIAGRAM ============ */
/* Inline SVG, no library. Strokes and text use currentColor so the figure
   follows the hero's foreground; the one literal hue marks the modelled layer,
   which is the element the page's argument turns on. */
/* minmax(0,…) not plain fr: the figure inside carries .dg{min-width:540px} so
   it can scroll rather than shrink to illegibility, and a bare `fr` track
   floors itself at that min-content width. That inflated BOTH columns to
   540px on a phone and pushed the eyebrow, h1 and lead off-screen, where
   body{overflow-x:hidden} quietly clipped them instead of showing a
   scrollbar — and .dg-wrap's own scroll container never engaged, because the
   track had already given the diagram all 540px it asked for. */
.phero__in{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:52px;align-items:center}
.phero__in>*{min-width:0}
.phero--fig h1{max-width:16ch}
.phero__fig{margin:0}
.dg{width:100%;height:auto;display:block;overflow:visible}
.dg-box{fill:rgba(255,255,255,.05);stroke:currentColor;stroke-width:1.1;opacity:.9}
.dg-key{fill:rgba(25,194,255,.12);stroke:var(--cyan);stroke-width:1.5}
.dg-t{fill:currentColor;font-family:var(--sans);font-size:10px;font-weight:650}
.dg-sub{fill:currentColor;font-family:var(--sans);font-size:9.5px;opacity:.62}
.dg-lbl{fill:currentColor;font-family:var(--sans);font-size:9.5px;opacity:.78;font-style:italic}
.dg-line{stroke:currentColor;fill:none;stroke-width:1.1;opacity:.6}
.dg-accent{color:var(--cyan);opacity:1}
.dg-band{fill:none;stroke:currentColor;stroke-width:1;stroke-dasharray:3 4;opacity:.4}
.dg-tick{stroke:currentColor;stroke-width:1;stroke-dasharray:2 4;opacity:.32}
.dg-bandt{fill:currentColor;font-family:var(--sans);font-size:9px;font-weight:700;
  letter-spacing:.1em;opacity:.62}
.phero__fig figcaption{margin-top:16px;font-size:.8125rem;line-height:1.55;
  color:rgba(255,255,255,.55);max-width:52ch}

@media (max-width:991px){
  .phero__in{grid-template-columns:minmax(0,1fr);gap:36px}
  .phero--fig h1{max-width:20ch}
}

/* Below the tablet breakpoint the diagram would scale down to ~6px text.
   Give it its own scroll container at a legible minimum instead of shrinking it;
   the figcaption states the same claim in full-size page text either way. */
@media (max-width:767px){
  .dg-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
    margin-inline:calc(-1 * var(--pad));padding:0 var(--pad) 6px}
  .dg{min-width:540px}
}
/* ---- isometric layer stack (Expertise hero) -----------------------------
   Rebuilt from the reference artwork. Fills and strokes are per-slab literals
   in the markup rather than tokens, because the slab colours ARE the drawing:
   a cyan-to-violet climb through the stack with the teal applications layer
   as its brightest point. Everything here is sized for a dark ground. */
.iso-face,.iso-side{stroke-width:1}
.iso-side{opacity:.55}
.iso-t{fill:#fff;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.07em}
.iso-t--lead{font-size:11.5px;letter-spacing:.06em}
.iso-pill{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.4);stroke-width:1.1}
.iso-pill--key{stroke:var(--cyan)}
.iso-pt{fill:#fff;font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.09em}
.iso-dot{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.6}
.iso-dot--key{stroke:var(--cyan)}
.iso-wire{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1;stroke-dasharray:3 4}
.iso-rail{fill:rgba(255,255,255,.62);font-family:var(--sans);font-size:9.5px;
  font-weight:600;letter-spacing:.17em}

.dg-stage{fill:currentColor;font-family:var(--sans);font-size:9px;font-weight:700;
  letter-spacing:.09em;opacity:.66}
.dg-rowl{fill:currentColor;font-family:var(--sans);font-size:10px;font-weight:650;opacity:.72}
.dg-neq{fill:currentColor;font-family:var(--sans);font-size:15px;font-weight:700;opacity:.85}
.dg-div{stroke:currentColor;stroke-width:1;stroke-dasharray:2 5;opacity:.2}
/* the gap's own boundary does structural work, so it reads stronger than
   the .dg-div panel separator */
.dg-edge{stroke:currentColor;stroke-width:1;stroke-dasharray:4 4;opacity:.45}
/* integration topology: node ring, mesh edges, API hub */
.dg-mesh{stroke:currentColor;stroke-width:1;opacity:.42;fill:none}
.dg-node{fill:rgba(255,255,255,.07);stroke:currentColor;stroke-width:1.2;opacity:.92}
.dg-hub{fill:rgba(25,194,255,.16);stroke:var(--cyan);stroke-width:1.6}
.dg-hubt{fill:currentColor;font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.06em}
.dg-count{fill:currentColor;font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:-.01em}

/* ---- supplied raster artwork in a hero ---------------------------------
   KueryExpertise.png is 958x492 on an OPAQUE near-white wash: the file is
   RGBA but 0% of its pixels are actually transparent, and 43% are opaque
   near-white. On the navy hero it therefore needs a surface of its own, or
   it reads as a white rectangle dropped onto the page.
   Since the artwork supplies that light ground itself, the panel adds only
   depth: a radius and a shadow to lift it off the navy. Giving it white
   padding and a border as well put a second, slightly different white edge
   around the first, which read as a frame inside a frame. */
.phero__panel{border-radius:var(--radius);overflow:hidden;
  box-shadow:0 22px 54px rgba(2,8,23,.45)}
.phero__img{width:100%;height:auto;display:block}

/* ============ 15. CURRENT-WORK PAGES ============ */
/* Offer and proof cards: a flex column whose paragraph takes the slack, so
   the status tag and the link sit on the floor of every card in the row
   whatever the copy length above them. */
.sol__grid--offer .card{display:flex;flex-direction:column}
.sol__grid--offer .card p{flex-grow:1}
.sol__grid--offer .card .tag--light{margin:0 0 12px}
.sol__grid--4{grid-template-columns:repeat(4,1fr)}

/* Enterprise band on the home page: the long-term work, one click away.
   A dark card on the light page so it reads as a different register from
   the three offer cards above it, not as a fourth one. */
.ent{padding:var(--sect) 0}
.ent__in{position:relative;overflow:hidden;border-radius:20px;color:#fff;--focus:var(--cyan);
  padding:clamp(32px,4vw,56px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:44px;align-items:center;
  background:radial-gradient(520px 320px at 90% 15%,rgba(25,194,255,.18),transparent 62%),
    linear-gradient(150deg,var(--navy-deep) 0%,var(--navy-mid) 50%,var(--navy) 100%)}
.ent h2{margin-bottom:14px}
.ent__in>div>p:not(.eyebrow){color:rgba(255,255,255,.74);max-width:50ch;margin-bottom:26px}
.ent__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ent__list a{display:block;padding:14px 16px;border:1px solid var(--line-dark);border-radius:var(--radius-sm);
  background:rgba(255,255,255,.04);color:#fff;font-weight:600;font-size:.9375rem;line-height:1.3;
  transition:border-color .2s,background-color .2s}
.ent__list a:hover{border-color:var(--cyan);background:rgba(25,194,255,.10)}

@media (max-width:1199px){
  .sol__grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:991px){
  .ent__in{grid-template-columns:minmax(0,1fr);gap:28px}
}
@media (max-width:767px){
  .sol__grid--4,.ent__list{grid-template-columns:1fr}
}

/* Seven nav items plus the quote button fill the header exactly at 1200px,
   where the full nav first shows; "AI Worker" was the first to break onto two
   lines. Keep every label on one line and take a little padding back on the
   narrowest desktop band rather than hiding an item. */
.nav a,.nav button.navlink{white-space:nowrap}
@media (min-width:1200px) and (max-width:1279px){
  .nav a,.nav button.navlink{padding:10px 11px}
  .nav a::after{left:11px;right:11px}
  .hdr .btn--primary{margin-left:6px}
}