/* ============================================
   Home page - minimal editorial design
   ============================================ */

:root {
  --bg: #ffffff;
  --grey: #efeff0;
  --ink: #111111;
  --muted: #6b6b6f;
  --line: #d9d9dc;
  --ff-serif: 'Source Serif 4', Georgia, serif;
  --ff-sans: 'Source Sans 3', -apple-system, 'Segoe UI', sans-serif;
  --gutter: clamp(20px, 4vw, 48px);
  --max: 1240px;
  --nav-h: 72px;
  /* spacing scale, used everywhere so gaps stay consistent */
  --sp-section: clamp(32px, 4vw, 56px);  /* padding above and below every section */
  --sp-head: clamp(20px, 2.5vw, 32px);   /* label or heading to the content under it */
  --sp-row: clamp(20px, 2.4vw, 32px);    /* vertical padding inside list rows */
  --sp-label: 14px;                      /* small label to its heading */
}

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

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }

body {
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

.label {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

h1, h2, h3, blockquote { font-family: var(--ff-serif); font-weight: 400; line-height: 1.2; }
h1 em, h2 em { font-style: normal; }
h2 { font-size: clamp(28px, 3.4vw, 40px); }
.lead { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.25; }
.muted { color: var(--muted); }

.text-link { border-bottom: 1px solid currentColor; color: var(--ink); white-space: nowrap; }

/* --- Buttons --- */
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background 0.25s, color 0.25s, transform 0.25s;
}
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #333; transform: translateY(-1px); }
.btn-sm { padding: 10px 20px; font-size: 12px; }

.brand { display: inline-flex; align-items: center; }
.brand-logo { height: 48px; width: auto; }

/* --- Navigation --- */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.nav.scrolled { border-color: var(--line); }
.nav-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.nav-links { display: flex; align-items: center; gap: 32px; font-size: 13px; font-weight: 400; }
.nav-links a:not(.btn) { position: relative; }
.nav-links a:not(.btn)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 0.3s;
}
.nav-links a:not(.btn):hover::after { transform: scaleX(1); }

.nav-toggle { display: none; width: 36px; height: 36px; position: relative; }
.nav-toggle span {
  position: absolute; left: 7px; right: 7px; height: 1px; background: var(--ink);
  transition: transform 0.3s, top 0.3s;
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 17px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { top: 17px; transform: rotate(-45deg); }

/* --- Hero --- */
.hero { padding-bottom: var(--sp-section); }

.meta-bar {
  display: flex; justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
  font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(32px, 7vw, 120px);
  align-items: end;
  padding-top: var(--sp-section);
}

.hero-copy h1 { font-size: clamp(38px, 5.6vw, 76px); line-height: 1.08; margin-bottom: 28px; max-width: 12em; }
.hero-copy p { color: var(--muted); font-size: 16px; max-width: 40ch; margin-bottom: 32px; }
.hero-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }


.hero-side .label { padding-bottom: 12px; border-bottom: 1px solid var(--ink); }

.link-list a {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--ff-serif); font-size: 15px;
  transition: padding-left 0.3s;
}
.link-list a i, .rows i { font-style: normal; transition: transform 0.3s; }
.link-list a:hover { padding-left: 8px; }
.link-list a:hover i { transform: translateX(4px); }


