/* ==========================================================================
   Avan21 Catalogue — DS Inks
   Tokens, type and components lifted from the live avan21parkway.in home page
   (its HTML-widget design system: navy / sky / red, Poppins, 10px radii,
   radial product stages, [data-reveal] entrances).

   Everything is scoped under .a21 so it can sit on Elementor pages next to the
   Hello theme's reset, which otherwise paints links and buttons #c36 pink.
   ========================================================================== */

.a21 {
  --navy-950:#041221; --navy-900:#071B30; --navy-800:#0B2742; --navy-700:#113A5E; --navy-600:#1B4E78;
  --sky:#1AA6DF; --sky-600:#0E8BC2; --sky-400:#4DBCE8; --sky-300:#8AD4F2; --sky-100:#E4F5FD; --sky-50:#F2FAFE;
  --red:#E2363C; --red-600:#C8262C; --red-100:#FDE8E9;
  --ink:#16202B; --ink-2:#3E4C5A; --muted:#6A7988; --charcoal:#3A3F45; --violet:#6D4AFF;
  --bg:#F4F7FA; --surface:#FFFFFF; --line:#E1E8EF; --line-2:#EDF2F6;
  --d-bg:#050d1c; --d-card:#0b1a33; --d-line:rgba(120,170,255,.12); --d-txt:#e8f0ff; --d-mut:#9fb3d1;
  --b1:#1d6fe0; --b2:#4fa3ff; --b3:#0a3a8c;
  --r:10px; --r-lg:16px; --r-xl:24px;
  --sh-sm:0 1px 2px rgba(7,27,48,.06),0 4px 12px -4px rgba(7,27,48,.08);
  --sh-md:0 1px 2px rgba(7,27,48,.05),0 18px 40px -18px rgba(7,27,48,.22);
  --sh-lg:0 30px 80px -30px rgba(7,27,48,.35);
  --f:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --container:1200px; --gutter:clamp(16px,4vw,40px);
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --header-h:76px;
  font-family:var(--f); font-size:16px; line-height:1.65; color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.a21-page { margin:0; background:#fff; overflow-x:hidden; }
.a21, .a21 *, .a21 *::before, .a21 *::after { box-sizing:border-box; }
.a21 img { max-width:100%; height:auto; display:block; border:0; }
.a21 a { color:inherit; text-decoration:none; background:none; }
.a21 a:hover, .a21 a:active { color:inherit; }
.a21 h1, .a21 h2, .a21 h3, .a21 h4 { font-family:var(--f); margin:0; letter-spacing:-.02em; line-height:1.15; color:var(--ink); font-weight:700; }
.a21 p { margin:0; }
.a21 ul, .a21 ol { margin:0; padding:0; list-style:none; }
.a21 address { font-style:normal; }
.a21 button { font:inherit; cursor:pointer; color:inherit; background:none; border:0; border-radius:0; padding:0; margin:0; width:auto; text-transform:none; line-height:inherit; }
.a21 button:hover, .a21 button:focus { background:none; color:inherit; }
.a21 :focus-visible { outline:2px solid var(--sky); outline-offset:3px; border-radius:var(--r); }
.a21 .a21-ico { width:18px; height:18px; flex:0 0 auto; display:inline-block; vertical-align:middle; }
.a21 em { font-style:normal; }
.a21-visually-hidden { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.a21 [hidden] { display:none!important; }
.a21-main { display:block; }

/* ---------- layout ---------- */
.a21 .a21-container { width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.a21 .a21-sec { padding:clamp(56px,7vw,96px) 0; position:relative; }
.a21 .a21-sec--bg { background:var(--bg); }
.a21 .a21-sec--dark {
  background:radial-gradient(1100px 500px at 85% -10%,rgba(29,111,224,.28),transparent 60%),
             radial-gradient(900px 450px at -5% 110%,rgba(10,58,140,.35),transparent 60%),
             linear-gradient(180deg,#061229 0%,var(--d-bg) 100%);
  color:var(--d-txt); overflow:hidden;
}
.a21 .a21-split { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,72px); align-items:start; }
.a21 .a21-split--wide { grid-template-columns:1.25fr .75fr; }
.a21 .a21-h2 { font-size:clamp(26px,3.2vw,40px); margin:10px 0 16px; }
.a21 .a21-h2 em, .a21 .a21-head h2 em, .a21 .a21-psingle h1 em, .a21 .a21-thanks h1 em {
  background:linear-gradient(100deg,var(--sky-600),var(--sky) 60%,var(--sky-400));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.a21 .a21-h2--light { color:#fff; }
.a21 .a21-prose { color:var(--ink-2); font-size:16px; line-height:1.75; }
.a21 .a21-prose p + p { margin-top:14px; }
.a21 .a21-prose h2 { font-size:22px; margin:28px 0 10px; }
.a21 .a21-prose ul { list-style:disc; padding-left:20px; margin:10px 0; }
.a21 .a21-prose a { color:var(--sky-600); text-decoration:underline; }
.a21 .a21-prose--legal { max-width:780px; }
.a21 .a21-muted { color:var(--muted); font-size:14.5px; margin-top:14px; display:flex; gap:8px; align-items:flex-start; }
.a21 .a21-muted a { color:var(--sky-600); font-weight:600; }
.a21 .a21-muted--light { color:var(--d-mut); }
.a21 .a21-empty { padding:32px; background:#fff; border:1px dashed var(--line); border-radius:var(--r); text-align:center; color:var(--muted); }
.a21 .a21-empty a { color:var(--sky-600); font-weight:600; }

/* ---------- eyebrow + section head ---------- */
.a21 .a21-eyebrow { display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--sky-600); line-height:1; }
.a21 .a21-eyebrow::before { content:""; width:30px; height:2px; background:linear-gradient(90deg,var(--sky-600),var(--sky)); border-radius:2px; }
.a21 .a21-eyebrow--dark { color:var(--b2); }
.a21 .a21-eyebrow--dark::before { background:linear-gradient(90deg,var(--b1),var(--b2)); }
.a21 .a21-head { max-width:720px; margin-bottom:clamp(26px,3.4vw,40px); }
.a21 .a21-head h2 { font-size:clamp(26px,3.2vw,40px); margin-top:12px; }
.a21 .a21-head p { font-size:clamp(15px,1.2vw,16.5px); line-height:1.6; color:var(--ink-2); max-width:560px; }
.a21 .a21-head--split { max-width:none; display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:end; }
.a21 .a21-head--center { text-align:center; margin-left:auto; margin-right:auto; }
.a21 .a21-head--center .a21-eyebrow::after { content:""; width:30px; height:2px; background:linear-gradient(90deg,var(--sky),var(--sky-600)); }
.a21 .a21-head--dark h2 { color:#fff; }
.a21 .a21-head--dark h2 em { background:linear-gradient(90deg,#fff,var(--b2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.a21 .a21-head--dark p { color:var(--d-mut); }

/* ---------- buttons, links, chips ---------- */
.a21 .a21-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px; height:48px; padding:0 22px;
  border-radius:var(--r); font-weight:600; font-size:15px; line-height:1; white-space:nowrap; border:1.5px solid transparent;
  transition:transform .3s var(--ease-out),box-shadow .3s,background .3s,color .3s,border-color .3s; text-decoration:none;
}
.a21 .a21-btn .a21-ico { width:17px; height:17px; transition:transform .3s var(--ease-out); }
.a21 .a21-btn:hover .a21-ico:last-child { transform:translateX(3px); }
.a21 .a21-btn--red, .a21 .a21-btn--red:hover { background:linear-gradient(135deg,var(--red),var(--red-600)); color:#fff; }
.a21 .a21-btn--red:hover { transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(226,54,60,.75); }
.a21 .a21-btn--blue, .a21 .a21-btn--blue:hover { background:linear-gradient(135deg,var(--b2),var(--b1) 55%,var(--b3)); color:#fff; }
.a21 .a21-btn--blue:hover { transform:translateY(-2px); box-shadow:0 12px 28px -8px rgba(29,111,224,.7); }
.a21 .a21-btn--ghost { color:#fff; border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.04); }
.a21 .a21-btn--ghost:hover { color:#fff; border-color:#fff; background:rgba(255,255,255,.1); }
.a21 .a21-btn--line { color:var(--navy-800); border-color:var(--line); background:#fff; }
.a21 .a21-btn--line:hover { color:#fff; background:var(--navy-800); border-color:var(--navy-800); }
.a21 .a21-btn--block { width:100%; }
.a21 .a21-link-arrow { display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px; color:var(--sky-600); }
.a21 .a21-link-arrow .a21-ico { width:16px; height:16px; transition:transform .3s var(--ease-out); }
.a21 .a21-link-arrow:hover { color:var(--sky-600); }
.a21 .a21-link-arrow:hover .a21-ico { transform:translateX(4px); }
.a21 .a21-chip { display:inline-flex; align-items:center; font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:5px 10px; border-radius:var(--r); background:var(--navy-800); color:#fff; line-height:1.2; }
.a21 .a21-chip--tij { background:var(--sky-600); }
.a21 .a21-chip--tto { background:var(--red); }
.a21 .a21-chip--laser { background:var(--violet); }
.a21 .a21-chip--auto { background:var(--charcoal); }
.a21 .a21-chip--ink { background:linear-gradient(135deg,var(--sky),var(--navy-700)); }
.a21 .a21-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; align-items:center; }
.a21 .a21-tags span { font-size:13px; font-weight:500; padding:6px 12px; border-radius:var(--r); background:var(--sky-50); color:var(--navy-700); border:1px solid var(--sky-100); }
.a21 .a21-tags .a21-tags__label { background:none; border:0; padding-left:0; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

/* ---------- top bar + header ---------- */
.a21 .a21-topbar { background:var(--navy-900); color:rgba(255,255,255,.78); font-size:12.5px; }
.a21 .a21-topbar__in { display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:40px; }
.a21 .a21-topbar__l { display:flex; gap:22px; flex-wrap:wrap; }
.a21 .a21-topbar a, .a21 .a21-topbar span { display:inline-flex; align-items:center; gap:7px; }
.a21 .a21-topbar a:hover { color:#fff; }
.a21 .a21-topbar .a21-ico { width:14px; height:14px; color:var(--sky); }
.a21 .a21-topbar__r { font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:11px; color:#fff; display:inline-flex; align-items:center; gap:8px; }
.a21 .a21-live { width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 0 rgba(34,197,94,.6); animation:a21pulse 2s infinite; }
@keyframes a21pulse { 0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)} 70%{box-shadow:0 0 0 9px rgba(34,197,94,0)} 100%{box-shadow:0 0 0 0 rgba(34,197,94,0)} }

/* the blur lives on a pseudo-element: backdrop-filter on the header itself would make it the
   containing block for the fixed mobile menu, which then renders off-screen */
.a21 .a21-header { position:sticky; top:0; z-index:90; background:transparent; border-bottom:1px solid transparent; transition:box-shadow .3s,border-color .3s; }
.a21 .a21-header::before { content:""; position:absolute; inset:0; z-index:-1; background:rgba(255,255,255,.96); backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); }
.a21 .a21-brand, .a21 .a21-header__cta { position:relative; z-index:91; }
body.admin-bar .a21 .a21-header { top:32px; }
.a21 .a21-header.is-stuck { box-shadow:0 10px 30px -18px rgba(7,27,48,.35); border-color:var(--line); }
.a21 .a21-header__in { display:flex; align-items:center; justify-content:space-between; gap:24px; height:var(--header-h); }
.a21 .a21-brand { display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:21px; letter-spacing:-.02em; color:var(--navy-900); }
.a21 .a21-brand img { width:46px; height:46px; object-fit:contain; }
.a21 .a21-nav__list { display:flex; align-items:center; gap:4px; }
.a21 .a21-nav__list > li { position:relative; }
.a21 .a21-nav__list > li > a { display:inline-flex; align-items:center; gap:5px; padding:10px 14px; border-radius:var(--r); font-weight:500; font-size:15px; color:var(--navy-800); transition:color .25s,background .25s; }
.a21 .a21-nav__list > li > a:hover, .a21 .a21-nav__list > li.is-active > a, .a21 .a21-nav__list > li.current-menu-item > a { color:var(--sky-600); }
.a21 .a21-nav__list > li.is-active > a::after { content:""; position:absolute; left:14px; right:14px; bottom:2px; height:2px; border-radius:2px; background:var(--sky); }
.a21 .a21-chev { width:14px; height:14px; transition:transform .3s; }
.a21 .a21-has-drop:hover .a21-chev, .a21 .a21-has-drop:focus-within .a21-chev { transform:rotate(180deg); }
.a21 .a21-drop, .a21 .a21-nav__list--wp .sub-menu {
  position:absolute; top:calc(100% + 8px); left:0; min-width:250px; padding:10px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-lg); opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .25s,transform .35s var(--ease-out),visibility .25s; z-index:5;
}
.a21 .a21-drop::before { content:""; position:absolute; left:0; right:0; top:-12px; height:12px; }
.a21 .a21-has-drop:hover > .a21-drop, .a21 .a21-has-drop:focus-within > .a21-drop,
.a21 .a21-nav__list--wp li:hover > .sub-menu, .a21 .a21-nav__list--wp li:focus-within > .sub-menu { opacity:1; visibility:visible; transform:none; }
.a21 .a21-drop > a, .a21 .a21-nav__list--wp .sub-menu a { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; font-size:14px; font-weight:500; color:var(--ink-2); transition:background .2s,color .2s; }
.a21 .a21-drop > a:hover, .a21 .a21-nav__list--wp .sub-menu a:hover { background:var(--bg); color:var(--navy-900); }
.a21 .a21-drop > a .a21-ico { width:16px; height:16px; color:var(--sky-600); }
.a21 .a21-drop__num { font-size:11px; font-weight:600; color:var(--sky-600); min-width:20px; }
.a21 .a21-drop--mega { width:min(720px,80vw); left:50%; transform:translate(-50%,8px); padding:14px; }
.a21 .a21-has-drop:hover > .a21-drop--mega, .a21 .a21-has-drop:focus-within > .a21-drop--mega { transform:translate(-50%,0); }
.a21 .a21-drop__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.a21 .a21-drop__cat { display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:14px; border-radius:12px; border:1px solid var(--line-2); transition:border-color .25s,background .25s,transform .3s var(--ease-out); }
.a21 .a21-drop__cat:hover { border-color:var(--sky-100); background:var(--sky-50); transform:translateY(-2px); }
.a21 .a21-drop__cat b { font-size:14.5px; color:var(--navy-900); font-weight:600; }
.a21 .a21-drop__cat small { font-size:12px; color:var(--muted); line-height:1.45; }
.a21 .a21-drop__all { display:flex; justify-content:center; align-items:center; gap:8px; margin-top:10px; padding:11px; border-radius:10px; background:var(--navy-900); color:#fff; font-weight:600; font-size:13.5px; }
.a21 .a21-drop__all:hover { color:#fff; background:var(--navy-700); }
.a21 .a21-drop__all .a21-ico { width:15px; height:15px; }
.a21 .a21-header__cta { display:flex; align-items:center; gap:12px; }
.a21 .a21-roundbtn { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--sky),var(--sky-600)); box-shadow:0 10px 24px -12px rgba(14,139,194,.9); transition:transform .3s var(--ease-out); }
.a21 .a21-roundbtn:hover { color:#fff; transform:scale(1.06) rotate(-8deg); }
.a21 .a21-burger { display:none; width:46px; height:46px; border-radius:var(--r); border:1.5px solid var(--line); position:relative; }
.a21 .a21-burger span { position:absolute; left:12px; right:12px; height:2px; border-radius:2px; background:var(--navy-900); transition:transform .3s,opacity .3s; }
.a21 .a21-burger span:nth-child(1) { top:15px; } .a21 .a21-burger span:nth-child(2) { top:21px; } .a21 .a21-burger span:nth-child(3) { top:27px; }
.a21 .a21-burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.a21 .a21-burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.a21 .a21-burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
.a21 .a21-nav__mobile-cta { display:none; }

/* ---------- hero ---------- */
.a21 .a21-hero {
  position:relative; overflow:hidden; color:var(--d-txt); padding:clamp(56px,7vw,100px) 0 clamp(64px,8vw,110px);
  background:radial-gradient(900px 480px at 82% 0%,rgba(29,111,224,.32),transparent 60%),
             radial-gradient(700px 420px at 0% 100%,rgba(26,166,223,.18),transparent 60%),
             linear-gradient(160deg,var(--navy-900) 0%,var(--d-bg) 70%);
  isolation:isolate;
}
.a21 .a21-hero__grid { position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:linear-gradient(rgba(120,170,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(120,170,255,.07) 1px,transparent 1px);
  background-size:56px 56px; -webkit-mask-image:radial-gradient(ellipse at 70% 30%,#000 20%,transparent 75%); mask-image:radial-gradient(ellipse at 70% 30%,#000 20%,transparent 75%);
  animation:a21grid 30s linear infinite; }
@keyframes a21grid { to { background-position:56px 56px,56px 56px; } }
.a21 .a21-hero__photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; filter:saturate(.9) brightness(.55); transform:scale(1.06); animation:a21zoom 18s var(--ease) forwards; }
@keyframes a21zoom { to { transform:scale(1); } }
.a21 .a21-hero--photo::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(4,18,33,.95) 0%,rgba(4,18,33,.78) 45%,rgba(4,18,33,.25) 100%); }
.a21 .a21-hero__in { display:grid; grid-template-columns:1fr; gap:40px; align-items:center; }
.a21 .a21-hero--split .a21-hero__in { grid-template-columns:1.1fr .9fr; }
.a21 .a21-hero__text { max-width:720px; }
.a21 .a21-hero h1 { color:#fff; font-size:clamp(32px,4.6vw,56px); font-weight:700; line-height:1.08; margin:14px 0 0; }
.a21 .a21-hero h1 em { background:linear-gradient(95deg,#fff 0%,var(--sky-300) 45%,var(--b2) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.a21 .a21-hero__lead { margin-top:18px; font-size:clamp(15.5px,1.3vw,18px); line-height:1.65; color:var(--d-mut); max-width:600px; }
.a21 .a21-hero__chip { margin-bottom:4px; }
.a21 .a21-hero__chips { display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:22px; }
.a21 .a21-hero__chips li { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:#d6e6ff; }
.a21 .a21-hero__chips .a21-ico { width:16px; height:16px; padding:2px; border-radius:50%; background:rgba(26,166,223,.2); color:var(--sky-300); }
.a21 .a21-hero__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.a21 .a21-hero__stage { position:relative; aspect-ratio:1/1; max-width:480px; width:100%; justify-self:end; display:grid; place-items:center;
  border-radius:var(--r-xl); background:radial-gradient(70% 60% at 50% 58%,#fff 0%,#eef7fd 55%,#d5ebf8 100%); box-shadow:0 40px 90px -40px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.6); padding:9%; }
.a21 .a21-hero__glow { position:absolute; inset:-30px; z-index:-1; border-radius:40px; background:conic-gradient(from 180deg,rgba(26,166,223,.0),rgba(26,166,223,.55),rgba(29,111,224,.0),rgba(226,54,60,.35),rgba(26,166,223,.0)); filter:blur(40px); animation:a21spin 14s linear infinite; }
@keyframes a21spin { to { transform:rotate(1turn); } }
.a21 .a21-hero__stage img { max-height:100%; object-fit:contain; mix-blend-mode:multiply; animation:a21float 6s ease-in-out infinite; }
@keyframes a21float { 50% { transform:translateY(-12px); } }
.a21 .a21-hero__stage::after { content:""; position:absolute; left:20%; right:20%; bottom:9%; height:18px; border-radius:50%; background:radial-gradient(closest-side,rgba(7,27,48,.22),transparent); animation:a21shadow 6s ease-in-out infinite; }
@keyframes a21shadow { 50% { transform:scale(.82); opacity:.6; } }
.a21 .a21-crumbs { display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:13px; color:var(--d-mut); margin-bottom:18px; }
.a21 .a21-crumbs a:hover { color:#fff; }
.a21 .a21-crumbs [aria-current] { color:#fff; font-weight:500; }
.a21 .a21-crumbs > span[aria-hidden] { opacity:.45; }
.a21 .a21-crumbs--light { color:var(--muted); }
.a21 .a21-crumbs--light a:hover { color:var(--sky-600); }
.a21 .a21-crumbs--light [aria-current] { color:var(--navy-900); }

/* ---------- marquee (the red tilted strip) ---------- */
.a21 .a21-marquee { overflow:hidden; padding:22px 0; margin-top:-34px; position:relative; z-index:2; }
.a21 .a21-marquee__bar { width:102%; margin-left:-1%; background:linear-gradient(90deg,#C8252B 0%,var(--red) 50%,#C8252B 100%); color:#fff; transform:rotate(-1.2deg) scale(1.02); box-shadow:0 20px 40px -20px rgba(226,54,60,.6); }
.a21 .a21-marquee__track { display:flex; width:max-content; animation:a21marquee 38s linear infinite; }
.a21 .a21-marquee__track span { display:inline-flex; align-items:center; gap:26px; padding:16px 13px; font-size:clamp(15px,1.6vw,19px); font-weight:600; white-space:nowrap; letter-spacing:-.01em; }
.a21 .a21-marquee__track span::after { content:""; width:9px; height:9px; background:#fff; transform:rotate(45deg); }
@keyframes a21marquee { to { transform:translateX(-50%); } }

/* ---------- category tiles ---------- */
.a21 .a21-cgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.a21 .a21-ccard { position:relative; display:grid; grid-template-columns:1.1fr .9fr; min-height:220px; border-radius:var(--r-lg); background:#fff; border:1px solid var(--line); overflow:hidden;
  transition:transform .5s var(--ease-out),box-shadow .5s,border-color .4s; }
.a21 .a21-ccard::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--navy-800); transform:scaleY(0); transform-origin:bottom; transition:transform .5s var(--ease-out); }
.a21 .a21-ccard--tij::before { background:var(--sky-600); } .a21 .a21-ccard--tto::before { background:var(--red); } .a21 .a21-ccard--laser::before { background:var(--violet); } .a21 .a21-ccard--auto::before { background:var(--charcoal); } .a21 .a21-ccard--ink::before { background:var(--sky); }
.a21 .a21-ccard:hover { transform:translateY(-6px); box-shadow:var(--sh-lg); border-color:transparent; }
.a21 .a21-ccard:hover::before { transform:none; }
.a21 .a21-ccard__text { padding:22px 0 22px 22px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.a21 .a21-ccard h3 { font-size:19px; margin-top:6px; }
.a21 .a21-ccard p { font-size:13.5px; color:var(--ink-2); line-height:1.5; }
.a21 .a21-ccard__meta { margin-top:auto; display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--sky-600); font-weight:600; }
.a21 .a21-ccard__meta b { font-size:22px; color:var(--navy-900); }
.a21 .a21-ccard__meta .a21-ico { width:15px; height:15px; transition:transform .3s var(--ease-out); }
.a21 .a21-ccard:hover .a21-ccard__meta .a21-ico { transform:translateX(4px); }
.a21 .a21-ccard__media { position:relative; display:grid; place-items:center; padding:18px; background:radial-gradient(80% 70% at 50% 60%,#fff,var(--sky-50) 70%,#E8F3FA); }
.a21 .a21-ccard__media img { max-height:170px; object-fit:contain; mix-blend-mode:multiply; transition:transform .7s var(--ease-out); }
.a21 .a21-ccard:hover .a21-ccard__media img { transform:translateY(-8px) scale(1.06); }
.a21 .a21-cgrid--compact .a21-ccard { min-height:170px; }
.a21 .a21-cgrid--compact .a21-ccard__media img { max-height:120px; }

/* ---------- toolbar, filters, arrows ---------- */
.a21 .a21-toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:22px; flex-wrap:wrap; }
.a21 .a21-filters { display:flex; flex-wrap:wrap; gap:6px; padding:6px; background:#fff; border:1px solid var(--line); border-radius:var(--r); position:relative; }
.a21 .a21-filters button { position:relative; z-index:1; padding:9px 18px; border-radius:8px; font-weight:700; font-size:14px; color:var(--ink-2); transition:color .3s; }
.a21 .a21-filters button.is-on, .a21 .a21-filters button.is-on:hover { color:#fff; }
.a21 .a21-filters button .n { font-size:10.5px; margin-left:6px; opacity:.55; }
.a21 .a21-filters__pill { position:absolute; top:6px; left:0; height:calc(100% - 12px); width:0; border-radius:8px; background:var(--navy-800); transition:transform .5s var(--ease-out),width .5s var(--ease-out); z-index:0; }
.a21 .a21-arrows { display:flex; gap:10px; margin-left:auto; }
.a21 .a21-arrows button { width:46px; height:46px; border-radius:var(--r); border:1.5px solid var(--line); background:#fff; display:grid; place-items:center; transition:background .3s,color .3s,border-color .3s; }
.a21 .a21-arrows button:hover { background:var(--navy-800); color:#fff; border-color:var(--navy-800); }
.a21 .a21-arrows button:disabled { opacity:.35; pointer-events:none; }
.a21 .a21-progress { height:3px; background:var(--line); border-radius:3px; overflow:hidden; max-width:320px; margin-top:16px; }
.a21 .a21-progress i { display:block; height:100%; width:30%; background:var(--navy-800); border-radius:3px; transition:transform .3s,width .3s; }

/* ---------- product card (home page .p-card) ---------- */
.a21 .a21-pgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.a21 .a21-pgrid--carousel { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:10px 2px 20px; margin:-10px -2px 0; scrollbar-width:none; cursor:grab; }
.a21 .a21-pgrid--carousel::-webkit-scrollbar { display:none; }
.a21 .a21-pgrid--carousel.is-drag { cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }
.a21 .a21-pgrid--carousel .a21-pcard { flex:0 0 calc((100% - 60px)/4); min-width:260px; scroll-snap-align:start; }
.a21 .a21-pcard { background:#fff; border-radius:var(--r); border:1px solid var(--line); overflow:hidden; display:flex; flex-direction:column; transition:transform .5s var(--ease-out),box-shadow .5s,border-color .5s; }
.a21 .a21-pcard.is-hide { display:none; }
.a21 .a21-pcard.is-pop { animation:a21pop .6s var(--ease-out) both; animation-delay:var(--d,0s); }
@keyframes a21pop { from { opacity:0; transform:translateY(24px) scale(.97); } to { opacity:1; transform:none; } }
.a21 .a21-pcard:hover { transform:translateY(-8px); box-shadow:var(--sh-lg); border-color:transparent; }
.a21 .a21-pcard__media { position:relative; height:220px; background:radial-gradient(80% 70% at 50% 60%,#fff,var(--sky-50) 70%,#E8F3FA); display:grid; place-items:center; padding:26px; overflow:hidden; }
.a21 .a21-pcard__media::before { content:""; position:absolute; left:50%; bottom:22px; width:62%; height:18px; margin-left:-31%; border-radius:50%; background:radial-gradient(closest-side,rgba(7,27,48,.18),transparent); transition:transform .6s var(--ease-out),opacity .6s; }
.a21 .a21-pcard__media img { position:relative; max-height:100%; max-width:92%; object-fit:contain; transition:transform .7s var(--ease-out); mix-blend-mode:multiply; }
.a21 .a21-pcard:hover .a21-pcard__media img { transform:translateY(-10px) scale(1.05); }
.a21 .a21-pcard:hover .a21-pcard__media::before { transform:scale(.8); opacity:.6; }
.a21 .a21-pcard__media .a21-chip { position:absolute; top:14px; left:14px; z-index:1; }
.a21 .a21-pcard__badge { position:absolute; top:14px; right:14px; z-index:1; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 10px; border-radius:var(--r); background:var(--red-100); color:var(--red-600); }
.a21 .a21-pcard__body { padding:18px 18px 20px; display:flex; flex-direction:column; flex:1; }
.a21 .a21-pcard__body small { font-size:11px; letter-spacing:.06em; color:var(--muted); text-transform:uppercase; font-weight:500; }
.a21 .a21-pcard__body h3 { font-size:19px; font-weight:700; margin-top:4px; }
.a21 .a21-pcard__body h3 a:hover { color:var(--sky-600); }
.a21 .a21-diamonds { margin-top:10px; display:grid; gap:6px; }
.a21 .a21-diamonds li { position:relative; padding-left:20px; font-size:13.5px; color:var(--ink-2); line-height:1.45; }
.a21 .a21-diamonds li::before { content:""; position:absolute; left:0; top:6px; width:9px; height:9px; border-radius:2px; background:var(--sky); transform:rotate(45deg) scale(.75); }
.a21 .a21-pcard__foot { margin-top:auto; padding-top:16px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.a21 .a21-pcard__enq { display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px; border-radius:var(--r); background:var(--bg); font-weight:700; font-size:13px; color:var(--navy-900); transition:background .3s,color .3s; }
.a21 .a21-pcard__enq .a21-ico { width:14px; height:14px; }
.a21 .a21-pcard:hover .a21-pcard__enq, .a21 .a21-con:hover .a21-pcard__enq, .a21 .a21-pcard__enq:hover { background:var(--red); color:#fff; }

/* ---------- industry card (home page .dsi-card) ---------- */
.a21 .a21-igrid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.a21 .a21-igrid--3 { grid-template-columns:repeat(3,1fr); }
.a21 .a21-igrid--5 { grid-template-columns:repeat(5,1fr); }
.a21 .a21-icard { position:relative; display:block; border-radius:var(--r); overflow:hidden; background:var(--d-card); border:1px solid var(--d-line); aspect-ratio:4/5; isolation:isolate;
  opacity:0; transform:translateY(30px); transition:opacity .7s ease,transform .7s ease,border-color .35s,box-shadow .35s; transition-delay:var(--d,0s); color:#fff; }
.a21 .a21-icard.is-in { opacity:1; transform:none; }
.a21 .a21-icard img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s; filter:saturate(.9) brightness(.85); }
.a21 .a21-icard::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(5,13,28,.05) 25%,rgba(6,22,52,.75) 60%,rgba(5,13,28,.97) 100%); transition:background .5s; }
.a21 .a21-icard__num { position:absolute; top:14px; left:14px; font-weight:600; font-size:12px; line-height:1; letter-spacing:.1em; color:#fff; background:rgba(5,13,28,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(120,170,255,.25); padding:7px 10px; border-radius:var(--r); }
.a21 .a21-icard__arrow { position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:var(--r); display:grid; place-items:center; background:linear-gradient(135deg,var(--b2),var(--b1)); color:#fff; transform:scale(0) rotate(-45deg); transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.a21 .a21-icard__body { position:absolute; left:0; right:0; bottom:0; padding:18px; }
.a21 .a21-icard h3 { font-weight:600; font-size:18px; line-height:1.3; color:#fff; margin-bottom:6px; }
.a21 .a21-icard p { font-size:13.5px; line-height:1.6; color:var(--d-mut); max-height:0; opacity:0; overflow:hidden; transition:max-height .5s ease,opacity .4s ease; }
.a21 .a21-icard__tags { display:flex; gap:6px; margin-top:10px; overflow:hidden; }
.a21 .a21-icard__tags span { flex:0 0 auto; white-space:nowrap; font-size:11px; font-weight:500; color:#d6e6ff; background:rgba(29,111,224,.2); border:1px solid rgba(79,163,255,.35); padding:4px 10px; border-radius:var(--r); }
.a21 .a21-icard__bar { position:absolute; left:0; bottom:0; height:3px; width:0; background:linear-gradient(90deg,var(--b3),var(--b1),var(--b2)); transition:width .6s ease; }
.a21 .a21-icard:hover { border-color:rgba(79,163,255,.5); box-shadow:0 24px 50px -20px rgba(29,111,224,.55),0 0 0 1px rgba(79,163,255,.2); }
.a21 .a21-icard:hover img { transform:scale(1.08); filter:saturate(1.05) brightness(.95); }
.a21 .a21-icard:hover::after { background:linear-gradient(180deg,rgba(5,13,28,.1) 10%,rgba(6,22,52,.85) 50%,rgba(5,13,28,.98) 100%); }
.a21 .a21-icard:hover .a21-icard__arrow { transform:scale(1) rotate(0); }
.a21 .a21-icard:hover p { max-height:110px; opacity:1; }
.a21 .a21-icard:hover .a21-icard__bar { width:100%; }
@media (hover:none) { .a21 .a21-icard p { max-height:110px; opacity:1; } .a21 .a21-icard__arrow { transform:scale(1); } }

/* ---------- service card (home page .ds-card) ---------- */
.a21 .a21-sgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:stretch; }
.a21 .a21-sgrid--3 { grid-template-columns:repeat(3,1fr); }
.a21 .a21-scard { position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:24px 22px; transition:transform .5s var(--ease-out),box-shadow .5s,border-color .4s; }
.a21 .a21-scard:hover { transform:translateY(-6px); box-shadow:var(--sh-lg); border-color:transparent; }
.a21 .a21-scard__top { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.a21 .a21-scard__num { font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.08em; }
.a21 .a21-scard__icon { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--sky-100); color:var(--sky-600); flex:0 0 auto; transition:transform .5s var(--ease-out); }
.a21 .a21-scard:hover .a21-scard__icon { transform:rotate(-8deg) scale(1.06); }
.a21 .a21-scard__icon .a21-ico { width:22px; height:22px; }
.a21 .a21-scard h3 { font-size:20px; font-weight:600; }
.a21 .a21-scard__desc { font-size:14px; color:var(--muted); margin-top:8px; line-height:1.55; min-height:44px; }
.a21 .a21-scard__features { margin-top:20px; padding-top:18px; border-top:1px solid var(--line-2); display:grid; gap:11px; }
.a21 .a21-scard__features li { display:flex; gap:10px; font-size:13.5px; color:var(--ink-2); line-height:1.45; }
.a21 .a21-scard__features .a21-ico { width:16px; height:16px; color:var(--sky-600); margin-top:1px; }
.a21 .a21-scard__features li.is-off { color:#9AA7B4; text-decoration:line-through; text-decoration-color:rgba(154,167,180,.6); }
.a21 .a21-scard__features li.is-off .a21-ico { color:#9AA7B4; }
.a21 .a21-scard__best { margin-top:auto; padding:14px; border-radius:12px; background:var(--bg); }
.a21 .a21-scard__features + .a21-scard__best { margin-top:22px; }
.a21 .a21-scard__best span { font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--sky-600); }
.a21 .a21-scard__best p { font-size:13.5px; font-weight:500; color:var(--navy-900); margin-top:4px; }
.a21 .a21-scard__foot { display:flex; justify-content:space-between; align-items:center; margin-top:16px; }
.a21 .a21-scard__enq { font-size:13px; font-weight:700; padding:8px 14px; border-radius:var(--r); background:var(--bg); color:var(--navy-900); transition:background .3s,color .3s; }
.a21 .a21-scard:hover .a21-scard__enq, .a21 .a21-scard__enq:hover { background:var(--red); color:#fff; }
.a21 .a21-scard--featured { background:linear-gradient(165deg,var(--navy-800),var(--navy-950)); border-color:var(--navy-800); color:#fff; box-shadow:0 30px 60px -30px rgba(7,27,48,.7); }
.a21 .a21-scard--featured h3 { color:#fff; }
.a21 .a21-scard--featured .a21-scard__desc, .a21 .a21-scard--featured .a21-scard__num { color:var(--d-mut); }
.a21 .a21-scard--featured .a21-scard__icon { background:rgba(26,166,223,.18); color:var(--sky-300); }
.a21 .a21-scard--featured .a21-scard__features { border-color:rgba(255,255,255,.1); }
.a21 .a21-scard--featured .a21-scard__features li { color:#d6e6ff; }
.a21 .a21-scard--featured .a21-scard__features .a21-ico { color:var(--sky-300); }
.a21 .a21-scard--featured .a21-scard__best { background:rgba(255,255,255,.06); }
.a21 .a21-scard--featured .a21-scard__best p { color:#fff; }
.a21 .a21-scard--featured .a21-scard__enq { background:rgba(255,255,255,.1); color:#fff; }
.a21 .a21-scard__badge { position:absolute; top:-12px; left:22px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:6px 12px; border-radius:var(--r); background:var(--red); color:#fff; box-shadow:0 10px 24px -10px rgba(226,54,60,.8); }
.a21 .a21-mini-services { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.a21 .a21-mini-service { position:relative; display:flex; flex-direction:column; gap:10px; padding:20px; border-radius:var(--r-lg); border:1px solid var(--line); background:#fff; transition:transform .4s var(--ease-out),box-shadow .4s,border-color .4s; }
.a21 .a21-mini-service b { font-size:16px; color:var(--navy-900); }
.a21 .a21-mini-service small { font-size:13px; color:var(--muted); line-height:1.5; }
.a21 .a21-mini-service__go { position:absolute; top:22px; right:20px; color:var(--sky-600); transition:transform .3s var(--ease-out); }
.a21 .a21-mini-service:hover { transform:translateY(-4px); box-shadow:var(--sh-md); border-color:transparent; }
.a21 .a21-mini-service:hover .a21-mini-service__go { transform:translate(3px,-3px); }

/* ---------- compare tables ---------- */
.a21 .a21-compare { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; box-shadow:var(--sh-sm); }
.a21 .a21-compare table { width:100%; border-collapse:collapse; min-width:760px; font-size:14px; margin:0; }
.a21 .a21-compare th, .a21 .a21-compare td { padding:16px 18px; text-align:left; vertical-align:top; border:0; border-bottom:1px solid var(--line-2); background:none; }
.a21 .a21-compare thead th { background:var(--bg); vertical-align:bottom; }
.a21 .a21-compare thead a { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.a21 .a21-compare thead b { font-size:14.5px; color:var(--navy-900); font-weight:600; }
.a21 .a21-compare tbody th { font-weight:600; color:var(--navy-900); width:18%; font-size:13.5px; }
.a21 .a21-compare td { color:var(--ink-2); line-height:1.5; }
.a21 .a21-compare tbody tr:last-child > * { border-bottom:0; }
.a21 .a21-compare tbody tr { transition:background .25s; }
.a21 .a21-compare tbody tr:hover { background:var(--sky-50); }
.a21 .a21-compare--plans td { text-align:center; }
.a21 .a21-compare--plans thead a { align-items:center; text-align:center; }
.a21 .a21-compare--plans tbody th { width:34%; font-weight:500; color:var(--ink-2); }
.a21 .a21-compare--plans td .a21-ico { width:22px; height:22px; padding:3px; border-radius:50%; }
.a21 .a21-compare--plans td.is-yes .a21-ico { color:#fff; background:var(--sky-600); }
.a21 .a21-compare--plans td.is-no .a21-ico, .a21 .a21-compare--plans td.is-na .a21-ico { color:#9AA7B4; background:var(--line-2); }

/* ---------- CTA band ---------- */
.a21 .a21-cta { margin-top:32px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding:24px 28px; border-radius:var(--r-lg);
  background:linear-gradient(120deg,var(--sky-50),#fff 60%); border:1px solid var(--sky-100); }
.a21 .a21-sec--dark .a21-cta { background:linear-gradient(120deg,rgba(29,111,224,.22),rgba(10,58,140,.18)); border-color:var(--d-line); }
.a21 .a21-cta__icon { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg,var(--b2),var(--b1)); color:#fff; flex:0 0 auto; }
.a21 .a21-cta__icon .a21-ico { width:24px; height:24px; }
.a21 .a21-cta__text { flex:1 1 300px; }
.a21 .a21-cta h3 { font-size:19px; font-weight:600; }
.a21 .a21-sec--dark .a21-cta h3 { color:#fff; }
.a21 .a21-cta p { color:var(--muted); font-size:14.5px; margin-top:4px; }
.a21 .a21-sec--dark .a21-cta p { color:var(--d-mut); }
.a21 .a21-cta--wide { margin-top:40px; }

/* ---------- product page ---------- */
.a21 .a21-psingle { padding:28px 0 clamp(48px,6vw,80px); background:linear-gradient(180deg,var(--bg),#fff); }
.a21 .a21-psingle__grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:center; margin-top:18px; }
.a21 .a21-gallery__stage { position:relative; aspect-ratio:5/4; border-radius:var(--r-xl); background:radial-gradient(70% 62% at 50% 58%,#fff 0%,var(--sky-50) 55%,#DCEFFA 100%); border:1px solid var(--line); display:grid; place-items:center; padding:9%; overflow:hidden; }
.a21 .a21-gallery__stage::after { content:""; position:absolute; left:22%; right:22%; bottom:10%; height:22px; border-radius:50%; background:radial-gradient(closest-side,rgba(7,27,48,.2),transparent); animation:a21shadow 6s ease-in-out infinite; }
.a21 .a21-gallery__stage img { position:relative; z-index:1; max-height:100%; object-fit:contain; mix-blend-mode:multiply; animation:a21float 6s ease-in-out infinite; transition:opacity .35s; }
.a21 .a21-gallery__stage img.is-swap { opacity:0; }
.a21 .a21-gallery__stage .a21-chip { position:absolute; top:18px; left:18px; z-index:2; }
.a21 .a21-gallery__stage .a21-pcard__badge { top:18px; right:18px; }
.a21 .a21-gallery__thumbs { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.a21 .a21-gallery__thumbs button { width:76px; height:64px; border-radius:var(--r); border:1.5px solid var(--line); background:var(--sky-50); padding:6px; transition:border-color .25s; }
.a21 .a21-gallery__thumbs button.is-on { border-color:var(--sky); }
.a21 .a21-gallery__thumbs img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.a21 .a21-psingle__sub { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--sky-600); font-weight:600; }
.a21 .a21-psingle h1 { font-size:clamp(34px,4.4vw,54px); margin-top:8px; }
.a21 .a21-psingle__lead { font-size:17px; color:var(--ink-2); margin-top:14px; line-height:1.65; max-width:540px; }
.a21 .a21-keyspecs { display:grid; gap:10px; margin-top:22px; }
.a21 .a21-keyspecs li { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#fff; font-size:14.5px; font-weight:500; color:var(--navy-900); transition:border-color .3s,transform .3s var(--ease-out); }
.a21 .a21-keyspecs li:hover { border-color:var(--sky-100); transform:translateX(4px); }
.a21 .a21-keyspecs span { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:var(--sky-100); color:var(--sky-600); flex:0 0 auto; }
.a21 .a21-keyspecs .a21-ico { width:17px; height:17px; }
.a21 .a21-psingle__actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.a21 .a21-assure { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.a21 .a21-assure li { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); font-weight:500; }
.a21 .a21-assure .a21-ico { width:16px; height:16px; color:var(--sky-600); }
.a21 .a21-subnav { position:sticky; top:var(--header-h); z-index:40; background:rgba(255,255,255,.95); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
body.admin-bar .a21 .a21-subnav { top:calc(var(--header-h) + 32px); }
.a21 .a21-subnav .a21-container { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.a21 .a21-subnav a { position:relative; padding:16px 14px; font-size:14px; font-weight:600; color:var(--muted); white-space:nowrap; transition:color .25s; }
.a21 .a21-subnav a::after { content:""; position:absolute; left:14px; right:14px; bottom:-1px; height:2px; background:var(--sky); transform:scaleX(0); transition:transform .35s var(--ease-out); }
.a21 .a21-subnav a.is-on, .a21 .a21-subnav a:hover { color:var(--navy-900); }
.a21 .a21-subnav a.is-on::after { transform:none; }
.a21 .a21-subnav .a21-subnav__cta { margin-left:auto; color:var(--red); }
.a21 .a21-quickfacts { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; box-shadow:var(--sh-md); position:sticky; top:calc(var(--header-h) + 80px); }
.a21 .a21-quickfacts h3 { font-size:17px; margin-bottom:14px; }
.a21 .a21-quickfacts dl { margin:0 0 18px; display:grid; }
.a21 .a21-quickfacts dl > div { display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px dashed var(--line); font-size:13.5px; }
.a21 .a21-quickfacts dt { color:var(--muted); }
.a21 .a21-quickfacts dd { margin:0; font-weight:600; color:var(--navy-900); text-align:right; }
.a21 .a21-specs { border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:#fff; box-shadow:var(--sh-sm); }
.a21 .a21-specs table { width:100%; border-collapse:collapse; margin:0; }
.a21 .a21-specs th, .a21 .a21-specs td { padding:16px 22px; text-align:left; font-size:15px; border:0; border-bottom:1px solid var(--line-2); background:none; }
.a21 .a21-specs tr:nth-child(even) { background:var(--sky-50); }
.a21 .a21-specs tr:last-child > * { border-bottom:0; }
.a21 .a21-specs th { width:34%; color:var(--muted); font-weight:500; }
.a21 .a21-specs td { color:var(--navy-900); font-weight:600; }
.a21 .a21-video a { display:flex; align-items:center; justify-content:center; gap:12px; aspect-ratio:16/9; border-radius:var(--r-lg); background:var(--navy-900); color:#fff; font-weight:600; }
.a21 .a21-video .a21-ico { width:42px; height:42px; color:var(--red); }

/* ---------- split extras: points, checklist ---------- */
.a21 .a21-points { display:grid; gap:12px; }
.a21 .a21-points li { display:flex; gap:16px; align-items:center; padding:18px 20px; border-radius:var(--r-lg); background:var(--bg); border:1px solid var(--line-2); transition:transform .4s var(--ease-out),background .3s,box-shadow .4s; }
.a21 .a21-points li:hover { transform:translateX(6px); background:#fff; box-shadow:var(--sh-md); }
.a21 .a21-points__n { font-size:22px; font-weight:700; background:linear-gradient(135deg,var(--sky),var(--navy-700)); -webkit-background-clip:text; background-clip:text; color:transparent; min-width:34px; }
.a21 .a21-points p { font-weight:500; color:var(--navy-900); }
.a21 .a21-checklist { display:grid; gap:12px; margin-bottom:20px; }
.a21 .a21-checklist li { display:flex; gap:10px; font-size:14.5px; color:var(--ink-2); font-weight:500; }
.a21 .a21-checklist .a21-ico { width:20px; height:20px; padding:3px; border-radius:50%; background:var(--sky-100); color:var(--sky-600); }
.a21 .a21-checklist--dark li { color:#d6e6ff; padding:14px 16px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid var(--d-line); }
.a21 .a21-checklist--dark .a21-ico { background:rgba(26,166,223,.2); color:var(--sky-300); }

/* ---------- industries: matrix, sectors ---------- */
.a21 .a21-matrix { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.a21 .a21-matrix__group { border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:#fff; transition:box-shadow .4s,transform .4s var(--ease-out); }
.a21 .a21-matrix__group:hover { box-shadow:var(--sh-md); transform:translateY(-4px); }
.a21 .a21-matrix__head { display:flex; align-items:center; gap:12px; padding:16px 18px; background:var(--navy-900); color:#fff; }
.a21 .a21-matrix__head:hover { color:#fff; }
.a21 .a21-matrix__head span { font-size:12px; color:var(--sky-300); font-weight:600; }
.a21 .a21-matrix__head b { flex:1; font-weight:600; }
.a21 .a21-matrix__head .a21-ico { width:16px; height:16px; transition:transform .3s var(--ease-out); }
.a21 .a21-matrix__head:hover .a21-ico { transform:translateX(4px); }
.a21 .a21-matrix ul { padding:6px 18px 12px; }
.a21 .a21-matrix li { padding:12px 0; border-bottom:1px dashed var(--line); display:grid; gap:2px; }
.a21 .a21-matrix li:last-child { border-bottom:0; }
.a21 .a21-matrix li b { font-size:14.5px; color:var(--navy-900); font-weight:600; }
.a21 .a21-matrix li span { font-size:13px; color:var(--muted); line-height:1.5; }
.a21 .a21-sectors { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.a21 .a21-sector { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:transform .5s var(--ease-out),box-shadow .5s; }
.a21 .a21-sector:hover { transform:translateY(-6px); box-shadow:var(--sh-lg); }
.a21 .a21-sector__media { position:relative; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(135deg,var(--navy-800),var(--navy-950)); display:grid; place-items:center; }
.a21 .a21-sector__media img { width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.a21 .a21-sector:hover .a21-sector__media img { transform:scale(1.07); }
.a21 .a21-sector__media .a21-ico { width:48px; height:48px; color:var(--sky-300); opacity:.7; }
.a21 .a21-sector__media span { position:absolute; top:12px; left:12px; font-size:12px; font-weight:600; color:#fff; background:rgba(5,13,28,.55); backdrop-filter:blur(8px); padding:6px 10px; border-radius:var(--r); }
.a21 .a21-sector__body { padding:18px 20px 22px; }
.a21 .a21-sector h3 { font-size:17px; font-weight:600; }
.a21 .a21-sector p { font-size:14px; color:var(--muted); margin-top:6px; line-height:1.55; }

/* ---------- steps ---------- */
.a21 .a21-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; counter-reset:s; }
.a21 .a21-steps::before { content:""; position:absolute; top:26px; left:26px; right:26px; height:2px; background:linear-gradient(90deg,var(--b1),var(--b2)); transform:scaleX(0); transform-origin:left; transition:transform 1.4s var(--ease-out) .2s; }
.a21 .a21-steps.is-in::before { transform:none; }
.a21 .a21-steps li { position:relative; opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease-out),transform .7s var(--ease-out); transition-delay:calc(var(--d,0s) + .3s); }
.a21 .a21-steps.is-in li { opacity:1; transform:none; }
.a21 .a21-steps__n { position:relative; z-index:1; width:54px; height:54px; border-radius:50%; display:grid; place-items:center; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--b2),var(--b1)); box-shadow:0 0 0 6px var(--d-bg),0 14px 30px -10px rgba(29,111,224,.8); margin-bottom:18px; }
.a21 .a21-steps h3 { font-size:18px; color:#fff; font-weight:600; }
.a21 .a21-steps p { color:var(--d-mut); font-size:14px; margin-top:6px; line-height:1.6; }

/* ---------- FAQ ---------- */
.a21 .a21-faq { display:grid; gap:12px; }
.a21 .a21-faq__item { border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; transition:box-shadow .3s,border-color .3s; }
.a21 .a21-faq__item[open] { box-shadow:var(--sh-md); border-color:transparent; }
.a21 .a21-faq summary { list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 20px; cursor:pointer; font-weight:600; color:var(--navy-900); font-size:15.5px; }
.a21 .a21-faq summary::-webkit-details-marker { display:none; }
.a21 .a21-faq__ico { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--bg); color:var(--sky-600); flex:0 0 auto; transition:transform .35s var(--ease-out),background .3s,color .3s; }
.a21 .a21-faq__item[open] .a21-faq__ico { transform:rotate(45deg); background:var(--sky-600); color:#fff; }
.a21 .a21-faq__a { padding:0 20px 20px; color:var(--ink-2); font-size:14.5px; line-height:1.7; }

/* ---------- stats ---------- */
.a21 .a21-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.a21 .a21-stats__item { padding:24px; border-radius:var(--r-lg); background:#fff; border:1px solid var(--line); }
.a21 .a21-stats__item b { display:block; font-size:clamp(30px,3.4vw,42px); font-weight:700; letter-spacing:-.03em; background:linear-gradient(135deg,var(--navy-900),var(--sky-600)); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1.1; }
.a21 .a21-stats__item span { display:block; margin-top:6px; font-size:13.5px; color:var(--muted); }

/* ---------- consumables ---------- */
.a21 .a21-congrid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.a21 .a21-con { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:transform .5s var(--ease-out),box-shadow .5s,border-color .5s; }
.a21 .a21-con:hover { transform:translateY(-8px); box-shadow:var(--sh-lg); border-color:transparent; }
.a21 .a21-con__media { height:190px; display:grid; place-items:center; padding:20px; background:radial-gradient(80% 70% at 50% 60%,#fff,var(--sky-50) 70%,#E8F3FA); }
.a21 .a21-con__media img { max-height:100%; object-fit:contain; mix-blend-mode:multiply; transition:transform .7s var(--ease-out); }
.a21 .a21-con:hover .a21-con__media img { transform:translateY(-8px) scale(1.05); }
.a21 .a21-con__body { padding:18px; display:flex; flex-direction:column; gap:10px; flex:1; align-items:flex-start; }
.a21 .a21-con h3 { font-size:18px; font-weight:600; }
.a21 .a21-con p { font-size:13.5px; color:var(--ink-2); line-height:1.55; }
.a21 .a21-con__models { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.a21 .a21-con__models span { font-size:11.5px; font-weight:500; padding:4px 9px; border-radius:8px; background:var(--bg); color:var(--navy-700); }
.a21 .a21-con .a21-pcard__enq { margin-top:auto; }

/* ---------- enquiry block + form ---------- */
.a21 .a21-enquire-sec { padding-top:clamp(40px,5vw,72px); }
.a21 .a21-enquire { display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(24px,4vw,56px); align-items:center; padding:clamp(28px,4.5vw,56px); border-radius:var(--r-xl);
  background:radial-gradient(700px 400px at 100% 100%,rgba(29,111,224,.55),transparent 60%),linear-gradient(135deg,#0d2340 0%,#0a1a33 45%,#16337a 100%); color:var(--d-txt); box-shadow:0 40px 90px -50px rgba(7,27,48,.9); overflow:hidden; position:relative; }
.a21 .a21-enquire::before { content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px); background-size:22px 22px; -webkit-mask-image:linear-gradient(90deg,#000,transparent 55%); mask-image:linear-gradient(90deg,#000,transparent 55%); pointer-events:none; }
.a21 .a21-enquire__text { position:relative; }
.a21 .a21-enquire h2 { color:#fff; font-size:clamp(26px,3.2vw,40px); margin:14px 0 14px; }
.a21 .a21-enquire h2 em { background:linear-gradient(90deg,#fff,var(--sky-300)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.a21 .a21-enquire p { color:var(--d-mut); font-size:15px; max-width:440px; }
.a21 .a21-enquire__list { display:grid; gap:12px; margin:24px 0 26px; }
.a21 .a21-enquire__list li { display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:#fff; }
.a21 .a21-enquire__list .a21-ico { width:18px; height:18px; color:var(--sky-300); margin-top:3px; }
.a21 .a21-enquire__list a:hover { color:var(--sky-300); }
.a21 .a21-enquire__card { position:relative; background:#fff; color:var(--ink); border-radius:var(--r-lg); padding:clamp(20px,2.6vw,30px); box-shadow:0 30px 60px -30px rgba(0,0,0,.6); }
.a21 .a21-form__grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.a21 .a21-field { display:flex; flex-direction:column; gap:7px; margin:0; color:var(--ink); }
.a21 .a21-field--full { grid-column:1/-1; }
.a21 .a21-field > span { font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--navy-800); }
.a21 .a21-form .a21-field input:not([type=checkbox]):not([type=radio]),
.a21 .a21-form .a21-field select:not([multiple]),
.a21 .a21-form .a21-field textarea:not([hidden]) {
  width:100%; height:46px; padding:0 14px; border:1.5px solid transparent; border-radius:8px; background:#EEF4FB; color:var(--ink);
  font:inherit; font-size:14.5px; line-height:1.4; box-shadow:none; outline:0; transition:border-color .25s,background .25s,box-shadow .25s; margin:0;
}
.a21 .a21-form .a21-field textarea:not([hidden]) { height:auto; min-height:86px; padding:12px 14px; resize:vertical; }
.a21 .a21-form .a21-field select:not([multiple]) { appearance:none; -webkit-appearance:none; padding-right:38px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2742' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:14px; }
.a21 .a21-form .a21-field input:not([type=checkbox]):not([type=radio]):focus,
.a21 .a21-form .a21-field select:not([multiple]):focus,
.a21 .a21-form .a21-field textarea:not([hidden]):focus { border-color:var(--sky); background:#fff; box-shadow:0 0 0 4px rgba(26,166,223,.14); }
.a21 .a21-form .a21-field.is-bad input, .a21 .a21-form .a21-field.is-bad textarea { border-color:var(--red)!important; background:var(--red-100)!important; }
.a21 .a21-form ::placeholder { color:#8A98A8; opacity:1; }
.a21 .a21-form .a21-btn { margin-top:18px; height:52px; font-size:15.5px; }
.a21 .a21-form .a21-btn.is-busy { pointer-events:none; opacity:.75; }
.a21 .a21-form .a21-btn.is-busy .a21-ico { animation:a21spin 1s linear infinite; }
.a21 .a21-form__note { font-size:12.5px; color:var(--muted); text-align:center; margin-top:12px; }
.a21 .a21-form__status { margin-top:12px; font-size:14px; font-weight:500; text-align:center; }
.a21 .a21-form__status:empty { display:none; }
.a21 .a21-form__status.is-ok { color:#0f7a43; background:#e7f8ef; padding:12px; border-radius:8px; }
.a21 .a21-form__status.is-err { color:var(--red-600); background:var(--red-100); padding:12px; border-radius:8px; }
.a21 .a21-form__about { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; padding:10px 14px; border-radius:10px; background:var(--sky-50); border:1px dashed var(--sky-300); font-size:13.5px; }
.a21 .a21-form__about span { color:var(--muted); }
.a21 .a21-form__about b { color:var(--navy-900); }
.a21 .a21-hp { position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden; }

/* ---------- modal ---------- */
.a21 .a21-modal { position:fixed; inset:0; z-index:9999; display:grid; place-items:center; padding:16px; }
.a21 .a21-modal__scrim { position:absolute; inset:0; background:rgba(4,18,33,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; transition:opacity .35s; }
.a21 .a21-modal__panel { position:relative; width:min(640px,100%); max-height:calc(100vh - 32px); overflow:auto; background:#fff; border-radius:var(--r-xl); padding:clamp(22px,3vw,34px); box-shadow:0 50px 100px -40px rgba(0,0,0,.6);
  opacity:0; transform:translateY(26px) scale(.98); transition:opacity .4s var(--ease-out),transform .5s var(--ease-out); }
.a21 .a21-modal.is-open .a21-modal__scrim { opacity:1; }
.a21 .a21-modal.is-open .a21-modal__panel { opacity:1; transform:none; }
.a21 .a21-modal h2 { font-size:clamp(24px,3vw,30px); margin:10px 0 8px; }
.a21 .a21-modal__lead { color:var(--muted); font-size:14.5px; margin-bottom:18px; }
.a21 .a21-modal__close { position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--bg); color:var(--navy-900); transition:transform .3s,background .3s,color .3s; }
.a21 .a21-modal__close:hover { transform:rotate(90deg); background:var(--navy-900); color:#fff; }
/* on body, not html: overflow on html stops body propagating to the viewport and breaks the sticky header */
body.a21-lock { overflow:hidden; }

/* ---------- contact page ---------- */
.a21 .a21-contact-cards { padding-top:0; padding-bottom:0; background:none; }
.a21 .a21-ways { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:-52px; position:relative; z-index:3; }
.a21 .a21-way { display:flex; flex-direction:column; gap:6px; padding:22px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-md); transition:transform .4s var(--ease-out),box-shadow .4s; }
.a21 .a21-way:hover { transform:translateY(-6px); box-shadow:var(--sh-lg); }
.a21 .a21-way__ico { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--sky-100); color:var(--sky-600); margin-bottom:8px; }
.a21 .a21-way b { color:var(--navy-900); }
.a21 .a21-way span:last-child { font-size:14px; color:var(--muted); word-break:break-word; }
.a21 .a21-address { font-size:17px; line-height:1.7; color:var(--navy-900); font-weight:500; margin-bottom:6px; }
.a21 .a21-map { border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--line); box-shadow:var(--sh-md); aspect-ratio:4/3; background:var(--line-2); }
.a21 .a21-map iframe { width:100%; height:100%; border:0; display:block; }

/* ---------- thank you ---------- */
.a21 .a21-thanks { padding:clamp(56px,8vw,110px) 0; background:radial-gradient(800px 400px at 50% 0%,var(--sky-50),#fff 70%); }
.a21 .a21-thanks__card { max-width:640px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; }
.a21 .a21-thanks h1 { font-size:clamp(32px,4.4vw,50px); margin:12px 0 14px; }
.a21 .a21-thanks p { color:var(--ink-2); font-size:16px; }
.a21 .a21-thanks .a21-hero__actions { justify-content:center; }
.a21 .a21-thanks__tick { width:84px; height:84px; margin-bottom:18px; }
.a21 .a21-thanks__tick svg { width:100%; height:100%; fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.a21 .a21-thanks__tick circle { stroke:var(--sky); stroke-dasharray:151; stroke-dashoffset:151; animation:a21draw .9s var(--ease-out) .2s forwards; }
.a21 .a21-thanks__tick path { stroke:var(--sky-600); stroke-dasharray:40; stroke-dashoffset:40; animation:a21draw .5s var(--ease-out) .9s forwards; }
@keyframes a21draw { to { stroke-dashoffset:0; } }

/* ---------- footer (live site's .ds-footer) ---------- */
.a21 .a21-footer { position:relative; overflow:hidden; isolation:isolate; padding:85px 0 0; color:#fff;
  background:radial-gradient(circle at 15% 20%,rgba(29,120,255,.10),transparent 32%),radial-gradient(circle at 85% 30%,rgba(56,189,248,.07),transparent 30%),var(--navy-950); }
.a21 .a21-footer .a21-container { max-width:1320px; position:relative; z-index:2; }
.a21 .a21-footer__top { display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr 1.2fr; gap:48px; padding-bottom:60px; }
.a21 .a21-footer__logo { display:inline-flex; align-items:center; gap:13px; margin-bottom:22px; }
.a21 .a21-footer__logo img { width:54px; height:54px; object-fit:contain; border-radius:10px; }
.a21 .a21-footer__logo span { display:flex; flex-direction:column; line-height:1; }
.a21 .a21-footer__logo b { font-size:21px; font-weight:800; letter-spacing:-.5px; color:#fff; }
.a21 .a21-footer__logo small { margin-top:6px; font-size:9px; font-weight:500; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.52); }
.a21 .a21-footer__brand p { max-width:350px; color:rgba(255,255,255,.62); font-size:13px; line-height:1.9; }
.a21 .a21-social { display:flex; gap:9px; margin-top:24px; }
.a21 .a21-social a { width:40px; height:40px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.11); border-radius:50%; background:rgba(255,255,255,.035); color:#fff; transition:transform .3s,background .3s,border-color .3s; }
.a21 .a21-social a:hover { transform:translateY(-4px); background:#1d78ff; border-color:#1d78ff; color:#fff; }
.a21 .a21-social .a21-ico { width:17px; height:17px; }
.a21 .a21-footer h4 { margin:0 0 22px; font-size:14px; font-weight:600; letter-spacing:.2px; color:#fff; }
.a21 .a21-footer__col li { margin:0 0 11px; }
.a21 .a21-footer__col li a { color:rgba(255,255,255,.58); font-size:12.5px; line-height:1.6; transition:color .25s,padding-left .25s; }
.a21 .a21-footer__col li a:hover { color:#fff; padding-left:5px; }
.a21 .a21-footer address { font-size:12.5px; line-height:1.8; color:rgba(255,255,255,.58); margin-bottom:14px; }
.a21 .a21-footer address b { display:block; color:#fff; font-weight:600; margin-bottom:4px; }
.a21 .a21-footer address a:hover { color:#fff; }
.a21 .a21-footer__bottom { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:22px 0 28px; border-top:1px solid rgba(255,255,255,.10); font-size:12px; color:rgba(255,255,255,.5); }
.a21 .a21-footer__bottom a:hover { color:#fff; }
.a21 .a21-footer__word { position:absolute; left:50%; bottom:-.24em; transform:translateX(-50%); font-size:clamp(90px,19vw,280px); font-weight:800; letter-spacing:-.04em; line-height:1; white-space:nowrap; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.06); z-index:0; pointer-events:none; user-select:none; }
.a21 .a21-totop, .a21 .a21-wa { position:fixed; right:22px; z-index:80; width:50px; height:50px; border-radius:50%; display:grid; place-items:center; color:#fff; transition:opacity .3s,transform .3s var(--ease-out); }
.a21 .a21-totop { bottom:22px; background:var(--navy-800); border:1px solid rgba(255,255,255,.15); opacity:0; transform:translateY(16px); pointer-events:none; }
.a21 .a21-totop.is-on { opacity:1; transform:none; pointer-events:auto; }
.a21 .a21-totop:hover, .a21 .a21-wa:hover { color:#fff; transform:translateY(-3px); }
.a21 .a21-wa { bottom:84px; background:#25D366; box-shadow:0 14px 30px -12px rgba(37,211,102,.8); }
.a21 .a21-wa .a21-ico { width:24px; height:24px; }

/* ---------- reveal (the home page's [data-reveal]) ---------- */
.a21 [data-a21-reveal] { opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease-out),transform .9s var(--ease-out); transition-delay:var(--d,0s); }
.a21 [data-a21-reveal].is-in { opacity:1; transform:none; }
.a21.a21-no-js [data-a21-reveal], .a21.a21-no-js .a21-icard, .a21.a21-no-js .a21-steps li { opacity:1; transform:none; }

/* ---------- embedded shortcodes ---------- */
.a21-embed { display:block; }
.a21-embed > .a21-sec:first-child { padding-top:0; }

/* ---------- responsive ---------- */
@media (max-width:1100px) {
  .a21 .a21-pgrid, .a21 .a21-sgrid, .a21 .a21-congrid { grid-template-columns:repeat(2,1fr); }
  .a21 .a21-igrid, .a21 .a21-igrid--5 { grid-template-columns:repeat(3,1fr); }
  .a21 .a21-cgrid, .a21 .a21-matrix, .a21 .a21-sgrid--3 { grid-template-columns:repeat(2,1fr); }
  .a21 .a21-mini-services, .a21 .a21-stats, .a21 .a21-ways { grid-template-columns:repeat(2,1fr); }
  .a21 .a21-footer__top { grid-template-columns:1fr 1fr 1fr; }
  .a21 .a21-footer__brand { grid-column:1/-1; }
  .a21 .a21-pgrid--carousel .a21-pcard { flex-basis:calc((100% - 20px)/2); }
}
@media (max-width:1024px) {
  .a21 { --header-h:68px; }
  .a21 .a21-burger { display:block; }
  .a21 .a21-nav { position:fixed; top:var(--a21-nav-top,108px); left:0; right:0; bottom:0; background:#fff; padding:16px var(--gutter) 32px; overflow-y:auto; transform:translateX(100%); transition:transform .45s var(--ease-out); z-index:89; display:flex; flex-direction:column; gap:20px; }
  .a21 .a21-nav.is-open { transform:none; box-shadow:var(--sh-lg); }
  .a21 .a21-nav__list { flex-direction:column; align-items:stretch; gap:0; }
  .a21 .a21-nav__list > li { border-bottom:1px solid var(--line-2); }
  .a21 .a21-nav__list > li > a { padding:16px 4px; font-size:17px; justify-content:space-between; width:100%; }
  .a21 .a21-nav__list > li.is-active > a::after { display:none; }
  .a21 .a21-drop, .a21 .a21-drop--mega, .a21 .a21-nav__list--wp .sub-menu { position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; width:auto; padding:0 0 12px; display:none; }
  .a21 .a21-has-drop.is-open > .a21-drop { display:block; transform:none; }
  .a21 .a21-has-drop.is-open .a21-chev { transform:rotate(180deg); }
  .a21 .a21-drop__grid { grid-template-columns:1fr 1fr; }
  .a21 .a21-nav__mobile-cta { display:grid; gap:10px; }
  .a21 .a21-hero--split .a21-hero__in, .a21 .a21-psingle__grid, .a21 .a21-split, .a21 .a21-split--wide, .a21 .a21-enquire { grid-template-columns:1fr; }
  .a21 .a21-hero__stage { justify-self:start; max-width:380px; }
  .a21 .a21-head--split { grid-template-columns:1fr; gap:10px; }
  .a21 .a21-steps { grid-template-columns:1fr 1fr; }
  .a21 .a21-steps::before { display:none; }
  .a21 .a21-quickfacts { position:static; }
}
@media (max-width:782px) { body.admin-bar .a21 .a21-header { top:0; } }
@media (max-width:680px) {
  .a21 .a21-hide-sm { display:none!important; }
  .a21 .a21-topbar__r { display:none; }
  .a21 .a21-pgrid, .a21 .a21-sgrid, .a21 .a21-sgrid--3, .a21 .a21-cgrid, .a21 .a21-matrix, .a21 .a21-mini-services, .a21 .a21-congrid { grid-template-columns:1fr; }
  .a21 .a21-igrid, .a21 .a21-igrid--3, .a21 .a21-igrid--5 { grid-template-columns:repeat(2,1fr); gap:12px; }
  .a21 .a21-icard { aspect-ratio:3/4; }
  .a21 .a21-icard__body { padding:14px 12px; }
  .a21 .a21-icard h3 { font-size:15px; }
  .a21 .a21-icard p { display:none; }
  .a21 .a21-icard__tags span:nth-child(2) { display:none; }
  .a21 .a21-ccard { grid-template-columns:1fr 120px; min-height:170px; }
  .a21 .a21-ccard__media img { max-height:110px; }
  .a21 .a21-pgrid--carousel .a21-pcard { flex-basis:84%; }
  .a21 .a21-arrows { display:none; }
  .a21 .a21-filters__pill { display:none; }
  .a21 .a21-filters button.is-on { background:var(--navy-800); }
  .a21 .a21-form__grid { grid-template-columns:1fr; }
  .a21 .a21-stats, .a21 .a21-ways { grid-template-columns:1fr 1fr; }
  .a21 .a21-steps { grid-template-columns:1fr; }
  .a21 .a21-footer__top { grid-template-columns:1fr 1fr; gap:34px; }
  .a21 .a21-drop__grid { grid-template-columns:1fr; }
  .a21 .a21-compare table { min-width:640px; }
  .a21 .a21-wa { bottom:80px; right:16px; } .a21 .a21-totop { right:16px; bottom:18px; }
}
@media (prefers-reduced-motion:reduce) {
  .a21 *, .a21 *::before, .a21 *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .a21 [data-a21-reveal], .a21 .a21-icard, .a21 .a21-steps li { opacity:1; transform:none; }
}
@media print {
  .a21 .a21-topbar, .a21 .a21-header, .a21 .a21-footer, .a21 .a21-modal, .a21 .a21-wa, .a21 .a21-totop, .a21 .a21-subnav, .a21 .a21-enquire-sec { display:none!important; }
  .a21 [data-a21-reveal], .a21 .a21-icard { opacity:1; transform:none; }
}