/* Layout: single deliberate dark look from the approved OpenArt mockup. Full-width bands, 1120px content wrapper, mountain horizon in the hero echoing the logo mark. */
:root {
  color-scheme: dark} /* Layout: single deliberate dark look from the approved OpenArt mockup. Full-width bands:not(.pnl, .pnl *), 1120px content wrapper:not(.pnl, .pnl *), mountain horizon in the hero echoing the logo mark. */
:root:not(.pnl, .pnl *){
  --bg: #f4f2ef;
  --bg-2: #f4f2ef;
  --panel: #f4f2ef;
  --line: #ecebe8;
  --fg: #0d1c2a;
  --muted: #54606c;
  --accent: #1760cc;
  --accent-bright: #1760cc;
  --btn: #1a6ae0;
  --btn-hover: #1a6ae0;
  --deep: #f4f2ef;
  --font-display: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --radius: 10px}
html { scroll-behavior: smooth}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto} }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased} body:not(.pnl, .pnl *){
  background: var(--bg);
  color: var(--fg)}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10} body:not(.pnl, .pnl *)::before{ background: var(--bg)}
a:not(.pnl, .pnl *){ color: inherit}
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 6px; font-weight: 600; text-decoration: none} .skip-link:not(.pnl, .pnl *){ background: #0d1c2a; color: #f4f2ef}
.skip-link:focus { top: calc(12px + env(safe-area-inset-top, 0px))}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap}
a:focus-visible, summary:focus-visible { outline-offset: 3px; border-radius: 6px} a:focus-visible:not(.pnl, .pnl *), summary:focus-visible:not(.pnl, .pnl *){ outline: 2px solid var(--accent-bright)}
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; margin: 0; letter-spacing: -0.015em; font-weight: 600}
p { margin: 0}
.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px))}
.eyebrow { font-family: var(--font-display); font-size: 12px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase} .eyebrow:not(.pnl, .pnl *){ color: var(--accent-bright)}
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 24px; border-radius: 6px; font-weight: 600; font-size: 15px;
  text-decoration: none; transition: background .2s, border-color .2s} .btn:not(.pnl, .pnl *){ border: 1px solid transparent}
.btn-primary:not(.pnl, .pnl *){ background: var(--btn); color: #fbfbfa}
.btn-primary:hover:not(.pnl, .pnl *){ background: var(--btn-hover)}
.btn-ghost:not(.pnl, .pnl *){ border-color: rgba(13,28,42,0.68); color: var(--fg)}
.btn-ghost:hover:not(.pnl, .pnl *){ background: rgba(13,28,42,0.064)}
.logo { display: block} .logo:not(.pnl, .pnl *){ color: var(--fg); --knock: var(--bg)}
.logo svg { display: block; height: 34px; width: auto}
.logo .f:not(.pnl, .pnl *){ fill: currentColor}
.logo .k:not(.pnl, .pnl *){ fill: var(--knock)}

/* Header */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5} /* Header */
.site-header:not(.pnl, .pnl *){
  background: var(--bg);
  border-bottom: 1px solid rgba(23,96,204,0.248)}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 14px; position: relative}
