:root {
  --charcoal: #2A2A2A;
  --gray-warm: #424142;
  --crimson: #75261F;
  --crimson-light: #8C3328;
  --crimson-bright: #C24A3F;
  --crimson-soft: #DA8A7C;
  --cream: #F2EDE6;
  --slate: #E5E1D8;
  --off-white: #F8F5F0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* A11y: visible keyboard focus ring (Web Interface Guidelines / UI-UX Pro Max — accessibility priority 1).
   :where() keeps specificity 0 so existing element-specific focus styles still win. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid #C24A3F;
  outline-offset: 3px;
  border-radius: 2px;
}
:where(a, button, [tabindex]) { -webkit-tap-highlight-color: transparent; }
:where(a, button) { touch-action: manipulation; }

html {
  scroll-behavior: smooth;
  /* Anchor jumps land below the fixed masthead */
  scroll-padding-top: 96px;
}
@media (max-width: 900px) {
  html { scroll-padding-top: 76px; }
}

h1, h2, h3 { text-wrap: balance; }

body {
  font-family: 'Inter', sans-serif;
  color: var(--charcoal);
  background: #fff;
  overflow-x: hidden;
}

/* ─── TYPOGRAPHY ─── */
h1, h2, h3, h4, h5 { font-family: 'Cinzel', serif; }

/* Running body copy — readability pass: 16px / 400 / left (was 15px/300/justified) */
.bio-copy {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: #3a3a3a;
  text-align: left;
}

.bio-copy, .practice-body p, .principle-quote,
.case-body p, .letter-body p, .contact-intro { text-wrap: pretty; }

/* ─── NAV (centered masthead) ─── */
#site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 88px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 56px;
  padding: 0 56px;
  transition: background 0.4s ease, backdrop-filter 0.4s ease, height 0.4s ease;
}

#site-nav::after {
  content: '';
  position: absolute;
  left: 56px; right: 56px; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14) 18%, rgba(255,255,255,0.14) 82%, transparent);
  transition: background 0.4s ease;
}

#site-nav.scrolled {
  height: 76px;
  background: rgba(255,255,255,0.97);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}

#site-nav.scrolled::after {
  background: linear-gradient(90deg, transparent, rgba(117,38,31,0.18) 18%, rgba(117,38,31,0.18) 82%, transparent);
}

.nav-logo {
  font-family: 'Cinzel', serif;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  transition: color 0.3s, font-size 0.4s ease;
  white-space: nowrap;
}

#site-nav.scrolled .nav-logo {
  color: var(--charcoal);
  font-size: 22px;
}

.nav-logo .danson { color: rgba(255,255,255,0.94); transition: color 0.3s; }
.nav-logo .delavar { color: #C24A3F; transition: color 0.3s; }
#site-nav.scrolled .nav-logo .danson { color: var(--gray-warm); }
#site-nav.scrolled .nav-logo .delavar { color: var(--crimson); }

.nav-links {
  display: flex;
  gap: 36px;
  list-style: none;
  align-items: center;
}
.nav-links.nav-left  { justify-content: flex-end; }
.nav-links.nav-right { justify-content: flex-start; }

.nav-links a {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  position: relative;
  padding: 6px 0;
  transition: color 0.25s;
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--crimson-light);
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1), left 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
  left: 0;
}

#site-nav.scrolled .nav-links a { color: var(--charcoal); }
.nav-links a:hover { color: #fff; }
#site-nav.scrolled .nav-links a:hover { color: var(--crimson); }

/* ─── HERO ─── */
#hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh; /* stable under mobile browser chrome */
  min-height: 640px;
  overflow: hidden;
  background: #0a0a0a;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

#hero-image {
  position: absolute;
  inset: 0;
  background-image: url('assets/frame-shots/tim-portrait.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  /* No greyscale: the client rejected black-and-white (2026-08-28, item 2).
     This rule is dead in any case — the home hero is an <img>, not a background. */
  filter: contrast(1.04);
  /* Slow breathing drift — still image that feels alive */
  animation: hero-drift 28s ease-in-out infinite alternate;
  transform-origin: center 45%;
  will-change: transform;
}

@keyframes hero-drift {
  from { transform: scale(1.00); }
  to   { transform: scale(1.04); }
}

/* Inner vignette — darker edges, lifted center, pulls focus to the figures */
#hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(65% 90% at 50% 38%, transparent 0%, rgba(0,0,0,0.36) 100%),
    radial-gradient(140% 60% at 50% 50%, transparent 55%, rgba(0,0,0,0.32) 100%);
  mix-blend-mode: multiply;
}

/* Film grain — subtle editorial texture over the portraits */
#hero-grain {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Top-of-hero nav-legibility gradient — protects nav text on busy photos */
#hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 140px;
  z-index: 6;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 50%, transparent 100%);
  pointer-events: none;
}


#hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.40) 0%,
    rgba(0,0,0,0.05) 30%,
    rgba(0,0,0,0.05) 50%,
    rgba(0,0,0,0.80) 85%,
    rgba(0,0,0,0.90) 100%
  );
}

#hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 0 24px 56px;
  width: 100%;
}

.hero-wordmark {
  font-family: 'Cinzel', serif;
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  color: #fff;
  margin-bottom: 16px;
}

.hero-wordmark .danson {
  color: rgba(220,218,213,0.92);
  text-shadow: 0 2px 24px rgba(0,0,0,0.55);
}
.hero-wordmark .delavar {
  color: #C24A3F;
  text-shadow: 0 2px 28px rgba(117,38,31,0.45), 0 1px 0 rgba(0,0,0,0.4);
}

.hero-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 32px;
}

.hero-rule .line {
  height: 1px;
  width: 120px;
  background: linear-gradient(90deg, transparent, rgba(117,38,31,0.6));
}

.hero-rule .line.right {
  background: linear-gradient(90deg, rgba(117,38,31,0.6), transparent);
}

.hero-rule .llp {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.28em;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
}

.hero-tagline {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-size: clamp(16px, 2vw, 22px);
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.02em;
  margin-top: 28px;
}

/* ─── SECTION LABEL (parallax banners) ─── */
.parallax-banner {
  position: relative;
  height: 220px;
  background-size: cover;
  background-position: center top;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.parallax-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.5;
  pointer-events: none;
}

.parallax-banner::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 36px;
  width: 56px;
  height: 1px;
  background: var(--crimson);
}

.parallax-banner h1,
.parallax-banner h2 {
  position: relative;
  z-index: 1;
  font-family: 'Cinzel', serif;
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 400;
  letter-spacing: 0.28em;
  color: #fff;
  text-align: center;
}

/* ─── FIRM STATEMENT (cream) ─── */
.firm-statement {
  background: var(--cream);
}

/* ─── PRACTICE AREAS (editorial numbered index) ─── */
.practice-areas-section {
  background: var(--cream);
  padding: 88px 56px 104px;
  position: relative;
}
.practice-inner {
  max-width: 1180px;
  margin: 0 auto;
}
.practice-intro {
  font-family: 'Inter', sans-serif;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  color: var(--charcoal);
  text-align: center;
  max-width: 740px;
  margin: 0 auto 88px;
  position: relative;
}
.practice-intro::after {
  content: '';
  display: block;
  width: 44px;
  height: 1px;
  background: var(--crimson);
  margin: 36px auto 0;
}
.practice-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid rgba(117,38,31,0.22);
  border-left: 1px solid rgba(117,38,31,0.22);
}
/* Row 1: 3 cells each spanning 2 of 6 columns */
.practice-item:nth-child(1),
.practice-item:nth-child(2),
.practice-item:nth-child(3) { grid-column: span 2; }
/* Row 2: 2 cells each spanning 3 of 6 columns */
.practice-item:nth-child(4),
.practice-item:nth-child(5) { grid-column: span 3; }
.practice-item {
  display: flex;
  flex-direction: column;
  padding: 40px 36px 44px;
  border-bottom: 1px solid rgba(117,38,31,0.22);
  border-right: 1px solid rgba(117,38,31,0.22);
  transition: background-color 0.4s ease;
  cursor: default;
}
.practice-item:hover {
  background: rgba(117,38,31,0.025);
}
.practice-name {
  padding-top: 0;
}
.practice-name h3 {
  font-family: 'Cinzel', serif;
  font-size: clamp(17px, 1.45vw, 22px);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin: 0;
}
.practice-name h3 .amp {
  font-style: italic;
  font-weight: 400;
  color: var(--crimson);
  margin: 0 2px;
}
.practice-body {
  padding-top: 12px;
}
.practice-body p {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.78;
  color: #3a3a3a;
  margin: 0;
}
/* ─── SCC PROOF BAND ─── */
.practice-proof {
  background: var(--charcoal);
  position: relative;
  overflow: hidden;
}
.practice-proof::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}
.proof-inner {
  display: grid;
  grid-template-columns: 0.82fr 1fr;
  align-items: center;
  min-height: auto;
  position: relative;
  z-index: 1;
}
.proof-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 76px 56px;
  position: relative;
}
/* Photo shown in full (uncropped) at roughly half its former size, with a caption */
.proof-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 330px;
}
.proof-photo img {
  display: block;
  width: 100%;
  max-width: 330px;
  height: auto;
  aspect-ratio: 960 / 1237;
  object-fit: contain;
  box-shadow: 0 22px 56px rgba(0,0,0,0.5);
}
.proof-caption {
  margin-top: 18px;
  max-width: 330px;
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: 12.5px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.62);
  text-align: center;
}
.proof-caption cite { font-style: italic; }
.proof-caption a {
  color: #DA8A7C;
  text-decoration: none;
  border-bottom: 1px solid rgba(213,133,151,0.45);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.proof-caption a:hover { color: #fff; border-color: rgba(255,255,255,0.6); }
.proof-text {
  padding: 80px 80px 80px 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 760px;
}
.proof-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #EBA597;
  margin-bottom: 30px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
}
.proof-eyebrow::before {
  content: '';
  width: 52px;
  height: 1px;
  background: #EBA597;
}
.proof-tribunals-label {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 13px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 30px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.proof-tribunals-label::after {
  content: '';
  width: 40px;
  height: 1px;
  background: rgba(196,85,80,0.5);
}
/* Two-column court list — uses the empty space, larger type, breathable */
.proof-tribunals {
  list-style: none;
  padding: 0;
  margin: 0;
  column-count: 2;
  column-gap: 56px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.92);
  line-height: 2.05;
}
.proof-tribunals li {
  break-inside: avoid;
  position: relative;
  padding-left: 14px;
}
.proof-tribunals li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 6px;
  height: 1px;
  background: rgba(196,85,80,0.55);
}

@media (max-width: 900px) {
  .practice-areas-section { padding: 64px 24px 80px; }
  .practice-intro { margin-bottom: 64px; }
  .practice-list {
    grid-template-columns: 1fr;
    border-left: none;
  }
  .practice-item,
  .practice-item:nth-child(1),
  .practice-item:nth-child(2),
  .practice-item:nth-child(3),
  .practice-item:nth-child(4),
  .practice-item:nth-child(5) {
    grid-column: auto;
    padding: 32px 0;
    border-right: none;
  }
  .practice-name h3 { font-size: 22px; }
  .practice-body { padding-top: 8px; }

  .proof-inner { grid-template-columns: 1fr; min-height: 0; }
  .proof-photo { padding: 44px 24px 12px; }
  .proof-figure, .proof-photo img, .proof-caption { max-width: 300px; }
  .proof-text { padding: 40px 24px 56px; max-width: none; }
}

/* ─── CONTACT SECTION ─── */
#contact {
  background: var(--charcoal);
  padding: 80px 56px;
}

/* #contact h1 (POLISH tier, below) replaced this rule's old target — "Contact me"
   is an h1, not an h2, since 2026-09-02. Left no bare selector here: the page's
   only other h2 is `.contact-details h2` (own rule, ~line 734), which this
   descendant selector was blowing out to a 40px centred title until 2026-09-04. */
#contact .contact-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--crimson-soft);         /* the token for small text on dark grounds; #BE5A4E was 3.25:1 */
  text-align: center;
  margin-bottom: 12px;
}
#contact .contact-intro {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255,255,255,0.72);
  text-align: center;
  max-width: 600px;
  margin: 18px auto 0;
}

.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  max-width: 960px;
  margin: 0 auto;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.form-field label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}

/* required-field marker (visible on the dark contact panel) */
.form-field label .req {
  color: var(--crimson-soft);
  margin-left: 4px;
}

.form-field input,
.form-field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding: 10px 0;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 16px; /* 16px avoids iOS focus auto-zoom */
  outline: none;
  resize: none;
  transition: border-color 0.25s;
  -webkit-appearance: none;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: rgba(255,255,255,0.52);
}

