/* ---------- Design tokens ---------- */
:root{
  /* brand */
  --blue:   #002EC2;
  --blue-600:#0b3fd6;
  --azure:  #0893D3;
  --cyan:   #0FDEE0;
  --ink:    #221F1F;
  --gray:   #8A9099;

  --grad-brand: linear-gradient(120deg, #002EC2 0%, #0893D3 55%, #0FDEE0 100%);
  --grad-brand-2: linear-gradient(120deg, #0893D3, #0FDEE0);
  --grad-cta: linear-gradient(120deg, #002EC2, #0b73d8 60%, #0FDEE0);

  /* geometry */
  --radius: 16px; --radius-lg: 26px; --radius-sm: 10px; --radius-pill: 100px;
  --container: 1240px; --container-wide: 1400px;
  --gutter: clamp(18px, 4.5vw, 46px);
  --nav-h: 76px;

  /* type */
  --font-display: "Zen Dots", system-ui, sans-serif;
  --font-head: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --shadow-sm: 0 4px 14px -6px rgba(6,24,64,.18);
  --shadow-md: 0 22px 50px -22px rgba(6,24,64,.28);
  --shadow-lg: 0 40px 90px -30px rgba(6,24,64,.35);
  --ring: 0 0 0 4px rgba(8,147,211,.28);
  --dur: .55s; --ease: cubic-bezier(.22,.8,.28,1);
}

/* LIGHT (default) */
:root,:root[data-theme="light"]{
  --bg:      #ffffff;
  --bg-2:    #f4f7fc;
  --bg-3:    #eef3fb;
  --surface: #ffffff;
  --surface-2:#f6f9fe;
  --line:    rgba(8,26,74,.10);
  --line-2:  rgba(8,26,74,.16);
  --text:    #0d1526;
  --heading: #071024;
  --muted:   #4c576b;
  --muted-2: #6c778c;
  --accent:  #0b57d0;   /* accessible blue for links/labels on light */
  --accent-strong: #002EC2;
  --on-brand: #ffffff;
  --hero-bg: radial-gradient(120% 90% at 85% -10%, rgba(15,222,224,.16), transparent 55%),
             radial-gradient(90% 80% at 5% 0%, rgba(0,46,194,.12), transparent 55%);
  --glass: rgba(255,255,255,.72);
  --card-grad: linear-gradient(180deg, #ffffff, #fbfdff);
  --shadow-color: rgba(6,24,64,.14);
  color-scheme: light;
}

/* DARK */
:root[data-theme="dark"]{
  --bg:      #060a15;
  --bg-2:    #0a1020;
  --bg-3:    #0c1426;
  --surface: #0e1526;
  --surface-2:#131c30;
  --line:    rgba(255,255,255,.09);
  --line-2:  rgba(255,255,255,.16);
  --text:    #e9eefb;
  --heading: #ffffff;
  --muted:   #9fb0cc;
  --muted-2: #71809b;
  --accent:  #45e0e2;
  --accent-strong: #29c6e6;
  --on-brand: #05122b;
  --hero-bg: radial-gradient(120% 90% at 85% -10%, rgba(15,222,224,.18), transparent 55%),
             radial-gradient(90% 80% at 5% 0%, rgba(0,46,194,.28), transparent 55%);
  --glass: rgba(10,16,30,.66);
  --card-grad: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  --shadow-color: rgba(0,0,0,.6);
  --shadow-md: 0 22px 50px -22px rgba(0,0,0,.7);
  --shadow-lg: 0 40px 90px -30px rgba(0,0,0,.75);
  color-scheme: dark;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 20px)}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
  transition:background .4s var(--ease), color .4s var(--ease)}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul{list-style:none;padding:0}
input,textarea,select{font:inherit}
:focus-visible{outline:3px solid var(--azure);outline-offset:3px;border-radius:6px}
::selection{background:rgba(8,147,211,.28)}
svg{fill:none}

/* ---------- Layout ---------- */
.container{width:min(100% - 2*var(--gutter), var(--container));margin-inline:auto}
.container-wide{width:min(100% - 2*var(--gutter), var(--container-wide));margin-inline:auto}
.section{padding-block:clamp(26px,3vw,44px);position:relative}
.section-sm{padding-block:clamp(20px,2.2vw,32px);position:relative}
.bg-2{background:var(--bg-2)}

/* ---------- Typography ---------- */
h1,h2,h3,h4,h5{color:var(--heading);line-height:1.12;letter-spacing:-.01em}
.display{font-family:var(--font-display);font-weight:400;line-height:1.06;letter-spacing:-.01em}
.display{font-size:clamp(2.3rem,5.4vw,4.3rem)}
h2.h-section{font-family:var(--font-head);font-weight:800;font-size:clamp(1.85rem,3.6vw,2.9rem);letter-spacing:-.02em}
h3{font-family:var(--font-head);font-weight:800;font-size:clamp(1.2rem,1.9vw,1.45rem);letter-spacing:-.01em}
h4{font-family:var(--font-head);font-weight:700;font-size:1.05rem}
p{color:var(--muted)}
.lead{font-size:clamp(1.05rem,1.5vw,1.28rem);color:var(--text);line-height:1.6}
strong{color:var(--heading)}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.eyebrow::before{content:"";width:24px;height:2px;border-radius:2px;background:var(--grad-brand-2)}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{content:"";width:24px;height:2px;border-radius:2px;background:linear-gradient(270deg,var(--cyan),var(--azure))}

.section-head{max-width:760px}
.section-head.center{margin-inline:auto;text-align:center}
.section-head h2{margin-top:10px}
.section-head p{margin-top:12px;font-size:1.08rem}
/* One section head is a full sentence rather than a title: the 170-character
   "We help enterprises scale..." statement. At section-title size in the 760px
   box it broke to five lines and stood 260px tall, which is what made that band
   read as mostly empty space. Wider measure and a smaller size put it on two
   lines. Scoped to .statement so every other section head keeps its size. */
.section-head.statement{max-width:1160px}
/* A band holding one sentence and one button was 46% padding - 298px of section
   for 160px of content - because it took the same block padding as a section
   carrying 900px of cards. Short bands get their own, tighter value; the
   content-heavy ones keep the full rhythm, where the padding is already only
   12-16% of the band and doing real work. */
.section.is-short{padding-block:clamp(18px,2vw,28px)}
.section-head.statement h2.h-section{font-size:clamp(1.25rem,2.05vw,1.9rem);line-height:1.2}   /* letter-spacing stays at the -.02em h-section already sets: loosening it to      -.01em widened the line enough to tip this back onto three. */

/* ---------- Buttons ---------- */
.btn{--py:14px;--px:26px;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:var(--py) var(--px);border-radius:var(--radius-pill);font-family:var(--font-head);font-weight:700;
  font-size:.95rem;letter-spacing:.01em;white-space:nowrap;position:relative;isolation:isolate;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,color .3s,border-color .3s}
.btn svg{width:18px;height:18px;stroke:currentColor;transition:transform .25s}
.btn:hover svg,.btn:focus-visible svg{transform:translateX(4px)}
/* Pressed and disabled states. Buttons had hover and a global focus ring but
   nothing for :active, so a tap on a touch device - where there is no hover to
   fall back on - gave no acknowledgement between finger-down and the next page
   painting. The press undoes the hover lift rather than inventing a new look,
   and the shorter transition makes it feel immediate.
   :disabled is defined because the markup can carry it; nothing on the site
   currently does. */
.btn:active{transform:translateY(0) scale(.985);transition-duration:.06s}
.btn:active svg{transform:none}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}
/* Same acknowledgement for the other things people tap. */
.icon-btn:active,.card-link:active,.mega-item:active,.nav-links a:active,.mobile-menu a:active{transform:scale(.97);transition-duration:.06s}
.btn-primary{background:var(--grad-cta);color:#fff;box-shadow:0 12px 28px -10px rgba(0,46,194,.55);background-size:150% 150%}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(8,147,211,.6);background-position:100% 0}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-lg{--py:17px;--px:34px;font-size:1rem}
.btn-sm{--py:10px;--px:18px;font-size:.85rem}
.btn-block{width:100%}
.btn-white{background:#fff;color:var(--blue)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(0,0,0,.35)}

/* ---------- Utility bar ---------- */
/* Tap targets. WCAG 2.5.8 asks for 24x24 CSS px on standalone controls; these
   social links were the bare 16px glyph, and the consent checkbox 13px. The
   glyphs stay the size they were - the padding grows the hit area around them,
   so nothing looks different but a thumb has something to land on. Inline links
   inside a paragraph are exempt and are left alone. */
.card-link{min-height:24px}
.footer-legal a,.footer-top .footer-contact a,.breadcrumb a{display:inline-flex;align-items:center;min-height:24px}

/* ---------- Header / Nav ---------- */
.site-header{position:sticky;top:0;z-index:100;background:transparent;
  transition:background .35s,box-shadow .35s,border-color .35s}
.site-header.scrolled{background:var(--glass);backdrop-filter:saturate(160%) blur(16px);
  box-shadow:0 1px 0 var(--line), var(--shadow-sm)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:22px;height:var(--nav-h)}
.brand{display:inline-flex;align-items:center;gap:10px}
.brand img{height:34px;width:auto}
.brand .logo-light{display:block}
.brand .logo-dark{display:none}
:root[data-theme="dark"] .brand .logo-light{display:none}
:root[data-theme="dark"] .brand .logo-dark{display:block}

.nav-links{display:flex;align-items:center;gap:2px}
.nav-links>li{position:relative}
.nav-links>li>a,.nav-trigger{display:inline-flex;align-items:center;gap:6px;padding:10px 15px;border-radius:var(--radius-pill);
  font-weight:600;font-size:.92rem;color:var(--muted);transition:color .2s,background .2s}
.nav-links>li>a:hover,.nav-trigger:hover,.nav-links>li>a.active,.nav-trigger.active{color:var(--heading);background:color-mix(in srgb,var(--azure) 12%,transparent)}
.nav-trigger svg{width:15px;height:15px;stroke:currentColor;transition:transform .25s}
.has-mega:hover .nav-trigger svg{transform:rotate(180deg)}
.nav-cta{display:flex;align-items:center;gap:8px}

/* icon buttons (search, theme) */
.icon-btn{width:42px;height:42px;border-radius:12px;border:1px solid var(--line-2);display:grid;place-items:center;
  color:var(--heading);transition:background .25s,border-color .25s,transform .25s}
.icon-btn:hover{border-color:var(--azure);background:color-mix(in srgb,var(--azure) 10%,transparent);transform:translateY(-1px)}
.icon-btn svg{width:19px;height:19px;stroke:currentColor}
.theme-toggle .moon{display:none}
.theme-toggle .sun{display:block}
:root[data-theme="dark"] .theme-toggle .moon{display:block}
:root[data-theme="dark"] .theme-toggle .sun{display:none}

/* mega menu */
.mega{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(10px);
  width:min(92vw,840px);padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:22px;
  box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transition:opacity .25s,transform .25s;z-index:120;
  display:grid;grid-template-columns:1.6fr 1fr;gap:14px}
/* invisible hover-bridge so moving from the trigger into the panel doesn't drop :hover */
.mega::before{content:"";position:absolute;left:0;right:0;top:-24px;height:26px}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.has-mega:hover .nav-trigger{color:var(--heading);background:color-mix(in srgb,var(--azure) 12%,transparent)}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mega-item{display:flex;gap:12px;padding:12px;border-radius:14px;transition:background .2s}
.mega-item:hover{background:var(--bg-2)}
.mega-ic{flex:0 0 auto;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--azure) 14%,transparent);border:1px solid var(--line)}
.mega-ic svg{width:20px;height:20px;stroke:var(--accent-strong)}
.mega-item .mega-title{display:block;font-family:var(--font-head);font-weight:700;font-size:.92rem;color:var(--heading);margin-bottom:2px}
.mega-item p{font-size:.78rem;color:var(--muted-2);line-height:1.4}
.mega-side{border-radius:var(--radius);padding:22px;background:var(--grad-brand);color:#fff;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.mega-side h4{color:#fff;font-family:var(--font-head);font-weight:800;font-size:1.15rem}
.mega-side p{color:rgba(255,255,255,.85);font-size:.85rem;margin-top:8px}
.mega-side .btn{margin-top:16px}
.mega-side::after{content:"";position:absolute;right:-30px;bottom:-30px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.14)}

/* burger + mobile */
.burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-2);position:relative}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:var(--heading);border-radius:2px;transition:.3s}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:27px}
body.menu-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:130;background:var(--bg);padding:calc(var(--nav-h) + 20px) var(--gutter) 40px;
  transform:translateX(100%);transition:transform .4s var(--ease);overflow-y:auto}
