@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: 44px;
  text-decoration: none;
}

.nav_brand svg {
  height: 100%;
}

/* --- BRAND LOCKUP (the hatch Consulting logo) ---
   One artwork file, drawn in cream because every surface it sits on — the glass
   nav and the footer — is dark. The nav keeps it small enough for a 64px bar;
   the footer has room to let "Consulting" breathe. */
.brand_lockup {
  height: 100%;
  width: auto;
  flex: none;
  display: block;
}

.brand_lockup.is-footer {
  height: 52px;
}

.brand_mark {
  height: 100%;
  width: auto;
  flex: none;
  overflow: visible;
}

/* 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;
  /* Image frames round their corners with border-radius plus overflow: hidden.
     Chrome and Safari let a child that carries its own transform (the GSAP
     reveal) or filter escape that clip, which left the top corners square while
     the bottom pair stayed round. Repeating the frame radius on the image makes
     the clip hold on all four corners. A square frame inherits 0 and is
     unaffected. */
  border-radius: inherit;
}


/* --- 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;
  isolation: isolate;
}

/* 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;
}

/* This paragraph is now the whole CTA — there is no heading above it — so it
   carries the weight the heading used to. */
.footer_cta_description {
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);
  line-height: 1.25;
  font-weight: 500;
  max-width: 760px;
  color: var(--color-text-light);
  /* 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: 52px auto;
  }
}

.footer_brand_logo {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  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;
}

/* Title-only variant: with the descriptions gone the title is the whole step,
   so it takes the weight the paragraph used to carry. */
.phase_track.is-titles .phase_step h3 {
  font-size: var(--text-2xl);
  text-wrap: balance;
}

@media (min-width: 768px) {
  .phase_track.is-titles .phase_step {
    gap: 16px;
    padding-top: 32px;
    padding-right: 16px;
  }
}

/* --- 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: border-color var(--transition-speed) var(--transition-ease);
}

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

.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 {
  border-color: var(--color-accent);
}

.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);
}

/* Items that lead with a named theme rather than running straight into the
   sentence. The lead-in carries the weight so the list scans by topic. */
.panel_list b {
  font-weight: 600;
  color: var(--color-text-primary);
}

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

/* Five or more themed items read better in two columns than as one long run. */
@media (min-width: 768px) {
  .panel_list.is-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 56px;
    align-content: start;
  }
}

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

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

/* --- ACCENT TILE  (.tile_grid > .tile_item) ---
   REUSABLE. This is the outlined box whose border lights up accent-yellow and
   lifts on hover. Use it for any set of short labels that carry no body copy —
   a card with padding and a rule is the wrong weight for those.
   Works on light and dark sections (see .u-theme-dark .tile_item).

   Two sizes:
     .tile_grid              3-up, label-sized text. For lists of short phrases.
     .tile_grid.is-headline  2-up, serif title plus an index numeral. For a
                             small set of headline-weight titles.
                             Markup: <div class="tile_item is-headline">
                                       <span class="tile_index">01</span><h3>…</h3>
                                     </div>
*/
.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);
}

/* Same specificity as the rule above and declared later, so without this the
   dark-section tiles never showed the accent highlight on hover. */
.u-theme-dark .tile_item:hover {
  border-color: var(--color-accent);
}

/* --- headline size --- */
@media (min-width: 768px) {
  .tile_grid.is-headline {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

.tile_item.is-headline {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 36px 32px;
}

.tile_item.is-headline h3 {
  font-size: var(--text-2xl);
  line-height: 1.25;
  text-wrap: balance;
}

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

.tile_index {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1;
  color: var(--color-accent-deep);
  transition: color var(--transition-speed) var(--transition-ease);
}

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

/* The index is the part that reacts; the border lift does the rest. */
.tile_item.is-headline:hover .tile_index {
  color: var(--color-accent);
}

/* --- BULLET BOXES  (.bullet_grid > .bullet_box) ---
   A short list that still wants to read as a list, not as three cards. Each
   item keeps its bullet, so the set scans as points; the box only gives the
   point somewhere to sit. The mark is a dot inside a soft accent halo, and the
   halo is what opens on hover, so the movement reads as the bullet lighting up
   rather than a card hovering. */
.bullet_grid {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

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

.bullet_box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 26px 28px;
  border-radius: 10px;
  background-color: var(--color-bg-secondary);
  /* Hairline as an inset ring rather than a border, so the hover colour change
     does not shift the box by a pixel. */
  border: 1px solid var(--color-border);
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-text-primary);
  transition: border-color 700ms cubic-bezier(0.32, 0.72, 0, 1);
}

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

.bullet_box_mark {
  width: 9px;
  height: 9px;
  /* Sits on the first line's optical centre rather than its top. */
  margin-top: 0.5em;
  border-radius: 50%;
  background-color: var(--color-accent-deep);
}

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

.u-theme-dark .bullet_box:hover {
  border-color: var(--color-accent);
}

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

/* --- 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;
  }

  /* The second profile mirrors the first so the pair reads as a spread rather
     than the same row printed twice. Source order stays visual-then-text, so
     the phone layout is identical for both. */
  .profile_wrap.is-reverse {
    grid-template-columns: 1.2fr 0.8fr;
  }

  .profile_wrap.is-reverse .profile_visual { order: 2; }
  .profile_wrap.is-reverse .profile_intro { order: 1; }
}

