/* ==========================================================================
   iSquare TechLabs — Design System
   Brand: Primary Blue #002554 · Accent Orange #FF7A00 · Type: Montserrat
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face{font-family:'Montserrat';src:url('../fonts/Montserrat-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/Montserrat-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/Montserrat-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/Montserrat-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/Montserrat-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --navy-900:#001225;
  --navy-800:#001B3D;
  --navy:#002554;          /* brand primary */
  --navy-600:#073A78;
  --navy-500:#0E52A0;
  --navy-300:#7FA3CC;
  --navy-100:#E8EEF6;

  --orange:#FF7A00;        /* brand accent */
  --orange-600:#E56B00;
  --orange-300:#FFB871;
  --orange-100:#FFF0E0;

  --ink:#0C1A2B;
  --slate:#54657C;
  --slate-400:#8797AB;
  --line:#E3E9F1;
  --surface:#FFFFFF;
  --surface-soft:#F5F7FA;
  --surface-tint:#EFF4FA;

  --ok:#12805C;

  --font:'Montserrat',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --r-sm:8px; --r:14px; --r-lg:22px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(0,37,84,.06),0 2px 8px rgba(0,37,84,.05);
  --shadow:0 4px 12px rgba(0,37,84,.07),0 14px 34px rgba(0,37,84,.08);
  --shadow-lg:0 18px 48px rgba(0,37,84,.16);
  --ring:0 0 0 3px rgba(255,122,0,.35);

  --wrap:1200px;
  --gut:clamp(18px,4vw,40px);
  --sec:clamp(24px,2.6vw,40px);
  --hdr:78px;
  --ease:cubic-bezier(.22,.7,.28,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px)}
body{margin:0;font-family:var(--font);font-weight:400;font-size:17px;line-height:1.65;color:var(--ink);background:var(--surface);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--navy-500);text-decoration:none}
a:hover{color:var(--orange-600)}
button{font:inherit}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
::selection{background:var(--orange);color:#fff}

/* ---------- Type ---------- */
h1,h2,h3,h4,h5{font-weight:700;color:var(--navy);line-height:1.14;letter-spacing:-.02em;margin:0 0 .42em}
h1{font-size:clamp(2.2rem,5.2vw,3.85rem)}
h2{font-size:clamp(1.75rem,3.6vw,2.7rem)}
h3{font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.25}
h4{font-size:1.06rem;letter-spacing:-.01em}
p{margin:0 0 1em}
.lead{font-size:clamp(1.05rem,1.6vw,1.24rem);color:var(--slate);font-weight:400;line-height:1.62}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.735rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--orange);margin-bottom:13px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--orange);border-radius:2px}
.eyebrow.centered{justify-content:center}
.text-accent{color:var(--orange)}
.muted{color:var(--slate)}
.mb-0{margin-bottom:0}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap-wide{max-width:1360px}
.section{padding-block:var(--sec)}
.section-sm{padding-block:clamp(18px,2vw,28px)}
.soft{background:var(--surface-soft)}
.tint{background:linear-gradient(180deg,var(--surface) 0%,var(--surface-tint) 100%)}
.head{max-width:760px;margin-bottom:clamp(13px,1.5vw,20px)}
.head.center{margin-inline:auto;text-align:center}
.grid{display:grid;gap:18px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,2.6vw,40px);align-items:center}

/* ---------- Dark surface ---------- */
.dark{background:var(--navy);color:#D8E3F0;position:relative;isolation:isolate}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.dark .lead,.dark .muted{color:#A9BDD6}
.dark a{color:#fff}
.mesh::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(760px 420px at 12% 0%,rgba(255,122,0,.20),transparent 62%),
    radial-gradient(680px 460px at 88% 18%,rgba(14,82,160,.55),transparent 65%),
    radial-gradient(520px 520px at 60% 110%,rgba(255,122,0,.10),transparent 60%)}
.mesh::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:62px 62px;
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000,transparent 78%);mask-image:radial-gradient(circle at 50% 30%,#000,transparent 78%)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;border-radius:var(--r-pill);
  font-weight:600;font-size:.95rem;letter-spacing:.01em;border:1.5px solid transparent;cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s,color .2s,border-color .2s;white-space:nowrap}
