/* ==========================================================================
   ADIL Advocates & Solicitors — identity layer
   Palette taken from the firm's logo (artefacts/ADIL-Advocates-Solicitors-Logo.webp):
   signal blue #0090EE, mid #0072C6, deep #0050AF, navy #001A5E,
   graphite #515964, black.
   Tailwind (compiled locally) handles layout; this file carries the finish.
   ========================================================================== */

:root {
  --ink: #0b1220;
  --coal: #111a29;
  --coal-2: #172232;
  --brand: #0090ee;
  --brand-lt: #8ac4ff;
  --brand-hi: #dbecff;
  --brand-md: #0072c6;
  --brand-dp: #0050af;
  --navy: #001a5e;
  --graphite: #515964;
  --surface: #f6f8fc;
  /* The page surface is 80% transparent (20% opaque) so the single site-wide
     backdrop (painted on `html`) reads clearly through every page, not just
     the hero. Cards opt back into the solid `--surface`/`--paper` so their
     content stays fully readable. */
  --surface-95: rgba(246, 248, 252, 0.20);
  --paper: #ffffff;
  --line: rgba(0, 80, 175, 0.18);
  --shadow-soft: 0 24px 60px -32px rgba(11, 18, 32, 0.45);
  --header-height: 100px;
  /* The single artwork behind the whole site (painted on `html`). content.js
     overwrites it from the console's hero image field, so one upload adjusts
     every page at once. */
  --site-mark: url("../img/new-logo.png");
}

* { -webkit-tap-highlight-color: transparent; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  /* Base surface colour only. The backdrop mark is painted on a dedicated
     fixed layer (html::before) so it can start below the navy header and be
     held at 70% opacity without tinting the header itself. */
  background-color: var(--surface);
}

/* The single site-wide backdrop. Painted on a fixed pseudo-element that begins
   just under the fixed navy header (`top: var(--header-height)`) so the mark
   never sits behind the menu bar, and held at 70% opacity so the page surface
   still reads through it. It stays put while the page scrolls. */
html::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: var(--header-height);
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--site-mark);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  opacity: 0.30;
}
/* Local-only links (Login / Console) are hidden until the live backend is
   confirmed, so they never flash on static hosting before being removed. */
html:not([data-live]) [data-local-only] { display: none !important; }
/* Keep in-page scroll targets fully visible below the fixed navy header. */
#home, #about, #practice, #cases, #team, #insights, #contact {
  scroll-margin-top: var(--header-height);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  /* Transparent so the fixed backdrop layer (html::before) shows through the
     whole page. `position`/`z-index` lift the content above that layer; cards
     and the hero set their own opaque backgrounds on top. */
  position: relative;
  z-index: 1;
  background: transparent;
  color: #2a3441;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The backdrop lives on html::before (see above). */
@media print { html::before { display: none; } }

::selection { background: rgba(0, 144, 238, 0.22); color: var(--ink); }

/* --- scrollbar ---------------------------------------------------------- */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #e9eef6; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #7fbdf3, #0b5cab);
  border-radius: 99px;
  border: 3px solid #e9eef6;
}

/* ==========================================================================
   Type
   ========================================================================== */

.font-display { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; }

.kicker {
  font-size: 0.6875rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 600;
}

/* polished blue lettering — the logo's gradient applied to type */
.foil {
  background: linear-gradient(176deg, #eaf5ff 0%, #bcdcff 22%, #4ea3ff 46%, #0072c6 58%, #8ac4ff 78%, #eaf5ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.18)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

/* embossed dark lettering on light */
.emboss {
  color: #16202e;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 -1px 0 rgba(11, 18, 32, 0.10);
}

/* engraved light lettering on dark */
.engrave { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.14), 0 -1px 1px rgba(0, 0, 0, 0.55); }

.hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 144, 238, 0.45), transparent);
}

/* ==========================================================================
   Surfaces
   ========================================================================== */