/* --- Credentials strip --- */
.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.strip-track {
  display: flex; width: max-content;
  padding: 18px 0;
  font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
  animation: marquee 60s linear infinite;
}
.strip-track span { flex: none; padding-right: clamp(48px, 7vw, 112px); white-space: nowrap; }
.strip:hover .strip-track, .strip-track.paused { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* --- Sections --- */
.section { padding: var(--sp-section) 0; }
.section.grey { background: var(--grey); }
.section.dark { background: var(--ink); color: #fff; }
.section.dark .label { color: #9a9a9e; }

.split { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; align-items: start; }
.split > .label { padding-top: 8px; }
.split-body .lead { margin-bottom: 24px; }
.split-body p { max-width: 52ch; font-size: 14px; }

.about-label { padding-bottom: 10px; margin-bottom: var(--sp-head); border-bottom: 1px solid var(--ink); }
.about-body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: stretch; }
.about-portrait { margin: 0; }
.about-portrait img { width: 100%; aspect-ratio: 4 / 5; max-height: 52vh; object-fit: cover; object-position: top; background: var(--grey); }
.about-portrait figcaption { margin-top: 10px; font-size: 10px; color: var(--muted); letter-spacing: 0.04em; }
.about-text { display: flex; flex-direction: column; }
.about-text .lead { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 20px; max-width: 22em; }
.about-text p { max-width: 52ch; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.7; }
.about-text .stats { margin-top: auto; padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); }
.stats { grid-column: 1 / -1; }
.about-portrait { margin: 0; }
.about-portrait img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; background: var(--grey); }
.about-portrait figcaption { margin-top: 10px; font-size: 10px; color: var(--muted); letter-spacing: 0.04em; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 48px; align-self: stretch; width: 100%; border-top: 1px solid var(--line); }
.stats > div { padding: 20px 20px 0 0; }
.stats > div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.stats dt { font-family: var(--ff-serif); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; }

/* --- Quote --- */
.quote { background: var(--grey); padding: var(--sp-section) 0; text-align: center; }
.quote .brand-mark { margin: 0 auto 28px; width: 56px; height: auto; }
.quote blockquote {
  max-width: 24em; margin: 0 auto 28px;
  font-style: italic; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.35;
}

/* --- Practice rows --- */
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: var(--sp-head); }
.section-head h2 { margin-top: var(--sp-label); }
.section-head p { max-width: 28ch; font-size: 12px; }

.rows { border-top: 1px solid var(--line); }
.rows a {
  display: grid; grid-template-columns: 96px 40px minmax(0, 1.1fr) minmax(0, 1.4fr) 24px;
  gap: 24px; align-items: center;
  padding: var(--sp-row) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.3s;
}
.rows a:hover i { transform: translateX(4px); }
.rows i { text-align: right; }
.row-n { font-size: 10px; color: var(--muted); letter-spacing: 0.15em; }
.row-t { font-family: var(--ff-serif); font-size: clamp(17px, 1.6vw, 20px); }
.row-d { font-size: 14px; color: var(--muted); }

/* --- Approach --- */
.dark .lead { max-width: 14em; margin: 20px 0 clamp(40px, 6vw, 72px); }
.steps { margin-top: var(--sp-head); display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; border-top: 1px solid #333; padding-top: 28px; }
.steps h3 { font-size: 18px; margin-bottom: 10px; }
.steps p { font-size: 12px; color: #a8a8ac; max-width: 26ch; }

/* --- Testimonial --- */
.carousel-nav { display: flex; gap: 10px; }
.carousel-nav[hidden] { display: none; }
.arrow {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; font-size: 16px; line-height: 1; transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.arrow.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.arrow:hover { border-color: var(--ink); }
.arrow.dark:hover { background: #333; }
.arrow:disabled { opacity: 0.35; cursor: default; }
.carousel {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter);
}
.carousel::-webkit-scrollbar { display: none; }
.t-card {
  flex: 0 0 min(520px, 85%); scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: clamp(24px, 3vw, 40px); background: var(--grey); margin: 0;
}
.t-card blockquote { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.45; }
.t-card figcaption { display: grid; gap: 4px; padding-top: 20px; border-top: 1px solid var(--line); }
.t-card strong { font-weight: 500; font-size: 14px; }

/* --- FAQ --- */
.faq-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; align-items: start; }
.faq-grid h2 { margin-top: var(--sp-label); }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 0;
  font-family: var(--ff-serif); font-size: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--ff-sans); font-size: 18px; color: var(--muted); transition: transform 0.3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 22px; max-width: 56ch; font-size: 14px; color: var(--muted); }

