/* ==========================================================================
   BLACKWOOD & SLAUGHTER
   Design system: black stone, bronze rule, monumental serif.
   ========================================================================== */

:root {
  /* Ground */
  --ink:        #08090a;
  --ink-2:      #0c0d0f;
  --ink-3:      #121316;
  --ink-4:      #1a1b1f;
  --line:       rgba(176, 141, 87, 0.20);
  --line-soft:  rgba(237, 230, 218, 0.09);

  /* Metal */
  --bronze:     #b08d57;
  --bronze-lt:  #c9a976;
  --bronze-dk:  #7d6339;

  /* Type */
  --cream:      #ede6da;
  --cream-dim:  #b9b2a7;
  --muted:      #857f76;

  --serif: "Source Serif 4", "Charter", "Georgia", "Times New Roman", serif;
  --display: "Fraunces", "Source Serif 4", "Georgia", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --gut:   clamp(1.25rem, 4vw, 3.5rem);
  --maxw:  1360px;
  --ease:  cubic-bezier(0.22, 1, 0.36, 1);

  --hdr-h: 84px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + 24px);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream-dim);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--bronze); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--bronze-lt);
  outline-offset: 3px;
}

/* ---------------------------------------------------------- typography -- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--cream);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}

/* The hero headline only. Fraunces at its display optical size has far heavier
   stems than Source Serif and reads as carved rather than typeset, which is
   the whole point of that line. WONK 0 turns off its angled terminals, which
   are charming and entirely wrong for a litigation firm. It carries a true
   italic, so the bronze "is not" is a real italic and not a faked slant, which
   ruled out most of the heavier alternatives. */
.display {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  font-size: clamp(2.8rem, 7.9vw, 7.1rem);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.022em;
}

.h1 { font-size: clamp(2.3rem, 5.6vw, 4.6rem); }
.h2 { font-size: clamp(1.9rem, 4vw, 3.35rem); }
.h3 { font-size: clamp(1.3rem, 2.1vw, 1.75rem); letter-spacing: -0.01em; }

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

.lede {
  font-size: clamp(1.06rem, 1.55vw, 1.28rem);
  line-height: 1.72;
  color: var(--cream-dim);
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.685rem;
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--bronze);
  margin: 0 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--bronze);
  flex: none;
}
.eyebrow.is-centered { justify-content: center; }
.eyebrow.is-centered::after {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--bronze);
  flex: none;
}

.serif-quote {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.1vw, 2.5rem);
  line-height: 1.32;
  color: var(--cream);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.015em;
}

.amp { font-family: var(--serif); font-style: italic; color: var(--bronze-lt); }

/* --------------------------------------------------------------- layout -- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap--narrow { max-width: 900px; }

.section { padding-block: clamp(4.5rem, 10vw, 9.5rem); position: relative; }
.section--tight { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.section--rule { border-top: 1px solid var(--line-soft); }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* Global film grain + hairline vignette on every surface. */
.grain-layer {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  background-image: url("../img/grain.png?v=52a2da063b");
  background-size: 220px;
  opacity: 0.032;
  mix-blend-mode: screen;
}
.grain-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, transparent 42%, rgba(0,0,0,0.55) 100%);
}

/* --------------------------------------------------------------- topbar -- */
.topbar {
  background: var(--ink-2);
  border-bottom: 1px solid var(--line);
  font-size: 0.7rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
  position: relative;
  z-index: 60;
}
.topbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 40px;
  padding-block: 0.45rem;
}
.topbar__note { display: flex; align-items: center; gap: 0.6rem; }
.topbar__dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--bronze);
  box-shadow: 0 0 0 0 rgba(176,141,87,0.7);
  animation: pulse 2.8s infinite;
  flex: none;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 8px rgba(176,141,87,0); }
  100% { box-shadow: 0 0 0 0 rgba(176,141,87,0); }
}
.topbar__links { display: flex; align-items: center; gap: 1.6rem; }
.topbar a:hover { color: var(--bronze-lt); }
@media (max-width: 860px) {
  .topbar__links { display: none; }
  .topbar__in { justify-content: center; text-align: center; }
}

