/* ===== Shared site header/nav ===== Loaded on every page via header.js, which fetches header.html and injects it into #site-header-placeholder. This stylesheet must be linked in the of every page that uses the shared header. */ nav{ position:absolute; top:0; left:0; right:0; z-index:10; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:32px 44px; font-size:14px; letter-spacing:0.02em; color:#fff; background:transparent; transition:background 0.4s ease; } nav.services-open{ background:#fff; } nav.services-open .logo{ filter:brightness(0); } nav.services-open .links{ color:var(--ink, #2B2A33); } nav.services-open .links span::after{ color:var(--ink, #2B2A33); } nav.services-open .services-toggle{ color:var(--ink, #2B2A33); } nav .logo-link{ grid-column:1; justify-self:start; position:relative; z-index:2; } nav .logo{ height:52px; width:auto; display:block; filter:brightness(0) invert(1); position:relative; z-index:2; } nav .links{ display:flex; align-items:center; gap:36px; opacity:0.8; color:#fff; position:relative; z-index:2; grid-column:2; justify-self:center; } nav .links span{ position:relative; z-index:2; display:inline-block; overflow:hidden; height:19px; line-height:19px; cursor:pointer; } nav .links span i{ display:block; font-style:normal; transition:transform 0.4s cubic-bezier(0.65,0,0.35,1); } nav .links span::after{ content:attr(data-text); position:absolute; left:0; top:100%; width:100%; line-height:19px; font-weight:700; color:#fff; transition:transform 0.4s cubic-bezier(0.65,0,0.35,1); } nav .links span:hover i{ transform:translateY(-100%); } nav .links span:hover::after{ transform:translateY(-100%); } nav .links span:hover{ opacity:1; } nav .links a.nav-link{ position:relative; z-index:2; text-decoration:none; color:inherit; display:inline-block; } nav .nav-right{ display:flex; align-items:center; gap:20px; grid-column:3; justify-self:end; position:relative; z-index:3; } nav .nav-cta{ display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border-radius:100px; border:1px solid rgba(255,255,255,0.4); color:#fff; font-size:13px; font-weight:600; letter-spacing:0.01em; font-family:inherit; text-decoration:none; white-space:nowrap; background:rgba(255,255,255,0.08); transition:transform 0.25s cubic-bezier(0.22,1,0.36,1), background 0.25s ease, border-color 0.25s ease, color 0.25s ease; } nav .nav-cta:hover{ transform:scale(1.035); background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.65); } nav.services-open .nav-cta{ color:var(--ink, #2B2A33); border-color:rgba(43,42,51,0.25); background:rgba(43,42,51,0.05); } nav.services-open .nav-cta:hover{ background:rgba(43,42,51,0.1); border-color:rgba(43,42,51,0.4); } /* Diagonal arrow icon used on nav-cta and other buttons across the site */ .btn-arrow{ display:inline-flex; align-items:center; justify-content:center; transition:transform 0.25s cubic-bezier(0.22,1,0.36,1); } .btn-arrow svg{ width:16px; height:16px; display:block; } a:hover > .btn-arrow{ transform:translate(3px, -3px); } @media (prefers-reduced-motion:reduce){ .btn-arrow{ transition:none !important; } } /* ===== Services mega menu ===== */ .nav-services{ position:relative; } .services-toggle{ position:relative; z-index:2; top:-3px; display:flex; align-items:center; gap:6px; height:19px; color:inherit; text-decoration:none; cursor:pointer; transition:opacity 0.2s ease; } .nav-services:hover .services-toggle, .nav-services.open .services-toggle{ opacity:1; } .services-chevron{ width:13px; height:13px; transition:transform 0.3s cubic-bezier(0.22,1,0.36,1); } .nav-services.open .services-chevron{ transform:rotate(180deg); } .mega-menu{ position:fixed; top:0; left:0; z-index:1; width:100vw; background:#fff; padding:140px 44px 48px; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-16px); transition:opacity 0.4s cubic-bezier(0.22,1,0.36,1), transform 0.4s cubic-bezier(0.22,1,0.36,1), visibility 0.4s; } nav.services-open .mega-menu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); } .mega-menu-inner{ max-width:1280px; margin:0 auto; } .mega-menu-eyebrow{ font-size:11px; letter-spacing:0.18em; text-transform:uppercase; font-weight:700; color:var(--dusty-blue, #5E7188); margin-bottom:24px; } .mega-menu-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; } .mega-item{ display:flex; align-items:flex-start; gap:14px; padding:16px; border-radius:16px; text-decoration:none; color:var(--ink, #2B2A33); transition:background 0.25s ease, transform 0.25s cubic-bezier(0.22,1,0.36,1); } .mega-item:hover{ background:rgba(43,42,51,0.05); transform:translateY(-2px); } .mega-icon{ flex-shrink:0; width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:rgba(43,42,51,0.06); } .mega-icon svg{ width:26px; height:26px; } .mega-text{ display:flex; flex-direction:column; gap:4px; padding-top:2px; } .mega-title{ font-size:14.5px; font-weight:700; letter-spacing:-0.01em; } .mega-desc{ font-size:12px; line-height:1.4; color:var(--charcoal, #3B3F45); } .mega-menu-footer{ margin-top:28px; padding-top:24px; border-top:1px solid rgba(43,42,51,0.1); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; } .mega-menu-footer p{ font-size:13.5px; color:var(--charcoal, #3B3F45); margin:0; } .mega-cta{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-size:13.5px; font-weight:600; color:#fff; padding:11px 22px; border-radius:100px; border:none; background:var(--ink, #2B2A33); transition:opacity 0.25s ease, transform 0.25s cubic-bezier(0.22,1,0.36,1); white-space:nowrap; } .mega-cta:hover{ opacity:0.85; transform:translateX(2px); } /* Back-to-menu control: hidden on desktop (hover dropdown needs no close affordance), shown on mobile where the mega menu covers the hamburger button itself and needs its own way out. */ .mega-menu-back{ display:none; align-items:center; gap:8px; margin-bottom:16px; background:none; border:none; padding:0; font:inherit; font-weight:700; font-size:14px; color:var(--ink, #2B2A33); cursor:pointer; } .mega-menu-back svg{ width:16px; height:16px; } /* backdrop dims the page content beneath the open menu */ .mega-backdrop{ position:fixed; inset:0; z-index:0; background:rgba(10,10,16,0.4); opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.4s ease, visibility 0.4s; } nav.services-open .mega-backdrop{ opacity:1; visibility:visible; } @media (prefers-reduced-motion:reduce){ .mega-menu, .services-chevron, .mega-item, nav{ transition:none !important; } } @media (max-width:900px){ .mega-menu-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .mega-menu{ padding:96px 20px 24px; } .mega-menu-grid{ grid-template-columns:1fr; gap:4px; } .mega-menu-eyebrow{ margin-bottom:12px; } .mega-item{ padding:11px 8px; gap:12px; border-radius:14px; } .mega-icon{ width:38px; height:38px; border-radius:11px; } .mega-icon svg{ width:18px; height:18px; } .mega-text{ gap:2px; padding-top:0; } .mega-title{ font-size:14px; } .mega-desc{ font-size:11.5px; } .mega-menu-footer{ margin-top:16px; padding-top:16px; gap:14px; } .mega-menu-footer p{ font-size:12.5px; } .mega-cta{ padding:10px 18px; font-size:13px; } } /* ===== Mobile nav ===== */ .nav-toggle{ display:none; position:relative; z-index:3; width:26px; height:18px; padding:0; margin:0; border:none; background:none; flex-direction:column; justify-content:space-between; cursor:pointer; } .nav-toggle span{ display:block; width:100%; height:2px; border-radius:2px; background:#fff; transition:transform 0.3s cubic-bezier(0.65,0,0.35,1), opacity 0.3s ease, background 0.3s ease; } nav.services-open .nav-toggle span{ background:var(--ink, #2B2A33); } nav.mobile-open .nav-toggle span:nth-child(1){ transform:translateY(8px) rotate(45deg); } nav.mobile-open .nav-toggle span:nth-child(2){ opacity:0; } nav.mobile-open .nav-toggle span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); } @media (max-width:860px){ nav{ padding:24px 24px; } nav .logo{ z-index:3; } .nav-toggle{ display:flex; } nav .links{ position:fixed; inset:0; z-index:2; justify-self:stretch; flex-direction:column; align-items:flex-start; justify-content:center; gap:22px; padding:110px 32px 40px; background:#181022; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-12px); transition:opacity 0.35s ease, transform 0.35s cubic-bezier(0.22,1,0.36,1), visibility 0.35s; } nav.mobile-open .links{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); } nav .links a.nav-link, .services-toggle{ font-size:22px; height:28px; } nav .links span{ height:28px; line-height:28px; } .nav-services{ width:100%; } .mega-menu{ z-index:5; min-height:100vh; min-height:100dvh; overflow-y:auto; } .mega-menu-back{ display:flex; } nav .nav-cta{ padding:9px 16px; font-size:12.5px; } } @media (max-width:400px){ nav .nav-cta{ padding:8px 12px; font-size:11.5px; } }