:root {
  --ink: #0a0a0b;
  --char: #141821;
  --char2: #1c212c;
  --line: #2a303c;
  --amber: #F5B301;
  --amber-d: #d99e00;
  --amber-faint: rgba(245,179,1,0.07);
  --fg: #f4f5f7;
  --mid: #cdd5e0;
  --mut: #9aa4b2;
  --blue: #4a9eff;
  
  --font-heading: 'Archivo', Arial, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --br: 0;
  --br-sm: 2px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--ink);
  color: var(--fg);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--mut);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--fg);
}

img {
  max-width: 100%;
  display: block;
  background-color: var(--ink);
}

ul {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fg);
  line-height: 1.15;
}

h1 {
  font-weight: 900;
  font-size: clamp(2.8rem, 5.5vw, 5.5rem);
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(2rem, 3.5vw, 3rem);
}

h3 {
  font-size: 1.5rem;
  font-weight: 700;
}

p {
  color: var(--mid);
  margin-bottom: 1rem;
}

.wrap, .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 36px;
}

@media (max-width: 480px) {
  .wrap, .container { padding: 0 20px; }
  .header-cta { display: none; }
}

.section {
  padding: 88px 0;
}

@media (max-width: 640px) {
  .section { padding: 56px 0; }
}

/* Page transition motion (fade/slide/height-crossfade) is driven entirely
   from interactions.js via inline styles set on #swup, so it can coordinate
   height, opacity and transform together — see initMotionHooks(). */

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 11, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.logo, .footer-logo, .foot-brand .logo {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.4rem;
  color: var(--fg);
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.logo:hover, .footer-logo:hover, .foot-brand .logo:hover {
  opacity: 0.82;
}

.logo em, .footer-logo em, .foot-brand .logo em {
  font-style: normal;
  color: var(--amber);
}

/* FOOTER — 3-column redesign */
.site-footer {
  background: var(--ink);
  border-top: 1px solid var(--line);
  padding: 64px 0 36px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 4rem;
  margin-bottom: 3rem;
  align-items: start;
}

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
@media (max-width: 580px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}

.footer-tagline {
  color: var(--mut);
  font-size:.875rem;
  line-height: 1.65;
  margin-top: 0.6rem;
  max-width: 28ch;
}

.footer-social {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.4rem;
}

.footer-social-link {
  color: var(--mut);
  transition: color 0.15s ease, transform 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: var(--char);
  text-decoration: none;
  border-radius: var(--br-sm);
}

.footer-social-link:hover {
  color: var(--amber);
  border-color: var(--amber);
  transform: translateY(-2px);
}

.footer-col-heading {
  font-family: var(--font-heading);
  font-size:.875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 1.2rem;
}

.footer-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0;
  margin: 0;
}

.footer-nav-list a {
  color: var(--mut);
  font-size:.875rem;
  transition: color 0.15s ease;
  text-decoration: none;
}

.footer-nav-list a:hover {
  color: var(--fg);
}

.footer-contact-item {
  color: var(--mut);
  font-size:.875rem;
  margin-bottom: 0.35rem;
}

.footer-contact-item a {
  color: var(--amber);
  transition: color 0.15s ease;
  text-decoration: none;
}

.footer-contact-item a:hover {
  color: var(--fg);
}

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-bottom p {
  color: var(--mut);
  font-size:.875rem;
  margin: 0;
}

.footer-bottom-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.footer-bottom a {
  color: var(--mut);
  font-size:.875rem;
  transition: color 0.15s ease;
  text-decoration: none;
}

.footer-bottom a:hover {
  color: var(--amber);
}



.footer-cookie-btn:hover {
  color: var(--amber);
}


.logo img {
  height: 38px;
  width: auto;
  flex-shrink: 0;
}

.site-nav > ul {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.site-nav a {
  color: var(--mut);
  font-weight: 500;
  font-size: 0.95rem;
  padding-bottom: 3px;
  background-image: linear-gradient(var(--amber), var(--amber));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: color 0.2s ease, background-size 0.25s ease;
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--fg);
  background-size: 100% 2px;
}

.site-nav a.active {
  color: var(--amber);
}

.has-dropdown {
  position: relative;
}

.has-dropdown > a::after {
  content: '\25BE';
  font-size:.875rem;
  color: var(--amber);
  margin-left: 0.35rem;
  vertical-align: middle;
  display: inline-block;
  transition: transform 0.2s ease;
}

.has-dropdown:hover > a::after {
  transform: rotate(-180deg);
}

.dropdown {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 230px;
  background: var(--char);
  border: 1px solid var(--line);
  border-top: 2px solid var(--amber);
  padding: 0.5rem 0;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.3);
  z-index: 300;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}

.dropdown-label {
  display: block;
  padding: 0.4rem 1.1rem 0.2rem;
  font-size:.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--amber);
  opacity: 0.75;
}

.dropdown li a {
  display: flex;
  align-items: center;
  padding: 0.55rem 1.1rem;
  color: var(--mut);
  font-size: 0.88rem;
  border-left: 2px solid transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.dropdown li a:hover {
  background: var(--char2);
  color: var(--fg);
  border-left-color: var(--amber);
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--fg);
  padding: 0.5rem;
  cursor: pointer;
  border-radius: var(--br-sm);
}



@media (max-width: 860px) {
  .nav-toggle {
    display: block;
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .site-nav > ul { display: none; }

  .site-nav.open > ul {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--char);
    border-bottom: 1px solid var(--line);
    padding: 1rem 0;
    gap: 0;
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .site-nav.open > ul > li { width: 100%; }
  .site-nav.open > ul > li > a { display: block; padding: 0.9rem 36px; min-height: 44px; display: flex; align-items: center; }

  .has-dropdown .dropdown {
    position: static;
    visibility: visible;
    opacity: 1;
    transform: none;
    display: none;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--line);
    background: var(--char2);
  }
  /* Submenu links indented further than parent links for clear hierarchy */
  .has-dropdown .dropdown a,
  .has-drop .drop a {
    padding-left: 52px;
  }
  .has-dropdown.open .dropdown { display: block; }
}

/* Search overlay */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10,10,11,0.85);
  backdrop-filter: blur(4px);
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 20px 0;
}

.search-modal {
  width: 100%;
  max-width: 600px;
  background: var(--char);
  border: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.search-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
}

.search-input-wrap svg {
  color: var(--mut);
  flex-shrink: 0;
}

#search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--fg);
  font-size: 1rem;
  font-family: var(--font-body);
}

.search-close-btn {
  background: none;
  border: none;
  color: var(--mut);
  cursor: pointer;
  font-size: 1.1rem;
}

#search-results {
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.5rem;
}

.search-result {
  display: block;
  padding: 0.75rem 1rem;
}

.search-result:hover {
  background: var(--char2);
}

.search-result strong {
  color: var(--fg);
  display: block;
  margin-bottom: 0.25rem;
}

.search-snip {
  color: var(--mut);
  font-size:.875rem;
  margin-bottom: 0;
}

.search-hint {
  color: var(--mut);
  padding: 1.5rem;
  text-align: center;
}

.search-result mark, .search-snip mark {
  background: var(--amber-faint);
  color: var(--amber);
}