.form-field input:focus,
.form-field textarea:focus {
  border-bottom-color: var(--crimson);
}

.form-field textarea { min-height: 120px; }

.form-submit {
  display: inline-block;
  padding: 14px 40px;
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: transparent;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}

.form-submit:hover {
  background: var(--crimson);
  border-color: var(--crimson);
}

.form-submit:disabled {
  opacity: 0.45;
  cursor: default;
  background: transparent;
  border-color: rgba(255,255,255,0.3);
}

.contact-details {
  color: rgba(255,255,255,0.75);
}

.contact-details h2 {
  font-family: 'Cinzel', serif;
  font-size: 22px;
  color: #fff;
  margin-bottom: 32px;
}

.contact-detail-row {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  align-items: flex-start;
}

.contact-detail-row svg {
  width: 20px;
  height: 20px;
  stroke: #BE5A4E;
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-detail-row p {
  font-size: 14px;
  line-height: 1.6;
}

.contact-detail-row a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color 0.2s;
}

.contact-detail-row a:hover { color: #fff; }

.get-directions-link {
  display: inline-block;
  margin-top: 14px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #BE5A4E;
  text-decoration: none;
  border-bottom: 1px solid #BE5A4E;
  padding-bottom: 3px;
  transition: color 0.25s ease, border-color 0.25s ease, padding-right 0.3s ease;
}
.get-directions-link:hover {
  color: #fff;
  border-color: #fff;
  padding-right: 6px;
}

/* ─── FOOTER ─── */
footer {
  background: #111;
  padding: 32px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.footer-logo-img {
  display: block;
  height: 38px;
  width: auto;
  filter: brightness(1.04);
}

.footer-copy {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.04em;
  margin: 0;
}
.footer-copy-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.footer-links {
  display: flex;
  gap: 28px;
  list-style: none;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-links a {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-links a:hover { color: rgba(255,255,255,0.9); }

/* ─── MOBILE MENU ─── */
.mobile-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  /* 44×44 touch target (UI-UX touch-target-size); bars stay 24px wide */
  min-width: 44px;
  min-height: 44px;
  padding: 4px;
  background: none;
  border: none;
  -webkit-appearance: none;
  appearance: none;
}

.mobile-toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: #fff;
  transition: background 0.3s;
}

#site-nav.scrolled .mobile-toggle span { background: var(--charcoal); }

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  #site-nav {
    /* minmax(0,1fr) — a bare 1fr floors at the wordmark's min-content width
       (236px), which overflowed the viewport by 8px at 320. */
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "logo toggle";
    height: 68px;
    padding: 0 24px;
    column-gap: 0;
  }
  .nav-logo { grid-area: logo; font-size: 20px; }
  .mobile-toggle { grid-area: toggle; display: flex; }

  .nav-links.nav-left,
  .nav-links.nav-right {
    display: none;
    margin: 0;
    padding: 0;
    gap: 0;
  }

  #site-nav.menu-open {
    grid-template-areas:
      "logo toggle"
      "left left"
      "right right";
    grid-template-columns: 1fr auto;
    grid-template-rows: 68px auto auto;
    height: auto;
    background: rgba(255,255,255,0.98);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  }
  #site-nav.menu-open .nav-logo .danson { color: var(--gray-warm); }
  #site-nav.menu-open .nav-logo .delavar { color: var(--crimson); }
  #site-nav.menu-open .mobile-toggle span { background: var(--charcoal); }

  #site-nav.menu-open .nav-links.nav-left {
    grid-area: left;
    display: flex;
    flex-direction: column;
    padding: 8px 0 0 0;
  }
  #site-nav.menu-open .nav-links.nav-right {
    grid-area: right;
    display: flex;
    flex-direction: column;
    padding: 0 0 16px 0;
  }
  #site-nav.menu-open .nav-links a {
    color: var(--charcoal);
    padding: 14px 32px;
    font-size: 13px;
    letter-spacing: 0.24em;
    display: block;
  }
  #site-nav.menu-open .nav-links a::after { display: none; }

  .contact-form-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  footer {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    padding: 28px 24px;
  }

  .footer-links { justify-content: center; }

  #contact { padding: 60px 24px; }
}

/* ─── SCROLL REVEAL ───
   Gated on html.js (set by the first inline script) so content is never
   hidden when JavaScript fails or is disabled. */
html.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

html.js .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── ABOUT-THE-FIRM GRID + EDITORIAL SIDEBAR ─── */
.firm-statement-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 80px;
  align-items: stretch;
}
.firm-statement-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.firm-statement-closing {
  padding-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.firm-statement-closing .closing-rule {
  display: block;
  width: 72px;
  height: 1px;
  background: var(--crimson);
}
.firm-statement-closing .closing-tagline {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(42,42,42,0.78);         /* AA on --cream; 0.55 was 3.30:1 */
  margin: 0;
}
/* Personal sign-off — the bio closes on the individual, firm affiliation kept subordinate */
.firm-statement-closing .bio-signature {
  font-family: 'Cinzel', serif;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--charcoal);
  margin: 0;
  line-height: 1.1;
}
.firm-statement-closing .bio-signature .accent { color: var(--crimson); }
.firm-statement-closing .bio-affiliation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.firm-statement-closing .closing-logo {
  display: block;
  width: 150px;
  max-width: 100%;
  height: auto;
  margin: 0;
  opacity: 0.85;
}

.firm-sidebar {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 4px;
}
.firm-partner-card {
  display: flex;
  flex-direction: column;
}
.firm-partner-photo {
  width: 100%;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: #1a1a1a;
  position: relative;
}
.firm-partner-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.firm-partner-card:hover .firm-partner-photo img {
  transform: scale(1.035);
}
.firm-partner-meta {
  padding: 18px 0 0;
  text-align: center;
}
.firm-partner-name {
  font-family: 'Cinzel', serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--charcoal);
  margin: 0;
}
.firm-partner-rule {
  width: 24px;
  height: 1px;
  background: var(--crimson);
  margin: 10px auto;
}
.firm-partner-role {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--crimson);
  margin: 0;
}

.firm-stat-block {
  margin-top: 16px;
  padding: 28px 24px;
  border-top: 1px solid rgba(117,38,31,0.22);
  border-bottom: 1px solid rgba(117,38,31,0.22);
  text-align: center;
}
.firm-stat-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--crimson);
  margin: 0 0 14px;
}
.firm-stat-figure {
  font-family: 'Cinzel', serif;
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--charcoal);
  margin: 0 0 12px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}
.firm-stat-figure em {
  font-style: normal;
  font-size: 18px;
  color: rgba(117,38,31,0.9);         /* AA on --cream; 0.55 was 2.95:1 */
  font-weight: 300;
}
.firm-stat-figure .total {
  color: var(--crimson);
  font-weight: 500;
  font-size: 44px;
  margin-left: 4px;
}
.firm-stat-caption {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #555;
  margin: 0;
}

.firm-forums {
  padding: 6px 4px 0;
}
.firm-forums-label {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--crimson);
  margin: 0 0 12px;
}
.firm-forums ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.firm-forums li {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #4a4a4a;
  position: relative;
  padding-left: 14px;
}
.firm-forums li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 1px;
  background: var(--crimson);
}

@media (max-width: 900px) {
  /* Collapse the editorial 2-column grid — a 2-col bio at tablet widths
     squeezes the running copy below a readable measure */
  .firm-statement-grid { grid-template-columns: 1fr; gap: 0; }
  .firm-statement-left { max-width: 640px; margin: 0 auto; }
  .firm-wrap { padding: 72px 32px 84px !important; }
  .firm-sidebar {
    max-width: 420px;
    margin: 48px auto 0;
  }
}

/* ─── EDITORIAL LAYER (Round 4 polish) ─── */

/* Chapter mark — small Roman-numeral indicator in section corners */
.chapter-mark {
  position: absolute;
  top: 36px;
  right: 56px;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 0.36em;
  color: rgba(117,38,31,0.45);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
}
.chapter-mark::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: rgba(117,38,31,0.4);
}
/* Drop cap on lead paragraph */
.drop-cap::first-letter {
  font-family: 'Cinzel', serif;
  font-size: 5.1em;
  font-weight: 500;
  float: left;
  line-height: 0.92;
  padding: 6px 12px 0 0;
  color: var(--crimson);
  letter-spacing: -0.02em;
}

/* Inline editorial pull-quote */
.pull-quote {
  position: relative;
  margin: 40px 0 36px;
  padding: 0 0 0 28px;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: clamp(19px, 1.7vw, 24px);
  letter-spacing: 0;
  line-height: 1.5;
  color: #707070;
}
.pull-quote::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--crimson-light);
}
.pull-quote em {
  font-style: italic;
  font-weight: 400;
  color: var(--crimson-light);
}

/* Position helper for sections that hold a chapter-mark */
.has-chapter { position: relative; }

@media (max-width: 768px) {
  .chapter-mark { top: 18px; right: 22px; font-size: 10px; }
  .chapter-mark::before { width: 14px; }
  .drop-cap::first-letter { font-size: 4em; padding: 4px 10px 0 0; }
  .pull-quote { padding-left: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  #hero-image { animation: none !important; transform: none !important; }
  /* Reveal content immediately — no fade/translate (also guards against slow/failed JS) */
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ─── FOOTER LEGAL SUB-LINE ─── */
.footer-legal {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-top: 8px;
  font-family: 'Josefin Sans', sans-serif;
}
.footer-legal a {
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-legal a:hover { color: rgba(255,255,255,0.85); }
.footer-legal .dot { color: rgba(255,255,255,0.22); }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--crimson); color: #fff;
  padding: 10px 18px;
  font-family: 'Josefin Sans', sans-serif; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
}
.skip-link:focus-visible { left: 8px; top: 8px; outline: 2px solid #fff; outline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════════
   MOBILE OPTIMIZATION — phones (≤600px). APPEND-ONLY.
   Everything ≥601px (tablet + desktop) is untouched: these rules add
   overrides only at phone widths and sit after all existing media
   queries so they win the cascade. Do not move above other @media.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Label banners — the 36px clamp floor overflows a 390px viewport
     ("SELECTED MATTERS" is 16 tracked characters) */
  .parallax-banner h1,
  .parallax-banner h2 {
    font-size: clamp(20px, 6.5vw, 30px);
    letter-spacing: 0.2em;
    padding: 0 20px;
  }

  /* Hero — keep the wordmark comfortably inside the viewport.
     20vw−30px ≈ 48px at 390w, ~34px at 320w (the 48px clamp floor clips there) */
  .hero-wordmark { font-size: clamp(30px, 20vw - 30px, 48px); }
  .hero-eyebrow { text-wrap: balance; }
  #hero-content { padding: 0 20px 44px; }
  .hero-tagline { margin-top: 18px; font-size: 15px; }

  /* Firm statement — collapse the editorial 2-column grid to one column.
     (The inline 56px padding on the wrapper is overridden via .firm-wrap.) */
  .firm-wrap { padding: 64px 22px 76px !important; }
  .firm-statement-grid { grid-template-columns: 1fr; gap: 0; }
  .firm-statement-closing { padding-top: 28px; }
  .firm-statement-closing .bio-signature { font-size: 26px; }
  .firm-statement-closing .closing-logo { width: 140px; }
  .firm-sidebar { gap: 22px; }

  /* SCC proof band — single-column court list (base is 2 columns) */
  .proof-tribunals { column-count: 1; font-size: 17px; line-height: 1.9; }
  .proof-eyebrow { margin-bottom: 22px; }

  /* Editorial sections — trim horizontal padding to phone-appropriate gutters */
  .practice-areas-section { padding: 56px 22px 68px; }
  #contact { padding: 56px 22px; }
  #team-section { padding: 52px 22px; }
  footer { padding: 28px 22px; }

  /* Parallax label banners — slightly shorter on phones */
  .parallax-banner { height: 180px; }

}

/* ══════════════════════════════════════════════════════════════════
   TIM DANSON — individual-site additions (append-only).
   Inherits every token above; adds the Principles, Selected Matters
   intro, Recognition, and Danson Sports sections.
   ══════════════════════════════════════════════════════════════════ */

/* Hero — single editorial portrait of Tim (overrides the firm hero-pair) */
#hero-image {
  background-image: url('assets/frame-shots/tim-portrait.jpg');
  /* 38% keeps his eyes well above the wordmark at every window aspect we test
     (2000x985 / 1920x1080 / 1600x760 / 1440x900 / 1280x720) while leaving the
     top of his head intact. 12% looked right on tall windows only — on a wide,
     short window `cover` crops more vertically and the face slid into the type. */
  background-position: center 38%;
}
.hero-wordmark .danson { letter-spacing: 0.05em; }
.hero-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: clamp(10px, 1.1vw, 12px);
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 26px;
}
@media (max-width: 600px) { .hero-eyebrow { letter-spacing: 0.34em; margin-bottom: 18px; } }


