/* ==========================================================================
   WHITMORE & VANCE LLP — style.css  (v3: ink, bone & one accent)
   --------------------------------------------------------------------------
   One stylesheet for the whole site. Mobile-first: base rules target phones,
   then two breakpoints layer on (768px tablet, 1024px desktop) plus a wide
   refinement at 1280px.

   DESIGN SYSTEM IN ONE PARAGRAPH
   Warm bone paper is the main surface; ink is reserved for moments (hero,
   closing call to action, footer). One accent, navy, is used
   sparingly: the ampersand, small markers, hover states and focus.
   Three typefaces, each with one job:
     Cormorant Garamond  display only (wordmark, page titles, big figures)
     Instrument Sans     headlines and interface (nav, labels, buttons)
     Newsreader          reading text (paragraphs, leads, legal copy)

   CONTENTS
   01  Fonts
   02  Design tokens
   03  Reset & base elements
   04  Section themes (dark / light / paper): colour flows through CSS
       variables so every component adapts to the section it sits in
   05  Layout helpers
   06  Typography components
   07  Buttons & links
   08  Paper grain overlay
   09  Preloader (animated W&V monogram)
   10  Page transition veil
   11  Header, desktop navigation, hamburger
   12  Mobile full-screen menu
   13  Home: video hero, marquee, firm split, stats, practice cards,
       principals, closing CTA
   14  Inner page hero + breadcrumb
   15  About page
   16  Practice areas page
   17  Attorneys page
   18  Contact page (form, office details, map)
   19  Legal pages
   20  404 page
   21  Footer
   22  Scroll reveal & parallax states
   23  Reduced motion
   ========================================================================== */


/* ==========================================================================
   01  FONTS
   Self-hosted variable fonts (latin subset), so no third-party requests.
   ========================================================================== */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
}
/* Instrument Sans has a width axis: headlines use a slightly condensed cut */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
}
/* Newsreader, text optical size (16pt master), weights 300–500 */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/newsreader-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/newsreader-italic-latin.woff2") format("woff2");
}


/* ==========================================================================
   02  DESIGN TOKENS
   ========================================================================== */
:root {
  /* Palette */
  --ink: #111110;          /* near-black with a warm cast            */
  --graphite: #1C1B19;     /* footer, secondary dark surface          */
  --bone: #EEEAE3;         /* main light surface                      */
  --paper: #F6F3EE;        /* lighter alternate surface               */
  --stone: #5F5B54;        /* muted text on light (5.6:1 on bone)     */
  /* THE ACCENT: change these two values to re-colour the whole site.
     Every tint, glow and hover is derived from them with color-mix(). */
  --navy: #1F3461;          /* the brand accent: 10.2:1 on bone            */
  --accent-light: var(--navy);
  /* On ink, navy is unreadable (1.9:1), so accent details on dark surfaces
     are ivory. There is deliberately no light-blue tint anywhere. */
  --accent-dark: var(--bone);
  --error: #A3321F;

  /* Type */
  --font-display: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --font-head: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Newsreader", Georgia, "Times New Roman", serif;

  --fs-hero: clamp(3.3rem, 11vw, 10.75rem);
  --fs-display: clamp(2.9rem, 7.4vw, 6.75rem);
  --fs-h2: clamp(2.1rem, 4.4vw, 3.9rem);
  --fs-h3: clamp(1.35rem, 1.9vw, 1.65rem);
  --fs-lead: clamp(1.3rem, 1.9vw, 1.6rem);
  --fs-body: 1.125rem;
  --fs-ui: 0.9375rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  /* Space */
  --gutter: clamp(1.25rem, 4.5vw, 3.5rem);
  --container: 1320px;
  --section-y: clamp(5rem, 11vw, 10rem);
  --header-h: 72px;

  /* Motion — one easing family keeps every effect feeling related */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Default (dark) theme — overridden per section in 04 */
  --bg: var(--ink);
  --fg: var(--bone);
  --fg-body: rgba(238, 234, 227, 0.8);
  --fg-muted: rgba(238, 234, 227, 0.6);
  --accent: var(--accent-dark);
  --line: rgba(238, 234, 227, 0.14);
  --line-strong: rgba(238, 234, 227, 0.3);
}

@media (min-width: 1024px) {
  :root { --header-h: 84px; }
}


/* ==========================================================================
   03  RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  background: var(--ink);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bone);
  color: var(--fg-body);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  overflow-x: clip;
}

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

h1, h2, h3, h4 {
  margin: 0;
  color: var(--fg);
  font-family: var(--font-head);
  font-weight: 500;
  font-stretch: 88%;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

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

a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

::selection { background: var(--accent-light); color: var(--bone); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
main:focus { outline: none; }

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1100;
  padding: 0.75rem 1.25rem;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-head);
  font-size: var(--fs-small);
  font-weight: 500;
  transform: translateY(-200%);
  transition: transform 0.3s var(--ease-out);
}
.skip-link:focus { transform: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.icon { width: 1.25rem; height: 1.25rem; flex: none; }
.icon--lg { width: 2.75rem; height: 2.75rem; }


/* ==========================================================================
   04  SECTION THEMES
   Components read only the variables (--fg, --accent, --line …), so the
   same heading, link or card works on ink, bone and paper.
   ========================================================================== */
.section {
  position: relative;
  padding-block: var(--section-y);
  background: var(--bg);
  color: var(--fg-body);
}

.section--light,
.section--paper {
  --bg: var(--bone);
  --fg: var(--ink);
  --fg-body: #2B2A27;
  --fg-muted: var(--stone);
  --accent: var(--accent-light);
  --line: rgba(17, 17, 16, 0.13);
  --line-strong: rgba(17, 17, 16, 0.3);
}
.section--paper { --bg: var(--paper); }
.section--dark { --bg: var(--ink); }

.section--tight { padding-block: calc(var(--section-y) * 0.6); }


/* ==========================================================================
   05  LAYOUT HELPERS
   ========================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(900px + var(--gutter) * 2); }

/* Section rule: an editorial hairline across the page with a small label on
   the left and, optionally, a link on the right. It replaces numbered
   eyebrows and gives every section the same quiet, typeset opening. */
.section-rule {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-top: 1rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--line-strong);
}

/* Section head: headline left, supporting sentence right (desktop) */
.section-head {
  display: grid;
  gap: 1.5rem;
  margin-bottom: clamp(2.75rem, 5vw, 4.5rem);
}
.section-head__aside { max-width: 30rem; margin: 0; color: var(--fg-body); }