@media (max-width: 640px) {
  .search-overlay { padding: 0; align-items: stretch; }
  .search-modal { max-width: none; height: 100%; display: flex; flex-direction: column; }
  #search-results { flex: 1; max-height: none; }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--br-sm);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn:hover, .btn:focus-visible {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}

.btn-primary, .btn-a, .header-cta {
  background-color: var(--amber);
  color: var(--ink);
  border: 1px solid var(--amber);
}

.btn-primary:hover, .btn-a:hover, .header-cta:hover {
  background-color: var(--amber-d);
  border-color: var(--amber-d);
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(245, 179, 1, 0.28);
}

.btn-ghost, .btn-g {
  background-color: transparent;
  border: 1px solid var(--line);
  color: var(--fg);
}

.btn-ghost:hover, .btn-g:hover {
  border-color: var(--amber);
  color: var(--amber);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.btn-ghost-light {
  background-color: transparent;
  border: 1px solid rgba(244,245,247,0.3);
  color: var(--fg);
}
.btn-ghost-light:hover {
  border-color: var(--amber);
  color: var(--amber);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

/* Eyebrows */
.eyebrow, .about-content eyebrow, .credentials-label, .sp-panel-label, .brief-label, .contact-detail-label, .article-toc-label, .ep-highlight .brief-label, .sp-relevance-label {
  display: inline-block;
  color: var(--amber);
  font-family: var(--font-body);
  font-size:.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

/* Hero Section */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 88vh;
  min-height: 88dvh;
  display: flex;
  align-items: center;
  background: #0d1017;
  padding: 0;
}

.hero-img {
  position: absolute;
  inset: 0;
  background: #0d1017 url('https://images.unsplash.com/photo-1558494949-ef010cbdcc31?auto=format&fit=crop&w=1600&q=60') center / cover no-repeat;
}
.hero-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #0a0a0b 34%, rgba(10,10,11,.72) 58%, rgba(10,10,11,.35) 100%);
}

.hero-glow {
  position: absolute;
  top: -10%;
  right: -6%;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, rgba(245,179,1,.16), transparent 62%);
  pointer-events: none;
  z-index: 1;
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 88vh;
  min-height: 88dvh;
  display: flex;
  align-items: center;
  padding: 5rem 0;
}

.hero-text {
  max-width: 780px;
}

.hero-text h1 {
  font-size: clamp(2.9rem, 7vw, 6rem);
  font-weight: 900;
  text-transform: uppercase;
  max-width: 16ch;
  color: var(--fg);
}

.grad-text {
  color: var(--amber);
}

.hero-sub {
  color: var(--mut);
  font-size: 1.15rem;
  max-width: 46ch;
  margin: 1.8rem 0 2.4rem;
}

.hero-btns {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-stats {
  display: flex;
  gap: 3rem;
  margin-top: 3.5rem;
  flex-wrap: wrap;
}

.hero-stat strong {
  display: block;
  color: var(--fg);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
}

.hero-stat strong em {
  color: var(--amber);
  font-style: normal;
}

.hero-stat span {
  color: var(--mut);
  font-size:.875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.hero-visual, .hero-wave { display: none; }


/* Credentials Strip & Marquee */
.credentials-strip {
  background-color: var(--char2);
  border-top: 1px solid var(--line);
  padding: 1rem 0;
}

.credentials-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.credentials-list {
  display: flex;
  gap: 1.5rem;
}

.credentials-item {
  color: var(--mut);
  display: flex;
  align-items: center;
  font-size: 0.9rem;
}
.credentials-item::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--amber);
  border-radius: 50%;
  margin-right: 0.5rem;
}



/* About Section */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.about-img-wrap {
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  min-height: 430px;
}

.about-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.about-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: var(--amber);
  color: var(--ink);
  font-weight: 700;
  padding: 0.5rem 1rem;
  font-size:.875rem;
}

.about-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--mid);
  margin-bottom: 0.5rem;
}
.about-check::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--amber);
}

/* Route G sector photo cards (.scard) */
.sgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.scard {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.9rem;
  border: 1px solid var(--line);
  background: var(--char);
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.scard:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
}
.scard::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #0a0a0b 12%, rgba(10,10,11,.35) 70%);
}
.scard > * { position: relative; z-index: 2; }
.scard-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.42;
  transition: opacity .4s, transform .4s;
}
.scard:hover .scard-bg {
  opacity: 0.62;
  transform: scale(1.05);
}
.scard-num {
  font-family: var(--font-heading);
  color: var(--amber);
  font-weight: 700;
  font-size:.875rem;
  letter-spacing: 0.12em;
  margin-bottom: 0.5rem;
  display: block;
}
.scard h3 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--fg);
  margin-bottom: 0.5rem;
}
.scard p {
  color: var(--mut);
  font-size: 0.9rem;
  margin-bottom: 0;
}
.scard-go {
  display: block;
  margin-top: 1rem;
  color: var(--amber);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size:.875rem;
}

/* Sector / Services Cards */
.svc-grid, .bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

@media (max-width: 400px) {
  .svc-grid, .bento-grid { grid-template-columns: 1fr; }
}

.svc-card, .bento-card {
  background-color: var(--char);
  border: 1px solid var(--line);
  border-radius: var(--br);
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, transform 0.3s ease, box-shadow 0.3s ease;
  padding: 2rem;
  text-decoration: none;
}

.svc-card:hover, .bento-card:hover {
  border-color: var(--amber);
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
}

.svc-card-icon {
  stroke: var(--amber);
  margin-bottom: 1.5rem;
}

.svc-card-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  margin-bottom: 1.5rem;
  border: 1px solid var(--line);
}

.svc-card-title, .bento-card h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 0.5rem;
}

.svc-card-summary, .bento-card p {
  color: var(--mut);
  font-size: 0.9rem;
}

.bento-num {
  color: var(--amber);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  opacity: 0.5;
  margin-bottom: 1rem;
}
.bento-link {
  color: var(--amber);
  font-weight: 700;
  margin-top: auto;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.service-card {
  background-color: var(--char);
  border: 1px solid var(--line);
  border-radius: var(--br);
  padding: 2rem;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
}

.service-num {
  color: var(--amber);
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 2rem;
  opacity: 0.3;
  margin-bottom: 1rem;
}

.service-card h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 0.5rem;
}

/* Inner CTA */
.inner-cta {
  background-color: var(--char);
  border-top: 1px solid var(--line);
  padding: 80px 0;
}

.inner-cta-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2rem;
}

@media (max-width: 760px) {
  .inner-cta-inner { grid-template-columns: 1fr; }
}

.inner-cta-text h2 {
  font-family: var(--font-heading);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}

