/* ══════════════════════════════════════════════════════════════
   Goldman Bailey Solicitors — Shared Stylesheet
   Covers: universal styles (all 16 pages) and shared component
   styles (page hero, sidebar layout, content sections, fee cards,
   gold list, solicitor profiles, notable cases, tag grid).
   Page-specific styles remain inline in each HTML file.
══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════
   RESET
══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Skip to main content ── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  background: var(--gold);
  color: var(--navy);
  font-size: .88rem;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 0 0 var(--r) 0;
  text-decoration: none;
  white-space: nowrap;
}
.skip-link:focus {
  left: 0;
}
.skip-link:focus-visible {
  outline-offset: 0;
}

html { scroll-behavior: smooth; }
img  { display: block; max-width: 100%; }
a    { text-decoration: none; color: inherit; }
ul   { list-style: none; }
button { cursor: pointer; font-family: inherit; }


/* ══════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════ */
:root {
  --navy:        #1a3d5c;
  --navy-mid:    #1e4a70;
  --navy-light:  #2e6da4;
  --gold:        #d4984a;
  --gold-light:  #e0b060;
  --gold-pale:   rgba(212,152,74,.10);
  --gold-border: rgba(212,152,74,.22);
  --off-white:   #f4f0e6;
  --light-bg:    #f8f6f2;
  --white:       #ffffff;
  --text:        #1a2535;
  --text-2:      #4a5570;
  --text-3:      #8a9ab0;
  --on-dark:     rgba(255,255,255,.80);

  --sans:  'Inter', system-ui, sans-serif;
  --serif: 'Playfair Display', Georgia, serif;

  --ease: cubic-bezier(.16,1,.3,1);
  --t:    .3s var(--ease);

  --r-sm: 4px;
  --r:    8px;
  --r-lg: 14px;

  --shadow:   0 2px 16px rgba(26,61,92,.08);
  --shadow-h: 0 8px 40px rgba(26,61,92,.14);
  --shadow-g: 0 4px 24px rgba(212,152,74,.30);
}


/* ══════════════════════════════════════
   FOCUS / ACCESSIBILITY
══════════════════════════════════════ */
:focus-visible {
  outline: 3px solid #a0a8b0;
  outline-offset: 3px;
}



/* Gold focus ring for interactive elements on navy/dark surfaces */
.nav-dropdown a:focus-visible,
.flinks a:focus-visible,
.fg input:focus-visible,
.fg button:focus-visible,
.sidebar-links a:focus-visible {
  outline-color: #d4984a;
}


/* ══════════════════════════════════════
   BODY & UTILITIES
══════════════════════════════════════ */
body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
  /* Client-typed text: a long unbroken word (a pasted URL, a long compound word)
     must wrap inside its box instead of running off the edge or widening the
     page. These properties are inherited, so they cover every element below
     body and its ::before/::after (e.g. the specialisms drawn via attr()).
     overflow-wrap:anywhere (unlike break-word) also lowers min-content size,
     which lets grid 1fr tracks and flex items shrink. The first two lines are
     fallbacks for older engines without `anywhere` (Safari < 15.4). */
  overflow-wrap: break-word;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* fraud.html and regulatory.html set white-space:nowrap on
   .section-heading h2 in their own <style> (loaded after this file, so this
   needs the extra element in the selector to win). Without it a long
   client-typed heading cannot wrap and pushes the page wider. */
main .section-heading h2 { white-space: normal; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

.label {
  font-size: .72rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); display: block; margin-bottom: 10px;
}


/* ══════════════════════════════════════
   SCROLL ANIMATION
══════════════════════════════════════ */
.fade { opacity: 0; transform: translateY(26px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.fade.in { opacity: 1; transform: none; }
.d1 { transition-delay: .08s; }
.d2 { transition-delay: .17s; }
.d3 { transition-delay: .26s; }
.d4 { transition-delay: .35s; }


/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: var(--r-sm);
  font-size: .855rem; font-weight: 600; letter-spacing: .04em;
  border: 2px solid transparent; transition: background-color var(--t), border-color var(--t); white-space: nowrap;
}
.btn-gold  { background: var(--gold); color: var(--white); border-color: var(--gold); }
.btn-gold:hover { background: var(--gold-light); border-color: var(--gold-light); box-shadow: var(--shadow-g); transform: translateY(-1px); }
.btn-white { background: transparent; color: var(--white); border-color: rgba(255,255,255,.45); }
.btn-white:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.75); transform: translateY(-1px); }


/* ══════════════════════════════════════
   HEADER
══════════════════════════════════════ */
#hdr {
  position: fixed; inset: 0 0 auto; z-index: 1000;
  height: 72px; display: flex; align-items: center; padding: 0 28px;
  background: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  transition: height var(--t);
}
#hdr.compact { height: 62px; background: #ffffff; }

.hdr-inner {
  width: 100%; max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.hdr-inner > a { flex-shrink: 0; }

.logo-pill {
  display: inline-flex; align-items: center;
  background: #ffffff; padding: 6px 12px;
  transition: padding var(--t);
}
.logo-pill img { height: 36px; width: auto; display: block; }

.hdr-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }


/* ══════════════════════════════════════
   NAVIGATION
══════════════════════════════════════ */
.main-nav { display: flex; align-items: center; align-self: stretch; gap: 4px; flex: 1; justify-content: space-evenly; }

.main-nav > .nav-item > a {
  padding: 7px 13px; font-size: .82rem; font-weight: 600;
  color: #1a2535; border-radius: var(--r-sm);
  transition: color .2s; position: relative;
  display: flex; align-items: center; white-space: nowrap;
}
.main-nav > .nav-item > a::after {
  content: ''; position: absolute; bottom: 3px; left: 13px; right: 13px;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .24s var(--ease);
}
.main-nav > .nav-item > a:hover { color: var(--navy); }
.main-nav > .nav-item > a:hover::after { transform: scaleX(1); }
.main-nav > .nav-item > a.nav-active { color: var(--gold); }
.main-nav > .nav-item > a.nav-active::after { transform: scaleX(1); }
.nav-dropdown a.nav-active { color: var(--gold); }