body.menu-open .mobile-menu{transform:none}
.mobile-menu .mm-close{position:absolute;top:20px;right:var(--gutter);width:44px;height:44px;border-radius:12px;border:1px solid var(--line-2);display:grid;place-items:center}
.mobile-menu .mm-close svg{width:20px;height:20px;stroke:var(--heading)}
.mobile-menu a{display:block;padding:14px 4px;font-family:var(--font-head);font-weight:700;font-size:1.2rem;color:var(--heading);border-bottom:1px solid var(--line)}
.mobile-menu a.sub{font-size:.98rem;color:var(--muted);padding-left:16px;font-weight:500}
.mobile-menu .m-label{font-family:var(--font-display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:22px 0 4px}
.mobile-menu .btn{margin-top:26px}

/* scroll progress + preloader + back to top */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad-brand-2);z-index:200;transition:width .1s linear}
#preloader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:grid;place-items:center;transition:opacity .5s,visibility .5s}
#preloader.done{opacity:0;visibility:hidden}
.preloader-inner{display:flex;flex-direction:column;align-items:center;gap:20px}
.preloader-inner img{height:52px;animation:floaty 2s ease-in-out infinite}
.pl-bar{width:150px;height:4px;border-radius:4px;background:var(--line);overflow:hidden}
.pl-bar i{display:block;height:100%;width:40%;border-radius:4px;background:var(--grad-brand-2);animation:plmove 1.1s ease-in-out infinite}
@keyframes plmove{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}
.back-to-top{position:fixed;right:22px;bottom:22px;width:48px;height:48px;border-radius:14px;background:var(--grad-cta);color:#fff;
  display:grid;place-items:center;z-index:90;opacity:0;visibility:hidden;transform:translateY(12px);transition:.3s;box-shadow:var(--shadow-md)}