@media (min-width: 1024px) {
  .section-head {
    grid-template-columns: 1.3fr 1fr;
    align-items: end;
    gap: 4rem;
  }
  .section-head__aside { justify-self: end; }
}


/* ==========================================================================
   06  TYPOGRAPHY COMPONENTS
   ========================================================================== */

/* Small label with an accent square marker */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  color: var(--fg-muted);
  font-family: var(--font-head);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--accent);
}

/* Section headline: condensed grotesk, tight, confident */
.section-title {
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: -0.035em;
}
.section-title + .lead { margin-top: 1.75rem; }

/* Display: Cormorant, reserved for the largest moments */
.display,
.page-hero__title,
.hero__title,
.error-page h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-stretch: normal;
  letter-spacing: -0.02em;
}
.display { font-size: var(--fs-display); line-height: 0.95; }
.display em,
.page-hero__title em,
.error-page h1 em { font-style: italic; }

/* Lead paragraph: larger reading text for opening statements */
.lead {
  font-family: var(--font-text);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.38;
  letter-spacing: -0.005em;
  color: var(--fg);
}

.disclaimer {
  margin-top: 1rem;
  font-family: var(--font-head);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--fg-muted);
}

.link-inline {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.3s;
}
.link-inline:hover { color: var(--accent); }


/* ==========================================================================
   07  BUTTONS & LINKS
   ========================================================================== */

/* Solid button. On hover an accent panel wipes in from the left behind the
   label (a transformed pseudo-element, so it runs on the compositor). */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--bone);
  --btn-hover: var(--accent-light);
  --btn-fg-hover: var(--bone);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.9rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-head);
  font-size: var(--fs-ui);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s var(--ease-out);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-hover);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.6s var(--ease-out);
}
.btn:hover,
.btn:focus-visible { color: var(--btn-fg-hover); }
.btn:hover::before,
.btn:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
.btn .icon { width: 1.1rem; height: 1.1rem; transition: transform 0.5s var(--ease-out); }
.btn:hover .icon { transform: translateX(4px); }

/* Light button for dark surfaces */
.btn--light {
  --btn-bg: var(--bone);
  --btn-fg: var(--ink);
  --btn-hover: var(--navy);
  --btn-fg-hover: var(--bone);
}

/* Text link with arrow; the underline grows from the left on hover */
.link-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding-bottom: 0.3rem;
  color: var(--fg);
  font-family: var(--font-head);
  font-size: var(--fs-ui);
  font-weight: 500;
  line-height: 1.2;
  transition: color 0.3s;
}
.link-arrow::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.3);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}
.link-arrow .icon { width: 1rem; height: 1rem; transition: transform 0.5s var(--ease-out); }
.link-arrow:hover { color: var(--accent); }
.link-arrow:hover::after,
a:hover > .link-arrow::after { transform: scaleX(1); }
.link-arrow:hover .icon,
a:hover > .link-arrow .icon { transform: translateX(4px); }


/* ==========================================================================
   08  PAPER GRAIN
   A static tiled noise layer gives the bone surfaces the tooth of real
   paper. One fixed layer, no animation, so it costs nothing per frame.
   ========================================================================== */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ==========================================================================
   09  PRELOADER
   Each glyph of the W&V monogram is a path with pathLength="1"; animating
   stroke-dashoffset 1 → 0 draws its outline. Glyphs start 0.15s apart, the
   fill blooms in, an accent hairline extends below, then JS fades the overlay
   at ~2s. Shown once per visit. Without JS it never shows; if JS fails it
   hides itself after 6s.
   ========================================================================== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  background: var(--ink);
  transition: opacity 0.6s var(--ease-in-out), visibility 0s linear 0.6s;
}
.js:not(.intro-seen) .preloader {
  display: flex;
  animation: preloader-failsafe 0.6s ease 6s forwards;
}
.preloader.is-done { opacity: 0; visibility: hidden; }

.preloader__mark .monogram {
  width: clamp(150px, 26vw, 240px);
  height: auto;
  overflow: visible;
}
.preloader .monogram__glyph {
  fill: var(--bone);
  fill-opacity: 0;
  stroke: var(--bone);
  stroke-width: 0.55;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation:
    mono-draw 1.5s var(--ease-in-out) forwards,
    mono-fill 0.7s ease 1.3s forwards;
}
.preloader .monogram__glyph--2 {
  fill: var(--accent-dark);
  stroke: var(--accent-dark);
  animation-delay: 0.15s, 1.4s;
}
.preloader .monogram__glyph--3 { animation-delay: 0.3s, 1.5s; }

.preloader__rule {
  display: block;
  width: 7.5rem;
  height: 1px;
  background: var(--accent-dark);
  transform: scaleX(0);
  animation: rule-grow 1.2s var(--ease-out) 0.6s forwards;
}
.preloader__caption {
  margin: 0;
  color: rgba(238, 234, 227, 0.6);
  font-family: var(--font-head);
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0;
  animation: fade-in 0.8s ease 0.9s forwards;
}

@keyframes mono-draw { to { stroke-dashoffset: 0; } }
@keyframes mono-fill { to { fill-opacity: 1; } }
@keyframes rule-grow { to { transform: scaleX(1); } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes preloader-failsafe { to { opacity: 0; visibility: hidden; } }


/* ==========================================================================
   10  PAGE TRANSITION VEIL
   An ink layer that fades OUT when a page is ready and IN when an internal
   link is followed (.is-leaving, set by script.js): a soft dissolve between
   pages on every browser.
   ========================================================================== */
.page-veil {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: var(--ink);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s var(--ease-in-out);
}
.js.intro-seen:not(.is-ready) .page-veil { opacity: 1; animation: preloader-failsafe 0.4s ease 4s forwards; }
.js.is-leaving .page-veil { opacity: 1; animation: none; }


/* ==========================================================================
   11  HEADER
   Transparent over the hero; once the hero has scrolled away it becomes a
   blurred ink bar (.is-solid). Scrolling down tucks it away (.is-hidden);
   any upward scroll brings it back.
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 800;
  height: var(--header-h);
  color: var(--bone);
  border-bottom: 1px solid transparent;
  transition:
    background-color 0.5s var(--ease-out),
    border-color 0.5s var(--ease-out),
    transform 0.6s var(--ease-out);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -40%;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(17, 17, 16, 0.5), transparent);
  transition: opacity 0.5s;
  pointer-events: none;
}
.site-header.is-solid {
  background-color: rgba(17, 17, 16, 0.86);
  border-bottom-color: rgba(238, 234, 227, 0.08);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
}
.site-header.is-solid::before { opacity: 0; }
.site-header.is-hidden { transform: translateY(-100%); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 100%;
  max-width: calc(1500px + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Wordmark: Cormorant capitals with an accent italic ampersand + small LLP */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-right: auto;
  color: var(--bone);
  white-space: nowrap;
}
.brand__name {
  font-family: var(--font-display);
  font-size: clamp(0.98rem, 1.6vw, 1.35rem);
  font-weight: 500;
  letter-spacing: clamp(0.14em, 1vw, 0.2em);
  text-transform: uppercase;
  line-height: 1;
}
.brand__name em { font-style: italic; font-weight: 400; color: var(--accent-dark); text-transform: none; letter-spacing: 0; }
.brand__llp {
  padding-left: 0.5rem;
  border-left: 1px solid rgba(238, 234, 227, 0.3);
  font-family: var(--font-head);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: rgba(238, 234, 227, 0.75);
  line-height: 1;
}

