/* ==========================================================================
   Maria LB Solicitors
   Hand-written theme CSS. No framework, no build step.

   The palette is deliberately narrow: navy carries authority, gold is used
   sparingly as punctuation (rules, eyebrows, the crest, one button), and the
   page sits on warm cream rather than white so photography and the gold don't
   look cold. Nothing else gets a colour.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand */
  --navy:        #0E1F3C;
  --navy-deep:   #081326;
  --navy-line:   #1E355A;
  --navy-tint:   #16294A;

  --gold:        #B99653;
  --gold-bright: #CFAE6E;
  --gold-deep:   #97783E;
  --gold-wash:   #F0E7D6;

  --cream:       #F6F3EC;
  --cream-deep:  #EDE7DA;
  --white:       #FFFFFF;

  --ink:         #1A1A1A;
  --ink-soft:    #55595F;
  --ink-faint:   #83878D;

  --amber:       #B3701A;
  --amber-wash:  #FDF3E2;

  /* Type */
  --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
  --step-0:  clamp(1rem, 0.96rem + 0.19vw, 1.11rem);
  --step-1:  clamp(1.18rem, 1.1rem + 0.36vw, 1.4rem);
  --step-2:  clamp(1.42rem, 1.28rem + 0.66vw, 1.85rem);
  --step-3:  clamp(1.7rem, 1.45rem + 1.16vw, 2.44rem);
  --step-4:  clamp(2.04rem, 1.63rem + 1.9vw, 3.22rem);
  --step-5:  clamp(2.44rem, 1.79rem + 3vw, 4.25rem);

  /* Layout */
  --wrap:        1200px;
  --wrap-wide:   1360px;
  --wrap-narrow: 720px;
  --gutter:      clamp(20px, 5vw, 48px);
  --section-y:   clamp(56px, 8vw, 116px);

  --radius:    4px;
  --radius-lg: 8px;

  --shadow-sm: 0 1px 2px rgba(14, 31, 60, .06), 0 2px 8px rgba(14, 31, 60, .05);
  --shadow-md: 0 4px 12px rgba(14, 31, 60, .07), 0 12px 32px rgba(14, 31, 60, .08);
  --shadow-lg: 0 8px 24px rgba(14, 31, 60, .1), 0 24px 64px rgba(14, 31, 60, .12);

  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.012em;
  color: var(--navy);
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy); text-decoration-color: rgba(185, 150, 83, .55); text-underline-offset: .18em; }
a:hover { color: var(--gold-deep); }

ul, ol { margin: 0 0 1.15em; padding-left: 1.3em; }
li { margin-bottom: .4em; }

strong { font-weight: 600; }

hr {
  border: 0;
  height: 1px;
  background: var(--cream-deep);
  margin: 2.5rem 0;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--gold-wash); color: var(--navy); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--navy);
  color: var(--white);
  padding: .8rem 1.4rem;
}
.skip-link:focus { left: 1rem; top: 1rem; color: var(--white); }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide   { max-width: var(--wrap-wide); }
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(40px, 5vw, 72px); }

.section--cream { background: var(--cream); }
.section--white { background: var(--white); }
.section--deep  { background: var(--cream-deep); }

.section--navy {
  background: var(--navy);
  color: rgba(255, 255, 255, .82);
}
.section--navy h1,
.section--navy h2,
.section--navy h3,
.section--navy h4 { color: var(--white); }
.section--navy a { color: var(--gold-bright); }