/* Page sections painted with `bg-paper` are part of the page surface, not
   cards: keep them at the same 80%-transparent surface so the backdrop image
   reads through the whole page. Cards inside them stay opaque (see below). */
section.bg-paper {
  background-color: var(--surface-95);
}

/* Home-page content sections are made translucent so the fixed `html` backdrop
   reads behind them. The hero (#home) is fully transparent.
   Scoped by ID so no Tailwind rebuild is needed; cards inside stay opaque. */
#about {
  background-color: rgba(6, 12, 24, 0.55) !important;
}
#practice,
#insights {
  background-color: rgba(6, 12, 24, 0.50) !important;
}
#team,
#contact {
  background-color: rgba(6, 12, 24, 0.55) !important;
}
/* #cases carries an inline opaque gradient in the markup; override it here
   with a translucent dark wash so the backdrop shows through. */
#cases {
  background: rgba(6, 12, 24, 0.50) !important;
}

/* Blog page surfaces: the body uses `bg-cream` and the list header carries an
   inline opaque gradient. Make both 80% transparent so the backdrop reads
   through. Cards inside the blog keep their own opaque backgrounds. */
body.bg-cream {
  background-color: rgba(246, 248, 252, 0.20);
}
#view-list > section:first-child {
  background: linear-gradient(180deg, rgba(238, 243, 250, 0.20), rgba(246, 248, 252, 0.20)) !important;
}

.panel {
  /* Cards stay fully opaque so text remains readable over the translucent
     page surface. */
  background:
    linear-gradient(180deg, #ffffff, var(--surface)),
    var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(11, 18, 32, 0.04),
    0 20px 50px -34px rgba(11, 18, 32, 0.5);
}

.panel-dark {
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(0, 144, 238, 0.20), transparent 52%),
    linear-gradient(180deg, var(--coal-2), var(--coal) 55%, #0b1220);
  border: 1px solid rgba(138, 196, 255, 0.20);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 30px 70px -40px rgba(0, 0, 0, 0.8);
}

/* fine grain, no image request */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.30;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px),
    radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 7px 7px, 11px 11px;
  background-position: 0 0, 3px 5px;
}

/* ==========================================================================
   Brand lockup: the logo file already carries the name, so it is shown whole
   (no cropping, no second set of words beside it).
   ========================================================================== */

.brand-lockup {
  display: inline-flex;
  align-items: center;
}
.brand-lockup img {
  display: block;
  height: 3.5rem;
  width: auto;
  border-radius: 2px;
}
.brand-lockup--footer img {
  height: 4rem;
}
@media (max-width: 640px) {
  .brand-lockup img { height: 2.4rem; }
  .brand-lockup--footer img { height: 2.6rem; }
}

/* ==========================================================================
   Crest (kept for the admin console header)
   ========================================================================== */

.crest {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(138, 196, 255, 0.4);
  background: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 26px -16px rgba(0, 0, 0, 0.7);
}
.crest img {
  position: absolute;
  height: 88%;
  width: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: none;
}
/* the roundel sits in the left ~32% of the logo file */
.crest--emblem img {
  left: 0;
  transform: translate(-2%, -50%) scale(1.02);
  transform-origin: left center;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 2px;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(.2,.7,.3,1), box-shadow 0.3s, background-position 0.6s;
  will-change: transform;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* polished blue bar */
.btn-brand {
  color: #ffffff;
  border: 1px solid #003f8a;
  background: linear-gradient(180deg, #6fbaff 0%, #2f9bf5 20%, #0090ee 48%, #0072c6 76%, #2f8bd6 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 40, 90, 0.45),
    0 12px 26px -14px rgba(0, 80, 175, 0.85);
  text-shadow: 0 1px 0 rgba(0, 30, 70, 0.35);
}
.btn-brand::before {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-18deg);
  transition: left 0.65s ease;
}
.btn-brand:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(0,40,90,.5), 0 18px 34px -14px rgba(0,80,175,.95); }
.btn-brand:hover::before { left: 115%; }