/* Desktop navigation (hidden below 1024px) */
.site-nav { display: none; }
.site-nav__list { display: flex; gap: clamp(1.5rem, 2.6vw, 2.5rem); }
.site-nav__link {
  position: relative;
  display: block;
  padding-block: 0.4rem;
  font-family: var(--font-head);
  font-size: var(--fs-ui);
  font-weight: 450;
  color: rgba(238, 234, 227, 0.8);
  transition: color 0.3s;
}
/* Clay underline draws in from the left on hover / current page */
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent-dark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.site-nav__link:hover,
.site-nav__link[aria-current="page"] { color: var(--bone); }
.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after { transform: scaleX(1); }


/* Hamburger: two hairlines that rotate into an X */
.menu-toggle {
  position: relative;
  z-index: 2;
  display: grid;
  place-content: center;
  gap: 7px;
  width: 48px;
  height: 48px;
  margin-right: -10px;
}
.menu-toggle__bar {
  display: block;
  width: 26px;
  height: 1.5px;
  background: var(--bone);
  transition: transform 0.5s var(--ease-out), width 0.5s var(--ease-out);
}
.menu-toggle__bar:last-child { width: 16px; justify-self: end; }
.menu-toggle:hover .menu-toggle__bar:last-child { width: 26px; }
.menu-open .menu-toggle__bar:first-child { transform: translateY(4.25px) rotate(45deg); }
.menu-open .menu-toggle__bar:last-child { width: 26px; transform: translateY(-4.25px) rotate(-45deg); }
.menu-open .site-header { background-color: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; }

@media (min-width: 1024px) {
  .site-nav { display: block; }
  .menu-toggle { display: none; }
}


/* ==========================================================================
   12  MOBILE MENU
   Full-screen ink panel that unrolls from the top (clip-path); its links
   then rise in one after another.
   ========================================================================== */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 790;
  display: flex;
  background: var(--ink);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.8s var(--ease-in-out), visibility 0s linear 0.8s;
}
.menu-open .mobile-menu {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 0.8s var(--ease-in-out), visibility 0s;
}
.menu-open body { overflow: hidden; }

.mobile-menu__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2.5rem;
  overflow-y: auto;
}
.mobile-menu__list li {
  border-bottom: 1px solid rgba(238, 234, 227, 0.1);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.4s, transform 0.4s;
}
.menu-open .mobile-menu__list li {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: calc(0.3s + var(--i, 0) * 0.07s);
}
.mobile-menu__list li:nth-child(1) { --i: 0; }
.mobile-menu__list li:nth-child(2) { --i: 1; }
.mobile-menu__list li:nth-child(3) { --i: 2; }
.mobile-menu__list li:nth-child(4) { --i: 3; }
.mobile-menu__list li:nth-child(5) { --i: 4; }

.mobile-menu__list a {
  display: block;
  padding-block: 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 9vw, 3.25rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--bone);
  transition: color 0.3s, padding 0.5s var(--ease-out);
}
.mobile-menu__list a:hover,
.mobile-menu__list a[aria-current="page"] { color: var(--accent-dark); font-style: italic; padding-left: 0.5rem; }

.mobile-menu__foot {
  display: grid;
  gap: 0.3rem;
  margin-top: 3rem;
  font-family: var(--font-head);
  font-size: var(--fs-ui);
  color: rgba(238, 234, 227, 0.6);
  opacity: 0;
  transition: opacity 0.4s;
}
.mobile-menu__foot a { color: var(--bone); }
.mobile-menu__foot p { margin-top: 0.75rem; }
.menu-open .mobile-menu__foot { opacity: 1; transition: opacity 1s ease 0.75s; }

@media (min-width: 1024px) {
  .mobile-menu { display: none; }
}


/* ==========================================================================
   13  HOME PAGE
   ========================================================================== */

/* ---- 13a  Video hero ---------------------------------------------------
   The film is graded warm monochrome at encode time. On top: a slow
   push-in (transform only, GPU), a bottom-up ink gradient and a soft
   vignette for legibility, and the page grain. */
.hero {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 7rem;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
  color: var(--bone);
}
.hero__media,
.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--ink);
}
.hero__video,
.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 55% 45%;
  animation: push-in 30s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes push-in {
  from { transform: scale(1.02); }
  to   { transform: scale(1.12) translate3d(-1%, -0.6%, 0); }
}

.hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 55% at 50% 50%, rgba(17, 17, 16, 0.35), transparent 100%),
    radial-gradient(ellipse at 50% 48%, rgba(17, 17, 16, 0.25) 20%, rgba(17, 17, 16, 0.75) 100%),
    linear-gradient(to top, rgba(17, 17, 16, 0.96) 0%, rgba(17, 17, 16, 0.6) 35%, rgba(17, 17, 16, 0.45) 65%, rgba(17, 17, 16, 0.65) 100%);
}

.hero__content {
  align-self: center;
  justify-self: center;
  display: grid;
  justify-items: center;
  width: 100%;              /* full width: the name at 10.75rem is wider than any
                               fixed cap, and must stay centred on the viewport */
  min-width: 0;
  text-align: center;
}
.hero__kicker {
  margin-bottom: 2rem;
  font-family: var(--font-head);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(238, 234, 227, 0.75);
}

/* H1: the firm name settles from wide letter-spacing + blur into place,
   then "LLP" fades up between two hairlines */
