/* Header-only styles, scoped to . Page-level rules (background, body overflow) are intentionally left to each page. */ body.rath-nav #wrapper { padding-top: 100px; } body.rath-nav header.home-header { align-items: center; justify-content: space-between; left: 0; right: 0; width: auto; box-sizing: border-box; background: rgba(255, 255, 255, 0.94); border-bottom: 1px solid rgba(15, 18, 14, 0.08); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); gap: 24px; padding: 16px calc(3.125vw + 32px) 16px 3.125vw; } body.rath-nav header.home-header.sticky { padding-top: 12px; padding-bottom: 12px; } body.rath-nav header.home-header .logo { flex: 0 0 auto; width: clamp(190px, 16vw, 300px); } body.rath-nav header.home-header .logo img { display: block; width: 100%; height: auto; } /* Navigation pushed to the right of the header. */ body.rath-nav .home-nav { display: flex; align-items: center; justify-content: flex-end; /* gap: clamp(16px, 1.8vw, 30px); */ gap: clamp(18px, 3.8vw, 73px); margin-left: auto; padding-right: 4%; } body.rath-nav .home-nav__toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 46px; height: 46px; border: 0; border-radius: 14px; background: rgba(15, 18, 14, 0.06); cursor: pointer; } body.rath-nav .home-nav__toggle span { display: block; width: 20px; height: 2px; border-radius: 999px; background: #0f120e; transition: transform 0.2s ease, opacity 0.2s ease; } /* The toggle is a sibling of .home-nav, so key the open "X" state off the aria-expanded attribute the script sets. */ body.rath-nav .home-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } body.rath-nav .home-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } body.rath-nav .home-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } body.rath-nav .home-menu { display: flex; align-items: center; gap: clamp(14px, 5.7vw, 34px); margin: 0; padding: 0; list-style: none; } body.rath-nav .home-menu > li { position: relative; } body.rath-nav .home-menu__link, body.rath-nav .home-menu__trigger { display: inline-flex; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 10px; color: #2b3035; font-family: "GraphikMedium", Arial, Helvetica, sans-serif; font-size: 18px; letter-spacing: 0.01em; white-space: nowrap; transition: color 0.2s ease, transform 0.2s ease; } body.rath-nav .home-menu__link:hover, body.rath-nav .home-menu__link:focus-visible, body.rath-nav .home-menu__trigger:hover, body.rath-nav .home-menu__trigger:focus-visible { color: #c04d08; } body.rath-nav .home-menu__caret { display: inline-flex; align-items: center; justify-content: center; padding: 8px 6px; margin: -8px -2px; cursor: pointer; color: inherit; transition: transform 0.25s ease, color 0.25s ease; } body.rath-nav .home-menu__caret svg { display: block; width: 14px; height: 14px; } body.rath-nav .has-mega.is-open .home-menu__caret { transform: rotate(180deg); color: #c04d08; } /* "Let's Talk" call-to-action at the far right of the nav. */ body.rath-nav .home-nav__cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 999px; background: #ee7a2d; color: #ffffff; font-family: "GraphikMedium", Arial, Helvetica, sans-serif; font-size: 15px; white-space: nowrap; box-shadow: 0 10px 24px -12px rgba(238, 122, 45, 0.9); transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } body.rath-nav .home-nav__cta:hover, body.rath-nav .home-nav__cta:focus-visible { background: #c04d08; transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgba(192, 77, 8, 0.9); } body.rath-nav .has-mega { position: relative; } body.rath-nav .mega-menu { position: fixed; top: var(--home-header-h, 104px); left: 0; right: 0; width: 100%; max-height: calc(100vh - var(--home-header-h, 104px)); overflow-y: auto; transform: translateY(14px); margin-top: 0; padding: 30px 0 34px; border: 0; border-top: 1px solid rgba(15, 18, 14, 0.06); border-radius: 0 0 28px 28px; background: #ffffff; box-shadow: 0 34px 70px -34px rgba(13, 91, 126, 0.45); opacity: 0; visibility: hidden; pointer-events: none; z-index: 30; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease; } body.rath-nav .has-mega.is-open > .mega-menu, body.rath-nav .home-nav.is-open .mega-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } body.rath-nav .mega-menu__inner { max-width: 100%; margin: 0 auto; padding-left: clamp(80px, 9vw, 182px); padding-right: 3.11%; } body.rath-nav .mega-menu__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; } body.rath-nav .mega-menu__eyebrow { margin-bottom: 8px; color: #c04d08; font-family: "GraphikMedium", Arial, Helvetica, sans-serif; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; } body.rath-nav .mega-menu__title { margin-bottom: 10px; color: #33393d; font-family: "ClashDisplayMedium", Arial, Helvetica, sans-serif; font-size: 30px; line-height: 1.12; } body.rath-nav .mega-menu__copy { max-width: 540px; color: #555; font-size: 15px; line-height: 1.7; } body.rath-nav .mega-menu__badge { flex: 0 0 240px; padding: 18px 20px; border-radius: 18px; border: 1px solid rgba(251, 152, 81, 0.35); background: rgba(251, 152, 81, 0.08); color: #4d4d4d; } body.rath-nav .mega-menu__badge span { font-size: 14px; line-height: 1.6; } body.rath-nav .mega-menu__badge strong { display: block; margin-bottom: 6px; color: #c04d08; font-family: "ClashDisplayMedium", Arial, Helvetica, sans-serif; font-size: 19px; } body.rath-nav .mega-menu__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 320px; gap: 16px; margin-top: 10px; } body.rath-nav .mega-menu__group { --accent: #c04d08; --accent-rgb: 192, 77, 8; padding: 18px 16px; border: 1px solid rgba(15, 18, 14, 0.07); border-radius: 18px; background: #faf7f2; box-shadow: 0 14px 30px -26px rgba(15, 18, 14, 0.5); } /* Second column echoes the blue/teal planet in the logo. */ body.rath-nav .mega-menu__group:nth-of-type(2) { --accent: #0d5b7e; --accent-rgb: 13, 91, 126; } body.rath-nav .mega-menu__group-title { margin-bottom: 14px; color: var(--accent, #c04d08); font-family: "GraphikMedium", Arial, Helvetica, sans-serif; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; } body.rath-nav .mega-menu__list { display: grid; gap: 8px; } body.rath-nav .mega-menu__list a { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 12px; border: 1px solid rgba(15, 18, 14, 0.08); border-radius: 14px; background: #ffffff; color: #1f2429; font-family: "GraphikMedium", Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.3; transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } body.rath-nav .mega-menu__list a:hover, body.rath-nav .mega-menu__list a:focus-visible { color: var(--accent, #c04d08); border-color: rgba(var(--accent-rgb, 192, 77, 8), 0.45); box-shadow: 0 10px 22px -14px rgba(var(--accent-rgb, 192, 77, 8), 0.8); transform: translateY(-2px); } /* Icon badge on the left of each service card. */ body.rath-nav .mm-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(var(--accent-rgb, 192, 77, 8), 0.1); color: var(--accent, #c04d08); transition: background-color 0.2s ease, color 0.2s ease; } body.rath-nav .mm-ico svg { width: 19px; height: 19px; } body.rath-nav .mega-menu__list a:hover .mm-ico, body.rath-nav .mega-menu__list a:focus-visible .mm-ico { background: var(--accent, #c04d08); color: #ffffff; } body.rath-nav .mm-label { flex: 1 1 auto; } /* Arrow that slides in on hover. */ body.rath-nav .mm-arrow { flex: 0 0 auto; width: 16px; height: 16px; color: var(--accent, #c04d08); opacity: 0; transform: translateX(-6px); transition: opacity 0.2s ease, transform 0.2s ease; } body.rath-nav .mega-menu__list a:hover .mm-arrow, body.rath-nav .mega-menu__list a:focus-visible .mm-arrow { opacity: 1; transform: translateX(0); } /* Promo feature card (replaces the old "At a glance" stats panel). */ body.rath-nav .mega-menu__feature { display: flex; flex-direction: column; gap: 12px; padding: 24px 22px; border-radius: 18px; background: linear-gradient(160deg, #0d5b7e 0%, #0a3f57 100%); box-shadow: 0 22px 44px -28px rgba(13, 91, 126, 0.9); color: #ffffff; } body.rath-nav .mega-menu__feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(255, 255, 255, 0.12); color: #ffd9b8; } body.rath-nav .mega-menu__feature-icon svg { width: 24px; height: 24px; } body.rath-nav .mega-menu__feature-title { color: #ffffff; font-family: "ClashDisplayMedium", Arial, Helvetica, sans-serif; font-size: 21px; line-height: 1.2; } body.rath-nav .mega-menu__feature-copy { color: rgba(255, 255, 255, 0.82); font-size: 14px; line-height: 1.6; } body.rath-nav .mega-menu__feature-btn { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 4px; padding: 11px 20px; border-radius: 999px; background: #ee7a2d; color: #ffffff; font-family: "GraphikMedium", Arial, Helvetica, sans-serif; font-size: 14px; transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease; } body.rath-nav .mega-menu__feature-btn svg { width: 16px; height: 16px; } body.rath-nav .mega-menu__feature-btn:hover, body.rath-nav .mega-menu__feature-btn:focus-visible { background: #ffffff; color: #0d5b7e; transform: translateX(3px); } body.rath-nav .mega-menu__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(15, 18, 14, 0.08); } body.rath-nav .mega-menu__footer a { color: #0f120e; font-family: "GraphikMedium", Arial, Helvetica, sans-serif; font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; transition: color 0.2s ease, background-color 0.2s ease; } body.rath-nav .mega-menu__footer a:first-child { padding: 12px 24px; border-radius: 999px; background: #ee7a2d; color: #ffffff; } body.rath-nav .mega-menu__footer a:first-child:hover, body.rath-nav .mega-menu__footer a:first-child:focus-visible { background: #c04d08; color: #ffffff; } body.rath-nav .mega-menu__footer a:last-child:hover, body.rath-nav .mega-menu__footer a:last-child:focus-visible { color: #c04d08; } /* ============ Responsive ============ */ @media handheld, only screen and (max-width: 1200px) { body.rath-nav #wrapper { padding-top: 96px; } body.rath-nav header.home-header { gap: 16px; padding: 14px 4vw; } body.rath-nav .home-nav__toggle { display: inline-flex; flex: 0 0 auto; } body.rath-nav .home-nav { position: absolute; top: calc(100% + 8px); left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; justify-content: flex-start; height: auto; gap: 6px; margin: 0; padding: 14px; max-height: calc(100vh - var(--home-header-h, 96px) - 24px); overflow-y: auto; background: #ffffff; border: 1px solid rgba(15, 18, 14, 0.08); border-radius: 18px; box-shadow: 0 30px 60px -26px rgba(15, 18, 14, 0.45); } body.rath-nav .home-nav.is-open { display: flex; } body.rath-nav .home-menu { flex-direction: column; align-items: stretch; width: 100%; gap: 4px; } body.rath-nav .home-menu > li { width: 100%; } body.rath-nav .home-menu__link, body.rath-nav .home-menu__trigger { width: 100%; justify-content: space-between; padding: 13px 14px; border-radius: 12px; background: rgba(15, 18, 14, 0.03); font-size: 15px; } body.rath-nav .home-nav__cta { width: 100%; justify-content: center; margin-top: 8px; } /* Services renders as a tap-to-expand accordion inside the drawer. */ body.rath-nav .mega-menu { position: static; display: none; width: 100%; max-height: none; margin-top: 4px; padding: 2px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; opacity: 1; visibility: visible; transform: none; pointer-events: auto; } body.rath-nav .has-mega.is-open .mega-menu { display: block; } body.rath-nav .mega-menu__inner { padding-left: 0; padding-right: 0; } /* The promo card is desktop-only. */ body.rath-nav .mega-menu__feature { display: none; } body.rath-nav .mega-menu__grid { grid-template-columns: 1fr; gap: 10px; margin-top: 0; } body.rath-nav .mega-menu__group { padding: 12px 12px 14px; box-shadow: none; background: #f7f4ef; } body.rath-nav .mega-menu__group-title { margin-bottom: 10px; } } @media handheld, only screen and (max-width: 767px) { body.rath-nav #wrapper { padding-top: 86px; } body.rath-nav header.home-header { padding: 12px 18px; } body.rath-nav header.home-header .logo { width: clamp(170px, 60vw, 225px); } header .logo { width: 100%; max-width: 226px; } body.rath-nav .home-nav { padding: 12px; } body.rath-nav .home-nav__toggle { width: 42px; height: 42px; border-radius: 12px; } body.rath-nav .mega-menu__list a { min-height: 50px; } }