/* Vantalect editorial system, shared by the complete site. */
.site-page,
.offerings-page {
  --site-paper: #f2f5f8;
  --site-panel: #ffffff;
  --site-ink: #0b1f3b;
  --site-muted: #4b5f75;
  --site-rule: #d1dde8;
  --site-tint: #e7eef5;
  --site-link: #2f5d8c;
  /* Display type: tight enough to look editorial, loose enough that letters never touch and word spaces
     stay visible. Loosened on 2026-09-29 from per-rule values between -0.045em and -0.075em because words ran
     together and glyphs collided; revert by restoring those per-rule values. */
  --site-track-display: -0.035em;
  --site-track-figure: -0.04em;
  --site-word-display: 0.06em;
  /* Edge cue for horizontally scrollable tables and diagrams (see the .article rules below). */
  --site-scroll-shadow: rgba(11, 31, 59, 0.26);
}
.dark .site-page,
.dark .offerings-page {
  --site-paper: #0b1f3b;
  --site-panel: #153454;
  --site-ink: #e6eef7;
  --site-muted: #b3c3d4;
  --site-rule: #405a76;
  --site-tint: #204265;
  --site-link: #a7c9e9;
  --site-scroll-shadow: rgba(2, 8, 18, 0.7);
}
.dark .site-page {
  --link: 211 55% 77%;
  --muted-foreground: 213 35% 76%;
}
.site-page main { overflow: clip; }
.site-page a, .offerings-page a { text-underline-offset: 3px; }

/* Navigation stays quiet above the dark photographic opening on every page. */
#main-nav > div:first-child { max-width: 1440px; }
#main-nav a[aria-current] { position: relative; }
#main-nav a[aria-current]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 1px;
  background: #dceafb;
}
#main-nav > div > div > a:first-child { letter-spacing: -0.03em; }
#main-nav > div > div > div:nth-child(2) { gap: clamp(0.85rem, 1.5vw, 1.7rem); }
#main-nav > div > div > div:nth-child(3) > a {
  border-radius: 0;
  background: #dceafb;
  color: #0b1f3b;
  box-shadow: none;
}
#main-nav > div > div > div:nth-child(3) > a:hover { background: #ffffff; }
#mobile-menu a[aria-current]::after { display: none; }

/* Buttons and links use the same straight-edged treatment as offerings. */
.site-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 54px;
  padding: 0.9rem 1.2rem 0.9rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 0;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.site-button span { font-size: 1.1rem; transition: transform 180ms ease; }