/* --------------------------------------------------------------- header -- */
.header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(8, 9, 10, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.header.is-stuck {
  background: rgba(8, 9, 10, 0.95);
  border-bottom-color: var(--line);
}

/* Over the video: nothing but the crest, the links and the button. No panel,
   no rule. The bar only materialises once you scroll away from the hero. */
.header--over {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
.header--over.is-stuck {
  position: fixed;
  background: rgba(8, 9, 10, 0.94);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
  animation: dropIn 0.45s var(--ease);
}
@keyframes dropIn { from { transform: translateY(-100%); } to { transform: none; } }

.header--over .nav__link,
.header--over .burger span { text-shadow: 0 1px 12px rgba(0,0,0,0.9); }

/* Three tracks with equal outer columns, so the nav is centred on the page and
   not on whatever gap is left between the crest and the button. Under
   space-between the 60px width difference between those two pushed the nav
   29.9px left of centre at 1440px, which is visible to the naked eye. */
.header__in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  min-height: var(--hdr-h);
  transition: min-height 0.4s var(--ease);
}
.header__in > .brand { justify-self: start; }
.header__in > .nav { justify-self: center; }
.header__in > .header__cta { justify-self: end; }
/* The header is the same height whether or not you have scrolled. The splash
   is where the crest is shown large; by the time it lands the header is
   already in its final, compact form, so scrolling changes nothing but the
   background panel. */
.header--over .header__in,
.header.is-stuck .header__in,
.header--over.is-stuck .header__in {
  min-height: 78px;
  align-items: center;
  padding-top: 0;
}

.brand { display: flex; align-items: center; gap: 0.85rem; flex: none; }
/* The crest contains the firm name already, so it carries the brand alone
   and is sized to be legible rather than decorative. */
/* One size, scrolled or not. Nothing resizes under you as you scroll. */
.brand__crest {
  height: 60px; width: auto;
  filter: drop-shadow(0 3px 18px rgba(0,0,0,0.85));
}
@media (max-width: 700px) {
  .brand__crest { height: 48px; }
}
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--serif);
  font-size: 1.07rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  color: var(--cream);
  text-transform: uppercase;
  white-space: nowrap;
}
.brand__sub {
  font-size: 0.545rem;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-top: 0.34rem;
  font-weight: 500;
  white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: 2.1rem; }
.nav__link {
  font-size: 0.735rem;
  font-weight: 500;
  letter-spacing: 0.185em;
  text-transform: uppercase;
  color: var(--cream-dim);
  position: relative;
  padding-block: 0.6rem;
  transition: color 0.25s;
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--bronze);
  transition: width 0.35s var(--ease);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--cream); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { width: 100%; }

.header__cta { display: flex; align-items: center; gap: 1rem; flex: none; }

@media (max-width: 1120px) {
  .nav { display: none; }
}
/* Small screens: the crest stays large because it is the whole brand now.
   Request Counsel stays too, just tighter. */
@media (max-width: 520px) {
  .header__cta { gap: 0.55rem; }
  .header__cta .btn {
    padding: 0.62rem 0.85rem;
    font-size: 0.55rem;
    letter-spacing: 0.12em;
  }
  .burger { width: 42px; height: 42px; }
  .header--over .header__in { min-height: 66px; }
}

/* ---------------------------------------------------------------- intro -- */
/* The crest is held on black, then flown into the header.

   The splash crest is its OWN element inside the fixed overlay, centred by
   `place-items: center` with no JavaScript measurement. The first version
   posed the real header crest with a transform computed at DOMContentLoaded,
   which meant late layout (webfonts, the hero poster, a scrollbar appearing)
   moved the crest out from under its own pose and it visibly jumped before
   flying. Centring in CSS cannot drift, because nothing is measured until the
   flight starts, by which point layout has settled.

   The background is a separate child so it can fade out while the crest stays
   fully opaque on its way in. */
.intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  pointer-events: none;
  overflow: clip;               /* the flying crest must never add scroll */
}
html.intro-run .intro,
html.intro-fly .intro { display: grid; }