.back-to-top.show{opacity:1;visibility:visible;transform:none}
.back-to-top svg{width:20px;height:20px;stroke:#fff}
.back-to-top:hover{transform:translateY(-3px)}

.hero-actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px}
.hero-visual{position:relative}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{position:relative;background:var(--card-grad);border:1px solid var(--line);border-radius:var(--radius);padding:22px;
  transition:transform .35s var(--ease),border-color .3s,box-shadow .3s;overflow:hidden}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--grad-brand);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent}
.card:hover::after{opacity:.9}
.card h3{margin-bottom:10px}
.card p{font-size:.95rem}
.card-link{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:700;font-size:.88rem;color:var(--accent)}
.card-link svg{width:16px;height:16px;stroke:currentColor;transition:transform .25s}
.card:hover .card-link svg{transform:translateX(4px)}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.5vw,44px);align-items:center}
.split.reverse .split-media{order:-1}
.media-frame{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg);aspect-ratio:4/3}
.media-frame img{width:100%;height:100%;object-fit:cover}
html.js [data-reveal] .media-frame img,html.js .media-frame[data-reveal] img{transform:scale(1.08);transition:transform 1.1s var(--ease)}
html.js [data-reveal].in .media-frame img,html.js .media-frame[data-reveal].in img{transform:scale(1)}
.media-frame.tall{aspect-ratio:3/4}

