/* Shell: the header, its menus, the mobile drawer and the footer. Dark on every page.
   Header: the white Flush logo on the void. At the top of a page it sits flush with the page; once the
   page scrolls under it, it turns slightly translucent with a hairline (shell.js sets .is-scrolled).
   Right-hand side: Log in as a small text link and one quiet "Speak to a consultant" pill (#talk).
   Menus: calm lists, a short label and a few words each; the dot (a person) lights the current page.
   Footer: logo and one line, four short columns (Services, Company, Resources, Contact), then a base row:
   the legal links, the company line and the registered office (the last item of .foot__base, which the
   landing page's companion dot settles beside). */

:root { --nav-h: 64px; }
/* The canvas is dark too, so overscroll (rubber-banding) never shows a light band above the header or
   below the footer, and scrollbars and native controls are drawn for a dark page. */
html { scroll-padding-top: calc(var(--nav-h) + .5rem); background: #0b0d10; }
:root { color-scheme: dark; } /* after BaseLayout's :root { color-scheme: light } */

.nav, .drawer, .foot {
  --sh-bg: #0b0d10;
  --sh-raise: #121418;
  --sh-fg: #f7f7f5;
  --sh-soft: rgb(247 247 245 / .74);
  --sh-mute: rgb(247 247 245 / .58);
  --sh-line: rgb(255 255 255 / .08);
  --sh-line-2: rgb(255 255 255 / .16);
  --sh-acc: #8fb4ff;
  --sh-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Header ---------- */
body > header.nav {
  background: var(--sh-bg);
  color: var(--sh-fg);
  border-bottom: 1px solid var(--sh-line);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background-color .25s var(--sh-ease), border-color .25s var(--sh-ease);
}
html.js body > header.nav:not(.is-scrolled) { border-bottom-color: transparent; }
body > header.nav.is-scrolled {
  background: rgb(11 13 16 / .8);
  -webkit-backdrop-filter: saturate(150%) blur(16px); backdrop-filter: saturate(150%) blur(16px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body > header.nav.is-scrolled { background: rgb(11 13 16 / .97); }
}
/* Low-memory phones (shell.js adds .lite): a solid header instead of a live blur over the animation */
html.lite body > header.nav.is-scrolled { background: rgb(11 13 16 / .97); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.menu > header.nav { background: var(--sh-bg); }

body > header.nav .nav__in { gap: clamp(1rem, 2.2vw, 2rem); }
body > header.nav .mark { min-height: 44px; color: var(--sh-fg); border-radius: 4px; }
/* Phones keep the "Claims Gate" wordmark (a little smaller) down to 385px; below that, the dots alone,
   so the consultant pill and the 44px menu button keep their room. Overrides brand.css's 419px switch. */
@media (width < 385px) {
  body > header.nav .mark .mark__logo { display: none; }
  body > header.nav .mark .mark__dots { display: block; }
}
@media (385px <= width < 480px) {
  body > header.nav .mark .mark__logo { display: block; height: 21px; }
  body > header.nav .mark .mark__dots { display: none; }
}

/* Primary links */
body > header.nav .nav__links { gap: .125rem; margin-inline-start: clamp(0rem, 1vw, .75rem); }
body > header.nav .nav__links > a,
body > header.nav .nav__trig {
  position: relative;
  display: inline-flex; align-items: center; gap: .375rem;
  height: 2.5rem; padding: 0 .75rem;
  border-radius: 999px;
  color: var(--sh-soft);
  font-size: .9375rem; letter-spacing: -.011em; line-height: 1;
  transition: color .18s var(--sh-ease), background-color .18s var(--sh-ease);
}
body > header.nav .nav__links > a:hover,
body > header.nav .nav__trig:hover,
body > header.nav .nav__item.open .nav__trig { color: var(--sh-fg); background: rgb(255 255 255 / .06); }
body > header.nav .nav__chev {
  width: 10px; height: 10px; margin-inline-end: -.125rem;
  fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  opacity: .7; transition: transform .2s var(--sh-ease);
}
body > header.nav .nav__item.open .nav__chev { transform: rotate(180deg); }

/* The current page (or its section): brighter label and a small dot beneath it. */
body > header.nav .nav__links > a[aria-current="page"],
body > header.nav .nav__links > a.is-section,
body > header.nav .nav__item.is-current .nav__trig { color: var(--sh-fg); }
body > header.nav .nav__links > a[aria-current="page"]::after,
body > header.nav .nav__links > a.is-section::after,
body > header.nav .nav__item.is-current .nav__trig::after {
  content: ""; position: absolute; left: 50%; bottom: 3px;
  width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: var(--sh-acc);
}
body > header.nav .nav__item.is-current .nav__trig::after { margin-left: -7px; }

/* Dropdown panels: a calm list */
body > header.nav .panel {
  display: block;
  position: absolute; top: calc(100% + 16px); left: -.375rem;
  width: 19rem; min-width: 0;
  padding: .375rem;
  background: var(--sh-raise);
  border: 1px solid var(--sh-line-2);
  border-radius: 14px;
  box-shadow: 0 28px 60px -24px rgb(0 0 0 / .75), 0 2px 8px rgb(0 0 0 / .25);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--sh-ease), transform .18s var(--sh-ease), visibility 0s linear .18s;
}
/* keeps the pointer inside the menu on its way down from the label */
body > header.nav .panel::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
body > header.nav .nav__item.open .panel { display: block; opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
body > header.nav .panel__list { display: grid; gap: 2px; }
body > header.nav .panel a {
  display: grid; grid-template-columns: 6px minmax(0, 1fr); column-gap: .875rem; row-gap: .125rem;
  align-items: center;
  padding: .625rem .75rem;
  border: 0; border-radius: 10px;
  transition: background-color .15s var(--sh-ease);
}
body > header.nav .panel a::before {
  content: ""; grid-row: 1; width: 6px; height: 6px; border-radius: 50%;
  background: rgb(255 255 255 / .2);
  transition: background-color .15s var(--sh-ease), transform .15s var(--sh-ease);
}
body > header.nav .panel a:hover,
body > header.nav .panel a:focus-visible { background: rgb(255 255 255 / .05); }
body > header.nav .panel a:hover::before,
body > header.nav .panel a:focus-visible::before { background: var(--sh-acc); }
body > header.nav .panel a[aria-current="page"]::before { background: var(--blue); box-shadow: 0 0 0 3px rgb(0 98 254 / .25); }
body > header.nav .panel .panel__t {
  grid-column: 2; color: var(--sh-fg);
  font-size: .9375rem; font-weight: 400; letter-spacing: -.011em; line-height: 1.3;
}
body > header.nav .panel .panel__d {
  grid-column: 2; color: var(--sh-mute);
  font-size: .8125rem; font-weight: 300; letter-spacing: -.005em; line-height: 1.35;
}

/* Right-hand side: Log in, then one quiet pill */
body > header.nav .nav__end { gap: 1rem; }
body > header.nav .nav__login {
  min-height: 2.5rem; padding-inline: .25rem; border-radius: 6px;
  color: var(--sh-mute); font-size: .875rem; letter-spacing: -.005em;
  transition: color .18s var(--sh-ease);
}
body > header.nav .nav__login:hover { color: var(--sh-fg); }
.nav__cta, .drawer__btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .5625rem;
  white-space: nowrap;
  border: 1px solid var(--sh-line-2); border-radius: 999px;
  background: rgb(255 255 255 / .03);
  color: var(--sh-fg);
  font-weight: 500; letter-spacing: -.01em; line-height: 1;
  transition: background-color .2s var(--sh-ease), border-color .2s var(--sh-ease), color .2s var(--sh-ease);
}
.nav__cta { height: 2.375rem; padding: 0 1rem 0 .875rem; font-size: .875rem; }
.nav__cta-dot {
  flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 0 3px rgb(0 98 254 / .22);
  transition: background-color .2s var(--sh-ease), box-shadow .2s var(--sh-ease);
}
.nav__cta:hover, .drawer__btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.nav__cta:hover .nav__cta-dot, .drawer__btn:hover .nav__cta-dot { background: #fff; box-shadow: 0 0 0 3px rgb(255 255 255 / .22); }
/* While the contact section is on screen the pill steps back: it would only point at what is already in
   view (shell.js sets body.at-talk). It keeps its place, so nothing in the header moves. */
body > header.nav .nav__cta {
  transition: background-color .2s var(--sh-ease), border-color .2s var(--sh-ease), color .2s var(--sh-ease),
    opacity .2s var(--sh-ease) .28s, visibility 0s linear .28s;
}
body.at-talk > header.nav .nav__cta {
  opacity: 0; visibility: hidden;
  transition: opacity .2s var(--sh-ease), visibility 0s linear .2s;
}
/* ... and Log in slides into its place at the right edge (shell.js measures the distance). */
body > header.nav .nav__login { transition: color .18s var(--sh-ease), transform .3s var(--sh-ease); }
body.at-talk > header.nav .nav__login {
  transform: translateX(var(--talk-shift, 0px));
  transition: color .18s var(--sh-ease), transform .3s var(--sh-ease) .2s; /* after the pill has faded */
}

/* Focus */
body > header.nav a:focus-visible, body > header.nav button:focus-visible,
body > .drawer a:focus-visible, body > footer.foot a:focus-visible {
  outline: 2px solid var(--sh-acc); outline-offset: 3px;
}
body > header.nav .panel a:focus-visible { outline-offset: -2px; }

/* Menu button: two lines that become a cross */
body > header.nav .burger {
  width: 44px; height: 44px; padding: 0; margin: 0 -10px 0 0;
  place-content: center; gap: 6px; border-radius: 999px;
}
body > header.nav .burger i { width: 18px; height: 1.5px; background: var(--sh-fg); border-radius: 1px; }
body.menu > header.nav .burger i:first-child { transform: translateY(3.75px) rotate(45deg); }
body.menu > header.nav .burger i:nth-child(2) { opacity: 1; transform: translateY(-3.75px) rotate(-45deg); }
body > header.nav .nav__nojs { display: none; }
body > header.nav .nav__end { transition: opacity .2s var(--sh-ease), visibility 0s linear 0s; }
body.menu > header.nav .nav__end { opacity: 0; visibility: hidden; transition: opacity .15s var(--sh-ease), visibility 0s linear .15s; }

@media (width <= 999px) {
  body > header.nav .nav__in { gap: .5rem; }
  body > header.nav .nav__end { margin-inline-start: auto; gap: .5rem; }
  body > header.nav .nav__login { display: none; }
  .nav__cta { height: 2.25rem; padding: 0 .875rem 0 .75rem; font-size: .8125rem; gap: .5rem; }
  .nav__cta::after { content: ""; position: absolute; inset: -4px -2px; }
}
@media (width <= 359px) {
  .nav__cta { padding-inline: .625rem; }
  .nav__cta .nav__cta-dot { display: none; }
}

/* ---------- Drawer (below 1000px) ---------- */
body > .drawer {
  background: var(--sh-bg); color: var(--sh-fg);
  padding-bottom: 0;
}
body > .drawer .drawer__in {
  min-height: 100%;
  display: flex; flex-direction: column;
  padding-block: .75rem 1.5rem;
}
body > .drawer .drawer__grp { border-bottom: 1px solid var(--sh-line); padding-block: 1rem; }
body > .drawer .drawer__h {
  margin-bottom: .25rem;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sh-mute);
}
body > .drawer .drawer__grp a {
  display: flex; align-items: center; gap: .75rem;
  min-height: 2.875rem; padding-block: 0;
  color: var(--sh-fg);
  font-size: 1.3125rem; font-weight: 300; letter-spacing: -.025em;
}
body > .drawer .drawer__grp a::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sh-acc); opacity: 0;
}
body > .drawer .drawer__grp a[aria-current="page"]::after,
body > .drawer .drawer__grp a.is-section::after { opacity: 1; }
body > .drawer .drawer__grp a:active { color: var(--sh-soft); }
body > .drawer .drawer__cta {
  margin-top: auto; padding-top: 1.75rem;
  display: grid; gap: .25rem;
  /* the button stays on screen at the foot of the menu, even when the links run past a short phone screen */
  position: sticky; bottom: 0; z-index: 1;
  margin-bottom: -1.5rem; padding-bottom: max(1rem, env(safe-area-inset-bottom));
  background: linear-gradient(rgb(11 13 16 / 0), var(--sh-bg) 1.25rem);
}
/* short phone screens: slightly tighter rows, so most of the menu fits without scrolling */
@media (width < 640px) and (height <= 720px) {
  body > .drawer .drawer__grp { padding-block: .625rem; }
  body > .drawer .drawer__grp a { min-height: 2.625rem; font-size: 1.25rem; }
}
.drawer__btn { height: 3.25rem; padding: 0 1.25rem; font-size: 1rem; background: var(--blue); border-color: var(--blue); color: #fff; }
.drawer__btn .nav__cta-dot { background: #fff; box-shadow: 0 0 0 3px rgb(255 255 255 / .22); }
.drawer__btn:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
body > .drawer .drawer__more { display: flex; justify-content: center; gap: 2rem; }
body > .drawer .drawer__login {
  display: flex; align-items: center; justify-content: center; min-height: 2.75rem;
  color: var(--sh-mute); font-size: .9375rem;
}
body > .drawer .drawer__login:active { color: var(--sh-fg); }
@media (width >= 640px) {
  body > .drawer .drawer__nav { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap-col); }
  body > .drawer .drawer__grp { border-bottom: 0; }
  body > .drawer .drawer__grp--more { grid-column: 1 / -1; border-block: 1px solid var(--sh-line); }
  body > .drawer .drawer__grp--more ul { display: flex; gap: 2.5rem; }
  body > .drawer .drawer__cta {
    margin-top: 0; padding-top: 2rem;
    grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 1.5rem;
  }
  .drawer__btn { padding: 0 1.75rem; }
}

/* ---------- Without JavaScript ---------- */
html:not(.js) body > header.nav .nav__item:hover .panel,
html:not(.js) body > header.nav .nav__item:focus-within .panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (width <= 999px) {
  html:not(.js) body > header.nav .burger { display: none; }
  html:not(.js) body > header.nav .nav__nojs {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: .5rem;
    color: var(--sh-fg); font-size: .875rem;
  }
}

/* ---------- Footer ---------- */
/* The dark contact section sits directly above, so the footer starts with a hairline the width of the
   content (the same length as the base row's), not a full-bleed rule. */
body > footer.foot {
  background: var(--sh-bg); color: var(--sh-fg);
  border-top: 0;
  padding-block: 0;
}
body > footer.foot .foot__top {
  display: grid; gap: 2rem;
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--sh-line);
}
@media (width >= 760px) { body > footer.foot .foot__top { gap: 3rem; } }
@media (width >= 1200px) {
  body > footer.foot .foot__top { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-col); }
}
/* a 44px tap area around the logo without moving anything */
body > footer.foot .foot__mark { display: inline-flex; border-radius: 4px; padding-block: 10px; margin-block: -10px; }
body > footer.foot .foot__logo { display: block; width: auto; height: 26px; }
body > footer.foot .foot__line {
  margin-top: 1rem; max-width: 26ch;
  color: var(--sh-mute); font-size: var(--step-1); font-weight: 300; letter-spacing: -.015em; line-height: 1.45;
}
@media (width < 760px) {
  body > footer.foot .foot__logo { height: 24px; }
  body > footer.foot .foot__line { margin-top: .75rem; max-width: 34ch; font-size: 1rem; }
}