.intro__bg {
  position: absolute;
  inset: 0;
  background: var(--ink);
}
html.intro-fly .intro__bg { opacity: 0; transition: opacity 0.85s var(--ease); }

.intro__crest {
  position: relative;
  /* The splash is the one place the crest is meant to be read, so it is big.
     Bounded on width as well as height so it cannot overflow a short, narrow
     window. */
  height: max(200px, min(50vh, 64vw, 520px));
  width: auto;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  transform-origin: 50% 50%;
  will-change: transform;
}
html.intro-ready .intro__crest { opacity: 1; }
html.intro-fly .intro__crest {
  transition: transform 1.05s cubic-bezier(0.65, 0, 0.25, 1);
}

/* The real crest stays hidden until the flying one lands exactly on top of it,
   so the handover is invisible. No transition: the swap must be instant. */
html.intro-run .brand__crest,
html.intro-fly .brand__crest { opacity: 0; }

/* Nothing else in the header belongs on the splash. */
html.intro-run .nav,
html.intro-run .header__cta { opacity: 0; }
html.intro-fly .nav,
html.intro-fly .header__cta { opacity: 1; transition: opacity 0.8s var(--ease) 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none !important; }
  html.intro-run .brand__crest,
  html.intro-fly .brand__crest { opacity: 1; }
}

/* --------------------------------------------------------------- burger -- */
.burger {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  transition: border-color 0.3s, background 0.3s;
}
.burger:hover { border-color: var(--bronze); background: rgba(176,141,87,0.06); }
.burger span {
  display: block; width: 19px; height: 1.5px;
  background: var(--cream);
  transition: transform 0.35s var(--ease), opacity 0.25s;
}
.burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (max-width: 1120px) { .burger { display: flex; } }

/* --------------------------------------------------------------- drawer -- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--ink);
  padding: 2rem var(--gut) 3rem;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0.4s;
  overflow-y: auto;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 60px; margin-bottom: 2rem;
  border-bottom: 1px solid var(--line-soft); padding-bottom: 1.5rem;
}
.drawer__nav { display: flex; flex-direction: column; }
.drawer__link {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 7vw, 2.6rem);
  font-weight: 700;
  color: var(--cream);
  padding-block: 0.72rem;
  border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: baseline; gap: 1rem;
  transition: color 0.25s, padding-left 0.35s var(--ease);
}
.drawer__link:hover { color: var(--bronze-lt); padding-left: 0.6rem; }
.drawer__num {
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--bronze);
  font-weight: 600;
}
.drawer__foot { margin-top: auto; padding-top: 2.5rem; }

/* --------------------------------------------------------------- button -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1.02rem 2.1rem;
  font-size: 0.715rem;
  font-weight: 600;
  letter-spacing: 0.215em;
  text-transform: uppercase;
  border: 1px solid var(--bronze);
  color: var(--cream);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s var(--ease), border-color 0.35s;
  white-space: nowrap;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bronze);
  transform: translateY(101%);
  transition: transform 0.44s var(--ease);
}
.btn:hover { color: var(--ink); }
.btn:hover::before { transform: translateY(0); }

.btn--solid { background: var(--bronze); color: var(--ink); }
.btn--solid::before { background: var(--cream); }
.btn--solid:hover { color: var(--ink); border-color: var(--cream); }

.btn--ghost { border-color: var(--line); color: var(--cream-dim); }
.btn--ghost:hover { border-color: var(--bronze); }

.btn--sm { padding: 0.78rem 1.5rem; font-size: 0.655rem; letter-spacing: 0.18em; }
.btn--wide { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--bronze-lt);
  transition: gap 0.3s var(--ease), color 0.25s;
}
.link-arrow::after {
  content: ""; width: 26px; height: 1px; background: currentColor;
  transition: width 0.3s var(--ease);
}
.link-arrow:hover { color: var(--cream); gap: 1rem; }
.link-arrow:hover::after { width: 36px; }

/* ----------------------------------------------------------------- hero -- */
.hero {
  position: relative;
  min-height: clamp(620px, 94vh, 1020px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  isolation: isolate;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: url("../img/hall.jpg?v=37a7546819") center 50% / cover no-repeat;
  transform: scale(1.06);
  animation: heroDrift 34s var(--ease) infinite alternate;
}

/* Video sits above the still and below the scrim. If it never plays, the
   still underneath is already the same artwork, so nothing looks broken. */
.hero__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
  pointer-events: none;
  border: 0;
}
.hero--video .hero__bg { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}
@keyframes heroDrift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(0, -1.4%, 0); }
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Tuned by measurement, not by eye: the hall has to stay visible while the
     cream headline keeps at least 4.5:1 against the brightest frame behind it. */
  background:
    radial-gradient(72% 62% at 50% 48%, rgba(8,9,10,0.44) 0%, rgba(8,9,10,0.66) 62%, rgba(8,9,10,0.90) 100%),
    linear-gradient(180deg, rgba(8,9,10,0.80) 0%, rgba(8,9,10,0.30) 20%, rgba(8,9,10,0.48) 45%, rgba(8,9,10,0.46) 70%, rgba(8,9,10,0.80) 90%, var(--ink) 100%);
}
/* Top padding clears the absolutely positioned header sitting over the video.
   Bottom padding guarantees the buttons never sit flush against the practice
   rail on short viewports, where the rail's auto margin collapses to zero. */