.btn-ghost {
  color: #dbecff;
  border: 1px solid rgba(138, 196, 255, 0.38);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover {
  border-color: rgba(138, 196, 255, 0.8);
  background: rgba(138, 196, 255, 0.10);
  transform: translateY(-2px);
}

.btn-outline-dark {
  color: #1f3a5c;
  border: 1px solid rgba(0, 80, 175, 0.28);
  background: linear-gradient(180deg, #ffffff, #eef4fb);
  box-shadow: inset 0 1px 0 #fff, 0 10px 22px -16px rgba(11, 18, 32, 0.55);
}
.btn-outline-dark:hover { border-color: var(--brand-md); transform: translateY(-2px); }

/* text link with animated rule */
.link-rule {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-dp);
  padding-bottom: 4px;
}
.link-rule::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0.35);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(.2,.7,.3,1);
}
.link-rule:hover::after { transform: scaleX(1); }
.link-rule svg { transition: transform 0.35s; }
.link-rule:hover svg { transform: translateX(4px); }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header { transition: background 0.4s ease, box-shadow 0.4s ease; }
.site-header.is-stuck {
  background: rgba(11, 18, 32, 0.94);
  box-shadow: 0 1px 0 rgba(0, 144, 238, 0.28), 0 18px 40px -30px rgba(0, 0, 0, 0.9);
}

.nav-link {
  position: relative;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246, 248, 252, 0.74);
  padding: 0.35rem 0;
  transition: color 0.3s;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -2px;
  width: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-lt), transparent);
  transition: width 0.35s ease, left 0.35s ease;
}
.nav-link:hover, .nav-link[aria-current="true"] { color: #ffffff; }
.nav-link:hover::after, .nav-link[aria-current="true"]::after { width: 100%; left: 0; }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s cubic-bezier(.2,.7,.3,1), transform 0.9s cubic-bezier(.2,.7,.3,1);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }

/* ==========================================================================
   Practice cards
   ========================================================================== */

.practice-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  /* Opaque card surface — the page behind it is translucent, the card is not. */
  background: linear-gradient(180deg, #ffffff, #f2f6fc);
  box-shadow: inset 0 1px 0 #fff, 0 18px 40px -34px rgba(11, 18, 32, 0.6);
  transition: transform 0.45s cubic-bezier(.2,.7,.3,1), box-shadow 0.45s, border-color 0.45s;
}
.practice-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 120% at 100% 0%, rgba(0, 144, 238, 0.12), transparent 60%);
  opacity: 0;
  transition: opacity 0.45s;
}
.practice-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 114, 198, 0.4);
  box-shadow: inset 0 1px 0 #fff, 0 30px 60px -38px rgba(11, 18, 32, 0.8);
}
.practice-card:hover::before { opacity: 1; }
.practice-card .ico { transition: transform 0.5s cubic-bezier(.2,.7,.3,1), color 0.4s; }
.practice-card:hover .ico { transform: translateY(-2px) scale(1.06); color: var(--brand-md); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero-media {
  /* The lockup is painted on html::before (the fixed site-wide backdrop),
     NOT here. This section is transparent so the backdrop image shows through.
     A dark gradient overlay is added via ::after to keep copy legible without
     hiding the background image. Starts right below the fixed navy header. */
  padding-top: calc(var(--header-height) + 1rem);
  background: transparent;
}

/* Dark scrim over the hero so copy stays readable against the backdrop image. */
.hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(6, 12, 24, 0.82) 0%, rgba(6, 12, 24, 0.65) 50%, rgba(6, 12, 24, 0.45) 100%);
}