.nav-item {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.nav-trigger {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 13px;
  font-size: .82rem; font-weight: 600;
  color: #1a2535;
  border-radius: var(--r-sm);
  background: none; border: none;
  font-family: var(--sans);
  transition: color .2s;
  position: relative;
  white-space: nowrap;
  align-self: stretch;
}
.nav-trigger::after {
  content: ''; position: absolute; bottom: 3px; left: 13px; right: 13px;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .24s var(--ease);
}
.nav-item:hover .nav-trigger         { color: var(--navy); }
.nav-item:hover .nav-trigger::after  { transform: scaleX(1); }

.nav-chevron {
  font-size: .55rem;
  opacity: .65;
  transition: transform .22s var(--ease), opacity .22s;
  margin-left: 1px;
}
.nav-item:hover .nav-chevron { transform: rotate(180deg); opacity: 1; }

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 188px;
  background: var(--navy);
  border-radius: 0 0 var(--r) var(--r);
  box-shadow: 0 14px 40px rgba(26,61,92,.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s .2s;
  z-index: 999;
  overflow: hidden;
}
.nav-item:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s 0s;
}
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s 0s;
}
.nav-item.accord-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown a {
  display: block;
  padding: 10px 18px;
  font-size: .82rem;
  font-weight: 400;
  color: rgba(255,255,255,.65);
  transition: color .15s, background .15s;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.nav-dropdown a:last-child { border-bottom: none; }
.nav-dropdown a:hover      { color: var(--gold); background: rgba(212,152,74,.07); }
.nav-dropdown a::after     { display: none; }


/* ══════════════════════════════════════
   MOBILE BURGER MENU
══════════════════════════════════════ */
.burger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; padding: 11px;
}
.burger span {
  display: block; width: 22px; height: 2px;
  background: var(--navy); border-radius: 2px; transition: transform var(--t), opacity var(--t);
}
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ══════════════════════════════════════
   PAGE HERO
   serious-crime.html, immigration-charges.html,
   driving-offence-fees.html, complaints-policy.html
══════════════════════════════════════ */
#page-hero {
  background: var(--navy);
  padding-top: 72px;
  position: relative;
  overflow: hidden;
}
#page-hero::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 100% at 5% 50%, rgba(26,61,92,.9) 0%, transparent 70%),
    linear-gradient(135deg, #0d1e30 0%, #163252 55%, #1a3d5c 100%);
  pointer-events: none;
}
.page-hero-inner {
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto;
  padding: 72px 28px 64px;
}
.page-hero-label {
  display: flex; align-items: center; gap: 10px;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 18px;
}
.page-hero-label::before { content: ''; width: 30px; height: 1px; background: var(--gold); }
.page-hero-h1 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -.015em;
  color: var(--white); margin-bottom: 18px;
}
.page-hero-sub {
  font-size: clamp(.9rem, 1.4vw, 1.02rem);
  color: rgba(255,255,255,.65); line-height: 1.75;
  max-width: 620px;
}

/* Two-column memorial hero (oliver-goldman.html) */
.page-hero-inner--split {
  display: flex;
  align-items: center;
  gap: 56px;
}
.page-hero-inner--split .page-hero-text {
  flex: 1;
}
.page-hero-inner--split .page-hero-sub {
  margin-bottom: 0;
}
.page-hero-photo {
  flex-shrink: 0;
  width: 360px;
  max-width: 100%;
}
.page-hero-photo img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  border: 3px solid var(--gold);
  box-shadow: var(--shadow-h);
  display: block;
}

@media (max-width: 768px) {
  .page-hero-inner--split {
    flex-direction: column-reverse;
    gap: 36px;
    text-align: center;
  }
  .page-hero-inner--split .page-hero-photo {
    width: 280px;
  }
  .page-hero-inner--split .page-hero-label {
    justify-content: center;
  }
  .page-hero-inner--split .page-hero-sub {
    margin-left: auto;
    margin-right: auto;
  }
}

.hero-divider {
  width: 56px; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin: 26px 0;
}
.emergency-bar {
  display: inline-flex; align-items: center; gap: 16px;
  background: rgba(201,168,76,.08);
  border: 1px solid rgba(201,168,76,.28);
  border-radius: var(--r); padding: 15px 24px;
}
.emergency-bar i { color: var(--gold); font-size: 1.15rem; flex-shrink: 0; }
.emergency-bar-text { font-size: .88rem; color: rgba(255,255,255,.72); line-height: 1.5; }
.emergency-bar-text strong { color: var(--white); font-weight: 600; }
.emergency-bar-text a { color: var(--gold); font-weight: 600; }
.emergency-bar-text a:hover { color: var(--gold-light); }


/* ══════════════════════════════════════
   TWO-COLUMN PAGE LAYOUT & STICKY SIDEBAR
   serious-crime.html, immigration-charges.html,
   driving-offence-fees.html, complaints-policy.html
══════════════════════════════════════ */
.page-body {
  background: var(--light-bg);
  padding: 52px 28px 80px;
}
.page-layout {
  max-width: 1200px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 284px;
  gap: 44px;
  align-items: start;
}

.sidebar-col {
  position: sticky;
  top: 96px;
}
.sidebar-card {
  background: var(--navy);
  border-top: 3px solid var(--gold);
  border-radius: var(--r-lg);
  padding: 26px 22px 12px;
  box-shadow: var(--shadow-h);
}
.sidebar-title {
  font-family: var(--serif);
  font-size: 1rem; font-weight: 700;
  color: var(--white);
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-links { display: flex; flex-direction: column; gap: 2px; }
.sidebar-links a {
  display: block;
  padding: 13px 12px;
  font-size: .815rem; font-weight: 500;
  color: var(--on-dark);
  border-radius: var(--r-sm);
  border-left: 2px solid transparent;
  transition: color .2s, background .2s, border-color .2s;
}
.sidebar-links a:hover {
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.05);
}
.sidebar-links a.active {
  color: var(--gold);
  background: rgba(212,152,74,.08);
  border-left-color: var(--gold);
}
.sidebar-links a::after { display: none; }