/* About bio — single-portrait sidebar + figure caption */
.firm-partner-photo.tim-bio-photo { aspect-ratio: 3/4; }
.firm-partner-photo.tim-bio-photo img { object-position: center 12%; }
/* Practice — 14-area uniform index (overrides the firm's 6-col span layout) */
@media (min-width: 901px) {
  .practice-list.tim { grid-template-columns: repeat(3, 1fr); }
}
.practice-list.tim .practice-item { grid-column: auto !important; }
.practice-list.tim .practice-name h3 { min-height: 2.4em; }

/* ─── GUIDING PRINCIPLES (dark editorial) ─── */
.principles-section {
  background: #1a1a1a;
  padding: 96px 56px 104px;
  position: relative;
  overflow: hidden;
}
.principles-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}
.principles-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
/* Heading is the bare header only — the client asked for "a more modest
   approach": no eyebrow, no explanatory sub-line. (2026-08-29) */
.principles-head { text-align: center; margin-bottom: 56px; }
.principles-head h2 {
  font-family: 'Cinzel', serif;
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 40px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}
.principles-head h2::after {
  content: '';
  display: block;
  width: 64px;
  height: 1px;
  background: var(--crimson-bright);
  margin: 24px auto 0;
}
/* Stacked rows, one under the other, each running the full width of the page
   — the client's format, matching his existing site. (2026-08-28, item 7) */
.principles-grid {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.principle {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: start;
  gap: 0 32px;
  padding: 40px 8px 42px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  transition: background 0.4s ease;
}
.principle:hover { background: rgba(255,255,255,0.02); }
.principle-num {
  font-family: 'Cinzel', serif;
  font-size: 15px;
  letter-spacing: 0.22em;
  color: rgba(218,138,124,0.95);
  margin: 0;
  padding-top: 6px;
}
.principle-quote {
  font-family: 'Cinzel', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.58;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.92);
  margin: 0 0 18px;
}
.principle-attr {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--crimson-soft);
  margin: 0;
}
.principle-attr span { color: rgba(255,255,255,0.55); }

/* ─── DANSON SPORTS & ENTERTAINMENT ─── */
.dse-section { background: var(--charcoal); position: relative; overflow: hidden; }
.dse-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 460px;
  max-width: 1320px;
  margin: 0 auto;
}
.dse-media { position: relative; overflow: hidden; background: #111; }
.dse-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block; filter: contrast(1.03) brightness(0.96);
}
.dse-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(42,42,42,0) 60%, rgba(42,42,42,0.9) 100%);
  pointer-events: none;
}
.dse-text {
  padding: 80px 80px 80px 72px;
  display: flex; flex-direction: column; justify-content: center;
}
.dse-text .eyebrow {
  font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.4em;
  text-transform: uppercase; color: #EBA597; margin: 0 0 24px;
  display: inline-flex; align-items: center; gap: 16px;
}
.dse-text .eyebrow::before { content: ''; width: 46px; height: 1px; background: #EBA597; }
.dse-text h2 {
  font-family: 'Cinzel', serif; font-weight: 500;
  font-size: clamp(24px, 2.6vw, 34px); letter-spacing: 0.03em;
  color: #fff; margin: 0 0 24px; line-height: 1.2;
}
.dse-text p {
  font-family: 'Inter', sans-serif; font-weight: 400; font-size: 16px;
  line-height: 1.8; color: rgba(255,255,255,0.75); margin: 0 0 18px;
}
.dse-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; }
.dse-link {
  font-family: 'Josefin Sans', sans-serif; font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: #fff;
  text-decoration: none; border: 1px solid rgba(255,255,255,0.3);
  padding: 13px 26px;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, padding 0.3s ease;
  display: inline-flex; align-items: center; gap: 10px;
}
.dse-link:hover { background: var(--crimson); border-color: var(--crimson); padding-right: 32px; }
.dse-link .arrow { transition: transform 0.3s ease; }
.dse-link:hover .arrow { transform: translateX(4px); }

/* ─── ARCHIVAL PLATE (young Tim, Osgoode Hall) ─── */
.archival-plate { margin-top: 34px; }
.archival-plate figure { margin: 0; }
.archival-plate img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.04);
}
.archival-plate figcaption {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.6;
  color: #6b6b6b;
  margin-top: 12px;
  padding-left: 12px;
  border-left: 2px solid rgba(117,38,31,0.35);
  text-wrap: pretty;
}

.dse-person { margin: 4px 0 0; }
.dse-person strong { display:block; font-family:'Cinzel',serif; font-weight:500; font-size:15px; letter-spacing:0.04em; color:#EBA597; }
.dse-person span { display:block; font-family:'Inter',sans-serif; font-style:italic; font-weight:300; font-size:13px; color:rgba(255,255,255,0.62); margin-top:2px; }

/* ─── NEWS & EVENTS ─── */
.news-section { background: var(--off-white); padding: 96px 24px; }
.news-inner { max-width: 900px; margin: 0 auto; }
.news-head { text-align: center; margin-bottom: 48px; }
.news-head .eyebrow { font-family:'Cinzel',serif; font-size:11px; letter-spacing:0.42em; text-transform:uppercase; color:var(--crimson); margin:0 0 12px; }
.news-head h2 { font-family:'Cinzel',serif; font-weight:500; font-size:clamp(28px,3.2vw,40px); color:var(--charcoal); margin:0; }
.news-item { padding: 26px 0; border-top: 1px solid rgba(117,38,31,0.18); }
.news-item:first-of-type { border-top: 0; }
.news-date { font-family:'Josefin Sans',sans-serif; font-size:11px; letter-spacing:0.24em; text-transform:uppercase; color:var(--crimson); margin:0 0 8px; }
.news-title { font-family:'Cinzel',serif; font-weight:500; font-size:18px; color:var(--charcoal); margin:0 0 8px; text-wrap:balance; }
.news-body { font-family:'Inter',sans-serif; font-weight:400; font-size:15px; line-height:1.75; color:#3a3a3a; margin:0; text-wrap:pretty; }
@media (max-width: 600px) { .news-section { padding: 64px 20px; } }

@media (max-width: 360px) {
  /* 320px guard: the wordmark's min-content width was flooring the nav grid
     and the About grid column was not allowed to shrink. Both now may. */
  #site-nav { padding: 0 16px; grid-template-columns: minmax(0, 1fr) 44px !important; }
  .nav-logo { font-size: 17px; min-width: 0; letter-spacing: 0.01em; }
  .firm-wrap { padding-left: 16px; padding-right: 16px; }
  .firm-statement-grid, .firm-statement-left, .firm-sidebar { min-width: 0; max-width: 100%; }
  .firm-statement-left > *, .firm-sidebar > * { max-width: 100%; }
}

/* ─── TIM responsive overrides ─── */
@media (max-width: 900px) {
  .principles-section { padding: 64px 24px 72px; }
  .principle { grid-template-columns: 62px minmax(0, 1fr); gap: 0 22px; padding: 32px 4px 34px; }
  .dse-inner { grid-template-columns: 1fr; min-height: 0; }
  .dse-media { height: 280px; }
  .dse-media::after { background: linear-gradient(180deg, rgba(42,42,42,0) 55%, rgba(42,42,42,0.85) 100%); }
  .dse-text { padding: 48px 24px 56px; }
}
@media (max-width: 600px) {
  .principles-section { padding: 56px 22px 64px; }
  /* Numeral drops above the quote — 62px of hanging indent is too much of a
     320px screen to give away. */
  .principle { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 28px 0 30px; }
  .principle-num { padding-top: 0; margin-bottom: 14px; }
}

/* ══════════════════════════════════════════════════════════════════
   INNER-PAGE SHELL — dark banner + cream body. Used by every page
   except the home page. (Was duplicated per-page; shared since 2026-08-30.)
   ══════════════════════════════════════════════════════════════════ */
/* ─── PAGE BANNER ─── */
.page-banner {
  position: relative;
  padding: 168px 56px 96px;
  background:
    radial-gradient(120% 100% at 80% 30%, rgba(117,38,31,0.22) 0%, transparent 55%),
    radial-gradient(100% 80% at 15% 90%, rgba(0,0,0,0.55) 0%, transparent 60%),
    linear-gradient(165deg, #1a1a1a 0%, #0e0e0e 55%, #161010 100%);
  /* Solid ground UNDER the gradients. Must follow the shorthand — the shorthand
     resets background-color, so declaring it first silently does nothing. */
  background-color: #141010;
  color: #fff;
  overflow: hidden;
}
.page-banner::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.55;
  pointer-events: none;
}
.banner-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }
.banner-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--crimson-soft);   /* #A8402E was 3.09:1 on the banner ground */
  margin-bottom: 22px;
  /* Block-level: as inline-flex it shared a line with the inline-block h1. */
  display: flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: 14px;
}
.banner-eyebrow::before {
  content: ''; width: 36px; height: 1px; background: var(--crimson-soft);
}
.banner-title {
  font-family: 'Cinzel', serif;
  font-weight: 400;
  font-size: clamp(54px, 8vw, 108px);
  letter-spacing: 0.04em;
  line-height: 1.02;
  text-transform: uppercase;
  margin-bottom: 28px;
  position: relative;
  display: inline-block;
}
.banner-title::after {
  content: '';
  position: absolute;
  left: 0; bottom: -14px;
  width: 72px; height: 1px;
  background: #DA8A7C;
}
.banner-lede {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(17px, 1.7vw, 22px);
  line-height: 1.55;
  color: rgba(255,255,255,0.7);
  max-width: 680px;
}
/* ─── BODY ─── */
.page-body {
  background: var(--cream);
  padding: 120px 24px 144px;
}
.body-inner { max-width: 1100px; margin: 0 auto; }

@media (max-width: 900px) {
  .page-banner { padding: 132px 24px 72px; }
  .page-body { padding: 72px 20px 96px; }
}
@media (max-width: 600px) {
  .page-banner { padding: 116px 22px 58px; }
  .banner-eyebrow { font-size: 11px; letter-spacing: 0.24em; }
  .banner-title { font-size: clamp(34px, 11vw, 52px); }
  .banner-lede { font-size: 16px; }
  .page-body { padding: 56px 20px 80px; }
}

/* ══════════════════════════════════════════════════════════════════
   2026-08-30 REBUILD — multi-page site following the client's own
   site structure. Everything below is append-only and overrides the
   blocks above where the two disagree.
   ══════════════════════════════════════════════════════════════════ */

/* ─── NAV: light variant + seven items ───
   The home page opens on a warm, light hero rather than a dark photograph,
   so the masthead needs the light treatment at rest as well as on scroll.
   `.scrolled` already defines that look; these selectors just borrow it. */
body.nav-light #site-nav {
  background: rgba(248,245,240,0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
body.nav-light #site-nav::after,
#site-nav.scrolled::after {
  background: linear-gradient(90deg, transparent, rgba(117,38,31,0.18) 18%, rgba(117,38,31,0.18) 82%, transparent);
}
body.nav-light .nav-logo { color: var(--charcoal); }
body.nav-light .nav-logo .danson { color: var(--gray-warm); }
body.nav-light .nav-logo .delavar { color: var(--crimson); }
body.nav-light .nav-links a { color: var(--charcoal); }
body.nav-light .nav-links a:hover { color: var(--crimson); }
body.nav-light .mobile-toggle span { background: var(--charcoal); }

/* Seven nav items is more than the masthead was built for. Tighten the gaps,
   then step the type down before falling back to the mobile menu at 1024px. */
.nav-links { gap: 28px; }
#site-nav { column-gap: 40px; }
@media (max-width: 1300px) {
  .nav-links { gap: 20px; }
  .nav-links a { font-size: 11px; letter-spacing: 0.18em; }
  #site-nav { padding: 0 32px; column-gap: 26px; }
  #site-nav::after { left: 32px; right: 32px; }
}

/* ─── HOME HERO — framed colour portrait ───
   Replaces the full-bleed black-and-white background crop. The client asked
   for "a full and softer picture", in colour (2026-08-28, item 2), so the
   portrait is presented whole on a warm ground with the lockup beside it
   rather than cropped to fill behind type. This also retires the recurring
   face-under-the-wordmark bug, since the type no longer sits on the photo. */