/* Four short columns from 760px. Below that, two columns: Services over Resources, Company over
   Contact. Services and Contact span two rows, so each column is as tall as its own links and the two
   come out level (6 links each) instead of every row taking its tallest group. */
body > footer.foot .foot__cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto;
  gap: 1.5rem 1.5rem;
}
body > footer.foot .foot__grp--svc { grid-column: 1; grid-row: 1 / span 2; }
body > footer.foot .foot__grp--co { grid-column: 2; grid-row: 1; }
body > footer.foot .foot__grp--res { grid-column: 1; grid-row: 3; }
body > footer.foot .foot__grp--ct { grid-column: 2; grid-row: 2 / span 2; }
@media (width >= 760px) {
  body > footer.foot .foot__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto; gap: 2.25rem 1.5rem; }
  body > footer.foot .foot__grp { grid-column: auto; grid-row: auto; }
}
body > footer.foot .foot__h {
  margin-bottom: .5rem;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mute-dark);
}
body > footer.foot li { margin: 0; }
body > footer.foot .foot__cols a,
body > footer.foot .foot__legal a {
  display: inline-flex; align-items: center; min-height: 2rem;
  color: var(--sh-soft); letter-spacing: -.011em;
  transition: color .18s var(--sh-ease);
}
body > footer.foot .foot__cols a { font-size: .9375rem; }
body > footer.foot .foot__cols a:hover,
body > footer.foot .foot__legal a:hover,
body > footer.foot a[aria-current="page"] { color: var(--sh-fg); }