.hero__title {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  font-size: var(--fs-hero);
  line-height: 0.92;
  letter-spacing: -0.015em;
  color: var(--bone);
}
.hero__name { display: block; }
.hero__name em { font-style: italic; color: var(--accent-dark); }
.hero__line { display: block; }
@media (max-width: 767px) {
  .hero__title { font-size: clamp(3.4rem, 18.5vw, 5.5rem); gap: 1.5rem; }
}
@media (min-width: 768px) {
  .hero__name { white-space: nowrap; }
  .hero__line { display: inline; }
}
.hero__llp {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  margin-right: -0.5em; /* optical: trailing letter-spacing */
  font-family: var(--font-head);
  font-size: clamp(0.72rem, 1vw, 0.82rem);
  font-weight: 500;
  letter-spacing: 0.5em;
  color: rgba(238, 234, 227, 0.8);
}
.hero__llp::before,
.hero__llp::after {
  content: "";
  width: clamp(2.5rem, 6vw, 4.5rem);
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.hero__tagline {
  max-width: 32rem;
  margin: 2.25rem 0 2.5rem;
  font-family: var(--font-text);
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.4;
  color: rgba(238, 234, 227, 0.88);
}

/* Entrance choreography (runs when script.js adds .is-ready to <html>) */
.js .hero__kicker,
.js .hero__llp,
.js .hero__tagline,
.js .hero__cta,
.js .hero__meta,
.js .scroll-cue,
.js .video-toggle { opacity: 0; transform: translateY(18px); }
.js .hero__name { opacity: 0; letter-spacing: 0.12em; filter: blur(12px); }
@media (min-width: 768px) { .js .hero__name { letter-spacing: 0.22em; } }

.is-ready .hero__name {
  opacity: 1;
  letter-spacing: -0.015em;
  filter: blur(0);
  transition: opacity 1.6s ease, letter-spacing 2.2s var(--ease-out), filter 1.6s ease;
}
.is-ready .hero__kicker,
.is-ready .hero__llp,
.is-ready .hero__tagline,
.is-ready .hero__cta,
.is-ready .hero__meta,
.is-ready .scroll-cue,
.is-ready .video-toggle {
  opacity: 1;
  transform: none;
  transition: opacity 1.2s ease, transform 1.4s var(--ease-out);
}
.is-ready .hero__kicker { transition-delay: 0.2s; }
.is-ready .hero__llp { transition-delay: 1.2s; }
.is-ready .hero__tagline { transition-delay: 1.45s; }
.is-ready .hero__cta { transition-delay: 1.7s; }
.is-ready .hero__meta,
.is-ready .scroll-cue,
.is-ready .video-toggle { transition-delay: 2s; }

/* Bottom row: address left, video control right */
.hero__meta {
  position: absolute;
  left: calc(var(--gutter));
  bottom: clamp(1.75rem, 4vw, 2.75rem);
  display: none;
  font-family: var(--font-head);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  color: rgba(238, 234, 227, 0.6);
}
@media (min-width: 768px) {
  .hero__meta { display: block; }
}

.video-toggle {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(1.5rem, 4vw, 2.5rem);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  font-family: var(--font-head);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  color: rgba(238, 234, 227, 0.65);
  transition: color 0.3s;
}
.video-toggle:hover { color: var(--bone); }
/* Icon: two bars (pause) that become a triangle (play) */
.video-toggle__icon {
  position: relative;
  width: 10px;
  height: 11px;
  border-left: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transition: border-width 0.3s;
}
.video-toggle.is-paused .video-toggle__icon {
  width: 0;
  height: 0;
  border-left: 9px solid currentColor;
  border-right: 0;
  border-top: 5.5px solid transparent;
  border-bottom: 5.5px solid transparent;
}

/* Scroll cue: label + arrow with a slow, subtle bounce */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.75rem, 4vw, 2.75rem);
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  width: 4rem;
  margin-left: -2rem;
  font-family: var(--font-head);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(238, 234, 227, 0.7);
}
.scroll-cue .icon { width: 1.1rem; height: 1.1rem; animation: cue-bounce 2.4s var(--ease-in-out) infinite; }
@keyframes cue-bounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(7px); opacity: 0.5; }
}

/* ---- 13b  Marquee ------------------------------------------------------
   A slow, endless ribbon of the practice areas; the list is duplicated and
   the track translated by -50% for a seamless loop. */
.marquee {
  position: relative;
  padding-block: clamp(1.25rem, 2.6vw, 2rem);
  background: var(--ink);
  border-top: 1px solid rgba(238, 234, 227, 0.1);
  overflow: hidden;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 55s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; }
.marquee__item {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  padding-right: clamp(1.5rem, 3vw, 2.75rem);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  font-weight: 300;
  line-height: 1.1;
  white-space: nowrap;
  color: rgba(238, 234, 227, 0.92);
}
.marquee__item::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-dark);
}
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

/* ---- 13c  Split: text | image -------------------------------------- */
.split {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
}
.split__text .lead { margin-bottom: 1.5rem; }
.split__text > p:not(.lead) { max-width: 36rem; }
@media (min-width: 1024px) {
  .split {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: start;
    gap: clamp(4rem, 8vw, 8rem);
  }
}

/* Image frame with parallax inside */
.frame { position: relative; isolation: isolate; }
.frame__inner {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--graphite);
}
/* Stacked under text (tablet/phone) the feature image goes landscape so it
   doesn't fill a whole screen */
@media (max-width: 1023px) {
  .split__media .frame__inner { aspect-ratio: 4 / 3; }
}
.frame__inner img,
.frame__inner video {
  width: 100%;
  height: 118%;
  object-fit: cover;
  margin-top: -9%;
  will-change: transform;
}

/* Film frame (About): the skyline film in warm monochrome, matching the
   bone page, with a faint navy multiply that only deepens the shadows
   (highlights stay warm, so no blue cast). A soft ink fade at the foot
   keeps the pause control legible. */
.frame--film .frame__video { object-position: 50% 30%; filter: grayscale(1) sepia(0.16) contrast(1.06) brightness(1.03); }
.frame--film .frame__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(17, 17, 16, 0.45), transparent 30%),
    color-mix(in srgb, var(--navy) 16%, transparent);
  mix-blend-mode: multiply;
}
/* Pause control sits inside the frame, bottom-right, above the wash */
.video-toggle--inset {
  z-index: 1;
  right: 1rem;
  bottom: 0.75rem;
  color: rgba(238, 234, 227, 0.85);
}

/* ---- 13d  Stats --------------------------------------------------------
   Three figures that count up when scrolled into view; an accent segment on
   the hairline above each extends as it counts. */