/* A diagonal gloss glaze sits behind the hero copy (z-index -1 inside the
   isolated hero) so the photograph reads as light rather than paint. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-image: linear-gradient(118deg,
    rgba(255, 255, 255, 0.30) 0%,
    rgba(255, 255, 255, 0.10) 16%,
    rgba(255, 255, 255, 0) 32%,
    rgba(255, 255, 255, 0) 64%,
    rgba(255, 255, 255, 0.14) 80%,
    rgba(255, 255, 255, 0) 94%);
  mix-blend-mode: screen;
  opacity: 0.4;
}

@media (prefers-reduced-motion: no-preference) {
  /* a very slow drift keeps the gloss feeling like light, not paint */
  .hero-media::after { animation: hero-gloss 18s ease-in-out infinite alternate; }
}
@keyframes hero-gloss {
  from { transform: translate3d(-2%, 0, 0); }
  to   { transform: translate3d(2%, 0, 0); }
}

.hero-glow {
  position: absolute;
  width: 620px; height: 620px;
  right: -160px; top: -220px;
  background: radial-gradient(circle, rgba(0, 144, 238, 0.30), transparent 62%);
  filter: blur(10px);
  pointer-events: none;
}

/* ==========================================================================
   Marquee / trust strip
   ========================================================================== */

/* The strip that closes the hero sits flush under the copy: no gap between the
   last hero artifacts and the marquee. As with the top, the hero's spacing lives
   here rather than as stacked utilities in the markup. */
.hero-ticker { margin-top: 0; }

