@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

/* --- DESIGN SYSTEM & TOKENS --- */
:root {
  --color-bg-primary: #f4f0ea;      /* Warm Cream/Sand */
  --color-bg-secondary: #ebe7df;    /* Secondary Cream */
  --color-bg-dark: #1a1614;         /* Charcoal/Dark Sand */
  --color-bg-dark-secondary: #26211e;
  
  --color-border: #dfdcd6;          /* Muted sand border */
  --color-border-dark: #38322e;
  
  --color-text-primary: #2c2825;    /* Dark Charcoal */
  --color-text-secondary: #706a64;  /* Muted Grey */
  --color-text-light: #f4f0ea;       /* Cream light text */
  --color-text-light-muted: #aba59f;
  
  --color-accent: #f59e0b;          /* Orange-gold brand accent */
  --color-accent-hover: #d97706;    /* Deeper amber hover */
  --color-accent-deep: #a35a06;     /* AA-contrast gold for text/rules on cream */

  --font-sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;

  /* Fluid type scale — one ramp shared by every component */
  --text-sm:  clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  --text-md:  clamp(0.9375rem, 0.91rem + 0.15vw, 1rem);
  --text-lg:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-xl:  clamp(1.0625rem, 0.99rem + 0.34vw, 1.25rem);
  --text-2xl: clamp(1.15rem, 1.04rem + 0.55vw, 1.35rem);
  --text-3xl: clamp(1.35rem, 1.13rem + 1.1vw, 1.75rem);

  /* Comfortable line length for long-form prose. `ch` is the advance of "0",
     which in Geist runs ~1.4x the average glyph — 48ch measures to ~69 real
     characters per line, which is the number that matters. */
  --measure: 48ch;
  --nav-clearance: 96px;

  --container-max-width: 1240px;
  --transition-speed: 0.3s;
  --transition-ease: cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- RESET & BASICS --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-sans);
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow-x: hidden;
  min-height: 100vh;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-speed) var(--transition-ease);
}

/* --- TYPOGRAPHY --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.15;
}

h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h4 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }

p {
  color: var(--color-text-secondary);
  font-size: var(--text-md);
}

/* Fixed headings sit behind the fixed nav when scrolled to via an anchor. */
h2, h3, [id] {
  scroll-margin-top: var(--nav-clearance);
}

.u-text-wrap-pretty {
  text-wrap: pretty;
}

.u-text-wrap-balance {
  text-wrap: balance;
}

/* --- LAYOUT UTILITIES --- */
.u-container {
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  width: 100%;
}

.u-grid {
  display: grid;
  gap: 24px;
}

.u-theme-dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-light);
}

.u-theme-dark p {
  color: var(--color-text-light-muted);
}

/* --- PRESERVED GSAP STATES --- */
html.w-mod-js [data-scroll="fade-up"],
html.w-mod-js [data-scroll="fade-left"],
html.w-mod-js [data-scroll="heading"],
html.w-mod-js [data-scroll="image"] {
  opacity: 0;
  transform: translateY(20px);
}

html.w-mod-js [data-scroll="fade-left"] {
  transform: translateX(20px);
}

/* --- NAVIGATION --- */
.nav_wrap {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background-color: rgba(26, 22, 20, 0.55);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  width: calc(100% - 48px);
  max-width: 1080px;
  transition: background-color var(--transition-speed) var(--transition-ease),
              border-color var(--transition-speed) var(--transition-ease),
              box-shadow var(--transition-speed) var(--transition-ease),
              transform var(--transition-speed) var(--transition-ease);
}

/* Past the hero the nav sits over cream sections — firm it up so text stays
   legible, but keep it glass so headings read through instead of being slabbed. */
.nav_wrap.is-scrolled {
  background-color: rgba(26, 22, 20, 0.78);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px rgba(26, 22, 20, 0.18);
}

.nav_contain {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  padding-left: 28px;
  padding-right: 8px;
}

.nav_brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text-light);
  height: 35px;
  text-decoration: none;
}

.nav_brand svg {
  height: 100%;
}

/* --- BRAND LOCKUP (hand-drawn egg mark + wordmark) --- */
.brand_mark {
  height: 100%;
  width: auto;
  flex: none;
  overflow: visible;
}

.brand_wordmark {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  line-height: 1;
  /* letter-spacing adds trailing space after the final H — pull it back for optical centering */
  margin-right: -0.34em;
  color: currentColor;
  white-space: nowrap;
}

/* Desktop: every page sits in one recessed track inside the floating island,
   so the bar reads as a single machined object rather than loose links. */
.nav_menu {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav_links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 4px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.nav_link_wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--color-text-light-muted);
  transition: color 0.5s cubic-bezier(0.32, 0.72, 0, 1), background-color 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}

.nav_link_wrap:hover {
  color: var(--color-text-light);
  background-color: rgba(255, 255, 255, 0.06);
}

.nav_link_wrap.w--current {
  color: var(--color-text-light);
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08);
}

.nav_link_num,
.nav_label_full {
  display: none;
}

/* Nav Button — the site's main button (.btn_main_wrap, with its text and
   arrow roll-over), scaled down to sit inside the 64px bar. */
.btn_main_wrap.nav_btn_wrap {
  font-size: 0.8125rem;
  white-space: nowrap;
}

.nav_btn_wrap .btn_main_inner {
  padding: 6px 14px;
}

.nav_btn_wrap .btn_main_secondary {
  width: 30px;
  height: 30px;
}

.nav_btn_wrap .btn_main_icon {
  width: 15px;
  height: 15px;
}

/* Mobile Hamburger Nav */
.nav_hamburger {
  display: none;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--color-text-light);
}

.nav_hamburger_layout {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 24px;
  height: 24px;
  justify-content: center;
}

.nav_hamburger_line {
  height: 2px;
  background-color: currentColor;
  width: 100%;
  transition: transform var(--transition-speed) var(--transition-ease), opacity var(--transition-speed) var(--transition-ease);
}

/* --- HERO SECTION --- */
.section_hero {
  padding-top: 180px;
  padding-bottom: 120px;
  position: relative;
}

.section_hero.u-theme-dark {
  background-color: var(--color-bg-dark);
}

.hero_visual_wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: 480px;
}

/* Single column: the description used to sit in a right-hand column, which put
   it over the un-scrimmed half of the hero photo and made it unreadable.
   Stacked under the H1 it stays inside the dark side of the gradient. */
.hero_visual_layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
  max-width: 640px;
}

.hero_visual_layout_single {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 580px;
  width: 100%;
  z-index: 2;
  position: relative;
  gap: 24px;
}

.hero_visual_title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.hero_visual_heading h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 1.2rem + 4.4vw, 4.5rem);
  line-height: 1.15;
  margin-bottom: 0;
}