.inner-cta-btns {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Page Header (Inner) */
.page-header, .page-header--dark, .ep-page-header {
  background-color: var(--char);
  padding: 88px 0 72px;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

/* Hero image support via --header-img CSS custom property */
.page-header[style*='--header-img'],
.page-header--dark[style*='--header-img'],
.ep-page-header[style*='--header-img'] {
  background-image: var(--header-img);
  background-size: cover;
  background-position: center;
}
.page-header[style*='--header-img']::before,
.page-header--dark[style*='--header-img']::before,
.ep-page-header[style*='--header-img']::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #0a0a0b 34%, rgba(10,10,11,0.72) 58%, rgba(10,10,11,0.35) 100%);
  z-index: 1;
  pointer-events: none;
}
.page-header .container,
.page-header .ep-head-inner,
.ep-page-header .container,
.ep-page-header .ep-head-inner,
.ep-head-text {
  position: relative;
  z-index: 2;
}

/* Sub-service Tabs */
.ep-nav-wrap {
  border-bottom: 1px solid var(--line);
  background: var(--ink);
}
.ep-nav {
  display: flex;
  gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.ep-nav::-webkit-scrollbar { display: none; }
.ep-nav li {
  display: flex;
}
.ep-nav a {
  display: inline-block;
  padding: 1.25rem 0;
  color: var(--mut);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  border-bottom: 2px solid transparent;
  transition: color 0.2s;
  white-space: nowrap;
}
.ep-nav a:hover {
  color: var(--amber);
}
.ep-nav a.active {
  color: var(--fg);
  border-bottom-color: var(--amber);
}

.ep-head-text {
  max-width: 720px;
}
.ep-head-text h1 {
  margin-top: 0.5rem;
  margin-bottom: 0.8rem;
}
.ep-headline {
  color: var(--mid);
  font-size: 1.15rem;
  line-height: 1.7;
  max-width: 56ch;
}

/* Sub-Service Structured Layout */
.subsvc-section {
  padding: 72px 0 96px;
  background: var(--ink);
}

.subsvc-lead-card {
  background: var(--char);
  border: 1px solid var(--line);
  border-left: 4px solid var(--amber);
  padding: 2.2rem 2.5rem;
  border-radius: var(--br-sm);
  margin-bottom: 3.5rem;
}

.subsvc-lead-card .eyebrow {
  margin-bottom: 0.6rem;
}

.subsvc-lead-text {
  font-size: 1.12rem;
  line-height: 1.8;
  color: var(--fg);
  margin: 0;
}

.subsvc-heading-wrap {
  margin-bottom: 2rem;
}

.subsvc-heading-wrap h2 {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--fg);
}

.subsvc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

@media (max-width: 480px) {
  .subsvc-grid { grid-template-columns: 1fr; }
}

.subsvc-card {
  background: var(--char2);
  border: 1px solid var(--line);
  border-top: 2px solid var(--line);
  padding: 2rem;
  border-radius: var(--br-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.subsvc-card:hover {
  border-color: var(--amber);
  border-top-color: var(--amber);
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
}

.subsvc-card-num {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.4rem;
  color: var(--amber);
  margin-bottom: 1rem;
  display: block;
}

.subsvc-card-body {
  color: var(--mid);
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0;
}

.page-header-inner, .ep-head-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.page-header h1 {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  color: var(--fg);
}

.ep-head-text h1 {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
}

/* Breadcrumb */
.bc-bar {
  background: var(--char2);
  border-bottom: 1px solid var(--line);
  padding: 0.75rem 0;
}
.bc-bar .wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size:.875rem;
}
.bc-bar a {
  color: var(--mut);
  transition: color 0.15s;
  text-decoration: none;
}
.bc-bar a:hover {
  color: var(--amber);
}
.bc-sep {
  color: var(--line);
  margin: 0 0.35rem;
}
.bc-current {
  color: var(--mid);
}

.meta {
  color: var(--mut);
  font-size:.875rem;
  margin-top: 1rem;
}

.breadcrumb {
  background-color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 0.65rem 0;
}

.breadcrumb-inner {
  display: flex;
  gap: 0;
  color: var(--mut);
  font-size:.875rem;
  align-items: center;
}
.breadcrumb-inner a {
  color: var(--mut);
  transition: color 0.15s;
}
.breadcrumb-inner a:hover {
  color: var(--amber);
}

.breadcrumb-sep {
  color: var(--line);
  margin: 0 0.55rem;
  font-size: 0.9em;
}

.breadcrumb-current {
  color: var(--mid);
}

/* Card image filter — prevents white-bg images from being jarring on dark bg */
.card-img img, .content-card img {
  filter: brightness(0.88) contrast(1.05);
  transition: filter 0.25s ease;
}
.content-card:hover .card-img img {
  filter: brightness(1) contrast(1);
}

/* Article Layout */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 4rem;
  padding: 4rem 0;
}

.article-body {
  max-width: 720px;
}

.article-toc {
  position: sticky;
  top: 100px;
  align-self: start;
}

.article-toc-inner {
  background-color: var(--char2);
  border: 1px solid var(--line);
  padding: 1.4rem;
}

.article-toc nav a {
  color: var(--mut);
  font-size: 0.9rem;
  display: block;
  margin-bottom: 0.5rem;
  transition: color 0.2s ease;
}

.article-toc nav a:hover {
  color: var(--amber);
}

.article-nav {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  margin-top: 3rem;
  padding-top: 1.5rem;
}

.article-nav a {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  color: var(--fg);
  font-size: 0.9rem;
}
.article-nav a:hover {
  border-color: var(--amber);
  color: var(--amber);
}

.article-body h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--fg);
  border-left: 4px solid var(--amber);
  padding-left: 1rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.article-body h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--fg);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.article-body p {
  color: var(--mid);
  line-height: 1.82;
  margin-bottom: 1.2rem;
}

.callout {
  background-color: var(--char2);
  border-left: 3px solid var(--amber);
  padding: 1.2rem 1.6rem;
  margin: 1.5rem 0;
}

.tag-chip, .insight-tag {
  background-color: var(--char2);
  border: 1px solid var(--line);
  color: var(--mut);
  font-size:.875rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--br);
  display: inline-block;
  margin-right: 0.5rem;
}

.reading-time {
  color: var(--mut);
  font-size:.875rem;
}

.article-bridge {
  background-color: var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.5rem 0;
  text-align: center;
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 2rem 0;
}

/* Expertise Page */
.ep-headline {
  color: var(--mid);
  font-size: 1.1rem;
  max-width: 60ch;
  margin-top: 1rem;
}

.ep-highlights-bar {
  background-color: var(--char2);
  border-top: 1px solid var(--line);
}

.ep-highlights-grid {
  display: flex;
}

.ep-highlight {
  padding: 1.5rem 2rem;
  flex: 1;
  border-right: 1px solid var(--line);
}
.ep-highlight:last-child {
  border-right: none;
}

.ep-highlight p {
  color: var(--fg);
  font-family: var(--font-heading);
  font-weight: 700;
  margin: 0;
}

.ep-about-strip {
  background-color: var(--char);
  padding: 72px 0;
}

.ep-profile-wrap {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
}

.ep-profile-photo img {
  border: 1px solid var(--line);
  max-width: 240px;
}

.ep-profile-meta {
  display: flex;
  flex-direction: column;
}

.ep-profile-name {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--fg);
  font-size: 1.4rem;
}

.ep-profile-role {
  color: var(--mid);
  margin-bottom: 0.2rem;
}

.ep-profile-co {
  color: var(--mut);
  font-size:.875rem;
}

.ep-bio {
  color: var(--mid);
  line-height: 1.8;
  margin-top: 1rem;
}

.ep-about-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
}

.ep-about-highlight {
  background-color: var(--char2);
  border: 1px solid var(--line);
  padding: 1rem;
}

.ep-list li, .work-cap-list li, .work-chapter-list li {
  position: relative;
  padding-left: 1.2rem;
  color: var(--mid);
  margin-bottom: 0.5rem;
}
.ep-list li::before, .work-cap-list li::before, .work-chapter-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 6px;
  height: 6px;
  background-color: var(--amber);
  border-radius: 50%;
}

/* Work Page / Brief Card */
.work-chapter {
  padding: 80px 0;
}
.work-chapter:nth-child(odd) {
  background-color: var(--ink);
}
.work-chapter:nth-child(even) {
  background-color: var(--char);
}

.work-chapter-inner {
  display: flex;
  gap: 4rem;
}

.work-chapter-num {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 4rem;
  color: var(--amber);
  opacity: 0.15;
  line-height: 1;
}

.work-chapter-body h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--fg);
  margin-bottom: 1rem;
}