.ticker { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-track { display: flex; width: max-content; animation: ticker 42s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ==========================================================================
   Editorial bits
   ========================================================================== */

.rule-num { font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }

.quote-mark {
  font-family: "Cormorant Garamond", serif;
  font-size: 6rem;
  line-height: 0.6;
  opacity: 0.25;
}

.img-frame { position: relative; }
.img-frame::after {
  content: "";
  position: absolute;
  inset: 12px -12px -12px 12px;
  border: 1px solid rgba(0, 144, 238, 0.4);
  pointer-events: none;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.field {
  width: 100%;
  background: #ffffff;
  border: 1px solid rgba(0, 80, 175, 0.22);
  border-radius: 2px;
  padding: 0.85rem 1rem;
  font-size: 0.92rem;
  color: #1b2533;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.field::placeholder { color: #94a0b0; }
.field:focus {
  outline: none;
  border-color: rgba(0, 112, 198, 0.8);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 144, 238, 0.16);
}
.field[aria-invalid="true"] { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12); }

.field-dark {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(138, 196, 255, 0.22);
  color: #eef4fb;
}
.field-dark::placeholder { color: rgba(238, 244, 251, 0.45); }
.field-dark:focus { background: rgba(255, 255, 255, 0.10); }

.err { font-size: 0.72rem; color: #b3261e; letter-spacing: 0.02em; }

/* ==========================================================================
   Blog
   ========================================================================== */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid rgba(0, 80, 175, 0.28);
  border-radius: 999px;
  color: #2b4a6f;
  background: #ffffff;
}
.chip-brand { background: linear-gradient(180deg, #dbecff, #bcdcff); border-color: rgba(0, 80, 175, 0.35); color: #003a7a; }
.chip-dark { background: rgba(255, 255, 255, 0.06); border-color: rgba(138, 196, 255, 0.3); color: #dbecff; }

/* Blog copy that sits straight on the translucent page surface is prepped for
   the backdrop: deep ink plus a soft light halo. Cards (.panel, .chip) and the
   dark surfaces keep their own colours. */
body.bg-cream .kicker,
body.bg-cream h1,
body.bg-cream h2,
body.bg-cream h3,
body.bg-cream p,
body.bg-cream li,
body.bg-cream label {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}
body.bg-cream .kicker { color: #0050af; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); }
body.bg-cream h1, body.bg-cream h2, body.bg-cream h3 { color: #0b1220; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85), 0 0 18px rgba(246, 248, 252, 0.9); }
body.bg-cream p, body.bg-cream li { color: #1e2a38; }
/* Cards and dark surfaces restore their intended colours and drop the halo. */
body.bg-cream .panel, body.bg-cream .panel *,
body.bg-cream .chip, body.bg-cream .chip *,
body.bg-cream .prose-adil, body.bg-cream .prose-adil * {
  text-shadow: none;
}

.prose-adil { font-size: 1.02rem; line-height: 1.85; color: #33404f; }
.prose-adil > * + * { margin-top: 1.15em; }
.prose-adil h2 { font-family: "Cormorant Garamond", serif; font-size: 1.9rem; line-height: 1.25; color: #16202e; margin-top: 1.8em; }
.prose-adil h3 { font-size: 1.15rem; font-weight: 600; color: #16202e; margin-top: 1.6em; letter-spacing: 0.01em; }
.prose-adil a { color: var(--brand-dp); text-decoration: underline; text-underline-offset: 3px; }
.prose-adil ul, .prose-adil ol { padding-left: 1.3rem; }
.prose-adil ul { list-style: disc; }
.prose-adil ol { list-style: decimal; }
.prose-adil li { margin-top: 0.45em; }
.prose-adil blockquote {
  border-left: 2px solid var(--brand);
  padding: 0.2rem 0 0.2rem 1.25rem;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.3rem;
  line-height: 1.6;
  color: #2f3d4d;
  font-style: italic;
}
.prose-adil img { border-radius: 2px; box-shadow: var(--shadow-soft); }
.prose-adil code { background: rgba(0, 144, 238, 0.12); padding: 0.1rem 0.35rem; border-radius: 2px; font-size: 0.9em; }

.editor-toolbar button {
  padding: 0.3rem 0.55rem;
  font-size: 0.75rem;
  border: 1px solid rgba(0, 80, 175, 0.22);
  border-radius: 2px;
  background: #ffffff;
  color: #1f3a5c;
  transition: background 0.2s, border-color 0.2s;
}
.editor-toolbar button:hover { background: #e8f1fb; border-color: rgba(0, 80, 175, 0.45); }
.editor-area {
  min-height: 320px;
  padding: 1.25rem;
  background: #ffffff;
  border: 1px solid rgba(0, 80, 175, 0.22);
  border-radius: 2px;
  outline: none;
  font-size: 1rem;
  line-height: 1.8;
}
.editor-area:focus { border-color: rgba(0, 112, 198, 0.7); box-shadow: 0 0 0 3px rgba(0, 144, 238, 0.14); }

.emoji-btn {
  font-size: 1.05rem;
  line-height: 1;
  padding: 0.28rem 0.3rem;
  border-radius: 4px;
  transition: transform 0.15s, background 0.2s;
}
.emoji-btn:hover { transform: scale(1.18); background: rgba(0, 144, 238, 0.12); }

.reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid rgba(0, 80, 175, 0.24);
  border-radius: 999px;
  background: #ffffff;
  font-size: 0.78rem;
  transition: transform 0.15s, border-color 0.2s, background 0.2s;
}
.reaction-pill:hover { transform: translateY(-1px); border-color: rgba(0, 112, 198, 0.6); }
.reaction-pill.is-on { background: linear-gradient(180deg, #dbecff, #bcdcff); border-color: rgba(0, 80, 175, 0.5); font-weight: 600; }

.tab-btn {
  position: relative;
  padding: 0.6rem 0.9rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #64748b;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.tab-btn[aria-selected="true"] { color: #16202e; border-color: var(--brand-md); }
.tab-btn:hover { color: #16202e; }

table.data { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
table.data th {
  text-align: left;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #64748b;
  font-weight: 600;
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.data td { padding: 0.85rem; border-bottom: 1px solid rgba(0, 80, 175, 0.10); vertical-align: middle; }
table.data tbody tr:hover { background: rgba(0, 144, 238, 0.06); }

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 24px);
  z-index: 90;
  padding: 0.8rem 1.3rem;
  border-radius: 2px;
  background: #0b1220;
  color: #eef4fb;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  border: 1px solid rgba(138, 196, 255, 0.3);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.8);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  max-width: min(92vw, 520px);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* skip link */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: #0b1220;
  color: #eef4fb;
  font-size: 0.8rem;
}
.skip:focus { left: 12px; top: 12px; }

/* ------------------------------------------- practice-areas mega-menu */
.nav-drop { position: relative; display: flex; align-items: center; }
.nav-drop [data-pa-toggle] { display: inline-flex; align-items: center; gap: 0.35rem; }
.nav-drop .chev { transition: transform 0.18s ease; }
.nav-drop.is-open .chev { transform: rotate(180deg); }

.nav-drop-panel {
  position: absolute; top: calc(100% + 1.05rem); left: 50%;
  transform: translateX(-50%);
  width: min(30rem, calc(100vw - 2rem));
  background: #fff; color: var(--ink);
  border: 1px solid rgba(0, 80, 175, 0.14);
  border-top: 2px solid var(--brand);
  box-shadow: 0 36px 80px -46px rgba(11, 18, 32, 0.65);
  padding: 1.25rem 1.5rem 1rem;
  display: none;
}
.nav-drop.is-open .nav-drop-panel { display: block; }
.nav-drop-kicker {
  margin: 0 0 0.85rem; font-size: 0.58rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--brand-md);
}
.nav-drop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.75rem; }
.pa-menu-link {
  display: block; padding: 0.5rem 0;
  font-size: 0.82rem; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid rgba(0, 80, 175, 0.08);
  transition: color 0.15s, padding-left 0.15s;
}
.pa-menu-link:hover { color: var(--brand-dp); padding-left: 0.25rem; }
.nav-drop-all {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin-top: 0.55rem; padding-top: 0.8rem; width: 100%;
  border-top: 1px solid rgba(0, 80, 175, 0.12);
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brand-dp); text-decoration: none;
}
.nav-drop-all:hover { color: var(--brand); }

.drawer-areas { display: grid; gap: 0.1rem; padding: 0.1rem 0; border-bottom: 1px solid rgba(219, 236, 255, 0.1); }
.drawer-areas a { padding: 0.45rem 0 0.45rem 1rem; font-size: 0.8rem; color: rgba(219, 236, 255, 0.72); text-decoration: none; }
.drawer-areas a:hover { color: #fff; }

@media (max-width: 1023px) { .nav-drop-panel { display: none !important; } }

/* ------------------------------------------- team cards */
.team-scroll {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.75rem;
}
.team-scroll > * { scroll-snap-align: start; flex: 0 0 auto; }

/* Portraits sit back in black and white and come up to full colour when the
   card is hovered or focused, so the row reads as one calm set of cards until
   a member is chosen. */
.team-card {
  display: block;
  width: 16rem;
  text-decoration: none;
  color: inherit;
  outline: none;
}
.team-card .tcard-img,
.team-card .tcard-initial {
  display: block;
  width: 100%;
  height: 15rem;
  border-radius: 2px;
  overflow: hidden;
  background: #e7edf6;
  filter: grayscale(100%);
  transition: filter 0.45s ease, transform 0.45s ease, box-shadow 0.45s ease;
}
.team-card .tcard-img { object-fit: cover; object-position: top; }
/* No portrait on file: the initial stands in for the photograph and greys out
   with it, so the row stays even. */
.team-card .tcard-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 4.25rem;
  line-height: 1;
  color: #5d6b7c;
  background-image: linear-gradient(160deg, #eef3fa, #d9e3f1);
}
.team-card:hover .tcard-img,
.team-card:hover .tcard-initial,
.team-card:focus-visible .tcard-img,
.team-card:focus-visible .tcard-initial {
  filter: none;
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 30px 50px -32px rgba(11, 18, 32, 0.75);
}
.team-card:focus-visible .tcard-img,
.team-card:focus-visible .tcard-initial { outline: 2px solid var(--brand); outline-offset: 3px; }
.team-card .tcard-name {
  display: block;
  margin-top: 0.7rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.35rem;
  color: #0b1220;
  transition: color 0.35s ease;
}
.team-card .tcard-role {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b7787;
  transition: color 0.35s ease;
}
.team-card:hover .tcard-name, .team-card:focus-visible .tcard-name { color: var(--brand-dp); }
.team-card:hover .tcard-role, .team-card:focus-visible .tcard-role { color: var(--brand-md); }

/* Touch screens never hover, so they get the colour immediately instead of a
   permanently grey row. */
@media (hover: none) {
  .team-card .tcard-img,
  .team-card .tcard-initial { filter: none; }
}
.team-bio-photo { max-width: 340px; width: 100%; border-radius: 2px; margin-bottom: 1.75rem; }

/* ------------------------------------------- partner cards */
.partner-card {
  display: flex; flex-direction: column;
  overflow: hidden; border-radius: 2px;
  border: 1px solid rgba(138, 196, 255, 0.18);
  background: rgba(255, 255, 255, 0.03);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.partner-card:hover {
  transform: translateY(-4px);
  border-color: rgba(138, 196, 255, 0.55);
  box-shadow: 0 24px 48px -30px rgba(0, 0, 0, 0.75);
}
.partner-img {
  display: block; width: 100%; height: 11rem; object-fit: cover; object-position: center;
  filter: grayscale(100%);
  transition: filter 0.45s ease;
}
.partner-card:hover .partner-img { filter: none; }
.partner-logo {
  display: flex; align-items: center; justify-content: center;
  height: 11rem; padding: 1.25rem;
  font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.9rem; font-weight: 600; line-height: 1.1;
  color: #dbecff; text-align: center; word-break: break-word;
  background: linear-gradient(135deg, rgba(0, 144, 238, 0.22), rgba(0, 80, 175, 0.30));
  transition: color 0.25s ease;
}
.partner-card:hover .partner-logo { color: #ffffff; }
.partner-body { padding: 1.25rem; }
.partner-name { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.2rem; color: #f6f8fc; }
.partner-role { margin-top: 0.25rem; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(138, 196, 255, 0.8); }
.partner-brief { margin-top: 0.6rem; font-size: 0.8rem; line-height: 1.65; color: rgba(246, 248, 252, 0.55); }

/* ==========================================================================
   Text sitting directly on the backdrop
   At 0.30 opacity the backdrop is subtle, so the page surface is mostly
   light. Non-card text uses dark ink for readability. Cards and dark panels
   keep their own colours.
   ========================================================================== */

/* Headings and body copy that sit straight on the page surface. */
#about h2,
#about h3,
#practice h2,
#practice h3,
#cases h2,
#cases h3,
#team h2,
#team h3,
#insights h2,
#insights h3,
#contact h2,
#contact h3 {
  color: #0b1220;
  text-shadow: none;
}

/* Section intro headings for practice, cases and team are bold. */
#practice > div > div h2,
#cases > div > div h2,
#team > div > div h2 {
  font-weight: 700;
}

/* Paragraphs / lists / labels that are not wrapped in a card. */
#about p,
#practice p,
#cases p,
#team p,
#insights p,
#contact p,
#about li,
#practice li,
#cases li,
#team li,
#insights li,
#contact li {
  color: #2a3441;
  text-shadow: none;
}

/* Kickers and small caps labels on the surface. */
#about .kicker,
#practice .kicker,
#cases .kicker,
#team .kicker,
#insights .kicker,
#contact .kicker {
  color: #0050af;
  text-shadow: none;
}

/* Inline links on the surface. */
#about .link-rule,
#practice .link-rule,
#cases .link-rule,
#team .link-rule,
#insights .link-rule,
#contact .link-rule {
  color: #0050af;
  text-shadow: none;
}

/* Cards and dark panels already provide their own opaque background, so
   restore their intended colours inside them. */
#about .panel,
#about .panel-dark,
#practice .practice-card,
#cases .panel,
#team .team-card,
#insights .panel,
#contact .panel,
#about .bg-paper,
#practice .bg-paper,
#team .bg-paper,
#insights .bg-paper,
#contact .bg-paper {
  text-shadow: none;
}
#about .panel p, #about .panel li, #about .panel h2, #about .panel h3,
#practice .practice-card p, #practice .practice-card li,
#practice .practice-card h2, #practice .practice-card h3,
#cases .panel p, #cases .panel li, #cases .panel h2, #cases .panel h3,
#team .team-card p, #team .team-card h2, #team .team-card h3,
#insights .panel p, #insights .panel li, #insights .panel h2, #insights .panel h3,
#contact .panel p, #contact .panel li, #contact .panel h2, #contact .panel h3 {
  color: inherit;
  text-shadow: none;
}
/* About section right column — sits on the dark backdrop, needs white text.
   Targeted to [data-about-paragraphs] and the .emboss heading so the img-frame
   column and the vision panel-dark are not affected. */
#about [data-about-paragraphs] p {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
#about h2.emboss {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
#about h2.emboss .italic {
  color: #8ac4ff;
}
/* "Meet the team" / "Get a free first consultation" links need more weight
   to stand out against the dark backdrop. */
#about .link-rule {
  color: #8ac4ff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Kickers are blue and need more weight to stand out. */
#about .kicker,
#practice .kicker,
#cases .kicker,
#team .kicker,
#insights .kicker,
#contact .kicker {
  font-weight: 700;
  color: #0050af;
}

/* Practice, Cases, Team, Contact, Insights — headings, intro body white. */
#practice h2.emboss,
#cases h2.emboss,
#team h2.emboss,
#insights h2.emboss,
#contact h2.emboss {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
#practice p[data-cms],
#cases p[data-cms],
#team p[data-cms],
#insights p[data-cms],
#contact p[data-cms] {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Team wider-team note (widerTitle h3 + widerBody p rendered by content.js). */
#team-grid h3 {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
#team-grid > p {
  color: rgba(230, 240, 255, 0.90);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Contact section address / phone / email detail text. */
#contact .space-y-6 p,
#contact .space-y-6 a {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
/* Contact detail labels (Address, Telephone, etc.) — bold kicker style. */
#contact .space-y-6 > div > p:first-child {
  color: #8ac4ff;
  font-weight: 700;
}

/* Case filter tab buttons (All / Property / Litigation / Corporate). */
#case-filters .tab-btn {
  color: #ffffff;
  font-weight: 700;
}
#case-filters .tab-btn[aria-selected="true"] {
  color: #ffffff;
  border-color: #ffffff;
}

/* Team card names and roles — rendered by JS, targeted via CSS classes. */
.tcard-name {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.tcard-role {
  color: rgba(230, 240, 255, 0.85) !important;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Practice cards get dark text since they have a white background. */
#practice .practice-card h3 { color: #0b1220; }
#practice .practice-card p  { color: #4c5665; }
#practice .practice-card li { color: #6b7684; }
#practice .practice-card .link-rule { color: #0050af; text-shadow: none; }
/* Team card name/role uses its own transition colours — restore them. */
#team .team-card .tcard-name { color: #0b1220; text-shadow: none; }
#team .team-card .tcard-role { color: #6b7787; text-shadow: none; }
/* Dark panels keep their light copy. */
#about .panel-dark p, #about .panel-dark h2, #about .panel-dark h3,
#about .panel-dark li, #about .panel-dark a {
  color: inherit;
}

/* .panel-dark is always a dark surface — keep all its text white/light. */
.panel-dark,
.panel-dark h2, .panel-dark h3, .panel-dark h4,
.panel-dark p, .panel-dark li, .panel-dark a {
  color: inherit;
  text-shadow: none;
}
.panel-dark { color: #f6f8fc; }

/* The hero and the navy "why" band are already dark: leave their text as-is. */
#home, #home *,
section.bg-ink, section.bg-ink * {
  text-shadow: none;
}

@media print {
  .site-header, .no-print, footer { display: none !important; }
  body { background: #fff; }
}