.hero_visual_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

.hero_visual_description {
  font-size: var(--text-lg);
  line-height: 1.6;
  max-width: var(--measure);
  color: var(--color-text-light-muted);
}

/* Brand values line: the three-part promise, in the hero and under the
   footer logo. */
.brand_values {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.4;
  color: var(--color-accent);
}

.brand_values span {
  font-style: normal;
  opacity: 0.6;
}

.brand_values.is-hero {
  font-size: var(--text-2xl);
}

/* The footer column is too narrow for one line, so the three stack. */
.brand_values.is-stacked {
  display: grid;
  gap: 2px;
}

.brand_values.is-stacked span {
  opacity: 1;
  font-style: italic;
}

.hero_visual_description_single {
  font-size: var(--text-lg);
  line-height: 1.65;
  max-width: var(--measure);
  color: var(--color-text-light-muted);
}

/* Premium Buttons */
.btn_main_wrap {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-accent);
  color: var(--color-text-primary);
  border-radius: 6px;
  padding: 4px;
  overflow: hidden;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform var(--transition-speed) var(--transition-ease),
              background-color var(--transition-speed) var(--transition-ease),
              color var(--transition-speed) var(--transition-ease);
}

.btn_main_inner {
  padding: 8px 20px;
  flex-grow: 1;
}

.btn_main_clip {
  position: relative;
  overflow: hidden;
}

.btn_main_text {
  transition: transform 0.4s var(--transition-ease);
}

.btn_main_text.is-hover {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}

.btn_main_wrap:hover .btn_main_text {
  transform: translateY(-100%);
}

.btn_main_wrap:hover .btn_main_text.is-hover {
  transform: translateY(-100%);
}

.btn_main_secondary {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: background-color var(--transition-speed);
}

.btn_main_icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.btn_main_svg {
  width: 100%;
  height: 100%;
  transition: transform 0.4s var(--transition-ease);
}

.btn_main_svg.is-hover {
  position: absolute;
  transform: translate(-100%, 100%);
}

.btn_main_wrap:hover .btn_main_svg:not(.is-hover) {
  transform: translate(100%, -100%);
}

.btn_main_wrap:hover .btn_main_svg.is-hover {
  transform: translate(0, 0);
}

.btn_main_wrap:hover {
  background-color: var(--color-accent-hover);
  transform: scale(0.98);
}

/* Hero button pair: equal columns sized to the wider button, and the
   outlined button stretched to the main button's 44px height. */
.hero_visual_cta.is-pair {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 16px;
}

.hero_visual_cta.is-pair > a {
  justify-content: space-between;
  min-height: 44px;
}

.hero_visual_cta.is-pair > .btn_secondary_wrap {
  justify-content: center;
}

@media (max-width: 520px) {
  .hero_visual_cta.is-pair {
    display: grid;
    grid-auto-flow: row;
  }
}

.btn_secondary_wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: transparent;
  color: var(--color-text-light);
  border-radius: 6px;
  padding: 10px 24px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background-color var(--transition-speed) var(--transition-ease),
              border-color var(--transition-speed) var(--transition-ease),
              color var(--transition-speed) var(--transition-ease),
              transform var(--transition-speed) var(--transition-ease);
}

.btn_secondary_wrap:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--color-text-light);
  color: var(--color-text-light);
  transform: scale(0.98);
}

/* Practice links (home, What We Do) — the three practice pages as a short
   index, so the section hands off somewhere other than the contact page. */
.practice_links {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(44, 40, 37, 0.1);
}

.practice_links li {
  border-bottom: 1px solid rgba(44, 40, 37, 0.1);
}

.practice_link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  line-height: 1.3;
  color: var(--color-text-primary);
}

.practice_link_icon {
  width: 32px;
  height: 32px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background-color: rgba(44, 40, 37, 0.05);
  box-shadow: inset 0 0 0 1px rgba(44, 40, 37, 0.08);
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), background-color 0.5s cubic-bezier(0.32, 0.72, 0, 1), color 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}

.practice_link_icon svg {
  width: 14px;
  height: 14px;
}

.practice_link:hover .practice_link_icon {
  transform: translate(2px, -1px) scale(1.05);
  background-color: var(--color-accent);
  color: var(--color-bg-dark);
}

.hero_visual_bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  opacity: 1;
  overflow: hidden; /* the scrim is inset to 0, so anything the art does must
                       be clipped to the same box or it plays outside the overlay */
}

/* Two-axis scrim. The horizontal pass alone left the lower-right of the frame
   bright, which is exactly where the hero copy wraps to; the vertical pass
   guarantees a dark bed under the text regardless of the photo underneath. */
.hero_visual_bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    linear-gradient(
      to top,
      rgba(18, 13, 10, 0.92) 0%,
      rgba(18, 13, 10, 0.6) 40%,
      rgba(18, 13, 10, 0) 80%
    ),
    linear-gradient(
      90deg,
      rgba(18, 13, 10, 0.9) 0%,
      rgba(18, 13, 10, 0.72) 45%,
      rgba(18, 13, 10, 0.35) 100%
    );
  z-index: 2;
  pointer-events: none;
}

.section_hero.is-home .hero_visual_bg::after {
  background:
    linear-gradient(
      to top,
      rgba(18, 13, 10, 0.72) 0%,
      rgba(18, 13, 10, 0.3) 45%,
      rgba(18, 13, 10, 0) 85%
    ),
    linear-gradient(
      90deg,
      rgba(18, 13, 10, 0.82) 0%,
      rgba(18, 13, 10, 0.62) 28%,
      rgba(18, 13, 10, 0.26) 55%,
      rgba(18, 13, 10, 0) 100%
    );
}

/* On narrow screens the copy spans the full frame, so the horizontal pass
   stops helping and the vertical one has to carry it. */
@media (max-width: 767px) {
  .section_hero.is-home .hero_visual_bg::after {
    background: linear-gradient(
      to top,
      rgba(18, 13, 10, 0.94) 0%,
      rgba(18, 13, 10, 0.86) 55%,
      rgba(18, 13, 10, 0.6) 100%
    );
  }

  .hero_visual_bg::after {
    background: linear-gradient(
      to top,
      rgba(18, 13, 10, 0.94) 0%,
      rgba(18, 13, 10, 0.88) 55%,
      rgba(18, 13, 10, 0.7) 100%
    );
  }
}

.hero_visual_bg img {
  z-index: 1;
}

/* Subpage heroes use cool-toned stock photography that reads as a different
   brand next to the amber home hero. Grading them warm pulls them into the
   same palette without re-shooting. */