.stats {
  display: grid;
  gap: 2rem;
  margin-top: clamp(3rem, 6vw, 5rem);
}
.stat {
  position: relative;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-strong);
}
.stat::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0.15);
  transform-origin: left;
  transition: transform 2.2s var(--ease-out) 0.2s;
}
.stat.is-visible::before { transform: scaleX(1); }
.stat__value {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-display);
  font-size: clamp(3rem, 5.2vw, 4.5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg);
  font-variant-numeric: lining-nums tabular-nums;
}
.stat__label {
  display: block;
  font-family: var(--font-head);
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--fg-muted);
}
@media (min-width: 768px) {
  .stats { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

/* Band variant (About): centred figures with vertical hairlines */
.stats--band { margin-top: 0; text-align: center; }
.stats--band .stat { border-top: 0; padding: 1.5rem 1rem; }
.stats--band .stat::before { left: 50%; width: 2.5rem; margin-left: -1.25rem; transform-origin: center; }
.stats--band .stat__value { font-size: clamp(3.5rem, 7vw, 6rem); }
@media (min-width: 768px) {
  .stats--band { gap: 0; }
  .stats--band .stat + .stat { border-left: 1px solid var(--line); }
}

/* ---- 13e  Practice cards -----------------------------------------------
   2×2 image cards. Hover: the image slowly zooms, the shade lifts, a fine
   inset frame appears and the title takes the accent. */
.practice-grid {
  display: grid;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
@media (min-width: 768px) {
  .practice-grid { grid-template-columns: repeat(2, 1fr); }
}

.pcard {
  position: relative;
  display: flex;
  min-height: clamp(24rem, 42vw, 34rem);
  overflow: hidden;
  isolation: isolate;
  color: var(--bone);
  background: var(--graphite);
}
.pcard__media { position: absolute; inset: 0; z-index: -2; }
.pcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 1.6s var(--ease-out);
}
.pcard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(17, 17, 16, 0.92) 5%, rgba(17, 17, 16, 0.3) 60%, rgba(17, 17, 16, 0.45));
  transition: opacity 0.8s var(--ease-out);
}
.pcard::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(238, 234, 227, 0.35);
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  pointer-events: none;
}
.pcard:hover .pcard__media img,
.pcard:focus-visible .pcard__media img { transform: scale(1.08); }
.pcard:hover::before,
.pcard:focus-visible::before { opacity: 0.85; }
.pcard:hover::after,
.pcard:focus-visible::after { opacity: 1; transform: none; }

.pcard__body {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.pcard__top { margin-bottom: auto; color: var(--accent-dark); }
.pcard__title {
  margin: 2rem 0 0.75rem;
  font-size: var(--fs-h3);
  color: var(--bone);
  transition: color 0.5s var(--ease-out);
}
.pcard:hover .pcard__title,
.pcard:focus-visible .pcard__title { color: var(--accent-dark); }
.pcard__text {
  max-width: 28rem;
  margin-bottom: 1.5rem;
  font-size: 1.0625rem;
  color: rgba(238, 234, 227, 0.78);
}
.pcard .link-arrow { color: var(--bone); align-self: flex-start; }

/* ---- 13f  Principals / portraits ---------------------------------------
   Studio portraits on a warm stone backdrop; on hover a fine inset line
   draws in from the corner and the portrait gently zooms. */
.principals {
  display: grid;
  gap: 3rem;
}
@media (min-width: 768px) {
  .principals { grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2.5rem); }
}
.principal__link { display: block; }

.portrait {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  margin-bottom: 1.5rem;
  background: var(--graphite);
}
.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.portrait::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  clip-path: inset(0 100% 100% 0);
  transition: clip-path 1s var(--ease-out);
  pointer-events: none;
}
.principal__link:hover .portrait img,
.principal__link:focus-visible .portrait img,
.profile:hover .portrait img { transform: scale(1.04); }
.principal__link:hover .portrait::after,
.principal__link:focus-visible .portrait::after,
.profile:hover .portrait::after { clip-path: inset(0 0 0 0); }

.principal__name {
  margin-bottom: 0.35rem;
  font-size: var(--fs-h3);
  transition: color 0.4s;
}
.principal__link:hover .principal__name { color: var(--accent); }
.principal__role {
  margin-bottom: 0.25rem;
  font-family: var(--font-head);
  font-size: var(--fs-ui);
  color: var(--fg-body);
}
.principal__focus {
  font-family: var(--font-head);
  font-size: var(--fs-small);
  color: var(--fg-muted);
}

/* ---- 13g  Closing CTA --------------------------------------------------
   Ink, a faint stone texture and a giant outlined monogram watermark. */
.cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(7rem, 15vw, 12rem);
  text-align: center;
  background: var(--ink);
  color: var(--bone);
}
.cta__texture { position: absolute; inset: 0; z-index: -3; }
.cta__texture img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(to bottom, var(--ink), transparent 30%, transparent 70%, var(--ink));
}
.cta__mark {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: min(1100px, 120vw);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.cta__mark .monogram { width: 100%; height: auto; overflow: visible; }
.cta__mark .monogram__glyph { fill: none; stroke: var(--bone); stroke-width: 0.2; opacity: 0.14; }
.cta__mark .monogram__glyph--2 { stroke: var(--accent-dark); opacity: 0.3; }
.cta .display { margin-bottom: 1.25rem; color: var(--bone); }
.cta__text {
  max-width: 32rem;
  margin: 0 auto 2.5rem;
  font-size: var(--fs-lead);
  font-style: italic;
  font-weight: 300;
  line-height: 1.4;
  color: rgba(238, 234, 227, 0.82);
}
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.25rem 2.25rem;
}
.cta__email {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--bone);
  transition: color 0.3s;
}
.cta__email:hover { color: var(--bone); text-decoration: underline; text-underline-offset: 4px; }


/* ==========================================================================
   14  INNER PAGE HERO
   Same image treatment as the home hero, shorter, title anchored
   bottom-left with an intro or index on the right.
   ========================================================================== */