.grid { display: grid; gap: clamp(20px, 3vw, 32px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.split {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left  { grid-template-columns: 1.15fr .85fr; }
  .split--wide-right { grid-template-columns: .85fr 1.15fr; }
}
/* Where one column is a tall form, centring drops the other column halfway down
   the page for no reason. */
.split--top { align-items: start; }

.stack > * + * { margin-top: 1.1rem; }

/* --------------------------------------------------------------------------
   4. Typographic furniture
   -------------------------------------------------------------------------- */

/* The small gold line that opens almost every section. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 1rem;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold);
  flex: none;
}
.section--navy .eyebrow { color: var(--gold-bright); }
.eyebrow--center { justify-content: center; }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-soft);
}
.section--navy .lede { color: rgba(255, 255, 255, .78); }

.section-head { max-width: 68ch; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

/* A gold rule used as a divider under headings. */
.rule {
  width: 56px;
  height: 2px;
  background: var(--gold);
  border: 0;
  margin: 1.4rem 0;
}
.rule--center { margin-inline: auto; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  padding: 1.05rem 1.7rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease),
              box-shadow .22s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .icon { width: 18px; height: 18px; }

.btn--gold {
  background: var(--gold);
  color: var(--navy);
  box-shadow: 0 2px 10px rgba(185, 150, 83, .3);
}
.btn--gold:hover { background: var(--gold-bright); color: var(--navy); box-shadow: 0 6px 20px rgba(185, 150, 83, .38); }

.btn--navy { background: var(--navy); color: var(--white); }
.btn--navy:hover { background: var(--navy-tint); color: var(--white); }

.btn--ghost {
  background: transparent;
  color: var(--navy);
  border-color: rgba(14, 31, 60, .22);
}
.btn--ghost:hover { border-color: var(--navy); background: rgba(14, 31, 60, .04); color: var(--navy); }

.section--navy .btn--ghost,
.cta-band .btn--ghost,
.drawer .btn--ghost,
.hero .btn--ghost {
  color: var(--white);
  border-color: rgba(255, 255, 255, .32);
}
.section--navy .btn--ghost:hover,
.cta-band .btn--ghost:hover,
.drawer .btn--ghost:hover,
.hero .btn--ghost:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .6); color: var(--white); }

/* .drawer a paints every link white, which would swallow the gold button's
   navy label. */
.drawer .btn--gold { color: var(--navy); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.8rem;
}

/* Text link with an arrow that slides on hover. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .93rem;
  color: var(--navy);
  text-decoration: none;
  letter-spacing: .01em;
}
.arrow-link .icon { width: 18px; transition: transform .22s var(--ease); }
.arrow-link:hover { color: var(--gold-deep); }
.arrow-link:hover .icon { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */

.topbar {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, .7);
  font-size: .8rem;
  letter-spacing: .01em;
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 42px;
}
.topbar a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.topbar a:hover { color: var(--gold-bright); }
.topbar__list {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.topbar__list li { display: flex; align-items: center; gap: .45rem; margin: 0; }
.topbar .icon { width: 15px; height: 15px; color: var(--gold); flex: none; }
@media (max-width: 900px) { .topbar__list--secondary { display: none; } }
@media (max-width: 560px) { .topbar { display: none; } }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cream);
  border-bottom: 1px solid var(--cream-deep);
  transition: box-shadow .25s var(--ease), background .25s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); background: rgba(246, 243, 236, .96); backdrop-filter: blur(8px); }

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 96px;
}

/* The lockup is stacked (crest over wordmark), so it needs more height than a
   horizontal logo would to read at the same optical size. */
.brand { display: inline-flex; align-items: center; gap: .85rem; text-decoration: none; flex: none; }
.brand img { height: 68px; width: auto; }
@media (max-width: 560px) { .brand img { height: 52px; } }

/* Primary navigation */
.nav { display: flex; align-items: center; gap: 1.9rem; }
.nav__menu {
  display: flex;
  align-items: center;
  gap: 1.7rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__menu li { margin: 0; position: relative; }
.nav__menu > li > a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .92rem;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  padding: .5rem 0;
  position: relative;
  white-space: nowrap;
}
.nav__menu > li > a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .26s var(--ease);
}
.nav__menu > li:hover > a::after,
.nav__menu > li.current-menu-item > a::after,
.nav__menu > li.current-menu-parent > a::after,
.nav__menu > li.current-menu-ancestor > a::after { transform: scaleX(1); }

.nav__menu .menu-item-has-children > a::before {
  content: '';
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  order: 2;
  opacity: .5;
  margin-left: .2rem;
}

/* Dropdowns */
.nav__menu .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -1.2rem;
  min-width: 268px;
  background: var(--white);
  border: 1px solid var(--cream-deep);
  border-top: 2px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: .6rem;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.nav__menu > li:hover > .sub-menu,