/* --- Contact --- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact-grid .lead { margin: 20px 0 32px; }
address { font-style: normal; font-size: 13px; line-height: 1.9; }
address a { border-bottom: 0; }

.form { display: grid; gap: 28px; }
.form label { display: block; }
.form input, .form textarea {
  width: 100%; margin-top: 8px; padding: 8px 0 12px;
  font: inherit; font-size: 15px; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
  outline: none; resize: vertical;
}
.form input:focus, .form textarea:focus { border-bottom-width: 2px; padding-bottom: 11px; }
.form .btn { justify-self: start; }
.form-note { font-size: 13px; color: var(--muted); min-height: 1.4em; }

/* --- Footer --- */
.footer { background: var(--ink); color: #fff; padding: 28px 0; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px 32px; flex-wrap: wrap; }
.footer nav { display: flex; gap: 4px 28px; flex-wrap: wrap; font-size: 13px; color: #a8a8ac; }
.footer nav a { padding: 8px 0; }
.footer nav a:hover { color: #fff; }
.footer p { font-size: 13px; color: #a8a8ac; }

/* --- Reveal --- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Responsive --- */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; align-items: start; }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .rows a { grid-template-columns: 40px 1fr 24px; }
  .row-d { display: none; }
}

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 8px var(--gutter) 24px;
    background: #fff; border-bottom: 1px solid var(--line);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
  }
  .nav-links.open { opacity: 1; transform: none; visibility: visible; }
  .nav-links a:not(.btn) { padding: 14px 0; width: 100%; border-bottom: 1px solid var(--line); font-size: 15px; }
  .nav-links a::after { display: none; }
  .nav-cta { margin-top: 20px; }

  .meta-bar span:nth-child(2) { display: none; }
  .hero-grid, .split, .faq-grid, .contact-grid { grid-template-columns: 1fr; }
  .about-body { grid-template-columns: 1fr; }
  .about-portrait { max-width: 360px; }
  .about-text .stats { margin-top: 32px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .stats { grid-template-columns: 1fr; }
  .stats > div, .stats > div + div { padding: 16px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .steps { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .steps h3 { font-size: 20px; }
  .steps p { max-width: none; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================
   Inner pages (about, services, blog)
   ============================================ */

.nav-links a[aria-current="page"]:not(.btn)::after { transform: scaleX(1); }

.page-head { padding-bottom: var(--sp-section); }
.page-head-body { padding-top: var(--sp-head); display: grid; grid-template-columns: 1fr 2fr; gap: 32px; align-items: start; }
.page-head-body.stacked { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.page-head h1 { font-size: clamp(26px, 6.5vw, 56px); margin: 0 0 20px; overflow-wrap: anywhere; }
.page-head p { max-width: 52ch; color: var(--muted); font-size: 15px; }
.crumb a { border-bottom: 1px solid transparent; }
.crumb a:hover { border-color: currentColor; }

.border-top { border-top: 1px solid var(--line); }

/* About */
.about-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; align-items: start; }
.about-aside { position: sticky; top: calc(var(--nav-h) + 24px); }
.about-aside img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; background: var(--grey); margin-bottom: 28px; }
.facts { border-top: 1px solid var(--ink); }
.facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.facts dt { font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.facts dd { text-align: right; min-width: 0; }

.prose { min-width: 0; }
.prose h2 { font-size: clamp(24px, 2.6vw, 30px); margin: 0 0 18px; }
.prose section + section { margin-top: var(--sp-section); padding-top: 0; }
.prose p { max-width: 62ch; font-size: 15px; color: #3a3a3d; margin-bottom: 16px; }
.prose p:last-child { margin-bottom: 0; }
.prose ul { margin-top: 12px; }
.prose ul li { padding: 9px 0; font-size: 14px; }

.timeline li { display: grid; grid-template-columns: 150px 1fr; gap: 8px 24px; padding: var(--sp-row) 0; border-top: 1px solid var(--line); }
.timeline li:last-child { border-bottom: 1px solid var(--line); }
.timeline .when { font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); padding-top: 6px; }
.timeline h3 { font-size: 17px; margin-bottom: 6px; }
.timeline p { font-size: 13px; color: var(--muted); margin: 0; max-width: 56ch; }

/* Services */
.service { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; padding: var(--sp-section) 0; border-top: 1px solid var(--line); }
.service:last-child { border-bottom: 1px solid var(--line); }
.service h2 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 16px; }
.service p { max-width: 56ch; font-size: 15px; color: #3a3a3d; margin-bottom: 8px; }
.service ul { margin-top: 20px; }
.service li { padding: 7px 0; font-size: 14px; display: flex; gap: 14px; }
.service li::before { content: '•'; color: var(--muted); }

/* Blog */
.post { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; padding: var(--sp-row) 0; border-top: 1px solid var(--line); }
.post:last-child { border-bottom: 1px solid var(--line); }
.post-meta { display: grid; gap: 6px; align-content: start; }
.post h2, .post h3 { font-size: clamp(20px, 2.2vw, 26px); margin-bottom: 12px; }
.post p { max-width: 58ch; font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.post.featured h2 { font-size: clamp(24px, 3vw, 36px); }
.post .text-link { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.post-label { color: var(--ink); }

/* CTA band */
.cta { text-align: left; }
.cta .wrap { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; }
.cta .lead { margin-bottom: 12px; }
.cta p { max-width: 44ch; font-size: 14px; color: var(--muted); }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: minmax(0, 1fr); }
  .about-aside { position: static; max-width: 360px; min-width: 0; }
}
@media (max-width: 760px) {
  .page-head-body, .about-grid, .service, .post { grid-template-columns: minmax(0, 1fr); }
  .timeline li { grid-template-columns: 1fr; }
  .cta .wrap { grid-template-columns: 1fr; align-items: start; }
}

/* Articles */
.article-title { font-size: clamp(28px, 3.6vw, 44px); max-width: 20em; }
.article .disclaimer { margin-top: clamp(32px, 4vw, 48px); padding-top: 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.article .text-link { display: inline-block; font-size: 13px; }
.article ul li { display: flex; gap: 14px; }
.article ul li::before { content: '•'; color: var(--muted); }
.quote blockquote:last-child { margin-bottom: 0; }
.prose .text-link { white-space: normal; }

/* About head: keep the heading inside the left column so it never runs into the text column below */
@media (min-width: 901px) {
  .page-head-body.stacked > div { max-width: calc((100% - 32px) / 3); }
  .page-head-body.stacked h1 { font-size: clamp(34px, 3.6vw, 48px); }
  .page-head-body.stacked p { max-width: none; }
}

/* Single line page title (blog) */
.page-head-body.one-line h1 { white-space: nowrap; font-size: clamp(20px, 5.6vw, 48px); }
@media (min-width: 901px) {
  .page-head-body.stacked.one-line > div { max-width: none; }
  .page-head-body.one-line h1 { font-size: clamp(34px, 3.6vw, 48px); }
}
@media (min-width: 901px) {
  .page-head-body.stacked.one-line p { max-width: 52ch; }
}

/* Practice area images */
.row-img { width: 96px; height: 72px; object-fit: cover; filter: grayscale(1); transition: filter 0.4s; background: var(--grey); }
.rows a:hover .row-img, .service:hover .service-side img { filter: grayscale(0); }
.service-side { display: grid; gap: 20px; align-content: start; }
.service-side img { width: 100%; height: auto; max-width: 320px; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1); transition: filter 0.4s; background: var(--grey); }
@media (max-width: 960px) {
  .rows a { grid-template-columns: 72px 1fr 24px; }
  .row-n { display: none; }
  .row-img { width: 72px; height: 54px; }
}
@media (max-width: 760px) {
  .service-side img { max-width: none; }
}

/* Practice page: image fills the left column and balances the text on the right */
@media (min-width: 761px) {
  .service { align-items: stretch; }
  .service-side { grid-template-rows: auto 1fr; }
  .service-side img { max-width: none; width: 100%; height: 100%; min-height: 280px; aspect-ratio: auto; }
}

/* Practice sections: label sits above the heading so both columns start on the same line */
.service .label { line-height: 1; margin-bottom: 18px; }
@media (min-width: 761px) {
  .service-side { grid-template-rows: 1fr; }
}
@media (max-width: 760px) {
  .service .label { margin-bottom: 12px; }
}

/* One shared two column grid: a 1fr label/image column, then a 2fr content column, 32px apart */
.about-body { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; }
@media (max-width: 760px) {
  .about-body { grid-template-columns: minmax(0, 1fr); }
}

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

/* About: selected publications */
.pubs { margin-top: 20px; display: grid; gap: 20px; }
.pub { display: grid; grid-template-columns: 140px minmax(0, 1fr) 24px; gap: 24px; align-items: center; }
.pub-img { width: 140px; height: 105px; object-fit: cover; filter: grayscale(1); transition: filter 0.4s; background: var(--grey); }
.pub:hover .pub-img { filter: grayscale(0); }
.pub-body { display: grid; gap: 8px; }
.pub-title { font-family: var(--ff-serif); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.35; color: var(--ink); }
.pub i { font-style: normal; text-align: right; transition: transform 0.3s; }
.pub:hover i { transform: translateX(4px); }
.pubs-all { margin-top: 28px; display: inline-block; font-size: 13px; }
@media (max-width: 760px) {
  .pub { grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: start; }
  .pub-img { width: 88px; height: 66px; }
  .pub i { display: none; }
}

/* Blog: image beside the label, title stays on the shared content column */
.post-side { display: flex; align-items: flex-start; gap: 20px; min-width: 0; }
.post-img { flex: none; width: 120px; height: 90px; object-fit: cover; filter: grayscale(1); transition: filter 0.4s; background: var(--grey); }
.post:hover .post-img { filter: grayscale(0); }
.post.featured .post-img { width: 180px; height: 135px; }
.post-side .post-meta { min-width: 0; }
@media (max-width: 760px) {
  .post-img, .post.featured .post-img { width: 88px; height: 66px; }
}

/* Blog: the image fills the left column and matches the height of the text beside it */
.post { align-items: stretch; }
.post-side { display: block; position: relative; min-height: 150px; }
.post-img, .post.featured .post-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.post .post-meta { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 14px; }
@media (max-width: 760px) {
  .post-side { min-height: 0; height: 140px; }
}

/* Lists start and end flush with their section padding, so every gap between sections is the same */
.service:first-child { padding-top: 0; border-top: 0; }
.service:last-child { padding-bottom: 0; border-bottom: 0; }
#ghost-featured-post-container .post { padding-top: 0; border-top: 0; }
#ghost-blog-grid-container .post:last-child,
.section-head + div .post:last-child { padding-bottom: 0; border-bottom: 0; }

/* Practice list: compact, identical rows, no layout shift on hover */
.rows { margin: -14px 0; border-top: 0; }
.rows a { padding: 14px 0; gap: 20px; }
.row-img { width: 88px; height: 66px; }
@media (min-width: 961px) {
  .rows a { grid-template-columns: 88px 32px 260px minmax(0, 1fr) 24px; }
}
@media (max-width: 960px) {
  .row-img { width: 72px; height: 54px; }
}

/* Photos that have scrolled into view on touch screens fade to colour */
.row-img.is-color, .service-side img.is-color, .post-img.is-color, .pub-img.is-color { filter: grayscale(0); transition: filter 0.9s ease; }