.hero__in {
  padding-block: clamp(11rem, 25vh, 15rem) clamp(3rem, 6vh, 4.5rem);
  text-align: center;
}

/* The arcade sits directly behind the headline, so the type carries its own
   shadow rather than hiding the architecture under a heavier scrim. */
.hero__title {
  margin-bottom: 1.9rem;
  text-shadow: 0 2px 40px rgba(0,0,0,0.85), 0 1px 4px rgba(0,0,0,0.55);
}
.hero__lede, .hero__in .eyebrow { text-shadow: 0 1px 18px rgba(0,0,0,0.9); }
.hero__title .line { display: block; }
.hero__title .thin {
  font-weight: 400;
  font-style: italic;
  color: var(--bronze-lt);
  letter-spacing: -0.01em;
}
.hero__lede {
  /* Wider measure so the sentence breaks into three even lines instead of
     stranding "bet-" on the end of line one. */
  max-width: 62ch;
  margin-inline: auto;
  font-size: clamp(1.02rem, 1.45vw, 1.19rem);
  line-height: 1.78;
  color: var(--cream-dim);
  text-wrap: pretty;
}
.nobr { white-space: nowrap; }

/* The closing line earns its own row and a little more presence. */
.hero__punch {
  display: block;
  margin-top: 0.85rem;
  color: var(--cream);
  font-weight: 500;
  letter-spacing: 0.005em;
}

.hero__actions {
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: center; margin-top: 3.4rem;
}