.nav__menu > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__menu .sub-menu::before {
  content: '';
  position: absolute;
  inset: -16px 0 auto 0;
  height: 16px;
}
.nav__menu .sub-menu a {
  display: block;
  padding: .62rem .9rem;
  font-size: .89rem;
  color: var(--navy);
  text-decoration: none;
  border-radius: 3px;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.nav__menu .sub-menu a:hover { background: var(--cream); color: var(--gold-deep); }

.menu-item--cta > a {
  background: var(--gold);
  color: var(--navy) !important;
  padding: .85rem 1.35rem !important;
  border-radius: var(--radius);
  font-weight: 600;
  transition: background .22s var(--ease);
}
.menu-item--cta > a::after { display: none; }
.menu-item--cta > a:hover { background: var(--gold-bright); }

.header-cta { display: flex; align-items: center; gap: 1rem; flex: none; }
.header-cta .btn { padding: .85rem 1.4rem; font-size: .89rem; }

@media (max-width: 1100px) { .nav__menu { gap: 1.15rem; } .nav__menu > li > a { font-size: .87rem; } }
@media (max-width: 1000px) { .nav, .header-cta .btn--ghost { display: none; } }

/* Mobile drawer */
.nav-toggle {
  display: none;
  align-items: center;
  gap: .5rem;
  background: none;
  border: 1px solid rgba(14, 31, 60, .2);
  border-radius: var(--radius);
  padding: .6rem .8rem;
  color: var(--navy);
  cursor: pointer;
  font: inherit;
}
@media (max-width: 1000px) { .nav-toggle { display: inline-flex; } }

.drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--navy);
  color: var(--white);
  padding: 1.5rem var(--gutter) 3rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .32s var(--ease);
  visibility: hidden;
}
.drawer.is-open { transform: translateX(0); visibility: visible; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
/* width:auto is load-bearing — the <img> carries width="600", which beats an
   unset CSS width and blows the logo across the whole drawer. */
.drawer__top img { height: 48px; width: auto; }
.drawer__close {
  background: none;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--radius);
  color: var(--white);
  padding: .55rem;
  cursor: pointer;
  display: inline-flex;
}
.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer > ul > li { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.drawer a {
  display: block;
  padding: .95rem 0;
  color: var(--white);
  text-decoration: none;
  font-size: 1.06rem;
  font-family: var(--font-display);
}
.drawer .sub-menu { padding: 0 0 .8rem .9rem; border-left: 1px solid rgba(185, 150, 83, .4); margin-left: .2rem; }
.drawer .sub-menu a { font-family: var(--font-body); font-size: .93rem; padding: .5rem 0; color: rgba(255, 255, 255, .74); }
.drawer .sub-menu a:hover { color: var(--gold-bright); }

/* Parents open their children instead of navigating, so they need to look
   openable. */
.drawer > ul > .menu-item-has-children > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer > ul > .menu-item-has-children > a::after {
  content: '';
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg) translate(-2px, -2px);
  flex: none;
}

.drawer__foot { margin-top: 2.2rem; display: grid; gap: .8rem; }
/* .drawer a sets display:block and the display serif; buttons must opt back out. */
.drawer__foot .btn {
  display: inline-flex;
  width: 100%;
  font-family: var(--font-body);
  font-size: .95rem;
  padding: 1.05rem 1.7rem;
}

body.is-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. Duotone media
   Stock photography from several sources only reads as one brand once it's
   pushed through the same navy tone curve.
   -------------------------------------------------------------------------- */

.duotone { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); }
.duotone img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(1.02); }
.duotone::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--navy);
  mix-blend-mode: color;
  z-index: 1;
}
.duotone::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(185, 150, 83, .16), rgba(14, 31, 60, .34));
  z-index: 2;
}
.duotone > * { position: relative; z-index: 3; }

/* Plain photo frame with a gold corner accent. */
.framed { position: relative; }
.framed img { border-radius: var(--radius); box-shadow: var(--shadow-md); }
.framed::after {
  content: '';
  position: absolute;
  right: -14px;
  bottom: -14px;
  width: 46%;
  height: 55%;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  border-radius: 0 0 var(--radius) 0;
  z-index: -1;
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--navy-deep);
  color: rgba(255, 255, 255, .85);
  overflow: hidden;
  isolation: isolate;
}

/* Full-bleed photograph with the navy scrim doing the legibility work. With the
   form gone there is far less to protect, so the image can be much stronger than
   the washed-out version it replaces. */
.hero__media {
  position: absolute;
  inset: 0 0 0 24%;
  z-index: -3;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Framed so the handshake lands in the band between the text column and the
     card, which is the only part of the photo actually visible. */
  object-position: 50% 58%;
  filter: grayscale(1) contrast(1.12) brightness(.98);
  opacity: .6;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 42%, #000 100%);
          mask-image: linear-gradient(to right, transparent, #000 42%, #000 100%);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(100deg, var(--navy-deep) 0%, var(--navy) 26%, rgba(14, 31, 60, .82) 52%, rgba(8, 19, 38, .5) 100%),
    radial-gradient(1100px 520px at 88% -12%, rgba(185, 150, 83, .24), transparent 60%),
    radial-gradient(760px 520px at -6% 106%, rgba(185, 150, 83, .12), transparent 58%);
}

/* A single hairline at the very bottom, echoing the gold rules used elsewhere. */
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(to right, var(--gold), rgba(185, 150, 83, .12) 60%, transparent);
}