/* privacy-policy.html only — 11 sidebar links need extra room to fit */
body.page-privacy-policy .sidebar-col {
  top: 84px;
}
body.page-privacy-policy .sidebar-title {
  margin-bottom: 14px;
  padding-bottom: 10px;
}
body.page-privacy-policy .sidebar-links {
  gap: 0;
}
body.page-privacy-policy .sidebar-links a {
  padding: 10px 12px;
}


/* ══════════════════════════════════════
   CONTENT SECTIONS
   immigration-charges.html, driving-offence-fees.html,
   complaints-policy.html
══════════════════════════════════════ */
.content-col {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 4px 32px rgba(10,22,40,.07);
  border: 1px solid rgba(10,22,40,.07);
}
.content-section {
  padding: 44px 40px;
  border-bottom: 1px solid rgba(10,22,40,.06);
  scroll-margin-top: 88px;
}
.content-section:last-child { border-bottom: none; }
.sec-white { background: var(--white); }
.sec-light { background: var(--light-bg); }

.content-section h2 {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.2vw, 1.72rem);
  font-weight: 700; color: var(--navy);
  margin-bottom: 22px;
  padding-left: 16px;
  border-left: 3px solid var(--gold);
  line-height: 1.25;
}
.content-section p {
  font-size: 1rem;
  color: var(--text-2);
  line-height: 1.82;
  margin-bottom: 16px;
  max-width: 68ch;
}
.content-section p:last-child { margin-bottom: 0; }
.content-section a { color: var(--navy); font-weight: 600; }
.content-section a:hover { color: var(--gold); }


/* ══════════════════════════════════════
   GOLD LIST
   immigration-charges.html, driving-offence-fees.html,
   complaints-policy.html
══════════════════════════════════════ */
.gold-list {
  display: flex; flex-direction: column; gap: 9px;
  margin-top: 16px; margin-bottom: 20px;
}
.gold-list:last-child { margin-bottom: 0; }
.gold-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 1rem; color: var(--text-2); line-height: 1.65;
}
.gold-list li::before {
  content: ''; width: 6px; height: 6px; flex-shrink: 0;
  background: var(--gold); border-radius: 50%; margin-top: 8px;
}


/* ══════════════════════════════════════
   FEE CARDS
   immigration-charges.html, driving-offence-fees.html,
   complaints-policy.html
══════════════════════════════════════ */
.fee-card {
  border: 1px solid var(--gold-border);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 16px 20px;
  margin-bottom: 10px;
  background: var(--light-bg);
  transition: border-left-color .22s var(--ease), background .22s, transform .22s var(--ease);
}
.fee-card:last-child { margin-bottom: 0; }
.fee-card:hover {
  background: rgba(212,152,74,.04);
  border-left-color: var(--gold-light);
  transform: translateX(3px);
}
.fee-card-name {
  font-family: var(--serif);
  font-size: 1.02rem; font-weight: 700;
  color: var(--navy); margin-bottom: 10px; line-height: 1.3;
}
.fee-card-meta { display: flex; gap: 32px; flex-wrap: wrap; }
.fee-meta-item { display: flex; flex-direction: column; gap: 2px; }
.fee-label { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.fee-value { font-size: .88rem; color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.fee-card-desc { font-size: .88rem; color: var(--text-2); line-height: 1.65; margin-bottom: 0; }

/* Complaints procedure step list */
.complaints-steps {
  margin: 24px 0 20px;
  display: flex; flex-direction: column; gap: 0;
}
.complaints-step {
  display: grid; grid-template-columns: 16px 1fr;
  gap: 0; position: relative; padding-left: 0;
}
.complaints-step-left {
  display: flex; flex-direction: column; align-items: center;
  padding-top: 6px;
}
.complaints-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--gold);
  flex-shrink: 0; position: relative; z-index: 1;
}
.complaints-thread {
  width: 1px; background: rgba(201,168,76,.25);
  flex: 1; margin: 4px 0;
  min-height: 16px;
}
.complaints-step:last-child .complaints-thread { display: none; }
.complaints-content { padding: 0 0 24px 20px; }
.complaints-step:last-child .complaints-content { padding-bottom: 0; }
.complaints-step-tag {
  font-size: .68rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold);
  display: block; margin-bottom: 5px;
}
.complaints-step-head {
  font-family: var(--serif); font-size: 1rem; font-weight: 700;
  color: var(--navy); margin-bottom: 6px; line-height: 1.3;
}
.complaints-step-body {
  font-size: .88rem; color: var(--text-2); line-height: 1.72;
}


/* ══════════════════════════════════════
   SOLICITOR PROFILE HERO & BIOGRAPHY
   rhean-bailey.html, eleanor-glass.html, claire-friel.html,
   rebecca-harrigan.html, bridget-irving.html
══════════════════════════════════════ */
#profile-hero {
  background: var(--navy);
  padding-top: 72px;
  position: relative; overflow: hidden;
}
#profile-hero::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 100% at 70% 50%, rgba(22,45,82,.6) 0%, transparent 65%);
  pointer-events: none;
}

.profile-hero-inner {
  max-width: 1200px; margin: 0 auto; padding: 52px 28px;
  display: block;
  position: relative; z-index: 1;
}