.section_hero:not(.is-home) .hero_visual_bg img {
  filter: sepia(0.55) saturate(1.35) hue-rotate(-8deg) contrast(1.05) brightness(0.92);
}

.u-cover-absolute {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* --- STATS SECTION --- */
.stats_row_wrap {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 60px 0;
  gap: 40px; /* base gap — the single-column case had none, so the title
                collided with the first stat on mobile */
}

@media (min-width: 768px) {
  .stats_row_wrap {
    grid-template-columns: 1fr 2fr;
    gap: 48px;
  }
}

/* Top-aligned so the title shares a baseline with the stat numbers instead of
   floating between them and their labels. */
.stats_row_title {
  display: flex;
  align-items: flex-start;
}

.stats_row_title h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  line-height: 1.2;
  max-width: 14ch;
}

.stats_row_content {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 48px;
}

.card_stat_wrap {
  border-left: 2px solid var(--color-accent);
  padding-left: 24px;
  flex: 1 0 auto; /* Grow to fill space, but never shrink below content width */
}

.card_stat_number {
  font-family: var(--font-serif);
  font-size: clamp(1.85rem, 2.8vw, 2.75rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--color-text-primary);
  margin-bottom: 8px;
  white-space: nowrap; /* Prevent word wrapping within a single-word stat */
}

.card_stat_description {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-secondary);
}

/* --- SPLIT INTRO SECTION --- */
.u-section {
  padding: 100px 0;
}

.split_main_wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
  align-items: center;
}

@media (min-width: 992px) {
  .split_main_wrap {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 991px) {
  .split_main_wrap .split_main_visual {
    order: -1;
  }
}

.split_main_visual {
  position: relative;
  height: 520px;
  border-radius: 8px;
  overflow: hidden;
}

/* The editorial rows mix warm stock, a black-and-white studio portrait and a
   cool statue shot. A single light grade unifies them into one art direction. */
.split_main_visual img {
  filter: sepia(0.28) saturate(1.18) contrast(1.03);
}

.split_main_mask {
  display: none;
}

.split_main_content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.split_main_heading h2 {
  line-height: 1.15;
}

.split_main_description p {
  font-size: var(--text-lg);
  max-width: var(--measure);
  margin-bottom: 16px;
}

.split_main_description p:last-child {
  margin-bottom: 0;
}

/* --- SERVICES GRID SECTION --- */
.layout_vertical_wrap {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.heading_wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.layout_vertical_grid {
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 768px) {
  .layout_vertical_grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- CAROUSEL STYLES --- */
.carousel_header_wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 48px;
}

@media (max-width: 767px) {
  .carousel_header_wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

.carousel_nav_buttons {
  display: flex;
  gap: 12px;
}

.carousel_arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--transition-speed), border-color var(--transition-speed), transform 0.2s, color var(--transition-speed);
}

.carousel_arrow:hover {
  background-color: var(--color-accent);
  color: var(--color-bg-dark);
  border-color: var(--color-accent);
  transform: scale(1.05);
}

.carousel_arrow:active {
  transform: scale(0.95);
}

.carousel_viewport {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  padding-left: max(24px, calc((100vw - var(--container-max-width)) / 2));
  padding-right: max(24px, calc((100vw - var(--container-max-width)) / 2));
  padding-bottom: 24px;
  margin-bottom: -24px;
}

.carousel_viewport::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

.carousel_card {
  flex: 0 0 calc(33.333% - 16px);
  scroll-snap-align: start;
  position: relative;
  height: 480px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 16px;
  gap: 12px;
  border: 1px solid var(--color-border);
  transition: transform var(--transition-speed) var(--transition-ease), border-color var(--transition-speed) var(--transition-ease), box-shadow var(--transition-speed) var(--transition-ease);
}

.carousel_card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26, 22, 20, 0.85) 0%, rgba(26, 22, 20, 0.3) 50%, rgba(26, 22, 20, 0.05) 100%);
  z-index: 2;
  transition: opacity var(--transition-speed) var(--transition-ease);
  pointer-events: none;
}

@media (max-width: 991px) {
  .carousel_card {
    flex: 0 0 calc(50% - 12px);
  }
}

@media (max-width: 600px) {
  .carousel_card {
    flex: 0 0 100%;
  }
}

.carousel_card_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
}

.carousel_card:hover .carousel_card_bg {
  transform: scale(1.06);
}

.carousel_card_badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(26, 22, 20, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--color-accent);
  border: 1px solid rgba(245, 158, 11, 0.35);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  padding: 6px 14px;
  border-radius: 20px;
  text-transform: uppercase;
  z-index: 3;
  margin-left: 4px;
  transition: background-color var(--transition-speed) var(--transition-ease), border-color var(--transition-speed) var(--transition-ease), color var(--transition-speed) var(--transition-ease);
}

.carousel_card:hover .carousel_card_badge {
  background-color: var(--color-accent);
  color: var(--color-bg-dark);
  border-color: var(--color-accent);
}

.carousel_card_content {
  position: relative;
  background-color: rgba(26, 22, 20, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--color-border-dark);
  border-radius: 10px;
  padding: 20px 24px;
  width: 100%;
  z-index: 3;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  transition: border-color var(--transition-speed) var(--transition-ease), background-color var(--transition-speed) var(--transition-ease);
}

.carousel_card:hover .carousel_card_content {
  border-color: rgba(245, 158, 11, 0.4);
  background-color: rgba(26, 22, 20, 0.95);
}

.carousel_card_title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: 1.25;
  color: var(--color-text-light);
  margin-bottom: 0;
  transition: color var(--transition-speed) var(--transition-ease);
}

.carousel_card:hover .carousel_card_title {
  color: var(--color-accent);
}

.carousel_card_description {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
}

.carousel_card_description_inner {
  overflow: hidden;
  min-height: 0;
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--color-text-light-muted);
  padding-top: 12px;
}

.carousel_card:hover .carousel_card_description {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* --- PLAYBOOK CALLOUT SECTION --- */
.callout_row_wrap {
  grid-template-columns: 1fr;
  background-color: var(--color-bg-secondary);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

@media (min-width: 992px) {
  .callout_row_wrap {
    grid-template-columns: 1fr 1.2fr;
  }
}

.callout_row_visual {
  position: relative;
  height: 380px;
  background-color: var(--color-bg-dark);
}

.callout_row_image {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.3);
}

.callout_row_content {
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
}

/* --- TESTIMONIALS SLIDER --- */
.testimonials_slider_wrap {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 80px 0;
  position: relative;
}

.card_testimonial_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
}

.card_testimonial_quote {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 0.95rem + 1.45vw, 1.75rem);
  line-height: 1.4;
  color: var(--color-text-primary);
}