.btn svg{width:17px;height:17px;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 8px 20px rgba(255,122,0,.3)}
.btn-primary:hover{background:var(--orange-600);color:#fff;box-shadow:0 12px 28px rgba(255,122,0,.4)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-600);color:#fff;box-shadow:0 12px 28px rgba(0,37,84,.28)}
.btn-ghost{border-color:var(--line);color:var(--navy);background:#fff}
.btn-ghost:hover{border-color:var(--navy);color:var(--navy);box-shadow:var(--shadow-sm)}
.btn-outline{border-color:rgba(255,255,255,.4);color:#fff;background:transparent}
.btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.1);color:#fff}
.btn-sm{padding:10px 20px;font-size:.87rem}
.btn-lg{padding:17px 34px;font-size:1rem}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.93rem;color:var(--navy-500)}
.link-arrow svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- Header ---------- */
.topbar{background:var(--navy-900);color:#9FB4CE;font-size:.79rem;letter-spacing:.02em}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;min-height:40px;padding-block:8px}
.topbar a{color:#C3D3E6}
.topbar a:hover{color:var(--orange-300)}
.topbar-links{display:flex;gap:22px;align-items:center}
.topbar-badge{display:inline-flex;align-items:center;gap:8px}
.topbar-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(255,122,0,.2)}

.site-header{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .25s}
.site-header.scrolled{box-shadow:0 6px 24px rgba(0,37,84,.09)}
.nav{display:flex;align-items:center;gap:26px;min-height:var(--hdr)}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:40px;width:auto}
.nav-menu{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-item{position:relative}
.nav-link{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:var(--r-sm);
  font-size:.925rem;font-weight:600;color:var(--navy);letter-spacing:-.005em;background:none;border:0;cursor:pointer;transition:color .2s,background .2s}
.nav-link:hover,.nav-item.open>.nav-link{color:var(--orange-600);background:var(--orange-100)}
/* current page: orange text + underline marker, never the pill — otherwise it reads as a stuck hover */
.nav-link.active{color:var(--orange-600);background:none;position:relative}
.nav-link.active::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;background:var(--orange)}
.nav-link.active:hover,.nav-item.open>.nav-link.active{background:var(--orange-100)}
.nav-link .chev{width:11px;height:11px;transition:transform .25s var(--ease);opacity:.75}
.nav-item.open .chev{transform:rotate(180deg)}
.nav-cta{display:flex;align-items:center;gap:12px;flex:none;margin-left:8px}

.mega{position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,10px);width:max-content;max-width:min(94vw,860px);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:22px;
  opacity:0;visibility:hidden;transition:.25s var(--ease);z-index:950}
.mega.right{left:auto;right:0;transform:translate(0,10px)}
.nav-item.open .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav-item.open .mega.right{transform:translate(0,0)}
.mega-grid{display:grid;gap:6px}
.mega-grid.cols-2{grid-template-columns:repeat(2,minmax(250px,1fr));gap:6px 18px}
.mega-col-title{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-400);padding:6px 12px 10px}
.mega-link{display:flex;gap:13px;padding:11px 12px;border-radius:var(--r);transition:background .18s}
.mega-link:hover{background:var(--surface-soft)}
.mega-ico{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--navy-100);color:var(--navy);transition:.2s}
.mega-link:hover .mega-ico{background:var(--navy);color:#fff}
.mega-ico svg{width:19px;height:19px}
.mega-t{display:block;font-weight:600;font-size:.94rem;color:var(--navy);line-height:1.35}
.mega-d{display:block;font-size:.8rem;color:var(--slate);line-height:1.45;margin-top:2px}
.mega-foot{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mega-foot p{margin:0;font-size:.85rem;color:var(--slate)}

.burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;place-items:center}
.burger span{display:block;width:19px;height:2px;background:var(--navy);border-radius:2px;position:relative;transition:.25s var(--ease)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:2px;background:var(--navy);border-radius:2px;transition:.25s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;padding-block:clamp(32px,3.8vw,56px) clamp(34px,4vw,60px);overflow:hidden}
/* the hero gets a wider canvas than the rest of the page so the figure
   has room to read at a decent size */
.hero .wrap{max-width:1320px}
.hero-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);gap:clamp(22px,2.6vw,36px);align-items:start}
/* the figure is the hero's main visual — let it fill its column rather than
   stopping at the SVG's natural 660px */
.hero-fig img{width:100%;max-width:none}
.hero-fig{margin-top:clamp(8px,1.4vw,26px)}
.hero h1{color:#fff;margin-bottom:22px}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero-h1{display:flex;align-items:center;gap:.22em;flex-wrap:wrap;margin-bottom:22px;
  font-size:clamp(1.7rem,2.75vw,2.45rem)}