.profile-role {
  font-size: .72rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold);
  display: block; margin-bottom: 16px;
}
.profile-name {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 700; line-height: 1.1; color: var(--white);
  margin-bottom: 24px;
}
.profile-divider {
  width: 80px; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

#biography { padding: 88px 28px; background: var(--light-bg); }

.bio-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 360px;
  gap: 64px; align-items: start;
}

.bio-full {
  max-width: 780px;
  margin: 0 auto;
}

.bio-left .label { margin-bottom: 22px; }
.bio-left p {
  font-size: 1rem; color: var(--text-2);
  line-height: 1.82; margin-bottom: 20px;
}
.bio-left p:last-child { margin-bottom: 0; }

.bio-right { display: flex; flex-direction: column; gap: 20px; }

/* Extended grid layout — rebecca-harrigan.html, bridget-irving.html */
.bio-left  { grid-column: 1; grid-row: 1; }
.bio-right { grid-column: 2; grid-row: 1; }
.bio-cta   { grid-column: 1; grid-row: 2; }

.spec-card {
  padding: 0 0 0 16px;
  background: none; border: none; border-radius: 0; box-shadow: none;
  position: relative;
}
.spec-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: rgba(201,168,76,.28);
}
.spec-card .label {
  font-size: .68rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold);
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 4px;
}
.spec-card .label::after {
  content: ''; flex: 1; height: 1px; background: rgba(201,168,76,.35);
}

.spec-list { list-style: none; display: flex; flex-direction: column; gap: 0; margin-top: 4px; }
.spec-list li {
  display: grid; grid-template-columns: 3px 1fr;
  margin-bottom: 1px;
}
.spec-list li::before {
  content: ''; background: transparent;
  width: auto; height: auto; border-radius: 0; flex-shrink: unset;
}
.spec-list li::after {
  content: attr(data-spec);
  font-size: .92rem; color: var(--text-2);
  padding: 7px 0 7px 16px;
  border-bottom: 1px solid rgba(10,22,40,.05);
  display: block;
}
.spec-list li:last-child::after { border-bottom: none; }

/* ── Specialism shared-by tooltip ── */
.spec-shared { position: relative; cursor: pointer; grid-column: 1 / -1; }
.spec-list li.spec-shared::after { display: none !important; }
.spec-shared-row {
  grid-column: 2;
  padding: 7px 0 7px 16px;
  border-bottom: 1px solid rgba(10,22,40,.05);
  border-radius: 4px;
}
.spec-shared-row:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #a0a8b0;
  border-radius: 4px;
}
.spec-list li:last-child .spec-shared-row { border-bottom: none; }

.spec-chevron-icon {
  font-size: .7rem;
  color: var(--gold);
  opacity: 0;
  transition: opacity .2s;
  margin-left: auto;
  flex-shrink: 0;
}
.spec-shared:hover .spec-chevron-icon { opacity: 1; }
.spec-shared.tooltip-open .spec-chevron-icon { opacity: 1; transform: rotate(180deg); }

.spec-tooltip {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  background: #0d2236;
  border: 1px solid rgba(212,152,74,.35);
  border-radius: var(--r);
  padding: 12px 14px;
  min-width: 200px;
  z-index: 50;
  box-shadow: var(--shadow-h);
}
.spec-tooltip::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 14px;
  width: 8px;
  height: 8px;
  background: #0d2236;
  border-left: 1px solid rgba(212,152,74,.35);
  border-top: 1px solid rgba(212,152,74,.35);
  transform: rotate(45deg);
}
.spec-tooltip.visible { display: block; }
.spec-tooltip-label {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(212,152,74,.6);
  margin-bottom: 8px;
}
.spec-tooltip-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.spec-tooltip-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: var(--gold);
  border-radius: var(--r);
  font-size: .78rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  transition: background var(--t);
}
.spec-tooltip-pill:hover { background: var(--gold-light); }
.spec-tooltip-pill-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--navy);
  opacity: .5;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .spec-tooltip {
    position: static;
    display: none;
    margin: 0 0 4px 0;
    border-radius: var(--r);
    min-width: 0;
    width: 100%;
    box-shadow: none;
    grid-column: 1 / -1;
  }
  .spec-tooltip::before { display: none; }
  .spec-tooltip.visible { display: block; }
  .spec-chevron-icon { opacity: 1 !important; }
}

.contact-cta-box {
  background: rgba(212,152,74,.07);
  border: 1px solid var(--gold-border);
  border-radius: var(--r-lg); padding: 26px 28px;
}
.contact-cta-box p {
  font-size: .88rem; color: var(--text-2); line-height: 1.72; margin-bottom: 18px;
}
.cta-email {
  font-size: .75rem; color: var(--text-3); margin-top: 10px; margin-bottom: 0;
  word-break: break-all;
}