.card_testimonial_bottom {
  display: flex;
  align-items: center;
  gap: 16px;
}

.card_testimonial_photo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}

.card_testimonial_attribution {
  text-align: left;
}

.card_testimonial_title {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

/* --- ABOUT PAGE VALUE TILES --- */
.layout_vertical_border {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.layout_vertical_grid.is-border {
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 768px) {
  .layout_vertical_grid.is-border {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .layout_vertical_grid.is-border {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card_icon_wrap {
  padding: 48px 32px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 768px) {
  .card_icon_wrap {
    border-right: 1px solid var(--color-border);
  }
  
  .card_icon_wrap:nth-child(2n) {
    border-right: none;
  }
}

@media (min-width: 992px) {
  .card_icon_wrap {
    border-right: 1px solid var(--color-border);
    border-bottom: none;
  }
  
  .card_icon_wrap:last-child {
    border-right: none;
  }
}

.icon-slot {
  width: 48px;
  height: 48px;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.g_icon {
  width: 100%;
  height: 100%;
}

.card_icon_content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Directory CTA tile — fills the eighth grid cell that seven skillsets leave over. */
.card_icon_wrap.is-cta {
  background-color: var(--color-bg-secondary);
  border-bottom: none;
  justify-content: space-between;
  transition: background-color var(--transition-speed) var(--transition-ease);
}

.card_icon_wrap.is-cta:hover {
  background-color: #e3ded4;
}

.card_cta_link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--color-accent-deep);
}

.card_cta_link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-speed) var(--transition-ease);
}

.card_icon_wrap.is-cta:hover .card_cta_link svg {
  transform: translate(2px, -2px);
}

.card_icon_content h3 {
  font-size: var(--text-2xl);
}

/* --- TEAM GRID --- */
.team_grid_list {
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 600px) {
  .team_grid_list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .team_grid_list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card_team_wrap {
  background-color: var(--color-bg-secondary);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--transition-speed) var(--transition-ease);
}

.card_team_visual {
  position: relative;
  height: 340px;
}

.card_team_wrap:hover {
  transform: translateY(-4px);
}

.u-text-style-subhead {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* --- CONTACT FORM --- */
.contact_form_layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
}

@media (min-width: 992px) {
  .contact_form_layout {
    grid-template-columns: 1fr 1.2fr;
  }
}

.contact_info_wrap {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.contact_info_card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: var(--color-bg-secondary);
  padding: 32px;
  border-radius: 8px;
}

.contact_info_list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact_info_list li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text-secondary);
}

.contact_form_wrap {
  background-color: var(--color-bg-secondary);
  padding: 48px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
}

.form_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 600px) {
  .form_grid.is-two-col {
    grid-template-columns: 1fr 1fr;
  }
}

.form_field_wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form_label {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-secondary);
}

.form_input, .form_textarea {
  font-family: var(--font-sans);
  font-size: 1rem;
  padding: 14px 18px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  width: 100%;
  transition: border-color var(--transition-speed) var(--transition-ease);
}

.form_input:focus, .form_textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.form_textarea {
  min-height: 140px;
  resize: vertical;
}

.form_submit_btn {
  background-color: var(--color-accent);
  color: var(--color-text-light);
  border: none;
  border-radius: 4px;
  padding: 16px 32px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: background-color var(--transition-speed) var(--transition-ease);
}

.form_submit_btn:hover {
  background-color: var(--color-accent-hover);
}

/* --- FOOTER --- */
.footer_wrap {
  background-color: var(--color-bg-dark);
  color: var(--color-text-light);
}

.footer_cta_wrap {
  border-bottom: 1px solid var(--color-border-dark);
}

.footer_cta_layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 40px;
}

.footer_cta_description {
  font-size: var(--text-xl);
  max-width: 600px;
  color: var(--color-text-light-muted);
  /* The text column is as wide as the heading, so a 600px paragraph inside it
     stays left unless it is centred itself. `text-align: center` only centres
     the lines within the box; it does not centre the box. */
  margin-left: auto;
  margin-right: auto;
}

.footer_main_wrap {
  padding: 80px 0;
}

.footer_main_layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 600px) {
  .footer_main_layout {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .footer_main_layout {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Every column is a two-row stack: a header row the height of the brand
   lockup, then the body. Laying the columns out on the same two rows is what
   puts the section titles on the wordmark's line and the first link on the
   first line of the brand paragraph. Without it each column started wherever
   its own header happened to end. */
.footer_brand_col,
.footer_links_col {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 24px;
}

/* Once the columns stack there is nothing to align across, so the reserved
   header row would only add loose space above each title. */
@media (min-width: 600px) {
  .footer_brand_col,
  .footer_links_col {
    grid-template-rows: 35px auto;
  }
}

.footer_brand_logo {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 35px;
  color: var(--color-text-light);
  text-decoration: none;
}

.footer_brand_logo svg {
  height: 100%;
}

.footer_links_title {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-light-muted);
  /* Optically centred against the brand wordmark in the 35px header row. */
  align-self: center;
}

.footer_links_list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer_links_list a {
  font-size: 0.875rem;
  color: var(--color-text-light-muted);
}

.footer_links_list a:hover {
  color: var(--color-text-light);
}

.footer_bottom_wrap {
  border-top: 1px solid var(--color-border-dark);
  padding: 30px 0;
  font-size: 0.8125rem;
  color: var(--color-text-light-muted);
}

.footer_bottom_layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}

@media (min-width: 768px) {
  .footer_bottom_layout {
    flex-direction: row;
  }
}

/* --- MOBILE RESPONSIVENESS OVERRIDES --- */
@media (max-width: 991px) {
  .nav_wrap {
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--color-border-dark);
    padding: 0;
  }

  .nav_contain {
    height: 64px;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* `.nav_wrap` carries a backdrop-filter, which makes it the containing block
     for its fixed descendants. `right: 0; bottom: 0` therefore resolved against
     a 64px-tall bar rather than the viewport, so the panel had almost no height
     and the page showed through the open menu. Sizing it from the viewport
     instead keeps it opaque whatever the bar does. */
/* Mobile: the menu becomes a full-screen sheet and the pages arrive as a
     large numbered index, each row rising in after the one before. */
  .nav_menu {
    position: fixed;
    top: 64px;
    left: 0;
    width: 100vw;
    height: calc(100dvh - 64px);
    overflow-y: auto;
    background-color: var(--color-bg-dark);
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 40px;
    padding: 24px 24px 40px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.5s;
  }

  .nav_menu.is-active {
    opacity: 1;
    visibility: visible;
  }

  .nav_links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .nav_links_item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.32, 0.72, 0, 1), transform 0.6s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .nav_menu.is-active .nav_links_item {
    opacity: 1;
    transform: translateY(0);
  }

  .nav_menu.is-active .nav_links_item:nth-child(1) { transition-delay: 0.08s; }
  .nav_menu.is-active .nav_links_item:nth-child(2) { transition-delay: 0.13s; }
  .nav_menu.is-active .nav_links_item:nth-child(3) { transition-delay: 0.18s; }
  .nav_menu.is-active .nav_links_item:nth-child(4) { transition-delay: 0.23s; }
  .nav_menu.is-active .nav_links_item:nth-child(5) { transition-delay: 0.28s; }

  .nav_link_wrap,
  .nav_link_wrap:hover,
  .nav_link_wrap.w--current {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 20px 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    white-space: normal;
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 1.1rem + 2vw, 2rem);
    font-weight: 400;
    line-height: 1.15;
  }

  .nav_link_wrap.w--current {
    color: var(--color-accent);
  }

  .nav_link_num {
    display: inline;
    min-width: 1.75rem;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--color-accent);
  }

  .nav_label_short {
    display: none;
  }

  .nav_label_full {
    display: inline;
  }

  .btn_main_wrap.nav_btn_wrap {
    display: flex;
    font-size: 1rem;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.32, 0.72, 0, 1) 0.34s, transform 0.6s cubic-bezier(0.32, 0.72, 0, 1) 0.34s, background-color 0.5s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .nav_menu.is-active .nav_btn_wrap {
    opacity: 1;
    transform: translateY(0);
  }

  .nav_menu.is-active .nav_btn_wrap:hover {
    transform: scale(0.98);
  }

  .nav_btn_wrap .btn_main_inner {
    padding: 8px 20px;
  }

  .nav_btn_wrap .btn_main_secondary {
    width: 40px;
    height: 40px;
  }

    .nav_hamburger {
    display: block;
  }
  
  .hero_visual_layout {
    grid-template-columns: 1fr;
  }
}