.site-button:hover span { transform: translate(2px, -2px); }
.site-button-primary { background: #dceafb; color: #0b1f3b; }
.site-button-primary:hover { background: #ffffff; }
.site-button-text {
  min-height: 48px;
  padding-inline: 0;
  border-bottom-color: #748daa;
  color: #e4edf7;
}
.site-button-text:hover { border-bottom-color: #ffffff; color: #ffffff; }
.site-button-solid { background: var(--site-ink); color: var(--site-panel); }
.site-button-solid:hover { background: var(--site-link); color: #ffffff; }
.site-button-outline { border-color: var(--site-rule); color: var(--site-ink); }
.site-button-outline:hover { border-color: var(--site-link); color: var(--site-link); }
.site-text-link {
  gap: 1rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--site-link);
  color: var(--site-link);
  font-weight: 800;
}
.site-text-link:hover { border-color: var(--site-ink); color: var(--site-ink); }

/* Shared split hero. The photograph remains a real high-priority image. */
.site-hero { padding-top: 5rem; background: #0b1f3b; color: #eef5fb; }
.site-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 57fr) minmax(0, 43fr);
  min-height: 620px;
}
.site-hero-home .site-hero-grid { min-height: 700px; }
.site-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(4.5rem, 7vw, 8rem) clamp(2rem, 5.5vw, 7rem) clamp(4rem, 6vw, 7rem) max(5vw, calc((100vw - 1280px) / 2));
}
.site-hero-eyebrow {
  margin: 0;
  color: #a7c9e9;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1.4;
}
.site-hero h1 {
  max-width: 12.5ch;
  margin: 1.45rem 0 0;
  color: #f5f9fd;
  font-size: clamp(3.75rem, 5.15vw, 6.2rem);
  font-weight: 800;
  letter-spacing: var(--site-track-display);
  word-spacing: var(--site-word-display);
  line-height: 1.06;
  overflow-wrap: normal;
  text-wrap: balance;
}
.site-leverage .site-hero h1,
.site-post .site-hero h1 { max-width: 22ch; font-size: clamp(2.75rem, 3.5vw, 4.55rem); }
.site-hero .text-gradient,
.dark .site-hero .text-gradient {
  background: linear-gradient(135deg, #f5f9fd, #a7c9e9);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.site-hero-lead {
  max-width: 57ch;
  margin: 1.65rem 0 0;
  color: #cad7e6;
  font-size: clamp(1.04rem, 1.2vw, 1.23rem);
  line-height: 1.68;
}
.site-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.75rem; margin-top: 2.4rem; }
.site-hero-note { max-width: 65ch; margin: 1.8rem 0 0; color: #b3c3d4; font-size: 0.88rem; line-height: 1.6; }
.site-hero-note a { color: #e6eef7; text-decoration: underline; }
.site-page .hero-photo .hero-media { position: relative; inset: auto; min-height: 0; overflow: hidden; }
.site-page .hero-photo .hero-media picture,
.site-page .hero-photo .hero-media img { display: block; width: 100%; height: 100%; }
.site-page .hero-photo .hero-media img { object-fit: cover; }
.site-page .hero-photo .hero-media::after {
  background: linear-gradient(90deg, rgba(11,31,59,0.16), transparent 50%), linear-gradient(0deg, rgba(11,31,59,0.65), transparent 40%);
}
.site-hero-photo-notation {
  position: absolute;
  z-index: 1;
  right: clamp(1.25rem, 3vw, 3rem);
  bottom: clamp(1.5rem, 4vw, 4rem);
  left: clamp(1.25rem, 3vw, 3rem);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(255,255,255,0.7);
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.4;
  text-shadow: 0 1px 5px rgba(0,0,0,0.5);
}
.site-hero-photo-notation::before,
.site-hero-photo-notation::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffffff;
}
.site-hero-photo-notation::before { left: 0; }
.site-hero-photo-notation::after { right: 0; }

/* Section rhythm and typography. */
.site-page main > section:not(#hero):not(#contact):not(#watch):not(.site-metrics) {
  padding-block: clamp(5.2rem, 8vw, 8rem);
  background: var(--site-panel);
}
.site-page main > section:not(#hero):not(#contact):not(#watch):not(.site-metrics):nth-of-type(even) { background: var(--site-paper); }
.site-page main > section:not(#hero):not(#contact):not(#watch):not(.site-metrics) > div:first-child {
  border-top: 1px solid var(--site-rule);
  padding-top: 2.2rem;
}
/* One left edge. The section rule is the container's border box while the text sits inside its 2rem
   gutter, so at 1,440 px the headings started 32 px inside the rule (x=112 against 80) and the photo
   heroes, /offerings/, and the rule itself all sat at 80. From 1,344 px up the container is centered with
   at least 2rem of margin, so the gutter is redundant: drop it and text, rule, and hero share one edge.
   Below 1,344 px the gutter is the page margin and stays. Revert by deleting this block. */
@media (min-width: 1344px) {
  .site-page main > section:not(#hero):not(#contact):not(#watch):not(.site-metrics) > div:first-child,
  .site-page main > section#contact > .max-w-7xl { padding-inline: 0; }
}
.site-page main section h2 {
  color: var(--site-ink);
  font-size: clamp(2.35rem, 4.15vw, 4.15rem);
  font-weight: 800;
  letter-spacing: var(--site-track-display);
  word-spacing: var(--site-word-display);
  line-height: 1.1;
  text-wrap: balance;
}
.site-page main section h3 { letter-spacing: -0.035em; line-height: 1.2; }
.site-section-head { max-width: 860px; }
.site-section-head h2 { max-width: 18ch; margin: 0; }
.site-section-head p {
  max-width: 63ch;
  margin-top: 1.35rem;
  color: var(--site-muted);
  font-size: 1.07rem;
  line-height: 1.7;
}
.site-kicker { margin-bottom: 0.9rem; color: var(--site-link); font-size: 0.86rem; font-weight: 800; }
.site-page main section > div > .narrative-reveal.text-center:has(h2) { text-align: left; }
.site-page main section > div > .narrative-reveal.text-center:has(h2) p.mx-auto { margin-left: 0; }
.site-page main .rounded-2xl,
.site-page main .rounded-3xl,
.site-page main .rounded-xl { border-radius: 0; }
.site-page main a.rounded-full,
.site-page main li.rounded-full { border-radius: 0; }
.site-page main .shadow-lg { box-shadow: none; }
.site-page main [class*="bg-[hsl(var(--card))]"] { background: var(--site-panel); }
.site-page main .narrative-stagger-item:hover { transform: none; }
.site-page main .narrative-stagger > a,
.site-page main .narrative-stagger > article,
.site-page main .narrative-stagger > div { min-width: 0; }
.site-page main .narrative-stagger > a:hover { border-color: var(--site-link); }
.site-page main .narrative-stagger picture img { transition: transform 300ms ease; }
.site-page main .narrative-stagger a:hover picture img { transform: scale(1.025); }

/* Measured proof is a ruled rail, not four floating counters. */
.site-metrics { padding-block: 0; background: #102a49; }
.site-metrics > div { max-width: 1440px; }
.site-metrics > div > .grid { gap: 0; }
.site-metrics > div > .grid > div {
  padding: 2.6rem 1.5rem 2.8rem;
  border-right: 1px solid rgba(201,214,229,0.18);
  text-align: left;
}
.site-metrics > div > .grid > div:first-child { border-left: 1px solid rgba(201,214,229,0.18); }
.site-metrics .text-4xl { color: #e6eef7; font-size: clamp(2.2rem, 3.5vw, 3.45rem); letter-spacing: var(--site-track-figure); }
.site-metrics .mt-2 { color: #bacce0; font-size: 0.79rem; letter-spacing: 0.025em; line-height: 1.45; }
/* The footnote under the rail (leverage) sat flush on the band's bottom edge: give it the same 2.8rem the
   cells carry below their figures. The bands with no footnote already end on a padded cell. */
.site-metrics > div > p { color: #bacce0; padding-bottom: 2.8rem; }
.site-metrics a { color: #edf6ff; }

/* Home: services read as paired stories; proof and options stay browsable. */
.site-services #selected-engagements .narrative-stagger { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.site-services #certifications .rounded-3xl { aspect-ratio: 1.22; }
.site-services #certifications h2 { max-width: 16ch; }
.site-page #industries ul { justify-content: flex-start; gap: 0; border-top: 1px solid var(--site-rule); }
.site-page #industries li {
  padding: 1rem 1.35rem 1rem 0;
  margin-right: 1.35rem;
  border: 0;
  border-bottom: 1px solid var(--site-rule);
  border-radius: 0;
  background: transparent;
  color: var(--site-ink);
}

/* Services: photographs and capabilities are the main event. */
.site-services nav[aria-label="Services sections"] { background: var(--site-paper); border-color: var(--site-rule); }
.site-services nav[aria-label="Services sections"] > div { align-items: flex-start; }
.site-services nav[aria-label="Services sections"] > div > div { justify-content: flex-start; }
.site-services nav[aria-label="Services sections"] a {
  border: 0;
  border-bottom: 1px solid var(--site-rule);
  border-radius: 0;
  background: transparent;
  padding: 0.7rem 0.2rem;
  margin-right: 1rem;
  color: var(--site-ink);
}
.site-services nav[aria-label="Services sections"] a:hover { border-color: var(--site-link); color: var(--site-link); }
.site-services main section[id="infrastructure"] > div,
.site-services main section[id="governance"] > div,
.site-services main section[id="data-ai"] > div,
.site-services main section[id="automation"] > div { padding-top: 3.2rem; }
.site-services main section[id="infrastructure"] h2,
.site-services main section[id="governance"] h2,
.site-services main section[id="data-ai"] h2,
.site-services main section[id="automation"] h2 { max-width: 15ch; }
.site-services main section[id="infrastructure"] .aspect-\[4\/3\],
.site-services main section[id="governance"] .aspect-\[4\/3\],
.site-services main section[id="data-ai"] .aspect-\[4\/3\],
.site-services main section[id="automation"] .aspect-\[4\/3\] { aspect-ratio: 1.18; }
.site-services #playbooks .narrative-stagger > div { align-items: flex-start; }
.site-services #playbooks .rounded-xl { width: auto; height: auto; background: transparent; padding: 0; }
.site-services #technology li { border-radius: 0; }

/* Case studies become alternating editorial rows with outcome callouts. */
.site-engagements #engagements .narrative-stagger { grid-template-columns: 1fr; gap: 0; }
.site-engagements #engagements article {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  border-width: 1px 0 0;
  border-color: var(--site-rule);
  background: transparent;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  gap: clamp(2rem, 4vw, 4.5rem);
}
.site-engagements #engagements article:last-child { border-bottom-width: 1px; }
.site-engagements #engagements article:nth-child(even) { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); }
.site-engagements #engagements article:nth-child(even) > div:first-child { order: 2; }
.site-engagements #engagements article:nth-child(even) > div:last-child { order: 1; }
.site-engagements #engagements article > div:first-child { min-height: 400px; aspect-ratio: auto; }
.site-engagements #engagements article > div:last-child { padding: 0; justify-content: center; }
.site-engagements #engagements article h3 { font-size: clamp(1.85rem, 2.8vw, 2.75rem); line-height: 1.16; }
.site-engagements #engagements article h4 { color: var(--site-link); }
.site-engagements #engagements article .border-l-2 { background: var(--site-tint); padding: 1rem 1.2rem; border-color: var(--site-link); }

/* Credentials and essays retain their information density in calmer frames. */
.site-certifications #certifications .narrative-stagger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-certifications #certifications article > div:first-child { aspect-ratio: 2.3; }
.site-certifications #certifications h3 { font-size: 1.35rem; }
.site-certifications #why-it-matters .narrative-stagger > div { border-top: 2px solid var(--site-link); }
.site-blog #posts .narrative-stagger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-blog #posts article:first-child { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; }
.site-blog #posts article:first-child > a { aspect-ratio: auto; min-height: 390px; }
.site-blog #posts article:first-child h2 { font-size: clamp(1.85rem, 2.8vw, 2.9rem); }
.site-blog #posts article h2 { max-width: none; font-size: 1.35rem; letter-spacing: -0.02em; word-spacing: normal; }
.site-post #post > div, .site-legal #document > div { border-top: 0 !important; padding-top: 0 !important; }
.site-post .article,
.site-legal .article { color: var(--site-ink); font-size: 1.08rem; line-height: 1.8; }
.site-post .article h2,
.site-legal .article h2 { max-width: none; font-size: clamp(1.65rem, 2.7vw, 2.5rem); letter-spacing: var(--site-track-display); word-spacing: var(--site-word-display); }
.site-post .attribution { border-left: 3px solid var(--site-link); }
.site-post #measured { background: var(--site-paper) !important; }

/* Wide essay and terms tables: cells wrap at word boundaries (never mid-word), and a table that is still wider
   than the column scrolls with a theme-aware edge cue. The two "local" gradients are opaque covers that move
   with the content and hide each shadow once that edge is reached; the two "scroll" gradients are the shadows.
   The cover color must equal the surface behind it, so the scroller paints --site-panel itself. */
.site-page .article th,
.site-page .article td { white-space: normal; overflow-wrap: normal; word-break: normal; }
.site-page .article table,
.site-page .article .mermaid-wrapper {
  --scroll-cover: var(--site-panel);
  background-color: var(--scroll-cover);
  background-image:
    linear-gradient(to right, var(--scroll-cover) 35%, transparent),
    linear-gradient(to left, var(--scroll-cover) 35%, transparent),
    radial-gradient(farthest-side at 0 50%, var(--site-scroll-shadow), transparent),
    radial-gradient(farthest-side at 100% 50%, var(--site-scroll-shadow), transparent);
  background-position: left center, right center, left center, right center;
  background-size: 2.5rem 100%, 2.5rem 100%, 0.9rem 100%, 0.9rem 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}
@media (max-width: 500px) {
  .site-page .article table { font-size: 0.8rem; }
  .site-page .article th, .site-page .article td { padding: 0.45rem 0.4rem; hyphens: auto; }
}
/* Diagrams stay white in both themes, so their cover is white and the shadow stays the light-theme ink. */
.site-page .article .mermaid-wrapper { --scroll-cover: #ffffff; --site-scroll-shadow: rgba(11, 31, 59, 0.3); }
/* A diagram never renders below 75% of its natural size (post.jinja publishes that as --nat); the wrapper scrolls instead. */
.site-page .article .mermaid-wrapper svg { min-width: var(--nat, 0px); }

/* Long engagement detail pages: crisp terms, ruled lists, and useful FAQ. */
.site-engagement #offers .narrative-stagger > div,
.site-leverage #offers .narrative-stagger > div { border-top: 3px solid var(--site-link); }
.site-engagement #offers .narrative-stagger > div:nth-child(2),
.site-leverage #offers .narrative-stagger > div:nth-child(2) { background: var(--site-tint); }
.site-engagement #offers .narrative-stagger h3,
.site-leverage #offers .narrative-stagger h3 { font-size: clamp(1.65rem, 2.25vw, 2.25rem); }
.site-engagement #offers .narrative-stagger .text-4xl,
.site-leverage #offers .narrative-stagger .text-4xl { font-size: clamp(2.3rem, 3vw, 3.2rem); letter-spacing: var(--site-track-figure); }
.site-engagement #how li + li,
.site-leverage #how li + li,
.site-engagement #deliverables li + li,
.site-leverage #deliverables li + li,
.site-engagement #calendar li + li,
.site-leverage #calendar li + li { padding-top: 1rem; border-top: 1px solid var(--site-rule); }
.site-engagement #faq .space-y-3,
.site-leverage #faq .space-y-3 { border-top: 1px solid var(--site-rule); }
.site-engagement #faq details,
.site-leverage #faq details { padding: 0; border: 0; border-bottom: 1px solid var(--site-rule); background: transparent; }
.site-engagement #faq summary,
.site-leverage #faq summary { padding: 1.4rem 0; font-size: 1.05rem; }
.site-engagement #faq details p,
.site-leverage #faq details p { max-width: 68ch; margin: 0 0 1.5rem; line-height: 1.7; }
.site-page #watch { background: var(--site-paper); }
.site-page #watch > div { padding-block: 2rem; }
.site-page #watch figure { border-radius: 0; }

/* The contact section is an invitation, not another centered card. */
.site-contact { padding-block: clamp(5.5rem, 8vw, 8rem); background: #0b1f3b; color: #e6eef7; }
.site-contact-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.65fr);
  gap: clamp(3rem, 9vw, 9rem);
  width: min(100% - 3rem, 1280px);
  margin-inline: auto;
  padding-top: 2rem;
  border-top: 1px solid #526b84;
}
.site-contact-kicker { margin: 0; color: #a7c9e9; font-size: 0.86rem; font-weight: 800; }
.site-contact h2 {
  max-width: 15ch;
  margin: 1rem 0 0;
  color: #f5f9fd;
  font-size: clamp(2.6rem, 4.5vw, 4.7rem);
  font-weight: 800;
  letter-spacing: var(--site-track-display);
  word-spacing: var(--site-word-display);
  line-height: 1.08;
  text-wrap: balance;
}
.site-page main .site-contact h2 { max-width: 15ch; color: #f5f9fd; font-size: clamp(2.6rem, 4.5vw, 4.7rem); letter-spacing: var(--site-track-display); word-spacing: var(--site-word-display); line-height: 1.08; }
.site-contact-copy > p:last-child { max-width: 62ch; margin: 1.3rem 0 0; color: #b3c3d4; font-size: 1.05rem; line-height: 1.7; }
.site-contact-details { align-self: end; }
.site-contact-channels { display: grid; margin-top: 2.2rem; border-top: 1px solid #526b84; }
.site-contact-channels a { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #526b84; color: #e6eef7; font-size: 0.93rem; font-weight: 700; text-decoration: none; }
.site-contact-channels a:hover { color: #ffffff; }
.site-contact-details > p { margin: 1.6rem 0 0; color: #aebfd1; font-size: 0.82rem; line-height: 1.6; }

/* The footer shares the deep navy endcap in both themes. */
.site-footer { padding-block: 4.5rem 2rem; border-top: 1px solid #405a76; background: #0b1f3b; }
.site-footer h2 { color: #a7c9e9; }
.site-footer p { color: #b3c3d4; }
.site-footer a { color: #dce8f4; }
.site-footer a:hover { color: #ffffff; }
.site-footer > div > div:first-child > div:first-child > a { display: inline-block; padding-block: 0.25rem; }
.site-footer nav li + li { border-top: 1px solid rgba(201,214,229,0.12); }
.site-footer nav li a { display: block; padding: 0.58rem 0; }
.site-footer > div > div:last-child { border-color: #405a76; }

@media (max-width: 1150px) {
  .site-hero-grid { grid-template-columns: 58% 42%; }
  .site-hero-copy { padding-left: 5vw; padding-right: 4vw; }
  .site-hero h1 { font-size: clamp(2.9rem, 4.6vw, 4.85rem); }
  .site-leverage .site-hero h1,
  .site-post .site-hero h1 { font-size: clamp(2.65rem, 3.6vw, 3.8rem); }
}
@media (max-width: 900px) {
  .site-services #selected-engagements .narrative-stagger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .site-hero { padding-top: 4rem; }
  .site-hero-grid { display: flex; flex-direction: column; min-height: 0 !important; }
  .site-hero-copy { padding: 4.3rem 1.25rem 3.4rem; }
  /* 11.4vw keeps the longest hero word ("Infrastructure.", about 7.3em) inside the 1.25rem gutters from 320 px up. */
  .site-hero h1 { max-width: 13ch; font-size: clamp(2.2rem, 11.4vw, 5rem); }
  .site-leverage .site-hero h1,
  .site-post .site-hero h1 { max-width: 21ch; font-size: clamp(2.55rem, 8.1vw, 3.5rem); }
  /* Blog index h1 is two short lines ("The thinking behind" / "the engagements."); 13ch forced one word per line. */
  .site-blog .site-hero h1 { max-width: 20ch; font-size: clamp(2rem, 9.4vw, 3.5rem); }
  .site-hero-media { height: 300px; }
  .site-hero-photo-notation { bottom: 1.5rem; }
  .site-page main > section:not(#hero):not(#contact):not(#watch):not(.site-metrics) { padding-block: 4.8rem; }
  .site-page main section h2 { font-size: clamp(2.25rem, 8vw, 3.25rem); }
  .site-metrics > div > .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-metrics > div > .grid > div { padding: 1.75rem 1rem; border-bottom: 1px solid rgba(201,214,229,0.18); }
  .site-metrics > div > .grid > div:nth-child(odd) { border-left: 1px solid rgba(201,214,229,0.18); }
  .site-services #selected-engagements .narrative-stagger,
  .site-certifications #certifications .narrative-stagger,
  .site-blog #posts .narrative-stagger { grid-template-columns: 1fr; }
  .site-blog #posts article:first-child { grid-column: auto; display: flex; }
  .site-blog #posts article:first-child > a { min-height: 0; aspect-ratio: 16 / 9; }
  .site-engagements #engagements article,
  .site-engagements #engagements article:nth-child(even) { display: flex; flex-direction: column; gap: 1.75rem; }
  .site-engagements #engagements article:nth-child(even) > div:first-child,
  .site-engagements #engagements article:nth-child(even) > div:last-child { order: initial; }
  .site-engagements #engagements article > div:first-child { min-height: 0; aspect-ratio: 1.45; }
  .site-contact-wrap { grid-template-columns: 1fr; width: min(100% - 2.5rem, 1280px); gap: 2.8rem; }
  .site-contact-details { align-self: start; }
}
@media (max-width: 500px) {
  .site-hero-actions { align-items: stretch; flex-direction: column; gap: 1rem; }
  .site-hero-actions .site-button-primary { width: 100%; }
  .site-hero-actions .site-button-text { align-self: flex-start; }
  .site-hero-media { height: 250px; }
  .site-hero-photo-notation { font-size: 0.66rem; }
  .site-hero-photo-notation span:last-child { max-width: 12ch; text-align: right; }
  .site-contact .site-button-primary { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .site-button,
  .site-button span,
  .site-page main .narrative-stagger picture img { transition: none; }
}