.work-chapter-lead {
  color: var(--mid);
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

.work-engagements {
  background-color: var(--char);
}

.brief-card-wrapper {
  background-color: var(--ink);
  padding: 0 0 72px;
}

.brief-card {
  background-color: var(--char2);
  border: 1px solid var(--line);
}

.brief-card-body {
  padding: 2.5rem;
}

.brief-headline {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--fg);
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

.brief-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.brief-highlight {
  padding: 1rem 0;
}

.brief-value {
  color: var(--fg);
  font-size: 1rem;
  margin-top: 0.5rem;
}

.brief-stats-bar {
  display: flex;
  border-top: 1px solid var(--line);
}

.brief-stat {
  padding: 1.5rem 2.5rem;
  border-right: 1px solid var(--line);
  flex: 1;
}
.brief-stat:last-child {
  border-right: none;
}

.brief-stat strong {
  color: var(--amber);
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 2rem;
  display: block;
}

.brief-stat span {
  color: var(--mut);
  font-size:.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.brief-print-btn {
  background-color: transparent;
  border: 1px solid var(--line);
  color: var(--fg);
  padding: 0.4rem 0.8rem;
  font-size:.875rem;
  cursor: pointer;
}
.brief-print-btn:hover {
  border-color: var(--amber);
  color: var(--amber);
}

/* Service Page Tabs & Content — same markup/sizing as the sector overview
   pages' own .sector-subnav/.sntab bar, so the tab strip doesn't change
   size when navigating from the overview page into a sub-page. */
.sector-subnav {
  background: var(--char);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 72px;
  z-index: 90;
}
.sector-subnav::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 32px;
  background: linear-gradient(to right, transparent, var(--char));
  pointer-events: none;
}

.subnav-inner {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav-inner::-webkit-scrollbar {
  display: none;
}

.sntab {
  font-family: var(--font-heading);
  font-size:.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0 1.5rem;
  height: 52px;
  display: inline-flex;
  align-items: center;
  color: var(--mut);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: 0.18s;
}
.sntab:hover,
.sntab.active {
  color: var(--fg);
  border-bottom-color: var(--amber);
}
@media (max-width: 640px) {
  .sector-subnav { position: static; }
  .sector-subnav::after { display: none; }
  .subnav-inner { flex-wrap: wrap; overflow-x: visible; }
  .sntab { flex: 0 1 auto; height: auto; padding: 0.75rem 1rem; min-height: 44px; display: flex; align-items: center; }
}

.sp-what-is {
  background-color: var(--ink);
  padding: 80px 0;
}

.sp-what-is-inner {
  max-width: 800px;
  margin: 0 auto;
}

.sp-what-is h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--fg);
  margin-bottom: 1.5rem;
}

.sp-what-is-body {
  color: var(--mid);
}

.sp-relevance {
  background-color: var(--char);
  padding: 80px 0;
}

.sp-relevance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background-color: var(--line);
  border: 1px solid var(--line);
}

@media (max-width: 860px) {
  .sp-relevance-grid { grid-template-columns: 1fr; }
}

.sp-relevance-card {
  background-color: var(--char);
  padding: 2rem;
}

.sp-wwd {
  background-color: var(--ink);
  padding: 80px 0;
}

.sp-wwd-header h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--fg);
  margin-bottom: 2rem;
}

.sp-carousel, .work-carousel {
  overflow: hidden;
  border: 1px solid var(--line);
  background-color: var(--char2);
}

.sp-carousel-track, .work-carousel-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.sp-carousel-slide, .work-carousel-slide {
  flex-shrink: 0;
  width: 100%;
  padding: 2.5rem;
}

.sp-slide-heading {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.sp-slide-num {
  color: var(--amber);
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 3rem;
  opacity: 0.3;
}

.sp-carousel-slide h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--fg);
}

.sp-panel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

@media (max-width: 860px) {
  .sp-panel-grid { grid-template-columns: 1fr; }
}

.sp-panel-col p {
  color: var(--mid);
  font-size: 0.9rem;
}

.sp-carousel-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2.5rem;
  border-top: 1px solid var(--line);
}

.sp-carousel-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--amber);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sp-carousel-btn:hover {
  border-color: var(--amber);
}

.sp-carousel-dots {
  display: flex;
  gap: 0.5rem;
}
.sp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--line);
  cursor: pointer;
}
.sp-dot.active {
  background-color: var(--amber);
}

.sp-moving-forward {
  background-color: var(--char2);
  border-top: 1px solid var(--line);
  padding: 80px 0;
}

.sp-moving-forward-inner h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--fg);
  margin-bottom: 1.5rem;
}
.sp-moving-forward-body {
  color: var(--mid);
}

/* AI Landing Page */
.ai-hero {
  background-color: var(--char);
  padding: 96px 0 72px;
  border-bottom: 1px solid var(--line);
}
.ai-hero-eyebrow {
  color: var(--amber);
  font-size:.875rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.ai-hero-sub {
  color: var(--mid);
  max-width: 56ch;
  margin: 1.5rem 0;
  font-size: 1.1rem;
}
.ai-hero-ctas {
  display: flex;
  gap: 1rem;
}
.ai-content {
  padding: 80px 0;
  background-color: var(--ink);
}
.ai-content-inner {
  max-width: 860px;
  margin: 0 auto;
}

.ai-callout {
  background-color: var(--char);
  border-top: 1px solid var(--line);
  padding: 4rem 0;
}
.ai-callout-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

/* AI Stats */
.ai-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin: 2rem 0;
}
.ai-stat-n {
  color: var(--amber);
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.ai-stat-l {
  color: var(--mut);
  font-size:.875rem;
  text-transform: uppercase;
}

/* Research Teaser / AI Teaser Cards */
.ai-teaser {
  background-color: var(--char);
  border: 1px solid var(--line);
  padding: 3rem 2.5rem;
  margin-top: 4rem;
}
.ai-teaser-heading {
  font-family: var(--dh);
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--fg);
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.ai-teaser-heading::before {
  content: '';
  display: block;
  width: 3px;
  height: 1.2em;
  background-color: var(--amber);
}
.ai-teaser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.ai-teaser-card {
  background-color: var(--char2);
  border: 1px solid var(--line);
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.ai-teaser-card--link:hover {
  border-color: var(--amber);
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
}
.ai-teaser-badge {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--dh);
  font-size:.875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mut);
  background-color: var(--char);
  border: 1px solid var(--line);
  padding: 0.2rem 0.6rem;
  margin-bottom: 1rem;
}
.ai-teaser-badge--new {
  background-color: var(--amber);
  color: var(--ink);
  border-color: var(--amber);
}
.ai-teaser-title {
  font-family: var(--dh);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--fg);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}
.ai-teaser-desc {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 1.5rem;
}
.ai-teaser-readmore {
  font-family: var(--dh);
  font-size:.875rem;
  font-weight: 700;
  color: var(--amber);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Insights Page */
.insights-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 2rem 0;
}