#hero {
  height: auto;
  min-height: 0;
  background: var(--off-white);
  display: block;
  padding: 152px 56px 88px;
  overflow: visible;
}
#hero::before, #hero::after { content: none; }
.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: 72px;
}
.hero-portrait { position: relative; }
.hero-portrait img {
  display: block;
  width: 100%;
  height: auto;               /* the whole photograph, never cropped */
  border-radius: 2px;
  box-shadow: 0 24px 60px -28px rgba(42,42,42,0.42);
}
/* Thin crimson corner rule — a frame mark, not a border */
.hero-portrait::after {
  content: '';
  position: absolute;
  left: -14px; bottom: -14px;
  width: 96px; height: 96px;
  border-left: 1px solid var(--crimson);
  border-bottom: 1px solid var(--crimson);
  pointer-events: none;
}
.hero-lockup { position: relative; z-index: 1; }
.hero-wordmark {
  font-family: 'Cinzel', serif;
  font-weight: 400;
  font-size: clamp(38px, 4.4vw, 68px);
  line-height: 1.06;
  letter-spacing: 0.03em;
  color: var(--charcoal);
  margin: 0;
  text-shadow: none;
}
.hero-wordmark .danson { color: var(--crimson); letter-spacing: 0.05em; text-shadow: none; }
.hero-rule {
  width: 72px; height: 1px;
  background: var(--crimson);
  margin: 30px 0;
}
.hero-role {
  font-family: 'Josefin Sans', sans-serif;
  font-size: clamp(13px, 1.2vw, 15px);
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gray-warm);
  margin: 0;
}
.hero-tagline {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.7;
  color: #4a4a4a;
  margin: 26px 0 0;
  max-width: 30em;
  text-shadow: none;
}
.hero-cta { margin-top: 38px; display: inline-block; }

@media (max-width: 1024px) {
  #hero { padding: 128px 32px 72px; }
  .hero-inner { gap: 48px; }
}
@media (max-width: 900px) {
  #hero { padding: 116px 24px 64px; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero-portrait { max-width: 460px; }
  .hero-lockup { text-align: left; }
  .hero-rule { margin: 24px 0; }
}
@media (max-width: 600px) {
  #hero { padding: 104px 20px 56px; }
  .hero-portrait::after { left: -8px; bottom: -8px; width: 64px; height: 64px; }
  .hero-tagline { font-size: 16px; margin-top: 20px; }
  .hero-cta { margin-top: 30px; }
}

/* ─── HOME TEASERS ───
   The three doors his own home page offers: his case work, DSE, and the firm. */
.teasers-section { background: var(--cream); padding: 96px 56px 104px; }
.teasers-inner { max-width: 1200px; margin: 0 auto; }
.teasers-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(117,38,31,0.22);
  border: 1px solid rgba(117,38,31,0.22);
}
.teaser {
  background: var(--cream);
  padding: 48px 40px 44px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: background 0.35s ease;
}
.teaser:hover { background: #EDE6DC; }
.teaser-eyebrow {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--crimson);
  margin: 0 0 20px;
}
.teaser h2 {
  font-family: 'Cinzel', serif;
  font-weight: 400;
  font-size: clamp(21px, 2vw, 27px);
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--charcoal);
  margin: 0 0 18px;
}
.teaser p {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.75;
  color: #4a4a4a;
  margin: 0 0 28px;
}
.teaser .teaser-more {
  margin-top: auto;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--crimson);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.teaser .teaser-more .arrow { transition: transform 0.3s ease; }
.teaser:hover .teaser-more .arrow { transform: translateX(5px); }

@media (max-width: 900px) {
  .teasers-section { padding: 64px 24px 72px; }
  .teasers-grid { grid-template-columns: minmax(0, 1fr); }
  .teaser { padding: 36px 26px 34px; }
}
@media (max-width: 600px) {
  .teasers-section { padding: 56px 20px 64px; }
}

/* ─── ABOUT PAGE / INNER-PAGE PHOTOGRAPHY IN COLOUR ───
   "I do not want to go with black and white" (2026-08-28, item 2). The
   grayscale filters come off the portraits. The archival Osgoode plate and
   the Trudeau letter stay as they are — both are natively monochrome. */
.firm-partner-photo.tim-bio-photo img { filter: none; }
.proof-figure img { filter: none; }
.dse-media img { filter: contrast(1.03) brightness(0.96); }

/* ─── PRACTICE PAGE ───
   Fourteen areas in three columns leaves a two-cell final row. Close the grid
   with a bottom rule and tint that row so it reads as a deliberate coda rather
   than a dangling empty cell. Order is the client's (2026-08-28, item 8). */
.practice-list.tim { border-bottom: 1px solid rgba(117,38,31,0.22); }
@media (min-width: 901px) {
  .practice-list.tim .practice-item:nth-last-child(-n+2) { background: var(--off-white); }
}
.practice-page-body { padding-top: 0; }

/* ─── NEWS PAGE — commentary stream ─── */
.commentary-section { background: var(--cream); padding: 96px 24px 112px; }
.commentary-inner { max-width: 900px; margin: 0 auto; }
.commentary-empty {
  border: 1px solid rgba(117,38,31,0.22);
  padding: 48px 40px;
  text-align: center;
}
.commentary-empty p {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.8;
  color: #6b6b6b;
  margin: 0;
}
@media (max-width: 600px) {
  .commentary-section { padding: 56px 20px 68px; }
  .commentary-empty { padding: 32px 24px; }
}

/* ─── CTA on a light ground ───
   `.dse-link` is white-on-dark; light sections need the inverse. */