.hero__crest {
  position: absolute;
  left: -5%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(300px, 36vw, 560px);
  opacity: .05;
  z-index: -1;
  pointer-events: none;
}

/* Wider than the rest of the site on purpose: the hero is the one place the
   layout should feel expansive rather than measured. The text column gets the
   larger share so the card reads as a companion, not a second headline. */
.hero .wrap {
  max-width: 1480px;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(34px, 4vw, 64px);
  align-items: center;
  min-height: clamp(520px, 76vh, 760px);
  padding-block: clamp(56px, 6.5vw, 92px);
}
@media (min-width: 980px) {
  .hero .wrap { grid-template-columns: 1.18fr .82fr; }
}

.hero__body { max-width: 34rem; }

.hero h1 {
  color: var(--white);
  /* Caps lower than the single-column version: alongside a card, a 5rem
     headline forces the whole hero taller than it needs to be. */
  font-size: clamp(2.5rem, 1.7rem + 2.9vw, 3.9rem);
  line-height: 1.05;
  margin-bottom: 1.1rem;
  letter-spacing: -.026em;
}
.hero h1 em { font-style: normal; color: var(--gold-bright); }

.hero__sub {
  font-size: clamp(1rem, .96rem + .22vw, 1.15rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, .8);
  max-width: 40ch;
}

/* Quick callback: two fields and a button on one line. */
.hero__form { margin-top: clamp(28px, 3.5vw, 44px); max-width: 34rem; }

.callback {
  display: grid;
  gap: .7rem;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) {
  .callback { grid-template-columns: 1fr 1fr auto; align-items: end; }
}

.callback .field > label {
  color: rgba(255, 255, 255, .62);
  font-size: .72rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  margin-bottom: .1rem;
}
.callback input {
  background: rgba(255, 255, 255, .07) !important;
  border-color: rgba(255, 255, 255, .2) !important;
  color: var(--white) !important;
  padding: .95rem 1rem !important;
  backdrop-filter: blur(6px);
}
.callback input::placeholder { color: rgba(255, 255, 255, .4) !important; }
.callback input:focus {
  border-color: var(--gold) !important;
  background: rgba(255, 255, 255, .12) !important;
  box-shadow: 0 0 0 3px rgba(185, 150, 83, .22) !important;
}
.callback .btn { padding: 1.05rem 1.5rem; white-space: nowrap; }

.consent--fine {
  margin-top: .95rem;
  font-size: .77rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .74);
  max-width: 52ch;
}
.consent--fine a { color: var(--gold-bright); }
.consent--fine input { width: 15px; height: 15px; margin-top: .22rem; }

/* Same fine print, but inside the white card rather than on the navy. */
.consent--dark { color: var(--ink-soft); max-width: none; }
.consent--dark a { color: var(--gold-deep); }

/* --------------------------------------------------------------------------
   Hero enquiry card
   Capped in width and stripped of its message box, so it supports the headline
   instead of competing with it.
   -------------------------------------------------------------------------- */

.hero-card {
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 22px 60px rgba(4, 10, 22, .42);
  color: var(--ink);
  overflow: hidden;
  position: relative;
}
@media (min-width: 980px) { .hero-card { margin-right: 0; } }

.hero-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(to right, var(--gold-deep), var(--gold-bright), var(--gold-deep));
  z-index: 1;
}

.hero-card__head {
  background: var(--navy);
  padding: 1.15rem 1.6rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.hero-card__head h2 {
  color: var(--white);
  font-size: 1.28rem;
  margin: 0;
  line-height: 1.2;
}
.hero-card__flag {
  display: inline-block;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--gold);
  padding: .28rem .55rem;
  border-radius: 2px;
  order: 2;
}

.hero-card__body { padding: 1.5rem 1.6rem 1.6rem; }

/* Denser than the full-page form: smaller labels, tighter fields, tighter rows. */
.hero-card .form { gap: .8rem; }
.hero-card .form__row { gap: .8rem; }
.hero-card .field > label { font-size: .73rem; letter-spacing: .06em; }
.hero-card .form :is(input, select) { padding: .72rem .8rem; font-size: .9rem; }
.hero-card .btn { width: 100%; padding: .92rem 1.4rem; }
.hero-card .form__note { font-size: .72rem; line-height: 1.5; }
.hero-card .consent { font-size: .76rem; }

