:root {
  --brand:#243f78; --brand-2:#dde2e9; --ink:#182137; --body:#465269;
  --muted:#59667d; --bg:#fafbfd; --bg-alt:#edf1f6; --border:#bec8d8;
  --footer:#dfe6f0; --header-h:90px; --maxw:1320px; --radius:0; --shadow:none;
  --heading:"Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;
  --text:Tahoma,Geneva,Arial,sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--body); font:16px/1.75 var(--text); }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; }
a { color:inherit; text-underline-offset:5px; }
a:hover { color:var(--brand); }
a:focus-visible,button:focus-visible,[tabindex="0"]:focus-visible { outline:3px solid var(--brand); outline-offset:6px; }
img,svg { display:block; max-width:100%; }
img { height:auto; }
h1,h2,h3,p,dl,dd,figure { margin:0; }
h1,h2,h3 { color:var(--ink); font-family:var(--heading); font-weight:400; }
h1 { font-size:clamp(64px,7.2vw,108px); line-height:.99; letter-spacing:-.045em; }
h2 { font-size:clamp(36px,4vw,60px); line-height:1.1; letter-spacing:-.025em; }
h3 { font-size:28px; line-height:1.2; }
.wrap { width:min(calc(100% - 112px),var(--maxw)); margin-inline:auto; }
.section { padding-block:96px; }
.about.section,.approach.section { padding-block:84px; }
.eyebrow { color:var(--brand); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
section[id],footer[id],main[id] { scroll-margin-top:calc(var(--header-h) + 24px); }
.skip-link { position:fixed; left:20px; top:-100px; z-index:100; padding:12px 20px; background:var(--brand); color:white; }
.skip-link:focus { top:12px; color:white; }
.site-header { position:sticky; top:0; z-index:30; background:var(--brand-2); border-bottom:1px solid var(--border); }
.site-header.scrolled { border-bottom-color:var(--brand); }
.header-inner { position:relative; width:min(calc(100% - 112px),var(--maxw)); min-height:var(--header-h); margin:auto; display:flex; align-items:center; justify-content:center; }
.brand { position:relative; z-index:1; display:flex; align-items:center; gap:14px; color:var(--brand); text-decoration:none; }
.brand-mark { flex:none; }
.brand>span { font-size:17px; font-weight:bold; letter-spacing:.12em; line-height:1.4; }
.brand small { display:block; font-size:10px; font-weight:400; letter-spacing:.35em; margin-top:4px; }
#primary-nav { position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; }
.nav-left,.nav-right { display:flex; gap:28px; }
#primary-nav a { min-height:44px; display:inline-flex; align-items:center; gap:6px; color:var(--ink); font-size:14px; text-decoration:none; }
#primary-nav a::after { content:"••"; width:12px; color:var(--brand); opacity:0; font-size:10px; letter-spacing:1px; }
#primary-nav a[aria-current],#primary-nav a:hover { color:var(--brand); font-weight:bold; }
#primary-nav a[aria-current]::after,#primary-nav a:hover::after { opacity:1; }
.menu-toggle { display:none; }
.hero { padding-top:32px; }
.hero-topline { display:flex; justify-content:space-between; align-items:center; gap:16px; padding-bottom:25px; }
.hero-company { font-size:12px; color:var(--muted); }
.hero-heading { display:grid; grid-template-columns:minmax(0,1fr) 330px; align-items:end; gap:40px; padding:18px 0 42px; }
.hero h1 { color:var(--brand); }
.hero h1 span { color:var(--ink); }
.hero-intro { padding-bottom:5px; }
.hero-intro p { font-size:15px; line-height:1.85; }
.hero-actions { display:flex; flex-direction:column; align-items:flex-start; gap:16px; margin-top:24px; }
.text-link { display:inline-flex; align-items:center; gap:14px; color:var(--brand); text-decoration:none; font-size:13px; font-weight:bold; }
.text-link span { font-size:19px; }
.hero-art { overflow:hidden; }
.hero-art img { width:100%; }
.hero-caption { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:18px 0; border-bottom:1px solid var(--border); font-size:12px; color:var(--muted); }
.hero-caption>a { color:var(--brand); text-decoration:none; }
.hero-caption>a span { margin-left:20px; }
.about>.eyebrow { margin-bottom:26px; }
.about-body { display:grid; grid-template-columns:1.1fr 1fr; gap:80px; }
.about-copy { max-width:570px; padding-top:3px; font-size:16px; }
.about-copy p+p { margin-top:20px; }
.company-facts { display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:32px; margin-top:38px; padding-top:24px; border-top:1px solid var(--border); font-size:14px; }
.company-facts dt { color:var(--muted); font-size:12px; margin-bottom:8px; }
.company-facts dd { color:var(--ink); }
.company-facts a { overflow-wrap:anywhere; }
.services { background:var(--bg-alt); }
.section-heading { display:grid; grid-template-columns:1.1fr 1fr; gap:80px; align-items:end; margin-bottom:40px; }
.section-heading h2 { margin-top:23px; }
.section-heading>p { max-width:525px; font-size:16px; }
.service-browser { display:grid; grid-template-columns:350px minmax(0,1fr); gap:48px; }
.service-tabs { display:none; }
.tabs-ready .service-tabs { display:flex; flex-direction:column; align-items:stretch; padding-top:12px; }
.service-tabs button { display:flex; justify-content:space-between; align-items:center; gap:16px; text-align:left; color:var(--body); background:none; border:0; border-bottom:1px solid var(--border); min-height:80px; padding:18px 0; font-size:15px; cursor:pointer; }
.service-tabs button span { opacity:0; font-size:25px; }
.service-tabs button[aria-selected="true"] { color:var(--brand); font-weight:bold; }
.service-tabs button[aria-selected="true"] span { opacity:1; }
.service-tabs button:hover { color:var(--brand); }
.service-panels { grid-column:1 / -1; }
.tabs-ready .service-panels { grid-column:auto; }
.service-panel { position:relative; min-height:420px; display:flex; flex-direction:column; align-items:flex-start; background:var(--bg); border:1px solid var(--border); padding:40px; }
.service-panel+.service-panel { margin-top:24px; }
.tabs-ready .service-panel { margin-top:0; }
.service-panel[hidden] { display:none; }
.panel-label { font-size:12px; color:var(--muted); margin:0 110px 18px 0; }
.service-panel h3 { font-size:clamp(32px,3vw,45px); max-width:550px; padding-right:85px; }
.service-panel>p:not(.panel-label) { max-width:500px; font-size:16px; margin-block:22px 28px; }
.button { position:relative; display:inline-flex; align-items:center; justify-content:space-between; gap:30px; min-height:48px; padding:11px 23px; margin-inline:6px; color:white; font-size:14px; text-decoration:none; isolation:isolate; }
.button::before { content:""; position:absolute; inset:0; z-index:-1; background:var(--brand); transform:skewX(-12deg); border:1px solid var(--brand); transition:background .18s; }
.button:hover { color:white; }
.button:hover::before { background:var(--ink); }
.service-panel .button { margin-top:auto; }
.service-symbol { position:absolute; width:85px; height:100px; top:36px; right:32px; color:var(--brand); }
.service-symbol span,.service-symbol i { display:block; position:absolute; }
.mobile-symbol span { inset:0 14px 0 14px; border:2px solid; border-radius:10px; }
.mobile-symbol span::after { content:""; position:absolute; width:18px; height:2px; bottom:8px; left:17px; background:currentColor; }
.mobile-symbol i { width:44px; height:44px; top:24px; left:20px; background:var(--brand-2); clip-path:polygon(0 0,100% 0,0 100%); }
.software-symbol span { inset:15px 0; border:2px solid; }
.software-symbol span::before { content:""; position:absolute; top:14px; width:100%; border-bottom:2px solid; }
.software-symbol i { width:25px; height:25px; top:50px; left:13px; background:var(--brand-2); }
.backend-symbol span { inset:8px 0; border:2px solid; background:repeating-linear-gradient(0deg,transparent 0 24px,var(--brand-2) 24px 26px); }
.backend-symbol i { top:8px; left:25px; height:84px; border-right:2px solid; }
.it-symbol span { width:44px; height:44px; top:3px; left:0; border:2px solid; }
.it-symbol i { width:44px; height:44px; bottom:3px; right:0; border:2px solid; background:var(--brand-2); }
.it-symbol::before { content:""; position:absolute; top:25px; right:20px; height:49px; border-right:2px solid; }
.platform-note { font-size:12px; color:var(--muted); margin-top:24px; }
.approach { display:grid; grid-template-columns:1.1fr 1fr; gap:80px; }
.approach-heading h2 { margin-top:28px; }
.principles { padding-top:2px; }
.principles>div { display:grid; grid-template-columns:154px minmax(0,1fr); gap:26px; padding:24px 0; border-top:1px solid var(--border); }
.principles dt { font-size:16px; color:var(--brand); font-weight:bold; }
.principles dd { font-size:15px; }
.site-footer { background:var(--footer); padding:58px 0 0; }
.contact-heading { position:relative; padding-left:72px; }
.contact-heading .brand-mark { position:absolute; top:0; left:0; }
.contact-heading h2 { margin-top:23px; }
.contact-body { display:grid; grid-template-columns:1fr 1.1fr; gap:100px; margin:35px 0 52px; padding-left:72px; }
.contact-body>p { max-width:410px; font-size:16px; }
.contact-details { display:flex; flex-direction:column; gap:30px; }
.contact-item h3 { font:12px var(--text); color:var(--muted); margin-bottom:12px; }
.contact-email { display:flex; align-items:center; gap:20px; width:fit-content; color:var(--brand); font-size:18px; text-decoration:none; overflow-wrap:anywhere; }
.contact-email span { font-size:22px; }
.contact-cta { margin-top:18px; }
address { font-size:14px; line-height:1.8; font-style:normal; max-width:440px; }
.footer-bottom { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 25px; border-top:1px solid #aebbd0; padding:24px 0; color:var(--body); font-size:12px; }
.footer-bottom nav { display:flex; flex-wrap:wrap; gap:19px; }
.footer-bottom a { text-decoration:none; }
.back-top { position:fixed; z-index:25; right:18px; bottom:20px; color:var(--brand); visibility:hidden; opacity:0; transition:opacity .2s; }
.back-top.visible { visibility:visible; opacity:1; }
.back-top-label { position:absolute; right:calc(100% + 8px); top:12px; padding:5px 10px; background:var(--brand); color:white; font-size:12px; line-height:1.6; white-space:nowrap; visibility:hidden; opacity:0; transition:opacity .15s; }
.back-top:focus-visible .back-top-label { visibility:visible; opacity:1; }
html:not(.js) .back-top { visibility:visible; opacity:1; }
@media(hover:hover) { .back-top:hover .back-top-label { visibility:visible; opacity:1; } }
@media(min-width:901px) { html:not(.js) .site-header { position:relative; } }
@media(max-width:1150px) {
  .wrap,.header-inner { width:calc(100% - 72px); }
  .nav-left,.nav-right { gap:16px; }
  .hero-heading { grid-template-columns:minmax(0,1fr) 280px; gap:28px; }
  h1 { font-size:clamp(58px,7.3vw,90px); }
  .service-browser { grid-template-columns:280px minmax(0,1fr); gap:32px; }
  .service-panel { padding:32px; }
  .service-symbol { right:24px; top:28px; transform:scale(.75); transform-origin:top right; }
  .service-panel h3 { padding-right:70px; font-size:35px; }
  .about-body,.section-heading,.approach { gap:45px; }
  .contact-body { gap:45px; }
  .principles>div { grid-template-columns:140px minmax(0,1fr); gap:20px; }
}
@media(max-width:900px) {
  :root { --header-h:82px; }
  .header-inner { justify-content:space-between; flex-wrap:wrap; }
  .brand>span { font-size:15px; }
  .brand .brand-mark { width:23px; height:43px; }
  .brand small { font-size:9px; }
  .js .menu-toggle { display:flex; gap:22px; align-items:center; justify-content:space-between; min-width:88px; min-height:44px; background:none; border:0; padding:8px 0 8px 12px; color:var(--brand); font-size:14px; cursor:pointer; }
  .menu-toggle>span:last-child { font-size:23px; line-height:1; }
  #primary-nav { position:static; width:100%; display:block; padding:0 0 24px; }
  .js #primary-nav { display:none; }
  .js #primary-nav.open { display:block; }
  .nav-left,.nav-right { display:block; }
  #primary-nav a { display:flex; justify-content:space-between; border-top:1px solid #b0bdcf; min-height:48px; }
  .brand,.menu-toggle { margin-block:17px; }
  html:not(.js) .site-header { position:relative; }
  .hero-heading { grid-template-columns:1fr; gap:25px; padding-bottom:32px; }
  h1 { font-size:clamp(64px,10vw,95px); }
  .hero-intro { display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center; }
  .hero-actions { margin-top:0; }
  .hero-company { display:none; }
  .hero-art img { min-height:225px; object-fit:cover; }
  .hero-caption>span:nth-child(2) { display:none; }
  .section { padding-block:72px; }
  .about.section,.approach.section { padding-block:64px; }
  .about-body,.section-heading,.approach { grid-template-columns:1fr; gap:28px; }
  .about-copy { max-width:660px; }
  .company-facts { grid-template-columns:1fr 1fr; }
  .company-facts>div:last-child { grid-column:1 / -1; }
  .service-browser { display:block; }
  .tabs-ready .service-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; padding-top:0; margin-bottom:22px; border:1px solid var(--border); }
  .service-tabs button { min-height:76px; border:0; padding:16px 20px; line-height:1.55; font-size:14px; }
  .service-tabs button:nth-child(odd) { border-right:1px solid var(--border); }
  .service-tabs button:nth-child(-n+2) { border-bottom:1px solid var(--border); }
  .service-tabs button span { display:none; }
  .service-tabs button[aria-selected="true"] { background:var(--bg); box-shadow:inset 0 -3px var(--brand); }
  .service-tabs button:focus-visible { outline-offset:-5px; }
  .service-panel { min-height:380px; }
  .service-panel h3 { font-size:39px; }
  .service-symbol { transform:scale(.8); }
  .principles>div { grid-template-columns:155px minmax(0,1fr); }
  .contact-body { padding-left:0; gap:36px; }
  .contact-heading { padding-left:60px; }
}
@media(max-width:580px) {
  :root { --header-h:76px; }
  .wrap,.header-inner { width:calc(100% - 40px); }
  .brand { gap:9px; margin-block:15px; }
  .brand>span { font-size:12px; letter-spacing:.09em; }
  .brand small { font-size:9px; letter-spacing:.2em; }
  .brand .brand-mark { width:20px; height:38px; }
  .js .menu-toggle { min-width:70px; gap:14px; font-size:13px; margin-block:13px; }
  .hero { padding-top:24px; }
  .hero-topline { padding-bottom:13px; }
  .eyebrow { font-size:11px; letter-spacing:.07em; }
  h1 { font-size:clamp(39px,10.5vw,60px); letter-spacing:-.045em; }
  h2 { font-size:35px; }
  .hero-heading { gap:22px; padding-top:12px; padding-bottom:28px; }
  .hero-intro { display:block; }
  .hero-intro p { font-size:15px; line-height:1.8; max-width:385px; }
  .hero-actions { margin-top:22px; gap:16px; }
  .text-link { font-size:12px; gap:10px; }
  .hero-art img { min-height:0; aspect-ratio:600 / 340; object-fit:contain; }
  .hero-caption { font-size:11px; gap:15px; align-items:flex-start; }
  .hero-caption>a { max-width:110px; text-align:right; }
  .hero-caption>a span { margin-left:4px; }
  .section { padding-block:58px; }
  .about.section { padding-block:44px; }
  .approach.section { padding-block:52px; }
  .about>.eyebrow { margin-bottom:22px; }
  .about-body { gap:22px; }
  .about-copy { font-size:15px; }
  .company-facts { grid-template-columns:1fr; gap:20px; margin-top:28px; font-size:14px; }
  .company-facts dt { font-size:12px; }
  .company-facts>div:last-child { grid-column:auto; }
  .company-facts dd br { display:none; }
  .section-heading { gap:20px; margin-bottom:24px; }
  .section-heading h2 { margin-top:18px; }
  .section-heading>p { font-size:15px; }
  .service-tabs button { padding:13px 14px; font-size:13px; min-height:82px; gap:0; }
  .service-panel { min-height:0; padding:26px 23px; }
  .panel-label { min-height:40px; font-size:12px; line-height:1.6; margin-right:72px; margin-bottom:18px; }
  .service-panel h3 { font-size:31px; padding-right:0; }
  .service-panel>p:not(.panel-label) { font-size:15px; margin-block:20px 24px; }
  .service-symbol { top:23px; right:20px; transform:scale(.55); }
  .button { font-size:13px; gap:24px; }
  .service-panel .button { margin-top:0; }
  .platform-note { font-size:11px; line-height:1.8; }
  .approach { gap:28px; }
  .principles>div { grid-template-columns:1fr; gap:12px; padding-block:22px; }
  .principles dt { font-size:16px; }
  .principles dd { font-size:15px; }
  .site-footer { padding-top:42px; }
  .contact-heading { padding-left:0; }
  .contact-heading .brand-mark { position:static; margin-bottom:22px; width:22px; height:41px; }
  .contact-heading h2 { font-size:34px; }
  .contact-heading h2 br { display:none; }
  .contact-body { grid-template-columns:1fr; margin-block:26px 36px; gap:28px; }
  .contact-body>p { font-size:15px; }
  .contact-email { font-size:15px; gap:10px; }
  address { font-size:13px; }
  .footer-bottom { display:block; padding-block:22px 30px; font-size:11px; }
  .footer-bottom nav { margin-block:17px; gap:12px 17px; }
  .back-top { right:9px; bottom:12px; }
  .back-top svg { width:44px; height:44px; }
  .back-top-label { top:8px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; animation:none !important; } }