.hero-h1 .ctrl{color:#fff}
.hero-h1 .dirs{display:flex;flex-direction:column;justify-content:center}
.hero-h1 .dir{color:var(--orange);line-height:1.04;white-space:nowrap}
@media (max-width:520px){
  .hero-h1{gap:.06em}
  .hero-h1 .dir{white-space:normal}
}
.hero-pill{display:inline-flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font-size:.8rem;font-weight:500;color:#D6E4F4;margin-bottom:26px}
.hero-pill b{background:var(--orange);color:#fff;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill)}
.hero-p{font-size:clamp(1.02rem,1.5vw,1.16rem);color:#B6C9E0;max-width:590px;margin-bottom:32px}
.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,auto));gap:clamp(20px,3.2vw,40px);margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);justify-content:start}
.hero-stats .n{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:700;color:#fff;line-height:1}
.hero-stats .n span{color:var(--orange)}
.hero-stats .l{font-size:.78rem;color:#9FB6D2;margin-top:8px;letter-spacing:.03em}

.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:38px}
.pillar{padding:20px;border-radius:var(--r);background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);transition:.3s var(--ease)}
.pillar:hover{background:rgba(255,255,255,.1);transform:translateY(-4px)}
.pillar .k{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:8px}
.pillar p{font-size:.86rem;color:#B6C9E0;margin:0;line-height:1.5}

/* ---------- Cards ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;position:relative;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:#CBD8E8}
.card h3{margin-bottom:10px}
.card p{font-size:.94rem;color:var(--slate);margin-bottom:0}
.card .ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:20px;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-600) 100%);color:#fff;box-shadow:0 8px 18px rgba(0,37,84,.22)}
.card .ico svg{width:24px;height:24px}
.card.accent .ico{background:linear-gradient(135deg,var(--orange) 0%,var(--orange-600) 100%);box-shadow:0 8px 18px rgba(255,122,0,.3)}
.card-link{margin-top:18px}
.card-num{position:absolute;top:22px;right:26px;font-size:2.1rem;font-weight:700;color:var(--orange);
  line-height:1;letter-spacing:-.03em;opacity:.55;pointer-events:none}
.card-num + h3{padding-right:52px}
.card-dark .card-num{color:var(--orange);opacity:.6}
.card-dark{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13)}
.card-dark p{color:#A9BDD6}
.card-dark:hover{border-color:rgba(255,122,0,.5);background:rgba(255,255,255,.08)}

.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.tag{font-size:.75rem;font-weight:600;color:var(--navy-600);background:var(--navy-100);border-radius:var(--r-pill);padding:5px 12px}
.dark .tag{background:rgba(255,255,255,.1);color:#CFE0F2}

.ticks{display:grid;gap:9px;margin:16px 0 0}
.ticks li{position:relative;padding-left:30px;font-size:.93rem;color:var(--slate);line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:4px;width:19px;height:19px;border-radius:50%;background:var(--orange-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF7A00' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat}
.dark .ticks li{color:#B6C9E0}
.dark .ticks li::before{background-color:rgba(255,122,0,.2)}

/* ---------- Feature media rows ---------- */
.media-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,2.8vw,44px);align-items:center}
.media-row+.media-row{margin-top:clamp(26px,3vw,42px)}
.media-row.flip .media-fig{order:-1}
.media-fig{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--surface-soft);border:1px solid var(--line);box-shadow:var(--shadow)}
.media-fig img{width:100%}