/* Credential row, hairline-separated rather than boxed. */
.hero__creds {
  list-style: none;
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding: 1.3rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, .13);
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.6rem;
}
.hero__creds li {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
}
.hero__creds .icon { width: 16px; height: 16px; color: var(--gold); flex: none; }

.hero__alt {
  margin-top: 1.1rem;
  font-size: .88rem;
  color: rgba(255, 255, 255, .55);
}
.hero__tel {
  color: var(--gold-bright);
  font-weight: 600;
  text-decoration: none;
  margin-left: .45rem;
  font-size: 1.04rem;
}
.hero__tel:hover { color: var(--white); }

/* Below the hero the photo would sit behind the text, so it steps aside and the
   scrim goes solid. */
@media (max-width: 780px) {
  .hero__media { inset: 0; }
  .hero__media img { opacity: .3; -webkit-mask-image: none; mask-image: none; }
  .hero::before { background: linear-gradient(165deg, var(--navy) 20%, rgba(8, 19, 38, .93) 100%); }
}

/* Inner page header (everything that isn't the home page). */
.page-hero {
  position: relative;
  background: var(--navy);
  color: rgba(255, 255, 255, .82);
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(56px, 7vw, 104px);
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(105deg, var(--navy) 20%, rgba(14, 31, 60, .9) 70%),
    radial-gradient(700px 340px at 88% 0%, rgba(185, 150, 83, .22), transparent 62%);
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: .38; }
.page-hero h1 { color: var(--white); max-width: 22ch; font-size: var(--step-4); }
.page-hero .lede { max-width: 60ch; }

/* Watermark of the firm's crest, barely visible behind inner page headers.
   Crest only, never the full lockup — a half-cropped wordmark reads as a bug. */
.page-hero__crest {
  position: absolute;
  right: clamp(24px, 5vw, 90px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(180px, 22vw, 300px);
  opacity: .07;
  z-index: -1;
  pointer-events: none;
}
@media (max-width: 860px) { .page-hero__crest { display: none; } }

/* Breadcrumbs */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
  font-size: .8rem;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 1.4rem;
}
.crumbs a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.crumbs a:hover { color: var(--gold-bright); }
.crumbs span[aria-hidden] { color: var(--gold); }

/* --------------------------------------------------------------------------
   9. Trust bar
   -------------------------------------------------------------------------- */

.trustbar { background: var(--navy-deep); border-top: 1px solid var(--navy-line); }
.trustbar__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.trustbar__item {
  padding: clamp(24px, 3vw, 38px) clamp(16px, 2vw, 28px);
  border-right: 1px solid var(--navy-line);
  text-align: center;
}
.trustbar__item:last-child { border-right: 0; }
.trustbar__value {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  color: var(--gold-bright);
  line-height: 1.1;
  display: block;
}
.trustbar__label {
  display: block;
  margin-top: .45rem;
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
@media (max-width: 640px) {
  .trustbar__item { border-right: 0; border-bottom: 1px solid var(--navy-line); }
  .trustbar__item:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   10. Cards
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--cream-deep);
  border-radius: var(--radius);
  padding: clamp(24px, 2.6vw, 34px);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.card::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s var(--ease);
}
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gold-wash); }
a.card:hover::after { transform: scaleX(1); }

.card__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold-wash);
  color: var(--gold-deep);
  margin-bottom: 1.15rem;
  flex: none;
  transition: background .28s var(--ease), color .28s var(--ease);
}
.card__icon .icon { width: 26px; height: 26px; }
a.card:hover .card__icon { background: var(--navy); color: var(--gold-bright); }

.card h3 { font-size: var(--step-1); margin-bottom: .45rem; }
.card p { color: var(--ink-soft); font-size: .93rem; margin-bottom: 1.1rem; }
.card .arrow-link { margin-top: auto; }

/* Person card */
.person { background: var(--white); border: 1px solid var(--cream-deep); border-radius: var(--radius); overflow: hidden; }
.person__photo { aspect-ratio: 4 / 5; background: var(--cream-deep); }
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__body { padding: clamp(20px, 2vw, 28px); }
.person__body h3 { font-size: var(--step-1); margin-bottom: .2rem; }
.person__role { color: var(--gold-deep); font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .9rem; }
.person__qual { font-size: .84rem; color: var(--ink-faint); margin-bottom: .9rem; }
.person__langs { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 1rem; }

