/* ME design system: white base, deep navy and light blue, one sans-serif family.
   Shared by every page: header, menus, search, footer, home sections and the app pages. */
:root {
  color-scheme: light;
  --logo: #3779F8;
  --navy: #0E2A5C;
  --navy-deep: #081A3D;
  --blue: #1966C4;
  --blue-dark: #1558A8;
  --sky: #4FB3F0;
  --ice: #EAF4FD;
  --ice-2: #D7EAFB;
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --tint: #F4F8FC;
  --ink: #0F1A2E;
  --muted: #51607A;
  --rule: #D6E0EC;
  --callout: #B5420A;
  --ok: #17693F;
  --warn: #8A5A00;
  --bad: #B3261E;
  --accent: var(--blue);
  --r: 14px;
  --r-sm: 8px;
  --shadow: 0 12px 32px rgba(14, 42, 92, .10);
  --display: "Plus Jakarta Sans", "IBM Plex Sans Arabic", "Segoe UI", Arial, sans-serif;
  --body: "Plus Jakarta Sans", "IBM Plex Sans Arabic", "Segoe UI", Arial, sans-serif;
  --header-h: 72px;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.65 var(--body); }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.wrap {
  width: 100%; max-width: 82rem; margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) {
  .wrap {
    padding-left: max(32px, env(safe-area-inset-left, 0px));
    padding-right: max(32px, env(safe-area-inset-right, 0px));
  }
}
.skip { position: absolute; left: 16px; top: 0; transform: translateY(-200%); background: #fff; color: var(--ink); padding: .5rem 1rem; z-index: 60; border-radius: var(--r-sm); }
.skip:focus { transform: translateY(8px); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.25rem; border: 1.5px solid var(--rule); border-radius: 999px; background: #fff; color: var(--ink);
  font: 700 1rem/1.2 var(--body); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { border-color: var(--blue); color: var(--blue); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-primary, .btn-solid { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-primary:hover, .btn-solid:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; }
.btn-light { background: #fff; border-color: #fff; color: var(--navy); }
.btn-light:hover { background: var(--ice); border-color: var(--ice); color: var(--navy); }
.btn-outline-light { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
.btn-outline-light:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.btn-ghost { background: transparent; }
.btn-sm, .btn-small { padding: .45rem .9rem; font-size: .9375rem; }
.btn[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.text-link { font-weight: 700; color: var(--blue); text-decoration: none; display: inline-flex; gap: .35rem; align-items: center; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.text-link::after { content: "→"; }
[dir="rtl"] .text-link::after { content: "←"; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid var(--rule); }
.header-bar { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h); }
.logo { display: flex; align-items: center; gap: .8rem; color: var(--logo); text-decoration: none; flex: none; }
.logo .logo-mark { flex: none; height: 2.1rem; width: auto; }
.logo small { display: block; max-width: 9.5rem; padding-left: .8rem; border-left: 1.5px solid var(--rule); font-size: .78rem; line-height: 1.25; color: var(--muted); font-weight: 600; }
[dir="rtl"] .logo small { padding-left: 0; border-left: 0; padding-right: .8rem; border-right: 1.5px solid var(--rule); }
.main-nav { flex: 1; min-width: 0; }
.nav-list { display: flex; align-items: center; gap: .25rem; }
.nav-btn, .nav-link {
  display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .8rem; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink); font: 600 1rem/1.2 var(--body); text-decoration: none; cursor: pointer;
}
.nav-btn::after { content: ""; width: .45rem; height: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.nav-btn[aria-expanded="true"]::after { transform: translateY(1px) rotate(225deg); }
.nav-btn:hover, .nav-link:hover, .nav-btn[aria-expanded="true"] { background: var(--ice); color: var(--navy); }
.header-tools { display: flex; align-items: center; gap: .5rem; flex: none; }
.icon-btn { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 0; border-radius: 50%; background: transparent; color: var(--navy); cursor: pointer; }
.icon-btn:hover { background: var(--ice); }
.lang { font-weight: 700; color: var(--navy); text-decoration: none; padding: .45rem .7rem; border-radius: var(--r-sm); }
.lang:hover { background: var(--ice); }
.menu-btn { display: none; }

/* Mega menus */
.has-mega { position: static; }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--rule); box-shadow: 0 24px 40px rgba(8, 26, 61, .14); display: none; }
.has-mega.open > .mega { display: block; }
.mega-inner { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: 2.5rem; padding-block: 2rem 2.25rem; }
.mega-intro { border-right: 1px solid var(--rule); padding-right: 2rem; }
[dir="rtl"] .mega-intro { border-right: 0; border-left: 1px solid var(--rule); padding-right: 0; padding-left: 2rem; }
.mega-title { font: 800 1.5rem/1.2 var(--display); color: var(--navy); }
.mega-intro p + p { margin-top: .6rem; color: var(--muted); font-size: .9375rem; }
.mega-intro .text-link { margin-top: 1rem; }
.mega-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .5rem 1.25rem; }
.mega-links a { display: grid; gap: .1rem; padding: .7rem .85rem; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; }
.mega-links a:hover { background: var(--ice); }
.mega-links b { font-weight: 700; color: var(--navy); }
.mega-links span { font-size: .9rem; color: var(--muted); line-height: 1.4; }

@media (max-width: 1100px) {
  .menu-btn { display: inline-grid; }
  .header-cta { display: none; }
  .main-nav { position: fixed; inset: var(--header-h) 0 0 0; background: #fff; overflow-y: auto; display: none; border-top: 1px solid var(--rule); padding: .5rem max(16px, env(safe-area-inset-right, 0px)) 2rem max(16px, env(safe-area-inset-left, 0px)); }
  .main-nav.open { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li { border-bottom: 1px solid var(--rule); }
  .nav-btn, .nav-link { width: 100%; justify-content: space-between; padding: 1rem .25rem; font-size: 1.0625rem; border-radius: 0; }
  .nav-btn:hover, .nav-link:hover, .nav-btn[aria-expanded="true"] { background: transparent; }
  .mega { position: static; box-shadow: none; border-top: 0; }
  .mega-inner { grid-template-columns: 1fr; gap: .5rem; padding: 0 0 1rem; }
  .mega-intro { display: none; }
  .mega-links { grid-template-columns: 1fr; }
  .header-bar { justify-content: space-between; }
  .main-nav.open ~ .header-tools .menu-btn { background: var(--ice); }
  .mobile-cta { display: block; margin-top: 1.25rem; }
}
.mobile-cta { display: none; }
@media (max-width: 420px) { .logo small { display: none; } }

/* Search */
.search { position: fixed; inset: 0; z-index: 70; background: rgba(8, 26, 61, .55); display: grid; align-items: start; padding-top: 10vh; }
.search-panel { background: #fff; border-radius: var(--r); box-shadow: var(--shadow); padding: 1.25rem; max-width: 44rem; width: calc(100% - 32px); margin-inline: auto; }
.search-row { display: flex; gap: .5rem; align-items: center; }
.search-row input { flex: 1; min-width: 0; padding: .8rem 1rem; font: 500 1.0625rem var(--body); border: 1.5px solid var(--rule); border-radius: 999px; }
.search-row input:focus { outline: none; border-color: var(--blue); }
.search-results { margin-top: .75rem; display: grid; gap: .25rem; max-height: 60vh; overflow-y: auto; }
.search-results a { display: grid; padding: .6rem .8rem; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; }
.search-results a:hover, .search-results a:focus { background: var(--ice); outline: none; }
.search-results b { color: var(--navy); }
.search-results span { font-size: .9rem; color: var(--muted); }
.search-empty { padding: .6rem .8rem; color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer { border-top: 4px solid transparent; border-image: linear-gradient(90deg, var(--logo) 0%, var(--sky) 55%, #7EE0CB 100%) 1; background: var(--navy-deep); color: #C9D6EA; margin-top: 0; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-grid { display: grid; gap: 2rem; padding-block: 3.5rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.footer-brand { grid-column: span 2; max-width: 24rem; }
@media (max-width: 600px) { .footer-brand { grid-column: auto; } }
.footer-brand .logo { color: #fff; }
.footer-brand .logo small { color: #9FB3D1; border-color: rgba(255, 255, 255, .25); }
.footer-brand p { margin-top: 1rem; font-size: .9375rem; }
.footer-h { color: #fff; font-weight: 700; margin-bottom: .75rem; }
.footer-grid ul { display: grid; gap: .45rem; font-size: .9375rem; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-block: 1.25rem 1.75rem; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .875rem; color: #9FB3D1; }
.page-note { background: var(--tint); border-top: 1px solid var(--rule); padding-block: 1rem; font-size: .9375rem; color: var(--muted); }

/* ---------- Page sections ---------- */
.section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section.ice { background: var(--ice); }
.section.navy { background: var(--navy); color: #fff; }
.section-head { display: grid; gap: .75rem; margin-bottom: 2.5rem; max-width: 48rem; }
.section-head.split { max-width: none; }
@media (min-width: 900px) { .section-head.split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: end; } }
.kicker { font-weight: 700; color: var(--blue); font-size: .9375rem; }
.section.navy .kicker { color: var(--sky); }
.section-head h2, .page-hero h1 { font: 800 clamp(2rem, 4vw, 3rem)/1.12 var(--display); color: var(--navy); text-wrap: balance; letter-spacing: -.015em; }
.section.navy .section-head h2 { color: #fff; }
.section-head p { color: var(--muted); font-size: 1.125rem; }
.section.navy .section-head p { color: #C9D6EA; }
[dir="rtl"] .section-head h2, [dir="rtl"] .page-hero h1, [dir="rtl"] .hero h1 { letter-spacing: 0; }

/* Home hero: light, centred, with the help box */
.hero { position: relative; isolation: isolate; color: var(--ink); background: linear-gradient(180deg, #D9ECFC 0%, #EAF4FD 52%, #FFFFFF 100%); overflow: hidden; text-align: center; }
.hero::before { content: ""; position: absolute; inset: auto 0 0 0; height: 70%; z-index: -1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 420' preserveAspectRatio='none' fill='none' stroke='%2399C3EE' stroke-width='1.2' opacity='.75'%3E%3Cpath d='M0 120 L40 134 L80 147 L120 157 L160 163 L200 165 L240 164 L280 159 L320 153 L360 147 L400 141 L440 137 L480 135 L520 135 L560 136 L600 137 L640 138 L680 137 L720 133 L760 127 L800 117 L840 106 L880 94 L920 82 L960 72 L1000 66 L1040 64 L1080 66 L1120 73 L1160 82 L1200 94 L1240 106 L1280 117 L1320 126 L1360 132 L1400 135 L1440 136 L1480 135 L1520 134 L1560 133 L1600 134'/%3E%3Cpath d='M0 184 L40 194 L80 199 L120 200 L160 198 L200 192 L240 185 L280 177 L320 170 L360 165 L400 162 L440 160 L480 160 L520 160 L560 159 L600 156 L640 151 L680 142 L720 132 L760 120 L800 108 L840 97 L880 88 L920 84 L960 84 L1000 88 L1040 97 L1080 109 L1120 122 L1160 136 L1200 148 L1240 158 L1280 165 L1320 169 L1360 170 L1400 170 L1440 169 L1480 168 L1520 169 L1560 172 L1600 176'/%3E%3Cpath d='M0 236 L40 235 L80 231 L120 224 L160 215 L200 206 L240 197 L280 191 L320 186 L360 183 L400 181 L440 179 L480 177 L520 172 L560 166 L600 157 L640 145 L680 134 L720 122 L760 112 L800 106 L840 103 L880 106 L920 113 L960 124 L1000 138 L1040 154 L1080 169 L1120 182 L1160 193 L1200 200 L1240 205 L1280 206 L1320 206 L1360 205 L1400 204 L1440 205 L1480 207 L1520 210 L1560 214 L1600 218'/%3E%3Cpath d='M0 263 L40 253 L80 243 L120 231 L160 221 L200 213 L240 207 L280 203 L320 199 L360 196 L400 192 L440 187 L480 179 L520 170 L560 159 L600 147 L640 137 L680 129 L720 125 L760 125 L800 130 L840 140 L880 154 L920 171 L960 188 L1000 205 L1040 219 L1080 230 L1120 238 L1160 242 L1200 243 L1240 242 L1280 241 L1320 239 L1360 239 L1400 240 L1440 242 L1480 244 L1520 246 L1560 246 L1600 243'/%3E%3Cpath d='M0 267 L40 254 L80 242 L120 232 L160 225 L200 219 L240 215 L280 210 L320 206 L360 199 L400 192 L440 182 L480 172 L520 162 L560 154 L600 148 L640 147 L680 150 L720 158 L760 171 L800 188 L840 207 L880 226 L920 243 L960 258 L1000 269 L1040 277 L1080 280 L1120 280 L1160 279 L1200 276 L1240 273 L1280 271 L1320 271 L1360 271 L1400 271 L1440 270 L1480 268 L1520 262 L1560 254 L1600 241'/%3E%3Cpath d='M0 260 L40 249 L80 240 L120 233 L160 228 L200 223 L240 218 L280 212 L320 204 L360 196 L400 187 L440 179 L480 173 L520 170 L560 172 L600 178 L640 190 L680 206 L720 225 L760 246 L800 266 L840 284 L880 299 L920 310 L960 316 L1000 318 L1040 317 L1080 314 L1120 309 L1160 305 L1200 302 L1240 299 L1280 297 L1320 295 L1360 291 L1400 286 L1440 278 L1480 267 L1520 253 L1560 236 L1600 218'/%3E%3Cpath d='M0 252 L40 245 L80 239 L120 235 L160 230 L200 224 L240 217 L280 210 L320 203 L360 198 L400 195 L440 195 L480 201 L520 211 L560 226 L600 244 L640 266 L680 288 L720 308 L760 327 L800 341 L840 351 L880 355 L920 356 L960 353 L1000 347 L1040 341 L1080 334 L1120 328 L1160 323 L1200 319 L1240 314 L1280 309 L1320 301 L1360 291 L1400 278 L1440 263 L1480 245 L1520 227 L1560 209 L1600 195'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; pointer-events: none; }
.hero-inner { position: relative; padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 3.75rem); max-width: 82rem; }
.hero-copy { max-width: 54rem; margin-inline: auto; }
.hero h1 { font: 800 clamp(2.3rem, 5vw, 4rem)/1.08 var(--display); letter-spacing: -.02em; text-wrap: balance; color: var(--navy); }
.hero h1 em { font-style: normal; color: var(--blue); }
.hero p.lead { margin: 1.1rem auto 0; font-size: 1.1875rem; color: var(--muted); max-width: 44rem; }
.help { margin: 2rem auto 0; background: #fff; border: 1px solid var(--ice-2); border-radius: 999px; padding: .4rem .4rem .4rem 1.25rem; display: flex; align-items: center; gap: .75rem; max-width: 40rem; box-shadow: 0 14px 36px rgba(14, 42, 92, .12); text-align: start; }
[dir="rtl"] .help { padding: .4rem 1.25rem .4rem .4rem; }
.help svg { flex: none; color: var(--blue); }
.help input { flex: 1; min-width: 0; border: 0; font: 500 1.0625rem var(--body); color: var(--ink); background: transparent; padding: .6rem 0; }
.help input:focus { outline: none; }
.help:focus-within { box-shadow: 0 0 0 3px var(--sky), 0 14px 36px rgba(14, 42, 92, .12); }
.help-note { margin-top: .75rem; font-size: .9rem; color: var(--muted); min-height: 1.4em; }
.hero-links { display: flex; flex-wrap: wrap; justify-content: center; row-gap: .4rem; }
.hero-links li + li { border-inline-start: 1px solid #A9C2DE; }
.hero-links a { display: block; padding: .1rem .95rem; color: var(--navy); font-size: .9375rem; font-weight: 600; text-decoration: none; }
.hero-links a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 560px) { .hero-links { gap: .5rem; } .hero-links li + li { border: 0; } .hero-links a { padding: .3rem .8rem; border: 1px solid #A9C2DE; border-radius: 999px; background: rgba(255, 255, 255, .6); } }
@media (max-width: 560px) {
  .help { border-radius: var(--r); flex-wrap: wrap; padding: .75rem; }
  .help input { flex-basis: 70%; }
  .help .btn { width: 100%; }
}

/* Spotlight: a stacked navy card that turns through a few highlights */
.btn-cyan { background: var(--sky); border-color: var(--sky); color: var(--navy-deep); }
.btn-cyan:hover { background: #7CC8F5; border-color: #7CC8F5; color: var(--navy-deep); }
.spotlight { position: relative; isolation: isolate; padding-top: 2.6rem; }
.spot { position: relative; background: var(--navy); color: #fff; border-radius: 20px; box-shadow: 0 26px 60px rgba(14, 42, 92, .28); }
.spot::before, .spot::after { content: ""; position: absolute; z-index: -1; border-radius: 18px 18px 0 0; height: 3rem; }
.spot::before { inset-inline: 3.5%; top: -1.15rem; background: #7F9CC6; opacity: .55; }
.spot::after { inset-inline: 7%; top: -2.3rem; background: #B6CAE4; opacity: .55; }
.spot-track { display: grid; }
.spot-slide { grid-area: 1 / 1; display: grid; align-items: stretch; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.spot-slide.is-active { opacity: 1; visibility: visible; transition: opacity .7s ease; }
.spot-copy { padding: clamp(1.75rem, 4vw, 3.25rem) clamp(1.5rem, 4vw, 3.25rem) 7.5rem; display: grid; align-content: center; gap: .9rem; }
.spot-kicker { font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sky); }
.spot-copy h3 { font: 800 clamp(1.6rem, 3vw, 2.35rem)/1.15 var(--display); text-wrap: balance; }
.spot-copy p { color: #C9D6EA; max-width: 34rem; }
.spot-copy .btn { justify-self: start; margin-top: .4rem; }
.spot-img { position: relative; min-height: 15rem; overflow: hidden; order: -1; border-radius: 20px 20px 0 0; }
.spot-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spot-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--navy) 0%, rgba(14, 42, 92, 0) 40%); }
.spot-foot { position: absolute; inset-inline: clamp(1.5rem, 4vw, 3.25rem); bottom: 1.35rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1.5rem; }
.spot-tag { font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.spot-tag b { color: var(--sky); }
[dir="rtl"] .spot-tag, [dir="rtl"] .spot-kicker { letter-spacing: 0; }
.spot-ctrl { display: flex; align-items: center; gap: .9rem; }
.spot-dots { display: flex; gap: .45rem; }
.spot-dot { width: 2.1rem; height: 1.6rem; border: 0; background: none; padding: 0; cursor: pointer; display: grid; align-items: center; }
.spot-dot::before { content: ""; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .4); transition: background .3s; }
.spot-dot[aria-current="true"]::before { background: var(--sky); }
.spot-dot:hover::before { background: #fff; }
.spot-pause { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .55); background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; }
.spot-pause:hover { border-color: #fff; background: rgba(255, 255, 255, .12); }
@media (min-width: 860px) {
  .spot-slide { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .spot-copy { padding-bottom: 6.5rem; min-height: 26rem; }
  .spot-img { order: 0; border-radius: 0; border-start-end-radius: 20px; border-end-end-radius: 20px; }
  .spot-img::after { background: linear-gradient(90deg, var(--navy) 0%, rgba(14, 42, 92, 0) 35%); }
  [dir="rtl"] .spot-img::after { background: linear-gradient(270deg, var(--navy) 0%, rgba(14, 42, 92, 0) 35%); }
}
@media (prefers-reduced-motion: reduce) { .spot-slide, .spot-slide.is-active { transition: none; } }

/* Industry panels: the open panel widens and shows its text */
.ind-panels { display: grid; gap: 1rem; }
.ind-panel { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 22rem; padding: 1.5rem; border-radius: var(--r); overflow: hidden; color: #fff; text-decoration: none; background: var(--navy); }
.ind-panel img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.ind-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 26, 61, .82) 0%, rgba(8, 26, 61, .25) 38%, rgba(8, 26, 61, .35) 60%, rgba(8, 26, 61, .92) 100%); transition: background .5s; }
.ind-panel h3 { font: 800 1.45rem/1.2 var(--display); text-wrap: balance; }
.ind-panel p { margin-top: auto; padding-top: 1rem; color: #D5E2F4; font-size: .98rem; line-height: 1.55; max-width: 24rem; }
.ind-panel .btn { align-self: flex-start; margin-top: 1rem; }
.ind-panel:hover img { transform: scale(1.04); }
@media (min-width: 900px) {
  .ind-panels { display: flex; height: 31rem; }
  .ind-panel { flex: 1 1 0; min-width: 0; min-height: 0; padding: 1.6rem; transition: flex-grow .55s ease; }
  .ind-panel.is-open { flex-grow: 2.9; }
  .ind-panel p, .ind-panel .btn { opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
  .ind-panel.is-open p, .ind-panel.is-open .btn { opacity: 1; transform: none; transition: opacity .4s .25s, transform .4s .25s; }
  .ind-panel p { min-width: 18rem; }
  .ind-panel.is-open::after { background: linear-gradient(90deg, rgba(14, 42, 92, .95) 0%, rgba(14, 42, 92, .7) 38%, rgba(14, 42, 92, 0) 75%); }
  [dir="rtl"] .ind-panel.is-open::after { background: linear-gradient(270deg, rgba(14, 42, 92, .95) 0%, rgba(14, 42, 92, .7) 38%, rgba(14, 42, 92, 0) 75%); }
}
@media (prefers-reduced-motion: reduce) { .ind-panel, .ind-panel img, .ind-panel p, .ind-panel .btn { transition: none !important; } .ind-panel:hover img { transform: none; } }

/* Stats strip over drawn lines */
.stats-band { position: relative; isolation: isolate; overflow: hidden; }
.stats-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 420' preserveAspectRatio='none' fill='none' stroke='%2399C3EE' stroke-width='1.2' opacity='.75'%3E%3Cpath d='M0 120 L40 134 L80 147 L120 157 L160 163 L200 165 L240 164 L280 159 L320 153 L360 147 L400 141 L440 137 L480 135 L520 135 L560 136 L600 137 L640 138 L680 137 L720 133 L760 127 L800 117 L840 106 L880 94 L920 82 L960 72 L1000 66 L1040 64 L1080 66 L1120 73 L1160 82 L1200 94 L1240 106 L1280 117 L1320 126 L1360 132 L1400 135 L1440 136 L1480 135 L1520 134 L1560 133 L1600 134'/%3E%3Cpath d='M0 184 L40 194 L80 199 L120 200 L160 198 L200 192 L240 185 L280 177 L320 170 L360 165 L400 162 L440 160 L480 160 L520 160 L560 159 L600 156 L640 151 L680 142 L720 132 L760 120 L800 108 L840 97 L880 88 L920 84 L960 84 L1000 88 L1040 97 L1080 109 L1120 122 L1160 136 L1200 148 L1240 158 L1280 165 L1320 169 L1360 170 L1400 170 L1440 169 L1480 168 L1520 169 L1560 172 L1600 176'/%3E%3Cpath d='M0 236 L40 235 L80 231 L120 224 L160 215 L200 206 L240 197 L280 191 L320 186 L360 183 L400 181 L440 179 L480 177 L520 172 L560 166 L600 157 L640 145 L680 134 L720 122 L760 112 L800 106 L840 103 L880 106 L920 113 L960 124 L1000 138 L1040 154 L1080 169 L1120 182 L1160 193 L1200 200 L1240 205 L1280 206 L1320 206 L1360 205 L1400 204 L1440 205 L1480 207 L1520 210 L1560 214 L1600 218'/%3E%3Cpath d='M0 263 L40 253 L80 243 L120 231 L160 221 L200 213 L240 207 L280 203 L320 199 L360 196 L400 192 L440 187 L480 179 L520 170 L560 159 L600 147 L640 137 L680 129 L720 125 L760 125 L800 130 L840 140 L880 154 L920 171 L960 188 L1000 205 L1040 219 L1080 230 L1120 238 L1160 242 L1200 243 L1240 242 L1280 241 L1320 239 L1360 239 L1400 240 L1440 242 L1480 244 L1520 246 L1560 246 L1600 243'/%3E%3Cpath d='M0 267 L40 254 L80 242 L120 232 L160 225 L200 219 L240 215 L280 210 L320 206 L360 199 L400 192 L440 182 L480 172 L520 162 L560 154 L600 148 L640 147 L680 150 L720 158 L760 171 L800 188 L840 207 L880 226 L920 243 L960 258 L1000 269 L1040 277 L1080 280 L1120 280 L1160 279 L1200 276 L1240 273 L1280 271 L1320 271 L1360 271 L1400 271 L1440 270 L1480 268 L1520 262 L1560 254 L1600 241'/%3E%3Cpath d='M0 260 L40 249 L80 240 L120 233 L160 228 L200 223 L240 218 L280 212 L320 204 L360 196 L400 187 L440 179 L480 173 L520 170 L560 172 L600 178 L640 190 L680 206 L720 225 L760 246 L800 266 L840 284 L880 299 L920 310 L960 316 L1000 318 L1040 317 L1080 314 L1120 309 L1160 305 L1200 302 L1240 299 L1280 297 L1320 295 L1360 291 L1400 286 L1440 278 L1480 267 L1520 253 L1560 236 L1600 218'/%3E%3Cpath d='M0 252 L40 245 L80 239 L120 235 L160 230 L200 224 L240 217 L280 210 L320 203 L360 198 L400 195 L440 195 L480 201 L520 211 L560 226 L600 244 L640 266 L680 288 L720 308 L760 327 L800 341 L840 351 L880 355 L920 356 L960 353 L1000 347 L1040 341 L1080 334 L1120 328 L1160 323 L1200 319 L1240 314 L1280 309 L1320 301 L1360 291 L1400 278 L1440 263 L1480 245 L1520 227 L1560 209 L1600 195'/%3E%3C/svg%3E") center / 100% 100% no-repeat; opacity: .8; }
.stats-band h2 { font: 800 clamp(1.6rem, 3vw, 2.2rem)/1.25 var(--display); color: var(--navy); max-width: 46rem; margin: 0 auto 1.75rem; text-align: center; text-wrap: balance; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); background: var(--navy); color: #fff; border-radius: var(--r); padding: 1.5rem 1rem; max-width: 64rem; margin-inline: auto; box-shadow: var(--shadow); }
.stats li { text-align: center; padding: .75rem .5rem; }
.stats b { display: block; font: 800 clamp(2rem, 4vw, 2.75rem)/1 var(--display); }
.stats span { display: block; margin-top: .45rem; color: #C9D6EA; font-size: .9375rem; line-height: 1.4; }

/* A thin colour line across the top of a section */
.grad-top { position: relative; }
.grad-top::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--logo) 0%, var(--sky) 55%, #7EE0CB 100%); }

/* News: one story at a time on navy */
.news .rail { grid-auto-columns: 100%; gap: 2rem; }
.news-item { display: grid; gap: 1.5rem 2.5rem; align-items: center; }
@media (min-width: 900px) { .news-item { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.news-item img { border-radius: var(--r); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.news-item .label { font-size: .875rem; font-weight: 700; color: var(--sky); }
.news-item h3 { margin-top: .5rem; font: 800 clamp(1.5rem, 3vw, 2.25rem)/1.18 var(--display); text-wrap: balance; }
.news-item p { margin-top: .9rem; color: #C9D6EA; max-width: 36rem; }
.news-item .btn { margin-top: 1.4rem; }
.section.navy .rail-arrows button { background: transparent; border-color: rgba(255, 255, 255, .5); color: #fff; }
.section.navy .rail-arrows button:hover { border-color: var(--sky); color: var(--sky); }

/* Article cards: photo, tag and title */
.ins-card { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; min-height: 21rem; padding: 1.25rem; border-radius: var(--r); overflow: hidden; color: #fff; text-decoration: none; background: var(--navy); }
.ins-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ins-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 26, 61, .1) 30%, rgba(8, 26, 61, .92) 100%); }
.ins-card:hover img { transform: scale(1.05); }
.ins-card .tag { align-self: flex-start; padding: .2rem .7rem; border-radius: 6px; background: var(--sky); color: var(--navy-deep); font-size: .8125rem; font-weight: 700; }
.ins-card h3 { font: 800 1.3rem/1.25 var(--display); text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { .ins-card img { transition: none; } .ins-card:hover img { transform: none; } }

/* Image beside text */
.media-split { display: grid; gap: 2rem 3.5rem; align-items: center; }
@media (min-width: 900px) { .media-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.media-split img { border-radius: var(--r); width: 100%; box-shadow: var(--shadow); }
.media-split h2 { font: 800 clamp(2rem, 3.6vw, 2.75rem)/1.15 var(--display); color: var(--navy); text-wrap: balance; margin-top: .5rem; }
.media-split p { margin-top: 1rem; color: var(--muted); font-size: 1.0625rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* Rails: horizontal scrolling rows of cards with arrows */
.rail-wrap { position: relative; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(17rem, 1fr); gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .75rem; scrollbar-width: thin; }
@media (min-width: 1100px) { .rail.five { grid-auto-columns: calc((100% - 4 * 1.25rem) / 4.4); } .rail.three { grid-auto-columns: calc((100% - 2 * 1.25rem) / 3); } }
.rail > * { scroll-snap-align: start; }
.rail-arrows { display: flex; gap: .5rem; }
.rail-arrows button { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1.5px solid var(--rule); background: #fff; color: var(--navy); font-size: 1.25rem; cursor: pointer; }
.rail-arrows button:hover { border-color: var(--blue); color: var(--blue); }
.head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; margin-bottom: 2rem; }
.head-row .section-head { margin-bottom: 0; }

/* Cards */
.card { display: grid; grid-template-rows: auto 1fr; background: #fff; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; color: var(--ink); text-decoration: none; transition: box-shadow .2s, transform .2s, border-color .2s; }
a.card:hover { box-shadow: var(--shadow); border-color: var(--ice-2); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { a.card:hover { transform: none; } }
.card-img { aspect-ratio: 16 / 10; background: var(--ice); overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-body { display: grid; gap: .5rem; align-content: start; padding: 1.15rem 1.25rem 1.35rem; }
.card h3 { font: 800 1.25rem/1.25 var(--display); color: var(--navy); }
.card p { color: var(--muted); font-size: .9875rem; line-height: 1.55; }
.card .text-link { margin-top: .35rem; }
.card .meta { font-size: .875rem; font-weight: 700; color: var(--blue); }

/* Services grid */
.grid-3 { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.service { background: #fff; border: 1px solid var(--rule); border-radius: var(--r); padding: 1.5rem 1.4rem; display: grid; gap: .6rem; align-content: start; color: var(--ink); text-decoration: none; }
a.service:hover { border-color: var(--blue); box-shadow: var(--shadow); }
.ico { width: 3rem; height: 3rem; border-radius: 12px; background: var(--ice); color: var(--blue); display: grid; place-items: center; }
.section.ice .ico:not(.service .ico) { background: #fff; }
.service h3 { font: 800 1.1875rem/1.3 var(--display); color: var(--navy); }
.service p { color: var(--muted); font-size: .975rem; line-height: 1.55; }

/* Feature: text beside the interactive drawing */
.feature { display: grid; gap: 2.5rem; align-items: center; }
.feature > * { min-width: 0; }
@media (min-width: 1000px) { .feature { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 3.5rem; } }
.feature h2 { font: 800 clamp(2rem, 3.6vw, 2.75rem)/1.15 var(--display); color: var(--navy); text-wrap: balance; }
.feature p { margin-top: 1rem; color: var(--muted); }
.feature .btn { margin-top: 1.5rem; }
.ticks { margin-top: 1.25rem; display: grid; gap: .55rem; }
.ticks li { position: relative; padding-left: 1.75rem; }
[dir="rtl"] .ticks li { padding-left: 0; padding-right: 1.75rem; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .35em; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / 80% no-repeat; }
[dir="rtl"] .ticks li::before { left: auto; right: 0; }

/* Apps */
.apps-layout { display: grid; gap: 1.25rem; }
@media (min-width: 1000px) { .apps-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.app-feature { background: var(--navy); color: #fff; border-radius: var(--r); overflow: hidden; display: grid; grid-template-rows: auto 1fr; text-decoration: none; }
.app-feature .card-img { background: #0b2350; }
.app-feature .card-body h3 { color: #fff; font-size: 1.5rem; }
.app-feature .card-body p { color: #C9D6EA; }
.app-feature .text-link { color: var(--sky); }
.app-grid { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); align-content: start; }
.app-tile { display: grid; gap: .25rem; padding: 1rem 1.1rem; border: 1px solid var(--rule); border-radius: var(--r-sm); background: #fff; color: var(--ink); text-decoration: none; }
.app-tile:hover { border-color: var(--blue); }
.app-tile b { color: var(--navy); }
.app-tile span { font-size: .9375rem; color: var(--muted); line-height: 1.45; }

/* Process */
.steps { display: grid; counter-reset: step; gap: 0; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.steps li { counter-increment: step; position: relative; padding: 2.75rem 1.25rem 1.5rem 0; border-top: 2px solid var(--ice-2); min-width: 0; }
[dir="rtl"] .steps li { padding: 2.75rem 0 1.5rem 1.25rem; }
.steps li::before { content: counter(step); position: absolute; top: -1.05rem; left: 0; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; background: var(--blue); color: #fff; font-weight: 800; border-radius: 50%; }
[dir="rtl"] .steps li::before { left: auto; right: 0; }
.steps h3 { font: 800 1.125rem/1.25 var(--display); color: var(--navy); }
.steps p { margin-top: .45rem; color: var(--muted); font-size: .95rem; line-height: 1.5; }
.steps .gate { display: block; margin-top: .7rem; font-size: .875rem; font-weight: 700; color: var(--blue); }

/* Call to action band: light, centred, over drawn lines */
.cta-band { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(120deg, #EEF3F9 0%, #E2ECF7 100%); color: var(--ink); border-radius: var(--r); padding: clamp(2rem, 5vw, 3.5rem); display: grid; gap: 1.25rem; justify-items: center; text-align: center; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 420' preserveAspectRatio='none' fill='none' stroke='%2399C3EE' stroke-width='1.2' opacity='.75'%3E%3Cpath d='M0 120 L40 134 L80 147 L120 157 L160 163 L200 165 L240 164 L280 159 L320 153 L360 147 L400 141 L440 137 L480 135 L520 135 L560 136 L600 137 L640 138 L680 137 L720 133 L760 127 L800 117 L840 106 L880 94 L920 82 L960 72 L1000 66 L1040 64 L1080 66 L1120 73 L1160 82 L1200 94 L1240 106 L1280 117 L1320 126 L1360 132 L1400 135 L1440 136 L1480 135 L1520 134 L1560 133 L1600 134'/%3E%3Cpath d='M0 184 L40 194 L80 199 L120 200 L160 198 L200 192 L240 185 L280 177 L320 170 L360 165 L400 162 L440 160 L480 160 L520 160 L560 159 L600 156 L640 151 L680 142 L720 132 L760 120 L800 108 L840 97 L880 88 L920 84 L960 84 L1000 88 L1040 97 L1080 109 L1120 122 L1160 136 L1200 148 L1240 158 L1280 165 L1320 169 L1360 170 L1400 170 L1440 169 L1480 168 L1520 169 L1560 172 L1600 176'/%3E%3Cpath d='M0 236 L40 235 L80 231 L120 224 L160 215 L200 206 L240 197 L280 191 L320 186 L360 183 L400 181 L440 179 L480 177 L520 172 L560 166 L600 157 L640 145 L680 134 L720 122 L760 112 L800 106 L840 103 L880 106 L920 113 L960 124 L1000 138 L1040 154 L1080 169 L1120 182 L1160 193 L1200 200 L1240 205 L1280 206 L1320 206 L1360 205 L1400 204 L1440 205 L1480 207 L1520 210 L1560 214 L1600 218'/%3E%3Cpath d='M0 263 L40 253 L80 243 L120 231 L160 221 L200 213 L240 207 L280 203 L320 199 L360 196 L400 192 L440 187 L480 179 L520 170 L560 159 L600 147 L640 137 L680 129 L720 125 L760 125 L800 130 L840 140 L880 154 L920 171 L960 188 L1000 205 L1040 219 L1080 230 L1120 238 L1160 242 L1200 243 L1240 242 L1280 241 L1320 239 L1360 239 L1400 240 L1440 242 L1480 244 L1520 246 L1560 246 L1600 243'/%3E%3Cpath d='M0 267 L40 254 L80 242 L120 232 L160 225 L200 219 L240 215 L280 210 L320 206 L360 199 L400 192 L440 182 L480 172 L520 162 L560 154 L600 148 L640 147 L680 150 L720 158 L760 171 L800 188 L840 207 L880 226 L920 243 L960 258 L1000 269 L1040 277 L1080 280 L1120 280 L1160 279 L1200 276 L1240 273 L1280 271 L1320 271 L1360 271 L1400 271 L1440 270 L1480 268 L1520 262 L1560 254 L1600 241'/%3E%3Cpath d='M0 260 L40 249 L80 240 L120 233 L160 228 L200 223 L240 218 L280 212 L320 204 L360 196 L400 187 L440 179 L480 173 L520 170 L560 172 L600 178 L640 190 L680 206 L720 225 L760 246 L800 266 L840 284 L880 299 L920 310 L960 316 L1000 318 L1040 317 L1080 314 L1120 309 L1160 305 L1200 302 L1240 299 L1280 297 L1320 295 L1360 291 L1400 286 L1440 278 L1480 267 L1520 253 L1560 236 L1600 218'/%3E%3Cpath d='M0 252 L40 245 L80 239 L120 235 L160 230 L200 224 L240 217 L280 210 L320 203 L360 198 L400 195 L440 195 L480 201 L520 211 L560 226 L600 244 L640 266 L680 288 L720 308 L760 327 L800 341 L840 351 L880 355 L920 356 L960 353 L1000 347 L1040 341 L1080 334 L1120 328 L1160 323 L1200 319 L1240 314 L1280 309 L1320 301 L1360 291 L1400 278 L1440 263 L1480 245 L1520 227 L1560 209 L1600 195'/%3E%3C/svg%3E") center / 100% 100% no-repeat; opacity: .9; }
.cta-band h2 { font: 800 clamp(1.75rem, 3.2vw, 2.4rem)/1.2 var(--display); color: var(--navy); text-wrap: balance; }
.cta-band p { margin-top: .6rem; color: var(--muted); max-width: 40rem; margin-inline: auto; }
.cta-band .row { gap: .75rem; justify-content: center; }

/* Inner page banner: text on the left, a slanted photo bleeding off the right edge */
.page-hero { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(120deg, #EEF2F7 0%, #E1E9F3 100%); padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.page-hero .wrap { display: grid; gap: 2rem; align-items: center; }
.page-hero p.lead { margin-top: 1rem; color: var(--muted); font-size: 1.1875rem; max-width: 40rem; }
.page-hero img { border-radius: var(--r); box-shadow: var(--shadow); }
@media (min-width: 900px) {
  .page-hero { display: flex; align-items: center; min-height: clamp(24rem, 34vw, 29rem); }
  .page-hero .wrap.with-img { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
  .page-hero .wrap.with-img > img { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; z-index: -1; width: 50%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); }
  [dir="rtl"] .page-hero .wrap.with-img > img { clip-path: polygon(0 0, 78% 0, 100% 100%, 0 100%); }
  .page-hero:has(.with-img)::after { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cline x1='19' y1='0' x2='-3' y2='100' stroke='%233779F8' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3Cline x1='25.5' y1='0' x2='3.5' y2='100' stroke='%237EE0CB' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat; pointer-events: none; }
  [dir="rtl"] .page-hero:has(.with-img)::after { transform: scaleX(-1); }
}

/* Breadcrumb bar under the banner */
.crumbbar { position: relative; background: #fff; border-bottom: 1px solid var(--rule); font-size: .9375rem; }
.crumbbar::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--logo) 0%, var(--sky) 55%, #7EE0CB 100%); }
.crumbbar ol { display: flex; flex-wrap: wrap; padding-block: 1rem .85rem; color: var(--muted); }
.crumbbar li + li::before { content: "//"; padding-inline: .6rem; color: var(--blue); font-weight: 700; }
.crumbbar a { color: var(--navy); text-decoration: none; }
.crumbbar a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.crumbbar [aria-current] { color: var(--blue); font-weight: 600; }

/* Parts we make: photo cards */
.area-grid { display: grid; gap: 1.25rem; }
@media (min-width: 560px) { .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .area-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.area-card { display: flex; flex-direction: column; background: var(--tint); border: 1px solid #E2EAF3; border-radius: var(--r); overflow: hidden; }
.area-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.area-card h3 { padding: 1.1rem 1.25rem 0; font: 800 1.2rem/1.3 var(--display); color: var(--navy); }
.area-card p { padding: .35rem 1.25rem 1.3rem; color: var(--muted); font-size: .97rem; line-height: 1.5; }

/* Photo beside a card with a colour line */
.why-grid { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .why-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: stretch; } }
.why-grid > img { width: 100%; height: 100%; min-height: 18rem; max-height: 32rem; object-fit: cover; border-radius: var(--r); }
.why-card { position: relative; overflow: hidden; background: #fff; border-radius: var(--r); padding: clamp(1.5rem, 3.5vw, 2.75rem); box-shadow: var(--shadow); align-self: center; }
.why-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--logo) 0%, var(--sky) 55%, #7EE0CB 100%); }
.why-card h2 { margin-top: .5rem; font: 800 clamp(1.6rem, 2.8vw, 2.2rem)/1.2 var(--display); color: var(--navy); text-wrap: balance; }
.why-card .ticks { margin-top: 1.25rem; }

/* Small photo cards and related articles */
.mini-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.ins-card.mini { min-height: 12.5rem; justify-content: flex-end; }
.ins-card.mini h3 { font-size: 1.15rem; }
.rel-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid-3.four { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
@media (min-width: 1100px) { .grid-3.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.aside-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r); box-shadow: var(--shadow); margin-bottom: 1.25rem; }
.crumbs { font-size: .9375rem; color: var(--muted); margin-bottom: 1rem; }
.crumbs a { color: var(--muted); }
.prose { max-width: 46rem; display: grid; gap: 1.1rem; }
.prose h2 { font: 800 1.6rem/1.25 var(--display); color: var(--navy); margin-top: 1rem; }
.prose h3 { font: 800 1.2rem/1.3 var(--display); color: var(--navy); margin-top: .5rem; }
.prose ul { list-style: disc; padding-left: 1.4rem; display: grid; gap: .4rem; }
[dir="rtl"] .prose ul { padding-left: 0; padding-right: 1.4rem; }
.prose table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.prose .eq { padding: .75rem 1rem; background: var(--tint); border-left: 3px solid var(--blue); border-radius: var(--r-sm); font-variant-numeric: tabular-nums; }
[dir="rtl"] .prose .eq { border-left: 0; border-right: 3px solid var(--blue); }
.prose th, .prose td { text-align: left; padding: .55rem .75rem; border-bottom: 1px solid var(--rule); }
[dir="rtl"] .prose th, [dir="rtl"] .prose td { text-align: right; }
.prose th { color: var(--muted); font-weight: 600; }
.two-col { display: grid; gap: 2.5rem; }
@media (min-width: 1000px) { .two-col { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 4rem; } }
.aside { display: grid; gap: 1rem; align-content: start; }
.aside .panel h2 { font-size: 1.15rem; }

/* Data table (materials) */
.table-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r); }
.mat { width: 100%; min-width: 44rem; border-collapse: collapse; }
.mat th, .mat td { text-align: left; padding: .85rem 1.1rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
[dir="rtl"] .mat th, [dir="rtl"] .mat td { text-align: right; }
.mat thead th { background: var(--ice); font-size: .875rem; color: var(--navy); font-weight: 700; }
.mat tbody th { font-weight: 700; color: var(--navy); white-space: nowrap; }
.mat td { color: var(--muted); }
.mat .num { font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.stds { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin-top: 1.75rem; }
.stds li { font-size: .9375rem; color: var(--muted); }
.stds b { display: block; color: var(--navy); }

/* ---------- App pages (shared controls) ---------- */
.page-head { padding-block: 2rem 1.5rem; display: grid; gap: .5rem; }
.page-head h1 { font: 800 clamp(2rem, 4vw, 2.75rem)/1.12 var(--display); color: var(--navy); text-wrap: balance; letter-spacing: -.015em; }
.page-head p { color: var(--muted); max-width: 50rem; }
.app { display: grid; gap: 1.25rem; padding-bottom: 2.5rem; }
.app > * { min-width: 0; }
@media (min-width: 980px) { .app { grid-template-columns: minmax(0, 1fr) 23rem; align-items: start; } }
.stage { position: relative; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; background: #fff; }
.stage canvas { display: block; width: 100%; height: clamp(320px, 62vh, 680px); touch-action: none; cursor: grab; }
.stage canvas:active { cursor: grabbing; }
.stage-hint { position: absolute; left: .85rem; bottom: .6rem; font-size: .875rem; color: var(--muted); pointer-events: none; }
.stage-tools { position: absolute; top: .7rem; left: .7rem; right: .7rem; display: flex; flex-wrap: wrap; gap: .35rem; pointer-events: none; }
.stage-tools > * { pointer-events: auto; }
.stage-fail { padding: 2rem; color: var(--bad); }
.panel { border: 1px solid var(--rule); border-radius: var(--r); background: #fff; padding: 1.1rem 1.2rem 1.25rem; display: grid; gap: .85rem; }
.panel + .panel { margin-top: 1.25rem; }
.panel h2 { font: 800 1.2rem/1.25 var(--display); color: var(--navy); }
.note { font-size: .9375rem; line-height: 1.5; color: var(--muted); }
.alert { font-size: .9375rem; line-height: 1.45; color: var(--bad); }
.alert:empty { display: none; }
.field { display: grid; gap: .3rem; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label, .field > span { font-weight: 600; font-size: .9875rem; }
.field input:not([type="checkbox"]):not([type="range"]), .field select, .field textarea {
  width: 100%; min-width: 0; padding: .6rem .75rem; font: 400 1rem/1.4 var(--body); color: var(--ink);
  background: #fff; border: 1.5px solid var(--rule); border-radius: var(--r-sm);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(25, 102, 196, .18); }
.field textarea { min-height: 7rem; resize: vertical; }
.app .field textarea, #gcode { white-space: pre; overflow: auto; font-variant-numeric: tabular-nums; min-height: 15rem; }
.slider { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 .75rem; align-items: center; }
.slider label { font-weight: 600; font-size: .9875rem; }
.slider output { font-variant-numeric: tabular-nums; color: var(--blue); font-weight: 700; }
.slider input { grid-column: 1 / -1; width: 100%; accent-color: var(--blue); height: 1.6rem; margin: 0; }
.check { display: flex; align-items: center; gap: .5rem; font-size: 1rem; }
.check input { width: 1.05rem; height: 1.05rem; accent-color: var(--blue); margin: 0; }
.row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.data { display: grid; gap: 0; font-variant-numeric: tabular-nums; }
.data div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .32rem; border-bottom: 1px solid var(--rule); font-size: .975rem; }
.data dt { color: var(--muted); }
.data dd { text-align: right; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
[dir="rtl"] .data dd { text-align: left; }
.bar { height: .5rem; background: var(--tint); border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; margin-top: .5rem; }
.bar i { display: block; height: 100%; width: 0; background: var(--blue); }
.legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .9375rem; color: var(--muted); }
.legend i { display: inline-block; width: .8rem; height: .8rem; margin-right: .35rem; vertical-align: -1px; border: 1px solid var(--muted); }
.now { font-size: .9375rem; background: var(--tint); padding: .45rem .7rem; border-radius: var(--r-sm); overflow-wrap: anywhere; min-height: 2.1rem; margin-top: .5rem; }
.applist { border-top: 2px solid var(--navy); margin-bottom: 3rem; }
.applist li { display: grid; gap: .6rem 2.5rem; padding-block: 1.5rem; border-bottom: 1px solid var(--rule); align-items: start; }
.applist li > * { min-width: 0; }
.applist-wrap { padding-top: clamp(2rem, 4vw, 3rem); }
.applist li { grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: 1.1rem; }
.applist li > :not(.app-thumb) { grid-column: 2; }
.app-thumb { grid-row: 1 / span 3; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.applist li .btn { justify-self: start; }
@media (min-width: 860px) {
  .applist li { grid-template-columns: 10rem minmax(0, 3.2fr) minmax(0, 5.5fr) auto; column-gap: 2rem; align-items: center; }
  .applist li > :not(.app-thumb) { grid-column: auto; }
  .app-thumb { grid-row: auto; }
}
.applist h2 { font: 800 1.35rem/1.25 var(--display); }
.applist h2 a { color: var(--navy); text-decoration: none; }
.applist h2 a:hover { color: var(--blue); }
.applist p { color: var(--muted); max-width: 44rem; }
.calc { display: grid; gap: 1.25rem; padding-bottom: 3rem; }
.calc > * { min-width: 0; }
@media (min-width: 860px) { .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.calc .panel + .panel { margin-top: 0; }
.twoup { display: grid; gap: .85rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.formula { font-size: .9375rem; color: var(--muted); }

/* Calculator share and print tools */
.share-tools { padding-top: .85rem; border-top: 1px solid var(--rule); }
.share-tools .note { flex-basis: 100%; }
.print-head { display: none; }
@page { margin: 14mm; }
@media print {
  body { background: #fff; font-size: 10.5pt; line-height: 1.45; }
  .site-header, .site-footer, .float-help, .skip, .search, .page-note, .share-tools, .spot-foot, .rail-arrows, .btn, .list button, .cutlist .empty { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  .print-head { display: grid; gap: 2pt; padding-bottom: 8pt; margin-bottom: 10pt; border-bottom: 1.5pt solid #0E2A5C; font-size: 9pt; color: #333; }
  .print-head b { font-size: 11pt; color: #0E2A5C; }
  .print-head span:first-of-type { font-size: 13pt; font-weight: 700; color: #0F1A2E; }
  .page-head { padding: 0 0 8pt; }
  .page-head h1 { display: none; }
  .page-head p { font-size: 9.5pt; max-width: none; }
  .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10pt; padding-bottom: 10pt; align-items: start; }
  .panel { display: block; border: 1pt solid #9AA6B8; border-radius: 6pt; padding: 8pt 10pt; box-shadow: none; }
  .panel > * + * { margin-top: 6pt; }
  .twoup { gap: 6pt; }
  .field { gap: 1pt; }
  .field select { appearance: none; -webkit-appearance: none; background-image: none; }
  .data div, .pair tr, .chart tr, .list tr, .status, svg, .gear-box { break-inside: avoid; }
  .panel h2 { font-size: 11.5pt; }
  .field input:not([type="checkbox"]):not([type="range"]), .field select { border: 1pt solid #9AA6B8 !important; padding: 2pt 5pt !important; min-height: 0 !important; }
  .shape span { padding: 3pt; }
  .gear-box { padding-bottom: 0; }
  .chart-wrap, .list-wrap { overflow: visible; border: 0; margin-bottom: 0; }
  .chart, .list, .pair { min-width: 0 !important; font-size: 9pt; }
  .chart th, .chart td, .list th, .list td { padding: 3pt 5pt; }
  a { color: inherit; text-decoration: none; }
  .big { font-size: 15pt !important; }
  .cutlist:has(#list-wrap[hidden]) { display: none; }
  .shape:not(:has(input:checked)) { display: none; }
}

/* Topic filters on the article list */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.filters button { padding: .45rem 1rem; border-radius: 999px; border: 1.5px solid var(--rule); background: #fff; color: var(--navy); font: 600 .9375rem var(--body); cursor: pointer; }
.filters button:hover { border-color: var(--blue); color: var(--blue); }
.filters button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Industries overview: one wide photo at a time with a card over it */
.ind-slider { grid-auto-columns: 100%; gap: 1.5rem; }
.ind-slide { position: relative; border-radius: var(--r); overflow: hidden; background: var(--navy); }
.ind-slide img { width: 100%; height: clamp(16rem, 42vw, 32rem); object-fit: cover; }
.ind-slide-card { background: #fff; padding: 1.5rem; display: grid; gap: .6rem; align-content: start; border: 1px solid var(--rule); border-top: 0; border-radius: 0 0 var(--r) var(--r); }
.ind-slide-card h3 { font: 800 clamp(1.5rem, 2.6vw, 2rem)/1.2 var(--display); color: var(--navy); }
.ind-slide-card p { color: var(--muted); }
.ind-slide-card .btn { justify-self: start; margin-top: .4rem; }
.slide-count { font-weight: 700; color: var(--blue); font-size: .9375rem; }
@media (min-width: 900px) {
  .ind-slide-card { position: absolute; top: 50%; inset-inline-end: 2.5rem; transform: translateY(-50%); width: min(30rem, 44%); padding: 2rem; border: 0; border-radius: var(--r); box-shadow: 0 20px 50px rgba(8, 26, 61, .35); }
  .ind-slide-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; border-radius: var(--r) var(--r) 0 0; background: linear-gradient(90deg, var(--logo) 0%, var(--sky) 55%, #7EE0CB 100%); }
}
@media (min-width: 900px) { .mini-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Quote form (home and contact pages) */
.quote-grid { display: grid; gap: 2.5rem; }
.quote-grid > * { min-width: 0; }
@media (min-width: 960px) { .quote-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 4rem; } }
.quote-grid h2 { font: 800 clamp(2rem, 3.8vw, 2.75rem)/1.15 var(--display); color: var(--navy); text-wrap: balance; }
.quote-grid .lead { margin-top: 1rem; color: var(--muted); }
.checklist { margin-top: 1.5rem; display: grid; gap: .55rem; }
.checklist li { padding-left: 1.75rem; position: relative; }
[dir="rtl"] .checklist li { padding-left: 0; padding-right: 1.75rem; }
.checklist li::before { content: ""; position: absolute; left: 0; top: .4em; width: .95rem; height: .95rem; border-radius: 4px; border: 2px solid var(--blue); }
[dir="rtl"] .checklist li::before { left: auto; right: 0; }
form.rfq { display: grid; gap: 1.1rem 1.25rem; background: #fff; border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow); padding: clamp(1.1rem, 2.5vw, 2rem); }
@media (min-width: 600px) { form.rfq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.form-note { font-size: .9375rem; color: var(--bad); flex: 1 1 15rem; }
.result { grid-column: 1 / -1; display: grid; gap: .75rem; border-top: 1px solid var(--rule); padding-top: 1.1rem; }
.result pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 .9375rem/1.55 var(--body); background: var(--tint); padding: .85rem; border: 1px solid var(--rule); border-radius: var(--r-sm); }
.result p { font-size: .9375rem; }

/* Menus: navy panels with a photo, like the reference site */
.mega-img { display: none; }
@media (min-width: 1101px) {
  .mega { background: var(--navy); border-top: 0; box-shadow: 0 28px 48px rgba(8, 26, 61, .35); }
  .mega-inner { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); align-items: start; }
  .mega-intro, [dir="rtl"] .mega-intro { border: 0; padding: 1.25rem; background: var(--navy-deep); border-radius: 12px; color: #fff; }
  .mega-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; margin-bottom: 1rem; }
  .mega-title { color: #fff; font-size: 1.35rem; }
  .mega-intro p + p { color: #C9D6EA; }
  .mega-intro .text-link { color: var(--sky); }
  .mega-links a { position: relative; padding-inline-end: 2.25rem; color: #fff; }
  .mega-links a::after { content: "›"; position: absolute; inset-inline-end: .9rem; top: .65rem; color: var(--sky); font-weight: 700; font-size: 1.2rem; line-height: 1; }
  [dir="rtl"] .mega-links a::after { content: "‹"; }
  .mega-links a:hover { background: rgba(255, 255, 255, .08); }
  .mega-links b { color: #fff; }
  .mega-links a:hover b { color: var(--sky); }
  .mega-links span { color: #AFC3DE; }
}
@media (max-width: 480px) { .mail-btn { display: none; } }

/* Floating contact button on the page edge */
.float-help { position: fixed; z-index: 40; inset-inline-end: 0; top: 58%; display: grid; place-items: center; width: 3rem; height: 3rem; background: var(--sky); color: var(--navy-deep); border-radius: 10px 0 0 10px; box-shadow: 0 10px 26px rgba(8, 26, 61, .28); }
[dir="rtl"] .float-help { border-radius: 0 10px 10px 0; }
.float-help:hover { background: #7CC8F5; }
@media (max-width: 700px) { .float-help { top: auto; bottom: 1rem; } }