/* Inter (variable, weights 100-900), served from this site instead of Google Fonts */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Consultim-IT, Delft blue #42498C + amber #F2A03D */
:root{
  --navy:#2D3470;--primary:#42498C;--primary-75:#6B72A8;--primary-50:#A1A5C6;
  --primary-25:#C3C6DF;--primary-05:#F2F3F8;
  --amber:#F2A03D;--amber-dark:#D8862A;--amber-soft:#FEF7EC;
  --ink:#1C1F23;--body:#4A4F58;--grey:#F4F6F8;--line:#E3E6EE;
  --radius:10px;--radius-lg:16px;
  --shadow:0 1px 3px rgba(45,52,112,.06),0 8px 28px rgba(45,52,112,.07);
  --shadow-lg:0 4px 12px rgba(45,52,112,.08),0 20px 50px rgba(45,52,112,.12);
  --maxw:1180px;--ease:cubic-bezier(.22,.61,.36,1);

  /* ---- ONE vertical rhythm for the whole site ---- */
  --s-sec:clamp(68px,7vw,110px);   /* every section, top AND bottom */
  --s-sec-tight:clamp(42px,4.4vw,68px); /* the one 'quiet strip' variation */
  --s-head:clamp(34px,4vw,52px);   /* section heading -> its content */
  --s-gut:clamp(20px,4vw,28px);    /* page gutter */
  --s-gap:clamp(18px,2.2vw,26px);  /* grid gap */
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  color:var(--body);background:#fff;line-height:1.65;font-size:16.5px;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:var(--primary);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--navy)}
h1,h2,h3,h4{color:var(--navy);line-height:1.2;margin:0 0 .6em;font-weight:700;letter-spacing:-.02em}
h1{font-size:clamp(2rem,4.4vw,3.3rem)}h2{font-size:clamp(1.55rem,2.9vw,2.25rem)}
h3{font-size:clamp(1.1rem,1.7vw,1.32rem)}h4{font-size:1.02rem}
p{margin:0 0 1.1em}
.lead{font-size:1.13rem;max-width:68ch}
.small{font-size:.9rem}.muted{color:#767C88}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s-gut)}

/* ============================================================
   SECTION RHYTHM, ONE scale, applied identically everywhere.
   Every section gets the same top and bottom padding. There are
   no collapsing rules and no per-page exceptions: that is what
   makes the spacing read as consistent across the whole site.
   ============================================================ */
section{padding-top:var(--s-sec);padding-bottom:var(--s-sec)}
.cta-band{padding-top:var(--s-sec);padding-bottom:var(--s-sec)}
/* The single deliberate variation: a visually quiet strip. */
section.tight{padding-top:var(--s-sec-tight);padding-bottom:var(--s-sec-tight)}
/* Coloured bands must never sit flush against the next block. */
section[class*="bg-"]{padding-top:var(--s-sec);padding-bottom:var(--s-sec)}
/* First section after the hero keeps the full rhythm too. */
.hero + section,
section[class*="bg-"] + section,
section + section[class*="bg-"]{padding-top:var(--s-sec)}

.bg-grey{background:var(--grey)}.bg-soft{background:var(--primary-05)}
.bg-navy{background:var(--navy);color:#D9DCEC}
.bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4{color:#fff}
.eyebrow{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber-dark);margin-bottom:14px}
.bg-navy .eyebrow{color:var(--amber)}
.section-head{max-width:72ch;margin-bottom:var(--s-head)}
/* A heading block that is the last thing in a section shouldn't add trailing space */
.section-head:last-child{margin-bottom:0}

.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 28px;border-radius:var(--radius);
  font-weight:600;font-size:.97rem;border:2px solid transparent;cursor:pointer;
  transition:all .22s var(--ease);white-space:nowrap}
.btn-primary{background:var(--amber);color:#3A2B10;box-shadow:0 4px 14px rgba(242,160,61,.32)}
.btn-primary:hover{background:var(--amber-dark);color:#2A1D08}
.btn-outline{border-color:var(--primary-25);color:var(--primary)}
.btn-outline:hover{border-color:var(--primary);background:var(--primary-05)}
.btn-ghost-light{border-color:rgba(255,255,255,.3);color:#fff}
.btn-ghost-light:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}
.btn-sm{padding:10px 20px;font-size:.88rem}
.link-arrow{font-weight:600;display:inline-flex;align-items:center;gap:6px}
.link-arrow::after{content:"→";transition:transform .2s var(--ease)}
.link-arrow:hover::after{transform:translateX(4px)}

header.site{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{display:flex;align-items:center;gap:11px}
.logo svg{height:36px;width:auto}
.logo-text{font-weight:800;font-size:1.18rem;color:var(--navy);letter-spacing:-.035em}
.logo-text .it{color:var(--amber-dark)}
.nav-links{display:flex;align-items:center;gap:1px;list-style:none;margin:0;padding:0}
.nav-links>li{position:relative}
.nav-links>li>a{display:block;padding:9px 13px;border-radius:7px;color:var(--ink);font-weight:500;font-size:.93rem}
.nav-links>li>a:hover,.nav-links>li>a.active{background:var(--primary-05);color:var(--primary)}
.dropdown{position:absolute;top:calc(100% + 8px);left:0;min-width:346px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:9px;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .2s var(--ease)}
.nav-links>li:hover .dropdown,.nav-links>li:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:block;padding:10px 13px;border-radius:7px;color:var(--ink);font-size:.9rem;font-weight:500}
.dropdown a:hover{background:var(--primary-05);color:var(--primary)}
.dropdown a span{display:block;font-size:.77rem;color:#868C99;font-weight:400;margin-top:1px}
.nav-cta{display:flex;align-items:center;gap:12px}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.burger span{display:block;width:23px;height:2px;background:var(--navy);border-radius:2px;transition:.25s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.hero{padding-top:var(--s-sec);padding-bottom:var(--s-sec);border-bottom:1px solid var(--line);
  background:radial-gradient(1100px 460px at 78% -12%,rgba(66,73,140,.1),transparent 62%),
  linear-gradient(180deg,var(--primary-05),#fff 76%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,4vw,56px);align-items:center}
.hero h1{margin-bottom:.35em}.hero h1 .accent{color:var(--amber-dark)}
.hero-sub{font-size:1.18rem;max-width:56ch;margin-bottom:1.6em}
.hero-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:32px}
.badge-ai{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:30px;
  background:var(--amber-soft);border:1px solid #F3D3A6;color:var(--amber-dark);
  font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:20px}
.badge-ai::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber)}
.proof-strip{display:flex;flex-wrap:wrap;gap:10px 26px;padding-top:24px;border-top:1px solid var(--line);
  font-size:.87rem;color:#6B7280;font-weight:500}
.proof-strip b{color:var(--navy);font-weight:700}

/* Desktop: pin the figure to the top of the hero so it sits in the same spot in every
   language, regardless of how long the translated headline/paragraph is. */
@media(min-width:1001px){.hero-visual{align-self:start;padding-top:48px}}
.stackfig-keys b,.stackfig-keys span{overflow-wrap:anywhere}

/* Hero figure: diagram and labels in separate grid columns, cannot overlap */
.hero-visual{display:flex;justify-content:center;align-items:center;width:100%;min-width:0}
.stackfig{display:grid;grid-template-columns:minmax(0,1fr) 178px;
  align-items:center;gap:clamp(10px,1.6vw,20px);width:100%;max-width:520px}
.stackfig-art{grid-column:1;min-width:0}
.stackfig-art svg{width:100%;height:auto;display:block}
.stackfig-keys{grid-column:2;list-style:none;margin:0;padding:0;min-width:0;
  display:grid;grid-template-rows:repeat(3,1fr);height:100%;align-items:center}
.stackfig-keys li{padding:10px 0 10px 18px;position:relative;min-width:0;
  opacity:0;animation:sfIn .55s var(--ease) forwards}
.stackfig-keys li:nth-child(1){animation-delay:.25s}
.stackfig-keys li:nth-child(2){animation-delay:.4s}
.stackfig-keys li:nth-child(3){animation-delay:.55s}
.stackfig-keys li::before{content:"";position:absolute;left:0;top:calc(50% - 13px);
  width:3px;height:26px;border-radius:2px}
.stackfig-keys .k-ai::before{background:#2D3470}
.stackfig-keys .k-app::before{background:#6B72A8}
.stackfig-keys .k-sec::before{background:#C3C6DF}
.stackfig-keys b{display:block;color:var(--navy);font-size:.94rem;font-weight:700;
  letter-spacing:-.01em;line-height:1.25}
.stackfig-keys .k-ai b::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--amber);margin-left:6px;vertical-align:middle}
.stackfig-keys span{display:block;font-size:.76rem;color:#858B99;margin-top:3px;line-height:1.4}
@keyframes sfIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .stackfig-keys li{opacity:1;animation:none}
  .stackfig-art animate{display:none}
}

.page-hero{padding-top:var(--s-sec-tight);padding-bottom:var(--s-sec-tight);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--primary-05),#fff)}
.page-hero h1{margin-bottom:.3em}
.breadcrumb{font-size:.83rem;color:#868C99;margin-bottom:16px}
.breadcrumb a{color:#868C99}

.grid{display:grid;gap:var(--s-gap)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px;
  transition:all .25s var(--ease)}
.card:hover{box-shadow:var(--shadow);border-color:var(--primary-50)}
a.card,a.card:hover{color:var(--body)}
.card h3{margin-bottom:.45em;font-size:1.12rem}
.card p{font-size:.95rem;margin-bottom:.9em}.card p:last-child{margin-bottom:0}
.card .icon{width:46px;height:46px;border-radius:11px;background:var(--primary-05);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.card .icon svg{width:24px;height:24px;stroke:var(--primary);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.challenge{position:relative;display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 56px 26px 28px;transition:all .22s var(--ease)}
.challenge::after{content:"\2192";position:absolute;right:26px;top:50%;transform:translate(-6px,-50%);font-size:1.15rem;
  color:var(--primary);opacity:0;transition:all .22s var(--ease)}
.challenge:hover{border-color:var(--primary-50);transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.challenge:hover::after{opacity:1;transform:translate(0,-50%)}
.challenge strong{display:block;color:var(--navy);font-size:1.02rem;margin-bottom:5px}
.challenge span{font-size:.88rem;color:#767C88}
.pillar{padding:30px;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--line)}
.pillar .tag{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.14em;
  padding:4px 11px;border-radius:20px;background:var(--navy);color:#fff;margin-bottom:14px}
.pillar:nth-child(2) .tag{background:var(--primary-75)}
.pillar:nth-child(3) .tag{background:var(--amber);color:#3A2B10}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{text-align:center;padding:26px 16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg)}
.stat .n{font-size:2.1rem;font-weight:800;color:var(--navy);line-height:1;letter-spacing:-.03em}
.stat .n em{font-style:normal;color:var(--amber-dark)}
.stat .l{font-size:.83rem;color:#767C88;margin-top:8px;font-weight:500}
.logo-wall{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.logo-wall span{padding:11px 20px;border:1px solid var(--line);border-radius:30px;background:#fff;
  font-size:.87rem;font-weight:600;color:var(--navy)}
.case-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;transition:all .25s var(--ease);display:flex;flex-direction:column}
.case-card,.case-card:hover{color:var(--body)}
.case-card:hover{border-color:var(--primary-50);box-shadow:var(--shadow)}
.case-card:hover h3{color:var(--primary)}
.case-band{height:5px;background:linear-gradient(90deg,var(--navy),var(--primary-75),var(--amber))}
.case-card .case-band{display:none}
.case-body{padding:28px;flex:1;display:flex;flex-direction:column}
.case-meta{font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--amber-dark);margin-bottom:11px}
.case-card h3{font-size:1.1rem;margin-bottom:.5em}
.case-card p{font-size:.93rem;flex:1}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.chip{font-size:.74rem;padding:4px 10px;border-radius:5px;background:var(--primary-05);
  color:var(--primary);font-weight:600}
.case-detail{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  margin-bottom:var(--s-gap);background:#fff}
.case-detail .case-band{display:none}
.case-detail-body{padding:34px 36px}
.case-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:18px;
  padding:20px 22px;background:var(--grey);border-radius:var(--radius);margin:20px 0 24px}
.case-facts div span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;
  color:#868C99;font-weight:700;margin-bottom:3px}
.case-facts div b{color:var(--navy);font-size:.92rem;font-weight:600;overflow-wrap:anywhere}
.block-label{font-size:.75rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--amber-dark);margin:22px 0 8px}
.filter-note{padding:14px 20px;background:var(--amber-soft);border:1px solid #F3D3A6;
  border-radius:var(--radius);margin-bottom:24px;font-size:.92rem;color:#7A5416;display:none}
.filter-note.show{display:block}
.filter-note a{color:#7A5416;text-decoration:underline;font-weight:600}
.no-results{display:none;padding:40px;text-align:center;background:var(--grey);
  border-radius:var(--radius-lg);color:#767C88}
.no-results.show{display:block}
.offer{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 28px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
  display:flex;flex-direction:column}
.offer:hover{box-shadow:var(--shadow);border-color:var(--primary-50)}
.offer .kind{align-self:flex-start;font-size:.66rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;padding:3px 10px;border-radius:4px;background:var(--primary-05);
  color:var(--primary);margin-bottom:12px}
.offer.assess .kind{background:var(--amber-soft);color:var(--amber-dark)}
.offer h3{font-size:1.02rem;margin-bottom:.5em}
.offer p{font-size:.92rem;margin-bottom:.7em}
.offer .dur{font-size:.79rem;font-weight:700;color:var(--amber-dark);margin-top:auto}
.tier{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px;
  display:flex;flex-direction:column}
.tier.featured{border-color:var(--primary-50);box-shadow:var(--shadow-lg)}
.tier .label{align-self:flex-start;font-size:.7rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 12px;border-radius:20px;background:var(--primary-05);
  color:var(--primary);margin-bottom:16px}
.tier.featured .label{background:var(--amber);color:#3A2B10}
.tier .best{margin-top:auto;padding:16px;border-radius:var(--radius);background:var(--grey);
  border:1px solid var(--line);font-size:.9rem;font-weight:600;color:#334155}
.method{display:grid;gap:16px}
.method-step{display:flex;gap:22px;align-items:flex-start;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 28px}
.method-step .num{flex:0 0 50px;height:50px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.22rem;font-weight:800}
.method-step:last-child .num{background:var(--amber);color:#3A2B10}
.method-step h3{margin-bottom:.35em;font-size:1.05rem}
.method-step p{font-size:.94rem;margin-bottom:.5em}
.method-step p:last-child{margin-bottom:0}
ul.ticks{list-style:none;padding:0;margin:0 0 1.2em}
ul.ticks li{position:relative;padding-left:29px;margin-bottom:10px;font-size:.96rem}
ul.ticks li::before{content:"";position:absolute;left:0;top:.52em;width:14px;height:8px;
  border-left:2.4px solid var(--amber);border-bottom:2.4px solid var(--amber);transform:rotate(-45deg)}
ul.ticks:last-child{margin-bottom:0}
ul.plain{list-style:none;padding:0;margin:0 0 1.2em}
ul.plain li{padding:9px 0;border-bottom:1px solid var(--line);font-size:.95rem}
ul.plain li:last-child{border-bottom:0}
ul.plain:last-child{margin-bottom:0}
ul.crosses{list-style:none;padding:0;margin:0 0 1.2em}
ul.crosses li{position:relative;padding-left:27px;margin-bottom:9px;font-size:.95rem;color:#767C88}
ul.crosses li::before{content:"×";position:absolute;left:5px;top:-3px;font-size:1.2rem;color:#B9BECC;font-weight:700}
ul.crosses:last-child{margin-bottom:0}
.process{display:flex;flex-wrap:wrap;gap:12px}
.process .step{flex:1 1 150px;padding:20px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius)}
.process .step b{display:block;color:var(--navy);margin-bottom:5px;font-size:.98rem}
.process .step span{font-size:.85rem;color:#767C88}
.sla-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:var(--s-gap)}
.sla-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 28px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
  display:flex;flex-direction:column}
.sla-card:hover{box-shadow:var(--shadow);border-color:var(--primary-50)}
.sla-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.sla-pri{font-size:.76rem;font-weight:800;letter-spacing:.08em;padding:4px 10px;border-radius:6px;
  background:var(--primary-05);color:var(--primary)}
.sla-card.p1 .sla-pri{background:#FBEDEC;color:#B03A31}
.sla-card.p2 .sla-pri{background:var(--amber-soft);color:var(--amber-dark)}
.sla-head b{color:var(--navy);font-size:1.02rem}
.sla-card>p{font-size:.93rem;margin-bottom:16px;flex:1}
.sla-card dl{margin:0;padding-top:16px;border-top:1px solid var(--line)}
.sla-card dt{font-size:.7rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:#868C99;margin-bottom:3px}
.sla-card dd{margin:0 0 12px;font-size:.9rem;color:var(--navy);font-weight:600;line-height:1.45}
.sla-card dd:last-child{margin-bottom:0}
.model-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px 32px;transition:all .22s var(--ease);display:flex;flex-direction:column}
.model-card:hover{box-shadow:var(--shadow);border-color:var(--primary-50)}
.model-card h3{font-size:1.14rem;margin-bottom:.5em}
.model-card>p{font-size:.96rem;margin-bottom:20px;flex:1}
.model-best{padding:16px 18px;background:var(--primary-05);border-radius:var(--radius);
  font-size:.92rem;color:#3C4250;line-height:1.5}
.model-best span{display:block;font-size:.68rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--amber-dark);margin-bottom:5px}
.acc{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:11px;background:#fff}
.acc:last-of-type{margin-bottom:0}
.acc-q{width:100%;text-align:left;background:none;border:0;padding:19px 24px;cursor:pointer;
  font-size:1rem;font-weight:600;color:var(--navy);display:flex;justify-content:space-between;
  align-items:center;gap:16px;font-family:inherit}
.acc-q:hover{background:var(--primary-05)}
.acc-q::after{content:"+";font-size:1.4rem;color:var(--amber-dark);font-weight:400;transition:transform .22s var(--ease)}
.acc.open .acc-q::after{transform:rotate(45deg)}
.acc-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.acc-a p{padding:0 24px 20px;margin:0;font-size:.95rem}
.cta-band{background:radial-gradient(900px 420px at 2% 0%,rgba(150,95,105,.3),transparent 62%),radial-gradient(1000px 520px at 100% 100%,rgba(88,78,170,.45),transparent 60%),#1B1A4C;
  color:#D9DCEC;text-align:center}
.cta-band h2{color:#fff;margin-bottom:.4em}
.cta-band p{max-width:60ch;margin:0 auto 2em;font-size:1.07rem}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-inline{background:radial-gradient(700px 360px at 100% 100%,rgba(88,78,170,.45),transparent 62%),#1B1A4C;border-radius:var(--radius-lg);
  padding:44px 48px;color:#D9DCEC}
.cta-inline h2{color:#fff}.cta-inline .lead{color:#C2C7DE}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:34px;box-shadow:var(--shadow)}
.field{margin-bottom:18px}
.field label{display:block;font-size:.87rem;font-weight:600;color:var(--navy);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1px solid var(--line);
  border-radius:8px;font-family:inherit;font-size:.95rem;color:var(--ink);background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(66,73,140,.1)}
.field textarea{resize:vertical;min-height:116px}
.form-note{font-size:.82rem;color:#868C99;margin-top:14px}
.form-success{display:none;padding:16px 18px;background:#EAF7EE;border:1px solid #BCE3C8;
  border-radius:8px;color:#1E6B39;font-size:.93rem;margin-top:16px}
.form-success.show{display:block}
.info-block{padding:24px 26px;background:var(--grey);border-radius:var(--radius-lg);margin-bottom:18px}
.info-block:last-child{margin-bottom:0}
.info-block h4{margin-bottom:.5em}
.info-block p{font-size:.93rem;margin-bottom:.4em;overflow-wrap:anywhere}
.info-block p:last-child{margin-bottom:0}
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px}
.filter{padding:8px 17px;border-radius:24px;border:1px solid var(--line);background:#fff;
  font-size:.87rem;font-weight:600;color:var(--body);cursor:pointer;transition:all .2s var(--ease);font-family:inherit}
.filter:hover{border-color:var(--primary-50)}
.filter.active{background:var(--navy);border-color:var(--navy);color:#fff}
.callout{border:1px solid var(--line);background:var(--primary-05);padding:20px 24px;
  border-radius:var(--radius);margin:26px 0}
.callout:last-child{margin-bottom:0}
.callout p{margin:0;font-size:.95rem}.callout p+p{margin-top:.7em}
.deploy{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:26px 0}
.deploy div{padding:22px 24px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff}
.deploy div b{display:block;color:var(--navy);margin-bottom:6px}
.deploy div span{font-size:.9rem;color:#767C88}
footer.site{background:var(--navy);color:#A9AEC9;padding:calc(var(--s-sec) * .62) 0 28px;font-size:.92rem}
footer.site h4{color:#fff;font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:16px}
footer.site a{color:#A9AEC9;display:block;padding:4px 0;overflow-wrap:anywhere}
footer.site a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-bottom:48px}
.foot-logo{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.foot-logo svg{height:36px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.28))}
.foot-logo .logo-text{color:#fff;font-size:1.24rem}
.foot-logo .logo-text .it{color:var(--amber)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.13);padding-top:22px;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}

@media(max-width:1180px){.nav-links>li>a{padding:9px 10px;font-size:.88rem}}
@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:38px}
  .hero-visual{order:-1}
  .stackfig{max-width:480px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .deploy{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:30px}
  .burger{display:flex}
  .nav-links{display:none;position:absolute;top:74px;left:0;right:0;background:#fff;
    flex-direction:column;align-items:stretch;padding:12px;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lg);max-height:78vh;overflow-y:auto}
  .nav-links.open{display:flex}
  .nav-links>li>a{padding:13px;font-size:.95rem}
  .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    border-left:2px solid var(--line);border-radius:0;margin:0 0 6px 13px;padding:0 0 0 8px;min-width:0}
  .nav-cta .btn{display:none}
  .g2,.g3{grid-template-columns:1fr}
  .case-detail-body{padding:26px 24px}
  .method-step{flex-direction:column;gap:14px}
  .cta-inline{padding:32px 26px}
}
@media(max-width:760px){
  .sla-grid{grid-template-columns:1fr}
  .case-facts{grid-template-columns:1fr;gap:14px;padding:18px 20px}
  .process .step{flex:1 1 100%}
  .offer,.tier,.model-card{padding:24px 22px}
  .form-card{padding:26px 22px}
  .method-step{padding:22px 22px}
  .cta-row .btn{width:100%;justify-content:center}
  .filter{padding:7px 14px;font-size:.83rem}
  .acc-q{padding:16px 18px;font-size:.95rem}
  .acc-a p{padding:0 18px 17px}
  .info-block{padding:20px 22px}
  .logo-wall span{padding:9px 16px;font-size:.83rem}
}
@media(max-width:620px){
  .stackfig{grid-template-columns:1fr;gap:22px;max-width:340px}
  .stackfig-art,.stackfig-keys{grid-column:1}
  .stackfig-keys{grid-template-rows:none;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px 18px;height:auto}
  .stackfig-keys li{padding:0 0 0 15px}
  .stackfig-keys li::before{top:2px;height:calc(100% - 4px)}
}
@media(max-width:480px){
  .g4{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero h1{font-size:1.9rem}
  .btn{padding:13px 22px;font-size:.93rem}
  .case-detail-body{padding:22px 18px}
  .sla-card{padding:22px 20px}
}


/* ---- Accessibility: skip link (also a positive SEO/a11y signal) ---- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 20px;
  background:var(--navy);color:#fff;font-weight:600;border-radius:0 0 8px 0}
.skip-link:focus{left:0;color:#fff}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:4px}



/* ---------- Page-hero call to action (inner pages) ---------- */
.hero-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:28px}
@media(max-width:560px){
  .hero-actions{gap:14px;margin-top:22px}
  .hero-actions .btn{width:100%;justify-content:center}
}

/* ============================================================
   MOBILE HERO FIX, append to the END of css/style.css
   Tablet: diagram moves below the copy.
   Phone:  hero visual removed entirely (diagram + labels), so the
           headline, CTA and proof strip land on first screen.
   ============================================================ */

/* Tablet: headline first, diagram after the CTAs.
   Overrides the earlier `.hero-visual{order:-1}` rule. */
@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-visual{order:2}
  .stackfig{max-width:440px;margin:0 auto}
}

/* Phone: drop the whole hero visual and tighten the copy. */
@media(max-width:620px){
  .hero{padding-top:34px;padding-bottom:40px}
  .hero-grid{gap:0}
  .hero-visual{display:none}

  .badge-ai{margin-bottom:14px;padding:6px 13px;font-size:.72rem}
  .hero h1{font-size:2rem;margin-bottom:.4em}
  .hero-sub{font-size:1rem;margin-bottom:1.4em}
  .hero-cta{gap:14px;margin-bottom:26px}
  .hero-cta .btn{width:100%;justify-content:center}
  .proof-strip{gap:8px 18px;padding-top:20px;font-size:.82rem}
}

@media(max-width:400px){
  .hero h1{font-size:1.82rem}
}

/* Hero proof points: centred pill chips above the headline */
.proof-pills{grid-column:1/-1;justify-self:center;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;margin-bottom:8px}
.proof-pills span{display:inline-flex;align-items:center;gap:9px;padding:9px 20px;border-radius:30px;background:#fff;
  border:1px solid var(--line);box-shadow:0 1px 2px rgba(45,52,112,.05);color:var(--navy);font-size:.92rem;font-weight:500;white-space:nowrap}
@media(max-width:620px){.proof-pills{gap:8px;margin-bottom:18px}.proof-pills span{padding:7px 14px;font-size:.8rem}}

/* ---------- Language switcher (dropdown) ---------- */
.langsw{position:relative}
.langsw-btn{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;background:#fff;border:1px solid var(--line);
  border-radius:10px;font:inherit;font-size:.82rem;font-weight:700;letter-spacing:.03em;color:var(--navy);cursor:pointer;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.langsw-btn:hover,.langsw.open .langsw-btn{border-color:var(--primary);box-shadow:0 2px 8px rgba(45,52,112,.1)}
.langsw .chev{transition:transform .2s var(--ease);color:#767C88}
.langsw.open .chev{transform:rotate(180deg)}
.langsw-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:164px;margin:0;padding:6px;list-style:none;
  background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(45,52,112,.16);
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:all .18s var(--ease)}
.langsw.open .langsw-menu{opacity:1;visibility:visible;transform:none}
.langsw-menu a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;font-size:.9rem;font-weight:500;color:var(--navy)}
.langsw-menu a:hover{background:var(--primary-05)}
.langsw-menu a.on{background:var(--primary-05);font-weight:700}
.langsw-menu a.on::after{content:"";margin-left:auto;width:6px;height:10px;border:solid var(--amber-dark);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-2px,-2px)}
.fl{display:inline-block;flex:none;width:22px;height:15px;border-radius:3px;background-size:cover;background-position:center;
  box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.fl-en{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Crect width='60' height='40' fill='%23012169'/%3E%3Cpath d='M0 0l60 40M60 0L0 40' stroke='%23fff' stroke-width='8'/%3E%3Cpath d='M0 0l60 40M60 0L0 40' stroke='%23C8102E' stroke-width='3'/%3E%3Cpath d='M30 0v40M0 20h60' stroke='%23fff' stroke-width='13'/%3E%3Cpath d='M30 0v40M0 20h60' stroke='%23C8102E' stroke-width='8'/%3E%3C/svg%3E")}
.fl-fr{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Crect width='20' height='40' fill='%230055A4'/%3E%3Crect x='20' width='20' height='40' fill='%23fff'/%3E%3Crect x='40' width='20' height='40' fill='%23EF4135'/%3E%3C/svg%3E")}
.fl-de{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Crect width='60' height='14' fill='%23000'/%3E%3Crect y='13' width='60' height='14' fill='%23DD0000'/%3E%3Crect y='26' width='60' height='14' fill='%23FFCE00'/%3E%3C/svg%3E")}
@media(max-width:1000px){
  .nav-cta{gap:8px}
  .langsw{order:-1}
}
@media(max-width:420px){
  .langsw-btn{padding:6px 9px;gap:6px}
}

/* Header nav: single-line labels, aligned in every language (DE/FR labels are longer). */
.logo-text{white-space:nowrap}
.nav-links>li>a{white-space:nowrap}

/* "We use AI. We build AI." band: deeper indigo with a soft warm glow top-left and a lighter indigo bloom bottom-right. */
.bg-navy-deep{background:
  radial-gradient(900px 420px at 2% 0%,rgba(150,95,105,.38),transparent 62%),
  radial-gradient(1000px 520px at 100% 100%,rgba(88,78,170,.5),transparent 60%),
  #1B1A4C}

/* ---------- Positioning: Microsoft core, open-technology orbit ---------- */
.accent-amber{color:var(--amber-dark)}
.tech-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.tech-copy .section-head{margin-bottom:22px}
.tech-copy p{margin:0 0 1em}
.orbit-wrap{container-type:inline-size;width:100%;max-width:580px;justify-self:center}
.orbit{position:relative;width:100%;aspect-ratio:1;
  background:radial-gradient(closest-side,rgba(66,73,140,.09),transparent 72%)}
.ring{position:absolute;border-radius:50%;border:1px solid rgba(66,73,140,.14);animation:orbSpin 90s linear infinite}
.ring-out{--r:46cqw;width:92%;height:92%;left:4%;top:4%}
.ring-in{--r:26cqw;width:52%;height:52%;left:24%;top:24%;animation-direction:reverse;animation-duration:70s}
.o{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateY(calc(var(--r) * -1))}
.chip-o{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:.45em;white-space:nowrap;
  padding:.38em .8em .38em .6em;border-radius:30px;background:#fff;border:1px solid var(--line);
  box-shadow:0 2px 8px rgba(45,52,112,.07);color:var(--navy);font-size:clamp(.56rem,2.15cqw,.8rem);font-weight:600;
  transform:translate(-50%,-50%) rotate(calc(var(--a) * -1));animation:orbCounter 90s linear infinite}
.chip-o img{width:1.25em;height:1.25em;flex:none}
.ring-out .chip-o{color:#4A4F58;font-weight:500}
.ring-in .chip-o{border-color:var(--primary-25);animation-direction:reverse;animation-duration:70s}
.orbit-core{position:absolute;left:50%;top:50%;width:19%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:linear-gradient(145deg,#3D4489,#262C63);display:grid;place-items:center;
  box-shadow:0 0 0 8px rgba(66,73,140,.1),0 10px 30px rgba(45,52,112,.28);animation:orbPulse 4s ease-in-out infinite}
.orbit-core svg{width:44%;height:auto}
.orbit:hover .ring,.orbit:hover .chip-o{animation-play-state:paused}
@keyframes orbSpin{to{transform:rotate(360deg)}}
@keyframes orbCounter{from{transform:translate(-50%,-50%) rotate(calc(var(--a) * -1))}
  to{transform:translate(-50%,-50%) rotate(calc(var(--a) * -1 - 360deg))}}
@keyframes orbPulse{50%{box-shadow:0 0 0 14px rgba(66,73,140,.06),0 10px 30px rgba(45,52,112,.28)}}
@media(prefers-reduced-motion:reduce){.ring,.chip-o,.orbit-core{animation:none}}
@media(max-width:900px){.tech-grid{grid-template-columns:1fr}.orbit-wrap{max-width:460px}}

/* ---------- Footer layout: brand + address cards on top, three aligned columns below ---------- */
footer.site{background:
  radial-gradient(800px 360px at 2% 0%,rgba(150,95,105,.3),transparent 62%),
  radial-gradient(900px 420px at 100% 100%,rgba(88,78,170,.4),transparent 60%),
  #1B1A4C}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:32px 48px;margin-bottom:48px}
.foot-brand{max-width:480px}
.foot-brand p{margin:0;line-height:1.65}
.foot-addr{display:flex;gap:16px;flex-wrap:wrap}
.foot-addr address{font-style:normal;min-width:240px;padding:18px 22px;border-radius:var(--radius-lg);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);line-height:1.6}
.foot-addr b{display:flex;align-items:center;gap:9px;color:#fff;font-size:.98rem;margin-bottom:6px}
.fi{width:18px;height:18px;flex:none;fill:none;stroke:var(--amber);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
footer.site a.ico-link{display:flex;align-items:center;gap:12px;padding:6px 0}
.fi-wrap{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);transition:border-color .2s var(--ease)}
.fi-wrap .fi{width:17px;height:17px}
footer.site a.ico-link:hover .fi-wrap{border-color:rgba(255,255,255,.4)}
@media(max-width:700px){.foot-top{flex-direction:column}.foot-addr{width:100%}.foot-addr address{flex:1 1 220px}}
.foot-addr b + br{display:none}

/* Desktop: the address cards and the Contact column share one grid, so they start on the same vertical line. */
@media(min-width:1001px){
  .foot-top,.foot-grid{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:40px}
  .foot-top{align-items:start}
  .foot-brand{grid-column:1 / 3}
  .foot-addr{grid-column:3;flex-wrap:nowrap;gap:16px}
  .foot-addr address{flex:1 1 0;min-width:0}
}
.foot-addr address{padding:18px 18px;font-size:.88rem}

/* ===== Solutions pages: modern styles (from the Solutions UI work) ===== */
/* ============================================================
   MODERN PAGES (body.page-modern): Solutions + solution pages
   Calm, flat, full-width bands. Minimal motion.
   ============================================================ */
/* No scroll-in animation; cards only shift colour on hover */
.page-modern .reveal{opacity:1;transform:none;transition:none}
.page-modern .card:hover{transform:none}

/* Hero: no divider, no actions, content starts close to the intro */
.page-modern .page-hero{border-bottom:0;padding-bottom:0}
.page-modern .page-hero .lead{margin-bottom:0}
.page-modern .page-hero + section{padding-top:clamp(30px,3.4vw,44px)}

/* Consecutive sections with the same background read as one band */
.page-modern section.bg-grey + section.bg-grey{padding-top:0}

/* Two-weight headings */
.page-modern .h-light{font-weight:400;color:var(--primary-75)}

/* Cards: neutral text, brand-blue link, never amber */
.page-modern .card{transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease)}
.page-modern .card:hover{box-shadow:var(--shadow);border-color:var(--primary-25)}
.page-modern a.card{color:var(--body)}
.page-modern a.card .link-arrow{color:var(--primary)}
.page-modern a.card:hover .link-arrow{color:var(--navy)}

/* Two-column text + aside */
.split{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(32px,5vw,64px);align-items:start}
.split-center{align-items:center}
.split h3{margin-bottom:16px}

/* Technology stack card */
.stack-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px}
.stack-card h3{font-size:1.12rem;margin-bottom:6px}
.stack-group{padding:16px 0;border-bottom:1px solid var(--line)}
.stack-group:last-child{border-bottom:0;padding-bottom:0}
.stack-group h4{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--primary-75);margin:0 0 10px}
.stack-tags{display:flex;flex-wrap:wrap;gap:8px}
.stack-tags span{font-size:.86rem;font-weight:500;color:var(--navy);background:var(--primary-05);
  border:1px solid var(--primary-25);border-radius:8px;padding:6px 12px;line-height:1.3}

/* Full-width dark band (Beyond project delivery, AI foundations, governance) */
.page-modern section.band-dark{
  background:
    radial-gradient(700px 380px at 0% 0%,rgba(242,160,61,.16),transparent 70%),
    radial-gradient(800px 460px at 100% 100%,rgba(107,114,168,.30),transparent 70%),
    linear-gradient(135deg,#232A5E,#1B2150);
  color:#C3C6DF}
.band-dark .eyebrow{color:var(--amber)}
.band-dark h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.7rem);margin:0}
.band-dark .h-light{color:#A1A5C6}
.band-dark .section-head{margin-bottom:clamp(28px,3.4vw,44px)}
.band-dark .section-head .lead{color:#C3C6DF;margin:14px 0 0}
.band-dark .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:#C3C6DF}
.band-dark .card:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24);box-shadow:none}
.band-dark .card h3{color:#fff}
.band-dark .card p{color:#C3C6DF}
.band-dark a.card .link-arrow{color:#C3C6DF}
.band-dark a.card:hover .link-arrow{color:#fff}

/* Deployment models */
.deploy-card{display:flex;flex-direction:column}
.deploy-card p{flex:1}
.deploy-key{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-size:.86rem;font-weight:600;color:var(--primary)}

/* Process steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-gap)}
.steps li{padding-top:18px;border-top:2px solid var(--primary-25)}
.steps li:first-child{border-top-color:var(--primary)}
.steps .step-num{display:block;font-size:.78rem;font-weight:700;color:var(--primary-75);letter-spacing:.08em;margin-bottom:8px}
.steps b{display:block;color:var(--navy);font-size:1.02rem;margin-bottom:4px}
.steps p{font-size:.9rem;margin:0}

/* Audit card */
.audit-card{padding:36px}
.audit-card p{font-size:.95rem;margin-bottom:22px}
.audit-card .btn{width:100%;justify-content:center}

/* FAQ: brand blue instead of amber */
.page-modern .acc-q::after{color:var(--primary)}

/* Closing call to action: full-width light band, flush with the bands around it */
.cta-band.cta-modern{text-align:left;
  background:
    radial-gradient(620px 340px at 100% 0%,rgba(242,160,61,.12),transparent 70%),
    radial-gradient(720px 400px at 0% 100%,rgba(107,114,168,.16),transparent 70%),
    var(--primary-05)}
.cta-panel{display:grid;grid-template-columns:1.4fr 1fr;gap:12px 48px;align-items:end}
.cta-panel .eyebrow,.cta-panel h2,.cta-panel p{grid-column:1}
.cta-panel .eyebrow{margin-bottom:0}
.cta-panel h2{color:var(--navy);font-size:clamp(1.7rem,3.1vw,2.45rem);margin:0}
.cta-modern .cta-panel p{color:var(--body);margin:0;max-width:56ch}
.cta-panel .cta-row{grid-column:2;grid-row:1 / span 3;align-self:center;justify-self:end;
  display:grid;grid-template-columns:1fr;gap:14px;padding:16px 0}
.cta-panel .cta-row .btn{width:100%;justify-content:center}

@media(max-width:1000px){
  .steps{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:860px){
  .split{grid-template-columns:1fr}
  .cta-panel{grid-template-columns:1fr}
  .cta-panel .cta-row{grid-column:1;grid-row:auto;justify-self:stretch;margin-top:8px}
}
@media(max-width:560px){
  .steps{grid-template-columns:1fr}
  .stack-card,.audit-card{padding:24px 22px}
}
.faq-split{grid-template-columns:1fr 1.7fr}
.faq-split .section-head{margin:0}
@media(max-width:860px){.faq-split{grid-template-columns:1fr}}
/* Solution detail pages: more air between the hero and the first content block */
/* The hero becomes its own tinted block so the first section starts on a clean white background */
.page-detail .page-hero{padding-top:clamp(56px,6vw,88px);padding-bottom:clamp(56px,6vw,88px);
  background:
    radial-gradient(640px 320px at 100% 0%,rgba(242,160,61,.10),transparent 70%),
    var(--primary-05)}
.page-detail .page-hero h1{margin-bottom:.4em}
.page-detail .page-hero .lead{max-width:62ch}
.page-detail .page-hero + section{padding-top:clamp(64px,6.5vw,96px)}
/* Legacy components inside modern pages */
.band-dark .pillar{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:#C3C6DF;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.band-dark .pillar:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24)}
.band-dark .pillar h3{color:#fff}
.band-dark .pillar p{color:#C3C6DF;margin:0}
.steps-6{grid-template-columns:repeat(6,1fr)}
.steps-4{grid-template-columns:repeat(4,1fr)}
.page-modern .callout{border-left:3px solid var(--primary);background:var(--primary-05);border-radius:0 var(--radius) var(--radius) 0}
@media(max-width:1000px){.steps-6,.steps-4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.steps-6,.steps-4{grid-template-columns:1fr}}
/* Security page components, calmer and in brand blue */
.page-modern .offer{border-top:1px solid var(--line);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.page-modern .offer:hover{transform:none;box-shadow:var(--shadow);border-color:var(--primary-25)}
.page-modern .offer .kind,.page-modern .offer.assess .kind{background:var(--primary-05);color:var(--primary)}
.page-modern .offer .dur{color:var(--primary)}
.page-modern .method-step .num,.page-modern .method-step:last-child .num{background:var(--primary-05);color:var(--navy);
  border:1px solid var(--primary-25);font-weight:700}
.band-dark .band-tiles{margin:28px 0}
.band-dark .band-note{color:#C3C6DF;max-width:72ch;margin-bottom:1.6em}
.band-dark .lead b,.band-dark .band-note b{color:#fff}
.band-dark h2 + .lead{margin-top:16px}
.band-dark .section-head .lead{margin:16px 0 0}
.band-dark .section-head p + p{margin-top:12px;margin-bottom:0}
.stack-card h3 + .stack-group{padding-top:12px}

/* ============================================================
   MODERN PAGES: responsive, compact. Cards go two by two,
   buttons keep their natural width, less vertical padding.
   ============================================================ */
@media(max-width:1000px){
  .page-modern .g2,.page-modern .g3{grid-template-columns:repeat(2,1fr)}
  /* An odd last card takes the full row instead of leaving a hole */
  .page-modern .grid > :last-child:nth-child(odd){grid-column:1 / -1}
}
@media(max-width:760px){
  .page-modern section,.page-modern .cta-band{padding-top:48px;padding-bottom:48px}
  .page-modern .page-hero + section{padding-top:32px}
  .page-detail .page-hero{padding-top:40px;padding-bottom:40px}
  .page-detail .page-hero + section{padding-top:44px}
  .page-modern section.bg-grey + section.bg-grey{padding-top:0}
  .page-modern .section-head{margin-bottom:24px}
  .band-dark .section-head{margin-bottom:24px}
  .page-modern .split{gap:28px}

  /* Cards */
  .page-modern .grid{gap:12px}
  .page-modern .card,.page-modern .offer,.band-dark .pillar{padding:18px 16px}
  .page-modern .card h3,.page-modern .offer h3,.band-dark .pillar h3{font-size:.98rem;margin-bottom:.35em}
  .page-modern .card p,.page-modern .offer p,.band-dark .pillar p{font-size:.86rem;line-height:1.5;margin-bottom:.6em}
  .page-modern .card .icon{width:38px;height:38px;margin-bottom:12px}
  .page-modern .card .icon svg{width:20px;height:20px}
  .page-modern .card .link-arrow{font-size:.88rem}
  .deploy-key{margin-top:12px;padding-top:10px;font-size:.8rem}
  .page-modern .method-step{padding:16px;gap:10px}
  .page-modern .method-step .num{flex-basis:38px;width:38px;height:38px}

  /* Steps two by two */
  .steps,.steps-4,.steps-6{grid-template-columns:repeat(2,1fr);gap:18px 14px}
  .steps > li:last-child:nth-child(odd){grid-column:1 / -1}
  .steps li{padding-top:12px}

  /* Tech card and audit card */
  .stack-card,.audit-card{padding:20px 18px}
  .stack-tags span{font-size:.8rem;padding:5px 10px}
  .audit-card .btn{width:auto}

  /* FAQ two by two */
  .faq-split > div:last-child{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;align-items:start}
  .faq-split .acc{margin:0}
  .page-modern .acc-q{padding:14px;font-size:.86rem;gap:10px}
  .page-modern .acc-a p{padding:0 14px 14px;font-size:.84rem}

  /* Buttons keep a natural size; CTA pair side by side, same width */
  .page-modern .btn{padding:11px 18px;font-size:.9rem}
  .page-modern .cta-row .btn{width:auto}
  .cta-panel .cta-row{display:inline-grid;grid-template-columns:1fr 1fr;justify-self:start;gap:10px;padding:0}
  .cta-panel .cta-row .btn{white-space:normal;text-align:center;line-height:1.3}
}
@media(max-width:420px){
  .page-modern .card,.page-modern .offer,.band-dark .pillar{padding:16px 13px}
  .page-modern .card p,.page-modern .offer p{font-size:.84rem}
  .page-modern .acc-q{padding:12px;font-size:.83rem}
}
@media(max-width:760px){
  .faq-split{gap:18px}
  .faq-split > div:last-child > .acc:last-child:nth-child(odd){grid-column:1 / -1}
}
@media(max-width:860px){
  .faq-split{gap:18px}
  .faq-split .section-head h2{margin-bottom:0}
  .faq-split > div:last-child{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;align-items:start}
  .faq-split .acc{margin:0}
  .faq-split > div:last-child > .acc:last-child:nth-child(odd){grid-column:1 / -1}
}
@media(max-width:860px){
  .page-modern .faq-split{gap:16px}
  .page-modern .faq-split .section-head{margin:0}
}

/* ---------- Sectors we serve: two-row rolling marquee ---------- */
.sector-marquee{display:grid;gap:14px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mq-row{overflow:hidden}
.mq-track{display:flex;width:max-content;animation:mqRoll 48s linear infinite}
.mq-rev .mq-track{animation-direction:reverse;animation-duration:56s}
.mq-group{display:flex;flex:none;gap:12px;padding-right:12px}
.mq-group span{flex:none;white-space:nowrap;padding:11px 22px;border:1px solid var(--line);border-radius:30px;
  background:#fff;color:var(--navy);font-size:.92rem;font-weight:500}
.sector-marquee:hover .mq-track{animation-play-state:paused}
@keyframes mqRoll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .mq-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .mq-group[aria-hidden]{display:none}
  .mq-rev{display:none}
}

/* ===== Modern layout for the remaining pages and case studies (from the Case Studies UI update) ===== */
/* Two consecutive white sections read as one: no double padding */
.page-modern main > section:not([class]) + section:not([class]){padding-top:0}
/* Contact form: short fields two per row */
.page-modern form[data-booking]{display:grid;grid-template-columns:1fr 1fr;column-gap:14px}
.page-modern form[data-booking] > :nth-child(n+5){grid-column:1 / -1}
@media(max-width:760px){
  /* Service tiers hold long lists: keep them one per row */
  .page-modern .grid:has(> .tier){grid-template-columns:1fr}
  .page-modern .tier{padding:20px 18px}
  /* SLA priorities two by two, compact */
  .page-modern .sla-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .page-modern .sla-card{padding:16px 14px}
  .page-modern .sla-card>p{font-size:.84rem;margin-bottom:10px}
  .page-modern .sla-card dl{padding-top:10px}
  .page-modern .sla-card dd{font-size:.82rem;margin-bottom:8px}
  .page-modern .field{margin-bottom:12px}
  .page-modern .field label{font-size:.8rem}
  .page-modern .field input,.page-modern .field select{padding:10px 12px}
}

/* ---- Site-wide modern pages: remaining blocks, mobile two by two ---- */
@media(max-width:760px){
  /* Contact details: two by two */
  .page-modern .info-block{margin-bottom:0;padding:16px 14px}
  .page-modern .info-block h4{font-size:.92rem}
  .page-modern .info-block p,.page-modern .info-block address{font-size:.84rem}
  .page-modern :has(> .info-block){display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .page-modern :has(> .info-block) > .info-block:last-child:nth-child(odd){grid-column:1 / -1}
  /* Stacked pillars (About, Engineering) two by two */
  .page-modern .grid[style*="gap:14px"]{grid-template-columns:1fr 1fr;gap:12px !important}
  .page-modern .grid[style*="gap:14px"] > :last-child:nth-child(odd){grid-column:1 / -1}
  .page-modern .pillar{padding:16px 14px}
  .page-modern .pillar h3{font-size:.96rem}
  .page-modern .pillar p{font-size:.84rem}
  /* Engineering model cards and stats */
  .page-modern .model-card{padding:18px 16px}
  .page-modern .model-card h3{font-size:1rem}
  .page-modern .model-card>p{font-size:.85rem;margin-bottom:12px}
  .page-modern .stats{grid-template-columns:1fr 1fr;gap:12px}
  .page-modern .stat{padding:16px 10px}
  .page-modern .stat .n{font-size:1.6rem}
  /* Case studies: compact detail blocks, facts two by two */
  .page-modern .case-detail-body{padding:20px 16px}
  .page-modern .case-facts{grid-template-columns:1fr 1fr;gap:10px}
  /* Plain lists of short items two by two */
  .page-modern .split-center ul.plain{display:grid;grid-template-columns:1fr 1fr;column-gap:14px}
  .page-modern ul.plain li{font-size:.86rem;padding:8px 0}
}
@media(max-width:760px){
  .page-modern .info-block:nth-child(n+3){grid-column:1 / -1}
}
@media(max-width:760px){
  .page-modern .model-best{padding:12px;font-size:.82rem;line-height:1.45}
}
/* Two-column short lists on mobile (e.g. profiles we deploy) */
@media(max-width:760px){
  .page-modern ul.list-2col{display:grid;grid-template-columns:1fr 1fr;column-gap:14px}
  .page-modern ul.list-2col li{font-size:.84rem;padding:8px 0;line-height:1.35}
  .page-modern ul.list-2col li:nth-last-child(2):nth-child(odd){border-bottom:0}
}

/* ---- Case studies: compact cards, details on demand ---- */
.page-modern .case-detail{box-shadow:none;margin-bottom:18px}
.page-modern .case-detail-body{padding:28px 32px}
.case-head .case-meta{margin-bottom:6px}
.case-head h2{font-size:1.3rem;margin:0 0 16px}
.page-modern .case-facts{grid-template-columns:repeat(4,1fr);gap:10px 18px;padding:14px 16px;margin-bottom:16px}
.page-modern .case-facts div b{font-size:.86rem;line-height:1.4}
.page-modern .block-label{margin-bottom:6px}
.case-result{padding:0}
.case-result p{margin:0;font-size:.95rem;color:var(--ink)}
.case-more{margin-top:16px;border-top:1px solid var(--line)}
.case-more summary{list-style:none;cursor:pointer;padding:14px 0 0;font-weight:600;font-size:.92rem;
  color:var(--primary);display:inline-flex;align-items:center;gap:8px}
.case-more summary::-webkit-details-marker{display:none}
.case-more summary::after{content:"+";font-size:1.2rem;line-height:1;font-weight:400}
.case-more[open] summary::after{content:"\2212"}
.case-more summary:hover{color:var(--navy)}
.case-more-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 36px;margin-top:18px}
.case-more-grid p{font-size:.92rem}
.case-more-grid ul.plain li{font-size:.9rem;padding:7px 0}
.case-tech{margin-top:6px}
.case-tech .chips{margin-top:4px}
@media(max-width:860px){
  .page-modern .case-facts{grid-template-columns:1fr 1fr}
  .case-more-grid{grid-template-columns:1fr;gap:0}
}
@media(max-width:760px){
  .page-modern .case-detail-body{padding:18px 16px}
  .case-head h2{font-size:1.1rem;margin-bottom:12px}
  .page-modern .case-facts{padding:10px 12px;gap:8px 12px}
  .page-modern .case-facts div b{font-size:.8rem}
  .case-result p{font-size:.86rem}
  .case-more-grid p,.case-more-grid ul.plain li{font-size:.85rem}
}
/* Case studies two by two; an opened case takes the full row and the next card moves down */
.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.page-modern .case-grid .case-detail{margin-bottom:0}
.case-grid .case-detail:has(details[open]){grid-column:1 / -1}
.case-grid .case-facts{grid-template-columns:1fr 1fr}
.case-grid .case-detail:has(details[open]) .case-facts{grid-template-columns:repeat(4,1fr)}
@media(max-width:760px){
  .case-grid{grid-template-columns:1fr;gap:14px}
  .case-grid .case-detail:has(details[open]) .case-facts{grid-template-columns:1fr 1fr}
}

/* Contact form: spam trap, consent line, status and error messages */
.field.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:10px;align-items:flex-start;margin:4px 0 18px;font-size:.88rem;line-height:1.5;color:var(--body);cursor:pointer}
.consent input{margin-top:3px;flex:none;width:17px;height:17px;accent-color:var(--primary)}
.form-status,.form-error{display:none;padding:14px 16px;border-radius:8px;font-size:.92rem;margin-top:14px}
.form-status.show{display:block;background:var(--primary-05);border:1px solid var(--primary-25);color:var(--navy)}
.form-error.show{display:block;background:#FBEDEC;border:1px solid #F0C4C0;color:#8E2B24}
.form-error a{color:inherit;text-decoration:underline}

/* Footer on tablet and phone: brand on top, link columns in pairs, then Contact (email and phone
   side by side) and the two office addresses side by side. */
@media(max-width:1000px){
  footer.site > .wrap{display:grid;grid-template-columns:1fr 1fr;gap:32px 24px}
  footer.site .foot-top,footer.site .foot-grid{display:contents}
  footer.site .foot-brand{grid-column:1 / -1;max-width:none;order:1}
  footer.site .foot-grid > nav:nth-of-type(1){order:2}
  footer.site .foot-grid > nav:nth-of-type(2){order:3}
  /* Contact: heading and note on their own lines, email and phone next to each other */
  footer.site .foot-grid > div:last-child{order:4;grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 28px}
  footer.site .foot-grid > div:last-child h4{flex:0 0 100%;margin-bottom:8px}
  footer.site .foot-grid > div:last-child p{flex:0 0 100%;margin:6px 0 0 !important}
  /* Addresses: the two cards next to each other */
  footer.site .foot-addr{order:5;grid-column:1 / -1;flex-direction:row;flex-wrap:nowrap;gap:14px;width:auto}
  footer.site .foot-addr address{flex:1 1 0;min-width:0;padding:14px 16px}
  footer.site .foot-bottom{order:6;grid-column:1 / -1;margin-top:0}
}
@media(max-width:480px){
  footer.site > .wrap{gap:28px 16px}
  footer.site .fi-wrap{width:32px;height:32px}
  footer.site a.ico-link{gap:9px;font-size:.86rem}
  footer.site .foot-addr{gap:10px}
  footer.site .foot-addr address{font-size:.82rem;padding:12px 13px}
}

/* ---------- Partner logos: two-row rolling marquee (case studies hero) ---------- */
.partner-strip{margin:34px 0 clamp(36px,4vw,56px)}
.partner-label{margin:0 0 18px;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--primary-75)}
.pm-marquee{display:grid;gap:22px;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)}
.pm-row{overflow:hidden}
.pm-track{display:flex;width:max-content;animation:pmRoll 55s linear infinite}
.pm-rev .pm-track{animation-direction:reverse;animation-duration:64s}
.pm-group{display:flex;flex:none;align-items:center;padding-right:36px;gap:36px}
.pm-item{display:flex;align-items:center;justify-content:center;flex:none;width:168px;height:78px}
.pm-item img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.pm-marquee:hover .pm-track{animation-play-state:paused}
@keyframes pmRoll{to{transform:translateX(-50%)}}
@media(max-width:620px){.pm-item{width:124px;height:58px}.pm-group{gap:24px;padding-right:24px}.pm-marquee{gap:12px}}
@media(prefers-reduced-motion:reduce){
  .pm-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .pm-group[aria-hidden]{display:none}
  .pm-rev{display:none}
}
.form-status.show.ok{background:#EAF7EE;border-color:#BCE3C8;color:#1E6B39}
.form-status a{color:inherit;font-weight:600;text-decoration:underline}

/* ---------- 404 page ---------- */
.nf-page{display:flex;flex-direction:column;min-height:100vh}
.nf-page main{flex:1;display:flex}
.nf-hero{flex:1;display:flex;align-items:center;border-bottom:0}
.nf-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:center;width:100%}
.nf-copy h1{font-size:clamp(2.1rem,4.6vw,3.4rem);margin-bottom:.35em}
.nf-links{list-style:none;margin:6px 0 0;padding:22px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 26px}
.nf-links a{display:inline-block;padding:4px 0;font-weight:600;font-size:.95rem;color:var(--primary)}
.nf-links a:hover{color:var(--navy)}
.nf-art{max-width:420px;justify-self:center;width:100%}
.nf-art svg{width:100%;height:auto;display:block;overflow:visible}
.nf-float{animation:nfFloat 6s ease-in-out infinite}
@keyframes nfFloat{50%{transform:translate(6px,-12px)}}
.nf-home{padding:9px 18px;font-size:.9rem}
footer.site.nf-foot{padding:0}
footer.site.nf-foot > .wrap{padding-top:18px;padding-bottom:18px}
.nf-foot .foot-bottom{border:0;padding:0}
@media(max-width:860px){.nf-grid{grid-template-columns:1fr}.nf-art{max-width:300px;order:-1}}
@media(prefers-reduced-motion:reduce){.nf-float{animation:none}}

/* Contact page (desktop): the form card and the info cards share the same top and bottom edges */
@media(min-width:861px){
  .page-modern .split:has(.form-card){align-items:stretch}
  .page-modern .split:has(.form-card) > .reveal{display:flex;flex-direction:column}
  .page-modern .split:has(.form-card) > .reveal > .form-card{flex:1;display:flex;flex-direction:column}
  .page-modern .form-card form[data-booking]{flex:1;grid-template-rows:auto auto auto 1fr;align-content:start}
  .page-modern .form-card .field:has(textarea){display:flex;flex-direction:column}
  .page-modern .form-card .field textarea{flex:1;min-height:116px}
  .page-modern .split:has(.form-card) > .reveal:last-child{gap:18px}
  .page-modern .split:has(.form-card) .info-block{margin-bottom:0}
  .page-modern .split:has(.form-card) .info-block:last-child{flex:1}
}
@media(min-width:861px){
  /* the two office addresses sit next to each other; Contact and RFP cards take the full width below */
  .page-modern .split:has(.form-card) > .reveal:last-child{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;gap:18px;align-content:space-between}
  .page-modern .split:has(.form-card) .info-block:nth-child(n+3){grid-column:1 / -1}
  .page-modern .split:has(.form-card) .info-block:nth-child(-n+2){padding:22px 22px}
  .page-modern .split:has(.form-card) .info-block:nth-child(n+3){display:flex;flex-direction:column;justify-content:center}
}

/* Contact page: FAQ first, then the enquiry and RFP cards on a light band */
.contact-info .info-block{background:#fff;border:1px solid var(--line);margin-bottom:0}
.contact-info .info-block h4{font-size:1.05rem}