/* IDJ Platform approved corporate brand — review branch */
:root{--idj-navy:#0B1F4B;--idj-blue:#0066FF;--idj-teal:#00E5D6;--idj-violet:#8B3DFF;--ops-amber:#FF8A00;--ops-orange:#FF6B00;--bg:#071631;--deep:#0B1F4B;--ink:#172341;--muted:#52637E;--pale:#F4F7FB;--line:#DDE6F1;--lime:#00E5D6;--lime-deep:#0066FF;--teal:#00E5D6}
body{color:#0F172A}
a:focus-visible,button:focus-visible,summary:focus-visible{outline-color:#0066FF}
.brand-symbol{width:44px;height:49px;flex-shrink:0;display:inline-flex;align-items:center}
.brand-symbol img,.graphic-brand img{display:block;max-width:100%;height:auto;object-fit:contain}
.brand-wordmark span{color:#A9CEFF}
.hero{background:radial-gradient(ellipse at 83% 34%,rgba(0,102,255,.21),transparent 45%),radial-gradient(ellipse at 53% 90%,rgba(139,61,255,.11),transparent 50%),linear-gradient(117deg,#071631 0%,#0B1F4B 60%,#101A3B 100%)!important}
.eyebrow-dot,.status-dot{background:#00E5D6}
.hero h1 em{color:#00E5D6}
.hero-intro{color:#C3D5EB}
.hero-footnote{color:#A7BAD5}
.small-rule{background:linear-gradient(90deg,#0066FF,#00E5D6,#8B3DFF)}
.button-primary{color:#fff;background:#0066FF;box-shadow:0 12px 32px rgba(0,102,255,.22)}
.button-primary:hover{background:#0050CE}
.nav-cta:hover{background:#0066FF;color:white!important}
.preview-glow{background:radial-gradient(circle at 50% 50%,rgba(0,102,255,.3),transparent 65%)}
.app-window{box-shadow:0 40px 100px rgba(0,8,31,.5),0 0 0 10px rgba(255,255,255,.025)}
.app-rail{background:#0B1F4B;color:#B7CCED}
.rail-square.selected{background:#0066FF;color:#fff}
.app-title strong,.ops-logo-panel span{color:#FF6B00}
.mini-glyph{background:#F0F6FF}
.mini-glyph img{height:23px;width:20px;object-fit:contain}
.app-topbar{background:#F7FAFF;color:#132A52}
.app-screen{background:#F0F5FC}
.app-heading-row h2,.metric-value,.panel-head{color:#0B1F4B}
.node-icon{background:#E1EEFF;color:#0066FF}
.flow-line{background:#85C9ED}
.bars span{background:linear-gradient(#0066FF,#ADD2FF)}
.bars span:nth-child(3n){background:linear-gradient(#00C6BD,#B2FFF4)}
.floating-tag-icon{background:#E2F0FF;color:#0066FF}
.principles{background:#0E2853;color:#E2F2FF}
.principle-list i{color:#00E5D6}
.product-feature{border-color:#DDE6F1}
.ops-logo-panel{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;margin-bottom:16px;border:1px solid #DDE6F1;border-radius:16px;background:#F7FAFF}
.ops-logo-panel>img{width:48px;height:55px;object-fit:contain}
.ops-logo-panel strong{font-size:1.6rem;line-height:1.1;color:#0B1F4B}
.ops-logo-panel small{font-size:10px;color:#52637E;letter-spacing:.09em;font-weight:700}
.graphic-brand{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.graphic-brand>img{width:92px;max-height:110px}
.section-about{background:#0B1F4B}
.about-graphic{background:linear-gradient(135deg,rgba(0,102,255,.18),rgba(139,61,255,.12))}
/* Accessibility: the dark About section needs light foregrounds.
   Brand V2 changed its background but inherited dark text from the light theme. */
.section-about .about-copy h2{color:#F7FAFF}
.section-about .about-copy h2 .accent{color:#00E5D6}
.section-about .about-copy>p{color:#DAE7F8}
.section-about .section-eyebrow{color:#A9D8FC}
.section-about .section-eyebrow span:before{background:#00E5D6}
.section-about .location{color:#DAE7F8;border-top-color:rgba(218,231,248,.38)}
.section-about .location-dot{background:#00E5D6}
.footer{background:#071631}
.legal-wrap{background:#F4F7FB}
.legal a{color:#0066FF}
@media(max-width:600px){.brand-symbol{width:35px;height:42px}.brand-symbol img{width:35px}.ops-logo-panel strong{font-size:1.35rem}.graphic-brand>img{width:64px}}


/* UI-01 | Marketing readability, hierarchy and interactions — October 2026
   Additive overrides: master IDJ brand and existing layouts remain intact. */

/* Site-wide readability. Mobile supersedes legacy small print. */
.section-eyebrow,.contact-eyebrow{font-size:12px;letter-spacing:.105em}
.section-eyebrow{color:#245B76}
.section-eyebrow.light{color:#ABD9FF}
.section-intro>p,.why-head p,.approach-grid>div>p{font-size:16px;line-height:1.76}
.module p,.value-card p,.approach-step p,.faq-list details p{font-size:15px;line-height:1.72}
.module h4{font-size:17px}
.product-note{font-size:14px;line-height:1.65;color:#334155}
.product-note .note-icon{border-color:#64748B;color:#334155;width:20px;height:20px}
.mockup-caption{color:#C6D5EA;font-size:11px}
.hero-footnote{font-size:13px}
.principle-row>span{font-size:11px;color:#D3E9FC}
.main-nav{font-size:14px}
.footer-main>div>p{font-size:14px;color:#C8D8E9}
.footer-links>div{font-size:14px}
.footer-links span{color:#B5CCEA;font-size:12px}
.footer-bottom{color:#B5C7DC;font-size:12px}

/* Brand-coherent product display: orange only for the Ops family. */
.section-product{background:#F7FAFF}
.section-product .accent{color:#D54C00}
.product-story{background:linear-gradient(165deg,#0B1F4B,#142E63);color:#F7FAFF}
.product-story h3{color:#FFFFFF}
.product-story p{color:#DCE9FD;font-size:15px}
.product-story .status{color:#D3E8FF;border-color:rgba(218,231,248,.33)}
.product-story .text-link{color:#8FEFFF;border-bottom-color:#45E3F0;font-size:15px}
.product-story .text-link:hover{color:#FFFFFF}
.module-icon{background:#E8F0FF;color:#0066FF}
.module h4{color:#102957}
.module p{color:#475569}
.module{transition:background-color .2s ease}
.module:hover{background:#F2F7FF}

/* Readable dark values section and accessible interactive challenge selector. */
.section-problems{background:radial-gradient(ellipse at 82% 10%,rgba(0,102,255,.15),transparent 45%),#081D40;color:#F7FAFF}
.section-problems .why-head p{color:#D9E7F8}
.value-card{display:block;width:100%;appearance:none;text-align:left;font:inherit;color:inherit;cursor:pointer;background:rgba(255,255,255,.035);border:1px solid rgba(178,211,255,.36);transition:background .2s,border-color .2s,transform .2s}
.value-card h3{color:#FFFFFF}
.value-card p{color:#D5E4F6}
.value-card .value-number{color:#B8D9FF}
.value-card .value-symbol{color:#00E5D6}
.value-card .value-cta{display:block;margin-top:16px;color:#80EAF2;font-size:13px;font-weight:800}
.value-card:hover,.value-card[aria-pressed="true"]{border-color:#00E5D6;background:rgba(0,102,255,.14);transform:translateY(-2px)}
.value-card:focus-visible{outline:3px solid #00E5D6;outline-offset:3px}
.challenge-response{margin-top:20px;padding:24px 28px;border:1px solid rgba(137,192,255,.35);border-left:4px solid #00E5D6;border-radius:12px;background:#122E5E}
.challenge-response .response-kicker{display:block;color:#A8EDFA;font-size:12px;font-weight:800;letter-spacing:.09em;margin-bottom:7px}
.challenge-response h3{color:#FFFFFF;font-size:23px;margin:0 0 8px}
.challenge-response p{color:#DCEBFA;font-size:15px;margin:0;max-width:850px;line-height:1.75}
.challenge-response a{color:#8FEFFF;text-decoration:underline;text-underline-offset:4px;display:inline-block;margin-top:12px;font-size:14px;font-weight:700}
.challenge-response a:focus-visible{outline-color:#00E5D6}

/* About section and labelled logo remain legible at small widths. */
.section-about .about-copy>p{font-size:16px;line-height:1.8;color:#DCEAFF}
.section-about .location{font-size:14px;line-height:1.65}
.section-about .graphic-sub{color:#D7E8FC;font-size:12px}
.about-graphic{background:linear-gradient(135deg,#12386F,#15245D)}
.graphic-mark{color:#FFFFFF}
.graphic-mark span{color:#00E5D6}

/* Contact area: tone down saturated background, elevate email to conversion CTA. */
.contact-card{background:radial-gradient(circle at 93% 6%,rgba(0,229,214,.18),transparent 39%),linear-gradient(120deg,#E8F7FF,#F3FBFE);border:1px solid #C7E5F8;color:#0B1F4B;box-shadow:0 22px 55px rgba(11,31,75,.08)}
.contact-eyebrow{color:#0B4671}
.contact-eyebrow .eyebrow-dot{background:#0066FF}
.contact-card h2{color:#0B1F4B}
.contact-card h2 em{color:#0059DE}
.contact-card p{color:#334C68;font-size:16px;line-height:1.75}
.contact-pattern{border-color:rgba(0,102,255,.15)}
.button-dark{background:#0B1F4B;color:#FFFFFF}
.button-dark:hover{background:#0066FF}
.contact-direct{display:inline-flex;align-items:center;gap:9px;margin-left:19px;color:#0B1F4B;font-size:17px;font-weight:800;line-height:1.5;text-decoration:underline;text-underline-offset:4px;overflow-wrap:anywhere}
.contact-direct:hover{color:#0051CA}
.contact-direct:focus-visible{outline:3px solid #0066FF;outline-offset:4px}

/* More visible FAQ controls, policy navigation and focus states. */
.faq-list summary{font-size:16px;color:#142A48}
.faq-list details p{color:#40536C}
.faq-list details[open] summary{color:#005BD3}
.faq-plus{color:#0066FF}
.legal-header{background:#0B1F4B}
.legal-header .legal-top-link{color:#E8F4FF;font-size:14px}
.legal-header .brand{color:#FFFFFF}
.legal p,.legal li{font-size:16px;line-height:1.75;color:#334155}
.legal-back{color:#0052BC;font-size:15px}
.legal-sub{color:#475569;font-size:14px}
.legal a{text-decoration:underline;text-underline-offset:3px}
.legal-header a{text-decoration:none}
.legal a:focus-visible{outline:3px solid #0066FF;outline-offset:3px}

/* Small purposeful enhancements: scroll progress, skip navigation and back-to-top. */
.scroll-progress{position:fixed;top:0;left:0;width:0;height:3px;background:linear-gradient(90deg,#00E5D6,#0066FF,#8B3DFF);z-index:100;pointer-events:none;transform-origin:left}
.back-to-top{position:fixed;right:18px;bottom:20px;z-index:40;width:46px;height:46px;display:grid;place-items:center;border:1px solid #BFD5F4;background:#0B1F4B;color:#FFFFFF;border-radius:50%;font-size:24px;box-shadow:0 7px 22px rgba(9,24,50,.22);text-decoration:none;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:none}
.back-to-top:hover{background:#0066FF}
.back-to-top:focus-visible{outline:3px solid #00E5D6;outline-offset:3px}
@media(min-width:621px){.button:hover,.nav-cta:hover{transform:translateY(-2px)}}
@media(max-width:880px){.main-nav.is-open{background:#0B1F4B}.main-nav a{font-size:15px}.main-nav .nav-cta{border-color:#B7CCEC}}
@media(max-width:620px){
  .hero-intro,.section-intro>p,.why-head p,.approach-grid>div>p,.about-copy>p{font-size:16px;line-height:1.75}
  .section-eyebrow,.contact-eyebrow{font-size:12px}
  .hero-footnote{font-size:12px}
  .module p,.value-card p,.approach-step p,.faq-list details p{font-size:15px}
  .module h4{font-size:16px}
  .section-product .product-note{font-size:14px}
  .value-card .value-cta{font-size:14px}
  .challenge-response{padding:22px 20px}
  .challenge-response h3{font-size:21px}
  .challenge-response p{font-size:15px}
  .contact-card{padding:36px 23px}
  .contact-card h2{font-size:clamp(32px,9.5vw,44px)}
  .contact-card p{font-size:16px}
  .contact-direct{margin:16px 0 0;font-size:16px;display:flex}
  .faq-list summary{font-size:16px}
  .graphic-sub{font-size:12px}
  .footer-bottom{font-size:12px}
  .footer-links>div{font-size:14px}
  .back-to-top{width:44px;height:44px;bottom:18px;right:14px}
}
@media(prefers-reduced-motion:reduce){.value-card,.back-to-top,.module{transition:none!important}.value-card:hover,.value-card[aria-pressed="true"]{transform:none}}