/* Matches the site image frame (.split_main_visual): 8px radius, no border,
   the same warm grade. Both director portraits share one height so the pair
   reads as a spread. */
.profile_visual {
  position: relative;
  height: 480px;
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
}

.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);
}

[hidden] {
  display: none !important;
}

.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;
  }

  /* One block across the full width; the list inside splits itself. */
  .credential_grid.is-1up {
    grid-template-columns: 1fr;
  }
}

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

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

/* --- TEAM UNIT (about page) ---
   A named team inside the Team section: its own heading and prose, then the
   capabilities as a 2x2 of trays. Four capabilities, four cells, no filler. */
.team_unit {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

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

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

/* The heading stays stacked above; the prose runs as two columns so the band
   holds the same width as the capability grid below it instead of leaving the
   right half of the row empty. */
.team_unit_body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

@media (min-width: 768px) {
  .team_unit_body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px;
    align-items: start;
  }
}

/* A lead-in to the grid, not a section eyebrow: sentence case, no tracking. */
.team_unit_label {
  margin-bottom: -16px;
  font-size: var(--text-lg);
  color: var(--color-text-light);
}

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

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

.capability_card .bezel_core {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: 36px 32px;
}

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

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

.capability_card h4 {
  font-size: var(--text-2xl);
  line-height: 1.25;
  color: var(--color-text-light);
  text-wrap: balance;
}

/* --measure is 48ch, which wraps noticeably tighter than the two intro columns
   above and made the closing line look clipped. 72ch matches their rhythm. */
.team_unit_close {
  max-width: none;
}

/* --- 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);
}

/* --- 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: 12px;
  --bezel-gap: 0px;
  padding: var(--bezel-gap);
  border-radius: var(--bezel-radius);
  background-color: transparent;
}

.bezel_core {
  position: relative;
  height: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--bezel-radius);
  background-color: var(--color-bg-primary);
}

.bezel_shell.is-dark {
  background-color: transparent;
}

.bezel_shell.is-dark .bezel_core {
  background-color: var(--color-bg-dark-secondary);
  border-color: var(--color-border-dark);
}

/* 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: none;
}

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

.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 {
  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);
}

/* The tray now holds two titles rather than ten numbered rows, so it is laid
   out as two bands spread down its height. Spreading them is what keeps the
   tray from reading as a list with the list missing. */
.gov_panel {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  padding: 44px 40px;
}

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

.gov_pillar {
  display: flex;
  flex-direction: column;
  /* Top-aligned, so each title sits directly under its own rule instead of
     drifting to the middle of the band and orphaning it. */
  justify-content: flex-start;
  gap: 14px;
  padding: 28px 0 36px;
  border-top: 1px solid var(--color-accent);
}

.gov_pillar:first-child {
  padding-top: 8px;
}

/* The tray is wide and now holds two lines of text, so the titles are set at
   sub-heading scale to hold it. */
.gov_pillar h3 {
  font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.125rem);
  line-height: 1.15;
  text-wrap: balance;
}

.gov_pillar_index {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1;
  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;
}

/* Four cells, four practices. The widths pinwheel (7-5 over the first row,
   5-7 over the second) so the set reads as a composition rather than a 2x2
   of equal boxes, and no cell is left empty. */
@media (min-width: 992px) {
  .wwd_grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .wwd_cell:nth-child(1) { grid-column: span 7; }
  .wwd_cell:nth-child(2) { grid-column: span 5; }
  .wwd_cell:nth-child(3) { grid-column: span 5; }
  .wwd_cell:nth-child(4) { grid-column: span 7; }
}

.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;
}

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

/* The heading no longer sticks. The index is four short rows, so the right
   column is never taller than the viewport and there was nothing to stick
   against; it only left the heading parked at the foot of the section. */
@media (min-width: 992px) {
  .build_wrap {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: start;
  }
}

/* This heading used to run to 68px against a site-wide h2 ceiling of 48px,
   which is why the section read as belonging to a different page. It now uses
   the site scale. */
.build_head h2 {
  text-wrap: balance;
}

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

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

/* Two columns since the trailing icons were removed: index, then the line. */
.build_row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  padding: 26px 0;
}

@media (max-width: 767px) {
  .build_row {
    gap: 16px;
    padding: 20px 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);
}

/* Was capped at 40px, which out-shouted every other sub-heading on the site.
   --text-3xl is the scale the other index rows use. */
.build_row h3 {
  font-size: var(--text-3xl);
  line-height: 1.2;
}

/* --- 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;
}