/* Practice rail pinned to the base of the hero (mirrors the reference). */
.hero__rail {
  margin-top: auto;
  border-top: 1px solid var(--line);
  background: rgba(8, 9, 10, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero__rail-in {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.rail__item {
  padding: 1.65rem 1.2rem;
  text-align: center;
  border-left: 1px solid var(--line-soft);
  font-size: 0.665rem;
  font-weight: 600;
  letter-spacing: 0.185em;
  text-transform: uppercase;
  color: var(--cream-dim);
  transition: background 0.35s, color 0.3s;
  position: relative;
}
.rail__item:first-child { border-left: 0; }
.rail__item::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 100%; height: 2px;
  background: var(--bronze);
  transform: scaleX(0);
  transition: transform 0.4s var(--ease);
}
.rail__item:hover { background: rgba(176,141,87,0.07); color: var(--cream); }
.rail__item:hover::before { transform: scaleX(1); }

@media (max-width: 900px) {
  .hero__rail-in { grid-template-columns: repeat(2, 1fr); }
  .rail__item { border-top: 1px solid var(--line-soft); }
  .rail__item:nth-child(odd) { border-left: 0; }
}
@media (max-width: 480px) {
  .hero__rail-in { grid-template-columns: 1fr; }
  .rail__item { border-left: 0; }
}

/* -------------------------------------------------------------- doctrine -- */
/* `overflow: clip` rather than `hidden`: hidden makes this a scroll container,
   which silently kills `position: sticky` on .doctrine__aside inside it. clip
   contains the decorative mark without that side effect. */
.doctrine { position: relative; overflow: clip; }
.doctrine__mark {
  position: absolute;
  right: -6%;
  top: 50%;
  transform: translateY(-50%);
  width: min(700px, 62vw);
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
  animation: slowSpin 120s linear infinite;
}
@keyframes slowSpin { to { transform: translateY(-50%) rotate(360deg); } }
.doctrine__in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
@media (max-width: 900px) { .doctrine__in { grid-template-columns: 1fr; } }

.doctrine__aside { position: sticky; top: calc(var(--hdr-h) + 40px); }
@media (max-width: 900px) { .doctrine__aside { position: static; } }

.pillars { margin-top: 3rem; display: grid; gap: 0; }
.pillar {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 1.5rem;
  padding-block: 2rem;
  border-top: 1px solid var(--line-soft);
  align-items: start;
}
.pillar:last-child { border-bottom: 1px solid var(--line-soft); }
.pillar__num {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--bronze);
  line-height: 1;
  padding-top: 0.2rem;
}
.pillar h3 { margin-bottom: 0.65rem; }

/* -------------------------------------------------------------- practice -- */
.practice__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  flex-wrap: wrap;
}

.pgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-soft);
  border-left: 1px solid var(--line-soft);
}
@media (max-width: 960px) { .pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .pgrid { grid-template-columns: 1fr; } }

.pcard {
  position: relative;
  padding: clamp(1.9rem, 3vw, 2.6rem);
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  min-height: 268px;
  overflow: hidden;
  isolation: isolate;
  transition: background 0.4s var(--ease);
}
.pcard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(155deg, rgba(176,141,87,0.10), transparent 62%);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.pcard:hover::before { opacity: 1; }
.pcard::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--bronze);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.pcard:hover::after { transform: scaleX(1); }

.pcard__num {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--bronze);
  margin-bottom: 1.6rem;
}
.pcard__icon { width: 34px; height: 34px; stroke: var(--bronze); fill: none;
  stroke-width: 1.25; margin-bottom: 1.25rem; opacity: 0.9;
  transition: transform 0.5s var(--ease); }
.pcard:hover .pcard__icon { transform: translateY(-4px); }
.pcard h3 { font-size: 1.32rem; margin-bottom: 0.7rem; }
.pcard p { font-size: 0.92rem; line-height: 1.65; color: var(--muted); }
.pcard__go {
  margin-top: auto;
  padding-top: 1.5rem;
  font-size: 0.63rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bronze-lt);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.pcard:hover .pcard__go { opacity: 1; transform: none; }
@media (hover: none) { .pcard__go { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- bands -- */
.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.band__bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
}
.band__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--ink) 0%, rgba(8,9,10,0.78) 32%,
              rgba(8,9,10,0.78) 68%, var(--ink) 100%);
}
.band--colonnade .band__bg { background-image: url("../img/colonnade.jpg?v=e848703d5e"); }
.band--marble   .band__bg { background-image: url("../img/band-marble.jpg?v=40f5d4ce35"); }