/* --- CONTACT HERO & LAYOUT --- */
.heading_wrap.is-hero {
  align-items: center;
  text-align: center;
}

.heading_wrap.is-hero .heading_title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* Unconstrained, this ran the full 1240px container at 4.5rem and wrapped to a
   one-word orphan line. Capped by measure it holds a deliberate two-line shape. */
.heading_wrap.is-hero h1 {
  font-size: clamp(2.125rem, 1.35rem + 3.1vw, 3.75rem);
  max-width: 18ch;
}

.hero_text_wrap {
  padding: 80px 0 20px 0;
  position: relative;
  text-align: center;
  z-index: 2;
}

.section_hero.is-contact {
  padding-top: 140px;
  padding-bottom: 0;
}

.hero_text_gradient {
  z-index: 1;
  background-image: linear-gradient(180deg, var(--color-accent), transparent);
  opacity: 0.15;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.form_contact_wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 992px) {
  .form_contact_wrap {
    grid-template-columns: 1fr 1.5fr;
  }
}

.form_contact_left {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.form_contact_right {
  display: flex;
  flex-direction: column;
}

.form_contact_text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form_demo_list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.item_main_wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.item_main_wrap .icon-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #b45309; /* Deep high-contrast gold/amber */
}

.u-section.is-contact {
  padding-top: 40px;
  padding-bottom: 80px;
}

.item_main_text {
  font-size: var(--text-md);
  color: var(--color-text-secondary);
}

/* --- CONTACT CARDS --- */
.contact_cards_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
}

.contact_card_item {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: transform 0.3s var(--transition-ease), border-color 0.3s var(--transition-ease);
}

.contact_card_item:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent);
}

.contact_card_header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.contact_card_icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background-color: var(--color-bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

.contact_card_icon svg {
  width: 24px;
  height: 24px;
}

.contact_card_title {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-text-secondary);
  font-weight: 600;
}

.contact_card_name {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  color: var(--color-text-primary);
  line-height: 1.2;
}

.contact_card_body {
  font-size: var(--text-lg);
  line-height: 1.6;
  max-width: var(--measure);
  color: var(--color-text-primary);
}

.contact_card_link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-primary);
  font-weight: 500;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.contact_card_link:hover {
  color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* --- FAQ ACCORDIONS --- */
.faq_list_wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq_list_list {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.accordion_wrap {
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  width: 100%;
}

.accordion_title {
  padding: 24px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.accordion_heading {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--color-text-primary);
  margin: 0;
}

.accordion_icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.accordion_wrap.is-open .accordion_icon-wrap {
  transform: rotate(45deg);
}

.accordion_icon {
  width: 100%;
  height: 100%;
}

.accordion_content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--transition-ease);
}

.u-rich-text-accordion {
  padding-bottom: 24px;
  color: var(--color-text-secondary);
  font-size: var(--text-lg);
  max-width: var(--measure);
  line-height: 1.65;
}

/* ==========================================================================
   PRACTICE PAGE COMPONENTS
   Added for the transactions, public sector, technology and about pages.
   Every block below reuses the existing tokens; nothing introduces a second
   accent, a second radius scale or a second type ramp.
   ========================================================================== */

/* --- SHARED SECTION HEAD ---
   Headline plus body only. */
.section_head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 760px;
  margin-bottom: 56px;
}

.section_head p {
  font-size: var(--text-lg);
  max-width: var(--measure);
}

.u-theme-dark .section_head h2 {
  color: var(--color-text-light);
}

/* --- PILLAR BENTO ---
   Four practice areas, four cells, deliberately uneven so the row does not
   read as a template. The 3-up variant carries page-to-page cross links. */
.pillar_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .pillar_grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .pillar_card:nth-child(4n + 1),
  .pillar_card:nth-child(4n) {
    grid-column: span 4;
  }

  .pillar_card:nth-child(4n + 2),
  .pillar_card:nth-child(4n + 3) {
    grid-column: span 2;
  }

  .pillar_grid.is-3up {
    grid-template-columns: repeat(3, 1fr);
  }

  .pillar_grid.is-3up .pillar_card {
    grid-column: span 1;
  }
}

.pillar_card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  min-height: 320px;
  padding: 32px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  color: var(--color-text-light);
  isolation: isolate;
  transition: transform var(--transition-speed) var(--transition-ease),
              border-color var(--transition-speed) var(--transition-ease);
}

.pillar_card_bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.7s var(--transition-ease);
}

/* The scrim is the reason the copy is readable at all, so it is part of the
   component rather than something each page has to remember to add. */
.pillar_card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(18, 13, 10, 0.92) 0%,
    rgba(18, 13, 10, 0.72) 45%,
    rgba(18, 13, 10, 0.34) 100%
  );
}

.pillar_card:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 158, 11, 0.5);
}