.cta-light {
  font-family: 'Josefin Sans', sans-serif; font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--crimson);
  text-decoration: none; border: 1px solid rgba(117,38,31,0.45);
  padding: 13px 26px;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, padding 0.3s ease;
  display: inline-flex; align-items: center; gap: 10px;
}
.cta-light:hover { background: var(--crimson); border-color: var(--crimson); color: #fff; padding-right: 32px; }
.cta-light .arrow { transition: transform 0.3s ease; }
.cta-light:hover .arrow { transform: translateX(4px); }

/* ─── Long compound names must be breakable at 320px ───
   "Corporate/Commercial Litigation" has no space to break on, so at phone
   widths it set the min-content width of its grid column and pushed the whole
   page 11–24px wide. break-word only kicks in when the word genuinely cannot
   fit, so nothing changes at any other width. */
h1, h2, h3, .practice-name h3, .banner-title, .teaser h2, .letter-head h2 {
  overflow-wrap: break-word;
}
.practice-item, .practice-name, .practice-body, .case-head { min-width: 0; }

/* ─── DSE page plate ─── */
.dse-plate { margin: 44px 0 0; }
.dse-plate img { display: block; width: 100%; height: auto; }

/* `.dse-person` was written for the charcoal home-page band; on the cream DSE
   page its light-on-dark colours were all but invisible. */
.page-body .dse-person { margin: 0; padding-left: 16px; border-left: 2px solid var(--crimson); }
.page-body .dse-person strong { color: var(--charcoal); font-size: 16px; }
.page-body .dse-person span { color: #6b6b6b; font-size: 13.5px; margin-top: 4px; }

/* Teaser photographs — the client asked for the firm site's front-page photo on
   the home page (markup p.3). It now sits in the Danson Delavar LLP slot, where
   it belongs: it is the portrait pair of the two named partners, and over
   "Selected Case Profiles" it read as a mismatch. Swapped with the library plate
   2026-09-04. The per-file object-position tuning further down is keyed to the
   filenames, so both crops followed their images across the swap. */
.teaser-media { margin: -48px -40px 28px; overflow: hidden; }
.teaser-media img { display: block; width: 100%; height: 190px; object-fit: cover; object-position: center 22%; }
@media (max-width: 900px) {
  .teaser-media { margin: -36px -26px 24px; }
  .teaser-media img { height: 200px; }
}

/* ─── Masthead: "Timothy" (2026-08-31, his instruction) ───
   The wordmark went from 269px to 356px, which pushed "Selected Case Profiles"
   onto a third line between 901px and ~1200px. Scaling the wordmark and the
   link gap over that band restores the layout it had as "Tim"; the size is
   unchanged from 1200px up, where it always fitted. */
@media (min-width: 901px) and (max-width: 1199px) {
  .nav-logo,
  #site-nav.scrolled .nav-logo { font-size: 21px; }
  .nav-links { gap: 24px; }
}
@media (min-width: 901px) and (max-width: 1023px) {
  /* Tightest desktop band: also pull in the grid gutter so "Selected Case
     Profiles" still sets on two lines rather than three. */
  #site-nav { column-gap: 32px; }
  .nav-logo,
  #site-nav.scrolled .nav-logo { font-size: 19px; }
  .nav-links { gap: 18px; }
}

/* ══════════════════════════════════════════════════════════════════
   2026-09-02 POLISH — final tier. Small-element refinements from the
   sixteen-lens audit (PROJECT_STATUS, session 15). Append-only: every
   rule here deliberately overrides an earlier tier, and the mobile
   sub-blocks sit after the desktop rules they refine. Structure, IA,
   type system, palette and the client's copy are untouched.
   ══════════════════════════════════════════════════════════════════ */

/* ─── Canvas, rendering, selection ─── */
:root { color-scheme: only light; }
html { background: #111; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html:has(body.nav-light) { background: var(--off-white); }
html:has(body.page-contact) { background: var(--charcoal); }
body { font-kerning: normal; text-rendering: optimizeLegibility; }
body.page-contact { background: var(--charcoal); }
::selection { background: rgba(117,38,31,0.22); }
.page-banner ::selection, .principles-section ::selection, .practice-proof ::selection,
#contact ::selection, footer ::selection { background: rgba(194,74,63,0.55); color: #fff; }
/* light type on dark grounds reads heavy with subpixel AA on macOS/iOS */
.page-banner, .principles-section, .practice-proof, #contact, footer {
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* screen-reader-only text (external-link hints) */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* programmatic scroll targets are not controls: no ring around a whole column */
#main-content:focus-visible, #contents:focus-visible, .case-toc:focus { outline: none; }
/* the ring colour is 2.97:1 on the charcoal bands — use the on-dark token there */
#contact :focus-visible, .practice-proof :focus-visible { outline-color: var(--crimson-soft); }

/* ─── Masthead ─── */
#site-nav.scrolled { background: rgba(248,245,240,0.96); }            /* warm, not white, over cream */
body.nav-light #site-nav.scrolled { background: rgba(248,245,240,0.97); }
/* the current-page marker was --crimson-light on the near-black banner: ~2:1 */
body:not(.nav-light) #site-nav:not(.scrolled):not(.menu-open) .nav-links a::after { background: var(--crimson-bright); }
/* the underline stops at the last glyph, not at the trailing letter-space */
.nav-links a:hover::after, .nav-links a.active::after { width: calc(100% - 0.26em); }
@media (max-width: 1300px) {
  .nav-links a:hover::after, .nav-links a.active::after { width: calc(100% - 0.18em); }
}
@media (min-width: 901px) {
  .nav-links { position: relative; top: -2px; }                        /* Josefin sits low in its em box */
}
@media (min-width: 1024px) and (max-width: 1095px) {
  .nav-links a { letter-spacing: 0.10em; }                             /* "Selected Case Profiles" on one line */
}
@media (max-width: 900px) {
  /* the ≤1300 rule (32px) was written after this tier and had been winning on phones */
  #site-nav { padding: 0 24px; }
  #site-nav::after { left: 24px; right: 24px; }
  /* the masthead used to GROW from 68 to 76px on scroll — the desktop shrink, inverted */
  #site-nav.scrolled { height: 68px; }
  #site-nav.scrolled .nav-logo { font-size: 20px; }
  .nav-logo { padding: 10px 0; margin: -10px 0; }                     /* 44px target */
  #site-nav.menu-open { background: rgba(248,245,240,0.98); }
  #site-nav.menu-open .nav-logo { color: var(--charcoal); }           /* "Timothy" stayed white on the open panel */
  #site-nav.menu-open .nav-links a { padding: 16px 32px; }            /* 45px rows */
  #site-nav.menu-open .nav-links a.active { color: var(--crimson); }
  /* hamburger → cross */
  .mobile-toggle span { transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), opacity 0.2s ease, background 0.3s; transform-origin: center; }
  #site-nav.menu-open .mobile-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  #site-nav.menu-open .mobile-toggle span:nth-child(2) { opacity: 0; }
  #site-nav.menu-open .mobile-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}
@media (max-width: 600px) {
  #site-nav { padding: 0 22px; }
  #site-nav::after { left: 22px; right: 22px; }
}
@media (max-width: 360px) {
  #site-nav { padding: 0 16px; }
  #site-nav::after { left: 16px; right: 16px; }
  #site-nav.scrolled .nav-logo { font-size: 17px; }
  #site-nav.menu-open .nav-links a { font-size: 12px; letter-spacing: 0.18em; }
}

/* ─── Containers and rhythm — one gutter, one banner→content distance ─── */
.page-body { padding: 96px 56px 104px; }
.page-banner + .practice-areas-section { padding-top: 96px; }
.banner-title { margin-bottom: 0; }                                    /* the 28px was for a lede no page carries */
.dossier { max-width: 1200px; }
.practice-areas-section .practice-inner { max-width: 1200px; }
.principles-inner { max-width: 1200px; }                               /* rules align with the plate above and the grid below */
.firm-wrap { max-width: 1312px; margin: 0 auto; padding: 96px 56px 104px; }   /* 1200 content box, like every other page */
.news-section { background: var(--cream); padding: 88px 24px 72px; }  /* one ground with the Commentary band below it */
.news-head { margin-bottom: 40px; }
.commentary-section { padding: 80px 24px 104px; }
footer { border-top: 1px solid rgba(255,255,255,0.08); }              /* the charcoal bands met #111 with a bare step */
@media (max-width: 900px) {
  .page-body { padding: 72px 24px 80px; }
  .page-banner + .practice-areas-section { padding-top: 72px; }
  .firm-wrap { padding: 72px 24px 84px !important; }
  .firm-statement-left { margin-left: 0; }
  .firm-sidebar { max-width: 640px; margin-left: 0; }
  .commentary-section { padding: 64px 24px 80px; }
}
@media (max-width: 600px) {
  .page-body { padding: 56px 22px 72px; }
  .page-banner + .practice-areas-section { padding-top: 56px; }
  .firm-wrap { padding: 56px 22px 72px !important; }
  #hero, .teasers-section, .news-section, .commentary-section { padding-left: 22px; padding-right: 22px; }
  .commentary-section { padding-top: 56px; padding-bottom: 72px; }
  .banner-title { font-size: clamp(28px, 9.2vw, 52px); overflow-wrap: anywhere; }   /* "ENTERTAINMENT" overflowed ≤430 */
}

/* ─── Inner-page banner ─── */
.page-banner {
  background:
    radial-gradient(120% 100% at 80% 30%, rgba(117,38,31,0.30) 0%, transparent 55%),
    radial-gradient(100% 80% at 15% 90%, rgba(0,0,0,0.55) 0%, transparent 60%),
    linear-gradient(165deg, #1a1a1a 0%, #0e0e0e 55%, #161010 100%);
  background-color: #141010;
}
.banner-eyebrow { font-weight: 500; font-size: 12px; letter-spacing: 0.36em; }   /* one eyebrow spec across the site */

/* ─── Home: hero ─── */
#hero { padding: 168px 56px 96px; }                                    /* same gap under the masthead as the inner pages */
.hero-role { line-height: 1.5; }
@media (min-width: 901px) {
  .hero-portrait::after { left: -16px; bottom: -16px; width: 120px; height: 120px; }
}
@media (min-width: 901px) and (max-width: 1024px) { #hero { padding: 132px 56px 72px; } }
@media (max-width: 900px) { #hero { padding: 132px 24px 72px; } }
@media (min-width: 601px) and (max-width: 900px) { .hero-portrait { max-width: 540px; } }
@media (max-width: 600px) {
  #hero { padding: 116px 22px 58px; }
  .hero-tagline { font-weight: 400; }
}
@media (max-width: 360px) { .hero-role { letter-spacing: 0.22em; } }

/* ─── Home: Six Guiding Principles ─── */
.principles-head h2 { text-indent: 0.16em; }                           /* trailing tracking pulled the centred line left */
.principle-quote { text-indent: -0.38em; }                             /* the opening quote hangs; first letters align */
.principle-num { color: var(--crimson-soft); }
.principle-attr { line-height: 1.7; text-wrap: balance; }
.principle:hover { background: transparent; }                          /* rows are not links */

/* ─── Home: teasers ─── */
.teaser p { font-size: 16px; font-weight: 400; line-height: 1.7; color: #3a3a3a; }
/* `.teaser p` outranked `.teaser-eyebrow`, so the eyebrows had been rendering as grey 15px Inter */
.teaser p.teaser-eyebrow {
  font-family: 'Josefin Sans', sans-serif; font-size: 11px; font-weight: 600; line-height: 1.4;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--crimson); margin: 0 0 18px;
}
.teaser-media img[src*="dd-front-pair"] { object-position: center 0%; }   /* no headroom in the source */
.teaser-media img[src*="firm-library"] { object-position: 0% 35%; }
.teaser:active { background: #E8E0D5; transition-duration: 0s; }
@media (min-width: 901px) and (max-width: 1200px) {
  .teaser { padding: 40px 28px 36px; }
  .teaser-media { margin: -40px -28px 24px; }
  .teaser p.teaser-eyebrow { letter-spacing: 0.24em; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .teaser-media img { height: auto; aspect-ratio: 5 / 2; }
}

/* ─── CTA family ─── */
.cta-light, .dse-link { min-height: 44px; box-sizing: border-box; }
.cta-light { border-color: rgba(117,38,31,0.6); }                      /* .45 composited to 2.4:1 on cream */
.form-submit {
  font-family: 'Josefin Sans', sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em;
  padding: 14px 32px; min-height: 44px; border-color: rgba(255,255,255,0.42);
}
.form-submit:disabled, .form-submit[aria-disabled="true"] { border-color: rgba(255,255,255,0.42); opacity: 0.45; cursor: default; background: transparent; }
.cta-light:active, .dse-link:active, .form-submit:active { background: var(--crimson-light); border-color: var(--crimson-light); color: #fff; transition-duration: 0s; }
/* DSE page: two CTAs side by side — hover must not shove the neighbour */
.page-body .dse-links .cta-light:hover { padding-right: 26px; }
.page-body .dse-links .cta-light:hover .arrow { transform: translateX(6px); }
@media (min-width: 601px) {
  .page-body .dse-links .cta-light { flex: 1 1 0; justify-content: center; }
}
@media (max-width: 600px) {
  .page-body .dse-links { flex-direction: column; align-items: stretch; gap: 12px; }
  .page-body .dse-links .cta-light, .proof-text .dse-link, .notfound-links .cta-light {
    width: 100%; justify-content: space-between; letter-spacing: 0.15em; padding-left: 20px; padding-right: 20px;
  }
  .page-body .dse-links .cta-light:hover, .proof-text .dse-link:hover { padding-right: 20px; }
}

/* ─── Photographic plates — one corner, one lift ─── */
.letter-feature img, .proof-photo img, .archival-plate img, .dse-plate img { border-radius: 2px; }
.firm-partner-photo.tim-bio-photo { border-radius: 2px; background: #E6E0D7; }   /* was the firm site's #1a1a1a placeholder */
.firm-partner-photo.tim-bio-photo img { transition: none; }
.firm-partner-card:hover .firm-partner-photo.tim-bio-photo img { transform: none; }   /* not a link */
.proof-photo img { box-shadow: 0 22px 56px -24px rgba(0,0,0,0.55); }
.dse-plate img { box-shadow: 0 24px 60px -28px rgba(42,42,42,0.42); }

/* ─── Caption tier: 400 weight, ≥13px, a shade darker ─── */
.archival-plate figcaption, .letter-feature figcaption, .case-note, .firm-stat-caption, .commentary-empty p { font-weight: 400; }
.archival-plate figcaption, .letter-feature figcaption { font-size: 13px; color: #5c5c5c; }
.firm-stat-caption { font-size: 13px; color: #4a4a4a; line-height: 1.5; }
.proof-caption { font-size: 13.5px; font-weight: 400; color: rgba(255,255,255,0.7); }
.proof-caption cite { font-style: normal; }                            /* the case name inside an italic caption */
.page-body .dse-person span { font-style: normal; font-weight: 400; font-size: 14px; color: #555; }
.case-note { max-width: 60ch; }
.teaser p, .commentary-empty p, .proof-caption, .letter-feature figcaption, .case-note, .firm-stat-caption,
.contact-details > p, .page-body .dse-person span, .dse-text p, .legacy-block { text-wrap: pretty; }

/* ─── Micro-labels: nothing under 11px ─── */
.firm-stat-eyebrow, .firm-forums-label { font-size: 11px; letter-spacing: 0.32em; text-indent: 0.32em; }
.firm-statement-closing .closing-tagline { font-size: 11px; letter-spacing: 0.32em; text-indent: 0.32em; }
.firm-partner-role { font-size: 11px; font-weight: 400; }
.firm-forums li { font-size: 12px; font-weight: 400; letter-spacing: 0.15em; line-height: 1.25; }
.firm-forums ul { gap: 8px; }
.firm-forums li::before { top: 5px; }                                  /* the dashes sat on the baseline like underscores */
.firm-stat-figure em { font-weight: 400; }

/* ─── About ─── */
.firm-statement-left > .bio-copy + .bio-copy { margin-top: 18px; }
.firm-statement-left > .legacy-block + .bio-copy { margin-top: 28px; }
.legacy-block {
  font-family: 'Inter', sans-serif; font-style: italic; font-size: 15px; font-weight: 400; line-height: 1.75;
  color: #4a4a4a; margin: 28px 0 0; padding-left: 16px; border-left: 2px solid var(--crimson);
}
.drop-cap::first-letter { font-size: 3.4em; line-height: 0.8; padding: 5px 10px 0 0; }   /* a two-line cap for a two-line lead */
.firm-sidebar { padding-top: 8px; }                                    /* portrait top meets the cap height of line one */
.firm-statement-closing .closing-logo { width: 168px; opacity: 0.92; }
@media (max-width: 600px) { .firm-statement-closing .closing-logo { width: 152px; } }

/* ─── Area of Practice ─── */
.practice-name h2 {
  font-family: 'Cinzel', serif; font-size: clamp(17px, 1.45vw, 22px); font-weight: 500; line-height: 1.22;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--charcoal); margin: 0;
}
.practice-list.tim .practice-name h2 { min-height: 2.4em; }
.practice-item:hover { background: transparent; }                      /* cells are not links */
.proof-cta { margin: 32px 0 0; }
@media (min-width: 901px) {
  /* 14 areas in three columns left a dangling empty cell; the last two now share the row */
  .practice-list.tim { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .practice-list.tim .practice-item { grid-column: span 2 !important; background: transparent; }
  .practice-list.tim .practice-item:nth-last-child(-n+2) { grid-column: span 3 !important; }
  /* bodies stay level across a row without reserving two heading lines in every cell */
  @supports (grid-template-rows: subgrid) {
    .practice-list.tim .practice-item { display: grid; grid-template-rows: subgrid; grid-row: span 2; }
    .practice-list.tim .practice-name h2 { min-height: 0; }
  }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .practice-list.tim .practice-item { padding: 36px 26px 40px; }
  .practice-list.tim .practice-name h2 { font-size: 17px; letter-spacing: 0.03em; }
}
@media (max-width: 900px) { .practice-name h2 { font-size: 22px; } }
@media (min-width: 601px) and (max-width: 900px) {
  .practice-list.tim { grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 1px solid rgba(117,38,31,0.22); }
  .practice-list.tim .practice-item { padding: 28px 24px 30px; border-right: 1px solid rgba(117,38,31,0.22); }
  .practice-name h2 { font-size: 19px; }
}
/* the proof band: on-token reds, a quieter list */
.proof-eyebrow { font-size: 12px; letter-spacing: 0.36em; color: var(--crimson-soft); }
.proof-eyebrow::before { background: var(--crimson-soft); }
.proof-tribunals-label { font-size: 12px; margin-bottom: 24px; }
.proof-tribunals-label::after { display: none; }                       /* two dashes pointing opposite ways */
.proof-caption a { border-bottom-color: rgba(218,138,124,0.45); }
.proof-tribunals { line-height: 1.4; }
.proof-tribunals li { padding: 6px 0 6px 14px; }
.proof-tribunals li::before { top: calc(6px + 0.55em); background: rgba(218,138,124,0.55); }
@media (min-width: 901px) and (max-width: 1279px) { .proof-tribunals { column-count: 1; } }
@media (max-width: 900px) {
  .proof-photo { align-items: flex-start; }
  .proof-caption { text-align: left; }
}
@media (max-width: 600px) {
  .proof-eyebrow { font-size: 11px; letter-spacing: 0.28em; gap: 14px; align-items: flex-start; }
  .proof-eyebrow::before { width: 36px; flex: none; margin-top: 0.55em; }
  .proof-figure, .proof-photo img, .proof-caption { max-width: 100%; }
}

/* ─── DSE page ─── */
.dse-body { max-width: 820px; }
.dse-body .bio-copy { max-width: 70ch; }
.dse-body .bio-copy + .bio-copy { margin-top: 22px; }
.dse-body .dse-person { margin-top: 34px; }
.dse-body .dse-links { margin-top: 40px; }

/* ─── News ─── */
.news-body { font-size: 16px; line-height: 1.75; }
.news-title, .news-body { max-width: 72ch; }
.news-title:last-child { margin-bottom: 0; }                           /* the item with no body */
.news-item:first-of-type { border-top: 1px solid rgba(117,38,31,0.18); }
.news-item:last-of-type { border-bottom: 1px solid rgba(117,38,31,0.18); }
.commentary-empty { border: 0; padding: 0; max-width: 620px; margin: 0 auto; }   /* a quiet note, not an empty box */
.commentary-empty p { font-size: 16px; font-weight: 400; line-height: 1.8; }

/* ─── Contact — the one page without a banner ─── */
#contact { padding: 168px 56px 104px; }                                /* the eyebrow sat under the 88px masthead */
#contact h1 {
  font-family: 'Cinzel', serif; font-size: clamp(28px, 3vw, 40px); font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: #fff; margin-bottom: 14px; text-align: center; text-indent: 0.14em;
}
#contact h1::after { content: ''; display: block; width: 72px; height: 1px; background: var(--crimson-bright); margin: 18px auto 0; }
#contact .contact-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.36em; margin-bottom: 22px; text-indent: 0.36em; }
#contact .contact-intro { text-wrap: balance; margin-bottom: 36px; }
.form-field label { font-family: 'Josefin Sans', sans-serif; font-weight: 600; font-size: 11.5px; letter-spacing: 0.2em; }
.form-field input, .form-field textarea { border-bottom-color: rgba(255,255,255,0.38); }
.form-field input:focus, .form-field textarea:focus { border-bottom-color: var(--crimson-soft); box-shadow: 0 1px 0 var(--crimson-soft); }
#form-status { margin-top: 16px; min-height: 21px; font-size: 14px; color: rgba(255,255,255,0.62); }
.contact-details h2 { font-weight: 500; letter-spacing: 0.04em; }
.contact-detail-row p { font-size: 15px; }
.contact-detail-row strong { font-weight: 500; color: rgba(255,255,255,0.85); }
.contact-detail-row svg { stroke: var(--crimson-bright); }
.contact-detail-row p a {
  display: inline-block; padding: 3px 0; margin: -3px 0;
  text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(255,255,255,0.28);
  text-underline-offset: 4px; transition: color 0.2s, text-decoration-color 0.2s;
}
.contact-detail-row p a:hover { text-decoration-color: rgba(255,255,255,0.7); }
.contact-detail-row a.tel { white-space: nowrap; }
.tel-tag { font-family: 'Josefin Sans', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--crimson-soft); margin-left: 6px; }
.tel-ext { color: rgba(255,255,255,0.62); }
.tel-fax { font-size: 13px; color: rgba(255,255,255,0.62); }
.detail-strong { font-weight: 500; color: rgba(255,255,255,0.85); margin-bottom: 4px; }
.detail-sub { font-size: 14px; margin-bottom: 4px; }
.detail-note { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.62); }
.detail-row-firm { margin-top: 8px; }
.detail-row-here { margin-top: 20px; }
.contact-disclaimer { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,0.58); margin-top: 28px; }
.get-directions-link { color: var(--crimson-soft); border-bottom-color: rgba(218,138,124,0.5); }
@media (max-width: 900px) { #contact { padding: 132px 24px 80px; } }
@media (min-width: 601px) and (max-width: 900px) { .contact-form-grid { max-width: 600px; margin: 0 auto; } }
@media (max-width: 600px) {
  #contact { padding: 116px 22px 72px; }
  .form-field input { padding: 12px 0; }
}

/* ─── Footer — two rows on desktop, so eight links never wrap by accident ─── */
.footer-links a { font-family: 'Josefin Sans', sans-serif; font-size: 11px; font-weight: 400; letter-spacing: 0.18em; display: inline-block; padding: 14px 0; }   /* 12px gave a 35px hit area; 14px clears 40px */
.footer-links { row-gap: 0; }
.footer-legal { font-size: 11.5px; letter-spacing: 0.18em; }
.footer-legal a { display: inline-block; padding: 6px 0; margin: -6px 0; }
.footer-logo-img { filter: brightness(1.15); }
.footer-copy { text-wrap: balance; }
@media (min-width: 901px) {
  footer {
    display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "logo . copy" "links links links";
    align-items: center; row-gap: 22px; padding: 36px 56px 30px;
  }
  .footer-logo-img { grid-area: logo; }
  .footer-copy-stack { grid-area: copy; }
  footer > nav { grid-area: links; }
  .footer-links { justify-content: center; gap: 0 26px; }
}
@media (min-width: 901px) and (max-width: 1300px) { footer { padding-left: 32px; padding-right: 32px; } }
@media (max-width: 900px) {
  footer { gap: 20px; padding: 32px 24px 28px; }
  .footer-copy-stack { align-items: center; }
  .footer-links { column-gap: 22px; }
}
@media (max-width: 360px) { .footer-copy { font-size: 11px; letter-spacing: 0.02em; } }

/* ─── Phones: hyphenate the long legal compounds in a 34ch measure ─── */
@media (max-width: 600px) {
  .bio-copy, .case-intro p, .case-body p, .letter-body p, .practice-body p {
    -webkit-hyphens: auto; hyphens: auto; -webkit-hyphenate-limit-chars: 8 4 4; hyphenate-limit-chars: 8 4 4;
  }
}

/* ─── Reduced motion: the CTAs and masthead still animated ─── */
@media (prefers-reduced-motion: reduce) {
  #site-nav, .nav-logo, .nav-links a, .nav-links a::after, .cta-light, .dse-link, .cta-light .arrow, .dse-link .arrow,
  .teaser, .teaser .teaser-more .arrow, .practice-item, .principle, .mobile-toggle span, .form-submit,
  .get-directions-link, .contact-detail-row p a { transition: none !important; }
  .cta-light:hover, .dse-link:hover { padding-right: 26px; }
  .cta-light:hover .arrow, .dse-link:hover .arrow, .teaser:hover .teaser-more .arrow { transform: none; }
}

/* ─── Print: a lawyer's profile gets printed ─── */
@media print {
  #site-nav, footer, .skip-link, form[name="contact"], .case-rail, .case-back, .mobile-toggle, .vh { display: none !important; }
  html, body, #hero, .page-banner, .page-body, .principles-section, .practice-proof, #contact,
  .teasers-section, .firm-statement, .news-section, .commentary-section, .teaser, .practice-item { background: #fff !important; color: #000 !important; }
  .page-banner::before, .principles-section::before, .practice-proof::before { display: none; }
  html.js .reveal { opacity: 1 !important; transform: none !important; }
  .page-banner { padding: 24px 0 8px; }
  .page-body, .firm-wrap, #hero, .principles-section, .teasers-section, .practice-areas-section, #contact { padding: 16px 0 !important; }
  .banner-title, .banner-eyebrow, .hero-wordmark, .hero-wordmark .danson, .principle-quote, .principle-attr, .principle-num,
  .principles-head h2, .proof-eyebrow, .proof-tribunals-label, .proof-tribunals, .proof-caption, .proof-caption a,
  #contact h1, #contact .contact-eyebrow, #contact .contact-intro, .contact-details, .contact-details h2,
  .contact-detail-row p, .contact-detail-row a, .contact-disclaimer, .tel-ext, .tel-fax, .detail-note { color: #000 !important; }
  .banner-title::after, .principles-head h2::after, #contact h1::after { background: #000; }
  .hero-portrait img, .proof-photo img, .dse-plate img, .letter-feature img { box-shadow: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
}

/* ─── 404 ─── */
.notfound { max-width: 640px; }
.notfound-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
@media (max-width: 600px) {
  .notfound-links { flex-direction: column; align-items: stretch; }
  .notfound-links .cta-light { justify-content: space-between; }
}

/* ─── polish follow-ups (QA round) ─── */
@media (min-width: 901px) {
  /* the coda tint had a (0,4,0) selector; the closing pair now carries the row like any other */
  .practice-list.tim .practice-item:nth-last-child(-n+2) { background: transparent; }
  /* text-wrap: balance + the <wbr> after the slash gave "CORPORATE/" its own line; greedy wrap
     keeps "Corporate/Commercial" together wherever it fits and only falls back to the slash */
  .practice-list.tim .practice-item:first-child .practice-name h2 { text-wrap: wrap; }
}
/* masthead bands, measured against the left column (about.html, Chrome): the three
   left labels need 308px at 1024 (11px / 0.10em / 16px gaps) and get 320; from 1096
   the column is ≥356px, so tracking can open to 0.14em; 1200+ keeps 0.18em / 24px */
@media (min-width: 1024px) and (max-width: 1095px) { .nav-links { gap: 16px; } }
@media (min-width: 1096px) and (max-width: 1199px) { .nav-links a { letter-spacing: 0.14em; } .nav-links { gap: 20px; } }

/* sweep follow-ups: the two DSE CTAs are too wide to sit side by side under 900px */
@media (min-width: 601px) and (max-width: 900px) {
  .page-body .dse-links { flex-direction: column; align-items: stretch; gap: 12px; }
  .page-body .dse-links .cta-light { flex: none; width: 100%; justify-content: space-between; }
  .page-body .dse-links .cta-light:hover { padding-right: 26px; }
}

/* ══════════════════════════════════════════════════════════════════
   2026-09-04 — NEWS & EVENTS given a spine.

   The page carries three items, all from 2019, and one of them has no
   body. Set as a flat list it read as an unfinished page rather than a
   sparse one. Grouping under a sticky year mark gives it structure that
   is legible at three items and is the right structure at thirty: a new
   year is a new group, and the newest item of the newest group leads.
   No copy is added — the year mark is his own dateline.
   ══════════════════════════════════════════════════════════════════ */

.news-year { position: relative; }
.news-year + .news-year { margin-top: 72px; }

/* The mark hangs in its own column from tablet up and stays with its group
   while that group is being read. Below 860px it sits above the items. */
.news-year-mark {
  font-family: 'Cinzel', serif; font-weight: 500;
  font-size: clamp(30px, 3.4vw, 42px); line-height: 1;
  color: var(--crimson); margin: 0 0 22px;
  letter-spacing: 0.04em;
}
@media (min-width: 860px) {
  .news-year { display: grid; grid-template-columns: 132px minmax(0,1fr); gap: 0 56px; align-items: start; }
  .news-year-mark { position: sticky; top: 122px; margin: 0; text-align: right; }
}

/* The items themselves keep the hairline rhythm they had; the group now owns
   the top and bottom rules, so a second year does not double them up. */
.news-items > .news-item:first-of-type { border-top: 1px solid rgba(117,38,31,0.18); }
.news-items > .news-item:last-of-type { border-bottom: 1px solid rgba(117,38,31,0.18); }
.news-item { padding: 30px 0; }

/* Lead: the most recent item is set larger, as the front of a section should be. */
.news-item.is-lead { padding-top: 34px; padding-bottom: 34px; }
.news-item.is-lead .news-title { font-size: clamp(21px, 2.3vw, 27px); line-height: 1.28; margin-bottom: 12px; }
.news-item.is-lead .news-body { font-size: 17px; line-height: 1.72; color: #333; }

/* An item with a dateline and a headline but no body is a normal index entry,
   not a broken one — give the headline the closing space the body would have. */
.news-item .news-title:last-child { margin-bottom: 0; }

/* The Commentary band is an empty state until he files his first piece; a
   crimson rule and a wider measure make it read as reserved, not missing. */
.commentary-empty { border-left: 2px solid var(--crimson); padding-left: 22px; margin: 0 auto; max-width: 640px; text-align: left; }   /* the band's heading is centred; the block stays centred, its text does not */

@media (max-width: 600px) {
  .news-item { padding: 24px 0; }
  .news-item.is-lead { padding-top: 26px; padding-bottom: 26px; }
  .news-item.is-lead .news-body { font-size: 16px; }
  .news-year + .news-year { margin-top: 52px; }
  .commentary-empty { padding-left: 18px; }
}

/* ══════════════════════════════════════════════════════════════════
   2026-09-16 — CHANGES FROM THE MEETING WITH THE CLIENT.

   Kiarash met Mr. Danson in person; his notes are in
   client-updates/2026-09-16/. Each rule below says which note it answers.
   ══════════════════════════════════════════════════════════════════ */

/* ─── Home hero: a scroll cue, and a hero that fits the first screen ───
   "On the hero page add an element to indicate to scroll." At 1440×900 the
   hero ended 58px above the fold, which reads as the bottom of the page. On
   landscape screens from 901px the hero now fills the first screen less a
   40px sliver, so the dark principles band always peeks in. The portrait is
   scaled (never cropped) to fit on short laptop screens. The cue sits in the
   lockup where Learn More was: centred between the columns it crowded the
   portrait's corner. */
.hero-scroll {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: max-content; min-width: 44px; min-height: 44px;
  margin: 46px 0 0 -8px; padding: 4px 8px;
  text-decoration: none; color: var(--gray-warm);
}
.hero-scroll-label {
  font-family: 'Josefin Sans', sans-serif; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.32em; text-indent: 0.32em; text-transform: uppercase; line-height: 1;
}
.hero-scroll-line { position: relative; display: block; width: 1px; height: 44px; overflow: hidden; background: rgba(117,38,31,0.18); }
.hero-scroll-line::after {
  content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 16px;
  background: var(--crimson);
  animation: hero-scroll-drop 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes hero-scroll-drop { 0% { transform: translateY(-16px); } 70%, 100% { transform: translateY(44px); } }
.hero-scroll:hover { color: var(--crimson); }
@media (min-width: 901px) {
  #hero { display: flex; flex-direction: column; justify-content: center; padding-bottom: 96px; }
  .hero-inner { width: 100%; }
  .hero-portrait img { width: auto; max-width: 100%; max-height: max(380px, calc(100svh - 304px)); }
}
@media (min-width: 901px) and (max-width: 1024px) {
  .hero-portrait img { max-height: max(360px, calc(100svh - 268px)); }
}
/* Tall portrait tablets (1024×1366) already show the band and the doors on the
   first screen; stretching the hero there only opens a void above and below. */
@media (min-width: 901px) and (orientation: landscape) {
  #hero { min-height: calc(100vh - 40px); min-height: calc(100svh - 40px); }
}
@media (max-width: 600px) { .hero-scroll { margin-top: 34px; } }
@media (prefers-reduced-motion: reduce) { .hero-scroll-line::after { animation: none; transform: translateY(14px); } }
@media print { .hero-scroll, .home-coda { display: none !important; } }

/* ─── Home: Learn More, moved to the foot of the page ───
   "In order to not skip the main page, bring Learn More lower." It sat in the
   hero lockup and took visitors to About before they had seen the principles
   or the three doors. It now closes the page, on the teasers' ground. */
.teasers-section { padding-bottom: 64px; }
.home-coda { background: var(--cream); padding: 0 56px 104px; text-align: center; }
@media (max-width: 900px) { .teasers-section { padding-bottom: 48px; } .home-coda { padding: 0 24px 80px; } }
@media (max-width: 600px) { .teasers-section { padding-bottom: 40px; } .home-coda { padding: 0 22px 64px; } }

/* ─── Home: Six Guiding Principles, easier to read ───
   "The six guiding principles should be easier to view." Same band, same
   stacked rows (his format, 2026-08-28 item 7), same italic Cinzel — Kiarash
   asked to keep the tone and adjust the colour. The band warms toward the
   crimson of the inner-page banners; the grain drops back so it stops
   speckling the letterforms; the quotes move from 92% white to the site's
   cream at a larger size and a readable measure; the 11px attributions,
   the hardest thing on the band to read, grow and lighten. */
.principles-section {
  background:
    radial-gradient(90% 70% at 88% 0%, rgba(117,38,31,0.26) 0%, transparent 62%),
    radial-gradient(80% 60% at 6% 100%, rgba(117,38,31,0.12) 0%, transparent 60%),
    linear-gradient(172deg, #231d1b 0%, #1b1716 100%);
  background-color: #1d1817;
}
.principles-section::before { opacity: 0.16; }
.principles-grid { border-top-color: rgba(242,237,230,0.14); }
.principle { border-bottom-color: rgba(242,237,230,0.14); }
.principle-num { font-size: 17px; letter-spacing: 0.2em; padding-top: 7px; }
.principle-quote {
  color: var(--cream);
  font-size: clamp(19px, 1.95vw, 26px);
  line-height: 1.62;
  letter-spacing: 0.015em;
  max-width: 1000px;
  text-wrap: pretty;
}
.principle-attr { font-size: 12.5px; letter-spacing: 0.2em; color: #E6A597; }
.principle-attr span { color: rgba(242,237,230,0.66); }
@media (max-width: 600px) {
  .principle-quote { font-size: 19px; line-height: 1.6; }
  .principle-attr { font-size: 12px; letter-spacing: 0.16em; }
}

/* ─── About: his father's photograph and memoir ───
   From the meeting: a photograph of his father with fellow party leaders,
   captioned by Mr. Danson "When civility mattered in Canadian politics", set
   where the biography turns to his father. Monochrome original, so it keeps
   the Osgoode plate's grayscale treatment. The memoir is named beneath it. */
.firm-statement-left > .legacy-plate { margin: 34px 0 0; }
.legacy-plate img {
  display: block; width: 100%; height: auto; border-radius: 2px;
  filter: grayscale(1) contrast(1.02);
  box-shadow: 0 22px 48px -30px rgba(42,42,42,0.5);
}
.legacy-plate figcaption {
  font-family: 'Inter', sans-serif; font-style: italic; font-weight: 400;
  font-size: 13px; line-height: 1.6; color: #5c5c5c; margin-top: 12px;
}
.firm-statement-left > .legacy-memoir {
  font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.6; color: #5c5c5c;
  margin: 6px 0 0; text-wrap: pretty;
}
.legacy-memoir cite { font-style: italic; color: var(--charcoal); }
.firm-statement-left > .legacy-memoir + .bio-copy { margin-top: 34px; }
@media print { .legacy-plate img { box-shadow: none; } }

/* ─── Area of Practice: thirteen areas ───
   Environmental Protection and Conservation were joined into one area at the
   meeting. Twelve areas fill four rows of three; the joined area closes the
   grid on a full-width row of its own instead of the two half-rows before. */
@media (min-width: 901px) {
  .practice-list.tim .practice-item:nth-last-child(-n+2) { grid-column: span 2 !important; }
  .practice-list.tim .practice-item:last-child { grid-column: 1 / -1 !important; }
  .practice-list.tim .practice-item:last-child .practice-body p { max-width: 62ch; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .practice-list.tim .practice-item:last-child { grid-column: 1 / -1 !important; }   /* an earlier tier sets auto !important */
}

/* ─── DSE: Jake Danson's photograph ───
   Published at the meeting on the DSE page only (the home door keeps the logo
   image, at Kiarash's request), retouched so the sign reads DANSON DELAVAR LLP.
   The source is 986px wide, so the plate stops short of the 820px column rather
   than upscaling a near-square photo across it. */
.dse-plate img[src*="jake-danson-dse"] { max-width: 640px; }

/* ─── DSE holding page (dse-under-development.html) ───
   Stands in for the DSE website until it exists: no masthead, no footer, the
   inner-page banner's ground, and one way back. */
.holding {
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center; text-align: center;
  padding: 72px 24px;
  background:
    radial-gradient(120% 100% at 80% 30%, rgba(117,38,31,0.22) 0%, transparent 55%),
    radial-gradient(100% 80% at 15% 90%, rgba(0,0,0,0.55) 0%, transparent 60%),
    linear-gradient(165deg, #1a1a1a 0%, #0e0e0e 55%, #161010 100%);
  background-color: #141212;
  color: #fff;
}
.holding-inner { max-width: 720px; }
.holding-title {
  font-family: 'Cinzel', serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(32px, 6vw, 64px); line-height: 1.12; letter-spacing: 0.08em; text-indent: 0.08em;
  color: #fff; margin: 0;
}
.holding-rule { display: block; width: 64px; height: 1px; background: var(--crimson-bright); margin: 30px auto; }
.holding-status {
  font-family: 'Josefin Sans', sans-serif; font-weight: 400; font-size: 13px;
  letter-spacing: 0.3em; text-indent: 0.3em; text-transform: uppercase;
  color: var(--crimson-soft); margin: 0 0 44px;
}
.holding-back { justify-content: center; }
.holding-back:hover { padding-right: 26px; padding-left: 32px; }
.holding-back .arrow-back { transition: transform 0.3s ease; }
.holding-back:hover .arrow-back { transform: translateX(-4px); }
html:has(body > main > .holding) { background: #141212; }
@media (max-width: 600px) {
  .holding-title { font-size: clamp(24px, 8.2vw, 34px); letter-spacing: 0.05em; text-indent: 0.05em; }
  .holding-status { font-size: 12px; letter-spacing: 0.22em; text-indent: 0.22em; }
  .holding-back { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .holding-back:hover { padding-left: 26px; } .holding-back:hover .arrow-back { transform: none; } }
/* One DSE button now, not two: the rule that shared the row between them would
   stretch the survivor across the whole column. */
.page-body .dse-links .cta-light:only-child { flex: none; }
@media (max-width: 600px) { .page-body .dse-links .cta-light:only-child { width: 100%; justify-content: space-between; } }

/* ═══════════════════════════════════════════════════════════════════════
   2026-09-24 — THE CV, WORD FOR WORD
   Every paragraph taken from Tim's CV is now the CV's own text (set from the .docx
   by client-updates/2026-09-24/). The rules below only make room for what that
   brought: his father's two photographs side by side, the CV's Speaking
   Engagements under its own heading, and the CV's forms of two principles.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Home: principles II and IV as the CV sets them ───
   II carries no quotation marks in the CV, so the hanging-quote indent would push
   its first letter into the margin. IV names both sources inline, in brackets,
   between the two quotations; the names take the attribution colour, not the
   quotation's italic. */
.principle-quote.no-open { text-indent: 0; }
.principle-quote:last-child { margin-bottom: 0; }                    /* IV has no attribution line below it */
.principle-inline {
  font-family: 'Josefin Sans', sans-serif; font-style: normal; font-weight: 500;
  font-size: 0.56em; letter-spacing: 0.18em; text-transform: uppercase;
  color: #E6A597; white-space: nowrap;
}

/* ─── About: his father's two photographs ───
   The leaders photograph (Tim's favourite, with his caption of 2026-09-22) and the
   cover of the memoir, set at one height: each figure's share of the row is its
   image's aspect ratio (1320/1045 and 900/1310), so the two images end level.
   The cover is a colour original and stays in colour; the leaders print keeps its
   monochrome. Stacked on phones, the cover at a book's size, not a poster's. */
.firm-statement-left > .legacy-pair { display: flex; gap: 22px; align-items: flex-start; margin: 34px 0 0; }
.legacy-pair .legacy-plate { margin: 0; min-width: 0; }
.legacy-pair .legacy-leaders { flex: 1.2632 1 0; }
.legacy-pair .legacy-cover { flex: 0.6870 1 0; }
.legacy-pair .legacy-cover img { filter: none; }
.legacy-cover figcaption { font-style: normal; }
.legacy-cover figcaption cite { font-style: italic; color: var(--charcoal); }
.firm-statement-left > .legacy-pair + .bio-copy { margin-top: 34px; }
@media (max-width: 600px) {
  .firm-statement-left > .legacy-pair { flex-direction: column; gap: 30px; }
  .legacy-pair .legacy-plate { flex: none; width: 100%; }
  .legacy-pair .legacy-cover { width: 62%; }
}

/* ─── About: Speaking Engagements (the CV's next section) ─── */
.firm-statement-left > .bio-subhead {
  font-family: 'Cinzel', serif; font-weight: 400; text-transform: uppercase;
  font-size: 13px; letter-spacing: 0.3em; color: var(--crimson);
  margin: 46px 0 16px; padding-top: 30px;
  border-top: 1px solid rgba(117,38,31,0.18);
}
.firm-statement-left > .bio-subhead + .bio-copy { margin-top: 0; }

/* The CV's ninth membership is a sentence, not a name; give its wrapped lines air. */
.firm-forums li { line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════════════════
   2026-09-24 — QUICK POLISH BEFORE THE CALL
   ═══════════════════════════════════════════════════════════════════════ */
/* The small labels above the page titles and the home doors were removed from the
   markup: "Timothy S.B. Danson" repeated the masthead above every title, and "The
   Record / Beyond the Courtroom / The Firm" were our framing, the kind Tim has struck
   before. The title now opens the banner on its own. */

/* Browser surfaces in the house colour: selected text and the form caret. */
::selection { background: rgba(117,38,31,0.86); color: #fff; }
input, textarea, select { caret-color: var(--crimson-bright); }

/* ─── About: Speaking Engagements as its own band (2026-09-24) ───
   With the CV's full text the biography column ran ~1,500px past the sidebar,
   leaving the right half of the page empty for the whole of Speaking Engagements.
   It now closes the page as its own chapter: the lighter ground, a real heading,
   and the one long paragraph set in two columns on wide screens (the CV's single
   paragraph, unbroken; the columns only change where the lines fall). */
.about-speaking { background: var(--off-white); border-top: 1px solid rgba(117,38,31,0.12); }
.about-speaking-inner { max-width: 1312px; margin: 0 auto; padding: 88px 56px 96px; }
.about-speaking-title {
  font-family: 'Cinzel', serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(24px, 2.4vw, 32px); letter-spacing: 0.1em; line-height: 1.2;
  color: var(--charcoal); margin: 0 0 40px;
}
.about-speaking-title::after {
  content: ""; display: block; width: 72px; height: 1px; margin-top: 22px; background: var(--crimson);
}
.about-speaking-copy .bio-copy { margin: 0; }
@media (min-width: 1100px) {
  .about-speaking-copy { column-count: 2; column-gap: 72px; column-rule: 1px solid rgba(117,38,31,0.12); }
}
@media (max-width: 1099px) { .about-speaking-copy { max-width: 680px; } }
.about-speaking .firm-statement-closing { margin-top: 72px; }
@media (max-width: 900px) { .about-speaking-inner { padding: 72px 32px 84px; } }
@media (max-width: 600px) {
  .about-speaking-inner { padding: 60px 22px 72px; }
  .about-speaking-title { margin-bottom: 30px; }
  .about-speaking .firm-statement-closing { margin-top: 52px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   2026-09-25 — CHANGES FROM THE 24 SEPT CALL
   Kiarash's call with Mr. Danson on 2026-09-24 (notes and transcript in
   client-updates/2026-09-25/). Each rule says which request it answers.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Footer: his name, not the firm's ───
   "This is my personal website … I don't need people attributing my personal
   opinions to the law firm." The Danson Delavar logo (bottom left) and the
   "Partner, Danson Delavar LLP" line (bottom right) are gone from every page.
   His wordmark, set like the masthead's, takes the logo's grid cell, so the
   two-row desktop footer keeps its shape. */
.footer-wordmark {
  font-family: 'Cinzel', serif; font-weight: 500; font-size: 20px; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.9); text-decoration: none; white-space: nowrap;
  display: inline-block; padding: 10px 0; margin: -10px 0;             /* 44px target */
  transition: color 0.2s;
}
.footer-wordmark .accent { color: #C24A3F; transition: color 0.2s; }
.footer-wordmark:hover, .footer-wordmark:hover .accent { color: #fff; }
@media (min-width: 901px) { .footer-wordmark { grid-area: logo; } }
@media (max-width: 360px) { .footer-wordmark { font-size: 18px; letter-spacing: 0.08em; } }

/* ─── About: "When civility mattered in Canadian Politics." in bold ───
   "Can we bold just 'When civility mattered in Canadian politics' … it's
   honestly hard to find it because it's not bolded." Bold only, not larger
   (agreed on the call). Inter 600 is now loaded for it; the caption's italic
   stays as it was. */
.legacy-plate figcaption .legacy-line { font-weight: 600; color: var(--charcoal); }

/* ─── About: a scroll cue where the biography ends ───
   After "Tim loves all sports…" the two columns end level and the page reads as
   finished. "Just like you did on the other page": the home hero's cue (same
   label and falling line — the .hero-scroll-* rules, reduced-motion stop
   included), centred under both columns and pointing on to Speaking Engagements. */
.section-scroll {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: max-content; min-width: 44px; min-height: 44px;
  margin: 64px auto -40px; padding: 4px 8px;
  text-decoration: none; color: var(--gray-warm);
}
.section-scroll:hover { color: var(--crimson); }
@media (max-width: 600px) { .section-scroll { margin: 52px auto -28px; } }
#speaking { scroll-margin-top: 64px; }

/* ─── DSE: both companies in the title ───
   "Danson Sports & Entertainment & AdvanceSport Performance" — "a little bit
   smaller … it might be overwhelming", both names at one size. Each name keeps
   its own line on wide screens; on phones the words wrap naturally. */
.banner-title-long { font-size: clamp(34px, 4vw, 60px); line-height: 1.1; }
@media (max-width: 900px) { .banner-title-long .bt-break { display: none; } }
@media (max-width: 600px) { .banner-title-long { font-size: clamp(22px, 7vw, 34px); overflow-wrap: normal; } }

/* ─── DSE: Jake's photograph and the AdvanceSport logo, side by side ───
   "You know how you put the two pictures of my father side by side" — the same
   treatment as About: each figure's share of the row is its image's aspect
   ratio (986/930 and 1/1), so the two end level. The logo is the brand's own
   artwork, cropped from the AdvanceSport cover and left unaltered. Stacked on
   phones, the logo at a smaller size under the photograph. */
.dse-body > .dse-pair { display: flex; gap: 22px; align-items: flex-start; margin: 44px 0 0; }
.dse-pair .dse-plate { margin: 0; min-width: 0; }
.dse-pair .dse-jake { flex: 1.0602 1 0; }
.dse-pair .dse-logo { flex: 1 1 0; }
.dse-pair .dse-plate img[src*="jake-danson-dse"] { max-width: none; }
@media (max-width: 600px) {
  .dse-body > .dse-pair { flex-direction: column; gap: 24px; }
  .dse-pair .dse-plate { flex: none; width: 100%; }
  .dse-pair .dse-logo { width: 62%; }
}

/* ─── Masthead: "DSE/AdvanceSport" ───
   "What if it said DSE slash … Advanced Sport? … Let's try it." It is the longest
   right-hand label yet: the right column now needs ~15px more than the left
   (441px vs 425 at 12px type). Set as his note writes it, without spaces round
   the slash (the spaced form wrapped at 1440 and 1200), with a <wbr> after the
   slash so the 901–1023 band sets it on two lines the way it already sets
   "Selected Case Profiles". Measured on dse.html, Chrome:
   - 1301–1439 had no band of its own: at full-size type "Selected Case Profiles"
     already wrapped there (425px needed, 400–445 given — every 1366 laptop). The
     compact type of the ≤1300 band now runs to 1439.
   - the link gaps close 4px in the three bands where the right column was within
     a few pixels of its content (both columns alike, so the masthead stays even). */
@media (min-width: 1301px) and (max-width: 1439px) {
  .nav-links a { font-size: 11px; letter-spacing: 0.18em; }
  #site-nav { padding: 0 32px; column-gap: 26px; }
  #site-nav::after { left: 32px; right: 32px; }
}
@media (min-width: 1440px) and (max-width: 1599px) { .nav-links { gap: 24px; } }
@media (min-width: 1200px) and (max-width: 1439px) { .nav-links { gap: 16px; } }
@media (min-width: 1024px) and (max-width: 1095px) { .nav-links { gap: 12px; } }
/* 901–1023, the narrowest desktop band (found by review after the first pass):
   "ADVANCESPORT" is now the longest unbreakable word in the masthead, and at
   11px/0.18em the right column's min-content (324px) outgrew the left's, so the
   two 1fr columns went unequal — the wordmark sat up to 48px left of centre and
   "Selected Case Profiles" took three lines. The columns are held equal here
   (minmax(0, 1fr)) and the type steps down to fit them: right column 267px at
   901, in a 276px column. The wordmark is centred throughout, and "Selected Case
   Profiles" sets on one line from ~930px (two below). */
@media (min-width: 901px) and (max-width: 1023px) {
  #site-nav { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 22px; }
  .nav-links { gap: 12px; }
  .nav-links a { font-size: 10.5px; letter-spacing: 0.08em; }
}

/* ─── Home: the longer closing button ───
   "Learn more about Tim Danson's background" (his wording on the call) sets on two
   lines below ~430px; the single-line button's line box left them touching. */
.home-coda .cta-light { line-height: 1.55; text-align: center; }

/* 2026-09-26 — the About sidebar's "Professional Associations and Memberships"
   label is set flush left, not centred, so the text-indent that balanced the
   tracking on the centred labels (2026-09-02 polish) only pushed its first line
   3.5px right of its second line and of the list below it. */
.firm-forums-label { text-indent: 0; }

/* ══════════════════════════════════════════════════════════════════
   2026-09-26 — THE DSE PAGE, LAID OUT
   Kiarash: "can be visually improved". Same words, same order, the same two
   pictures side by side (Tim, 24 Sept). What changed is the setting:
   - the text now starts where the title above it starts (it sat in a
     centred 820px column, ~190px right of the title at 1440);
   - the first paragraph, which says what DSE is, is the page's lede; the
     two that follow (the subsidiary, the president) sit under it as a pair
     of columns with a hairline between, like Speaking Engagements on About;
   - the two companies get a dark band: Jake Danson's name heads it, then
     the photograph and the AdvanceSport logo. The logo is black artwork —
     on cream it read as a heavy square, on charcoal it is in its own ground.
   ══════════════════════════════════════════════════════════════════ */
.dse-intro { padding-bottom: 112px; }
@media (min-width: 901px) { .dse-intro { padding-left: 56px; padding-right: 56px; } }
.dse-intro .dse-body { max-width: 1200px; }
.dse-intro .dse-lede {
  max-width: 34em; margin: 0;
  font-size: clamp(19px, 1.65vw, 23px); line-height: 1.6; color: var(--charcoal);
  text-wrap: pretty;
}
.dse-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px;
  margin-top: 56px; padding-top: 40px;
  border-top: 1px solid rgba(117,38,31,0.22);
}
.dse-body .dse-facts .bio-copy { margin: 0; max-width: 62ch; font-size: 17px; line-height: 1.72; }
.dse-facts .bio-copy + .bio-copy { padding-left: 36px; border-left: 1px solid rgba(117,38,31,0.18); }

.dse-band {
  position: relative; overflow: hidden;
  background: var(--charcoal);
  padding: 112px 56px 120px;
}
.dse-band::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay; opacity: 0.45;
}
.dse-band-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }
.dse-band :focus-visible { outline-color: var(--crimson-soft); }

/* Jake Danson's line, set as the band's letterhead */
.dse-band .dse-person {
  margin: 0 0 44px; padding: 0 0 30px; border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.dse-band .dse-person strong {
  display: block; font-family: 'Cinzel', serif; font-weight: 400;
  font-size: clamp(28px, 3vw, 40px); line-height: 1.15; letter-spacing: 0.02em; color: #fff;
}
.dse-band .dse-person span {
  display: block; margin-top: 14px;
  font-family: 'Josefin Sans', sans-serif; font-style: normal; font-weight: 400;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--crimson-soft);                     /* AA on charcoal */
}

/* The pair: still side by side, each as wide as its aspect ratio asks */
.dse-band .dse-pair { display: flex; gap: 28px; align-items: flex-start; margin: 0; }   /* the full measure, edge to edge with the rule above */
.dse-band .dse-plate img { box-shadow: 0 34px 70px -34px rgba(0,0,0,0.75); }

/* The button, turned for a dark ground */
.dse-band .dse-links { margin-top: 56px; }
.dse-band .dse-links .cta-light { color: #fff; border-color: rgba(255,255,255,0.42); }
.dse-band .dse-links .cta-light:hover { background: var(--crimson); border-color: var(--crimson); color: #fff; }

@media (max-width: 900px) {
  .dse-intro { padding-bottom: 88px; }
  .dse-facts { grid-template-columns: minmax(0, 1fr); margin-top: 40px; padding-top: 32px; }
  .dse-facts .bio-copy + .bio-copy { padding-left: 0; border-left: 0; margin-top: 22px; }
  .dse-band { padding: 88px 24px 96px; }
}
@media (max-width: 600px) {
  .dse-intro { padding-bottom: 72px; }
  .dse-intro .dse-lede { font-size: 19px; line-height: 1.62; }
  .dse-band { padding: 72px 22px 80px; }
  .dse-band .dse-person { margin-bottom: 32px; padding-bottom: 24px; }
  .dse-band .dse-person span { font-size: 11.5px; letter-spacing: 0.18em; line-height: 1.6; }
  .dse-band .dse-pair { flex-direction: column; gap: 20px; }
  .dse-band .dse-pair .dse-plate, .dse-band .dse-pair .dse-logo { flex: none; width: 100%; }
  .dse-band .dse-links { margin-top: 40px; }
  .dse-band .dse-links .cta-light { width: 100%; justify-content: space-between; padding-left: 20px; padding-right: 20px; letter-spacing: 0.16em; }
  .dse-band .dse-links .cta-light:hover { padding-right: 20px; }
  .dse-body .dse-facts .bio-copy { font-size: 16px; }
}
@media print { .dse-band { background: none; } .dse-band .dse-person strong { color: var(--charcoal); } }