/* ============================================================
   Raydn premium chrome, svc676
   The top bar appears on all 105 pages, so it is the single
   highest leverage surface on the site.

   Measured defects this file corrects, at 390x844:
     1. Phone button rendered 57px tall inside a 64px nav while the
        logo plate and burger were both 44px. Three heights in one row.
     2. Phone button was 156px of a 351px row, 44 percent of the bar
        given to a raw phone number.
     3. Logo is a JPG with a baked off white background, radius 6px,
        generic drop shadow. It read as a sticker laid on navy.
     4. Burger had no border, no background, no visible affordance.
     5. Header 65px plus breadcrumb bar 61px, both the same flat navy,
        equalled 126px of identical colour, 15 percent of the first
        screen spent on chrome.

   Palette is DNA only. Amber f5a524 f7b23a f0a300, navy 0d1b2e 0a1526,
   grey 8a94a6, off white f4f6fb. No red.
   ============================================================ */

:root{
  --rdn-amber: #f5a524;
  --rdn-amber-hi: #f7b23a;
  --rdn-glass: rgba(11, 23, 40, .86);
  --rdn-hair: rgba(245, 165, 36, .34);
  --rdn-hair-soft: rgba(255, 255, 255, .10);
  --rdn-chip-h: 44px;
  --rdn-chip-r: 13px;
}

/* ---------- 1. The bar itself: glass, not a flat slab ---------- */
/* svc677 CORRECTION. The glass used to live on this element as
   backdrop-filter. That was a defect: backdrop-filter makes an element the
   containing block for any position:fixed DESCENDANT, and the mobile menu
   panel #nav-mobile is a descendant of this header. Its top/bottom:0 then
   resolved against the 65px bar instead of the viewport, so the menu opened
   81px tall and clipped mid word. Measured, with a control.
   The glass now lives on ::after. A pseudo element cannot be the containing
   block for a real element, so the panel resolves against the viewport again
   and the header still looks like glass. */
header.header#site-header{
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset,
              0 10px 30px -18px rgba(0,0,0,.85);
  position: relative;
}
header.header#site-header::after{
  content:"";
  position:absolute; inset:0;
  z-index:-1;              /* behind the bar content, still inside the header */
  pointer-events:none;
  background: linear-gradient(180deg, rgba(16,32,54,.90) 0%, var(--rdn-glass) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}
/* If the browser cannot do backdrop-filter, the bar must still be opaque
   enough to read against a photo hero. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  header.header#site-header::after{
    background: linear-gradient(180deg, #102036 0%, #0d1b2e 100%);
  }
}
/* a single amber filament across the top edge. This is the brand
   signature, one pixel, not a decoration. */
header.header#site-header::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(245,165,36,.00) 8%,
    rgba(245,165,36,.55) 50%,
    rgba(245,165,36,.00) 92%,
    transparent 100%);
  pointer-events:none;
}

header.header#site-header .nav{
  min-height: 60px;
  align-items: center;
  gap: 10px;
}header.header#site-header .nav:where(:not(.rv-senior,.rv-senior *)){gap:8px}

/* ---------- 2. Logo: a designed plate, not a pasted sticker ----------
   The artwork is unchanged. Only its presentation changes: a proper
   squircle, an inset highlight so it reads as a physical tile, and a
   soft amber halo tying it to the brand instead of a grey drop shadow. */
.nav__logo{ flex: 0 0 auto; }

.nav__logo .nav__logo-img{
  width: 40px; height: 40px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow:
    0 0 0 1px rgba(245,165,36,.30),
    0 0 0 4px rgba(245,165,36,.07),
    0 1px 0 rgba(255,255,255,.65) inset,
    0 6px 16px -6px rgba(0,0,0,.70);
  transition: box-shadow .28s cubic-bezier(.4,0,.2,1), transform .28s cubic-bezier(.4,0,.2,1);
}
.nav__logo:hover .nav__logo-img,
.nav__logo:focus-visible .nav__logo-img{
  box-shadow:
    0 0 0 1px rgba(245,165,36,.62),
    0 0 0 5px rgba(245,165,36,.13),
    0 0 22px rgba(245,165,36,.30),
    0 1px 0 rgba(255,255,255,.75) inset,
    0 8px 20px -6px rgba(0,0,0,.75);
  transform: translateY(-1px);
}