.pillar_card:hover .pillar_card_bg {
  transform: scale(1.06);
}

.pillar_card h3 {
  font-size: var(--text-3xl);
  color: var(--color-text-light);
}

.pillar_card p {
  color: var(--color-text-light-muted);
  font-size: var(--text-md);
  max-width: 44ch;
}

.pillar_card_link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--color-accent);
}

.pillar_card_link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-speed) var(--transition-ease);
}

.pillar_card:hover .pillar_card_link svg {
  transform: translate(3px, -3px);
}

/* --- PHASE TRACK ---
   A sequence, not a card row. The rail carries the progression and fills as
   the section is scrolled, which is the only reason it animates. */
.phase_track {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.phase_rail {
  display: none;
}

@media (min-width: 768px) {
  .phase_track {
    grid-template-columns: repeat(var(--phase-count, 4), minmax(0, 1fr));
    gap: 32px 24px;
  }

  .phase_rail {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--color-border);
    overflow: hidden;
  }

  .phase_rail_fill {
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left center;
  }
}

.u-theme-dark .phase_rail {
  background-color: var(--color-border-dark);
}

.phase_step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 20px;
  border-left: 2px solid var(--color-border);
}

.u-theme-dark .phase_step {
  border-left-color: var(--color-border-dark);
}

@media (min-width: 768px) {
  .phase_step {
    padding-left: 0;
    padding-top: 28px;
    border-left: none;
  }
}

.phase_number {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-accent-deep);
}

.u-theme-dark .phase_number {
  color: var(--color-accent);
}

.phase_step h3 {
  font-size: var(--text-xl);
  line-height: 1.25;
}

.u-theme-dark .phase_step h3 {
  color: var(--color-text-light);
}

.phase_step p {
  font-size: var(--text-md);
  line-height: 1.6;
}

/* --- CAPABILITY PANELS ---
   Grouped lists. Chunking beats a single long column of hairline rows. */
.panel_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .panel_grid.is-2up {
    grid-template-columns: repeat(2, 1fr);
  }

  .panel_grid.is-3up {
    grid-template-columns: repeat(3, 1fr);
  }
}

.panel_card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 36px 32px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: 8px;
  background-color: var(--color-bg-primary);
  transition: transform var(--transition-speed) var(--transition-ease),
              box-shadow var(--transition-speed) var(--transition-ease);
}

.panel_card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(44, 40, 37, 0.08);
}

.u-theme-dark .panel_card {
  background-color: var(--color-bg-dark-secondary);
  border-color: var(--color-border-dark);
  border-left-color: var(--color-accent);
}

.u-theme-dark .panel_card:hover {
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
}

.panel_card h3 {
  font-size: var(--text-2xl);
  line-height: 1.25;
}

.u-theme-dark .panel_card h3 {
  color: var(--color-text-light);
}

.panel_card > p {
  font-size: var(--text-md);
}

.panel_list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.panel_list li {
  position: relative;
  padding-left: 20px;
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.panel_list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--color-accent-deep);
}

.u-theme-dark .panel_list li {
  color: var(--color-text-light-muted);
}

.u-theme-dark .panel_list li::before {
  background-color: var(--color-accent);
}

/* --- DECISION TILES ---
   Short labels that carry no body copy, so a card with padding and a rule is
   the wrong weight. An outlined tile is enough. */
.tile_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 600px) {
  .tile_grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .tile_grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tile_item {
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  transition: border-color var(--transition-speed) var(--transition-ease),
              transform var(--transition-speed) var(--transition-ease);
}

.tile_item:hover {
  border-color: var(--color-accent);
  transform: translateY(-3px);
}

.u-theme-dark .tile_item {
  background-color: var(--color-bg-dark-secondary);
  border-color: var(--color-border-dark);
  color: var(--color-text-light);
}

/* --- METRIC BAND ---
   Real figures from the firm's record. Nothing here is estimated. */
.metric_band {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 600px) {
  .metric_band {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .metric_band {
    grid-template-columns: repeat(var(--metric-count, 4), minmax(0, 1fr));
    gap: 32px;
  }
}

.metric_item {
  border-left: 2px solid var(--color-accent);
  padding-left: 24px;
}

.metric_value {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  font-weight: 500;
  line-height: 1.05;
  color: var(--color-text-primary);
  margin-bottom: 10px;
}

.u-theme-dark .metric_value {
  color: var(--color-text-light);
}

.metric_label {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-secondary);
  max-width: 30ch;
}

.u-theme-dark .metric_label {
  color: var(--color-text-light-muted);
}

/* --- ENGAGEMENT PILLS --- */
.pill_row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pill_item {
  padding: 10px 18px;
  border: 1px solid var(--color-border);
  border-radius: 100px;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
}

.u-theme-dark .pill_item {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: var(--color-border-dark);
  color: var(--color-text-light);
}

/* --- PARTNER NOTE ---
   The deck qualifies two service lines as partner-delivered. The site has to
   carry the same qualifier or it overstates the bench. */
.note_callout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 24px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  background-color: var(--color-bg-secondary);
}

.u-theme-dark .note_callout {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: var(--color-border-dark);
  border-left-color: var(--color-accent);
}

.note_callout p {
  font-size: var(--text-sm);
  line-height: 1.6;
  margin: 0;
  max-width: 80ch;
}

.note_callout svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  color: var(--color-accent-deep);
}

.u-theme-dark .note_callout svg {
  color: var(--color-accent);
}

/* --- LEADERSHIP PROFILE --- */
.profile_wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

@media (min-width: 992px) {
  .profile_wrap {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 64px;
  }
}

.profile_visual {
  position: relative;
  height: 420px;
  border-radius: 8px;
  overflow: hidden;
}

.profile_visual img {
  filter: sepia(0.28) saturate(1.18) contrast(1.03);
}

.profile_intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.profile_role {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-accent-deep);
}

.u-theme-dark .profile_role {
  color: var(--color-accent);
}

.credential_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .credential_grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
  }

  .credential_grid.is-2up {
    grid-template-columns: repeat(2, 1fr);
    gap: 64px;
  }
}

.credential_col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.credential_col h3 {
  font-size: var(--text-2xl);
  line-height: 1.25;
}

/* --- FOUR-UP DIRECTORY GRIDS OVER MULTIPLE ROWS ---
   The bordered grid was written for a single row of four. With twelve cells
   the right-hand rule has to break at every fourth item, and every row except
   the last needs a rule underneath it. */
@media (min-width: 992px) {
  .layout_vertical_grid.is-border.is-multirow > * {
    border-bottom: 1px solid var(--color-border);
  }

  .layout_vertical_grid.is-border.is-multirow > *:nth-child(4n) {
    border-right: none;
  }

  .layout_vertical_grid.is-border.is-multirow > *:nth-last-child(-n + 4) {
    border-bottom: none;
  }
}