/* stat band */
.stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat-band .s b{font-family:var(--font-display);font-size:clamp(2rem,3.6vw,3rem);background:var(--grad-brand);
  -webkit-background-clip:text;background-clip:text;color:transparent;display:block;line-height:1.1}
.stat-band .s span{color:var(--muted);font-size:.92rem}
.stat-band.on-brand .s b{background:linear-gradient(120deg,#fff,#d6f6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-band.on-brand .s span{color:rgba(255,255,255,.8)}
table.compare{width:100%;border-collapse:collapse;min-width:620px}
table.compare th,table.compare td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line)}
table.compare thead th{font-family:var(--font-head);font-weight:800;color:var(--heading);background:var(--bg-2)}
table.compare tbody td svg{width:20px;height:20px;stroke:var(--azure)}
table.compare td.no svg{stroke:var(--muted-2)}
table.compare tr:hover td{background:var(--bg-2)}

.breadcrumb{display:flex;justify-content:center;gap:8px;font-size:.82rem;color:var(--muted-2);margin-bottom:6px}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb span[aria-current]{color:var(--heading)}
.field{margin-bottom:18px}
.field label{display:block;font-size:.85rem;font-weight:700;color:var(--heading);margin-bottom:8px;font-family:var(--font-head)}
.field input,.field textarea,.field select{width:100%;padding:14px 16px;border-radius:12px;background:var(--bg);border:1px solid var(--line-2);color:var(--heading);transition:.2s}
.field textarea{min-height:130px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}

/* ---- Country dialling code picker ----
   Sits in front of the phone input. Built from the same tokens as the rest of
   the form - same radius, border, focus ring and surface - so it reads as one
   control rather than a widget bolted on. The popover borrows the search
   overlay's list treatment for the same reason. */
.phone-row{display:flex;gap:8px;align-items:stretch}
.phone-row input[type=tel]{flex:1 1 auto;min-width:0}
.dial{position:relative;flex:0 0 auto}
.dial-btn{display:flex;align-items:center;gap:6px;height:100%;padding:0 12px;border-radius:12px;
  background:var(--bg);border:1px solid var(--line-2);color:var(--heading);cursor:pointer;
  font-family:var(--font-head);font-weight:700;font-size:.9rem;white-space:nowrap;transition:.2s}
.dial-btn:hover{border-color:var(--azure)}
.dial-btn[aria-expanded="true"]{border-color:var(--azure);box-shadow:var(--ring)}
.dial-btn svg{width:14px;height:14px;opacity:.7}
.dial-iso{font-size:.7rem;letter-spacing:.06em;color:var(--muted-2)}
.dial-cur{font-variant-numeric:tabular-nums}
.dial-pop{position:absolute;z-index:60;top:calc(100% + 6px);left:0;width:min(320px,78vw);
  background:var(--surface);border:1px solid var(--line-2);border-radius:16px;
  box-shadow:var(--shadow-lg);overflow:hidden}
.dial-pop[hidden]{display:none}
.dial-pop:not([hidden]){transform-origin:top left;animation:popIn .16s var(--ease) both}
@keyframes popIn{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.dial-search{padding:10px;border-bottom:1px solid var(--line)}
.dial-search input{width:100%;padding:10px 12px;border-radius:10px;background:var(--bg);
  border:1px solid var(--line-2);color:var(--heading)}
.dial-search input:focus{outline:none;border-color:var(--azure);box-shadow:var(--ring)}
.dial-list{list-style:none;margin:0;padding:6px;max-height:248px;overflow-y:auto}
.dial-list li{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius-sm);
  cursor:pointer;color:var(--text);font-size:.9rem}
.dial-list li:hover,.dial-list li.hi{background:var(--bg-2)}
.dial-list li.is-sel{background:var(--bg-2);font-weight:700;color:var(--heading)}
.dial-list li:focus-visible{outline:2px solid var(--azure);outline-offset:-2px}
.dial-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dial-code{color:var(--muted-2);font-variant-numeric:tabular-nums}
.dial-empty{padding:14px;text-align:center;color:var(--muted-2);font-size:.88rem}
.dial-empty[hidden]{display:none}
/* On the dark contact band the form sits on translucent white, so the control
   has to pick up that treatment rather than the light-page surface. */
@media (max-width:520px){
  .dial-pop{width:min(300px,86vw)}
  .dial-btn{padding:0 9px;font-size:.85rem}}
/* Under ~420px the form card is only ~279px wide, so the two-letter country
   prefix on the button is costing the number the room it needs. The code alone
   still identifies the choice, and the full country name stays in the button's
   aria-label for anyone not reading it visually. */
@media (max-width:420px){
  .dial-btn .dial-iso{display:none}
  .dial-btn{gap:4px;padding:0 8px}}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--azure);box-shadow:var(--ring)}
