/* =====================================================================
   Black Diamond Claims Solutions — site navigation
   Shared by all pages: thin sticky top bar, full-screen menu, search modal.
   Same scaling model as styles.css: 1rem == 1 artboard px (1366 desktop,
   430 on phones). Loaded after styles.css and the page stylesheet.
   ===================================================================== */

:root { --topbar-h: 56rem; }

/* ---------- top bar ---------- */
.topbar {
  position: fixed; left: 0; top: 0; right: 0; height: var(--topbar-h); z-index: 900;
  color: var(--white);
  background: rgba(0, 0, 0, .52);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  transition: background .3s ease, border-color .3s ease;
}
.topbar.is-solid { background: rgba(0, 0, 0, .96); border-bottom-color: rgba(255, 255, 255, .12); }
.topbar .in { height: 100%; display: flex; align-items: center; padding: 0 120rem; }

.topbar__logo { display: flex; align-items: center; margin-right: 26rem; }
.topbar__logo img { width: auto; height: 34rem; }   /* horizontal lockup from Branding/...Logo 2025 ver 02 (white); black version in assets too */

.topbar__right { margin-left: auto; display: flex; align-items: center; }
/* 1px dividers between the phone, search and tool items */
.topbar__right > * + * { position: relative; margin-left: 20rem; }
.topbar__right > * + *::before { content: ""; position: absolute; left: -10rem; top: 50%; width: 1px; height: 22rem; transform: translateY(-50%); background: rgba(255, 255, 255, .38); pointer-events: none; }

.topbar__btn, .topbar__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44rem; height: 44rem; border: 0; border-radius: 6rem; background: transparent; color: inherit; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.topbar__btn:hover, .topbar__icon:hover, .topbar__btn:focus-visible, .topbar__icon:focus-visible { background: rgba(255, 255, 255, .12); outline: none; }
.topbar__icon svg, .topbar__btn svg, .topbar__icon img { width: 22rem; height: 22rem; display: block; }   /* the ALE tool icon is the user's wand PNG (Source/magic-wand.png) in white */