.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(28rem, 70vh, 42rem);
  padding: calc(var(--header-h) + 3rem) 0 clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
  color: var(--bone);
}
.page-hero .hero__shade {
  background: linear-gradient(to top, rgba(17, 17, 16, 0.92) 0%, rgba(17, 17, 16, 0.35) 50%, rgba(17, 17, 16, 0.2) 100%);
}
.page-hero__inner { display: grid; gap: 1.75rem; width: 100%; }
.page-hero__title {
  font-size: var(--fs-display);
  line-height: 0.95;
  color: var(--bone);
}
.page-hero__intro {
  max-width: 28rem;
  margin: 0;
  font-size: var(--fs-body);
  color: rgba(238, 234, 227, 0.82);
}
.page-hero__meta {
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--fs-small);
  color: rgba(238, 234, 227, 0.6);
}
@media (min-width: 1024px) {
  .page-hero__inner { grid-template-columns: 1.4fr 1fr; align-items: end; }
  .page-hero__inner > :not(.page-hero__intro):not(.page-hero__index) { grid-column: 1; }
  .page-hero__intro,
  .page-hero__index { grid-column: 2; grid-row: 1 / span 3; align-self: end; justify-self: end; }
}

/* Compact variant (legal pages): no photograph, a faint accent glow */
.page-hero--compact {
  min-height: clamp(22rem, 50vh, 30rem);
  background:
    radial-gradient(ellipse at 90% 0%, color-mix(in srgb, var(--navy) 55%, transparent), transparent 55%),
    var(--ink);
}
.page-hero--compact .page-hero__title { font-size: clamp(2.6rem, 6vw, 5rem); }

/* Breadcrumb */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-size: var(--fs-small);
  color: rgba(238, 234, 227, 0.6);
}
.breadcrumb li + li::before { content: "/"; margin-right: 0.5rem; opacity: 0.5; }
.breadcrumb a { transition: color 0.3s; }
.breadcrumb a:hover { color: var(--accent-dark); }
.breadcrumb [aria-current] { color: var(--bone); }

/* Jump list in the hero (practice areas) */
.page-hero__index {
  display: grid;
  width: 100%;
  max-width: 22rem;
  border-top: 1px solid rgba(238, 234, 227, 0.2);
}
.page-hero__index a {
  display: flex;
  justify-content: space-between;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(238, 234, 227, 0.2);
  font-family: var(--font-head);
  font-size: var(--fs-ui);
  color: rgba(238, 234, 227, 0.88);
  transition: color 0.3s, padding 0.5s var(--ease-out);
}
.page-hero__index a::after { content: "\2193"; opacity: 0.5; }
.page-hero__index a:hover { color: var(--accent-dark); padding-left: 0.4rem; }


/* ==========================================================================
   15  ABOUT PAGE
   ========================================================================== */
.values { display: grid; gap: 2.5rem; }
.value h3 { margin-bottom: 0.75rem; font-size: var(--fs-h3); }
.value p { max-width: 24rem; }
@media (min-width: 768px) {
  .values { grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 4rem); }
}


/* ==========================================================================
   16  PRACTICE AREAS PAGE
   Four sections alternating image left/right; the image stays sticky on
   desktop while the text scrolls past it.
   ========================================================================== */
.practice {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  scroll-margin-top: var(--header-h);
}
.practice + .practice {
  margin-top: var(--section-y);
  padding-top: var(--section-y);
  border-top: 1px solid var(--line);
}
.practice__media .frame__inner { aspect-ratio: 4 / 3; }
.practice__media .frame__inner img { height: 100%; margin-top: 0; transition: transform 1.6s var(--ease-out); }
.practice__media:hover .frame__inner img { transform: scale(1.05); }

.practice__head { margin-bottom: 1.5rem; color: var(--accent); }
.practice__title { margin-bottom: 1.5rem; font-size: var(--fs-h2); line-height: 1; letter-spacing: -0.035em; }
.practice__body .lead { margin-bottom: 1.25rem; }
.practice__body > p:not(.lead) { max-width: 34rem; }

.results { margin-top: 2.25rem; }
.results__title {
  margin-bottom: 0.25rem;
  font-family: var(--font-head);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.results li {
  display: grid;
  gap: 0.15rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
}
.results strong {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--fg);
}
@media (min-width: 768px) {
  .results li { grid-template-columns: 7rem 1fr; gap: 1.25rem; align-items: baseline; }
}
.practice__body .btn { margin-top: 2.25rem; }

@media (min-width: 1024px) {
  .practice {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(4rem, 7vw, 7rem);
    align-items: start;
  }
  .practice__media { position: sticky; top: calc(var(--header-h) + 2rem); }
  .practice--reverse .practice__media { order: 2; }
}


/* ==========================================================================
   17  ATTORNEYS PAGE
   Three concise profile cards side by side.
   ========================================================================== */
.profiles { display: grid; gap: 4rem; }
/* Tablet: one column, portrait on the left and details beside it */
@media (min-width: 768px) and (max-width: 1023px) {
  .profiles { gap: 3.5rem; }
  .profiles .profile {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    grid-auto-rows: min-content;
    column-gap: 2.5rem;
    align-content: start;
  }
  .profiles .profile .portrait { grid-column: 1; grid-row: 1 / span 7; margin-bottom: 0; }
  .profiles .profile > :not(.portrait) { grid-column: 2; }
  .profiles .profile .link-arrow { margin-top: 0.5rem; }
}
@media (min-width: 1024px) {
  .profiles { grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
}
.profile { display: flex; flex-direction: column; scroll-margin-top: calc(var(--header-h) + 1rem); }
.profile__name { margin-bottom: 0.35rem; font-size: clamp(1.6rem, 2.2vw, 1.95rem); }
.profile__role {
  margin-bottom: 0.2rem;
  font-family: var(--font-head);
  font-size: var(--fs-ui);
  color: var(--fg-body);
}
.profile__focus {
  margin-bottom: 1.25rem;
  font-family: var(--font-head);
  font-size: var(--fs-small);
  color: var(--accent);
}
.profile__bio { margin-bottom: 1rem; }
.profile__admitted {
  margin-bottom: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-head);
  font-size: var(--fs-small);
  color: var(--fg-muted);
}
.profile .link-arrow { margin-top: auto; align-self: flex-start; }
/* Side by side, the cards share row tracks (subgrid) so names, roles, bios,
   admissions and email links line up across all three regardless of length. */
@media (min-width: 1024px) {
  .profile {
    display: grid;
    grid-row: span 7;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .profile .link-arrow { margin-top: 0; align-self: end; justify-self: start; }
  .profile__admitted { align-self: start; }
}


/* ==========================================================================
   18  CONTACT PAGE
   ========================================================================== */
.contact { display: grid; gap: clamp(4rem, 7vw, 6rem); }
@media (min-width: 1024px) {
  .contact { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); align-items: start; }
}
.contact__intro { max-width: 34rem; margin: 1.5rem 0 2.75rem; }