.filter-pill {
  background-color: var(--char2);
  border: 1px solid var(--line);
  color: var(--mut);
  padding: 0.5rem 1rem;
  font-size:.875rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.filter-pill.active, .filter-pill:hover {
  background-color: var(--amber);
  color: var(--ink);
  border-color: var(--amber);
}
.filter-pill:hover {
  transform: translateY(-2px);
}

.insights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.content-card {
  background-color: var(--char);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.content-card:hover {
  border-color: var(--amber);
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
}

.card-img img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
}

.card-body {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  flex: 1;
}

.card-tag {
  color: var(--amber);
  font-size:.875rem;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.card-body h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.card-body p {
  color: var(--mid);
  font-size: 0.88rem;
  margin-bottom: 1rem;
}

.card-link {
  color: var(--amber);
  font-weight: 700;
  font-size: 0.9rem;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Contact Page */
.contact-page {
  padding: 80px 0;
  background-color: var(--ink);
}

.contact-page-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

.contact-info-card {
  background-color: var(--char2);
  border: 1px solid var(--line);
  padding: 2.5rem;
}

.contact-info-card h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--fg);
  margin-bottom: 1.5rem;
}

.contact-detail-row {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 0.75rem 0;
}
.contact-detail-row:last-of-type {
  border-bottom: none;
}

.contact-detail-value {
  color: var(--fg);
  font-weight: 500;
}

.contact-social-row {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.contact-social-link {
  color: var(--mut);
  text-decoration: underline;
}
.contact-social-link:hover {
  color: var(--amber);
}

.contact-action-card {
  background-color: var(--char);
  border: 1px solid var(--line);
  border-top: 3px solid var(--amber);
  padding: 2.5rem;
}

.contact-action-email {
  color: var(--amber);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.5rem;
  display: block;
  margin-top: 1rem;
}

.contact-header-sub {
  color: var(--mid);
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

/* Services Overview */
.svc-hero {
  background-color: var(--char);
  padding: 96px 0;
  border-bottom: 1px solid var(--line);
}
.svc-hero-h1 {
  font-family: var(--font-heading);
  font-weight: 900;
  color: var(--fg);
}
.svc-hero-sub {
  color: var(--mid);
  max-width: 60ch;
  margin-top: 1.5rem;
  font-size: 1.1rem;
}
.svc-grid-section {
  padding: 80px 0;
  background-color: var(--ink);
}

/* Privacy Page */
.privacy-section {
  background-color: var(--char);
  border-left: 3px solid var(--amber);
  padding: 2rem;
  margin: 2rem 0;
}

/* Privacy page — distinct hero accent */
.art-hero--legal {
  background: linear-gradient(135deg, var(--ink) 0%, var(--char) 100%);
  border-bottom: 1px solid var(--line);
}
.art-hero--legal .kick {
  background: rgba(245,166,35,0.12);
  color: var(--amber);
  border: 1px solid rgba(245,166,35,0.25);
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size:.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 1rem;
}
.privacy-updated {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size:.875rem;
  color: var(--mut);
  background: var(--char2);
  border: 1px solid var(--line);
  border-radius: var(--br-sm);
  padding: 0.35rem 0.8rem;
  margin-top: 1rem;
}
.privacy-updated::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  flex-shrink: 0;
}

/* Model Comparison Table — scrollable on mobile */
.mc-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 2rem 0;
  border: 1px solid var(--line);
  border-radius: var(--br-sm);
}
.model-comparison, .mc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 520px;
}
.model-comparison th, .model-comparison td {
  border: 1px solid var(--line);
  padding: 1rem;
  text-align: left;
}
.model-comparison th {
  background-color: var(--char2);
  color: var(--fg);
  font-weight: 700;
}
.model-comparison td {
  background-color: var(--char);
  color: var(--mid);
}
.mc-type-open {
  color: #4ade80;
  font-weight: 600;
}
.mc-type-closed {
  color: var(--amber);
  font-weight: 600;
}

/* Article math (KaTeX) */
.math-block {
  display: block;
  overflow-x: auto;
  overflow-y: hidden;
  text-align: center;
  margin: 1.8rem 0;
  padding: 0.4rem 0;
}
.math-inline {
  display: inline-block;
}

/* Diagrams */
.ai-diagram {
  background-color: var(--char2);
  border: 1px solid var(--line);
  padding: 2.5rem;
  margin: 3rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-radius: 8px;
}
.diag-box {
  background-color: var(--char);
  border: 1px solid var(--line);
  padding: 1rem 1.25rem;
  text-align: center;
  color: var(--mid);
  border-radius: 6px;
  line-height: 1.4;
  font-size: 0.9rem;
}
.diag-box.hi {
  background-color: var(--amber);
  color: var(--ink);
  font-weight: 700;
  border-color: var(--amber);
}
.diag-box small {
  display: block;
  font-size: 0.75rem;
  opacity: 0.8;
  margin-top: 0.25rem;
  font-weight: normal;
}
.diag-label {
  color: var(--amber);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.diag-note {
  color: var(--mut);
  font-size: 0.85rem;
  border-top: 1px dashed var(--line);
  padding-top: 1rem;
  margin-top: 0.5rem;
}
.diag-pip-arr, .diag-v-arr {
  color: var(--blue);
  text-align: center;
  font-size: 1.5rem;
  line-height: 1;
}
.diag-phases {
  display: flex;
  gap: 2rem;
  align-items: stretch;
}
.diag-phase-col {
  flex: 1;
  background-color: var(--char);
  border: 1px solid var(--line);
  padding: 1.5rem;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}
.diag-phase-head {
  color: var(--fg);
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  display: flex;
  flex-direction: column;
}
.diag-phase-sub {
  color: var(--mut);
  font-size: 0.8rem;
  font-weight: normal;
  margin-bottom: 1.5rem;
}
.diag-phase-flow {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}
.diag-phases-div {
  width: 1px;
  background-color: var(--line);
}
.diag-limits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.diag-limit-card {
  background-color: var(--char);
  border: 1px solid var(--line);
  padding: 1.5rem;
  border-radius: 6px;
}
.diag-limit-label {
  color: var(--amber);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.diag-limit-card p {
  margin: 0 !important;
  font-size: 0.9rem !important;
}
.diag-bars-compact {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
}
.diag-bc-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.diag-bc-lbl {
  width: 60px;
  color: var(--mid);
  font-size: 0.85rem;
  text-align: right;
  flex-shrink: 0;
}
.diag-bc-bar {
  flex: 1;
  height: 12px;
  background-color: var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.diag-bc-fill {
  height: 100%;
  background-color: var(--blue);
}
.diag-bc-val {
  width: 45px;
  color: var(--fg);
  font-size: 0.85rem;
  text-align: left;
  flex-shrink: 0;
}
.diag-tok-pipeline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.diag-tok-stage {
  background-color: var(--char);
  border: 1px solid var(--line);
  padding: 1rem;
  text-align: center;
  border-radius: 6px;
  flex: 1;
  position: relative;
}
.diag-tok-num {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--amber);
  color: var(--ink);
  font-weight: 900;
  font-size: 0.7rem;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.diag-tok-arr {
  color: var(--blue);
  font-size: 1.5rem;
}
.diag-mat-wrap {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin: 1.5rem 0;
}
.diag-mat-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.diag-mat-xlbl {
  color: var(--mut);
  font-size: 0.85rem;
  font-weight: 600;
}
.diag-mat-ylbl {
  color: var(--mut);
  font-size: 0.85rem;
  font-weight: 600;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
}
.diag-mat-rowlbl {
  color: var(--mut);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0.75rem;
}
.diag-matrix {
  display: grid;
  grid-template-columns: max-content repeat(4, 55px);
  gap: 4px;
  background-color: var(--line);
  border: 1px solid var(--line);
  padding: 4px;
  border-radius: 4px;
}
.diag-mat-cell {
  background-color: var(--char);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  height: 45px;
  color: var(--fg);
}
.diag-mat-hi {
  background-color: var(--blue);
  color: var(--ink);
  font-weight: 700;
}
.diag-mat-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mut);
}
.diag-mat-hi-lbl {
  color: var(--blue);
  font-weight: 700;
}
.diag-qkv {
  display: flex;
  gap: 1.5rem;
}
.diag-qkv-col {
  flex: 1;
  border: 1px solid var(--line);
  padding: 1.5rem;
  background-color: var(--char);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}
.diag-qkv-head {
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 1rem;
  text-align: center;
  font-size: 1.1rem;
}
.diag-qkv-q { color: var(--blue); }
.diag-qkv-k { color: #22c55e; }
.diag-qkv-v { color: var(--amber); }

.diag-score {
  text-align: center;
  color: var(--amber);
  font-weight: 700;
  float: right;
}
.diag-mha {
  background-color: var(--char);
  border: 1px solid var(--line);
  padding: 1.5rem;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.diag-mha-heads {
  display: flex;
  gap: 1rem;
}
.diag-mha-head {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.diag-mha-connector {
  text-align: center;
  color: var(--blue);
}
.diag-mha-badge {
  background-color: var(--char2);
  border: 1px solid var(--line);
  color: var(--mut);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
}
.diag-mha-more {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mut);
  font-style: italic;
  font-size: 0.85rem;
}
.diag-parallel {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--char);
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.diag-parallel-lbl {
  color: var(--amber);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
}
.diag-parallel-nodes {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}
.diag-pipeline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--char);
  padding: 1.5rem;
  border-radius: 6px;
  border: 1px solid var(--line);
}

/* ── Scroll-triggered reveal (activates the [data-anim] markup already
   emitted by site.js — see interactions.js's IntersectionObserver) ────────── */
[data-anim] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
[data-anim].is-visible {
  opacity: 1;
  transform: none;
}
[data-anim][data-anim-delay="1"] { transition-delay: 0.08s; }
[data-anim][data-anim-delay="2"] { transition-delay: 0.16s; }
[data-anim][data-anim-delay="3"] { transition-delay: 0.24s; }

/* ── Keyboard focus parity for cards/buttons that only had :hover feedback ── */
a:focus-visible,
.btn:focus-visible,
.scard:focus-visible,
.svc-card:focus-visible,
.bento-card:focus-visible,
.service-card:focus-visible,
.subsvc-card:focus-visible,
.ai-teaser-card--link:focus-visible,
.content-card:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}
.scard:focus-visible .scard-bg {
  opacity: 0.62;
  transform: scale(1.05);
}