/* --- SCROLL REVEAL STATES FOR THE NEW BLOCKS --- */
html.w-mod-js [data-scroll="stagger"] > * {
  opacity: 0;
  transform: translateY(24px);
}

/* --- REDUCED MOTION ---
   Everything above is decoration on top of content that is already in the
   DOM, so the honest fallback is to show it and stop moving. */
@media (prefers-reduced-motion: reduce) {
  /* Undo the pre-hide rules rather than forcing opacity on everything: the
     hero art is authored at a reduced opacity on purpose and must keep it. */
  html.w-mod-js [data-scroll="fade-up"],
  html.w-mod-js [data-scroll="fade-left"],
  html.w-mod-js [data-scroll="heading"],
  html.w-mod-js [data-scroll="image"],
  html.w-mod-js [data-scroll="stagger"] > * {
    opacity: 1;
    transform: none;
  }

  .phase_rail_fill {
    transform: scaleX(1);
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   MASTER PROFILE ADDITIONS
   Sections carrying the parts of the HATCH master profile the site did not
   yet cover. Same tokens, same radius scale (8/12px, pills for chips), same
   single gold accent. No new scripts: reveals use the existing data-scroll
   hooks, so reduced motion is already handled above.
   ========================================================================== */

/* --- STATEMENT LINE ---
   One italic serif line per page, for the sentence the profile leads with. */
.statement_line {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.35rem, 1rem + 1.4vw, 2rem);
  line-height: 1.25;
  padding-bottom: 4px; /* descender clearance for italic g/y/p */
  max-width: 30ch;
  color: var(--color-text-primary);
  text-wrap: balance;
}

.statement_line em {
  color: var(--color-accent-deep);
}

.u-theme-dark .statement_line {
  color: var(--color-text-light);
}

.u-theme-dark .statement_line em {
  color: var(--color-accent);
}

/* --- CHIPS ---
   Noun lists from the profile. Scannable at a glance, lighter than bullets. */
.chip_row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.chip {
  padding: 6px 13px;
  border-radius: 100px;
  border: 1px solid rgba(44, 40, 37, 0.14);
  background-color: rgba(255, 255, 255, 0.4);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-text-primary);
  transition: border-color var(--transition-speed) var(--transition-ease),
              background-color var(--transition-speed) var(--transition-ease);
}

.u-theme-dark .chip {
  border-color: rgba(255, 255, 255, 0.16);
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--color-text-light);
}

.u-theme-dark .chip:hover {
  border-color: rgba(245, 158, 11, 0.6);
}

/* --- OUTCOME LIST (technology page) --- */
.outcome_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 600px) {
  .outcome_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.outcome_item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 0;
  border-top: 1px solid var(--color-border-dark);
}

.outcome_icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  background-color: var(--color-bg-dark-secondary);
  border: 1px solid var(--color-border-dark);
  transition: background-color var(--transition-speed) var(--transition-ease),
              color var(--transition-speed) var(--transition-ease);
}

.outcome_icon svg {
  width: 20px;
  height: 20px;
}

.outcome_item:hover .outcome_icon {
  background-color: var(--color-accent);
  color: var(--color-bg-dark);
}

.outcome_item p {
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-text-light);
}

/* --- DOUBLE BEZEL (technology page) ---
   A card set into a tray: a faint outer shell with a hairline, and an inner
   core with its own surface and a concentric, smaller radius. */
.u-section.u-section-roomy {
  padding: 136px 0;
}

@media (max-width: 767px) {
  .u-section.u-section-roomy {
    padding: 88px 0;
  }
}

.bezel_shell {
  --bezel-radius: 28px;
  --bezel-gap: 6px;
  padding: var(--bezel-gap);
  border-radius: var(--bezel-radius);
  background-color: rgba(44, 40, 37, 0.04);
  box-shadow: inset 0 0 0 1px rgba(44, 40, 37, 0.07);
}

.bezel_core {
  position: relative;
  height: 100%;
  border-radius: calc(var(--bezel-radius) - var(--bezel-gap));
  background-color: #fbf9f5;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.9),
    0 24px 48px -28px rgba(44, 40, 37, 0.18);
}

.bezel_shell.is-dark {
  background-color: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.bezel_shell.is-dark .bezel_core {
  background-color: var(--color-bg-dark-secondary);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.07),
    0 32px 64px -32px rgba(0, 0, 0, 0.5);
}

/* Squared bezel for pages that follow the site radius scale (12px / 6px). */
.bezel_shell.is-square {
  --bezel-radius: 12px;
}

/* --- GOVERNANCE, LEGAL & REGULATORY (transactions page) ---
   Heading and lede share one row; a tall image tray sits beside a numbered
   index of the ten advisory areas, split into two groups. */
.gov_head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 64px;
}

.gov_head h2 {
  max-width: 16ch;
  text-wrap: balance;
}

.gov_head p {
  font-size: var(--text-lg);
  max-width: var(--measure);
}

@media (min-width: 992px) {
  .gov_head {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 72px;
    align-items: end;
  }
}

.gov_wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 992px) {
  .gov_wrap {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

.gov_side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.gov_visual {
  flex: 1;
}

.gov_visual .bezel_core {
  min-height: 280px;
  overflow: hidden;
}

.gov_feature .bezel_core {
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.07), 0 24px 48px -28px rgba(44, 40, 37, 0.3);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 36px 32px;
}

.gov_feature h3 {
  margin-bottom: 4px;
  font-size: var(--text-2xl);
  line-height: 1.25;
  color: var(--color-text-light);
}

.gov_feature p {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text-light-muted);
}

.gov_panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding: 44px 40px;
}

@media (min-width: 768px) {
  .gov_panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
  }
}

@media (max-width: 767px) {
  .gov_panel {
    padding: 32px 24px;
  }
}

.gov_group h3 {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(44, 40, 37, 0.14);
  font-size: var(--text-2xl);
  line-height: 1.25;
}

.gov_list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gov_list li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  padding: 16px 0;
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--color-text-primary);
}

.gov_list li + li {
  border-top: 1px solid rgba(44, 40, 37, 0.08);
}

.gov_num {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--color-accent-deep);
}

/* --- WHAT WE DO (technology page) ---
   Asymmetric bento: strategy is the lead cell and spans both rows; the two
   transformation practices stack beside it. */
.wwd_head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 820px;
  margin-bottom: 72px;
}

.wwd_head h2 {
  color: var(--color-text-light);
  text-wrap: balance;
}

.wwd_head .statement_line {
  max-width: 36ch;
}