/* ── Team Strip ── */
.team-strip {
  background: var(--navy);
  padding: 16px 0;
  width: 100%;
  border-top: 1px solid var(--gold-border);
  border-bottom: 1px solid var(--gold-border);
}
.team-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.team-strip .label {
  color: var(--gold);
  opacity: .75;
}
.team-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.team-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border: 1px solid rgba(212,152,74,.35);
  border-radius: var(--r);
  font-size: .82rem;
  font-weight: 600;
  color: var(--navy);
  background: var(--gold);
  text-decoration: none;
  transition: border-color var(--t), color var(--t), background-color var(--t);
}
.team-tag i {
  color: var(--navy);
  font-size: .78rem;
  opacity: .7;
}
.team-tag:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: var(--navy);
}
.team-tag.team-tag-active {
  background: var(--navy);
  border-color: var(--gold);
  color: var(--gold);
}
.team-tag.team-tag-active i {
  color: var(--gold);
  opacity: 1;
}
/* ── Team Strip light variant (follows dark section) ── */
.team-strip-light {
  background: #24527a;
  border-top: 1px solid var(--gold-border);
  border-bottom: 1px solid var(--gold-border);
}
.team-strip-light .label { color: var(--gold); opacity: 1; }
.team-strip-light .team-tag {
  color: #24527a;
  border-color: rgba(26,61,92,.25);
  background: var(--gold);
}
.team-strip-light .team-tag i { color: #24527a; }
.team-strip-light .team-tag:hover {
  border-color: var(--gold);
  color: #24527a;
  background: var(--gold-pale);
}
.team-strip-light .team-tag.team-tag-active {
  background: #24527a;
  border-color: var(--gold);
  color: var(--gold);
}
.team-strip-light .team-tag.team-tag-active i {
  color: var(--gold);
  opacity: 1;
}
@media (max-width: 768px) {
  .team-strip { padding: 14px 0; }
  .team-tag { font-size: .8rem; padding: 7px 14px; }
}


/* ══════════════════════════════════════
   PRACTICE CARDS
══════════════════════════════════════ */
.practice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.pcard {
  background: var(--white); border: 1px solid rgba(10,22,40,.08);
  border-radius: var(--r-lg); padding: 34px 30px;
  position: relative; overflow: hidden; transition: var(--t); cursor: pointer;
}
.pcard::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .34s var(--ease);
}
.pcard:hover { box-shadow: var(--shadow-h); transform: translateY(-5px); border-color: rgba(201,168,76,.28); }
.pcard:hover::before { transform: scaleX(1); }

.pcard a { display: block; }

.pcard-icon {
  width: 54px; height: 54px; background: var(--gold-pale);
  border-radius: var(--r); display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 1.35rem; margin-bottom: 18px; transition: var(--t);
}
.pcard:hover .pcard-icon { background: var(--gold); color: var(--navy); }
.pcard h3 { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; color: var(--navy); margin-bottom: 9px; line-height: 1.28; }
.pcard p  { font-size: .862rem; color: var(--text-2); line-height: 1.65; margin-bottom: 18px; }
.card-lnk { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--gold); transition: gap .2s; }
.card-lnk i { font-size: .68rem; }
.pcard:hover .card-lnk { gap: 10px; }


/* ══════════════════════════════════════
   NOTABLE CASES
   rhean-bailey.html, rebecca-harrigan.html
══════════════════════════════════════ */
#notable-cases {
  padding: 88px 28px;
  background: var(--navy);
  position: relative; overflow: hidden;
}
#notable-cases .container { position: relative; z-index: 1; }
#notable-cases .section-head { text-align: center; margin: 0 auto 60px; }
#notable-cases .title {
  font-family: var(--serif);
  font-size: clamp(1.85rem, 3vw, 2.65rem);
  font-weight: 700; line-height: 1.18;
  color: var(--white);
}
#notable-cases .title.light { color: var(--white); }
#notable-cases .subtitle { color: var(--on-dark); margin: 12px auto 0; }

.cases-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 18px; margin-top: 52px;
}

.case-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(212,152,74,.12);
  border-radius: var(--r-lg); padding: 26px 28px;
  transition: transform var(--t), box-shadow var(--t);
}
.case-card:hover {
  background: rgba(212,152,74,.05);
  border-color: rgba(212,152,74,.28);
  transform: translateY(-3px);
}
.case-ref {
  font-family: var(--serif);
  font-size: 1rem; font-weight: 700;
  color: var(--white); margin-bottom: 10px; line-height: 1.3;
}
.case-desc { font-size: .855rem; color: var(--on-dark); line-height: 1.72; }

.case-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .78rem; font-weight: 500;
  color: var(--gold); opacity: .80;
  margin-top: 10px;
  transition: opacity .15s, color .15s;
}
.case-link i { font-size: .65rem; }
.case-link:hover { opacity: 1; color: var(--gold-light); }


/* ══════════════════════════════════════
   TAG GRID
   fraud.html, regulatory.html
══════════════════════════════════════ */
.tags-grid {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 56px;
}
.tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white);
  border: 1.5px solid var(--gold-border);
  border-radius: 100px;
  padding: 10px 20px;
  font-size: .88rem; font-weight: 500; color: var(--navy);
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s, transform .15s;
  cursor: default;
}
.tag i {
  font-size: .78rem; color: var(--gold);
  flex-shrink: 0;
}
.tag:hover {
  background: var(--gold-pale);
  border-color: var(--gold);
  color: var(--navy);
  box-shadow: var(--shadow-g);
  transform: translateY(-2px);
}


/* ══════════════════════════════════════
   CONTACT SECTION
══════════════════════════════════════ */
#contact {
  padding: 96px 28px; background: var(--navy-mid);
  position: relative; overflow: hidden;
}
#contact::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 75% 80% at 100% 50%, rgba(212,152,74,.055) 0%, transparent 60%);
}
.contact-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: start; position: relative; z-index: 1;
}

.cinfo-hl { font-family: var(--serif); font-size: clamp(2rem, 3.5vw, 2.8rem); font-weight: 700; color: var(--white); line-height: 1.18; margin-bottom: 14px; }
.cinfo-hl em { color: var(--gold); font-style: italic; }
.cinfo-sub { font-size: .95rem; color: var(--on-dark); line-height: 1.75; margin-bottom: 34px; }

.phone-block {
  display: flex; align-items: center; gap: 15px;
  background: rgba(212,152,74,.07); border: 1px solid rgba(212,152,74,.22);
  border-radius: var(--r); padding: 18px 22px; margin-bottom: 28px; transition: background-color var(--t);
}
.phone-block:hover { background: rgba(212,152,74,.12); border-color: rgba(212,152,74,.4); }
.phone-ico {
  width: 46px; height: 46px; flex-shrink: 0; background: var(--gold);
  border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center;
  color: var(--navy); font-size: 1.05rem;
}
.phone-lbl { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: 2px; }
.phone-num { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: var(--white); }

.cfeatures { display: flex; flex-direction: column; gap: 10px; }
.cfeature  { display: flex; align-items: center; gap: 10px; font-size: .862rem; color: var(--on-dark); }
.cfeature i { color: var(--gold); font-size: .82rem; width: 15px; text-align: center; flex-shrink: 0; }

