/* Navigation band: every service and About us by name, the page you are on highlighted, and the site search.
   On the simple view, the service pages, About us, the FAQ (without search: it has its own) and the privacy
   statement. Dark by default; light on the ivory pages (FAQ, privacy statement). */
.s-nav{position:relative; z-index:6; display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px}
.simple-view .s-nav{max-width:1320px; margin:0 auto; padding:calc(env(safe-area-inset-top,0px) + 100px) var(--gutter) 0}
.svc-hero .s-nav{max-width:1240px; margin:0 auto clamp(32px,5vh,56px)}
.faq-hero .s-nav{margin:0 0 clamp(32px,5vh,56px)}
/* The links keep their full width; when they and the search do not fit on one line, the search moves to its own line
   (never underneath the links, whatever the length of the service names). */
.s-links{flex:1 0 auto; min-width:0; max-width:100%}
.s-links ul{display:flex; flex-wrap:nowrap; gap:4px 2px; margin:0; padding:0; list-style:none}
.s-links a{display:inline-flex; align-items:center; min-height:40px; padding:0 11px; border-radius:999px; color:rgba(247,244,237,.9); text-decoration:none; font:500 var(--t-sm)/1 var(--f-sans); white-space:nowrap; transition:background var(--dur-fast) ease, color var(--dur-fast) ease}
.s-links a:hover{background:var(--navy-700); color:var(--ivory); box-shadow:inset 0 0 0 1px rgba(235,212,160,.45)}
.s-links a[aria-current="page"]{background:var(--champ); color:var(--navy); font-weight:600; box-shadow:none}
.s-links a:focus-visible{outline:2px solid var(--champ-hi); outline-offset:2px}

/* Search: a liquid-glass field; suggestions with the agents */
.s-search{position:relative; flex:0 1 300px; min-width:260px}
.s-search-box{display:flex; align-items:center; gap:12px; padding:0 8px 0 20px; border-radius:999px; border:1px solid rgba(235,212,160,.32); background:linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.03) 45%, rgba(216,182,128,.06)); -webkit-backdrop-filter:blur(18px) saturate(1.35); backdrop-filter:blur(18px) saturate(1.35); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 30px 70px -40px rgba(0,0,0,.9)}
.s-search-box .ico{flex:none; width:20px; height:20px; color:var(--champ)}
.s-search-box input{flex:1; min-width:0; min-height:48px; border:0; background:transparent; color:var(--ivory); font:400 var(--t-lg)/1.3 var(--f-sans); outline:none}
.s-search-box input::placeholder{color:rgba(247,244,237,.72)}
.s-search-box input::-webkit-search-cancel-button{filter:invert(1) opacity(.6)}
.s-search-box:focus-within{border-color:var(--champ-hi); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 2px rgba(235,212,160,.55)}
.s-q-list{position:absolute; right:0; width:min(560px, calc(100vw - 2 * var(--gutter))); top:calc(100% + 10px); margin:0; padding:8px; list-style:none; max-height:min(60vh,460px); overflow:auto; border-radius:20px; background:rgba(10,26,47,.96); border:1px solid rgba(235,212,160,.28); -webkit-backdrop-filter:blur(20px) saturate(1.3); backdrop-filter:blur(20px) saturate(1.3); box-shadow:0 30px 80px -30px rgba(0,0,0,.9); color:var(--ivory)}
.s-q-opt{display:flex; align-items:center; gap:14px; min-height:52px; padding:6px 12px; border-radius:12px; cursor:pointer; color:var(--ivory)}
.s-q-opt img{flex:none; width:40px; height:40px; border-radius:50%; background:rgba(247,244,237,.08)}
.s-q-ico{flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1px solid rgba(235,212,160,.35); color:var(--champ)}
.s-q-ico .ico{width:16px; height:16px}
.s-q-txt{display:flex; flex-direction:column; gap:2px; min-width:0}
.s-q-t{font-size:var(--t-base); line-height:1.35}
.s-q-k{font:500 11px/1.2 var(--f-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--slate)}
.s-q-opt:hover, .s-q-opt[aria-selected="true"]{background:rgba(216,182,128,.18)}
.s-q-opt[aria-selected="true"]{outline:1px solid rgba(235,212,160,.6)}
.s-q-opt.k-avi{border-top:1px solid rgba(235,212,160,.16); border-radius:0 0 12px 12px; margin-top:4px}

/* Light tone on the ivory pages */
.faq-hero .s-links a{color:var(--navy)}
.faq-hero .s-links a:hover{background:#E6E5E0; color:var(--navy); box-shadow:inset 0 0 0 1px rgba(10,26,47,.35)}
.faq-hero .s-links a[aria-current="page"]{background:var(--navy); color:var(--ivory)}
.faq-hero .s-links a:focus-visible{outline-color:var(--navy)}
.faq-hero .s-search-box{border-color:rgba(10,26,47,.3); background:#FFFFFF; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 20px 50px -36px rgba(10,26,47,.6)}
.faq-hero .s-search-box .ico{color:var(--bronze)}
.faq-hero .s-search-box input{color:var(--navy)}
.faq-hero .s-search-box input::placeholder{color:var(--placeholder, #66758A)}
.faq-hero .s-search-box input::-webkit-search-cancel-button{filter:none}
.faq-hero .s-search-box:focus-within{border-color:var(--navy); box-shadow:0 0 0 2px rgba(10,26,47,.35)}

@media (max-width: 1439px){
  .s-nav{flex-wrap:wrap}
  .s-links ul{flex-wrap:wrap}
  .s-links{flex-basis:100%}
  .s-search{flex:1 1 100%}
  .s-q-list{left:0; right:auto}
}
@media (max-width: 800px), (max-aspect-ratio: 9/10){
  .simple-view .s-nav{padding-top:calc(env(safe-area-inset-top,0px) + 118px)}
  .s-nav{gap:12px}
  .s-search{order:-1}
  .s-search-box{gap:8px; padding:0 6px 0 14px}
  .s-search-box .ico{width:16px; height:16px}
  .s-search-box input{min-height:36px; font-size:var(--t-base)}
  .s-links a{min-height:30px; padding:0 11px; font-size:12px}
  /* Phones: the names as glass chips in one row that scrolls sideways */
  .s-links ul{flex-wrap:nowrap; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px 2px 4px; -webkit-mask-image:linear-gradient(to right, #000 85%, transparent); mask-image:linear-gradient(to right, #000 85%, transparent)}
  .s-links ul::-webkit-scrollbar{display:none}
  .s-links a{border:1px solid rgba(235,212,160,.3); background:rgba(5,13,25,.4); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
  .faq-hero .s-links a{border-color:rgba(10,26,47,.25); background:#FFFFFF; -webkit-backdrop-filter:none; backdrop-filter:none}
  .faq-hero .s-links a[aria-current="page"]{background:var(--navy)}
}