/* ---------- 3. The ghost pair: phone and burger, one shared shape ----------
   Both controls now share height, radius, hairline and glow, so the row
   reads as a designed set rather than three unrelated objects. */
header.header .btn--phone,
header.header .nav__burger{
  height: var(--rdn-chip-h);
  min-height: var(--rdn-chip-h);
  border-radius: var(--rdn-chip-r);
  background:
    linear-gradient(180deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.022) 100%),
    rgba(245,165,36,.055);
  border: 1px solid var(--rdn-hair);
  box-shadow:
    0 1px 0 rgba(255,255,255,.16) inset,
    0 0 0 3px rgba(245,165,36,.05),
    0 0 18px -4px rgba(245,165,36,.28),
    0 6px 18px -10px rgba(0,0,0,.8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: border-color .26s cubic-bezier(.4,0,.2,1),
              box-shadow .26s cubic-bezier(.4,0,.2,1),
              transform .26s cubic-bezier(.4,0,.2,1),
              background .26s cubic-bezier(.4,0,.2,1);
}
header.header .btn--phone:hover,
header.header .btn--phone:focus-visible,
header.header .nav__burger:hover,
header.header .nav__burger:focus-visible{
  border-color: rgba(247,178,58,.78);
  background:
    linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.04) 100%),
    rgba(245,165,36,.11);
  box-shadow:
    0 1px 0 rgba(255,255,255,.24) inset,
    0 0 0 4px rgba(245,165,36,.10),
    0 0 26px -2px rgba(245,165,36,.46),
    0 8px 22px -10px rgba(0,0,0,.85);
  transform: translateY(-1px);
}
header.header .btn--phone:active,
header.header .nav__burger:active{ transform: translateY(0); }

/* phone: icon beside the number, on one line. This is the 57px to 44px fix. */
header.header .btn--phone{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding:0 16px;
  white-space: nowrap;
  line-height: 1;
  font-size:16px;
  font-weight: 650;
  letter-spacing: .1px;
  color: #ffffff;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
header.header .btn--phone svg{
  flex: 0 0 auto;
  width: 15px; height: 15px;
  color: var(--rdn-amber-hi);
  filter: drop-shadow(0 0 6px rgba(245,165,36,.5));
}

/* burger: the matching square chip */
header.header .nav__burger{
  width: var(--rdn-chip-h);
  flex: 0 0 var(--rdn-chip-h);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding:0;
  cursor: pointer;
}
header.header .nav__burger span{
  display: block;
  width: 17px; height: 2px;
  border-radius: 2px;
  background: #ffffff;
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .2s linear, width .3s cubic-bezier(.4,0,.2,1);
}
header.header .nav__burger span:nth-child(2){ width: 12px; background: var(--rdn-amber-hi); }
header.header .nav__burger:hover span:nth-child(2){ width: 17px; }
header.header .nav__burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
header.header .nav__burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
header.header .nav__burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); width: 17px; }

/* ---------- 4. Breadcrumb: a rail, not a second navy slab ----------
   Was 61px of the same navy as the header. Now a lighter, shorter,
   visually distinct rail that gives fold depth back. */
