/* One Box Vision additions on top of the shared styles.css */
:root { --obv-navy:#06192f; --obv-navy-2:#1b2535; --obv-orange:#f89921; --obv-grey:#d4e3e5; }

/* Navy navigation with the One Box Vision logo */
.navbar { padding:.6rem 0; }
.logo-img { height:52px; width:auto; }
.nav-menu a { color:#fff; }
.nav-menu a:hover { color:var(--obv-orange); }
.nav-menu a::after { background:var(--obv-orange); }
.mobile-menu-toggle span { background:#fff; }
@media (max-width:768px){ .nav-menu { background:var(--obv-navy); } }

/* Hero */
.hero { text-align:left; justify-content:flex-start; background-image:var(--hero-image); }
.hero::before { content:""; position:absolute; inset:0; background:
  radial-gradient(ellipse at 85% 30%, rgba(248,153,33,.18), transparent 55%); }
.hero-overlay { background:transparent; }
.hero-content { max-width:900px; }
.hero-buttons { justify-content:flex-start; }
.hero-eyebrow { display:inline-block; font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; color:var(--obv-orange); margin-bottom:1rem; font-weight:600; }
.hero-products { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:2rem; }
.hero-products span { border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:.3rem .9rem; font-size:.85rem; }
.btn-primary { background:var(--obv-orange); color:var(--obv-navy); border-color:var(--obv-orange); font-weight:600; }
.btn-primary:hover { background:#ffb04a; border-color:#ffb04a; }
.btn-secondary { border-color:#fff; color:#fff; }

/* Orange band like the datasheet title bar */
.band { background:var(--obv-orange); color:#fff; padding:1.1rem 0; font-size:1.6rem; font-weight:300; }
.band strong { font-weight:700; }

.section-header h2 { color:var(--obv-navy); }

/* Product cards */
.products-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; }
.product-card { background:#fff; border:1px solid var(--border-color); border-top:5px solid var(--obv-orange); border-radius:12px; padding:2rem; box-shadow:var(--shadow); transition:var(--transition); display:flex; flex-direction:column; }
.product-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.product-card .product-kicker { font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color:var(--obv-orange); font-weight:700; }
.product-card h3 { font-size:1.5rem; margin:.4rem 0 .8rem; color:var(--obv-navy); }
.product-card p { color:var(--text-light); flex:1; }
.product-card ul { list-style:none; margin:1rem 0 1.5rem; padding:0; }
.product-card li { padding:.3rem 0 .3rem 1.4rem; position:relative; color:var(--text-color); }
.product-card li::before { content:""; position:absolute; left:0; top:.75rem; width:8px; height:8px; border-radius:50%; background:var(--obv-orange); }
.product-card .btn { align-self:flex-start; }

/* Flow steps */
.flow { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.25rem; counter-reset:step; }
.flow-step { background:var(--obv-grey); border-radius:12px; padding:1.5rem; position:relative; }
.flow-step::before { counter-increment:step; content:counter(step); position:absolute; top:-14px; left:1.5rem; width:28px; height:28px; border-radius:50%; background:var(--obv-navy); color:var(--obv-orange); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; }
.flow-step h4 { margin:.5rem 0; color:var(--obv-navy); }
.flow-step p { color:#3b4a58; font-size:.95rem; }

/* Audience */
.audience-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; }
.audience-card { border-left:4px solid var(--obv-orange); background:#fff; padding:1.5rem; border-radius:0 12px 12px 0; box-shadow:var(--shadow); }
.audience-card h3 { margin-bottom:.5rem; color:var(--obv-navy); }
.audience-card p { color:var(--text-light); }

/* Feature cards: grey-blue panels like the datasheet */
.feature-card { background:var(--obv-grey); border:none; }
.feature-card h3 { color:var(--obv-navy); }
.features[style] .feature-card { background:#fff; }

.page-hero { min-height:52vh; }
.spec-table { width:100%; border-collapse:collapse; margin-top:1.5rem; }
.spec-table th, .spec-table td { text-align:left; padding:.8rem 1rem; border-bottom:1px solid var(--border-color); vertical-align:top; }
.spec-table th { color:var(--obv-navy); width:32%; }
.note { background:var(--obv-grey); border-left:4px solid var(--obv-orange); padding:1rem 1.25rem; border-radius:0 8px 8px 0; margin-top:2rem; }

.footer { background:var(--obv-navy); }
.footer h3, .footer h4 { color:var(--obv-orange); }

/* chips and content list on inner pages */
.chip { border:1px solid var(--obv-navy); color:var(--obv-navy); border-radius:999px; padding:.3rem .9rem; font-size:.9rem; }
.content-list { max-width:900px; margin:0 auto; color:var(--text-color); }

/* ---------- Unified site: dropdown navigation ---------- */
.nav-menu { gap:1.4rem; }
.nav-menu > li { position:relative; }
.nav-menu > li > a { font-size:.95rem; padding:.5rem 0; display:inline-block; }
.nav-menu .nav-cta a { background:var(--obv-orange); color:var(--obv-navy); padding:.45rem 1.1rem; border-radius:6px; font-weight:600; }
.nav-menu .nav-cta a::after { display:none; }
.dropdown { position:absolute; top:100%; left:-1rem; min-width:320px; background:#fff; border-radius:10px; box-shadow:0 14px 40px rgba(0,0,0,.18); padding:.6rem; list-style:none; display:none; z-index:1100; }
.dropdown li a { display:flex; flex-direction:column; gap:.1rem; padding:.6rem .8rem; border-radius:8px; color:var(--obv-navy); line-height:1.3; }
.dropdown li a strong { font-size:.92rem; font-weight:600; }
.dropdown li a span { font-size:.78rem; color:var(--text-light); }
.dropdown li a:hover { background:var(--obv-grey); }
.dropdown li a::after { display:none; }
.has-dropdown:hover > .dropdown, .has-dropdown:focus-within > .dropdown { display:block; }
@media (max-width:900px) {
  .nav-menu { gap:.8rem; }
  .nav-menu > li > a { font-size:.85rem; }
  .dropdown { min-width:260px; }
}
@media (max-width:768px) {
  .nav-menu { background:var(--obv-navy); }
  .dropdown { position:static; display:block; box-shadow:none; background:transparent; padding:0 0 .5rem 1rem; }
  .dropdown li a { color:#fff; padding:.3rem .5rem; }
  .dropdown li a span { display:none; }
  .dropdown li a:hover { background:rgba(255,255,255,.08); }
}

/* ---------- Hero with photo ---------- */
.hero-photo { background-image: linear-gradient(100deg, rgba(6,25,47,.92) 0%, rgba(6,25,47,.75) 50%, rgba(6,25,47,.35) 100%), var(--hero-photo) !important; background-size:cover; background-position:center; background-attachment:scroll; }
.page-hero .hero-title { font-size:2.8rem; }
@media (max-width:768px){ .page-hero .hero-title { font-size:2rem; } }

/* ---------- Image cards ---------- */
.img-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; }
.img-card { display:flex; flex-direction:column; background:#fff; border-radius:12px; overflow:hidden; box-shadow:var(--shadow); text-decoration:none; color:inherit; border:1px solid var(--border-color); transition:var(--transition); }
.img-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.card-img { aspect-ratio:16/9; overflow:hidden; background:var(--obv-grey); }
.card-img img { width:100%; height:100%; object-fit:cover; display:block; }
.img-card-body { padding:1.25rem 1.4rem 1.4rem; display:flex; flex-direction:column; gap:.4rem; flex:1; }
.img-card-body h3 { font-size:1.15rem; color:var(--obv-navy); }
.img-card-body p { color:var(--text-light); font-size:.95rem; flex:1; }
.img-card-body .more { color:var(--obv-orange); font-weight:600; font-size:.9rem; }

/* ---------- Content layouts ---------- */
.two-col { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; align-items:start; }
.two-col figure img { width:100%; border-radius:10px; border:1px solid var(--border-color); }
.two-col figcaption { font-size:.85rem; color:var(--text-light); margin-top:.5rem; }
.two-col h2 { color:var(--obv-navy); margin-bottom:.8rem; }
.two-col p { margin-bottom:1rem; color:var(--text-color); }
.two-col ul { padding-left:1.2rem; color:var(--text-color); }
.two-col h4 { color:var(--obv-navy); margin-bottom:.4rem; }
.chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.content-list { max-width:900px; margin:0 auto; color:var(--text-color); padding-left:1.2rem; }
.content-list li { margin:.4rem 0; }
.spec-table + h3 { color:var(--obv-navy); }

.tech-card { background:#fff; border:1px solid var(--border-color); border-left:5px solid var(--obv-orange); border-radius:12px; padding:2rem; margin-bottom:1.5rem; box-shadow:var(--shadow); }
.tech-card h3 { color:var(--obv-navy); font-size:1.4rem; }
.tech-card .tech-sub { color:var(--obv-orange); font-weight:600; margin-bottom:.8rem; }
.tech-card h4 { color:var(--obv-navy); margin:1rem 0 .3rem; }
.tech-card p { color:var(--text-color); }
.tech-card .analogy { font-style:italic; color:var(--text-light); border-left:3px solid var(--obv-grey); padding-left:1rem; margin:.8rem 0; }

.article { max-width:820px; margin:0 auto; color:var(--text-color); font-size:1.05rem; line-height:1.7; }
.article h2 { color:var(--obv-navy); margin:2rem 0 .8rem; font-size:1.6rem; }
.article h3 { color:var(--obv-navy); margin:1.5rem 0 .6rem; }
.article p { margin-bottom:1rem; }
.article ul, .article ol { padding-left:1.4rem; margin-bottom:1rem; }
.article figure { margin:1.5rem 0; }
.article figure img { width:100%; border-radius:10px; border:1px solid var(--border-color); }
.article a { color:var(--obv-orange); }
.legal section { margin-bottom:1.5rem; }
.feature-card .btn { margin-top:1rem; display:inline-block; }
.contact-link { display:flex; flex-direction:column; gap:1rem; justify-content:center; }
.contact-link h3 { color:var(--obv-navy); }
.contact-link .small { font-size:.9rem; color:var(--text-light); }
.contact-link .btn { align-self:flex-start; }

/* Footer links: readable on navy */
.footer a, .footer-address a, .footer-bottom a { color:#cfe3f5; text-decoration:none; }
.footer a:hover, .footer-bottom a:hover { color:var(--obv-orange); }
.footer-bottom p { color:#9fb3c8; }
.note a { color:var(--obv-navy); font-weight:600; }

/* Text links: navy with an orange underline, orange on hover */
.features a:not(.btn):not(.img-card), .article a, .note a, .contact-info a, .spec-table a, .two-col a, .tech-card a {
  color: var(--obv-navy); font-weight: 600; text-decoration: underline; text-decoration-color: var(--obv-orange); text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.features a:not(.btn):not(.img-card):hover, .article a:hover, .note a:hover, .contact-info a:hover { color: var(--obv-orange); }
.article code { background: var(--obv-grey); padding: .1em .35em; border-radius: 4px; font-size: .9em; }
.article ol { padding-left: 1.4rem; margin-bottom: 1rem; }

/* Case studies */
.case-cols h2 { font-size:1.4rem; }
.case-cols p { font-size:1.05rem; line-height:1.7; }
.results-h { text-align:center; color:var(--obv-navy); margin:2.5rem 0 1.2rem; font-size:1.6rem; }
.results-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.result-card { background:var(--obv-grey); border-left:4px solid var(--obv-orange); border-radius:0 10px 10px 0; padding:1.1rem 1.25rem; color:var(--obv-navy); font-weight:600; }
.result-card p { margin:0; }

/* Pattern tables and notes */
.pattern-table th:first-child { width:18%; }
.pattern-table tr:first-child th { background:var(--obv-navy); color:#fff; }
.small-note { max-width:900px; margin:1.5rem auto 0; color:var(--text-light); font-size:.95rem; }
.article .lead { font-size:1.2rem; color:var(--obv-navy); }

/* Example product cards without a photo yet */
.card-img-empty { display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--obv-grey),#f3f6f8); color:var(--obv-navy); font-weight:600; font-size:1.1rem; text-align:center; padding:1rem; }

/* One-page technology guide */
.band-nav { padding:.8rem 0; }
.band-nav a { color:#fff; font-weight:600; font-size:1rem; margin-right:1.6rem; text-decoration:none; }
.band-nav a:hover { text-decoration:underline; }
.tech-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:1.25rem; }
.tech-card.compact { margin-bottom:0; padding:1.4rem; }
.tech-card.compact h3 { font-size:1.15rem; }
.tech-card details { margin-top:.6rem; }
.tech-card summary { cursor:pointer; color:var(--obv-navy); font-weight:600; font-size:.92rem; }
.tech-card details[open] summary { margin-bottom:.5rem; }
.tech-card details p, .tech-card details li { font-size:.92rem; }
.sub-h { text-align:center; color:var(--obv-navy); margin:2.5rem 0 1.2rem; font-size:1.5rem; }
section[id] { scroll-margin-top: 90px; }

/* Login */
.nav-menu .nav-login a { border:1px solid rgba(255,255,255,.45); border-radius:6px; padding:.42rem .9rem; }
.nav-menu .nav-login a::after { display:none; }
.nav-menu .nav-login a:hover { border-color:var(--obv-orange); }
.login-form h3 { color:var(--obv-navy); margin-bottom:1rem; }
.login-form .small { font-size:.9rem; color:var(--text-light); margin-top:1rem; }
.login-form .small a { color:var(--obv-navy); font-weight:600; }
.img-card-static:hover { transform:none; box-shadow:var(--shadow); cursor:default; }