/* PC shared header v1 — generated 2026-09-06. One file, all pages. Do not edit per page. */ :root{--ac:var(--teal2);--acd:var(--teal)} :root{--e:cubic-bezier(.2,.7,.3,1)} header.pchnav{position:fixed;inset:0 0 auto;z-index:100;transition:.35s var(--e)} header.pchnav::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,9,20,.7),transparent);transition:.35s;pointer-events:none} header.pchnav.s::before{opacity:0} header.pchnav.s{background:rgba(11,15,32,.74);backdrop-filter:blur(20px) saturate(1.4);border-bottom:1px solid var(--line)} .pchbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 40px;max-width:1340px;margin:0 auto;position:relative;z-index:1;transition:.35s var(--e)} header.pchnav.s .pchbar{padding:12px 40px} .pchbrand .pchlockup{height:40px;width:auto;display:block;filter:drop-shadow(0 3px 14px rgba(155,110,245,.35));transition:.35s var(--e)} header.pchnav.s .pchbrand .pchlockup{height:35px} nav.pchlinks{display:flex;gap:26px;align-items:center;position:absolute;left:50%;transform:translateX(-50%)} nav.pchlinks>a,nav.pchlinks .pchhas>a{font-size:.9rem;font-weight:500;color:#c8cfe1;display:inline-flex;gap:6px;align-items:center;transition:.2s;position:relative;cursor:pointer;padding:8px 0;white-space:nowrap} nav.pchlinks>a:hover,nav.pchlinks .pchhas:hover>a,nav.pchlinks>a.on{color:#fff} nav.pchlinks>a.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--teal);border-radius:2px} nav.pchlinks .pchcar{width:10px;height:10px;opacity:.6;transition:.3s var(--e)} .pchhas{position:relative} .pchhas .pchmenu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px) scale(.97);transform-origin:top center;min-width:238px;padding:14px 10px 10px;opacity:0;visibility:hidden;transition:.28s var(--e);z-index:130} .pchhas .pchmenu .pchinner{background:rgba(16,21,40,.98);backdrop-filter:blur(22px) saturate(1.3);border:1px solid var(--line2);border-radius:16px;padding:10px;box-shadow:0 30px 70px rgba(0,0,0,.55);position:relative} .pchhas .pchmenu .pchinner::before{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);width:12px;height:12px;background:rgba(16,21,40,.98);border-left:1px solid var(--line2);border-top:1px solid var(--line2)} .pchhas:hover .pchmenu,.pchhas.is-open .pchmenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) scale(1)} .pchhas:hover>a .pchcar,.pchhas.is-open>a .pchcar,.pchhas.is-open>button .pchcar{transform:rotate(180deg)} .pchhas .pchmenu a{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:10px;font-size:.85rem;color:#c8cfe1;white-space:nowrap;transition:.22s var(--e)} .pchhas .pchmenu a .pchmi{width:27px;height:27px;border-radius:8px;display:grid;place-items:center;flex:0 0 27px;background:rgba(0,198,198,.1);color:var(--teal2)} .pchhas .pchmenu a .pchmi svg{width:15px;height:15px} .pchhas .pchmenu a.pc .pchmi{background:rgba(155,110,245,.14);color:var(--purple2)} .pchhas .pchmenu a.em .pchmi{background:rgba(30,158,106,.14);color:#63d7a6} .pchhas .pchmenu a:hover{background:rgba(0,198,198,.12);color:#fff;transform:translateX(4px)} .pchhas .pchmenu a.pchall{color:var(--teal2);font-weight:700;justify-content:center;margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 10px 10px} .pchcta{font-size:.88rem;font-weight:600;color:#04231f;background:linear-gradient(135deg,var(--teal2),var(--teal));border-radius:999px;padding:12px 22px;display:inline-flex;gap:8px;align-items:center;box-shadow:0 10px 28px rgba(0,198,198,.3);transition:.3s var(--e);white-space:nowrap} .pchcta:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,198,198,.45)} .pchcta svg{width:16px;height:16px} .pchhamb{display:none;background:none;border:0;cursor:pointer;width:42px;height:42px;color:#fff} .pchhamb svg{width:26px;height:26px} .pchmnav{position:fixed;inset:0;z-index:120;background:rgba(8,11,22,.98);backdrop-filter:blur(20px);display:flex;flex-direction:column;gap:4px;padding:100px 34px 40px;transform:translateY(-100%);visibility:hidden;transition:transform .4s var(--e),visibility 0s .4s;overflow:auto} .pchmnav.open{transform:none;visibility:visible;transition:transform .4s var(--e),visibility 0s} .pchmnav>a{font-family:'Playfair Display',serif;font-size:1.5rem;color:#fff;padding:13px 0;border-bottom:1px solid var(--line)} .pchmnav .pchmsub{font-size:.95rem;color:var(--mut);padding:10px 0 10px 18px;border-bottom:1px solid var(--line)} .pchmnav .pchcta{margin-top:22px;justify-content:center} .pchmclose{position:absolute;top:26px;right:30px;background:none;border:0;color:#fff;cursor:pointer} .pchmclose svg{width:28px;height:28px} @media(max-width:1080px){nav.pchlinks{display:none}.pchhamb{display:block}} .pchmsub{display:flex;flex-wrap:wrap;gap:6px 14px;margin:6px 0 4px;padding:0} .pchmsub a{font:500 13px/1 var(--sans,Inter,sans-serif);color:#9BA3C2;text-decoration:none;padding:7px 0;display:inline-block;min-height:32px} .pchmsub a:hover,.pchmsub a:focus-visible{color:#00BEBE} /* ==== FIXES (appended after canonical base) ============================== ST-003 desktop nav/phone overlap · ST-004 two-row mobile bar Breakpoints aligned on 1080: hamburger, panel and resize-close all switch at the same width, so 761-1080 can no longer be left without navigation. */ .pchbar{flex-wrap:nowrap;column-gap:clamp(10px,1.6vw,24px); padding-left:clamp(14px,3vw,40px);padding-right:clamp(14px,3vw,40px)} .pchbar>*{min-width:0} nav.pchlinks{padding:0;margin:0;position:static;left:auto;transform:none; flex:1 1 auto;justify-content:center;column-gap:clamp(10px,1.4vw,26px);min-width:0} nav.pchlinks>a,nav.pchlinks .pchhas>a{font-size:clamp(.76rem,.92vw,.9rem)} .pchbrand,.pchtel,.pchcta,.pchhamb{flex:0 0 auto} .pchhas{position:relative} .pchmenu{left:50%;transform:translateX(-50%) translateY(10px) scale(.97)} .pchhas:hover>.pchmenu,.pchhas.is-open>.pchmenu,.pchhas.is-open>.pchmenu{ opacity:1;visibility:visible;pointer-events:auto; transform:translateX(-50%) translateY(0) scale(1)} @media(hover:none){.pchhas:hover>.pchmenu{opacity:0;visibility:hidden} .pchhas.is-open>.pchmenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) scale(1)}} .pchhamb{display:none;background:none;border:0;box-shadow:none;color:#fff; width:42px;height:42px;padding:0;cursor:pointer;align-items:center; justify-content:center;-webkit-appearance:none;appearance:none} .pchhamb svg{width:24px;height:24px;display:block} @media(max-width:1080px){nav.pchlinks{display:none}.pchhamb{display:flex}} @media(min-width:1081px){.pchhamb{display:none}} @media(max-width:760px){ .pchbar{flex-wrap:wrap;column-gap:8px;row-gap:8px;padding:8px 12px 10px;align-items:center} .pchbrand{order:1;flex:1 1 auto;min-width:0} .pchbrand .pchlockup{height:28px} .pchhamb{order:2;flex:0 0 auto} .pchbar::after{content:"";order:3;flex:0 0 100%;width:100%;height:0;margin:0} .pchtel{order:4;flex:0 1 auto;max-width:42%;min-width:0;box-sizing:border-box; justify-content:center;text-align:center;margin-right:0; padding:10px 10px;font-size:13px;white-space:nowrap} .pchcta{order:5;flex:1 1 auto;min-width:0;box-sizing:border-box;justify-content:center; text-align:center;padding:11px 10px;font-size:13px;white-space:nowrap;letter-spacing:0} .pchcta svg{display:none} } @media(max-width:360px){ .pchbar{column-gap:6px;padding-left:10px;padding-right:10px} .pchtel{padding:9px 7px;font-size:12px;max-width:38%} .pchcta{padding:10px 7px;font-size:12px} .pchbrand .pchlockup{height:25px} } /* header height reserved in CSS BEFORE JS runs (removes first-paint CLS) */ :root{--pch-h:83px} @media(max-width:760px){:root{--pch-h:119px}body{padding-top:var(--pch-h)}} @media(max-width:360px){:root{--pch-h:117px}} /* mobile panel available wherever the burger is */ @media(min-width:1081px){.pchmnav{display:none!important}} .pchmnav{overscroll-behavior:contain} html,body{overflow-x:hidden;max-width:100%} .pchnav,.pchbar{max-width:100vw} .pchnav a:focus-visible,.pchnav button:focus-visible, .pchmnav a:focus-visible,.pchmnav button:focus-visible{ outline:2px solid var(--teal,#00c6c6);outline-offset:3px;border-radius:6px} @media(prefers-reduced-motion:reduce){.pchnav *,.pchmnav,.pchmenu{transition:none!important}} .pchmnav .pchmtel{display:block;text-align:center;margin:18px 0 10px;padding:13px; border-radius:100px;border:1px solid rgba(0,190,190,.35);color:#cfd7e8; text-decoration:none;font-size:15px} /* the canonical base hides the CTA below 560px; Ryan requires it kept at every width, so it is explicitly restored here and sized to fit instead. */ @media(max-width:760px){.pchbar .pchcta{display:inline-flex}} /* ---- mobile panel: accordion IA, independent scroll, current-page state --- */ .pchmnav{padding:0!important;overflow:hidden!important} @media(min-width:1081px){.pchmnav{display:none!important}} .pchm-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch; overscroll-behavior:contain;padding:86px 26px 8px} .pchm-actions{flex:0 0 auto;padding:14px 26px calc(18px + env(safe-area-inset-bottom,0px)); border-top:1px solid rgba(255,255,255,.10);background:rgba(8,11,22,.99); display:grid;grid-template-columns:1fr;gap:10px} .pchmclose{position:absolute;top:22px;right:24px;z-index:2;background:none;border:0;color:#fff; width:44px;height:44px;display:grid;place-items:center;cursor:pointer} .pchmclose svg{width:26px;height:26px} .pchm-top,.pchm-tog{display:flex;width:100%;align-items:center;justify-content:space-between; gap:10px;background:none;border:0;text-align:left;color:#eef2fb;cursor:pointer; font-family:var(--serif,Georgia,serif);font-size:1.32rem;line-height:1.25; padding:14px 2px;border-bottom:1px solid rgba(255,255,255,.10);text-decoration:none} .pchm-tog .pchm-car{width:20px;height:20px;flex:0 0 20px;opacity:.65;transition:transform .25s} .pchm-tog[aria-expanded="true"]{color:var(--teal2,#5ee7e7)} .pchm-tog[aria-expanded="true"] .pchm-car{transform:rotate(180deg)} .pchm-sub{padding:6px 0 12px 14px;display:grid;gap:2px} .pchm-sub[hidden]{display:none} .pchm-sub a{display:block;color:#b9c2d8;font-size:.98rem;padding:11px 4px;text-decoration:none; border-bottom:1px solid rgba(255,255,255,.05)} .pchm-sub a:hover,.pchm-sub a:focus-visible{color:#fff} .pchm-top[aria-current="page"],.pchm-sub a[aria-current="page"]{color:var(--teal2,#5ee7e7)} .pchm-top[aria-current="page"]::after,.pchm-sub a[aria-current="page"]::after{content:" ·";opacity:.8} .pchm-tel{display:block;text-align:center;padding:13px;border-radius:100px; border:1px solid rgba(0,190,190,.35);color:#cfd7e8;text-decoration:none;font-size:15px} .pchm-cta{display:flex!important;justify-content:center;padding:15px;font-size:15px} /* short viewports (landscape phones, 390x500): the pinned action bar must not eat the panel. Compact it so the scroll region keeps most of the height. */ @media(max-height:560px){ .pchm-scroll{padding-top:64px} .pchm-actions{padding:8px 20px calc(10px + env(safe-area-inset-bottom,0px)); grid-template-columns:auto 1fr;gap:8px} .pchm-tel{padding:9px 12px;font-size:13px} .pchm-cta{padding:10px 12px;font-size:13.5px} .pchmclose{top:12px;right:14px;width:38px;height:38px} .pchm-top,.pchm-tog{font-size:1.08rem;padding:10px 2px} } /* ---- stacking + true background isolation ------------------------------- Page templates carry their own position:fixed chrome at z-index 200-250 (.dots, .counter, .fcta, .mbar on the homepage). The shared header and its panel must sit above all of it, and the panel must be fully opaque, or page chrome bleeds through the open menu. Caught by looking at a screenshot; every automated check (actionsPinned, ctaInView, bgLock, overflow) passed regardless. */ .pchnav{z-index:1000} .pchmnav{z-index:1001;background:#080b16} .pchmnav .pchm-actions{background:#080b16} /* while the panel is open, page-level fixed chrome must not sit over it */ body.pch-panel-open .dots, body.pch-panel-open .counter, body.pch-panel-open .fcta, body.pch-panel-open .mbar{display:none!important} /* Resources is a semantic