.pill {
  display: inline-block;
  font-size: .74rem;
  letter-spacing: .04em;
  padding: .3rem .65rem;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid var(--cream-deep);
  color: var(--ink-soft);
}
.section--navy .pill { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .82); }

/* Review card */
.review {
  background: var(--white);
  border: 1px solid var(--cream-deep);
  border-radius: var(--radius);
  padding: clamp(24px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  position: relative;
}
.review__mark { color: var(--gold-wash); width: 34px; height: 34px; margin-bottom: .5rem; }
.review__stars { display: flex; gap: .18rem; color: var(--gold); margin-bottom: .9rem; }
.review__stars .icon { width: 17px; height: 17px; }
.review blockquote { margin: 0 0 1.2rem; font-size: .97rem; line-height: 1.68; color: var(--ink); }

/* A three-up row of testimonials needs a wider track than the default card grid,
   otherwise the measure drops to about five words a line and the cards run tall
   and thin. */
.reviews-row { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.review__by { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--cream-deep); }
.review__name { display: block; font-family: var(--font-display); font-size: 1.06rem; color: var(--navy); }
.review__meta { display: block; font-size: .8rem; color: var(--ink-faint); }
.review blockquote p:last-child { margin-bottom: 0; }

.section--navy .review { background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .12); }
.section--navy .review blockquote { color: rgba(255, 255, 255, .88); }
.section--navy .review__name { color: var(--white); }
.section--navy .review__by { border-top-color: rgba(255, 255, 255, .12); }
.section--navy .review__mark { color: rgba(185, 150, 83, .3); }

/* --------------------------------------------------------------------------
   11. Numbered process
   -------------------------------------------------------------------------- */

.steps { counter-reset: step; display: grid; gap: clamp(24px, 3vw, 34px); }
@media (min-width: 780px) { .steps--4 { grid-template-columns: repeat(4, 1fr); } .steps--3 { grid-template-columns: repeat(3, 1fr); } }

.step { position: relative; counter-increment: step; padding-top: 2.6rem; }
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
}
.step::after {
  content: '';
  position: absolute;
  top: 1.1rem;
  left: 3.2rem;
  right: -1.5rem;
  height: 1px;
  background: linear-gradient(to right, var(--gold-wash), transparent);
}
.step:last-child::after { display: none; }
@media (max-width: 779px) { .step::after { display: none; } }
.step h3 { font-size: var(--step-1); margin-bottom: .4rem; }
.step p { font-size: .93rem; color: var(--ink-soft); }
.section--navy .step p { color: rgba(255, 255, 255, .72); }
.section--navy .step::after { background: linear-gradient(to right, rgba(185, 150, 83, .5), transparent); }

/* --------------------------------------------------------------------------
   12. Feature lists
   -------------------------------------------------------------------------- */

.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.ticks li { display: flex; align-items: flex-start; gap: .75rem; margin: 0; font-size: .97rem; }
.ticks .icon { color: var(--gold); flex: none; width: 20px; height: 20px; margin-top: 3px; }
.ticks--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .75rem 2rem; }

/* Highlighted aside — used for limitation-period warnings. */
.note {
  border-left: 3px solid var(--gold);
  background: var(--gold-wash);
  padding: 1.3rem 1.5rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .95rem;
}
.note strong { color: var(--navy); display: block; margin-bottom: .3rem; font-family: var(--font-display); font-size: 1.08rem; }
.note--warn { background: var(--amber-wash); border-left-color: var(--amber); }

/* --------------------------------------------------------------------------
   13. Accordion (FAQs)
   -------------------------------------------------------------------------- */