.form-wrap {
  background: rgba(255,255,255,.04); border: 1px solid rgba(212,152,74,.16);
  border-radius: var(--r-lg); padding: 38px 36px;
}
.form-title { font-family: var(--serif); font-size: 1.38rem; font-weight: 700; color: var(--white); margin-bottom: 4px; }
.form-hint  { font-size: .78rem; color: var(--on-dark); margin-bottom: 26px; }
.fg { margin-bottom: 0; padding: 11px 0; border-top: 1px solid rgba(212,152,74,.22); }
.fg:last-of-type { border-bottom: 1px solid rgba(212,152,74,.22); }
.fg label {
  display: block; font-size: .82rem; font-weight: 600;
  letter-spacing: .01em; text-transform: none;
  color: rgba(255,255,255,.80); margin-bottom: 7px;
}
.fg input, .fg textarea {
  width: 100%; background: rgba(255,255,255,.055);
  border: 1px solid rgba(212,152,74,.2); border-radius: var(--r-sm);
  padding: 12px 15px; font-family: var(--sans); font-size: .862rem;
  color: var(--white); outline: none;
  transition: border-color .2s, background .2s;
}
.fg input::placeholder, .fg textarea::placeholder { color: rgba(255,255,255,.35); }
.fg input:focus, .fg textarea:focus { border-color: var(--gold); background: rgba(255,255,255,.08); }
.fg textarea { resize: vertical; min-height: 110px; }
.btn-submit { width: 100%; justify-content: center; padding: 15px; font-size: .88rem; }
.form-note { font-size: .73rem; color: var(--on-dark); text-align: center; margin-top: 12px; line-height: 1.5; }

/* ══════════════════════════════════════
   FORM SUBMIT FALLBACK
══════════════════════════════════════ */
.form-fallback {
  font-size: .73rem; color: var(--on-dark);
  text-align: center; margin-top: 12px; line-height: 1.5;
}
.form-fallback a { color: var(--on-dark); text-decoration: underline; transition: color .2s; }
.form-fallback a:hover { color: var(--gold); }


/* ══════════════════════════════════════
   FORM VALIDATION
══════════════════════════════════════ */
.field-invalid {
  border-color: #f87171 !important;
  background: rgba(248,113,113,.07) !important;
}
.field-error {
  font-size: .72rem;
  font-weight: 500;
  color: #f87171;
  margin-top: 5px;
  line-height: 1.5;
  letter-spacing: .02em;
}
.field-error:empty { display: none; }


/* ══════════════════════════════════════
   TESTIMONIALS
   eleanor-glass.html (extendable)
══════════════════════════════════════ */
#testimonials {
  padding: 88px 28px;
  background: var(--off-white);
  border-top: 1px solid var(--gold-border);
  border-bottom: 1px solid var(--gold-border);
}

.testimonials-inner {
  max-width: 780px;
  margin: 0 auto;
}

.testimonials-inner .section-head {
  text-align: center;
  margin: 0 auto 52px;
}

/* Carousel wrapper */
.t-carousel {
  position: relative;
  overflow: hidden;
}

/* Track holds all slides side by side */
.t-track {
  display: flex;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}

/* Individual slide */
.t-slide {
  min-width: 100%;
  display: flex;
  justify-content: center;
}

/* Testimonial card */
.t-card {
  background: var(--white);
  border: 1px solid var(--gold-border);
  border-top: 3px solid var(--gold);
  border-radius: var(--r-lg);
  padding: 48px 52px;
  box-shadow: var(--shadow);
  text-align: center;
  width: 100%;
  max-width: 680px;
}

.t-quote-icon {
  color: var(--gold);
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 24px;
  display: block;
}

.t-text {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-style: italic;
  font-weight: 400;
  color: var(--text);
  line-height: 1.8;
}

/* Navigation dots — hidden until multiple slides are present */
.t-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}

.t-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold-border);
  border: none; cursor: pointer;
  padding: 0; transition: background .2s, transform .2s;
  position: relative;
}
.t-dot::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}

.t-dot.active {
  background: var(--gold);
  transform: scale(1.25);
}

/* Arrow buttons — hidden until multiple slides are present */
.t-prev,
.t-next {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  background: var(--white);
  border: 1px solid var(--gold-border);
  border-radius: 50%;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--navy); font-size: .85rem;
  cursor: pointer; transition: background .2s, box-shadow .2s;
  box-shadow: var(--shadow);
}

.t-prev { left: -20px; }
.t-next { right: -20px; }

.t-prev:hover,
.t-next:hover {
  background: var(--gold);
  color: var(--white);
  box-shadow: var(--shadow-g);
}

@media (max-width: 768px) {
  #testimonials { padding: 64px 20px; }
  .t-card { padding: 36px 28px; }
  .t-text { font-size: 1rem; }
  .t-prev { left: 0; }
  .t-next { right: 0; }
}