.wwd_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 992px) {
  .wwd_grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto;
  }

  .wwd_cell.is-lead {
    grid-column: span 7;
    grid-row: span 2;
  }

  .wwd_cell:not(.is-lead) {
    grid-column: span 5;
  }
}

.wwd_cell .bezel_core {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 40px;
  overflow: hidden;
  isolation: isolate;
}

@media (max-width: 767px) {
  .wwd_cell .bezel_core {
    padding: 28px 24px;
  }
}

.wwd_index {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--color-accent);
}

.wwd_cell h3 {
  font-size: var(--text-3xl);
  line-height: 1.2;
  color: var(--color-text-light);
  text-wrap: balance;
}

.wwd_cell.is-lead h3 {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.35rem);
  max-width: 18ch;
}

.wwd_cell p {
  max-width: 44ch;
}

.wwd_cell .wwd_lede {
  font-size: var(--text-lg);
  max-width: var(--measure);
}

.wwd_cell:not(.is-lead) .chip_row {
  margin-top: auto;
  padding-top: 12px;
}

.wwd_cell .outcome_grid {
  margin-top: 16px;
}

.wwd_cell .outcome_item {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.wwd_cell .outcome_icon {
  border-radius: 100px;
  background-color: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.2);
  transition: background-color 0.6s cubic-bezier(0.32, 0.72, 0, 1),
              color 0.6s cubic-bezier(0.32, 0.72, 0, 1),
              transform 0.6s cubic-bezier(0.32, 0.72, 0, 1);
}

.wwd_cell .outcome_item:hover .outcome_icon {
  transform: translateY(-2px) scale(1.05);
}

/* --- WHAT WE BUILD (technology page) ---
   Editorial split: the heading holds the left column, the four build lines
   run as a large-type index on the right. */
.build_wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 992px) {
  .build_wrap {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 72px;
    align-items: start;
  }

  .build_head {
    position: sticky;
    top: calc(var(--nav-clearance) + 24px);
  }
}

.build_head h2 {
  font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4.25rem);
  line-height: 1.05;
}

.build_index {
  list-style: none;
  margin: 0;
  padding: 8px 40px;
}

@media (max-width: 767px) {
  .build_index {
    padding: 4px 22px;
  }
}

.build_row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 36px 0;
}

@media (max-width: 767px) {
  .build_row {
    gap: 16px;
    padding: 26px 0;
  }
}

.build_row + .build_row {
  border-top: 1px solid rgba(44, 40, 37, 0.08);
}

.build_num {
  min-width: 2.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--color-accent-deep);
}

.build_row h3 {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  line-height: 1.15;
}

.build_icon {
  width: 52px;
  height: 52px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary);
  background-color: rgba(44, 40, 37, 0.04);
  box-shadow: inset 0 0 0 1px rgba(44, 40, 37, 0.08);
}

@media (max-width: 767px) {
  .build_icon {
    width: 40px;
    height: 40px;
  }
}

.build_icon svg {
  width: 20px;
  height: 20px;
}

/* --- SERVICE INDEX (about page) ---
   Four service lines as an index the eye runs down, each row a link. */
.services_head {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: 64px;
}

.services_head h2 {
  font-size: clamp(1.75rem, 1.15rem + 2.2vw, 2.75rem);
  line-height: 1.2;
  max-width: 30ch;
  color: var(--color-text-light);
  text-wrap: balance;
}

.services_head h2 em {
  color: var(--color-accent);
}

.service_index {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border-dark);
}

.service_row a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 8px 16px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid var(--color-border-dark);
}

@media (min-width: 768px) {
  .service_row a {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 48px;
    gap: 40px;
    padding: 36px 0;
  }
}

/* A gold rule draws along the row on hover: it marks the row as the target. */
.service_row a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background-color: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--transition-ease);
}

.service_row a:hover::after,
.service_row a:focus-visible::after {
  transform: scaleX(1);
}

.service_row_title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  line-height: 1.2;
  color: var(--color-text-light);
  transition: color var(--transition-speed) var(--transition-ease),
              transform 0.5s var(--transition-ease);
}

.service_row a:hover .service_row_title {
  color: var(--color-accent);
  transform: translateX(8px);
}

.service_row_desc {
  grid-column: 1 / 2;
  grid-row: 2;
}

@media (min-width: 768px) {
  .service_row_desc {
    grid-column: auto;
    grid-row: auto;
  }
}

.service_row_desc p {
  font-size: var(--text-lg);
  line-height: 1.55;
}

.service_row_arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-light);
  transition: background-color var(--transition-speed) var(--transition-ease),
              border-color var(--transition-speed) var(--transition-ease),
              color var(--transition-speed) var(--transition-ease),
              transform 0.5s var(--transition-ease);
}

@media (min-width: 768px) {
  .service_row_arrow {
    grid-column: auto;
    grid-row: auto;
    width: 48px;
    height: 48px;
  }
}

.service_row_arrow svg {
  width: 18px;
  height: 18px;
}

.service_row a:hover .service_row_arrow {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg-dark);
  transform: rotate(45deg);
}

/* --- LEDGER ---
   Sticky heading on the left, entries scrolling past it on the right. */
.ledger_wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 992px) {
  .ledger_wrap {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 88px;
    align-items: start;
  }

  .ledger_aside {
    position: sticky;
    top: calc(var(--nav-clearance) + 32px);
  }
}

.ledger_aside {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ledger_aside > p {
  font-size: var(--text-lg);
  max-width: var(--measure);
}

.ledger_group_title {
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-text-primary);
  padding-bottom: 20px;
  border-bottom: 2px solid var(--color-accent);
}

.ledger_list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ledger_item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 28px 0;
  border-bottom: 1px solid var(--color-border);
}

.ledger_item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ledger_icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-primary);
  color: var(--color-accent-deep);
  transition: background-color var(--transition-speed) var(--transition-ease),
              border-color var(--transition-speed) var(--transition-ease),
              color var(--transition-speed) var(--transition-ease);
}

.ledger_icon svg {
  width: 22px;
  height: 22px;
}

.ledger_item:hover .ledger_icon {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg-dark);
}

.ledger_body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
}

.ledger_body h3 {
  font-size: var(--text-2xl);
  line-height: 1.25;
}

.ledger_text {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  line-height: 1.3;
  color: var(--color-text-primary);
}

/* --- RECORD NOTE (about page) --- */
.record_note {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--color-border-dark);
}

@media (min-width: 768px) {
  .record_note {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 32px;
    align-items: baseline;
  }
}

.record_note h3 {
  font-size: var(--text-2xl);
  color: var(--color-text-light);
}

.record_note p {
  font-size: var(--text-lg);
  max-width: 60ch;
}