.accordion { border-top: 1px solid var(--cream-deep); }
.accordion__item { border-bottom: 1px solid var(--cream-deep); }
.accordion__btn {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  background: none;
  border: 0;
  padding: 1.35rem 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
}
.accordion__btn:hover { color: var(--gold-deep); }
.accordion__btn .icon {
  flex: none;
  color: var(--gold);
  transition: transform .3s var(--ease);
  margin-top: 3px;
}
.accordion__btn[aria-expanded="true"] .icon { transform: rotate(45deg); }
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s var(--ease);
}
.accordion__panel[data-open="true"] { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p { color: var(--ink-soft); font-size: .97rem; }
.accordion__panel > div > *:last-child { margin-bottom: 1.5rem; }

/* --------------------------------------------------------------------------
   14. Forms
   -------------------------------------------------------------------------- */

.form { display: grid; gap: 1.05rem; }
.form__row { display: grid; gap: 1.05rem; }
@media (min-width: 620px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: .4rem; }
.field > label {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--navy);
}
.field .req { color: var(--gold-deep); }
.field__hint { font-size: .8rem; color: var(--ink-faint); }

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="date"],
.form select,
.form textarea {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid #D9D3C6;
  border-radius: var(--radius);
  padding: .82rem .95rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form textarea { min-height: 140px; resize: vertical; }
.form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230E1F3C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  padding-right: 2.4rem;
}
.form :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(185, 150, 83, .18);
}
.form :is(input, textarea)::placeholder { color: #A9A9A2; }

.consent { display: flex; align-items: flex-start; gap: .7rem; font-size: .86rem; color: var(--ink-soft); line-height: 1.55; }
.consent input { margin-top: .28rem; accent-color: var(--gold-deep); width: 17px; height: 17px; flex: none; }

/* The honeypot. Hidden from people, left in the DOM for bots. */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form__note { font-size: .8rem; color: var(--ink-faint); }

.notice {
  padding: 1rem 1.2rem;
  border-radius: var(--radius);
  font-size: .93rem;
  border-left: 3px solid;
}
.notice--ok    { background: #EEF6EF; border-color: #3F7D4B; color: #245030; }
.notice--error { background: #FCEFEF; border-color: #A93B3B; color: #7C2A2A; }

/* --------------------------------------------------------------------------
   15. CTA band
   -------------------------------------------------------------------------- */

.cta-band {
  position: relative;
  background: var(--navy);
  color: rgba(255, 255, 255, .82);
  overflow: hidden;
  isolation: isolate;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(700px 320px at 15% 110%, rgba(185, 150, 83, .26), transparent 60%);
}
.cta-band .wrap {
  display: grid;
  gap: 2rem;
  align-items: center;
  padding-block: clamp(48px, 6vw, 84px);
}
@media (min-width: 900px) { .cta-band .wrap { grid-template-columns: 1.4fr auto; } }
.cta-band h2 { color: var(--white); font-size: var(--step-3); margin-bottom: .6rem; }
.cta-band p { color: rgba(255, 255, 255, .74); max-width: 56ch; }
.cta-band .btn-row { margin-top: 0; }

/* --------------------------------------------------------------------------
   16. Prose (WYSIWYG output)
   -------------------------------------------------------------------------- */

.prose { max-width: 72ch; }
.prose > *:first-child { margin-top: 0; }
.prose h2 { font-size: var(--step-3); margin-top: 2.4em; }
.prose h3 { font-size: var(--step-2); margin-top: 1.9em; }
.prose h2 + p, .prose h3 + p { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.15em; }
.prose ul li::marker { color: var(--gold); }
.prose ol li::marker { color: var(--gold-deep); font-weight: 600; }
.prose blockquote {
  margin: 2rem 0;
  padding: .3rem 0 .3rem 1.6rem;
  border-left: 3px solid var(--gold);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--navy);
}
.prose img { border-radius: var(--radius); margin: 2rem 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 2rem 0; font-size: .93rem; }
.prose th, .prose td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--cream-deep); }
.prose th { background: var(--cream); font-weight: 600; color: var(--navy); }

/* Sticky sidebar used on practice-area pages. */
.sidebar { position: sticky; top: 120px; display: grid; gap: 1.4rem; }
.sidebar__panel {
  background: var(--white);
  border: 1px solid var(--cream-deep);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.6rem;
}
.sidebar__panel h3 { font-size: var(--step-1); margin-bottom: .7rem; }
.sidebar__panel p { font-size: .9rem; color: var(--ink-soft); }
.sidebar__list { list-style: none; padding: 0; margin: 0; }
.sidebar__list li { margin: 0; border-bottom: 1px solid var(--cream-deep); }
.sidebar__list li:last-child { border-bottom: 0; }
.sidebar__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .68rem 0;
  font-size: .89rem;
  text-decoration: none;
  color: var(--navy);
}
.sidebar__list a:hover { color: var(--gold-deep); }
.sidebar__list .current > a { color: var(--gold-deep); font-weight: 600; }
.sidebar__list .icon { width: 15px; color: var(--gold); opacity: .6; }

.with-sidebar { display: grid; gap: clamp(32px, 4vw, 60px); grid-template-columns: 1fr; }
@media (min-width: 960px) { .with-sidebar { grid-template-columns: minmax(0, 1fr) 330px; } }

/* --------------------------------------------------------------------------
   17. Blog
   -------------------------------------------------------------------------- */