/* ---- Form -------------------------------------------------------------- */
.form { display: grid; gap: 1.5rem; }
.form__row { display: grid; gap: 1.5rem; }
@media (min-width: 768px) {
  .form__row { grid-template-columns: 1fr 1fr; }
}
.field { display: grid; gap: 0.5rem; }
.field label,
.field__label {
  font-family: var(--font-head);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--fg);
}
.field label .req { color: var(--accent); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(17, 17, 16, 0.25);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.45);
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { min-height: 10rem; resize: vertical; font-family: var(--font-text); font-size: 1.0625rem; }
.field input::placeholder,
.field textarea::placeholder { color: #8A857C; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: rgba(17, 17, 16, 0.45); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
  background: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-light) 20%, transparent);
}
.field select {
  padding-right: 3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111110' stroke-width='1.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.1rem;
  cursor: pointer;
}

/* Error state: red border + message, announced via aria-describedby */
.field.has-error input,
.field.has-error select,
.field.has-error textarea,
.field.has-error .check__box { border-color: var(--error); }
.field__error {
  display: none;
  margin: 0;
  font-family: var(--font-head);
  font-size: var(--fs-small);
  color: var(--error);
}
.field.has-error .field__error { display: block; animation: rise-in 0.4s var(--ease-out); }
@keyframes rise-in { from { opacity: 0; transform: translateY(6px); } }

/* Consent checkbox */
.field .check,
.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--fg-body);
  cursor: pointer;
}
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  border: 1px solid rgba(17, 17, 16, 0.45);
  background: rgba(255, 255, 255, 0.45);
  transition: border-color 0.3s, background-color 0.3s;
}
.check__box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid var(--bone);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.3s var(--ease-out);
}
.check input:checked + .check__box { background: var(--ink); border-color: var(--ink); }
.check input:checked + .check__box::after { transform: rotate(45deg) scale(1); }
.check input:focus-visible + .check__box { outline: 2px solid var(--accent); outline-offset: 3px; }
.check a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }
.form__note { margin: 0; font-family: var(--font-head); font-size: var(--fs-small); color: var(--fg-muted); }
.form__error { margin: 0; padding: 1rem 1.25rem; border: 1px solid var(--error); color: var(--error); font-family: var(--font-head); font-size: var(--fs-small); }
.form__error[hidden] { display: none; }
/* No-JS confirmations: contact.php redirects to #sent or #form-error */
.form__notice { display: none; margin: 0 0 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--line-strong); background: var(--paper); font-family: var(--font-head); font-size: var(--fs-small); color: var(--fg); }
.form__notice--error { border-color: var(--error); color: var(--error); }
.form__notice:target { display: block; }
.btn[aria-busy="true"] { pointer-events: none; opacity: 0.6; }

.form-success {
  padding: clamp(2rem, 5vw, 3rem);
  border: 1px solid var(--line-strong);
  background: var(--paper);
}
.form-success[hidden] { display: none; }
.form-success .icon { width: 2.5rem; height: 2.5rem; margin-bottom: 1.25rem; color: var(--accent); }
.form-success h2 { margin-bottom: 0.75rem; font-size: var(--fs-h3); }

/* ---- Office details ------------------------------------------------------ */
.info { display: grid; margin-top: 2.25rem; }
.info__block {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--line);
}
.info__block:last-of-type { border-bottom: 1px solid var(--line); }
.info__block > .icon { margin-top: 0.2rem; color: var(--accent); }
.info__label {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--font-head);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.info__value {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--fg);
}
.info__value a { transition: color 0.3s; }
.info__value a:hover { color: var(--accent); }
.info__hours { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 0.1rem 1.5rem; }

/* ---- Map: stylised SVG of University City with a pulsing accent pin -------- */
.map {
  position: relative;
  margin-top: 2.25rem;
  overflow: hidden;
  background: var(--ink);
}
.map svg { width: 100%; height: auto; }
.map__streets path { stroke: rgba(238, 234, 227, 0.12); stroke-width: 1; fill: none; }
.map__streets .major { stroke: rgba(238, 234, 227, 0.26); stroke-width: 1.6; }
.map__river { fill: rgba(238, 234, 227, 0.07); stroke: rgba(238, 234, 227, 0.22); }
.map__park { fill: color-mix(in srgb, var(--accent-dark) 8%, transparent); stroke: color-mix(in srgb, var(--accent-dark) 30%, transparent); }
.map__labels text {
  font-family: var(--font-head);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: rgba(238, 234, 227, 0.55);
}
.map__labels .river-label { fill: rgba(238, 234, 227, 0.6); font-style: italic; font-family: var(--font-text); font-size: 13px; letter-spacing: 0.04em; text-transform: none; }
.map__pin-dot { fill: var(--accent-dark); }
.map__pin-halo { fill: var(--ink); stroke: var(--accent-dark); }
.map__tag { fill: var(--ink); stroke: color-mix(in srgb, var(--accent-dark) 50%, transparent); }
.map__tag-title { fill: var(--accent-dark); }
.map__tag-text { fill: rgba(238, 234, 227, 0.75); }
.map__pin-ring {
  fill: none;
  stroke: var(--accent-dark);
  transform-box: fill-box;
  transform-origin: center;
  animation: pin-pulse 2.8s var(--ease-out) infinite;
}
@keyframes pin-pulse {
  from { transform: scale(0.4); opacity: 1; }
  to { transform: scale(2.6); opacity: 0; }
}
.map .map__link {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  padding: 0.6rem 0.9rem;
  background: var(--bone);
  color: var(--ink);
}
.map .map__link::after { display: none; }
.map .map__link:hover { color: var(--accent-light); }


/* ==========================================================================
   19  LEGAL PAGES
   Comfortable measure (~68 characters), generous leading, sticky table of
   contents on desktop.
   ========================================================================== */
.legal__grid { display: grid; gap: 3rem; }
.legal__toc { padding: 1.5rem; border: 1px solid var(--line); }
.legal__toc-title {
  margin-bottom: 0.75rem;
  font-family: var(--font-head);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.legal__toc ol { display: grid; gap: 0.1rem; counter-reset: toc; }
.legal__toc li { counter-increment: toc; }
.legal__toc a {
  display: grid;
  grid-template-columns: 1.9rem 1fr;
  padding: 0.3rem 0;
  font-family: var(--font-head);
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--fg-muted);
  transition: color 0.3s;
}
.legal__toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-size: 0.72rem;
  color: var(--accent);
  padding-top: 0.1rem;
}
.legal__toc a:hover,
.legal__toc a.is-active { color: var(--fg); }

