/* OX Origin 2026 Joomla template layer.
   ox.css is the approved mockup stylesheet, unchanged. This file adds what the CMS needs:
   self-hosted fonts, the Products dropdown and mobile menu, SP Page Builder / Joomla resets,
   article and blog layouts, the restyled contact form, system messages and small extras. */

/* ---------- fonts (Roboto / Roboto Mono, SIL OFL 1.1, self-hosted) ---------- */
@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/roboto-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/roboto-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/roboto-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/roboto-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Roboto;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/roboto-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Roboto;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/roboto-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Roboto;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/roboto-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Roboto;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/roboto-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Roboto;font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/roboto-latin-900-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Roboto;font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/roboto-latin-ext-900-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/roboto-mono-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/roboto-mono-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/roboto-mono-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Roboto Mono";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/roboto-mono-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- base / a11y ---------- */
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:10px;background:var(--cyan);color:#fff;font-weight:700}
.skip-link:focus{top:12px}
.ox-main{display:block;min-height:40vh}
.ox-main:focus{outline:none}

/* ---------- header: Products dropdown ---------- */
.nav-dd{position:relative;display:flex;align-items:center}
.nav-dd-toggle{position:relative;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:10px;color:#c9d8e3;font:500 15.5px/1 Roboto,"Segoe UI",system-ui,sans-serif;background:none;border:0;cursor:pointer}
.nav-dd-toggle:hover,.nav-dd.is-open .nav-dd-toggle{color:#fff;background:rgba(255,255,255,.04)}
.nav-dd-toggle.is-active{color:#fff}
.nav-dd-toggle.is-active::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--cyan),var(--orange))}
.nav-dd-toggle .caret{transition:transform .2s}
.nav-dd-menu{position:absolute;left:0;top:calc(100% + 6px);min-width:280px;padding:8px;border-radius:14px;border:1px solid var(--line2);background:rgba(6,18,42,.97);box-shadow:0 24px 60px -18px rgba(0,0,0,.75);z-index:60}
.nav-dd-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.nav-dd:not(.is-closed):hover .nav-dd-menu,.nav-dd:not(.is-closed):focus-within .nav-dd-menu,.nav-dd.is-open .nav-dd-menu{display:grid;gap:2px}
.nav-dd:not(.is-closed):hover .caret,.nav-dd.is-open .caret{transform:rotate(180deg)}
.nav .nav-dd-menu a{display:flex;align-items:center;gap:12px;height:auto;min-height:46px;padding:10px 14px;border-radius:10px;white-space:nowrap;color:#dce8f3}
.nav .nav-dd-menu a:hover,.nav .nav-dd-menu a.is-current{background:rgba(255,255,255,.05);color:#fff}
.nav .nav-dd-menu a::after{display:none}
.dd-dot{flex:none;width:9px;height:9px;border-radius:50%}
.dd-tdc .dd-dot{background:var(--tdc-500);box-shadow:0 0 12px rgba(31,182,213,.7)}
.dd-mars .dd-dot{background:var(--mars-500);box-shadow:0 0 12px rgba(245,146,46,.6)}
.nav .nav-contact-m{display:none}
.burger{cursor:pointer}
.burger .i-close{display:none}
.nav-open .burger .i-open{display:none}
.nav-open .burger .i-close{display:block}

/* ---------- header: mobile menu ---------- */
@media (max-width:1080px){
  .nav-open .nav{display:flex;position:fixed;left:0;right:0;top:76px;bottom:0;flex-direction:column;align-items:stretch;gap:2px;margin:0;padding:18px 20px 40px;background:#030a1a;overflow-y:auto;z-index:49}
  .nav-open .nav>a,.nav-open .nav-dd-toggle{height:52px;padding:0 14px;font-size:18px;width:100%;justify-content:flex-start}
  .nav-open .nav a.is-active::after,.nav-open .nav-dd-toggle.is-active::after{display:none}
  .nav-open .nav a.is-active,.nav-open .nav-dd-toggle.is-active{color:#fff;background:rgba(var(--c2-rgb),.1)}
  .nav-open .nav-dd{display:block}
  .nav-open .nav-dd-toggle .caret{display:none}
  .nav-open .nav-dd-menu{display:grid;position:static;min-width:0;padding:0 0 6px 14px;border:0;background:none;box-shadow:none}
  .nav-open .nav .nav-dd-menu a{white-space:normal;font-size:16px}
  .nav-open .nav .nav-contact-m{display:flex;align-items:center;margin-top:10px;color:#fff;border:1px solid var(--line2)}
  .nav-open{overflow:hidden}
  .nav-open .hdr{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(3,10,26)}
}
@media (max-width:720px){.nav-open .nav{top:64px}}

/* ---------- SP Page Builder: let the raw HTML sections own the layout ---------- */
.ox2026 #sp-page-builder,.ox2026 .sp-page-builder,.ox2026 .page-content.builder-container{margin:0;padding:0;background:none}
.ox2026 #sp-page-builder .sppb-section{margin:0;padding:0}
.ox2026 #sp-page-builder .sppb-row-container,.ox2026 #sp-page-builder .sppb-container-inner{max-width:none;width:100%;padding:0;margin:0}
.ox2026 #sp-page-builder .sppb-row{margin:0}
.ox2026 #sp-page-builder .sppb-row>[class*=sppb-col-]{padding:0}
.ox2026 #sp-page-builder .sppb-column{padding:0}
.ox2026 #sp-page-builder .addon-root-raw-html,.ox2026 #sp-page-builder .addon-root-raw-html>div,.ox2026 #sp-page-builder .sppb-addon-raw-html{margin:0;padding:0}
.ox2026 #sp-page-builder .addon-root-raw-html .sppb-addon-content{padding:0}
.ox2026 .sppb-addon-raw-html .sppb-addon-title{display:none}

/* ---------- contact page: Form Builder addon (same fields and settings, new look) ---------- */
.ox-contact-sec .sppb-column-addons{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:start;width:100%;max-width:1200px;margin:0 auto;padding:24px 28px 112px}
.ox-contact-sec .sppb-addon-wrapper{margin:0!important}
.ox2026 .ox-contact-form{position:relative;border-radius:22px;padding:44px 40px;border:1px solid var(--line);background:linear-gradient(165deg,rgba(16,44,104,.55),rgba(7,20,46,.75));overflow:hidden}
.ox2026 .ox-contact-form .sppb-addon-content form.sppb-addon-form-builder-form{display:flex;flex-wrap:wrap;margin:0 -10px!important;row-gap:20px;width:auto!important}
.ox2026 .ox-contact-form .sppb-form-group,.ox2026 .ox-contact-form .sppb-form-check,.ox2026 .ox-contact-form .sppb-form-builder-btn{padding:0 10px!important;margin:0!important}
.ox2026 .ox-contact-form .sppb-form-group label{display:block;font-size:14px;font-weight:600;color:#dbe9f2;margin:0 0 8px;line-height:22px}
.ox2026 .ox-contact-form .sppb-field-required{color:var(--orange)}
.ox2026 .ox-contact-form .sppb-form-control{width:100%;min-height:54px;height:auto;padding:14px 18px!important;border-radius:14px;border:1px solid var(--line2);background:rgba(4,12,30,.6);color:#fff;font:16px/1.4 Roboto,system-ui,sans-serif;box-shadow:none}
.ox2026 .ox-contact-form textarea.sppb-form-control{min-height:160px;resize:vertical}
.ox2026 .ox-contact-form .sppb-form-control::placeholder{color:#5f7a8f}
.ox2026 .ox-contact-form .sppb-form-control:hover{background:rgba(4,12,30,.75)}
.ox2026 .ox-contact-form .sppb-form-control:focus{border-color:var(--cyan2);outline:none;box-shadow:0 0 0 4px rgba(var(--c2-rgb),.12)}
.ox2026 .ox-contact-form .sppb-form-group:has(input[name=captcha_question]){max-width:400px}
.ox2026 .ox-contact-form .sppb-form-check{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;width:100%;font-size:14.5px;color:var(--text)}
.ox2026 .ox-contact-form .sppb-form-check-input{position:static;width:20px;height:20px;margin:2px 0 0;accent-color:var(--cyan);appearance:auto!important;-webkit-appearance:checkbox!important;background:#fff;border:0;float:none!important}
.ox2026 .ox-contact-form .sppb-form-check-label{color:var(--text);font-size:14.5px;line-height:1.55;padding:0!important;margin:0!important}
.ox2026 .ox-contact-form .sppb-form-check-label a{color:var(--cyan2);text-decoration:none;border-bottom:1px solid rgba(var(--c2-rgb),.45)}
.ox2026 .ox-contact-form .sppb-form-builder-btn{width:100%;text-align:left!important;margin-top:0!important}
.ox2026 .ox-contact-form .sppb-form-builder-btn .sppb-btn{display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:0 28px;border:0;border-radius:999px;background:linear-gradient(135deg,var(--cyan2),var(--cyan));color:#fff;font:700 17px/1 Roboto,system-ui,sans-serif;box-shadow:0 10px 30px -8px rgba(var(--c-rgb),.65);transition:transform .2s,box-shadow .2s}
.ox2026 .ox-contact-form .sppb-form-builder-btn .sppb-btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px -10px rgba(var(--c2-rgb),.8);color:#fff}
.ox2026 .ox-contact-form .sppb-form-builder-btn .sppb-btn .fas{order:2;font-size:15px}
.ox2026 .ox-contact-form .sppb-form-builder-required{color:#ff8a8a;font-size:13px}
.ox2026 .ox-contact-form .sppb-ajax-contact-status,.ox2026 .ox-contact-form .sppb-form-builder-status{margin-top:12px;color:#fff}
.ox2026 .ox-contact-form .sppb-alert{margin-top:16px;border-radius:12px}
@media (max-width:1080px){.ox-contact-sec .sppb-column-addons{grid-template-columns:1fr}}
@media (max-width:860px){.ox2026 .ox-contact-form .sppb-form-group{flex:0 0 100%!important;max-width:100%!important;width:100%!important}}
@media (max-width:720px){.ox-contact-sec .sppb-column-addons{padding:12px 20px 68px}.ox2026 .ox-contact-form{padding:28px 22px}.ox2026 .ox-contact-form .sppb-form-builder-btn .sppb-btn{width:100%;justify-content:center}}

/* ---------- Joomla system messages ---------- */
.ox-main joomla-alert,.ox-main #system-message-container .alert{display:block;max-width:1144px;margin:24px auto;padding:16px 20px;border-radius:14px;border:1px solid var(--line2);background:rgba(9,26,58,.9);color:#fff}
.ox-main #system-message-container:empty{display:none}
.ox-main joomla-alert .alert-heading{font-weight:700;margin-bottom:6px}
.ox-main joomla-alert[type=danger],.ox-main joomla-alert[type=error]{border-color:rgba(255,107,107,.5)}
.ox-main joomla-alert .joomla-alert--close{float:right;background:none;border:0;color:#fff;font-size:22px;cursor:pointer}

/* ---------- articles and blogs (com_content) ---------- */
.ox-article,.ox-blog{position:relative}
.ox-article .phero h1{font-size:clamp(38px,5vw,64px);max-width:980px}
.ox-prose{color:var(--text);font-size:17px;line-height:1.75}
.ox-prose>*+*{margin-top:1.1em}
.ox-prose h2{font-size:clamp(24px,2.6vw,32px);margin-top:1.8em}
.ox-prose h3{font-size:clamp(20px,2vw,24px);margin-top:1.6em}
.ox-prose h4{font-size:18px;margin-top:1.4em}
.ox-prose ul,.ox-prose ol{display:grid;gap:8px}
.ox-prose ol{list-style:decimal;padding-left:22px}
.ox-prose ol li{padding-left:4px}
.ox-prose ol li::before{display:none}
.ox-prose img{height:auto;border-radius:14px}
.ox-prose table{width:100%;border-collapse:collapse;font-size:15px}
.ox-prose th,.ox-prose td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.ox-prose th{color:#fff}
.ox-prose strong{color:#e6eef8}
.ox-prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.ox-prose blockquote{margin:1.4em 0;padding:4px 0 4px 20px;border-left:3px solid var(--cyan2);color:#dbe7f3}
.ox-prose code{font:600 .9em var(--mono);color:#e6f4fb}
.ox-prose{max-width:820px}.ox-prose p,.ox-prose li{color:#c3d3de}.ox-prose ul{list-style:disc;padding-left:22px}.ox-prose ul li{padding-left:4px}.ox-prose ul li::before{display:none}.ox-prose li::marker{color:var(--cyan2)}.ox-prose a{border-bottom:1px solid rgba(var(--c2-rgb),.4)}
.ox-video{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--line2);background:#000}
.ox-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ox-article-body{max-width:860px}
.ox-blog-list{display:grid;gap:22px}
.ox-blog-item h2{font-size:clamp(22px,2.4vw,30px)}
.ox-blog-item h2 a{color:#fff}
.ox-blog-item .ox-blog-date{font:600 13px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.ox-blog-item .ox-prose{margin-top:18px}
.ox-pagination{margin-top:48px}
.ox-pagination ul{display:flex;flex-wrap:wrap;gap:8px}
.ox-pagination a,.ox-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;border-radius:10px;border:1px solid var(--line2);color:#dce8f3}
.ox-pagination .active span,.ox-pagination [aria-current] {background:rgba(var(--c2-rgb),.14);color:#fff}
.ox-pf-gallery .pimg img{width:100%;height:100%;object-fit:cover}
.ox-pf-scope .ticks a{border-bottom:1px solid rgba(var(--c2-rgb),.4)}

/* ---------- misc ---------- */
.ox-pos-top,.ox-pos-bottom{padding:24px 0}
.ox-error{min-height:60vh;display:flex;align-items:center}
.ox-error h1{font-size:clamp(44px,6vw,80px)}
.ox-error-debug{margin-top:40px;font-size:13px;overflow:auto}
.ox-preview-pill{position:fixed;right:16px;bottom:16px;z-index:9998;padding:8px 14px;border-radius:999px;background:rgba(3,10,26,.92);border:1px solid var(--line2);color:#cfe4ff;font:600 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
.ox-offline{min-height:100vh;display:grid;place-items:center;padding:28px}
.ox-offline-card{width:100%;max-width:440px;display:grid;gap:14px}
.ox-offline-logo{height:34px;width:auto;margin-bottom:8px}
.ox-offline-form{display:grid;gap:10px}
.ox-offline-form label{font-size:14px;font-weight:600;color:#dbe9f2}
.ox-offline-form input{min-height:50px;padding:12px 16px;border-radius:12px;border:1px solid var(--line2);background:rgba(4,12,30,.6);color:#fff;font:16px Roboto,system-ui,sans-serif}
.ox-offline-form .btn{margin-top:8px;justify-content:center}
.component-only{padding:24px 0}
@media (max-width:860px){.ox-pf-gallery{grid-template-columns:1fr!important}.ox-pf-gallery .plate{grid-row:auto!important;height:300px!important}.ox-pf-scope{padding:28px 22px!important}.ox-pf-next{min-width:0!important}}

/* ---------- cookie banner (plg_system_cookiehint, legacy layout "redimstyle" + blue.css) ----------
   Restyle only: same markup, text, buttons and behaviour. Scoped to body.ox2026 (this template),
   so the Helix template keeps the plugin's own look. Literal OX blue values, so the TDC/MARS
   page palettes do not recolour it. */
body.ox2026 #redim-cookiehint-bottom{padding:0 20px 20px;pointer-events:none;background:none}
body.ox2026 #redim-cookiehint{pointer-events:auto;position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head btns" "text btns";column-gap:32px;row-gap:6px;align-items:center;max-width:1160px;margin:0 auto;padding:22px 26px 22px 28px;border-radius:18px;border:1px solid rgba(130,168,232,.28);background:linear-gradient(165deg,rgba(12,37,80,.97),rgba(5,15,36,.98)) #081a38;box-shadow:0 24px 60px -18px rgba(0,0,0,.8),0 0 0 1px rgba(3,10,24,.6);color:#b3c3d8;font-family:Roboto,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;font-size:15.5px;line-height:1.55;text-align:left;-webkit-font-smoothing:antialiased}
body.ox2026 #redim-cookiehint::before{content:"";position:absolute;left:28px;top:-1px;width:56px;height:2px;border-radius:2px;background:linear-gradient(90deg,#1f7ae0,#8fc2ff)}
body.ox2026 #redim-cookiehint .cookiehead{grid-area:head;padding:0;font-size:inherit}
body.ox2026 #redim-cookiehint .cookiehead .headline{display:block;color:#fff;font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
body.ox2026 #redim-cookiehint .cookiecontent{grid-area:text;font-size:15.5px;line-height:1.55;color:#b3c3d8}
body.ox2026 #redim-cookiehint .cookiebuttons{grid-area:btns;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px 12px;padding:0;margin:0}
body.ox2026 #redim-cookiehint .cookiebuttons .btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;margin:0;padding:0 24px!important;border-radius:999px!important;border:1px solid transparent;font:600 15px/1 Roboto,"Segoe UI",system-ui,sans-serif;letter-spacing:.01em;text-decoration:none!important;white-space:nowrap;cursor:pointer;transition:transform .2s,box-shadow .2s,background-color .2s,border-color .2s}
body.ox2026 #redim-cookiehint .cookiebuttons #cookiehintsubmit.btn{color:#fff!important;background:linear-gradient(135deg,#3a8ef2,#1466c8)!important;box-shadow:0 10px 26px -10px rgba(31,122,224,.75)}
body.ox2026 #redim-cookiehint .cookiebuttons #cookiehintsubmit.btn:hover{color:#fff!important;transform:translateY(-1px);box-shadow:0 14px 32px -10px rgba(79,156,247,.85)}
body.ox2026 #redim-cookiehint .cookiebuttons #cookiehintsubmitno.btn{color:#dce8f3!important;background:rgba(255,255,255,.03)!important;border-color:rgba(130,168,232,.34)}
body.ox2026 #redim-cookiehint .cookiebuttons #cookiehintsubmitno.btn:hover{color:#fff!important;background:rgba(79,156,247,.10)!important;border-color:rgba(143,194,255,.6)}
body.ox2026 #redim-cookiehint #cookiehintinfo{display:flex;flex:0 0 auto;margin:0 2px 0 6px}
body.ox2026 #redim-cookiehint #cookiehintinfo>*{margin:0}
body.ox2026 #redim-cookiehint #cookiehintinfo a{color:#8fc2ff;font-size:14.5px;font-weight:500;text-decoration:none;border-bottom:1px solid rgba(143,194,255,.45);padding-bottom:1px}
body.ox2026 #redim-cookiehint #cookiehintinfo a:hover{color:#fff;border-bottom-color:#fff}
body.ox2026 #redim-cookiehint a:focus-visible{outline:3px solid #8fc2ff;outline-offset:3px}
body.ox2026 #redim-cookiehint .clr{display:none}
@media (max-width:900px){
  body.ox2026 #redim-cookiehint{grid-template-columns:1fr;grid-template-areas:"head" "text" "btns";row-gap:8px}
  body.ox2026 #redim-cookiehint .cookiebuttons{justify-content:flex-start;margin-top:10px}
}
@media (max-width:520px){
  body.ox2026 #redim-cookiehint-bottom{padding:0 10px 10px}
  body.ox2026 #redim-cookiehint{padding:18px 18px 16px;border-radius:16px;font-size:14.5px}
  body.ox2026 #redim-cookiehint .cookiehead .headline{font-size:17px}
  body.ox2026 #redim-cookiehint .cookiecontent{font-size:14.5px}
  body.ox2026 #redim-cookiehint .cookiebuttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  body.ox2026 #redim-cookiehint .cookiebuttons .btn{width:100%;min-height:44px;padding:0 14px!important}
  body.ox2026 #redim-cookiehint #cookiehintinfo{grid-column:1/-1;justify-content:center;margin:4px 0 0}
}
/* v1.0.2: every block that pairs a numbered-marker screenshot (images/mars-product/ui-annot-*) with its numbered list.
   Phones/tablets (<=1080px, where the two columns already stack): title and text first, then the marked image, then the numbered items 1..n.
   Desktop is unchanged. Browsers without :has() keep the previous stacked order. */
@media (max-width:1080px){
  .split:has(img[src*="/ui-annot-"]){display:flex;flex-direction:column;align-items:stretch;gap:0}
  .split:has(img[src*="/ui-annot-"])>div:not(:has(>figure)){display:contents}
  .split:has(img[src*="/ui-annot-"])>div>.kicker{align-self:flex-start}
  .split:has(img[src*="/ui-annot-"])>div:has(>figure){order:1;margin-top:28px}
  .split:has(img[src*="/ui-annot-"])>div>.mt40{order:2;margin-top:32px}
}
/* v1.0.2: MARS hero laptop picture (transparent PNG): no box frame or ring, soft shadow under the laptop only. */
.phero img.mshot[src*="mars-bolt-laptop"]{box-shadow:none;border-radius:0;filter:drop-shadow(0 28px 36px rgba(0,0,0,.55))}
/* v1.0.2: outline-only cards across the company site (approved by Alex: "no background of their own, just an outline").
   Every .card (including cards with an inline background, such as Services "The solution") loses its fill and keeps a
   subtle outline; MARS cards keep their orange outline tint. Icon tiles get a lighter fill. The TDC page body (.is-tdc) is untouched. */
body.ox2026:not(.is-tdc) .card{background:transparent!important;border-color:rgba(130,168,232,.22)}
body.ox2026:not(.is-tdc) .card.card--o,body.ox2026:not(.is-tdc) .card[style*="--o-rgb),.35"]{border-color:rgba(var(--o-rgb),.32)!important}
body.ox2026:not(.is-tdc) .card:hover{border-color:rgba(var(--c2-rgb),.45)}
body.ox2026:not(.is-tdc) .card .ico{background:rgba(var(--c2-rgb),.04)}
body.ox2026:not(.is-tdc) .card--o .ico{background:rgba(var(--o-rgb),.04)}
body.ox2026 .ox-contact-form{background:transparent;border-color:rgba(130,168,232,.22)}
/* v1.0.2: Home hero boxes and Home TDC/MARS product cards, outline-only too (Alex: "all throughout the site").
   Hero boxes keep their existing subtle backdrop blur for readability over the hero photo, no blue fill.
   Product cards keep their pictures and colour glows; the dark plate behind the pictures is removed and the pictures fade out to transparent at the bottom. */
body.ox2026 .hhalf{background:transparent}
body.ox2026 .hhalf--o{background:transparent}
body.ox2026 .prod{background:transparent}
body.ox2026 .prod--tdc .prod-media{background:radial-gradient(420px 240px at 50% 45%,rgba(var(--c-rgb),.18),transparent 70%)}
body.ox2026 .prod--mars .prod-media{background:radial-gradient(400px 220px at 50% 60%,rgba(var(--o2-rgb),.30),transparent 70%)}
body.ox2026 .prod-media::after{display:none}
body.ox2026 .prod-media{-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 100%);mask-image:linear-gradient(180deg,#000 45%,transparent 100%)}
/* v1.0.2: Services "The solution" is one short paragraph now (07-services-copy.sql renames its wrapper grid2 -> sol-one):
   one column at a readable line length, lead-size text, so there is no empty second column. */
.sol-one{display:block;max-width:820px}
.sol-one>p{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:#c9d8e3;margin:0}
/* v1.0.3: screenshot captions (icon + title) sit ABOVE their picture, not below (Alex, 1 Nov 2026).
   Applies to every image + .mshot-cap pair (MARS: Counterpart / Washer / Plate properties, report in Web Browser / MS Word). */
body.ox2026 :is(div,figure):has(>img.mshot+.mshot-cap){display:flex;flex-direction:column}
body.ox2026 :is(div,figure):has(>img.mshot+.mshot-cap)>.mshot-cap{order:-1;margin:0 0 14px}
/* v1.0.4 (desktop/tablet >= 861px only; phone layout unchanged): MARS property screenshots row
   (Counterpart / Washer / Plate). Column widths follow each picture's own shape (natural aspect
   1058x732, 663x503, 327x557), so all three pictures get the SAME height, tops and bottoms on one
   line, no cropping or distortion; each title is centred over its own picture. */
@media (min-width:861px){
  .grid3:has(>div>img.mshot[src*="ui-counterpart-properties"]+.mshot-cap){grid-template-columns:1.4454fr 1.3181fr .5871fr;column-gap:44px;align-items:start}
  .grid3:has(>div>img.mshot[src*="ui-counterpart-properties"]+.mshot-cap)>div{align-items:stretch!important;min-width:0}
  .grid3:has(>div>img.mshot[src*="ui-counterpart-properties"]+.mshot-cap)>div>img.mshot{width:100%!important;height:auto!important;max-height:none!important;max-width:100%!important}
  .grid3:has(>div>img.mshot[src*="ui-counterpart-properties"]+.mshot-cap)>div>.mshot-cap{justify-content:center;white-space:nowrap;margin:0 0 18px}
}
@media (min-width:861px) and (max-width:1180px){
  .grid3:has(>div>img.mshot[src*="ui-counterpart-properties"]+.mshot-cap){column-gap:36px}
  .grid3:has(>div>img.mshot[src*="ui-counterpart-properties"]+.mshot-cap)>div>.mshot-cap{font-size:11px;letter-spacing:.06em;gap:8px}
  .grid3:has(>div>img.mshot[src*="ui-counterpart-properties"]+.mshot-cap)>div>.mshot-cap img{width:24px;height:24px}
}
/* v1.0.5 (desktop >= 1081px only, where .split has two columns; tablet/phone stacked layout unchanged):
   Home "Founders / Engineers at heart." + Vision card. The Vision card had an inline align-self:center, so it
   was centred on the whole left column (heading + cards). Now the left column's pieces sit on their own grid
   rows and the Vision card spans exactly the founder-cards row: same top, same bottom, text centred vertically. */
@media (min-width:1081px){
  .split:has(>div>.grid2.keep2){grid-template-rows:auto auto auto;row-gap:0;align-items:stretch}
  .split:has(>div>.grid2.keep2)>div:has(>.grid2.keep2){display:contents}
  .split:has(>div>.grid2.keep2)>div>.kicker{grid-column:1;grid-row:1;justify-self:start;align-self:end}
  .split:has(>div>.grid2.keep2)>div>.h2{grid-column:1;grid-row:2;margin-bottom:40px}
  .split:has(>div>.grid2.keep2)>div>.grid2.keep2{grid-column:1;grid-row:3;margin-top:0}
  .split:has(>div>.grid2.keep2)>.card{grid-column:2;grid-row:3;align-self:stretch!important;display:flex;flex-direction:column;justify-content:center;margin:0}
  .split:has(>div>.grid2.keep2)>.card>.kicker{align-self:flex-start}
}
/* v1.0.5: blog pagination (MARS release notes). The box style was applied to every span, so first/prev/next/last
   got a second box from their inner icon span, and the icon font is not loaded in this template (empty boxes).
   Now only .page-link is the box; the icon spans become plain text arrows; disabled buttons are dimmed. */
.ox-pagination ul{list-style:none;margin:0;padding:0}
.ox-pagination .page-link [class^="icon-"]{display:inline;min-width:0;height:auto;padding:0;border:0;border-radius:0;background:none;font-size:20px;line-height:1;font-weight:400;color:inherit}
.ox-pagination .icon-angle-double-left::before{content:"\00AB"}
.ox-pagination .icon-angle-left::before{content:"\2039"}
.ox-pagination .icon-angle-right::before{content:"\203A"}
.ox-pagination .icon-angle-double-right::before{content:"\00BB"}
.ox-pagination a.page-link:hover{border-color:rgba(var(--c2-rgb),.6);color:#fff}
.ox-pagination .disabled .page-link{opacity:.35;cursor:default}
/* v1.0.5 (>= 861px, where the two bio cards sit side by side; phone stacked layout unchanged): About page founder
   bio cards. Each card shares its parent's rows (subgrid): bio / divider + Education & Experience / LinkedIn.
   Both cards are the same height, the divider + EDUCATION / EXPERIENCE headings sit on the same line in both cards,
   pushed down below the longer bio, and the LinkedIn icons line up at the bottom. */
@media (min-width:861px){
  .grid2:has(>.person-card+.person-card){grid-auto-rows:auto;align-items:stretch}
  .grid2:has(>.person-card+.person-card)>.person-card{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}
  .grid2:has(>.person-card+.person-card)>.person-card>.meta-blocks{align-self:start}
  .grid2:has(>.person-card+.person-card)>.person-card>.icon-link{align-self:end;justify-self:start}
}
/* v1.0.6 (<= 1080px only, where the hamburger shows; desktop >= 1081px unchanged): bigger header on phones/tablets.
   Logo about 1.4-1.5x (30 -> 42px tablet, 26 -> 39px phone, about 190px wide so it fits next to the button at 360px), menu button 44 -> 52px tap target
   with a 30px icon, opened-menu items 18 -> 20px text on 56px rows (Products sub-items 16 -> 18px on 52px rows). */
@media (max-width:1080px){
  .hdr .wrap{gap:16px}
  .hdr-logo{flex:none;display:flex;align-items:center}
  .hdr-logo img{height:42px;width:auto}
  .burger{flex:none;width:52px;height:52px;border-radius:14px}
  .burger svg{width:30px;height:30px}
  .nav-open .nav{padding:20px 20px 40px;gap:4px}
  .nav-open .nav>a,.nav-open .nav-dd-toggle{height:56px;padding:0 16px;font-size:20px}
  .nav-open .nav .nav-dd-menu a{min-height:52px;font-size:18px;padding:10px 16px}
  .nav-open .nav-dd-menu{padding:0 0 8px 16px}
  .nav-open .nav .nav-contact-m{margin-top:14px}
  .dd-dot{width:10px;height:10px}
}
@media (max-width:720px){
  .hdr .wrap{height:72px}
  .hdr-logo img{height:39px;width:auto}
  .nav-open .nav{top:72px}
}