/* ---------- Stats band ---------- */
.stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.stat-band .s{background:#fff;padding:32px 26px;text-align:center}
.stat-band .n{font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:700;color:var(--navy);line-height:1;letter-spacing:-.03em}
.stat-band .n span{color:var(--orange)}
.stat-band .l{font-size:.83rem;color:var(--slate);margin-top:10px}

/* ---------- Tabs ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.tab{padding:11px 22px;border-radius:var(--r-pill);border:1px solid var(--line);background:#fff;color:var(--navy);
  font-size:.9rem;font-weight:600;cursor:pointer;transition:.22s var(--ease)}
.tab:hover{border-color:var(--navy-300)}
.tab.active{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 8px 18px rgba(0,37,84,.2)}
.tab-panel{display:none;animation:fade .45s var(--ease)}
.tab-panel.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Accordion ---------- */
.acc{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
.acc+.acc{margin-top:12px}
.acc-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;
  background:none;border:0;text-align:left;cursor:pointer;font-weight:600;font-size:1rem;color:var(--navy)}
.acc-btn .pm{flex:none;width:26px;height:26px;border-radius:50%;background:var(--navy-100);display:grid;place-items:center;color:var(--navy);transition:.25s var(--ease)}
.acc-btn .pm svg{width:13px;height:13px}
.acc.open .acc-btn .pm{background:var(--orange);color:#fff;transform:rotate(45deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.acc-body div{padding:0 24px 22px;color:var(--slate);font-size:.94rem}

/* ---------- Chips ---------- */
.strip{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:#fff;font-size:.85rem;font-weight:600;color:var(--navy);box-shadow:var(--shadow-sm)}
.chip svg{width:16px;height:16px;color:var(--orange)}
.dark .chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}

/* ---------- CTA ---------- */
.cta{position:relative;border-radius:28px;overflow:hidden;background:var(--navy);padding:clamp(26px,3.2vw,42px);isolation:isolate}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(620px 320px at 88% 10%,rgba(255,122,0,.34),transparent 60%),radial-gradient(520px 340px at 6% 90%,rgba(14,82,160,.6),transparent 62%)}
.cta h2{color:#fff;max-width:660px}
.cta p{color:#B6C9E0;max-width:600px}

/* ---------- Forms ---------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,2.4vw,28px);box-shadow:var(--shadow)}
.field{margin-bottom:18px}
.field label{display:block;font-size:.83rem;font-weight:600;color:var(--navy);margin-bottom:7px}
.field label .req{color:var(--orange)}
.field input,.field select,.field textarea{width:100%;padding:13px 16px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  font-family:inherit;font-size:.94rem;color:var(--ink);background:#fff;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy-500);box-shadow:0 0 0 3px rgba(14,82,160,.14)}
.field textarea{resize:vertical;min-height:120px}
.field .hint{font-size:.76rem;color:var(--slate-400);margin-top:6px}
.field.error input,.field.error select,.field.error textarea{border-color:#D6453A}
.field .err{display:none;font-size:.76rem;color:#D6453A;margin-top:6px}
.field.error .err{display:block}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.check{display:flex;gap:11px;align-items:flex-start;font-size:.82rem;color:var(--slate);line-height:1.5}
.check input{width:17px;height:17px;flex:none;margin-top:2px;accent-color:var(--orange)}
.form-note{display:none;margin-top:18px;padding:15px 18px;border-radius:var(--r-sm);background:#E7F5EF;color:var(--ok);font-size:.89rem;font-weight:500}
.form-note.show{display:block}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{position:relative;padding-block:clamp(28px,3.2vw,46px);overflow:hidden}
.page-hero h1{color:#fff;max-width:900px}
.page-hero .lead{max-width:720px;color:#B6C9E0}
/* contact: let both columns share the row height and pin the last card to
   the bottom, so the left stack and the form finish level at any width */
.contact-split{align-items:stretch}
.contact-split > div:first-child{display:flex;flex-direction:column}
.contact-split > div:first-child > .card:nth-last-child(2){margin-bottom:20px}
.contact-split > div:first-child > .card:last-child{margin-top:auto}

/* two-column page hero (contact) — text beside a supporting figure */
.ph-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,3vw,44px);align-items:center}
.ph-fig img{width:100%;max-width:none}
/* a page hero carrying a wide process diagram: stack it under the text so
   the diagram gets the full measure and stays readable */
.ph-stack{grid-template-columns:minmax(0,1fr)}
.ph-stack .ph-fig{margin-top:clamp(20px,2.4vw,34px)}
.ph-stack .ph-fig img{max-width:1120px;margin-inline:auto}
/* a hero carrying a process diagram in the narrow column: it shrinks to fit
   and opens full size on click, so the shape reads here and the labels read
   there. The white plate is part of the diagram, so the button carries no
   background of its own. */
.ph-grid.ph-flow{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
/* A hero carrying a full process diagram is taller than a hero carrying an
   icon, and on a 1280x720 laptop the diagram was clearing the fold by only
   22px — one bookmarks bar away from being cut off. These pull the whole
   block up by about 50px: less padding above, a tighter breadcrumb, and the
   figure sitting at the top of its row instead of centred against a text
   column that happens to be taller than it. */
.page-hero.hero-tight{padding-block:clamp(12px,1.4vw,20px) clamp(24px,2.8vw,38px)}
.page-hero.hero-tight .crumbs{margin-bottom:6px}
.ph-grid.ph-flow{align-items:start}
.ph-grid.ph-flow .ph-fig{margin-top:0}
.zoom-btn{display:block;width:100%;padding:0;border:0;background:transparent;border-radius:16px;
  position:relative;overflow:hidden;cursor:zoom-in;-webkit-tap-highlight-color:transparent;
  box-shadow:0 18px 44px rgba(0,8,24,.3);transition:transform .26s ease,box-shadow .26s ease}
.zoom-btn img{display:block;width:100%;height:auto;border-radius:16px}
/* the hero diagram animates; anyone who has asked their system for less
   motion gets the identical still instead, and the zoom follows suit */
/*   these must out-specify `.zoom-btn img{display:block}` above, or the
     still sits under the animation instead of replacing it */
.zoom-btn .flow-still{display:none}
@media (prefers-reduced-motion:reduce){
  .zoom-btn .flow-anim{display:none}
  .zoom-btn .flow-still{display:block}
}
.zoom-btn:hover,.zoom-btn:focus-visible{transform:translateY(-4px) scale(1.014);
  box-shadow:0 26px 60px rgba(0,8,24,.42)}
.zoom-btn:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.zoom-cue{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px;border-radius:999px;background:rgba(0,37,84,.93);color:#fff;font-size:.74rem;
  font-weight:600;letter-spacing:.02em;opacity:0;transform:translateY(8px);
  transition:opacity .22s ease,transform .22s ease;pointer-events:none}
.zoom-cue svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.zoom-btn:hover .zoom-cue,.zoom-btn:focus-visible .zoom-cue{opacity:1;transform:none}
@media (hover:none){.zoom-cue{opacity:1;transform:none}}
.ph-cap{margin:12px 0 0;font-size:.82rem;color:rgba(255,255,255,.66);text-align:center}

/* the overlay itself */
html.lbox-open{overflow:hidden}
.lbox{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,3vw,40px);background:rgba(0,12,28,.84);opacity:0;visibility:hidden;
  transition:opacity .2s ease,visibility .2s ease}
.lbox.on{opacity:1;visibility:visible}
.lbox-inner{position:relative;background:#fff;border-radius:18px;padding:clamp(12px,1.6vw,22px);
  /* 1.543 is the diagram's 1080:700 aspect — sizing the panel by height as well
     as width keeps the whole flow on screen instead of scrolling it away */
  width:min(1400px,96vw,calc(80vh * 1.543));max-height:92vh;display:flex;flex-direction:column;
  box-shadow:0 40px 90px rgba(0,0,0,.5);transform:scale(.97);transition:transform .2s ease}
.lbox.on .lbox-inner{transform:none}
/* the whole diagram, always — the panel is sized by its aspect above, so
   nothing is ever cut off and no scrollbar appears at any viewport size */
.lbox-scroll{overflow:hidden}
.lbox-scroll img{display:block;width:100%;height:auto}
.lbox-cap{margin:12px 0 0;font-size:.84rem;color:var(--slate);text-align:center}
.lbox-close{position:absolute;top:-14px;right:-14px;width:40px;height:40px;border:0;border-radius:50%;
  background:var(--navy);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.35)}
