/* Reference CSS keeps the layout; typography follows the original SKEVAP archive. */
/* Exact font stack from archive/skevap-original-2026-10-02/index.html. */
:root {
  --skevap-wordmark-offset-y: 8%;
  --skevap-logo-offset-y: 1px;
  --skevap-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --primary-font-family: var(--skevap-font-family);
  --primary-font-family-regular: var(--skevap-font-family);
  --primary-font-family-bold: var(--skevap-font-family);
  --secondary-font-family: var(--skevap-font-family);
  --bs-font-sans-serif: var(--skevap-font-family);
  --bs-body-font-family: var(--skevap-font-family);
}
body { font-family: var(--skevap-font-family); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: var(--skevap-font-family); }
/* Requested hero hierarchy; other sections retain their existing type scale. */
#home .hero__preheader { font-size: 18px; font-weight: 700; }
#home .jumbotron { font-size: 44px; font-weight: 600; }
#home .hero__paragraph > p { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
#home .hero__paragraph > p + p { margin-top: 1em; }
@media (min-width: 992px) { #home .jumbotron { font-size: 64px; } }
/* Adjust optical alignment without changing the space reserved for branding. */
.brand-reference::after,
.brand-media::after,
img[src$="/skevap-wordmark.png"],
img[src*="/skevap-wordmark.png?"],
img[src$="/skevap/logo.svg"],
img[src*="/skevap/logo.svg?"] { transform: translateY(var(--skevap-wordmark-offset-y)); }
/* Standalone navigation logos follow the adjacent navigation's visual center. */
img.custom-logo { transform: translateY(var(--skevap-logo-offset-y)); }
@media (min-width: 992px) { :root { --skevap-logo-offset-y: 4px; } }
@media (min-width: 1200px) { :root { --skevap-logo-offset-y: 2px; } }
.brand-reference { position: relative; white-space: nowrap; --skevap-brand-color: #0077e6; }
.brand-spelling { opacity: 0; }
.brand-reference::after { content: ''; position: absolute; inset: 0; background: var(--skevap-brand-color); mask: url(skevap-wordmark.png) center / contain no-repeat; -webkit-mask: url(skevap-wordmark.png) center / contain no-repeat; pointer-events: none; }
/* Product cards share one PNG frame, typography, spacing, and interaction. */
.capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 34px 30px; padding: 0 10px 10px 0; margin-top: 34px; }
.capability-card { position: relative; min-width: 0; border: 1px solid #4d515b; border-radius: 20px; background: #f5f6fb; box-shadow: 10px 10px 0 #665dff; transition: transform .18s ease, box-shadow .18s ease; }
.capability-card:hover { transform: translateY(-3px); box-shadow: 10px 13px 0 #665dff; }
.capability-card:focus-within { outline: 3px solid #0077e6; outline-offset: 4px; }
.capability-card__link { display: flex; flex-direction: column; height: 100%; padding: 26px; color: #24272e; text-decoration: none; }
.capability-card__link:hover { color: #24272e; }
.capability-card__link:focus-visible { outline: none; }
.capability-card__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.capability-card__brand { display: block; flex: 0 0 108px; width: 108px; height: 34.55px; }
.capability-card__brand::after { background: #0077e6; }
.capability-card__brand .brand-spelling { display: block; }
.capability-card__icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #0077e61c; border-radius: 12px; color: #0077e6; background: #eaf1ff; }
.capability-card__icon svg { width: 26px; height: 26px; }
.capability-card__family { width: fit-content; margin: 0 0 9px; color: #606578; font-size: 12px; font-weight: 700; letter-spacing: .055em; line-height: 1.3; text-transform: uppercase; }
.capability-card__title { min-height: 68px; margin: 0 0 14px; font-family: var(--skevap-font-family); font-size: 30px; font-weight: 650; line-height: 1.12; }
.capability-card__description { flex: 1; margin: 0 0 20px; font-size: 17px; line-height: 1.5; }
.capability-card__features { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 24px; list-style: none; }
.capability-card__features li { padding: 5px 9px; border: 1px solid #dcdfea; border-radius: 6px; background: #fff; color: #4c5365; font-size: 12px; line-height: 1.35; }
.capability-card__action { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid #d9ddea; color: #0054b5; font-size: 15px; font-weight: 700; line-height: 1.4; }
.capability-card__action svg { width: 20px; height: 20px; }
.capability-details { padding-left: 22px; margin: 0 0 24px; font-size: 17px; line-height: 1.6; }
.capability-details li + li { margin-top: 8px; }
@media (max-width: 1199.98px) { .capability-card__link { padding: 23px; } }
@media (max-width: 1199.98px) { .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
  .capability-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 28px; margin-top: 28px; }
  .capability-card__link { padding: 24px; }
  .capability-card__title { min-height: 0; font-size: 30px; }
}
.text-white .brand-reference, footer .brand-reference, .gf-legal .brand-reference, .project-status .brand-reference, .search-status .brand-reference { --skevap-brand-color: #fff; }
/* Raster media is unbranded; the same original PNG is placed over each image. */
.brand-media { position: relative; }
.brand-media::after { content: ''; position: absolute; background: var(--media-brand-color, #0077e6); mask: url(skevap-wordmark.png) center / contain no-repeat; -webkit-mask: url(skevap-wordmark.png) center / contain no-repeat; pointer-events: none; }
.brand-media--case::after { left: 6.4%; top: 71.8%; width: 26.2%; height: 11.8%; --media-brand-color: #fff; }
.brand-media--guide::after { left: 7.5%; top: 84.4%; width: 23.5%; height: 5.9%; }
@media (max-width: 991.98px) { .brand-media--case::after { top: calc(71.8% + 6.768px); } }
html { scroll-behavior: auto; scroll-padding-top: 125px; scroll-padding-bottom: 40px; }
section[id] { scroll-margin-top: 24px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #7c67ff; outline-offset: 4px; }
.hamburger-icon { border: 0; background: transparent; padding: 0; cursor: pointer; }
.cookie-notice { position: fixed; z-index: 1100; left: 10px; bottom: 10px; width: min(600px, calc(100vw - 20px)); min-height: 220px; padding: 36px 22px 16px; background: #fff; border: 1px solid #000; border-radius: 4px; color: #30323b; font: 14px/1.4 var(--skevap-font-family); box-shadow: 0 2px 12px #0003; }
.cookie-notice[hidden], .search-status[hidden] { display: none; }
.cookie-notice strong { font-size: 20px; }
.cookie-notice p { margin: 6px 0 12px; font: 13px/15px var(--skevap-font-family); }
.cookie-notice a { color: #5260ec; font-size: 13px; }
.cookie-dismiss { position: absolute; top: 12px; right: 22px; width: 20px; height: 20px; padding: 0; background: none; border: 2px solid #111; border-radius: 50%; color: #111; font: 18px/15px var(--skevap-font-family); }
.cookie-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 9px; margin-bottom: 16px; }
.cookie-actions button { flex: 0 0 auto; white-space: nowrap; border: 3px solid #3f82ec; border-radius: 0; background: #fff; color: #2944b0; font: bold 13px/1.4 var(--skevap-font-family); padding: 7px 14px; box-shadow: 4px 4px #d0d0d0; }
#cookie-notice .cookie-actions button:nth-child(1) { min-width: 167px; }
#cookie-notice .cookie-actions button:nth-child(2) { min-width: 221px; }
#cookie-notice .cookie-actions button:nth-child(3) { min-width: 128px; }
.skevap-dialog { width: min(740px, calc(100% - 32px)); max-height: 85vh; padding: 40px; color: #282c37; border: 1px solid #d9d9f4; border-radius: 20px; box-shadow: 0 24px 90px #25214c55; }
.skevap-dialog::backdrop { background: #141723a8; }
.skevap-dialog h2 { padding-right: 25px; margin-bottom: 22px; font-size: 38px; }
.skevap-dialog p { font-size: 18px; line-height: 1.55; }
.dialog-close { position: absolute; top: 10px; right: 14px; border: 0; background: transparent; font-size: 30px; color: #555; }
.dialog-preview { width: 100%; border-radius: 12px; background: #f4f2ff; margin-bottom: 24px; }
.preview-video { display: grid; place-items: center; gap: 8px; aspect-ratio: 16/9; border: 1px solid #d9d8f2; border-radius: 12px; background: linear-gradient(120deg,#f1edff,#dee4ff); color: #5b5fe3; text-align: center; }
.preview-video span { font-size: 46px; }
.preview-video p { margin: 0; }
.search-status { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1200; max-width: calc(100% - 32px); padding: 14px 24px; background: #252935; color: #fff; border-radius: 8px; box-shadow: 0 4px 20px #0002; }
.project-status { margin-top: 18px; color: #dcdfff; font-size: 15px; }
.project-status[hidden] { display: none; }
.search-highlight { outline: 3px solid #8b6fff; outline-offset: 6px; }
#build-stats .counter-item { min-height: 225.1875px !important; }
#project-form .has-value textarea.small { min-height: 65px; }
#project-form .gform_footer { margin-top: 46px !important; }
#project-form input, #project-form select, #project-form textarea { scroll-margin-top: 125px; scroll-margin-bottom: 40px; }
@media (min-width: 1200px) {
  .header-top.search-open #menu-pre-nav > li:not(.mega-menu__desktop--search) { display: none !important; }
}
@media (max-width: 1199.98px) {
  body.menu-open { overflow: hidden; }
  .inner-mobile-mega-menu { overflow-y: auto; }
}
@media (max-width: 991.98px) {
  #build-stats .counter-item { min-height: 200px !important; }
  #build-stats .counter-item:last-child { min-height: 225.1875px !important; }
  #portfolio .row.mt-lg-5 > div:first-child p:not(.text-violet) { min-height: 230.34375px; }
}
@media (max-width: 575px) {
  .cookie-notice { left: 0; bottom: 5px; width: 100%; min-height: 350px; padding: 36px 22px 16px; border-radius: 0; }
  .cookie-notice strong { font-size: 15px; }
  .cookie-notice p { font-size: 14px; }
  .cookie-actions { flex-direction: column; gap: 11px; margin-top: 14px; margin-bottom: 18px; }
  .cookie-actions button { min-height: 40px; font-size: 11px; padding: 7px 4px; }
  .skevap-dialog { padding: 28px 22px; }
  .skevap-dialog h2 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* The beta invitation occupies only its visible corner-card bounds. */
.beta-notice { box-sizing: border-box; position: fixed; z-index: 90; right: max(24px, env(safe-area-inset-right)); bottom: calc(var(--beta-keyboard-offset, 0px) + max(24px, env(safe-area-inset-bottom))); width: min(350px, calc(100% - 48px)); max-height: min(560px, calc(var(--beta-viewport-height, 100dvh) - var(--beta-top-clearance, 16px) - max(24px, env(safe-area-inset-bottom)))); padding: 20px 20px 24px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #dcdfea; border-radius: 16px; background: #fff; color: #282c37; box-shadow: 0 8px 32px #25214c24; font: 15px/1.5 var(--skevap-font-family); }
.beta-notice[hidden], .beta-notice [hidden] { display: none !important; }
.beta-close-row { position: sticky; top: -12px; z-index: 1; height: 0; }
.beta-notice .cookie-dismiss { position: absolute; top: -12px; right: -12px; display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 0; border-radius: 10px; background: #fff; color: #606578; cursor: pointer; }
.beta-notice .cookie-dismiss:hover { background: #f1f3f8; color: #282c37; }
.beta-notice h2 { margin: 0 0 10px; padding-right: 32px; color: #24272e; font: 650 20px/1.25 var(--skevap-font-family); letter-spacing: -.02em; }
.beta-notice #beta-description { margin: 0; color: #535a6a; font-size: 14px; line-height: 1.45; }
.beta-signup-form { margin: 18px 0 0; }
.beta-signup-form > input { box-sizing: border-box; display: block; width: 100%; min-height: 48px; padding: 11px 12px; border: 1px solid #aab0bf; border-radius: 8px; background: #fff; color: #282c37; font: 16px/1.5 var(--skevap-font-family); }
.beta-signup-form > input::placeholder { color: #687083; opacity: 1; }
.beta-signup-form > input:focus-visible { border-color: #0077e6; outline: 3px solid #0077e633; outline-offset: 1px; }
.beta-signup-form > input[aria-invalid="true"] { border-color: #a32121; }
.beta-primary { display: block; box-sizing: border-box; width: 100%; min-height: 48px; margin: 12px 0 0; padding: 11px 14px; white-space: nowrap; border: 1px solid #0064c2; border-radius: 8px; background: #0070d9; color: #fff; font: 600 16px/1.5 var(--skevap-font-family); cursor: pointer; }
.beta-primary:hover { background: #0064c2; }
.beta-primary:active { background: #0054a3; }
.beta-primary:disabled { background: #426fa0; border-color: #426fa0; cursor: wait; }
.beta-notice button:focus-visible, .beta-footer a:focus-visible { outline: 3px solid #0077e6; outline-offset: 3px; }
.beta-email-error, .beta-signup-status { margin: 8px 0 0; color: #a32121; font-size: 14px; line-height: 1.5; }
.beta-email-error:empty, .beta-signup-status:empty, .beta-signup-trap { display: none; }
.beta-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 20px; padding: 0; text-align: center; }
.beta-footer a { color: #535a6a; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.beta-footer a:hover { color: #0054b5; }
@media (max-width: 575.98px) {
  .beta-notice { right: max(16px, env(safe-area-inset-right)); bottom: calc(var(--beta-keyboard-offset, 0px) + max(16px, env(safe-area-inset-bottom))); width: min(350px, calc(100% - max(16px, env(safe-area-inset-right)) - max(16px, env(safe-area-inset-left)))); max-height: min(560px, calc(var(--beta-viewport-height, 100dvh) - var(--beta-top-clearance, 16px) - max(16px, env(safe-area-inset-bottom)))); padding: 20px 20px 24px; }
  .beta-notice h2 { font-size: 20px; }
}
.beta-signup-status[data-state="pending"], .beta-signup-status[data-state="success"] { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }



.beta-notice input, .beta-notice .beta-primary, .beta-footer a { scroll-margin-top: 64px; scroll-margin-bottom: 12px; }

/* Success replaces the request content while the branded close row stays available. */
.beta-notice { transition: height .23s ease; }
#beta-confirmation { margin: 4px 0 0; text-align: center; }
.beta-confirmation-art { display: block; width: 76px; height: 76px; margin: 0 auto 18px; }
#beta-confirmation h2 { margin-bottom: 10px; padding-right: 0; }
#beta-confirmation-description { margin: 0; color: #535a6a; font-size: 15px; line-height: 1.5; }
.beta-notice[data-state="leaving-form"] .beta-request-content { animation: beta-form-out .16s ease-in both; }
.beta-notice[data-state="entering"] #beta-confirmation { animation: beta-success-in .23s ease-out both; }
.beta-confirmation-check { transform-origin: 60px 57px; }
.beta-notice[data-state="entering"] .beta-confirmation-check { animation: beta-check-in .16s .06s ease-out both; }
.beta-notice[data-state="exiting"] { animation: beta-card-out .14s ease-in both; }
@keyframes beta-form-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes beta-success-in { from { opacity: 0; transform: translateY(5px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes beta-check-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@keyframes beta-card-out { to { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  .beta-notice { transition: none; }
  .beta-notice[data-state] .beta-request-content, .beta-notice[data-state] #beta-confirmation, .beta-notice[data-state] .beta-confirmation-check, .beta-notice[data-state="exiting"] { animation: none; }
}

/* Keep the last word together as the plain-text heading wraps. */
#technology .platform-word { white-space: nowrap; }

/* Platform logos retain their proportions above their labels. */
#technology .platform-tile { text-align: center; }
#technology .platform-art { display: flex; align-items: center; justify-content: center; height: 72px; }
#technology .platform-image { display: block; width: 64px; height: 64px; max-width: 100%; object-fit: contain; }
#technology .platform-caption { margin: 12px 0 0; color: #535a6a; font-size: 16px; font-weight: 500; line-height: 1.5; }