/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
footer { background: #070e1b; padding: 68px 28px 0; border-top: 1px solid rgba(212,152,74,.14); }
.footer-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: 44px; padding-bottom: 52px;
  border-bottom: 1px solid rgba(255,255,255,.055);
}
.footer-logo { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.footer-desc { font-size: .82rem; color: rgba(255,255,255,.65); line-height: 1.70; margin-bottom: 20px; }
.fcontact { display: flex; flex-direction: column; gap: 9px; }
.fci { display: flex; align-items: flex-start; gap: 9px; font-size: .78rem; color: rgba(255,255,255,.70); }
.fci i { color: var(--gold); font-size: .72rem; margin-top: 2px; flex-shrink: 0; width: 13px; }
.fcol h4 { font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.flinks { display: flex; flex-direction: column; gap: 4px; }
.flinks a { font-size: .8rem; color: rgba(255,255,255,.70); transition: color .2s; padding: 5px 0; min-height: 44px; display: flex; align-items: center; }
.flinks a:hover { color: var(--white); }
.fci a { color: inherit; transition: color .2s; }
.fci a:hover { color: var(--white); }
.footer-bottom {
  max-width: 1200px; margin: 0 auto; padding: 22px 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.legal { font-size: .68rem; color: rgba(255,255,255,.50); line-height: 1.65; max-width: 680px; }
.copy  { font-size: .72rem; color: rgba(255,255,255,.50); white-space: nowrap; }


/* ══════════════════════════════════════
   HARDCODED CLEANUP
══════════════════════════════════════ */
address { font-style: normal; }
.footer-logo img { height: 48px; width: auto; display: block; }
.page-hero-h1 span,
.page-hero-h1 em  { color: var(--text-3); }


/* ══════════════════════════════════════
   MEDIA QUERIES
══════════════════════════════════════ */

/* ── Trust bar wrap  (≤ 1150px) ── */
@media (max-width: 1150px) {
  .trust-sentence { white-space: normal; flex-wrap: wrap; justify-content: center; }
}

/* ── Intermediate / Hybrid Nav  (1025px – 1280px) ── */
@media (max-width: 1280px) and (min-width: 1025px) {
  .nav-item:not(.nav-persist) { display: none; }
  .nav-item.nav-persist { display: flex; align-self: stretch; }
  .nav-item.nav-persist > a { display: flex; align-items: center; }
  .burger { display: flex; }
  .main-nav { flex: 0; justify-content: flex-end; gap: 4px; margin-left: auto; }
  .main-nav.open {
    display: flex; flex-direction: column;
    position: fixed; top: 62px; left: 0; right: 0;
    background: rgba(26,61,92,.97);
    padding: 20px 28px; gap: 0;
    border-bottom: 1px solid rgba(212,152,74,.22);
    z-index: 999;
  }
  .main-nav.open .nav-item:not(.nav-persist) { display: block; }
  .main-nav.open > .nav-item > a { padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: .9rem; display: block; color: var(--white); }
  .main-nav.open > .nav-item > a::after { display: none; }
  .main-nav.open .nav-item.nav-persist { display: none; }
}

/* ── Tablet / Nav  (≤ 1024px) ── */
@media (max-width: 1024px) {
  /* Mobile navigation */
  .main-nav { display: none; align-self: auto; }
  .burger   { display: flex; }
  .logo-pill picture img { height: 36px; width: auto; display: block; }

  /* Sidebar hides at the same breakpoint the mobile accordion activates */
  .sidebar-col { display: none; }

  /* Practice cards: 3 → 2 columns */
  .practice-grid { grid-template-columns: repeat(2, 1fr); }

  .main-nav.open {
    display: flex; flex-direction: column;
    position: fixed; top: 62px; left: 0; right: 0;
    background: rgba(26,61,92,.97);
    padding: 20px 28px; gap: 0;
    border-bottom: 1px solid rgba(212,152,74,.22);
    z-index: 999;
  }
  .main-nav.open > .nav-item > a {
    padding: 11px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
    font-size: .9rem; display: block;
  }
  .main-nav.open > .nav-item > a::after { display: none; }
  .main-nav.open > .nav-item > a { color: var(--white); }

  .nav-item { display: block; align-self: auto; position: static; }
  .nav-trigger {
    width: 100%; align-self: auto; justify-content: space-between;
    padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.05);
    border-radius: 0; font-size: .9rem; color: var(--white) !important;
  }
  .nav-trigger::after { display: none; }
  .nav-item:hover .nav-dropdown { opacity: 0; visibility: hidden; transform: translateY(-6px); display: none; }
  .nav-dropdown { position: static; transform: none; min-width: auto; border-radius: var(--r-sm); box-shadow: none; display: none; transition: none; }
  .nav-item.accord-open .nav-dropdown {
    display: block; opacity: 1; visibility: visible; transform: none;
    background: var(--navy-mid); border: 2px solid var(--gold);
    border-radius: 8px; padding: 4px 0;
  }
  .nav-item.accord-open .nav-dropdown a { color: var(--white); }
  .nav-item.accord-open .nav-chevron  { transform: rotate(180deg); }
  .nav-item.accord-open .nav-trigger  { color: var(--white) !important; border-bottom: 1px solid rgba(255,255,255,.05); }
  .nav-dropdown a { padding: 10px 14px; font-size: .88rem; border-bottom-color: rgba(255,255,255,.04); color: var(--white); }
  .nav-dropdown a:last-child { border-bottom: none; }

  /* Profile page biography grid collapses */
  .bio-inner  { grid-template-columns: 1fr; gap: 44px; }
  /* Base rules put .bio-right in grid column 2. With only one explicit column
     here, that leftover placement creates an implicit auto-width second
     column that grows to its content's max-content width and squeezes
     .bio-left. Re-place both blocks in column 1, in the same order the
     ≤768px block already uses (specialisms first). */
  .bio-right { display: flex; flex-direction: column; gap: 22px; align-items: start;
               grid-column: 1; grid-row: 1; width: 100%; }
  .bio-left  { grid-column: 1; grid-row: 2; width: 100%; }
  .spec-card, .contact-cta-box { width: 100%; }
  .spec-card::before { display: none; }
  .cases-grid { gap: 14px; }
}

/* ══════════════════════════════════════
   MOBILE ACCORDION
   sidebar pages only — activated by JS at ≤ 1024px
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .acc-section {
    border-bottom: 1px solid rgba(212,152,74,.20);
  }

  .acc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: none;
    text-align: left;
    padding: 16px 24px;
    cursor: pointer;
    background: var(--white);
    transition: background .2s;
  }

  .acc-header:hover {
    background: var(--light-bg);
  }

  .acc-header h2 {
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy);
    margin: 0;
  }

  .acc-header.active h2 {
    color: var(--gold);
  }

  .acc-chevron {
    color: var(--gold);
    font-size: .75rem;
    transition: transform .25s var(--ease);
    flex-shrink: 0;
    margin-left: 12px;
  }

  .acc-header.active .acc-chevron {
    transform: rotate(180deg);
  }

  .acc-body {
    display: none;
    padding: 0 24px 20px;
    background: rgba(212,152,74,.03);
  }

  .acc-body.open {
    display: block;
  }

  /* Consistent gold-tint background regardless of section alternation */
  .acc-body.open.sec-white,
  .acc-body.open.sec-light,
  .acc-body.open {
    background: rgba(212,152,74,.03);
  }

  /* Remove conflicting backgrounds from sections in accordion mode */
  .acc-section .sec-white,
  .acc-section .sec-light {
    background: transparent;
  }

  /* Remove double-padding: section keeps styles but not its own spacing */
  .acc-body > .content-section {
    padding: 16px 0 4px;
    border: none;
  }
}


/* ── Mobile  (≤ 768px) ── */
@media (max-width: 768px) {
  /* Page hero */
  .page-hero-inner { padding: 52px 20px 48px; }
  .emergency-bar { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* Two-column layout */
  .page-body    { padding: 32px 20px 60px; }
  .page-layout  { grid-template-columns: 1fr; }
  .content-section { padding: 32px 24px; }
  .fee-card-meta   { gap: 20px; }

  /* Practice cards: 2 → 2 columns (matches 1024px) */
  .practice-grid { grid-template-columns: repeat(2, 1fr); }

  /* Profile hero */
  .profile-hero-inner {
    padding: 52px 28px;
  }

  /* Biography */
  .bio-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .bio-right {
    display: flex;
    flex-direction: column;
    gap: 18px;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
  }
  .bio-left {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
  }
  .bio-cta {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
  }
  .spec-card { width: 100%; }
  .contact-cta-box { width: 100%; }

  /* Notable cases */
  .cases-grid { grid-template-columns: 1fr; }

  /* Contact section */
  .contact-inner { grid-template-columns: 1fr; gap: 44px; }
  .form-wrap     { padding: 28px 22px; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
}


.fee-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 768px) {
  .fee-grid {
    grid-template-columns: 1fr;
  }
}
.fee-grid .fee-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
@media (min-width: 769px) {
  .fee-grid .fee-card:last-child:nth-child(odd) .fee-card-name {
    text-align: center;
  }
  .fee-grid .fee-card:last-child:nth-child(odd) .fee-card-meta {
    justify-content: center;
  }
}

.mt-20 { margin-top: 20px; }

@media (max-width: 480px) {
  .practice-grid { grid-template-columns: 1fr; }
}

/* Practice cards: centre an incomplete final row (index.html has 5 cards, so the
   3-column layout ends with a row of 2 and the 2-column layout with a row of 1).
   Each layout is re-expressed on a track grid with twice as many columns, every
   card spanning 2 tracks. A span-2 card is exactly as wide as before
   ((100% - gaps) / N) and full rows land in exactly the same place; a card
   starting one track in is offset by half a card plus half a gap, which is what
   centres a short row. Scoped by media query to the same ranges as the rules
   above, so the 1-column layout (<=480px) is untouched. Kept after them so it
   wins the cascade. */
@media (min-width: 1025px) {
  .practice-grid { grid-template-columns: repeat(6, 1fr); }
  .practice-grid > .pcard { grid-column: span 2; }
  /* final row of 2 */
  .practice-grid > .pcard:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
  .practice-grid > .pcard:nth-child(3n+2):last-child { grid-column: 4 / span 2; }
  /* final row of 1 */
  .practice-grid > .pcard:nth-child(3n+1):last-child { grid-column: 3 / span 2; }
}
@media (min-width: 481px) and (max-width: 1024px) {
  .practice-grid { grid-template-columns: repeat(4, 1fr); }
  .practice-grid > .pcard { grid-column: span 2; }
  /* final row of 1 */
  .practice-grid > .pcard:nth-child(2n+1):last-child { grid-column: 2 / span 2; }
}

/* contact.html: on phones the real email (info@goldmanbaileysolicitors.co.uk) is
   ~17.1 x the font size wide. It needs ~257px at the normal .94rem, but the card's
   text column is only 100vw - 140px (20px page padding, 1px border and 20px padding
   each side, 42px icon, 16px gap), i.e. 250px at 390 and 235px at 375. With the
   site-wide overflow-wrap:anywhere it then broke mid-word. Scale the detail text
   down just enough to fit: never above the normal .94rem (so 414px and wider phones
   are unchanged), never below .8rem (360px still fits; at 320px it wraps rather
   than shrinking further). contact.html's own <style> sets .cdetail-value later in
   the cascade, so the extra `main` here is needed to win. text-wrap: balance keeps
   a wrapped address as "85-87 Bayham Street," / "London NW1 0AG" instead of
   stranding "0AG". */
@media (max-width: 430px) {
  main .cdetail-value {
    font-size: clamp(.8rem, calc((100vw - 140px) / 17.3), .94rem);
    text-wrap: balance;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fade { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .hero-deco { animation: none; opacity: 0.55; }

  /* Carousel */
  .t-track { transition: none; }

  /* Nav dropdown */
  .nav-dropdown { transition: none; }

  /* Accordion chevron */
  .acc-chevron { transition: none; }

  /* Hover lifts and translates */
  .btn:hover,
  .btn-gold:hover,
  .btn-white:hover { transform: none; }
  .case-card { transition: none; }
  .case-card:hover { transform: none; box-shadow: none; }

  /* All remaining transitions */
  .team-tag,
  .phone-block,
  .nav-dropdown a,
  .sidebar-links a,
  .tag,
  .spec-tooltip-pill { transition: none; }
}