.lbox-close:hover{background:var(--orange)}
@media (max-width:900px){.ph-grid.ph-flow{grid-template-columns:minmax(0,1fr)}
  .lbox-close{top:6px;right:6px;width:34px;height:34px;font-size:1.25rem}}

/* the "reach us directly" details, laid out across the full width */
.reach-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px clamp(22px,3vw,44px);margin-top:18px}
.reach-grid .k{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);margin-bottom:6px}
.reach-grid .v{font-size:.9rem;line-height:1.6;color:var(--slate)}
.reach-grid .v a{color:var(--navy-500)}

.crumbs{display:flex;gap:10px;align-items:center;font-size:.8rem;color:#9FB6D2;margin-bottom:20px;flex-wrap:wrap}
.crumbs a{color:#C3D3E6}
.crumbs a:hover{color:var(--orange-300)}
.crumbs span{opacity:.5}

/* ---------- Process steps ---------- */
.steps{display:grid;gap:0}
.step{display:grid;grid-template-columns:54px 1fr;gap:18px;padding-bottom:20px;position:relative}
.step:last-child{padding-bottom:0}
.step::before{content:"";position:absolute;left:26px;top:50px;bottom:-4px;width:2px;background:linear-gradient(180deg,var(--line),transparent)}
.step:last-child::before{display:none}
.step .b{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--navy-100);
  font-weight:700;font-size:1.05rem;color:var(--navy);z-index:1}
.step:hover .b{border-color:var(--orange);color:var(--orange)}
.step h3{margin-bottom:8px}
.step p{color:var(--slate);font-size:.95rem;margin:0}

/* ---------- Listing rows ---------- */
.row-card{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 28px;transition:.28s var(--ease)}
.row-card:hover{border-color:var(--navy-300);box-shadow:var(--shadow-sm);transform:translateX(4px)}
.row-card h3{font-size:1.1rem;margin-bottom:6px}
.row-meta{display:flex;gap:18px;flex-wrap:wrap;font-size:.83rem;color:var(--slate)}
.row-meta span{display:inline-flex;align-items:center;gap:6px}
.row-meta svg{width:14px;height:14px;color:var(--orange)}

/* ---------- Quote ---------- */
.quote{background:#fff;border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:var(--r);padding:30px 32px}
.quote p{font-size:1.06rem;color:var(--navy);font-weight:500;line-height:1.6}
.quote .who{display:flex;align-items:center;gap:14px;margin-top:20px}
.quote .who img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.quote .who b{display:block;font-size:.9rem;color:var(--navy)}
.quote .who small{color:var(--slate);font-size:.8rem}

/* ---------- Team ---------- */
.person{text-align:center}
.person img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-lg);margin-bottom:16px;background:var(--surface-soft)}
.person h4{margin-bottom:4px}
.person small{color:var(--orange);font-weight:600;font-size:.82rem;letter-spacing:.04em}
.person p{font-size:.86rem;color:var(--slate);margin-top:10px}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-900);color:#9FB4CE;font-size:.9rem}
.footer-top{padding-block:clamp(32px,3.8vw,50px);display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:clamp(28px,4vw,52px)}
.site-footer h5{color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:20px}
.site-footer a{color:#9FB4CE}
.site-footer a:hover{color:var(--orange-300)}
.footer-links li{margin-bottom:11px;font-size:.875rem}
.footer-brand img{height:44px;width:auto;margin-bottom:20px}
.footer-brand p{font-size:.88rem;line-height:1.6;max-width:330px;color:#8FA6C2}
.footer-contact{display:grid;gap:12px;margin-top:22px}
.footer-contact a,.footer-contact span{display:flex;gap:11px;align-items:flex-start;font-size:.86rem;line-height:1.5}
.footer-contact svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--orange)}
.footer-addr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px clamp(28px,4vw,52px);padding-block:22px;border-top:1px solid rgba(255,255,255,.1)}
.footer-addr>div{display:flex;gap:11px;align-items:flex-start;font-size:.84rem;line-height:1.55;color:#8FA6C2}
.footer-addr svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--orange)}
.footer-addr strong{display:block;color:#fff;font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:5px}
.socials{display:flex;gap:10px;margin-top:24px}
.socials a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.07);transition:.25s var(--ease)}
.socials a:hover{background:var(--orange);transform:translateY(-3px)}
.socials svg{width:16px;height:16px}
.footer-bot{border-top:1px solid rgba(255,255,255,.1);padding-block:16px;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;font-size:.8rem}
.footer-bot ul{display:flex;gap:20px;flex-wrap:wrap}