.nav-links { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; font-size: 14px}
.nav-links a { text-decoration: none} .nav-links a:not(.pnl, .pnl *){ color: #0d1c2a}
.nav-links a:hover:not(.pnl, .pnl *){ color: #0d1c2a}
.nav .btn { padding: 9px 16px; font-size: 13px}
/* Readability floor for small labels, tags, and credential chips (full-site QA, Oct 24, 2026) */
main :is(.sv-eye, .sv-small, .cm-tags, .lv-k, .prole, .pt-pts, .pt-pts li, .cc, .cc li, .ptitle, .cat, .creds-label) { font-size: 12px !important}
.field-err { margin: 6px 0 0; font-size: 13px; line-height: 1.4} .field-err:not(.pnl, .pnl *){ color: #0d1c2a}
.field-err::before { content: "! "; font-weight: 700}
form .field-row { align-items: start}
form .field { align-content: start}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap} .sr-only:not(.pnl, .pnl *){ border: 0}
/* link-in-text a11y: links inside running text are underlined, not color-only */
body .crumbs a, main p a:not([class]) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px}
.nav-search { position: relative; margin-left: auto}
.nav-search > summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px} .nav-search > summary:not(.pnl, .pnl *){ color: #0d1c2a; border: 1px solid transparent}
.nav-search > summary::-webkit-details-marker { display: none}
.nav-search > summary:hover:not(.pnl, .pnl *), .nav-search[open] > summary:not(.pnl, .pnl *){ color: #0d1c2a; border-color: var(--line); background: var(--panel)}
.nav-search .site-search { position: absolute; right: 0; top: calc(100% + 10px); z-index: 25; width: 380px; display: flex; gap: 8px; padding: 12px; border-radius: 12px} .nav-search .site-search:not(.pnl, .pnl *){ background: var(--panel); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(13,28,42,0.175)}
.site-search input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 8px; font: inherit; font-size: 15px} .site-search input:not(.pnl, .pnl *){ background: #f4f2ef; border: 1px solid var(--line); color: var(--fg)}
.site-search input:focus { outline-offset: 1px} .site-search input:focus:not(.pnl, .pnl *){ outline: 2px solid var(--accent-bright); border-color: transparent}
.site-search .btn { height: 40px; padding: 0 14px; font-size: 13px}
.mm-search { display: flex; gap: 8px; padding: 10px 0 6px; width: 100%}
.mm-search input { width: 100%}
.nav .nav-search + .btn { margin-left: 0}
.mobile-menu { display: none}
.mobile-menu > summary { list-style: none; cursor: pointer; padding: 6px}
.mobile-menu summary::-webkit-details-marker { display: none}
.mobile-menu ul { list-style: none; margin: 0; padding: 8px 0 4px; display: grid; gap: 2px}
.mobile-menu ul a { display: block; padding: 11px 2px; text-decoration: none; font-size: 17px} .mobile-menu ul a:not(.pnl, .pnl *){ border-top: 1px solid var(--line)}
@media (max-width: 860px) {
  .nav-links, .nav > .btn, .nav-search { display: none}
  .mobile-menu { display: block}
  .nav { flex-wrap: wrap}
  .mobile-menu[open] { flex-basis: 100%; order: 3}
  .mobile-menu[open] > summary { position: absolute; right: 0; top: 14px}
  /* the header is sticky, so an open menu taller than the screen scrolls inside itself */
  .mobile-menu[open] { max-height: calc(100vh - 88px - env(safe-area-inset-top, 0px)); max-height: calc(100dvh - 88px - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: 16px}
  .logo svg { height: 30px}
}


/* Services mega menu (CSS only) */
.nav-links .has-mega { position: static; display: flex; align-items: center; gap: 2px}
.nav-links .has-mega > a { display: inline-flex; align-items: center}
.mega-toggle { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; margin: 0; border-radius: 6px; cursor: pointer} .mega-toggle:not(.pnl, .pnl *){ border: 0; background: none; color: #0d1c2a}
.mega-toggle:hover:not(.pnl, .pnl *){ color: #0d1c2a}
.mega-toggle .caret { transition: transform .15s ease}
.has-mega.open .mega-toggle .caret { transform: rotate(180deg)}
.caret { width: 12px; height: 12px; stroke-width: 1.6} .caret:not(.pnl, .pnl *){ fill: none; stroke: currentColor}
.mega { position: absolute; left: 16px; right: 16px; top: 100%; z-index: 20; border-radius: 12px; padding: 24px 26px 18px;
  visibility: hidden; opacity: 0; transition: opacity .12s ease, visibility 0s linear .25s} .mega:not(.pnl, .pnl *){ background: var(--panel); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(13,28,42,0.175)}
.has-mega:hover .mega, .has-mega.open .mega { visibility: visible; opacity: 1; transition-delay: 0s}
/* hover bridge: covers the gap between "Services" and the panel so the menu stays open while the pointer travels */
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -26px; height: 26px}
@media (prefers-reduced-motion: reduce) { .mega { transition: none} }
.mega-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1.4fr; gap: 24px}
.mega-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px}
.mega-col:last-child ul { grid-template-columns: 1fr 1fr; column-gap: 18px}
.mega-h { font-family: var(--font-display); font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 8px} .mega-h:not(.pnl, .pnl *){ color: var(--accent-bright)}
.nav-links .mega a { display: block; padding: 6px 0; font-size: 14px} .nav-links .mega a:not(.pnl, .pnl *){ color: #0d1c2a}
.nav-links .mega a:hover, .nav-links .mega a:focus-visible { text-decoration: underline; text-underline-offset: 3px} .nav-links .mega a:hover:not(.pnl, .pnl *), .nav-links .mega a:focus-visible:not(.pnl, .pnl *){ color: #0d1c2a}
.nav-links .mega .mega-all { display: inline-block; margin-top: 12px; padding-top: 12px; font-weight: 600} .nav-links .mega .mega-all:not(.pnl, .pnl *){ color: var(--accent-bright)}
.mobile-menu .mm-sub summary { list-style: none; cursor: pointer; padding: 11px 2px; font-size: 17px} .mobile-menu .mm-sub summary:not(.pnl, .pnl *){ border-top: 1px solid var(--line)}
.mobile-menu .mm-sub summary::-webkit-details-marker { display: none}
.mobile-menu .mm-sub summary::after { content: "+"; float: right} .mobile-menu .mm-sub summary:not(.pnl, .pnl *)::after{ color: var(--accent-bright)}
.mobile-menu .mm-sub[open] summary::after { content: "\2212"}
.mobile-menu .mm-sub ul { padding: 0 0 8px 12px}
.mobile-menu .mm-sub ul a { font-size: 15px; padding: 8px 2px}
.mobile-menu .mm-h { font-family: var(--font-display); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding: 12px 2px 4px} .mobile-menu .mm-h:not(.pnl, .pnl *){ color: var(--accent-bright)}

/* Hero */
.hero { position: relative; overflow: hidden; text-align: center} /* Hero */
.hero:not(.pnl, .pnl *){ background: linear-gradient(180deg, #f4f2ef 0%, #ecebe8 70%, #f4f2ef 100%)}
.hero::before {
  content: ""; position: absolute; inset: 0;
  pointer-events: none} .hero:not(.pnl, .pnl *)::before{
  background:
    radial-gradient(55% 60% at 50% 18%, rgba(26,106,224,0.176), transparent 70%),
    repeating-linear-gradient(90deg, rgba(13,28,42,0.022) 0 1px, transparent 1px 96px)}
.hero .ridges { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%}
.hero .wrap { position: relative; padding-block: 60px 52px; display: grid; justify-items: center; gap: 18px}
.hero h1 { font-size: clamp(40px, 6.6vw, 64px); line-height: 1.06; font-weight: 600}
.hero h1 em { font-style: normal} .hero h1 em:not(.pnl, .pnl *){ color: var(--accent-bright)}
.hero p.lede { max-width: 560px; font-size: 17px; line-height: 1.55} .hero p.lede:not(.pnl, .pnl *){ color: #0d1c2a}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 8px}
@media (max-width: 480px) { .hero-ctas { flex-direction: column; width: 100%} .hero-ctas .btn { width: 100%; box-sizing: border-box} }

/* Credentials + stats band */
.proof:not(.pnl, .pnl *){ border-top: 1px solid var(--line)}
.proof .wrap { display: grid}
.creds { padding-block: 30px 32px; display: grid; gap: 18px; justify-items: center} .creds:not(.pnl, .pnl *){ border-bottom: 1px solid var(--line)}
.creds-label { font-family: var(--font-display); font-size: 11px; letter-spacing: .26em; text-transform: uppercase} .creds-label:not(.pnl, .pnl *){ color: var(--muted)}
.creds ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; row-gap: 14px}
.creds li { display: flex; align-items: center; padding: 4px 26px; font-family: var(--font-display); font-weight: 500; font-size: 21px; white-space: nowrap; line-height: 1.2} .creds li:not(.pnl, .pnl *){ border-left: 1px solid var(--line); color: #0d1c2a}
.creds li:first-child:not(.pnl, .pnl *){ border-left: 0}
.creds li a { text-decoration: none}
.creds li a:hover:not(.pnl, .pnl *){ color: #0d1c2a}
:where(img[width][height]) { height: auto}
.creds img { height: 42px; width: auto; display: block; opacity: .85; transition: opacity .2s}
.creds a:hover img { opacity: 1}
@media (max-width: 640px) { .creds li { padding: 2px 14px} .creds img { height: 32px} }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); padding-block: 28px}
@media (max-width: 900px) and (min-width: 641px) { .stats { grid-template-columns: repeat(2, 1fr)} .stat:nth-child(3):not(.pnl, .pnl *){ border-left: 0} .stat:nth-child(n+3) { padding-top: 16px} .stat:nth-child(n+3):not(.pnl, .pnl *){ border-top: 1px solid var(--line)} }
.stat { text-align: center; padding: 6px 16px; display: grid; gap: 2px}
.stat + .stat:not(.pnl, .pnl *){ border-left: 1px solid var(--line)}
.stat strong { font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 34px); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2}
.stat span { font-size: 14px} .stat span:not(.pnl, .pnl *){ color: var(--muted)}
@media (max-width: 640px) {
  .stats { grid-template-columns: 1fr; padding-block: 8px}
  .stat + .stat:not(.pnl, .pnl *){ border-left: 0; border-top: 1px solid var(--line)}
  .stat { padding: 16px 0}
}

/* Sections */
.section { padding-block: 34px 40px} /* Sections */
.section:not(.pnl, .pnl *){ border-top: 1px solid var(--line)}
.section-head { display: grid; gap: 8px; justify-items: center; text-align: center; margin-bottom: 26px}
.section-head h2 { font-size: clamp(26px, 3.4vw, 30px); line-height: 1.15}
.section-head p:not(.pnl, .pnl *){ color: var(--muted)}

/* Services */
.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px}
@media (max-width: 760px) { .service-grid { grid-template-columns: 1fr} }
.service { border-radius: var(--radius);
  padding: 24px 26px; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 20px} .service:not(.pnl, .pnl *){
  background: var(--panel); border: 1px solid var(--line)}
.service svg.ico { width: 38px; height: 38px; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px} .service svg.ico:not(.pnl, .pnl *){ stroke: var(--accent-bright); fill: none}
.service h3 { font-size: 17px; font-weight: 600; margin-bottom: 6px}
.service .fam-d { font-size: 14px; line-height: 1.6; margin-bottom: 10px} .service .fam-d:not(.pnl, .pnl *){ color: var(--muted)}
.service .fam-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px}
.service .fam-list li { display: grid; gap: 1px; font-size: 14px; line-height: 1.5}
.service .fam-list a { font-weight: 600; text-decoration: none} .service .fam-list a:not(.pnl, .pnl *){ color: var(--fg)}
.service .fam-list a:hover { text-decoration: underline; text-underline-offset: 3px} .service .fam-list a:hover:not(.pnl, .pnl *){ color: var(--accent-bright)}
.service .fam-list span:not(.pnl, .pnl *){ color: var(--muted)}
.creds-verify { font-size: 13px; text-align: center; line-height: 1.7; max-width: 760px} .creds-verify:not(.pnl, .pnl *){ color: var(--muted)}
.creds-verify a:not(.pnl, .pnl *){ color: var(--accent-bright)}
.service .fw { font-size: 14px; line-height: 1.7} .service .fw:not(.pnl, .pnl *){ color: var(--muted)}
.service .fw a { text-decoration: none; white-space: nowrap} .service .fw a:not(.pnl, .pnl *){ color: inherit}
.service .fw a:hover { text-decoration: underline; text-underline-offset: 3px} .service .fw a:hover:not(.pnl, .pnl *){ color: var(--fg)}
.service .fw i { font-style: normal; margin: 0 6px; opacity: .7}
.service .fw-note { font-size: 12px; margin-top: 4px} .service .fw-note:not(.pnl, .pnl *){ color: var(--muted)}
.service h3 { margin-top: 4px}
.explore { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 600; font-size: 14px; text-decoration: none} .explore:not(.pnl, .pnl *){ color: var(--accent-bright)}
.explore svg { width: 16px; height: 16px; stroke-width: 1.8; transition: transform .2s} .explore svg:not(.pnl, .pnl *){ stroke: currentColor; fill: none}
.explore:hover svg { transform: translateX(3px)}

/* Process */
.process-panel { border-radius: 12px; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)} /* Process */
.process-panel:not(.pnl, .pnl *){
  border: 1px solid var(--line);
  background: linear-gradient(150deg, #f4f2ef, #f4f2ef)}
.process-left { padding: 36px 34px 0; display: grid; align-content: start; gap: 8px; position: relative; min-height: 220px} .process-left:not(.pnl, .pnl *){ border-right: 1px solid var(--line)}
.process-left h2 { font-size: clamp(26px, 3.2vw, 30px); line-height: 1.15}
.process-left svg { width: 100%; height: auto; display: block; margin-top: auto}
.phases { list-style: none; margin: 0; padding: 22px 34px; display: grid; align-content: center}
.phases li { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 16px; padding-block: 15px}
.phases li + li:not(.pnl, .pnl *){ border-top: 1px solid var(--line)}
.phases .num { font-family: var(--font-display); font-weight: 500; font-size: 13px; letter-spacing: .2em; text-transform: uppercase} .phases .num:not(.pnl, .pnl *){ color: var(--accent-bright)}
.phases h3 { font-family: var(--font-body); font-size: 15px; font-weight: 500; letter-spacing: 0}
@media (max-width: 760px) {
  .process-panel { grid-template-columns: 1fr}
  .process-left { padding: 28px 22px 0} .process-left:not(.pnl, .pnl *){ border-right: 0; border-bottom: 1px solid var(--line)}
  .phases { padding: 10px 22px}
}

/* Insights */
.insight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px}
@media (max-width: 760px) { .insight-grid { grid-template-columns: 1fr} }
.insight { text-decoration: none; border-radius: var(--radius); overflow: hidden; display: grid; grid-template-rows: auto 1fr} .insight:not(.pnl, .pnl *){ border: 1px solid var(--line); background: var(--panel)}
.insight:hover:not(.pnl, .pnl *){ border-color: var(--accent)}
.insight svg.thumb { width: 100%; height: auto; display: block; aspect-ratio: 300 / 130} .insight svg.thumb:not(.pnl, .pnl *){ border-bottom: 1px solid var(--line)}
.insight .row { padding: 18px 20px 22px; display: flex; justify-content: space-between; align-items: flex-start; gap: 14px}
.insight h3 { font-size: 16px; font-weight: 600; line-height: 1.35}
.insight .row svg { flex: 0 0 auto; width: 18px; height: 18px; stroke-width: 1.8; margin-top: 3px; transition: transform .2s} .insight .row svg:not(.pnl, .pnl *){ stroke: var(--accent-bright); fill: none}
.insight:hover .row svg { transform: translateX(3px)}

/* FAQ */
.faq-list { display: grid; gap: 10px; max-width: 820px; margin: 0 auto}
.faq-list details { border-radius: var(--radius); padding: 16px 20px} .faq-list details:not(.pnl, .pnl *){ border: 1px solid var(--line); background: var(--panel)}
.faq-list summary { cursor: pointer; font-family: var(--font-display); font-weight: 500; font-size: 16px}
.faq-list details p { margin-top: 10px; font-size: 15px} .faq-list details p:not(.pnl, .pnl *){ color: var(--muted)}

/* CTA */
.cta:not(.pnl, .pnl *){ background: radial-gradient(70% 140% at 50% 0%, #1a6ae0 0%, #1a6ae0 55%, #ecebe8 100%)}
.cta .wrap { padding-block: 38px 42px; display: grid; justify-items: center; gap: 18px; text-align: center}
.cta h2 { font-size: clamp(24px, 3.2vw, 28px)}
.cta .btn { min-width: 200px} .cta .btn:not(.pnl, .pnl *){ background: #0d1c2a; color: #1760cc}
.cta .btn:hover:not(.pnl, .pnl *){ background: #0d1c2a}

/* Footer */
footer { background: var(--deep); color: var(--muted); font-size: 13.5px; }
footer .logo { --knock: var(--deep); }
footer .logo svg { height: 40px; }
footer .wrap { padding-block: 30px 22px; display: grid; gap: 30px; }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(6, minmax(0, 1fr)); gap: 24px}
@media (max-width: 1100px) { .foot-top { grid-template-columns: repeat(4, minmax(0, 1fr))} .foot-brand { grid-column: 1 / -1} }
@media (max-width: 760px) { .foot-top { grid-template-columns: 1fr 1fr} .foot-brand { grid-column: 1 / -1} }
.foot-brand { display: grid; gap: 14px; align-content: start}
.foot-brand address { font-style: normal; line-height: 1.6} .foot-brand address:not(.pnl, .pnl *){ color: #cfcbc3}
footer .foot-h { color: var(--fg); font-size: 13px; font-weight: 600; margin: 0 0 10px; font-family: var(--font-display); letter-spacing: 0; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
footer a { text-decoration: none; }
footer a:hover { color: var(--fg); }
.foot-bottom { padding-top: 18px; text-align: center; font-size: 13px; margin: 0} .foot-bottom:not(.pnl, .pnl *){ border-top: 1px solid var(--line)}

/* Privacy & cookie consent */
[hidden] { display: none !important}
.privacy-fab {
  position: fixed; z-index: 30;
  right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  transition: background .2s, transform .2s} .privacy-fab:not(.pnl, .pnl *){ border: 0;
  background: var(--accent); color: #fbfbfa;
  box-shadow: 0 6px 20px rgba(13,28,42,0.158), 0 0 0 4px rgba(26,106,224,0.099)}
.privacy-fab:hover { transform: translateY(-2px)} .privacy-fab:hover:not(.pnl, .pnl *){ background: var(--accent-bright)}
.privacy-fab:focus-visible { outline-offset: 3px} .privacy-fab:focus-visible:not(.pnl, .pnl *){ outline: 2px solid #0d1c2a}
@media (max-width: 640px) { .privacy-fab { display: none} }  /* phones: footer links cover privacy choices */
.privacy-fab svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.cookie-banner {
  position: fixed; z-index: 31;
  left: calc(16px + env(safe-area-inset-left, 0px)); right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  max-width: 620px; margin-left: auto; border-radius: 12px;
  padding: 20px 22px; display: grid; gap: 16px} .cookie-banner:not(.pnl, .pnl *){
  background: var(--panel); border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(13,28,42,0.193)}
.cb-title { font-size: 17px; margin-bottom: 6px}
.cookie-banner p { font-size: 14px; line-height: 1.55} .cookie-banner p:not(.pnl, .pnl *){ color: var(--muted)}
.cookie-banner a:not(.pnl, .pnl *), .consent-modal a:not(.pnl, .pnl *){ color: var(--accent-bright)}
.cb-actions, .cm-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center}
.cbtn { font: 600 14px var(--font-body); padding: 10px 18px; border-radius: 6px; cursor: pointer} .cbtn:not(.pnl, .pnl *){ border: 1px solid transparent}
.cbtn-solid:not(.pnl, .pnl *){ background: var(--btn); color: #fbfbfa}
.cbtn-solid:hover:not(.pnl, .pnl *){ background: var(--btn-hover)}
.cbtn-ghost:not(.pnl, .pnl *){ background: transparent; color: var(--fg); border-color: rgba(13,28,42,0.4)}
.cbtn-ghost:hover:not(.pnl, .pnl *){ border-color: var(--fg)}
.cbtn-link { padding: 10px 6px; text-decoration: underline; text-underline-offset: 3px} .cbtn-link:not(.pnl, .pnl *){ background: none; color: var(--accent-bright)}
.cbtn:focus-visible, .cm-close:focus-visible { outline-offset: 2px} .cbtn:focus-visible:not(.pnl, .pnl *), .cm-close:focus-visible:not(.pnl, .pnl *){ outline: 2px solid var(--accent-bright)}
@media (max-width: 480px) { .cb-actions .cbtn-solid { flex: 1 1 40%} }
.consent-modal {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border-radius: 14px} .consent-modal:not(.pnl, .pnl *){
  background: var(--panel); color: var(--fg); border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(13,28,42,0.21)}
.consent-modal:not(.pnl, .pnl *)::backdrop{ background: rgba(251,251,250,0.7)}
.cm-inner { padding: 22px 24px 18px; display: grid; gap: 14px}
.cm-head { display: flex; justify-content: space-between; align-items: center; gap: 12px}
.cm-head h2 { font-size: 20px}
.cm-close { cursor: pointer; padding: 4px; border-radius: 6px} .cm-close:not(.pnl, .pnl *){ background: none; border: 0; color: var(--muted)}
.cm-close svg { width: 22px; height: 22px; stroke-width: 2; stroke-linecap: round; display: block} .cm-close svg:not(.pnl, .pnl *){ stroke: currentColor; fill: none}
.cm-intro, .cm-gpc { font-size: 14px} .cm-intro:not(.pnl, .pnl *), .cm-gpc:not(.pnl, .pnl *){ color: var(--muted)}
.cm-gpc:not(.pnl, .pnl *){ color: #54606c}
.cm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 16px; border-radius: 10px} .cm-row:not(.pnl, .pnl *){ border: 1px solid var(--line); background: var(--bg-2)}
.cm-row h3 { font-family: var(--font-body); font-size: 15px; font-weight: 600; margin-bottom: 2px; letter-spacing: 0}
.cm-row p { font-size: 13.5px; line-height: 1.5} .cm-row p:not(.pnl, .pnl *){ color: var(--muted)}
.cm-always { font-size: 12.5px; font-weight: 600; white-space: nowrap} .cm-always:not(.pnl, .pnl *){ color: var(--accent-bright)}
.cm-always.muted:not(.pnl, .pnl *){ color: var(--muted)}
.switch { position: relative; width: 44px; height: 24px; flex: none}
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1}
.switch span { position: absolute; inset: 0; border-radius: 999px; transition: background .2s} .switch span:not(.pnl, .pnl *){ background: #54606c}
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; transition: transform .2s} .switch span:not(.pnl, .pnl *)::after{ background: #0d1c2a}
.switch input:checked + span:not(.pnl, .pnl *){ background: var(--btn)}
.switch input:checked + span::after { transform: translateX(20px)}
.switch input:focus-visible + span { outline-offset: 2px} .switch input:focus-visible + span:not(.pnl, .pnl *){ outline: 2px solid var(--accent-bright)}
.switch input:disabled + span { opacity: .5}
.cm-foot { font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 6px 8px} .cm-foot:not(.pnl, .pnl *){ color: var(--muted)}
.cm-status { font-size: 13px; min-height: 1em} .cm-status:not(.pnl, .pnl *){ color: #54606c}
@media (prefers-reduced-motion: reduce) { .privacy-fab, .switch span, .switch span::after { transition: none} }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px}
.foot-bottom button { padding: 0; font: inherit; cursor: pointer} .foot-bottom button:not(.pnl, .pnl *){ background: none; border: 0; color: inherit}
.foot-bottom a:hover:not(.pnl, .pnl *), .foot-bottom button:hover:not(.pnl, .pnl *){ color: var(--fg)}

/* ===== Phone UX fixes (Oct 24, 2026) ===== */
.mobile-menu .mm-close-icon, .mobile-menu[open] .mm-open-icon { display: none}
.mobile-menu[open] .mm-close-icon { display: block}
.mobile-menu > summary { display: grid; place-items: center; min-width: 44px; min-height: 44px}
.mobile-menu .mm-cta { padding-top: 12px}
.mobile-menu ul .mm-cta a.btn { display: flex; justify-content: center; padding: 13px 18px; font-size: 16px} .mobile-menu ul .mm-cta a.btn:not(.pnl, .pnl *){ border-top: 0; color: #0d1c2a}
@media (max-width: 600px) {
  .service { padding: 22px 20px; grid-template-columns: 40px minmax(0, 1fr); gap: 0 14px}
  .service svg.ico { width: 32px; height: 32px}
  footer ul { gap: 0; }
  footer ul a, .foot-brand a { display: inline-block; padding-block: 5px; }
  .foot-bottom a, .foot-bottom button { display: inline-block; padding-block: 6px}
}
@media (max-width: 480px) {
  .cookie-banner { padding: 14px 16px; gap: 10px; left: calc(10px + env(safe-area-inset-left, 0px)); right: calc(10px + env(safe-area-inset-right, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px))}
  .cb-title { font-size: 15px; margin-bottom: 2px}
  .cookie-banner p { font-size: 13.5px; line-height: 1.45}
  .cookie-banner .cb-extra { display: none}
  .cb-actions { gap: 8px}
  .cb-actions .cbtn-solid { flex: 1 1 0; padding: 10px 12px}
  .cb-actions .cbtn-link { flex-basis: 100%; text-align: center; padding: 4px 6px}
}
@media (max-width: 600px) {
  main .tsc p, main .timeline li p, main .mini p, main .flight li p, main .op-short, main .tl-cap { font-size: 14.5px; line-height: 1.5}
}
/* ===== /Phone UX fixes ===== */