/* ── Generic stat row (site.js renderSection's 'stats' case) ──────────────── */
.stat-row {
  display: flex;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.stat-cell {
  padding: 1.5rem 2.5rem;
  border-right: 1px solid var(--line);
  flex: 1;
}
.stat-cell:last-child {
  border-right: none;
}
.stat-cell b {
  color: var(--amber);
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 2rem;
  display: block;
}
.stat-cell span {
  color: var(--mut);
  font-size:.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (prefers-reduced-motion: reduce) {
  #swup,
  [data-anim],
  .scard-bg, .svc-card, .bento-card, .service-card, .subsvc-card,
  .ai-teaser-card--link, .content-card, .card-img img, .btn,
  .btn-primary, .btn-a, .header-cta, .btn-ghost, .btn-g, .btn-ghost-light {
    transition-duration: 0.01ms !important;
  }
  [data-anim] {
    opacity: 1;
    transform: none;
  }
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media print {
  body {
    background: #fff;
    color: #000;
  }
  .site-header, .site-footer, .article-toc, .sector-subnav, .cookie-banner, .progress-bar-read {
    display: none;
  }
  .brief-card-wrapper, .brief-card, .ep-about-strip, .work-chapter {
    background: #fff !important;
    border: none;
  }
  h1, h2, h3, h4, h5, h6, p, .brief-headline, .brief-value, .brief-stat strong, .brief-stat span {
    color: #000 !important;
  }
}

/* Floating UI Fixes */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  background-color: var(--char);
  border: 1px solid var(--line);
  color: var(--amber);
  border-radius: var(--br-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}
.back-to-top:hover {
  background-color: var(--char2);
  border-color: var(--amber);
}
@media (max-width: 640px) {
  .back-to-top {
    bottom: 5rem;
    right: 1.5rem;
  }
}


/* UNIVERSAL BUTTON & CONTROL RESETS */
button {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

.footer-cookie-btn {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: inherit !important;
  font-size:.875rem !important;
  color: var(--mut, #9aa4b2) !important;
  cursor: pointer !important;
  transition: color 0.15s ease !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  display: inline-block !important;
  line-height: inherit !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.footer-cookie-btn:hover {
  color: var(--amber, #F5B301) !important;
}

.footer-bottom-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.search-btn, #search-toggle {
  background: transparent !important;
  border: none !important;
  padding: 0.4rem !important;
  margin: 0 !important;
  color: var(--fg, #f4f5f7) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 4px !important;
  transition: color 0.15s ease !important;
}
.search-btn:hover, #search-toggle:hover {
  color: var(--amber, #F5B301) !important;
}

/* CHROME:CSS:START */
/* Self-hosted faces. The Google Fonts CDN is a third-party request on
   every page load and, for an EU visitor, a transfer of their IP to
   Google before any consent has been given. Same files, our origin. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/archivo-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/archivo-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/archivo-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/archivo-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/archivo-latin-800-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;src:url('fonts/archivo-latin-900-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* CHROME:CSS — canonical chrome. Generated by build/build_chrome.py from
   build/chrome.css. Do not edit inside a page; edit the source and re-run. */
:root{--header-h:74px}

/* Scroll behaviour: smooth only where the visitor has not asked otherwise,
   and every in-page anchor clears the sticky header (WCAG 2.4.11). */
html{scroll-behavior:auto;scroll-padding-top:calc(var(--header-h) + 12px)}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
html,body{overflow-x:clip}

/* Visually hidden, still focusable/announced. */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Skip link — first focusable control on every page. */
.skip-link{position:absolute;left:12px;top:-100px;z-index:200;background:var(--amber);color:var(--ink);font-family:var(--dh,'Archivo',sans-serif);font-weight:700;font-size:.9rem;padding:.75rem 1.25rem;transition:top .15s ease}
.skip-link:focus{top:12px;color:var(--ink)}
main:focus{outline:none}

/* Focus ring, everywhere, on one recipe. */
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
::selection{background:var(--amber);color:var(--ink)}

/* ── HEADER — V4, "spanned" ─────────────────────────────────────────────
   The mark, a hairline across the gap so it reads as drawn rather than left
   over, five items at 17px, and the breadcrumb as the header's second line.
   No CTA button and no colour: colour belongs to the work. */
header.site-header,body>header{position:sticky;top:0;z-index:200;background:rgba(8,11,15,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-header .nav{display:flex;align-items:center;gap:1.5rem;padding-block:18px}
.site-header .logo{flex-shrink:0;display:flex;align-items:center}
.site-header .logo img{height:44px;width:auto;display:block}
.nav-span{flex:1;height:1px;background:var(--line);min-width:24px}
.site-header .site-nav{display:flex;align-items:center}
.site-header .nav-links{display:flex;align-items:center;gap:clamp(1.4rem,2.6vw,2.4rem);
  list-style:none;margin:0;padding:0}
.site-header .nav-links a{font-family:var(--dh,'Archivo',sans-serif);font-weight:700;
  font-size:1.0625rem;letter-spacing:-.015em;color:var(--mut);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;position:relative;white-space:nowrap}
.site-header .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:6px;
  height:2px;background:var(--fg)}
@media (prefers-reduced-motion: no-preference){
  .site-header .nav-links a::after{transition:right .24s cubic-bezier(.16,1,.3,1)}}
.site-header .nav-links a:hover{color:var(--fg)}
.site-header .nav-links a:hover::after{right:0}
.site-header .nav-links a[aria-current]{color:var(--fg)}
.site-header .nav-links a[aria-current]::after{right:0;background:var(--mut)}
.nav-foot{display:none}
.has-sheet{display:flex;align-items:center;gap:.3rem}
.sheet-toggle{background:transparent;border:0;color:var(--mut);cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;width:28px;height:44px;padding:0}
.sheet-toggle:hover{color:var(--fg)}
.sheet-toggle svg{transition:transform .18s ease}
.sheet-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.search-btn{background:transparent;border:0;color:var(--mut);cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0}
.search-btn:hover{color:var(--amber)}
.nav-toggle{display:none;background:transparent;border:0;padding:0;cursor:pointer;
  color:var(--mut);font-family:var(--dh,'Archivo',sans-serif);font-weight:700;font-size:1.0625rem;
  letter-spacing:-.015em;align-items:center;gap:.5rem;height:44px}
.nav-toggle:hover,.nav-toggle[aria-expanded="true"]{color:var(--fg)}
/* the bars are two rules, not an icon set: same hairline language as the header */
.nav-toggle-bars{display:inline-block;width:19px;height:11px;position:relative}
.nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:0;right:0;
  height:2px;background:currentColor}
.nav-toggle-bars::before{top:0}
.nav-toggle-bars::after{bottom:0}
@media (prefers-reduced-motion: no-preference){
  .nav-toggle-bars::before,.nav-toggle-bars::after{transition:transform .2s cubic-bezier(.16,1,.3,1)}}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(4.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-4.5px) rotate(-45deg)}


/* Each page still carries a pre-chrome rule that paints an amber underline on
   a nav link with a background-image gradient, which stacked under the white
   one the chrome draws — two lines on every hover. The chrome CSS is stamped
   last, so turning the gradient off here beats it wherever it is declared,
   without editing fourteen pages that will be regenerated anyway. */
.site-header .nav-links a,
.site-header .nav-links a:hover,
.site-header .nav-links a.active{background-image:none}

/* ── THE SHEET — the menu opens into paper ──────────────────────────── */
.sheet{position:absolute;left:0;right:0;top:100%;background:#EDE9E1;color:#3F4750;
  border-bottom:1px solid #CFC8BC;z-index:70}
/* The sheet unrolls from under the header rather than cutting in. `hidden` is
   kept — it is what keeps the panel out of the accessibility tree and the tab
   order — and the display:none that rides along with it is overridden so the
   thing can be animated at all; visibility does the real hiding. Clip rather
   than fade: a paper panel fading up over a dark page reads as a flash, where
   a top-anchored clip reads as a drawer. */
.sheet{clip-path:inset(0 0 0 0);visibility:visible;pointer-events:auto;
  transition:clip-path .32s cubic-bezier(.16,1,.3,1),visibility 0s}
.sheet[hidden]{display:block;clip-path:inset(0 0 100% 0);visibility:hidden;pointer-events:none;
  transition:clip-path .24s cubic-bezier(.16,1,.3,1),visibility 0s linear .24s}
@media (prefers-reduced-motion: reduce){.sheet,.sheet[hidden]{transition:none}}
.sheet .wrap{padding-block:clamp(2rem,4vw,3rem)}
.sheet-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,17rem);
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media(max-width:960px){.sheet-grid{grid-template-columns:minmax(0,1fr)}}
.sheet-h{font-family:var(--dh,'Archivo',sans-serif);font-weight:900;font-size:1.5rem;
  letter-spacing:-.03em;color:#14161A;margin:0 0 32px}
.sheet .index{list-style:none;margin:0;padding:0;border-top:2px solid #14161A}
.sheet .index li{border-bottom:1px solid #CFC8BC}
.sheet .index a{display:grid;grid-template-columns:76px minmax(0,15rem) minmax(0,1fr);
  gap:clamp(1rem,2.4vw,2rem);align-items:center;padding-block:14px;color:#3F4750;text-decoration:none}
@media(max-width:760px){.sheet .index a{grid-template-columns:56px minmax(0,1fr)}
  .sheet .index .line{display:none}}
.sheet .index figure{aspect-ratio:4/3;overflow:hidden;background:#D8D2C6;position:relative;margin:0}
.sheet .index img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(1.06)}
.sheet .index figure::after{content:"";position:absolute;inset:0;
  background:linear-gradient(212deg,#F5B301,#8A6A2A 30%,#2A3340 100%);mix-blend-mode:color;opacity:.32}
.sheet .index b{font-family:var(--dh,'Archivo',sans-serif);font-weight:700;font-size:1.0625rem;
  color:#14161A;letter-spacing:-.015em}
.sheet .index .line{font-size:.875rem}
.sheet .index a:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.sheet-aside{border-top:2px solid #14161A;padding-top:14px}
.sheet-aside p{font-size:.875rem;max-width:26ch;margin:0}
.sheet-aside .who{font-family:var(--dh,'Archivo',sans-serif);font-weight:700;color:#14161A;
  font-size:1.0625rem;display:block;margin-bottom:6px}
.sheet-aside .mail{display:inline-flex;min-height:44px;align-items:center;margin-top:10px;
  font-family:var(--dh,'Archivo',sans-serif);font-weight:700;font-size:.875rem;color:#14161A;
  border-bottom:2px solid #14161A;padding-bottom:1px;text-decoration:none}

/* ── MOBILE ─────────────────────────────────────────────────────────────
   The drawer was an absolutely-positioned block that ended halfway down the
   screen with the page showing underneath it, so a half-covered headline read
   as a broken layout. It is a full sheet now: fixed under the header, its own
   scroll, the page behind it locked. And the breadcrumb stops being a wrapped
   three-line trail and becomes the one thing a phone needs, which is the way
   back up. */
@media(max-width:900px){
  :root{--header-h:60px}
  .site-header .nav{gap:.5rem;padding-block:0;height:60px}
  .site-header .logo img{height:28px}
  .nav-span{display:none}
  .search-btn{width:40px;height:40px;order:3;margin-left:0}
  .nav-toggle{display:inline-flex;order:2;margin-left:auto}

  /* The header carries backdrop-filter, which makes it the containing block
     for fixed descendants — a fixed drawer inside it is 41px tall, not full
     height. Absolute off the header, with the height stated. */
  .site-header .site-nav{display:none;position:absolute;top:100%;left:0;right:0;
    height:calc(100dvh - var(--header-h));background:var(--ink);
    border-top:1px solid var(--line);overflow-y:auto;-webkit-overflow-scrolling:touch;
    flex-direction:column;align-items:stretch;z-index:80;
    padding-bottom:env(safe-area-inset-bottom,0)}
  .site-header.nav-open .site-nav{display:flex}
  body.nav-locked{overflow:hidden}
  .site-header .nav-links{flex-direction:column;align-items:stretch;gap:0;padding:0}
  .site-header .nav-links>li{border-bottom:1px solid var(--line)}
  .site-header .nav-links a{display:flex;align-items:center;min-height:56px;
    padding:0 clamp(1.25rem,5vw,2rem);font-size:1.25rem}
  .site-header .nav-links a::after{display:none}
  .has-sheet{justify-content:space-between;align-items:stretch}
  .has-sheet>a{flex:1}
  .sheet-toggle{width:64px;height:auto;border-left:1px solid var(--line)}

  /* the practices, opened inside the drawer rather than as an overlay */
  .sheet{position:static;border-bottom:0;border-top:1px solid var(--line)}
  .sheet .wrap{padding-block:20px}
  .sheet-h{font-size:1.125rem;margin-bottom:16px}
  .sheet .index a{grid-template-columns:52px minmax(0,1fr);gap:14px;padding-block:12px}
  .sheet-aside{margin-top:28px}

  /* the drawer was two thirds empty; the help slot lives at the foot of it */
  .nav-foot{display:flex;flex-direction:column;gap:6px;margin-top:auto;
    padding:24px clamp(1.25rem,5vw,2rem) 32px;border-top:1px solid var(--line)}
  .nav-foot a{color:var(--amber);font-size:1.0625rem;display:inline-flex;align-items:center;
    min-height:44px;text-decoration:none}
  .nav-foot span{color:var(--mut);font-size:.875rem}

}
@media(max-width:420px){
  .nav-toggle{min-width:54px}
  .site-header .nav-links a{font-size:1.125rem;min-height:52px}
}

/* ── BREADCRUMB — the header's second line ──────────────────────────── */
  padding-block:6px}

/* ── FOOTER ─────────────────────────────────────────────────────────── */
.site-footer{background:var(--ink);border-top:1px solid var(--line);padding:64px 0 36px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:4rem;margin-bottom:3rem;align-items:start}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;gap:2.5rem}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr;gap:2.25rem}}
.footer-logo{height:36px;width:auto;display:block;margin-bottom:1rem}
.footer-tagline{color:var(--mid);font-size:.875rem;line-height:1.65;margin-top:.6rem;max-width:32ch}
.footer-social{display:flex;gap:.6rem;margin-top:1.4rem;list-style:none;padding:0}
.footer-social-link{color:var(--mid);display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);background:var(--char);font-size:0;text-decoration:none;transition:color .15s,border-color .15s}
.footer-social-link svg{font-size:1rem}
.footer-social-link:hover{color:var(--amber);border-color:var(--amber)}
.footer-col-heading{font-family:var(--dh,'Archivo',sans-serif);font-size:.875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin:0 0 1.2rem;line-height:1.3}
.footer-nav-list{list-style:none;display:flex;flex-direction:column;gap:.65rem;padding:0;margin:0}
.footer-nav-list a,.footer-address,.footer-address a{color:var(--mid);font-size:.875rem;text-decoration:none;font-style:normal;line-height:1.7}
.footer-nav-list a:hover,.footer-address a:hover{color:var(--fg)}
.footer-address a{color:var(--amber)}
.footer-cta{margin-top:1.2rem;font-size:.875rem;padding:.7rem 1.25rem}
.footer-bottom{border-top:1px solid var(--line);padding-top:1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-bottom p{color:var(--mid);font-size:.875rem;margin:0;max-width:70ch}
.footer-bottom-links{display:flex;align-items:center;gap:1.25rem}
.footer-bottom a,.footer-cookie-btn{color:var(--mid);font-size:.875rem;text-decoration:none;background:transparent;border:0;padding:0;cursor:pointer;font-family:inherit}
.footer-bottom a:hover,.footer-cookie-btn:hover{color:var(--amber)}

/* ── BACK TO TOP ────────────────────────────────────────────────────── */
/* Sits in the footer flow rather than fixed over it, so it can never cover
   a focused link (WCAG 2.4.11). */
.back-to-top{position:static;display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:.5rem .9rem;background:transparent;border:1px solid var(--line);color:var(--mid);font-family:var(--dh,'Archivo',sans-serif);font-size:.875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.back-to-top:hover{border-color:var(--amber);color:var(--amber)}

/* A block that needs naming gets a heading, never a label above one
   (typography.md §2 — eyebrows are banned). */
.block-head{font-family:var(--dh,'Archivo',sans-serif);font-size:1.05rem;font-weight:800;letter-spacing:-.01em;line-height:1.25;color:var(--fg);margin:0 0 .9rem}

/* The old caret was generated content on the parent link; the submenu now
   has its own button, so the pseudo-element must go or it doubles up. */
.site-header .has-drop>a::after{content:none!important}

/* Display type must be able to break, or one long word overflows at 320. */
h1,h2,.hero h1,.evidence-figures b{overflow-wrap:anywhere}
.hero h1{font-size:clamp(2.05rem,7.4vw,6rem)}
@media(max-width:520px){.hero h1{max-width:none;line-height:1.06}}

/* Reveal-on-scroll must never be the thing that decides whether content
   exists. Elements are visible by default; the hidden start state is only
   applied once JS has actually taken charge, and a failsafe releases it. */
[data-anim]{opacity:1;transform:none}
html.js-reveal [data-anim]{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
html.js-reveal [data-anim].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){html.js-reveal [data-anim]{opacity:1;transform:none;transition:none}}

/* The chrome carries its own button, so it looks the same on a page whose
   own .btn means something else (the Labs vault, for one). */
.site-header .nav-cta,.site-footer .footer-cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.7rem 1.25rem;background:var(--amber);color:var(--ink);font-family:var(--dh,'Archivo',sans-serif);font-weight:700;font-size:.875rem;border:1px solid var(--amber);text-decoration:none;white-space:nowrap}
.site-header .nav-cta:hover,.site-footer .footer-cta:hover{background:var(--amber-d);border-color:var(--amber-d);color:var(--ink)}

/* One line, one job on a phone: the way back up. These sit after the base
   breadcrumb rules on purpose — the earlier version was overridden by them. */
@media(max-width:900px){
  /* FIXME(13 Sept 2026): this block lost its selector in build/chrome.css.
     As shipped it ate the NEXT rule in this sheet via CSS error recovery,
     which is exactly how the service rail below silently failed to apply.
     Neutralised here; the real fix belongs upstream. */
}
/* CHROME:CSS:END */

/* ── SERVICE RAIL — replaces .sector-subnav, 13 Sept 2026 ──────────────
   Shared by the JS-rendered sub-service pages. The sector pages carry the same
   rules inline. The old .sector-subnav/.sntab rules above are left in place
   deliberately: nothing emits that markup any more, and deleting them is a
   separate tidy-up that should not ride along with a layout change. */
.srail-wrap{display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:start;padding-block:clamp(36px,5vw,64px)}
@media(max-width:900px){.srail-wrap{grid-template-columns:1fr}}
.srail{border:1px solid var(--line);position:sticky;top:calc(var(--header-h,74px) + 14px);
  background:var(--char)}
@media(max-width:900px){.srail{position:static;margin-bottom:1.5rem}}
.srail a{display:block;padding:1.05rem 1.25rem;border-bottom:1px solid var(--line);
  text-decoration:none;min-height:44px}
.srail a:last-child{border-bottom:0}
.srail a:hover{background:var(--char2)}
.srail a.active{background:var(--char2);box-shadow:inset 3px 0 0 var(--amber)}
.srail b{font-family:var(--dh);font-weight:800;font-size:1.0625rem;display:block;
  letter-spacing:-.02em;color:var(--fg)}
.srail span{display:block;margin-top:.25rem;font-size:.875rem;color:var(--mut)}
.srail a.active b,.srail a:hover b{color:var(--amber)}
/* the main column is narrower, so the page's own two-column blocks collapse */
.srail-main .what-is-grid,.srail-main .sp-what-is-inner{grid-template-columns:1fr}
.srail-main .wwd-grid{grid-template-columns:1fr}
@media(min-width:1200px){.srail-main .wwd-grid{grid-template-columns:repeat(2,1fr)}}
.srail-main section{padding-block:0}
.srail-main section + section{margin-top:clamp(32px,4vw,56px)}
.srail-main .container{padding-inline:0;max-width:none}