/* Base row: legal links, the company line, and the registered office last (see the note at the top). */
body > footer.foot .foot__base {
  margin-top: clamp(2rem, 5vw, 4rem);
  padding-block: .75rem 1.5rem;
  border-top: 1px solid var(--sh-line);
  display: grid; gap: .25rem;
  color: var(--sh-mute); font-size: .8125rem; line-height: 1.5;
}
body > footer.foot .foot__legal { display: flex; flex-wrap: wrap; column-gap: 1.25rem; margin-bottom: .25rem; }
body > footer.foot .foot__legal a { font-size: .8125rem; }
@media (width >= 760px) {
  body > footer.foot .foot__base {
    padding-block: 1.25rem 2rem;
    grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; row-gap: .125rem;
    grid-template-areas: "co legal" "addr legal";
  }
  body > footer.foot .foot__co { grid-area: co; }
  body > footer.foot .foot__addr { grid-area: addr; }
  body > footer.foot .foot__legal { grid-area: legal; align-self: start; margin: -.375rem 0 0; column-gap: 1.5rem; }
}
@media (width <= 999px) {
  body > footer.foot .foot__cols a,
  body > footer.foot .foot__legal a { min-height: 2.75rem; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body > header.nav, body > header.nav *, body > .drawer, body > footer.foot *,
  .nav__cta, .nav__cta-dot, .drawer__btn { transition: none !important; }
  body > header.nav .panel { transform: none; }
  body > .drawer { transform: none !important; }
}

@media print {
  body > header.nav, body > footer.foot { background: #fff !important; color: #000 !important; }
  body > header.nav .nav__links, body > header.nav .nav__end, body > header.nav .burger { display: none !important; }
  body > header.nav svg [fill="#fff"], body > footer.foot svg [fill="#fff"] { fill: #000; }
}

/* Claimant login (20 Oct 2026): James wants a clear login button for claimants in the nav, while the
   blue-dot pill stays the main call to action for law firms. A quiet outlined pill, no fill and no dot,
   so the two read as "log in" and "talk to us" at a glance. */
body > header.nav .nav__login {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.375rem; min-height: 0; padding: 0 1rem;
  border: 1px solid var(--sh-line-2); border-radius: 999px;
  color: var(--sh-fg); font-weight: 500; line-height: 1; white-space: nowrap;
  transition: border-color .2s var(--sh-ease), color .2s var(--sh-ease), transform .3s var(--sh-ease);
}
body > header.nav .nav__login:hover { color: var(--sh-fg); border-color: rgb(255 255 255 / .42); }
/* Tablets: room for both pills beside the menu button. Phones keep it in the menu (below). */
@media (560px <= width <= 999px) {
  body > header.nav .nav__login { display: inline-flex; height: 2.25rem; padding: 0 .875rem; font-size: .8125rem; }
}
body > .drawer .drawer__login {
  padding: 0 1.25rem; border: 1px solid var(--sh-line-2); border-radius: 999px;
  color: var(--sh-fg); font-weight: 500;
}
@media (width < 560px) {
  body > header.nav .nav__login { display: none; }
}