/* Shared navigation only; the existing site identity and page bodies stay intact. */
:root { --op-nav-gutter: clamp(20px, 3.8vw, 72px); }
.utility-bar.op-utility { width:100%; height:38px; padding:0 var(--op-nav-gutter); margin:0; gap:24px; background:var(--signal); color:var(--ink); }
.op-utility p { flex:1; min-width:0; max-width:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; letter-spacing:.05em; text-transform:uppercase; }
.op-utility p > span { margin-right:10px; opacity:.6; }
.op-utility__links { display:flex; align-items:center; flex-shrink:0; gap:22px; }
.op-utility__links a { font-size:9px; letter-spacing:.04em; white-space:nowrap; text-transform:uppercase; }
.op-utility__links a + a { border-left:1px solid rgba(9,9,9,.25); padding-left:22px; }
.op-utility__links a > span { margin:0 6px 0 0; opacity:1; }
.op-utility a:focus-visible { outline:2px solid #090909; outline-offset:4px; }
.site-header.op-header { width:100%; height:82px; padding:0 var(--op-nav-gutter); margin:0; display:grid; grid-template-columns:minmax(160px,1fr) auto minmax(160px,1fr); gap:24px; align-items:center; color:var(--white); background:rgba(9,9,9,.94); border-bottom:1px solid rgba(255,255,255,.16); }
.site-header.op-header.is-stuck { left:0; top:0; width:100%; height:70px; padding:0 var(--op-nav-gutter); transform:none; background:rgba(9,9,9,.96); }
.op-header > .brand { justify-self:start; min-width:0; }
.op-header .brand-logo-image,.op-mobile .brand-logo-image { width:auto; max-width:132px; height:44px; object-fit:contain; }
.op-desktop { display:flex; align-items:center; justify-content:center; gap:clamp(15px,1.6vw,28px); }
.op-nav-link,.op-nav-group > summary { position:relative; display:flex; align-items:center; gap:6px; min-height:44px; padding:0; border:0; color:var(--white); font-family:var(--font-body); font-size:12px; font-weight:700; line-height:1.2; letter-spacing:0; white-space:nowrap; text-decoration:none; cursor:pointer; list-style:none; }
.op-nav-group > summary::-webkit-details-marker { display:none; }
.op-nav-link::after,.op-nav-group > summary::after { content:""; position:absolute; bottom:6px; left:0; right:0; height:2px; background:var(--signal); transform:scaleX(0); transform-origin:left; transition:transform .18s ease; }
.op-nav-link:hover::after,.op-nav-link:focus-visible::after,.op-nav-link.is-active::after,.op-nav-group.is-active > summary::after,.op-nav-group[open] > summary::after { transform:scaleX(1); }
.op-nav-group > summary > span { color:var(--signal); transition:transform .18s ease; }
.op-nav-group[open] > summary > span { transform:rotate(180deg); }
.op-header a:focus-visible,.op-header summary:focus-visible,.op-header button:focus-visible,.op-mobile a:focus-visible,.op-mobile summary:focus-visible,.op-mobile button:focus-visible { outline:2px solid var(--signal); outline-offset:5px; }
.op-nav-group { position:static; }
.op-mega { position:absolute; z-index:20; top:100%; left:var(--op-nav-gutter); right:var(--op-nav-gutter); display:grid; grid-template-columns:minmax(220px,.65fr) 2fr; background:#111; color:var(--white); border:1px solid rgba(255,255,255,.2); box-shadow:0 22px 44px #0006; }
.op-mega__intro { display:flex; flex-direction:column; align-items:stretch; padding:30px; background:var(--signal); color:var(--ink); }
.op-mega__intro > span { font:10px var(--font-mono); letter-spacing:.08em; }
.op-mega__intro strong { margin:32px 0; font:700 clamp(28px,2.5vw,40px)/1 var(--font-display); letter-spacing:-.055em; }
.op-mega__intro a { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:44px; font-size:12px; font-weight:700; border-top:1px solid #09090930; }
.op-mega__intro a:focus-visible { outline-color:var(--ink); }
.op-mega__links { padding:18px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.op-mega__links a { display:grid; grid-template-columns:32px minmax(0,1fr) 12px; align-items:center; gap:10px; padding:12px; min-height:54px; border-bottom:1px solid #ffffff20; font-size:12px; font-weight:700; line-height:1.4; }
.op-mega__links a:nth-last-child(-n+2) { border-bottom:0; }
.op-mega__links a:hover,.op-about a:hover { background:#ffffff09; }
.op-mega__links small { color:var(--signal); font:10px var(--font-mono); }
.op-mega i,.op-about i,.op-mobile i { font-style:normal; color:var(--signal); }
.op-mega__intro i { color:var(--ink); }
.op-mega__all span { color:var(--signal); }
.op-nav-group--about { position:relative; }
.op-about { position:absolute; z-index:20; top:calc(100% + 18px); right:-22px; width:304px; padding:10px; background:#111; color:var(--white); border:1px solid #ffffff30; box-shadow:0 22px 44px #0006; }
/* Transparent hit area bridges the existing label-to-panel gap for mouse users. */
.op-mega::before,.op-about::before { content:""; position:absolute; top:-24px; right:0; left:0; height:24px; }
.op-about a { position:relative; display:block; padding:16px 28px 16px 14px; border-bottom:1px solid #ffffff20; }
.op-about a:last-child { border-bottom:0; }
.op-about strong { display:block; font-size:13px; font-weight:700; }
.op-about span { display:block; margin-top:6px; font-size:11px; line-height:1.5; color:#b5b5ad; }
.op-about i { position:absolute; right:12px; top:18px; font-size:12px; }
.op-header__actions { display:flex; justify-content:flex-end; align-items:center; gap:14px; justify-self:end; }
.op-header__quote { display:inline-flex; min-height:44px; padding:0 17px; gap:23px; font-size:12px; white-space:nowrap; }
.op-header__quote:focus-visible { outline-color:white; }
.op-header .op-menu-toggle { display:none; position:relative; flex-shrink:0; width:44px; height:44px; }
.op-mobile { position:fixed; inset:0; width:100%; max-width:none; height:100%; height:100dvh; max-height:none; margin:0; padding:0 24px 32px; border:0; background:#090909; color:#f7f7f2; overflow-y:auto; overscroll-behavior:contain; }
.op-mobile:not([open]) { display:none; }
.op-mobile::backdrop { background:#090909; }
.op-mobile__top { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:82px; margin-bottom:8px; background:#090909; border-bottom:1px solid #ffffff25; }
.op-mobile__top button { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:44px; padding:0 12px; border:1px solid #ffffff50; color:inherit; background:transparent; font:600 12px var(--font-body); cursor:pointer; }
.op-mobile__top button span { font-size:25px; line-height:1; }
.op-mobile nav > a { display:grid; grid-template-columns:22px 1fr 16px; align-items:center; min-height:58px; gap:16px; border-bottom:1px solid #ffffff25; font:600 clamp(21px,5vw,30px)/1.2 var(--font-display); letter-spacing:-.035em; }
.op-mobile nav small { color:var(--signal); font:10px var(--font-mono); letter-spacing:0; }
.op-mobile nav i { font-size:16px; }
.op-mobile nav a[aria-current] > span { color:var(--signal); }
.op-mobile__services { margin:20px 0; border:1px solid #ffffff30; }
.op-mobile__services summary { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:48px; padding:12px 14px; cursor:pointer; list-style:none; font-size:12px; font-weight:700; }
.op-mobile__services summary::-webkit-details-marker { display:none; }
.op-mobile__services summary span { color:var(--signal); font-size:21px; }
.op-mobile__services[open] summary span { transform:rotate(45deg); }
.op-mobile__services > div { padding:0 14px 12px; }
.op-mobile__services a { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding:10px 0; border-top:1px solid #ffffff20; font-size:12px; }
.op-mobile__services a span { color:var(--signal); }
.op-mobile__secondary { display:grid; grid-template-columns:1fr 1fr; gap:2px 20px; }
.op-mobile__secondary a { display:flex; align-items:center; min-height:44px; font-size:12px; color:#d0d0c8; }
.op-mobile__quote { display:flex; justify-content:space-between; margin-top:22px; width:100%; }
.op-mobile__phone { display:block; padding:22px 0 0; text-align:center; font:11px/1.6 var(--font-mono); }
.featured-home__case-link { margin-top:4px; min-width:190px; justify-content:space-between; }
/* Listing hubs: a shorter introduction, without changing any article or case. */
:is(.page-blogs,.page-case-studies) .page-hero { min-height:0; padding-top:55px; padding-bottom:55px; gap:50px; grid-template-columns:minmax(0,1fr) 210px; }
:is(.page-blogs,.page-case-studies) .page-hero h1 { max-width:900px; font-size:clamp(40px,4.6vw,70px); line-height:1.02; letter-spacing:-.06em; }
:is(.page-blogs,.page-case-studies) .page-hero > div > p:last-child { max-width:730px; font-size:15px; margin-top:20px; }
:is(.page-blogs,.page-case-studies) .page-hero__index { min-height:175px; padding:22px; }
:is(.page-blogs,.page-case-studies) .page-hero__index strong { font-size:24px; }
:is(.page-blogs,.page-case-studies) .page-hero__index i { font-size:40px; }
:is(.page-blogs,.page-case-studies) :is(.blog-index,.case-grid-section) { padding-top:52px; }
.page-blogs .blog-index__intro { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:36px; }
.page-blogs .blog-index__intro h2 { max-width:740px; margin:0; font-size:clamp(30px,3.2vw,46px); line-height:1.08; }
.page-case-studies .case-grid-section > .section-heading { margin-bottom:36px; }
.page-case-studies .case-grid-section > .section-heading h2 { font-size:clamp(30px,3.2vw,46px); line-height:1.08; }
@media (max-width:1179px) {
    .site-header.op-header,.site-header.op-header.is-stuck { grid-template-columns:1fr auto; gap:16px; }
    .op-desktop { display:none; }
    .op-header .op-menu-toggle { display:flex; }
    .op-utility__phone-label { display:none; }
}
@media (max-width:700px) {
    :root { --op-nav-gutter:20px; }
    .utility-bar.op-utility { height:34px; justify-content:center; }
    .op-utility p { display:none; }
    .op-utility__links { width:100%; justify-content:space-between; gap:12px; }
    .op-utility__links a + a { border:0; padding-left:0; }
    .site-header.op-header,.site-header.op-header.is-stuck { height:74px; }
    .op-header .brand-logo-image { max-width:112px; height:39px; }
    .op-header__actions { gap:10px; }
    .op-header__quote { padding:0 12px; gap:10px; font-size:11px; }
    :is(.page-blogs,.page-case-studies) .page-hero { grid-template-columns:1fr; padding-top:38px; padding-bottom:38px; gap:0; }
    :is(.page-blogs,.page-case-studies) .page-hero h1 { font-size:clamp(38px,10vw,56px); }
    :is(.page-blogs,.page-case-studies) .page-hero__index { display:none; }
    :is(.page-blogs,.page-case-studies) :is(.blog-index,.case-grid-section) { padding-top:36px; }
    .page-blogs .blog-index__intro { display:block; margin-bottom:28px; }
    .page-blogs .blog-index__intro h2 { margin-top:18px; font-size:30px; text-align:left; }
    .page-case-studies .case-grid-section > .section-heading h2 { font-size:30px; }
}
@media (max-width:370px) {
    :root { --op-nav-gutter:14px; }
    .site-header.op-header,.site-header.op-header.is-stuck { gap:8px; }
    .op-header .brand-logo-image { max-width:94px; height:34px; }
    .op-header__actions { gap:8px; }
    .op-header__quote { padding:0 10px; font-size:10px; gap:8px; }
    .op-mobile { padding-left:18px; padding-right:18px; }
}
@media (prefers-reduced-motion:reduce) { .op-nav-link::after,.op-nav-group > summary::after,.op-nav-group > summary > span { transition:none; } }
.no-js .op-header { height:auto; min-height:82px; grid-template-columns:1fr auto; }
.no-js .op-desktop { display:flex; flex-wrap:wrap; grid-row:2; grid-column:1/-1; padding-bottom:12px; }
.no-js .op-menu-toggle { display:none; }