.topbar__phone {
  display: inline-flex; align-items: center; gap: 10rem; height: 44rem; padding: 0 14rem; border-radius: 6rem;
  font-family: var(--font-display); font-size: 22rem; letter-spacing: .06em; white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.topbar__phone svg { width: 18rem; height: 18rem; }
.topbar__phone:hover, .topbar__phone:focus-visible { color: var(--green); background: rgba(255, 255, 255, .08); outline: none; }

/* hamburger -> X */
.burger { position: relative; }
.burger span { position: absolute; left: 12rem; width: 20rem; height: 2px; background: currentColor; border-radius: 1px; transition: transform .3s ease, opacity .2s ease, top .3s ease; }
.burger span:nth-child(1) { top: 15rem; }
.burger span:nth-child(2) { top: 21rem; }
.burger span:nth-child(3) { top: 27rem; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 21rem; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { top: 21rem; transform: rotate(-45deg); }

/* ---------- ALE tool speech bubble (under the wand icon, once per session) ---------- */
.tip {
  position: absolute; right: 120rem; top: calc(100% + 14rem); width: 262rem; z-index: 1;
  display: flex; align-items: flex-start;
  background: var(--white); color: var(--black); border-radius: 12rem;
  box-shadow: 0 16rem 40rem rgba(0, 0, 0, .35);
  transform-origin: calc(100% - 22rem) -14rem;
  transition: opacity .3s ease, transform .35s cubic-bezier(.2, .9, .3, 1.2);
}
.tip[hidden] { display: none; }
.tip::before { content: ""; position: absolute; right: 14rem; top: -8rem; width: 16rem; height: 16rem; background: var(--white); transform: rotate(45deg); border-radius: 2rem; }   /* tail, centred under the 44rem icon */
.tip:not(.is-on) { opacity: 0; transform: scale(.85); }
.tip__link { flex: 1; padding: 14rem 6rem 14rem 16rem; }
.tip__link strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 20rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.05; }
.tip__link strong::before { content: ""; display: inline-block; width: 9rem; height: 9rem; margin: 0 8rem 2rem 0; background: var(--green); transform: rotate(45deg); border-radius: 1rem; }
.tip__link span { display: block; margin-top: 5rem; font-family: var(--font-body); font-weight: 500; font-size: 15.5rem; line-height: 19rem; color: #444; }
.tip__link:hover strong, .tip__link:focus-visible strong { color: var(--green-dark); }
.tip__close { flex: none; width: 30rem; height: 30rem; margin: 6rem 6rem 0 0; border: 0; border-radius: 50%; background: transparent; color: #777; font-family: var(--font-display); font-size: 20rem; line-height: 1; cursor: pointer; }
.tip__close:hover, .tip__close:focus-visible { background: #eee; color: var(--black); outline: none; }
@media (prefers-reduced-motion: reduce) { .tip { transition: none; } }

/* ---------- menu overlay ---------- */
.menu {
  position: fixed; inset: 0; z-index: 950; background: var(--black); color: var(--white);
  display: grid; grid-template-rows: var(--topbar-h) 1fr; overflow: hidden auto;
  visibility: hidden; opacity: 0; transition: opacity .32s ease, visibility 0s linear .32s;
}
.menu.is-open { visibility: visible; opacity: 1; transition: opacity .32s ease, visibility 0s; }
.menu__head { display: flex; align-items: center; padding: 0 120rem; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.menu__head .topbar__logo { margin: 0; }
.menu__head .burger { margin-left: auto; }
.menu__body { display: grid; grid-template-columns: 1fr 380rem; column-gap: 120rem; padding: 70rem 120rem 60rem; align-content: start; }

.menu__list { display: grid; row-gap: 30rem; }
.menu__item a { display: block; padding: 4rem 0 8rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.menu__who { display: block; font-family: var(--font-body); font-weight: 500; font-size: 19rem; letter-spacing: .02em; color: var(--green); }
.menu__what { display: block; margin-top: 8rem; font-family: var(--font-display); font-size: 54rem; line-height: 1.02; letter-spacing: .04em; text-transform: uppercase; transition: color .2s ease, transform .3s ease; }
.menu__item a:hover .menu__what, .menu__item a:focus-visible .menu__what { color: var(--green); transform: translateX(8rem); }
.menu__item a:focus-visible { outline: none; }
.menu__item a[aria-current="page"] .menu__what { color: #9a9a9a; }
.menu__item a[aria-current="page"] .menu__what::after { content: "You are here"; display: inline-block; margin-left: 16rem; vertical-align: middle; font-family: var(--font-body); font-size: 14rem; letter-spacing: .08em; color: var(--green); border: 1px solid var(--green); border-radius: 2rem; padding: 4rem 8rem 2rem; }

.menu__more { display: grid; row-gap: 14rem; align-content: start; }
.menu__more h4 { font-family: var(--font-body); font-weight: 500; font-size: 15rem; letter-spacing: .18em; text-transform: uppercase; color: #8d8d8d; margin-bottom: 6rem; }
.menu__more a { display: flex; align-items: center; gap: 12rem; font-family: var(--font-display); font-size: 30rem; letter-spacing: .04em; text-transform: uppercase; transition: color .2s ease; }
.menu__more a:hover, .menu__more a:focus-visible { color: var(--green); outline: none; }
.menu__more a svg { width: 20rem; height: 20rem; flex: none; }
.menu__group { display: grid; row-gap: 6rem; margin-bottom: 4rem; }
.menu__more a.menu__sub { position: relative; padding-left: 18rem; font-family: var(--font-body); font-weight: 500; font-size: 18rem; line-height: 22rem; letter-spacing: .02em; text-transform: none; color: #cfcfcf; }
.menu__more a.menu__sub::before { content: ""; position: absolute; left: 0; top: 50%; width: 8rem; height: 2rem; background: var(--green); }
.menu__more a.menu__sub:hover, .menu__more a.menu__sub:focus-visible { color: var(--green); }
.menu__contact { margin-top: 40rem; font-family: var(--font-body); font-size: 18rem; line-height: 26rem; color: #cfcfcf; }
.menu__contact a { display: inline; font-family: inherit; font-size: inherit; letter-spacing: 0; text-transform: none; color: var(--white); }
.menu__contact a:hover { color: var(--green); }

/* newsletter sign-up under the contact details */
.menu__news { margin-top: 26rem; padding-top: 22rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.menu__news h4 { margin-bottom: 10rem; }
.menu__news-row { display: flex; gap: 8rem; }
.menu__news-input { flex: 1; min-width: 0; height: 40rem; padding: 0 12rem; border: 1px solid rgba(255, 255, 255, .3); border-radius: 4rem; background: rgba(255, 255, 255, .06); color: var(--white); font-family: var(--font-body); font-weight: 500; font-size: 17rem; }
.menu__news-input::placeholder { color: #8d8d8d; }
.menu__news-input:focus-visible { outline: none; border-color: var(--green); }
.menu__news-input[aria-invalid="true"] { border-color: #ff6b6b; }
.menu__news-btn { height: 40rem; padding: 0 18rem; font-size: 20rem; border: 0; cursor: pointer; }
.menu__news-status { margin-top: 8rem; font-family: var(--font-body); font-size: 15rem; line-height: 20rem; color: #cfcfcf; }
.menu__news-status:empty { display: none; }
.menu__news-status.is-ok { color: var(--green); }
.menu__news-status.is-error { color: #ff6b6b; }

/* staggered rise of the items */
.menu__item, .menu__more { transform: translateY(16rem); opacity: 0; transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .45s ease; }
.menu.is-open .menu__item, .menu.is-open .menu__more { transform: none; opacity: 1; }
.menu.is-open .menu__item:nth-child(1) { transition-delay: .08s; }
.menu.is-open .menu__item:nth-child(2) { transition-delay: .14s; }
.menu.is-open .menu__item:nth-child(3) { transition-delay: .20s; }
.menu.is-open .menu__more { transition-delay: .26s; }

/* ---------- search modal ---------- */
.search {
  position: fixed; inset: 0; z-index: 960; background: rgba(0, 0, 0, .78);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; justify-content: center; align-items: flex-start; padding: 90rem 22rem 40rem; overflow-y: auto;
  visibility: hidden; opacity: 0; transition: opacity .25s ease, visibility 0s linear .25s;
}
.search.is-open { visibility: visible; opacity: 1; transition: opacity .25s ease, visibility 0s; }
.search__panel {
  width: 820rem; max-width: 100%; background: var(--white); color: var(--black); border-radius: 6rem; overflow: hidden;
  box-shadow: 0 30rem 80rem rgba(0, 0, 0, .5);
  transform: translateY(-12rem); transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.search.is-open .search__panel { transform: none; }
.search__form { display: flex; align-items: center; gap: 14rem; padding: 0 22rem; border-bottom: 1px solid #e3e3e3; }
.search__form svg { width: 24rem; height: 24rem; flex: none; color: #555; }
.search__input {
  flex: 1; height: 76rem; border: 0; outline: none; background: transparent;
  font-family: var(--font-body); font-weight: 500; font-size: 26rem; color: var(--black);
}
.search__input::placeholder { color: #9b9b9b; }
.search__input::-webkit-search-cancel-button, .search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }   /* our own close button instead of the browser's */
.search__close {
  display: inline-flex; align-items: center; justify-content: center; width: 40rem; height: 40rem; border: 0; border-radius: 4rem; background: transparent; cursor: pointer; color: #555;
}
.search__close:hover, .search__close:focus-visible { background: #efefef; color: var(--black); outline: none; }
.search__close svg { width: 20rem; height: 20rem; }
.search__hint { padding: 12rem 22rem 0; font-family: var(--font-body); font-size: 14rem; letter-spacing: .12em; text-transform: uppercase; color: #8d8d8d; }
.search__results { list-style: none; padding: 10rem 10rem 14rem; max-height: min(60vh, 560rem); overflow-y: auto; }
.search__results li a {
  display: grid; grid-template-columns: 1fr; row-gap: 4rem; padding: 14rem 12rem; border-radius: 4rem; transition: background .15s ease;
}
.search__results li a:hover, .search__results li a:focus-visible, .search__results li.is-active a { background: #f1f1f1; outline: none; }
.search__page { font-family: var(--font-body); font-weight: 500; font-size: 13rem; letter-spacing: .14em; text-transform: uppercase; color: var(--green-dark); }
.search__title { font-family: var(--font-display); font-size: 28rem; line-height: 1.04; letter-spacing: .03em; text-transform: uppercase; }
.search__snippet { font-family: var(--font-body); font-size: 17rem; line-height: 23rem; color: #444; }
.search__results mark { background: rgba(22, 199, 118, .28); color: inherit; border-radius: 2rem; padding: 0 1rem; }
.search__empty { padding: 26rem 22rem 30rem; font-family: var(--font-body); font-size: 19rem; line-height: 26rem; color: #444; }
.search__empty a { color: var(--green-dark); text-decoration: underline; }
.search__empty strong { font-weight: 700; }

/* ---------- utilities ---------- */
html.is-locked, html.is-locked body { overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; }

/* =====================================================================
   PHONES (430 artboard)
   ===================================================================== */
@media (max-width: 760px) {
  :root { --topbar-h: 54rem; }
  .topbar .in { padding: 0 14rem; }
  .topbar__logo { margin-right: 4rem; }
  .topbar__logo img { height: 28rem; }
  .topbar__btn, .topbar__icon { width: 42rem; height: 42rem; }
  .topbar__icon svg, .topbar__btn svg, .topbar__icon img { width: 21rem; height: 21rem; }
  .topbar__right > * + * { margin-left: 12rem; }
  .topbar__right > * + *::before { left: -6rem; height: 18rem; }
  .topbar__phone { padding: 0 10rem; width: 42rem; justify-content: center; }
  .topbar__phone span { display: none; }   /* number becomes the handset icon alone */
  .tip { right: 14rem; top: calc(100% + 12rem); width: 236rem; border-radius: 10rem; }
  .tip::before { right: 13rem; }
  .tip__link { padding: 12rem 4rem 12rem 14rem; }
  .tip__link strong { font-size: 18rem; }
  .tip__link span { font-size: 14.5rem; line-height: 18rem; }
  .topbar__phone svg { width: 20rem; height: 20rem; }
  .burger span { left: 11rem; }
  .burger span:nth-child(1) { top: 14rem; }
  .burger span:nth-child(2) { top: 20rem; }
  .burger span:nth-child(3) { top: 26rem; }
  .burger[aria-expanded="true"] span:nth-child(1), .burger[aria-expanded="true"] span:nth-child(3) { top: 20rem; }

  .menu__head { padding: 0 14rem; }
  .menu__body { grid-template-columns: 1fr; row-gap: 40rem; padding: 36rem 22rem 50rem; }
  .menu__list { row-gap: 22rem; }
  .menu__who { font-size: 16rem; }
  .menu__what { font-size: 34rem; margin-top: 6rem; }
  .menu__item a[aria-current="page"] .menu__what::after { display: block; margin: 8rem 0 0; width: max-content; }
  .menu__more a { font-size: 24rem; }
  .menu__contact { margin-top: 26rem; font-size: 16rem; line-height: 23rem; }
  .menu__news { margin-top: 22rem; padding-top: 18rem; }
  .menu__news-input { height: 44rem; font-size: max(16px, 16rem); }
  .menu__news-btn { height: 44rem; font-size: 18rem; }

  .search { padding: 70rem 14rem 30rem; }
  .search__form { padding: 0 14rem; gap: 10rem; }
  .search__input { height: 60rem; font-size: 20rem; }
  .search__results { max-height: 62vh; }
  .search__title { font-size: 23rem; }
  .search__snippet { font-size: 15rem; line-height: 20rem; }
}

@media (prefers-reduced-motion: reduce) {
  .topbar, .menu, .menu__item, .menu__more, .menu__what, .search, .search__panel, .burger span { transition: none; }
}