nav.rr-breadcrumbs[data-rr-breadcrumbs]{
  background: rgba(255,255,255,.028);
  border-bottom: 1px solid rgba(255,255,255,.055);
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
nav.rr-breadcrumbs[data-rr-breadcrumbs]{
  padding-top:4px;
  padding-bottom:4px;
}
nav.rr-breadcrumbs[data-rr-breadcrumbs] .rr-breadcrumbs__list{
  min-height: 0;
  align-items: center;
  gap: 7px;
  font-size:16px;
  line-height: 1.25;
  padding-top:0;
  padding-bottom:0;
  margin:0;
}nav.rr-breadcrumbs[data-rr-breadcrumbs] .rr-breadcrumbs__list:where(:not(.rv-senior,.rv-senior *)){gap:8px}
nav.rr-breadcrumbs[data-rr-breadcrumbs] .rr-breadcrumbs__item,
nav.rr-breadcrumbs[data-rr-breadcrumbs] .rr-breadcrumbs__sep{
  line-height: 1.25;
  padding-top:0;
  padding-bottom:0;
}
/* keep the tap target legal without paying for it in bar height */
nav.rr-breadcrumbs[data-rr-breadcrumbs] .rr-breadcrumbs__link{
  position: relative;
}
nav.rr-breadcrumbs[data-rr-breadcrumbs] .rr-breadcrumbs__link::after{
  content:"";
  position:absolute;
  left:-6px; right:-6px;
  top:50%; transform:translateY(-50%);
  height:24px;
}
nav.rr-breadcrumbs[data-rr-breadcrumbs] .rr-breadcrumbs__link{
  color: rgba(244,246,251,.72);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
  transition: color .2s linear;
}nav.rr-breadcrumbs[data-rr-breadcrumbs] .rr-breadcrumbs__link:where(:not(.rv-senior,.rv-senior *)){gap:4px}
nav.rr-breadcrumbs[data-rr-breadcrumbs] .rr-breadcrumbs__link:hover{ color: var(--rdn-amber-hi); }
nav.rr-breadcrumbs[data-rr-breadcrumbs] .rr-breadcrumbs__link svg{ width: 13px; height: 13px; opacity: .78; }
nav.rr-breadcrumbs[data-rr-breadcrumbs] .rr-breadcrumbs__sep{ color: rgba(138,148,166,.52); font-size:16px; }
nav.rr-breadcrumbs[data-rr-breadcrumbs] .rr-breadcrumbs__item--section{ color: rgba(244,246,251,.60); }
nav.rr-breadcrumbs[data-rr-breadcrumbs] .rr-breadcrumbs__item--current{
  color: var(--rdn-amber-hi);
  font-weight: 600;
}

/* ---------- 5. Phone at the narrowest real devices ----------
   360px wide still has to hold logo 40 + phone + burger 44 without
   the number wrapping. */
@media (max-width: 374px){
  header.header .btn--phone{ padding:0 12px; font-size:16px; gap: 6px; }header.header .btn--phone:where(:not(.rv-senior,.rv-senior *)){gap:4px}
  header.header .nav{ gap: 6px; }header.header .nav:where(:not(.rv-senior,.rv-senior *)){gap:4px}
}/* ---------- 5. Phone at the narrowest real devices ----------
   360px wide still has to hold logo 40 + phone + burger 44 without
   the number wrapping. */
@media (max-width: 374px):where(:not(.rv-senior,.rv-senior *)){gap:4px;gap:4px}

@media (prefers-reduced-motion: reduce){
  header.header .btn--phone,
  header.header .nav__burger,
  header.header .nav__burger span,
  .nav__logo .nav__logo-img{ transition: none; }
  header.header .btn--phone:hover,
  header.header .nav__burger:hover,
  .nav__logo:hover .nav__logo-img{ transform: none; }
}

/* ------ 6. svc716. Wide screens, one set of controls ----------
   From 1280 up the full menu is on screen, so the two phone sized
   controls step aside. The burger rule in section 1 sets display to
   lay out its three bars, which also switched it on at every width,
   and the sitewide tel link rule in rr-dna-svc661.css does the same to
   the phone icon with !important. The burger only steps aside where a
   menu row exists, so the review page, which has no menu row, keeps
   its burger. A browser without :has() drops that one rule and keeps
   the old behaviour. Below 1280 nothing here applies. */
@media (min-width: 1280px){
  header.header .nav:has(> .nav__links) .nav__burger{ display: none !important; }
}
@media (min-width: 1280px){
  header.header .nav .nav__mobile-call{ display: none !important; }
}
/* Room for the slogan. With both controls gone, 8 pages whose header
   button carries a longer label still cut the slogan short by 11 to
   45 px at 1280, 1536 and 1920 (measured 2026-09-24, 106 pages at
   7 widths). The top level menu items drop from 8 px to 4 px side
   padding, which frees 40 px across the five items and keeps the
   labels 16 px apart, and the header button drops from 24 px to
   16 px to match the phone button beside it, which frees 16 px.
   Dropdown panel links are not top level and keep their padding. */
@media (min-width: 1280px){
  header.header .nav__links > li > .nav__dropdown-trigger,
  header.header .nav__links > li > a{ padding-left: 4px; padding-right: 4px; }
  header.header .nav__actions > .btn:not(.btn--phone):not(.btn--icon){ padding-left: 16px; padding-right: 16px; }
}