/* -------------------------------------------------------------- counsel -- */
.counsel__row {
  display: grid;
  grid-template-columns: 76px 1.1fr 1.4fr auto;
  gap: 1.5rem;
  align-items: center;
  padding-block: 1.85rem;
  border-top: 1px solid var(--line-soft);
  transition: padding-left 0.4s var(--ease), background 0.4s;
}
.counsel__row:last-child { border-bottom: 1px solid var(--line-soft); }
.counsel__row:hover { padding-left: 1rem; background: rgba(176,141,87,0.04); }
.counsel__num {
  font-size: 0.62rem; letter-spacing: 0.22em; color: var(--bronze); font-weight: 600;
}
.counsel__name {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.62rem);
  font-weight: 700;
  color: var(--cream);
  letter-spacing: -0.01em;
}
.counsel__role {
  font-size: 0.83rem;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.counsel__mark { font-size: 0.62rem; letter-spacing: 0.2em; color: var(--bronze-lt);
  text-transform: uppercase; }
@media (max-width: 800px) {
  .counsel__row { grid-template-columns: 52px 1fr; gap: 0.4rem 1rem; }
  .counsel__mark { display: none; }
  .counsel__role { grid-column: 2; }
}

/* --------------------------------------------------------------- juris -- */
.jgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line-soft); border: 1px solid var(--line-soft); }
@media (max-width: 860px) { .jgrid { grid-template-columns: repeat(2, 1fr); } }
.jcell {
  background: var(--ink);
  padding: 1.7rem 1.4rem;
  text-align: center;
  transition: background 0.35s, color 0.3s;
}
.jcell:hover { background: var(--ink-3); }
.jcell__name {
  font-family: var(--serif); font-size: 1.06rem; font-weight: 700; color: var(--cream);
}
.jcell__sub { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); margin-top: 0.5rem; }

/* ------------------------------------------------------------- callout -- */
.callout { text-align: center; }
.callout .btn { margin-top: 2.6rem; }
.callout__rule {
  width: 1px; height: 68px;
  background: linear-gradient(transparent, var(--bronze));
  margin: 0 auto 2.2rem;
}

/* --------------------------------------------------------------- forms -- */
.contact__in {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
@media (max-width: 940px) { .contact__in { grid-template-columns: 1fr; } }

.cdetail { padding-block: 1.5rem; border-top: 1px solid var(--line-soft); }
.cdetail:first-of-type { border-top: 0; padding-top: 0; }
.cdetail__k {
  font-size: 0.61rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--bronze); margin-bottom: 0.6rem; font-weight: 600;
}
.cdetail__v { font-size: 1.02rem; color: var(--cream); line-height: 1.6; }
.cdetail__v a:hover { color: var(--bronze-lt); }