/* ---------- Utilities / motion ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.to-top{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;border:0;
  display:grid;place-items:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px);transition:.3s var(--ease);z-index:800;box-shadow:var(--shadow)}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--orange)}
.to-top svg{width:18px;height:18px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--orange);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;font-weight:600}
.skip:focus{left:0;color:#fff}

/* ---------- Responsive ---------- */
/* Between the mobile breakpoint and ~1200px the full menu plus both CTA
   buttons did not fit, pushing a horizontal scrollbar onto the page.
   Tighten the bar and drop the secondary button in that band. */
@media (max-width:1200px){
  .nav{gap:18px}
  .nav-link{padding:10px 10px}
  .nav-cta{gap:10px;margin-left:4px}
  .nav-cta .btn-ghost{display:none}
}

@media (max-width:1060px){
  .nav{gap:12px}
  .nav-link{padding:10px 7px;font-size:.86rem}
}

@media (max-width:1080px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr 1fr;gap:38px}
}
@media (max-width:960px){
  .nav-menu,.nav-cta .btn-ghost{display:none}
  .burger{display:grid}
  .nav{gap:14px}
  .nav-cta{margin-left:auto}
  .hero-grid,.split,.media-row,.ph-grid{grid-template-columns:1fr}
  .reach-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .media-row.flip .media-fig{order:0}
  .hero-fig{order:-1;max-width:640px;margin-inline:auto}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .stat-band{grid-template-columns:repeat(2,1fr)}
  .topbar-links{display:none}

  /* mobile drawer */
  .nav-menu.mobile{display:block;position:fixed;inset:var(--hdr) 0 0;background:#fff;margin:0;padding:18px var(--gut) 40px;
    overflow-y:auto;border-top:1px solid var(--line);animation:fade .3s var(--ease);z-index:940}
  .nav-menu.mobile .nav-item{width:100%}
  .nav-menu.mobile .nav-link{width:100%;justify-content:space-between;padding:15px 4px;font-size:1rem;border-radius:0;border-bottom:1px solid var(--line);background:none}
  .nav-menu.mobile .nav-item.open>.nav-link{color:var(--orange-600)}
  .nav-menu.mobile .mega{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:0;border-bottom:1px solid var(--line);
    border-radius:0;padding:8px 0 16px;max-width:100%;width:100%;display:none}
  .nav-menu.mobile .nav-item.open .mega{display:block;transform:none}
  .nav-menu.mobile .mega-grid.cols-2{grid-template-columns:1fr}
  .nav-menu.mobile .mega-foot{display:none}
}
@media (max-width:680px){
  body{font-size:16px}
  .g-2,.g-3,.g-4,.form-row{grid-template-columns:1fr}
  .stat-band{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:repeat(3,1fr);gap:16px}
  .pillars{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .footer-addr,.reach-grid{grid-template-columns:1fr}
  .card{padding:24px}
  .step{grid-template-columns:48px 1fr;gap:16px}
  .step .b{width:46px;height:46px;font-size:.92rem}
  .step::before{left:23px;top:50px}
  /* full-width buttons only inside content button rows and forms — never in the header */
  .btn-row{flex-direction:column;align-items:stretch}
  .btn-row .btn{width:100%}
  .btn-row .link-arrow{justify-content:center;margin-top:4px}
}
@media (max-width:520px){
  .topbar .wrap{min-height:0}
  .topbar-badge{font-size:.72rem;line-height:1.4}
  .brand img{height:34px}
  .nav-cta .btn-sm{padding:9px 14px;font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}
@media print{.site-header,.site-footer,.to-top,.topbar{display:none}}

/* ---------- Product cards (two-product portfolio) ---------- */
.prod-card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,30px);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.prod-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:#CBD8E8}
.prod-card h3{font-size:clamp(1.35rem,2.3vw,1.75rem);margin-bottom:12px}
.prod-badge{position:absolute;top:-34px;right:-34px;width:190px;height:190px;opacity:.09;pointer-events:none}
.prod-card.accent{border-color:#FFD9B3;background:linear-gradient(180deg,#FFFCF8 0%,#FFFFFF 62%)}
.prod-tag{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--navy-600);background:var(--navy-100);border-radius:var(--r-pill);padding:6px 14px;margin-bottom:18px}
.prod-tag strong{font-weight:800;color:var(--navy)}
.prod-tag.alt{background:var(--orange-100);color:var(--orange-600)}
.prod-tag.alt strong{color:var(--orange-600)}
.prod-claim{font-size:1rem;font-weight:600;color:var(--navy);line-height:1.5;margin-bottom:6px}

/* ---------- Customer logo strip ---------- */
.logo-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(20px,3.4vw,46px)}
.logo-item{display:grid;place-items:center;width:clamp(116px,13vw,150px);height:64px;padding:4px}
.logo-item img{max-height:44px;max-width:100%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter .3s var(--ease),opacity .3s var(--ease)}
.logo-item:hover img{filter:none;opacity:1}
.logo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px}
.logo-grid .logo-item{width:auto;height:118px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px}
.logo-grid .logo-item img{max-height:62px;max-width:100%;filter:none;opacity:1}