.field.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-status{margin-top:14px;padding:12px 16px;border-radius:var(--radius-sm);font-size:.9rem;display:none}
.form-status.ok{display:block;background:color-mix(in srgb,var(--azure) 14%,transparent);border:1px solid var(--azure);color:var(--accent-strong)}
.pill{padding:9px 16px;border-radius:var(--radius-pill);border:1px solid var(--line-2);font-size:.86rem;color:var(--text);background:var(--surface);cursor:pointer;transition:.2s}
.pill:hover{background:var(--grad-brand);color:#fff;border-color:transparent}
.text-center{text-align:center}
.mt-s{margin-top:12px}.mt-m{margin-top:16px}.mt-l{margin-top:22px}

/* ---------- Footer ---------- */
.mega-footer{background:var(--ink);color:#c4cfe0;padding-top:clamp(32px,3.6vw,48px)}
:root[data-theme="dark"] .mega-footer{background:#03060e}
/* Quick Links/Company/More-from-Nexaveta hold only short one-line labels;
   giving them the same 1fr share as Expertise (which wraps to two lines)
   and Get in Touch (which carries the address) left visible dead space
   after their last word before the next column's heading. Narrower shares
   here, wider ones where the content actually needs the room, tightens
   that up without changing what anything says. */
/* align-items:start - without it, grid stretches every column to match
   whichever is tallest. The office address wraps to several lines, and a
   long one would otherwise drag empty space under every shorter column. */
.footer-top{display:grid;grid-template-columns:1.4fr 1.2fr .85fr .95fr .85fr 1.35fr;gap:24px;padding-bottom:50px;align-items:start}
.footer-brand img{height:38px;margin-bottom:18px}
.footer-brand p{color:#9fb0cc;font-size:.92rem;max-width:34ch}
.footer-contact{margin-top:18px;display:grid;gap:10px;align-content:start}
/* .footer-contact doubles as the brand column's email wrapper (where the 18px
   top margin separates it from the tagline above) and as the "Get in Touch"
   column itself — there it has no tagline above it, so that same margin was
   pushing its heading below the other columns' headings. Column usage only. */
.footer-col.footer-contact{margin-top:0}
.footer-top .footer-contact a{display:flex;align-items:center;gap:10px;padding:0;color:#c4cfe0;font-size:.9rem}
.footer-top .footer-contact a:hover{color:#fff;transform:none}
.footer-contact svg{width:17px;height:17px;stroke:var(--cyan);flex:0 0 auto}
/* <address> is italic by default; the footer column is not the place to start.
   Aligned to the top so the pin sits against the first line, not the middle of
   a three-line block. */
.footer-address{display:flex;gap:10px;align-items:flex-start;font-style:normal;margin-top:2px}
.footer-address b{display:block;color:#e9eefb;font-family:var(--font-head);font-weight:700;
  font-size:.82rem;margin-bottom:3px}
.footer-address span{color:#9fb0cc;font-size:.86rem;line-height:1.55}
.footer-address svg{margin-top:3px}
.footer-col h2{font-family:var(--font-head);font-weight:800;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.footer-col a{display:block;padding:6px 0;color:#9fb0cc;font-size:.9rem;transition:.2s}
.footer-col a:hover{color:#fff;transform:translateX(3px)}
.footer-social{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;max-width:220px}
.footer-social a{width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;transition:.3s}
/* Sibling properties on their own subdomains. The arrow marks them as leaving
   the site, matching the card-link treatment used elsewhere. A property with no
   URL yet renders as .is-pending text rather than shipping a broken link. */
.footer-subsites a{display:flex;align-items:center;gap:7px}
.footer-subsites a svg{width:13px;height:13px;opacity:.55;transition:transform .25s}
.footer-subsites a:hover svg{transform:translateX(3px);opacity:1}
.footer-col .is-pending{display:block;padding:6px 0;color:#6f7f9a;font-size:.9rem;cursor:default}
.footer-social a:hover{background:var(--grad-brand);border-color:transparent;transform:translateY(-3px)}
.footer-social svg{width:18px;height:18px;fill:#fff;stroke:none}
.footer-legal .ssl{display:inline-flex;align-items:center;gap:6px;color:#c4cfe0;font-size:.8rem}
.footer-legal .ssl svg{width:16px;height:16px;stroke:var(--cyan)}
.footer-legal{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;align-items:center}
.footer-legal a{color:#8595b0;font-size:.82rem}
.footer-legal a:hover{color:#fff}
.footer-copy{text-align:center;padding:18px 0 30px;color:#7788a5;font-size:.82rem}

/* cookie + popups */

.modal{position:fixed;inset:0;z-index:180;display:none;place-items:center;padding:20px;background:rgba(4,10,25,.6);backdrop-filter:blur(4px)}
.modal.show{display:grid;animation:fade .3s}
.modal.show .modal-card{animation:cardIn .34s var(--ease) both}
@keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-card{position:relative;width:min(94vw,520px);background:var(--surface);border:1px solid var(--line-2);border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg)}
.modal-card .m-top{background:var(--grad-brand);padding:30px;text-align:center;color:#fff}
.modal-card .m-top img{height:40px;margin:0 auto 14px}
.modal-card .m-body{padding:28px 30px}
.modal-card h3{margin-bottom:8px}
.modal-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:var(--radius-sm);background:rgba(255,255,255,.2);display:grid;place-items:center;z-index:2}
.modal-close svg{width:18px;height:18px;stroke:#fff}

/* search overlay */
.search-overlay{position:fixed;inset:0;z-index:190;background:rgba(4,10,25,.75);backdrop-filter:blur(8px);display:none;padding-top:14vh}
.search-overlay.show{display:block;animation:fade .25s}
.search-box{width:min(92vw,680px);margin-inline:auto;background:var(--surface);border-radius:18px;border:1px solid var(--line-2);overflow:hidden;box-shadow:var(--shadow-lg)}
.search-box .sb-input{display:flex;align-items:center;gap:12px;padding:20px 24px;border-bottom:1px solid var(--line)}
.search-box .sb-input svg{width:22px;height:22px;stroke:var(--muted-2)}
.search-box input{flex:1;border:0;background:transparent;color:var(--heading);font-size:1.1rem;outline:none}
.search-results{max-height:50vh;overflow-y:auto;padding:10px}
.search-results a{display:block;padding:12px 16px;border-radius:var(--radius-sm);color:var(--text)}
.search-results a:hover,.search-results a.hi{background:var(--bg-2)}
.search-results a b{color:var(--heading);font-family:var(--font-head)}
.search-results a span{display:block;font-size:.82rem;color:var(--muted-2)}
.search-empty{padding:20px 24px;color:var(--muted-2);font-size:.9rem}

/* image placeholders — brand gradient shows if a photo fails/while loading */
.media-frame{
  background:linear-gradient(120deg,#052a86,#0893D3 60%,#0FDEE0)}
img[data-fallback]{color:transparent}

/* reveal */
html.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js [data-reveal].in{opacity:1;transform:none}
html.js [data-reveal][data-delay="1"]{transition-delay:.08s}
html.js [data-reveal][data-delay="2"]{transition-delay:.16s}
html.js [data-reveal][data-delay="3"]{transition-delay:.24s}
html.js [data-reveal][data-delay="4"]{transition-delay:.32s}
html.js [data-reveal][data-delay="5"]{transition-delay:.40s}

/* Split hero: copy left, one large photograph right, rather than text laid
   over a full-bleed background where the image had no presence of its own. */
.hero-split{background:var(--bg);border-bottom:1px solid var(--line);overflow:hidden}
.hero-split-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);
  align-items:center;padding-block:clamp(32px,5vw,72px)}
.hero-copy .display{font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.04;letter-spacing:-.02em;color:var(--heading)}
.hero-copy .hero-lead{margin-top:14px;font-size:clamp(1rem,1.4vw,1.16rem);color:var(--muted);max-width:46ch}
.hero-copy .hero-actions{margin-top:22px}
.hero-visual{position:relative}
.hero-visual img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.hero-visual::after{content:"";position:absolute;inset:0;border-radius:var(--radius-lg);
  background:linear-gradient(210deg,rgba(0,46,194,.16),transparent 55%);pointer-events:none}

/* Inner-page variant of the split hero. Same construction, type scale and
   ground as the home page, one notch down, with the breadcrumb above the
   eyebrow. .no-media is for pages whose only asset will not survive a 4:3
   crop - the copy then runs full width over the brand's radial wash rather
   than sitting beside a mangled photograph. */
.hero-page .hero-split-inner{padding-block:clamp(26px,4vw,52px)}
.hero-page .hero-copy .display{font-size:clamp(1.85rem,3.7vw,2.9rem)}
.hero-page .hero-copy .hero-lead{max-width:52ch}
.hero-page .breadcrumb{justify-content:flex-start;margin-bottom:13px}
.hero-page.no-media{background:var(--hero-bg)}
.hero-page.no-media .hero-split-inner{grid-template-columns:1fr}
.hero-page.no-media .hero-copy{max-width:64ch}
.hero-page.no-media .hero-copy .hero-lead{max-width:60ch}

/* Full-bleed strip for a banner too wide for any frame on the page. */
.page-band{border-top:1px solid var(--line)}
.page-band img{display:block;width:100%;height:auto;aspect-ratio:32/9;object-fit:cover}
@media(max-width:720px){.page-band img{aspect-ratio:21/9}}

/* Editorial two-column row for the intro and leadership blocks; .reverse
   flips the order so consecutive rows alternate. */
.split-ed{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,52px);align-items:center}
.split-ed.reverse .split-media{order:-1}
.split-ed .media-frame img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}

.adv-list,.ed-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.adv-list li,.ed-list li{display:flex;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.adv-list li:first-child,.ed-list li:first-child{border-top:0;padding-top:0}
.adv-list h3,.ed-list h3{font-size:1rem;margin-bottom:3px}
.adv-list p,.ed-list p{font-size:.9rem;color:var(--muted);margin:0}
.adv-ic{flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:var(--bg-2);border:1px solid var(--line)}
.adv-ic svg{width:18px;height:18px;stroke:var(--accent-strong)}
.ed-num{flex:0 0 auto;font-family:var(--font-head);font-weight:800;font-size:.9rem;
  color:var(--accent);min-width:30px;padding-top:2px;font-variant-numeric:tabular-nums}
@media(min-width:880px){
  .adv-list.cols-2{grid-template-columns:1fr 1fr;column-gap:clamp(24px,3vw,44px)}
  /* item 2 opens the second column, so it is a first row too */
  .adv-list.cols-2 li:nth-child(2){border-top:0;padding-top:0}
}

/* Engagement models: alternating editorial rows, spaced apart so consecutive
   rows do not read as one block. */
.model-row + .model-row{margin-top:clamp(34px,5vw,64px)}
.h-model{font-family:var(--font-display);font-weight:400;letter-spacing:-.01em;
  font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.14;color:var(--heading)}

/* Expertise grid: image-led cards, subtle border, restrained hover lift. */
.xgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.xcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);overflow:hidden;transition:transform .3s ease,border-color .3s,box-shadow .3s}
.xcard:hover{transform:translateY(-4px);border-color:var(--azure);box-shadow:var(--shadow-md)}
.xcard-media{display:block;overflow:hidden}
.xcard-media img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;transition:transform .5s ease}
.xcard:hover .xcard-media img{transform:scale(1.04)}
.xcard-body{padding:18px;display:flex;flex-direction:column;gap:7px;flex:1 1 auto}
.xcard-cat{font-family:var(--font-head);font-weight:700;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-2)}
.xcard-body h3{font-size:1.04rem}
.xcard-body p{font-size:.88rem;color:var(--muted);flex:1 1 auto}

/* One dark band to break the page up. */
.band-dark{background:var(--ink);color:#c4cfe0}
.band-dark .h-section,.band-dark h3{color:#fff}
.band-dark .eyebrow{background:rgba(255,255,255,.12);color:var(--sky-200)}
.band-dark p{color:#9fb0cc}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{padding:16px 0;border-top:2px solid rgba(255,255,255,.16)}
.stat-num{font-family:var(--font-head);font-weight:800;font-size:1.5rem;color:var(--cyan);
  display:block;margin-bottom:8px;font-variant-numeric:tabular-nums}
.stat h3{font-size:1rem;margin-bottom:5px}
.stat p{font-size:.86rem}

.case-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.case-card img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}
.case-body{padding:18px;display:grid;gap:7px}
.case-result{font-weight:700;color:var(--heading)}

/* Placeholders look deliberately unfinished - they are a note to the site
   owner, and must never be mistaken for real copy. */
.placeholder-note{margin-top:20px;padding:20px;border:1px dashed var(--line-2);border-radius:var(--radius);
  background:var(--bg-2);max-width:62ch}
.placeholder-note p{color:var(--muted);font-size:.92rem;margin:10px 0 12px}
.ph-tag{display:inline-block;font-family:var(--font-head);font-weight:700;font-size:.64rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);
  border:1px solid var(--line-2);border-radius:4px;padding:3px 8px}

.quote-row{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.quote{margin:0;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.quote blockquote{margin:0;font-size:1.04rem;line-height:1.5;color:var(--heading)}
.quote figcaption{margin-top:12px;display:grid;gap:2px}
.quote figcaption span{font-size:.86rem;color:var(--muted-2)}
.trust-lead{text-align:center;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:14px}
.trust-mark{padding:9px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--muted);font-size:.9rem}

@media (max-width:900px){
  .hero-split-inner,.split-ed{grid-template-columns:1fr}
  .split-ed.reverse .split-media{order:0}
  /* Copy stays first on a phone. Leading with the photograph pushed the
     headline and both CTAs below the fold, which costs more than the image
     gains - the proposition should be the first thing read. */
  .xgrid{grid-template-columns:repeat(2,1fr)}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .quote-row{grid-template-columns:1fr}}
@media (max-width:560px){
  .xgrid{grid-template-columns:1fr}
  .stat-row{grid-template-columns:1fr}
  .hero-visual img{aspect-ratio:16/10}}

/* Consultation dialog. The form is no longer inline on nine pages; it lives
   here and every "Get a Free Consultation" opens it. */
.consult-modal[hidden]{display:none}
.consult-card{width:min(94vw,660px);max-height:92vh;overflow-y:auto;text-align:left}
.consult-card .m-top{padding:22px 26px;text-align:left}
.consult-card .m-top h3{color:#fff;font-size:1.25rem;margin:0}
.consult-card .m-top p{color:rgba(255,255,255,.88);font-size:.92rem;margin-top:6px}
.consult-card .m-body{padding:22px 26px}
.consult-form{display:block}
.consult-form[hidden]{display:none}
.consult-form .field{margin-bottom:14px}
.consult-form .agree{display:flex;gap:9px;align-items:flex-start;font-size:.84rem;color:var(--muted);margin:4px 0 14px;cursor:pointer}
.consult-form .agree span{line-height:1.45}
.consult-form .agree a{color:var(--brand-text);text-decoration:underline}
.consult-form .agree input[type=checkbox]{flex:0 0 auto;width:16px;height:16px;min-width:0;margin-top:2px;accent-color:var(--azure)}
.consult-form .form-status{margin-top:10px;min-height:1.2em;font-size:.88rem}
.consult-form .form-status.error{color:#B3261E}
.consult-form button[disabled]{opacity:.65;cursor:progress}

/* Thank-you panel replaces the form in place rather than navigating away. */
.consult-done{text-align:center;padding:14px 4px 6px}
.consult-done[hidden]{display:none}
.consult-done:not([hidden]){animation:doneIn .34s var(--ease) both}
@keyframes doneIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.consult-done .done-ic{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  margin:0 auto 14px;background:var(--success-bg,#E7F7EE);border:1px solid rgba(36,123,77,.25)}
.consult-done .done-ic svg{width:26px;height:26px;stroke:#247B4D}
.consult-done:not([hidden]) .done-ic{animation:tickIn .4s var(--ease) .12s both}
@keyframes tickIn{from{opacity:0;transform:scale(.6)}60%{transform:scale(1.06)}to{opacity:1;transform:scale(1)}}
.consult-done h3{font-size:1.15rem;margin-bottom:6px}
.consult-done p{color:var(--muted);margin-bottom:16px}
.consult-done .done-note{font-size:.86rem;line-height:1.45;background:var(--bg);
  border:1px solid var(--line-2);border-radius:12px;padding:11px 13px;text-align:left}
.consult-done .done-note[hidden]{display:none}

/* Closing CTA band - an invitation now that the form has moved. */
.cb-cta{align-items:center}
.cb-actions{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.btn-ghost-light{background:transparent;border:2px solid rgba(255,255,255,.5);color:#fff}
.btn-ghost-light:hover{background:rgba(255,255,255,.12);border-color:#fff}

@media (max-width:640px){
  .consult-card .m-body,.consult-card .m-top{padding:18px}
  .cb-actions{width:100%}
  .cb-actions .btn{width:100%;justify-content:center}}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .hero-visual{max-width:460px;margin-inline:auto}
  .stat-band{grid-template-columns:repeat(2,1fr);row-gap:34px}
  .footer-top{grid-template-columns:1fr 1fr 1fr;gap:30px}
  .footer-brand{grid-column:1/-1}}
@media (max-width:900px){
  .nav-links,.nav-cta .btn-desktop{display:none}
  .burger{display:block}
  .split{grid-template-columns:1fr}
  .split.reverse .split-media{order:0}
  .grid-3{grid-template-columns:1fr 1fr}
  .footer-top{grid-template-columns:1fr 1fr}
  .mega{display:none}}
@media (max-width:560px){
  .grid-3{grid-template-columns:1fr}
  .stat-band{grid-template-columns:1fr 1fr}
  .footer-top{grid-template-columns:1fr}
  .field.row{grid-template-columns:1fr}
  .hero-actions .btn,.cb-actions .btn{width:100%}
  .back-to-top{right:16px;bottom:16px}}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto}
  html.js [data-reveal]{opacity:1;transform:none}}

/* Numbered "why choose" row */
.why-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.why-num{display:flex;gap:14px;align-items:flex-start;padding:17px;border-radius:14px;border:1px solid var(--line);background:var(--surface);transition:.3s}
/* <b> defaults to bold, but Zen Dots ships a single 400 weight, so the browser
   was drawing these step numerals with a synthesised faux-bold - thicker, and
   not the shape the typeface actually has. Pinned to the weight that exists. */
.why-num:hover{border-color:var(--azure);transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.why-num b{font-family:var(--font-display);font-weight:400;font-size:1.4rem;line-height:1;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;flex:0 0 auto}
.why-num span{font-family:var(--font-head);font-weight:700;color:var(--heading);font-size:1.02rem}

/* Contact "Got a project?" block */
.contact-block{position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:clamp(30px,5vw,60px);background:var(--grad-brand);color:#fff}
.contact-block::after{content:"";position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.1)}
.contact-block .cb-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,52px);align-items:start}
.contact-block h2{color:#fff;font-family:var(--font-display);font-weight:400;font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.12}
.contact-block .cb-info{margin-top:20px;display:grid;gap:12px}
.contact-block .cb-info a{color:#fff;display:flex;align-items:center;gap:10px;font-size:1.02rem}
.contact-block .cb-info svg{width:20px;height:20px;stroke:var(--cyan)}
/* Office block in the closing band's right-hand column, under the buttons.
   .cb-actions is a flex column aligned to flex-start, so this has to stretch
   itself or the rule above it would only run as wide as the text. <address>
   is italic by default - reset, or it would be the one italic block on the
   site. */
.contact-block .cb-address{align-self:stretch;margin-top:26px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.28);display:flex;gap:12px;
  font-style:normal;max-width:42ch}
.contact-block .cb-address svg{width:20px;height:20px;stroke:var(--cyan);flex:0 0 auto;margin-top:3px}
.contact-block .cb-address b{display:block;font-family:var(--font-head);font-weight:700;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#bfe9ff;margin-bottom:6px}
.contact-block .cb-address span{color:rgba(255,255,255,.92);font-size:.95rem;line-height:1.6}
/* Same slot and same rule as the office block, for the pages that are selling
   rather than being visited for an address. */
.contact-block .cb-points{align-self:stretch;list-style:none;margin:26px 0 0;padding:22px 0 0;
  border-top:1px solid rgba(255,255,255,.28);display:grid;gap:11px}
.contact-block .cb-points li{display:flex;gap:11px;align-items:flex-start}
.contact-block .cb-points svg{width:18px;height:18px;stroke:var(--cyan);flex:0 0 auto;margin-top:3px}
.contact-block .cb-points span{color:rgba(255,255,255,.92);font-size:.94rem;line-height:1.5}

/* ---------- Contact page refinements (scoped to contact.html only) ---------- */

.contact-page .contact-block{box-shadow:var(--shadow-lg)}
.contact-page .contact-block::after{width:280px;height:280px}

/* Solution/feature two-col image rows reuse .split/.media-frame */
/* Careers job card */
.job-detail{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:clamp(24px,4vw,38px)}
.job-detail .job-tags{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 20px}
.job-detail h4{margin:20px 0 8px;font-size:1.1rem}
.job-detail ul{display:grid;gap:8px;margin-left:2px}
.job-detail ul li{display:flex;gap:10px;color:var(--muted);font-size:.95rem}
.job-detail ul li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--azure);margin-top:8px;flex:0 0 auto}

@media (max-width:900px){
  .why-nums{grid-template-columns:1fr 1fr}
  .contact-block .cb-grid{grid-template-columns:1fr}}
@media (max-width:560px){
  .why-nums{grid-template-columns:1fr}}