.post-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--cream-deep); border-radius: var(--radius); overflow: hidden; }
.post-card__media { aspect-ratio: 16 / 10; background: var(--cream-deep); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__body { padding: clamp(20px, 2vw, 28px); display: flex; flex-direction: column; flex: 1; }
.post-card h3 { font-size: var(--step-1); margin-bottom: .5rem; }
.post-card h3 a { text-decoration: none; }
.post-card p { font-size: .92rem; color: var(--ink-soft); }
.meta { font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .7rem; }

.pagination { display: flex; gap: .4rem; justify-content: center; margin-top: 3rem; flex-wrap: wrap; }
.pagination .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 .7rem;
  border: 1px solid var(--cream-deep);
  border-radius: var(--radius);
  background: var(--white);
  text-decoration: none;
  font-size: .9rem;
}
.pagination .page-numbers.current { background: var(--navy); border-color: var(--navy); color: var(--white); }
.pagination a.page-numbers:hover { border-color: var(--gold); color: var(--gold-deep); }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */

.site-footer { background: var(--navy-deep); color: rgba(255, 255, 255, .68); font-size: .91rem; }
.site-footer a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.site-footer a:hover { color: var(--gold-bright); }

.footer__main {
  display: grid;
  gap: clamp(32px, 4vw, 52px);
  padding-block: clamp(48px, 6vw, 78px);
  grid-template-columns: 1fr;
}
@media (min-width: 760px)  { .footer__main { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .footer__main { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }

.footer__brand img { height: 76px; width: auto; margin-bottom: 1.2rem; }
.footer__brand p { font-size: .89rem; line-height: 1.7; max-width: 34ch; }

.footer h4 {
  color: var(--white);
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--navy-line);
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer ul li { margin: 0; font-size: .89rem; }

.footer__contact li { display: flex; gap: .7rem; align-items: flex-start; }
.footer__contact .icon { color: var(--gold); flex: none; width: 17px; height: 17px; margin-top: 3px; }

.socials { display: flex; gap: .5rem; margin-top: 1.4rem; }
.socials a {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--navy-line);
  border-radius: 50%;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.socials a:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.socials svg { width: 17px; height: 17px; }

.footer__legal {
  border-top: 1px solid var(--navy-line);
  padding-block: 1.9rem;
  display: grid;
  gap: 1.2rem;
  font-size: .82rem;
  color: rgba(255, 255, 255, .5);
}
@media (min-width: 900px) { .footer__legal { grid-template-columns: 1fr auto; align-items: center; } }
.footer__legal ul { display: flex; flex-wrap: wrap; gap: 1.3rem; }

.footer__regulatory {
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--navy-line);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  font-size: .82rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .6);
  margin-top: 1.4rem;
}

.badges { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.badges img { height: 54px; width: auto; }

/* Stand-in for the SRA digital badge until the firm supplies the real embed.
   States only what we can evidence. */
.cred {
  display: flex;
  align-items: center;
  gap: .85rem;
  border: 1px solid var(--navy-line);
  border-left: 2px solid var(--gold);
  border-radius: var(--radius);
  padding: .85rem 1.1rem;
  background: rgba(255, 255, 255, .03);
}
.cred__icon { color: var(--gold); flex: none; }
.cred strong {
  display: block;
  color: var(--white);
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.cred span { display: block; font-size: .78rem; color: rgba(255, 255, 255, .55); margin-top: .2rem; }

/* Tighten the hero credential strip so all three sit on one line on desktop. */
@media (min-width: 1100px) {
  .hero__creds { gap: .9rem 1.7rem; }
  .hero__creds li { font-size: .76rem; letter-spacing: .03em; }
}

/* --------------------------------------------------------------------------
   19. To-be-confirmed markers
   Anything the firm hasn't signed off is flagged rather than asserted.
   -------------------------------------------------------------------------- */

.tbc { position: relative; }
body.show-tbc .tbc {
  background: var(--amber-wash);
  box-shadow: inset 0 -2px 0 var(--amber);
  cursor: help;
}
.tbc-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 150;
  background: var(--navy);
  color: var(--white);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: .6rem 1.1rem;
  font: 600 .78rem/1 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: .5;
  transition: opacity .2s var(--ease);
}
.tbc-toggle:hover { opacity: 1; }
body.show-tbc .tbc-toggle { opacity: 1; background: var(--amber); border-color: var(--amber); }

/* --------------------------------------------------------------------------
   20. Entrance animation
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   21. Print
   -------------------------------------------------------------------------- */

@media print {
  .topbar, .site-header, .site-footer, .cta-band, .tbc-toggle, .drawer { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1rem; }
  a::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}