/* ---------- Data table (MFA modes, comparisons) ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-lg);border:1px solid var(--line);background:#fff}
table.tbl{width:100%;border-collapse:collapse;min-width:680px}
table.tbl th,table.tbl td{padding:14px 18px;text-align:left;font-size:.9rem;border-bottom:1px solid var(--line)}
table.tbl thead th{background:var(--navy);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl tbody tr:hover{background:var(--surface-soft)}
table.tbl td:first-child{font-weight:700;color:var(--navy-300);width:52px}
table.tbl .mode{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;border-radius:var(--r-pill);padding:4px 11px}
table.tbl .mode.online{background:var(--orange-100);color:var(--orange-600)}
table.tbl .mode.offline{background:var(--navy-100);color:var(--navy-600)}
table.tbl .yes{color:var(--navy);font-weight:600}
table.tbl .no{color:var(--slate-400)}
.tbl-note{font-size:.84rem;color:var(--slate);margin-top:16px}

/* ---------- Numbered layer list ---------- */
.layers{display:grid;gap:14px}
.layer{display:grid;grid-template-columns:56px 1fr;gap:20px;align-items:start;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:24px 26px;transition:.28s var(--ease)}
.layer:hover{border-color:var(--navy-300);box-shadow:var(--shadow-sm)}
.layer .n{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:1.2rem;font-weight:700;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-600) 100%);color:#fff}
.layer:nth-child(2) .n{background:linear-gradient(135deg,var(--navy-500) 0%,var(--navy-600) 100%)}
.layer:nth-child(3) .n{background:linear-gradient(135deg,var(--navy-500) 0%,var(--navy-600) 100%)}
.layer h3{font-size:1.1rem;margin-bottom:6px}
.layer p{font-size:.93rem;color:var(--slate);margin:0}