.legal__body { max-width: 44rem; font-size: 1.0625rem; line-height: 1.72; }
.legal__notice {
  display: inline-block;
  margin-bottom: 2rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line-strong);
  font-family: var(--font-head);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
}
.legal__lede {
  margin-bottom: 2.5rem;
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--fg);
}
.legal__section {
  padding-top: 2.25rem;
  margin-top: 2.25rem;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.legal__section h2 {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-bottom: 1.1rem;
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.legal__num { font-size: 0.8rem; font-weight: 500; letter-spacing: 0; color: var(--accent); }
.legal__section h3 { margin: 1.5rem 0 0.6rem; font-size: 1.05rem; letter-spacing: -0.01em; }
.legal__section ul,
.legal__section ol { margin: 0 0 1.1em; }
.legal__section ul li { position: relative; padding: 0.15rem 0 0.15rem 1.4rem; }
.legal__section ul li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.95em;
  width: 0.6rem;
  height: 1px;
  background: var(--accent);
}
.legal__body a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
  transition: color 0.3s;
}
.legal__body a:hover { color: var(--accent); }
.legal__body strong { font-weight: 500; color: var(--fg); }
.legal__address { line-height: 1.75; color: var(--fg); }

@media (min-width: 1024px) {
  .legal__grid { grid-template-columns: 16rem minmax(0, 1fr); gap: clamp(4rem, 8vw, 8rem); align-items: start; }
  .legal__toc { position: sticky; top: calc(var(--header-h) + 2rem); padding: 0; border: 0; }
}


/* ==========================================================================
   20  404 PAGE
   ========================================================================== */
.error-page {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + 3rem) var(--gutter) 5rem;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--navy) 50%, transparent), transparent 60%), var(--ink);
  color: var(--bone);
}
.error-page__code {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  transform: translate(-50%, -54%);
  font-family: var(--font-display);
  font-size: clamp(14rem, 42vw, 34rem);
  font-weight: 300;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(238, 234, 227, 0.16);
  pointer-events: none;
  user-select: none;
}
.error-page .eyebrow { margin-bottom: 1.5rem; }
.error-page h1 { margin-bottom: 1.25rem; font-size: clamp(2.8rem, 6.5vw, 5rem); line-height: 1; }
.error-page .lead { max-width: 30rem; margin-inline: auto; }
.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem 2.25rem;
  align-items: center;
  margin-top: 2.5rem;
}


/* ==========================================================================
   21  FOOTER
   ========================================================================== */
.site-footer {
  position: relative;
  padding: clamp(4.5rem, 8vw, 6.5rem) 0 2.25rem;
  background: var(--graphite);
  color: rgba(238, 234, 227, 0.72);
  font-family: var(--font-head);
  font-size: var(--fs-ui);
}
.site-footer__grid { display: grid; gap: 2.75rem; }
.site-footer__brand p {
  max-width: 24rem;
  margin-top: 1.25rem;
  font-family: var(--font-text);
  font-size: 1.0625rem;
  color: rgba(238, 234, 227, 0.62);
}
.brand--footer { margin: 0; }
.site-footer__title {
  margin-bottom: 1.1rem;
  font-size: var(--fs-micro);
  font-weight: 500;
  font-stretch: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(238, 234, 227, 0.5);
}
.site-footer__col ul { display: grid; gap: 0.55rem; }
.site-footer__col a { color: rgba(238, 234, 227, 0.85); transition: color 0.3s; }
.site-footer__col a:hover { color: var(--bone); text-decoration: underline; text-underline-offset: 4px; }
.site-footer__address { line-height: 1.8; color: rgba(238, 234, 227, 0.85); }

.site-footer__col .social { display: flex; gap: 0.6rem; margin-top: 1.5rem; }
.social__link {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid rgba(238, 234, 227, 0.25);
  border-radius: 50%;
  color: var(--bone);
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.social__link .icon { width: 1.1rem; height: 1.1rem; }
.site-footer__col .social__link:hover { background: var(--accent-dark); color: var(--ink); border-color: var(--accent-dark); }

.site-footer__bottom {
  display: grid;
  gap: 0.8rem;
  margin-top: clamp(3.5rem, 6vw, 5rem);
  padding-top: 1.75rem;
  border-top: 1px solid rgba(238, 234, 227, 0.12);
  font-size: 0.8rem;
  color: rgba(238, 234, 227, 0.55);
}
.site-footer__bottom p { margin: 0; }
.site-footer__notice { max-width: 46rem; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.site-footer__legal a { color: rgba(238, 234, 227, 0.75); transition: color 0.3s; }
.site-footer__legal a:hover { color: var(--bone); text-decoration: underline; text-underline-offset: 4px; }

@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: 1.6fr 1fr 1.25fr 1.15fr; gap: clamp(2rem, 4vw, 4rem); }
  .site-footer__bottom { grid-template-columns: 1fr auto; align-items: end; }
  .site-footer__notice { grid-column: 1 / -1; }
}


/* ==========================================================================
   22  SCROLL REVEAL & PARALLAX
   .reveal elements start lowered and transparent; script.js adds
   .is-visible as they enter the viewport. Only opacity and transform
   animate. The hidden state applies only when JS runs (html.js).
   ========================================================================== */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition:
    opacity 1s ease var(--delay, 0s),
    transform 1.2s var(--ease-out) var(--delay, 0s);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Image curtain: a panel in the section colour lifts away bottom-to-top
   while the picture settles from a slight zoom. (A cover layer rather than
   clip-path, so IntersectionObserver still sees the element.) */
.js .reveal--mask { opacity: 1; transform: none; }
.js .reveal--mask::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--bg);
  transform-origin: top center;
  transition: transform 1.4s var(--ease-in-out) var(--delay, 0s);
  pointer-events: none;
}
.js .reveal--mask .frame__inner { transform: scale(1.06); transition: transform 2s var(--ease-out) var(--delay, 0s); }
.js .reveal--mask.is-visible::after { transform: scaleY(0); }
.js .reveal--mask.is-visible .frame__inner { transform: none; }

[data-parallax] { will-change: transform; }


/* ==========================================================================
   23  REDUCED MOTION
   Respect the OS setting: no push-in, marquee, parallax or staged
   entrances; the hero film is paused on its poster by script.js.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .hero__video,
  .page-hero__media img,
  .marquee__track { animation: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .reveal--mask::after { display: none; }
  .js .hero__name { letter-spacing: -0.015em; filter: none; }
}