.form {
  border: 1px solid var(--line);
  background: var(--ink-2);
  padding: clamp(1.7rem, 3.4vw, 3rem);
}
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 620px) { .form__grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: 0.615rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--bronze); margin-bottom: 0.62rem; font-weight: 600;
}
.field label .req { color: var(--cream-dim); }
.field input, .field select, .field textarea {
  background: var(--ink);
  border: 1px solid var(--line-soft);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 0.92rem 1rem;
  transition: border-color 0.3s, background 0.3s;
  width: 100%;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b08d57' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
}
.field textarea { resize: vertical; min-height: 132px; line-height: 1.65; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--bronze); background: var(--ink-3);
}
.field input::placeholder, .field textarea::placeholder { color: #807a72; }
.field.is-error input, .field.is-error select, .field.is-error textarea {
  border-color: #a4553f;
}
.field__err {
  font-size: 0.72rem; color: #c47a63; margin-top: 0.45rem;
  min-height: 0; display: none;
}
.field.is-error .field__err { display: block; }

.consent {
  grid-column: 1 / -1;
  display: flex; gap: 0.85rem; align-items: flex-start;
  font-size: 0.79rem; line-height: 1.6; color: var(--muted);
}
.consent input { width: 17px; height: 17px; flex: none; margin-top: 0.22rem;
  accent-color: var(--bronze); }
.consent a { color: var(--bronze-lt); text-decoration: underline;
  text-underline-offset: 3px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__note {
  grid-column: 1 / -1;
  font-size: 0.74rem;
  line-height: 1.62;
  color: var(--muted);
  border-left: 2px solid var(--bronze-dk);
  padding-left: 1rem;
}
.form__status {
  grid-column: 1 / -1;
  display: none;
  padding: 1rem 1.2rem;
  font-size: 0.88rem;
  border: 1px solid var(--line);
}
.form__status.is-ok { display: block; border-color: var(--bronze);
  background: rgba(176,141,87,0.09); color: var(--cream); }
.form__status.is-bad { display: block; border-color: #a4553f;
  background: rgba(164,85,63,0.10); color: #dda893; }

.btn[disabled] { opacity: 0.55; pointer-events: none; }

/* -------------------------------------------------------------- footer -- */
.footer {
  border-top: 1px solid var(--line);
  background: var(--ink-2);
  position: relative;
  overflow: hidden;
}
.footer__wash {
  position: absolute; inset: 0; pointer-events: none;
  background: url("../img/guilloche.png?v=42f211c2e2") center -30% / 780px no-repeat;
  opacity: 0.05;
}
.footer__top {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
@media (max-width: 940px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__top { grid-template-columns: 1fr; } }

.footer__brand .brand__crest { height: 92px; }
.footer__blurb { margin-top: 1.6rem; font-size: 0.9rem; color: var(--muted);
  max-width: 34ch; line-height: 1.72; }

.fcol__h {
  font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--bronze); margin-bottom: 1.4rem; font-weight: 600;
}
.fcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.72rem; }
.fcol a { font-size: 0.885rem; color: var(--cream-dim); transition: color 0.25s, padding-left 0.3s var(--ease); }
.fcol a:hover { color: var(--bronze-lt); padding-left: 4px; }

.footer__legal {
  position: relative;
  border-top: 1px solid var(--line-soft);
  padding-block: 2.4rem;
  font-size: 0.755rem;
  line-height: 1.75;
  /* 5.2:1 on --ink-2. These are the mandated notices; they have to be legible. */
  color: #8a847a;
}
.footer__legal p { margin-bottom: 0.9rem; }
.footer__legal strong { color: var(--cream-dim); font-weight: 600; letter-spacing: 0.04em; }
.footer__legal a { color: var(--bronze-lt); text-decoration: underline; text-underline-offset: 3px; }
.footer__legal a:hover { color: var(--bronze-lt); }

.footer__bar {
  position: relative;
  border-top: 1px solid var(--line-soft);
  padding-block: 1.6rem;
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: center; justify-content: space-between;
  font-size: 0.72rem; color: var(--muted);
  letter-spacing: 0.06em;
}
.footer__bar nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.footer__bar a:hover { color: var(--bronze-lt); }

/* ------------------------------------------------------------ legal doc -- */
.doc { padding-block: clamp(3rem, 7vw, 6rem); }
.doc__body { max-width: 780px; }
.doc__body h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  margin: 3rem 0 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-soft);
}
.doc__body h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 2rem; }
.doc__body h3 { font-size: 1.1rem; margin: 1.8rem 0 0.7rem; color: var(--bronze-lt); }
.doc__body p, .doc__body li { font-size: 0.955rem; line-height: 1.82; }
.doc__body ul, .doc__body ol { padding-left: 1.3rem; margin: 0 0 1.15em; }
.doc__body li { margin-bottom: 0.55rem; }
.doc__body a { color: var(--bronze-lt); text-decoration: underline; text-underline-offset: 3px; }
.doc__meta {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin-top: 1.2rem;
}

.pagehead {
  position: relative;
  isolation: isolate;
  padding-block: clamp(4rem, 9vw, 7.5rem);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
.pagehead__bg {
  position: absolute; inset: 0; z-index: -2;
  background: url("../img/band-marble.jpg?v=40f5d4ce35") center / cover;
  opacity: 0.55;
}
.pagehead__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8,9,10,0.86), var(--ink));
}
.crumbs {
  font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1.6rem;
}
.crumbs a:hover { color: var(--bronze-lt); }
.crumbs span { color: var(--bronze); margin-inline: 0.55rem; }

/* --------------------------------------------------------------- reveal -- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

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

/* --------------------------------------------------------------- print -- */
@media print {
  .header, .drawer, .grain-layer, .hero__bg, .hero__video, .burger { display: none !important; }
  body { background: #fff; color: #000; }
  h1, h2, h3 { color: #000; }
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--bronze); color: var(--ink);
  padding: 0.9rem 1.4rem; font-size: 0.7rem; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 600;
}
.skip:focus { left: 0; }