/* ---------- Big stat trio ---------- */
.bigstats{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;text-align:center}
.bigstat .v{font-size:clamp(2.6rem,6vw,4.2rem);font-weight:700;color:var(--navy);line-height:1;letter-spacing:-.04em}
.bigstat .v span{color:var(--orange)}
.bigstat .l{font-size:.92rem;color:var(--slate);margin-top:12px}
.dark .bigstat .v{color:#fff}
.dark .bigstat .l{color:#A9BDD6}

@media (max-width:680px){
  .prod-badge{width:140px;height:140px;top:-26px;right:-26px}
  .bigstats{grid-template-columns:1fr;gap:32px}
  .layer{grid-template-columns:1fr;gap:14px}
}

/* ---------- Modal (job application) ---------- */
.modal-overlay{position:fixed;inset:0;z-index:1000;background:rgba(0,18,37,.62);backdrop-filter:blur(4px);
  display:flex;align-items:flex-start;justify-content:center;padding:clamp(16px,5vh,56px) var(--gut);
  overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility .28s}
.modal-overlay.show{opacity:1;visibility:visible}
.modal{position:relative;width:100%;max-width:640px;background:#fff;border-radius:var(--r-lg);
  padding:clamp(26px,4vw,40px);box-shadow:var(--shadow-lg);transform:translateY(16px);transition:transform .3s var(--ease)}
.modal-overlay.show .modal{transform:none}
.modal h3{margin-bottom:6px}
.modal-close{position:absolute;top:14px;right:16px;width:38px;height:38px;border:0;border-radius:50%;
  background:var(--surface-soft);color:var(--navy);font-size:1.5rem;line-height:1;cursor:pointer;transition:.2s var(--ease)}
.modal-close:hover{background:var(--orange);color:#fff}

/* ---------- File upload field ---------- */
.file-drop{position:relative;display:flex;align-items:center;gap:14px;padding:11px 14px;border:1.5px dashed var(--line);
  border-radius:var(--r-sm);background:var(--surface-soft);transition:border-color .2s,background .2s}
.file-drop:hover{border-color:var(--navy-300);background:#fff}
.file-drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.file-btn{flex:none;padding:8px 16px;border-radius:var(--r-pill);background:var(--navy);color:#fff;
  font-size:.83rem;font-weight:600}
.file-name{font-size:.85rem;color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.field.error .file-drop{border-color:#D6453A}

/* ---------- Form note states ---------- */
.form-note.error{background:#FDECEA;color:#B3261E}

/* ---------- Pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;align-items:start}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 22px;position:relative;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.plan:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.plan.featured{border-color:var(--orange);box-shadow:0 14px 40px rgba(255,122,0,.16)}
.plan .flag{position:absolute;top:-13px;left:28px;background:var(--orange);color:#fff;font-size:.68rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding:6px 14px;border-radius:var(--r-pill)}
.plan h3{margin-bottom:6px}
.plan .who{font-size:.88rem;color:var(--slate);min-height:44px}
.plan .price{font-size:1.5rem;font-weight:700;color:var(--navy);margin:18px 0 4px;letter-spacing:-.02em}
.plan .price small{display:block;font-size:.8rem;font-weight:400;color:var(--slate);letter-spacing:0;margin-top:6px}
.plan .ticks{margin-top:22px}
.plan .btn{width:100%;margin-top:24px}
@media (max-width:900px){.plans{grid-template-columns:1fr;gap:20px}}

/* ---------- Partner tiers ---------- */
.tier{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:24px 26px}
.tier+.tier{margin-top:10px}
.tier .ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex:none;
  background:var(--navy-100);color:var(--navy)}
.tier .ico svg{width:21px;height:21px}
.tier h3{font-size:1.05rem;margin-bottom:5px}
.tier p{font-size:.92rem;color:var(--slate);margin:0}

/* ---------- Article / resource list ---------- */
.res-card{display:flex;flex-direction:column;height:100%}
.res-card .tag{align-self:flex-start}
.res-meta{display:flex;gap:14px;font-size:.78rem;color:var(--slate-400);margin-top:auto;padding-top:16px}

/* ---------- Use-case page bits ---------- */
/* the "all use cases" index runs the full width, not the 760px text measure */
.uc-all{max-width:none}
.uc-nav{display:flex;flex-wrap:wrap;gap:9px;margin-top:10px}
.uc-nav a{font-size:.83rem;font-weight:600;color:var(--navy-600);background:var(--navy-100);
  border-radius:var(--r-pill);padding:7px 13px;transition:.2s var(--ease);
  flex:1 1 calc(25% - 7px);text-align:center;white-space:nowrap}
.uc-nav a:hover{background:var(--navy);color:#fff}
@media (max-width:1150px){.uc-nav a{flex-basis:calc(33.333% - 6px)}}
@media (max-width:760px){.uc-nav a{flex-basis:calc(50% - 5px)}}
@media (max-width:470px){.uc-nav a{flex-basis:100%}}
.uc-nav a.current{background:var(--orange);color:#fff}
.kv{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;font-size:.93rem}
.kv dt{font-weight:600;color:var(--navy);white-space:nowrap}
.kv dd{margin:0;color:var(--slate)}
@media (max-width:560px){.kv{grid-template-columns:1fr;gap:4px 0}.kv dd{margin-bottom:12px}}

/* ---------- Wide "Supported" list: 2 columns of label/value pairs ---------- */
.kv-wide{grid-template-columns:auto 1fr auto 1fr;gap:12px 22px}
@media (max-width:900px){.kv-wide{grid-template-columns:auto 1fr}}
@media (max-width:560px){.kv-wide{grid-template-columns:1fr;gap:4px 0}.kv-wide dd{margin-bottom:12px}}