/* Shared styles for tomdegay.com
   Rules that every page renders identically. Anything a page styles
   differently -- or that no other page has -- stays in that page's own
   <style> block, which loads after this file. */

@font-face {
  font-family: "Fakt Blond SemiBold";
  src: url("/FaktProSemiBold.woff2") format("woff2"),
       url("/FaktProSemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fakt Blond";
  src: url("/FaktProBlond.woff2") format("woff2"),
       url("/FaktProBlond.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FaktPro-SemiBold";
  src: url("/FaktProSemiBold.woff2") format("woff2"),
       url("/FaktProSemiBold.woff") format("woff");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root { color-scheme: dark; }

/* Every <img> carries its intrinsic width/height so the browser can reserve
   the right box before the file arrives. Those attributes are presentational
   hints for the width and height PROPERTIES, though, not just an aspect ratio
   -- so without this the attribute height would win wherever CSS sets a width
   and leaves height alone, squashing the image and defeating aspect-ratio.
   No rule anywhere sets a height on an img selector, so this only ever
   overrides the attribute. */
img { height: auto; }

::selection {
  background: rgba(0, 216, 170, 0.28);
  color: #fff;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #131313;
}

.display {
  font-family: "Fakt Blond SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
}

a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  padding-bottom: 1px;
  transition: border-color 0.15s ease, opacity 0.15s ease;
}

a:hover, a:focus-visible { border-color: rgba(255, 255, 255, 0.9); }

a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 4px;
  border-radius: 1px;
}

a[target="_blank"] { position: relative; }

a[target="_blank"]::after {
  content: "→";
  position: absolute;
  right: -1.1em;
  top: 50%;
  transform: translate(-4px, -50%);
  opacity: 0;
  transition: transform 0.18s ease, opacity 0.18s ease;
  pointer-events: none;
  will-change: transform, opacity;
}

a[target="_blank"]:hover::after, a[target="_blank"]:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}

/* -- suppress the external-link arrow inside running text -- */
.about-copy a[target="_blank"]::after, .site-note a[target="_blank"]::after {
  content: none;
}

.intro {
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(19px, 2.5vw, 24px);
  line-height: 1.55;
  margin: 0;
  max-width: 620px;
}

.hero-video { margin-bottom: clamp(32px, 5vw, 48px); }

.hero-video video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

@media (max-width: 640px) {
  .hero-video {
    position: relative;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    aspect-ratio: 838 / 1010;
    overflow: hidden;
  }

  .hero-video video {
    position: absolute;
    width: 190.93vw;
    height: auto;
    max-width: none;
    left: -13.13vw;
    top: 0;
    border-radius: 0;
  }
}

.job { margin: 0 0 8px; }

.job-company {
  color: #fff;
  font-size: clamp(20px, 2.8vw, 26px);
  line-height: 1.2;
}

.job-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
}

hr.rule:has(+ .back-to-top-row) { margin-bottom: clamp(8px, 1.2vw, 14px); }

.case-footer { margin-top: clamp(48px, 7vw, 76px); }

.back-to-top-row {
  margin: 0;
  text-align: right;
}

.back-to-top {
  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  border-bottom: none;
  white-space: nowrap;
}

.back-to-top:hover, .back-to-top:focus-visible {
  color: #fff;
  border-bottom: none;
}

.case-footer .eyebrow { margin-top: 0; }

.case-footer .case-block { margin-top: 0; }

.contact-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(32px, 5vw, 48px);
}

.about-photo {
  display: block;
  width: 100%;
  max-width: 620px;
  min-width: 0;
  flex: 1 1 320px;
  border-radius: 12px;
}

.about-copy p {
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(19px, 2.5vw, 24px);
  line-height: 1.55;
  margin: 0 0 clamp(26px, 3.4vw, 34px);
  max-width: 620px;
}

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

.about-copy a {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.4);
}

.about-copy a:hover, .about-copy a:focus-visible {
  border-color: rgba(255, 255, 255, 0.9);
}

/* -- "About this site" footnote -- */
.site-note {
  margin-top: clamp(48px, 8vw, 88px);
  padding-top: clamp(28px, 4vw, 36px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  max-width: 620px;
}

.site-note .eyebrow { margin: 0 0 14px; }

.site-note p {
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: clamp(14px, 1.6vw, 15px);
  line-height: 1.65;
}

.site-note a {
  color: rgba(255, 255, 255, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.25);
}

.site-note a:hover, .site-note a:focus-visible {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.9);
}

.about-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-bottom: clamp(32px, 5vw, 48px);
}

.about-top {
  display: flex;
  flex-direction: column;
}

/* -- LinkedIn / CV as dark button modules, matching the YouTube link cards -- */
p.links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 156px;
  padding: 10px 15px;
  border: 1px solid rgb(33, 33, 33);
  border-radius: 8px;
  background-color: rgb(33, 33, 33);
  color: #fff;
  font-family: "Fakt Blond SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}

p.links a span {
  display: block;
  transform: translateY(2px);
}

p.links a:hover, p.links a:focus-visible {
  background-color: rgb(48, 48, 48);
  border-color: rgb(48, 48, 48);
}

p.links a:active { transform: translateY(1px); }

p.links a svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

p.links a[target="_blank"]::after { content: none; }

@media (max-width: 1099px) {
  /* -- below 1100px the right-hand gutter is too narrow for the button
  modules, so drop the links below the photo in normal flow and
  stop them sticking -- */
  .about-header {
    order: 0;
    margin-bottom: 20px;
  }

  .about-copy { order: 3; }

  .site-note { order: 4; }
}

/* -- hero -- */
.case-icon {
  display: block;
  height: 42px;
  width: auto;
  margin-bottom: 16px;
}

@media (prefers-reduced-motion: no-preference) {
  .case-icon-trace {
    stroke-dasharray: 150 150;
    animation: case-icon-draw .95s cubic-bezier(.22, 1, .36, 1) both;
  }
}

.kicker {
  display: block;
  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  color: #00d8aa;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
  word-spacing: -3px;
  text-transform: uppercase;
  margin: 32px 0 18px;
}

.kicker a {
  color: inherit;
  border-bottom: 1px solid rgba(0, 216, 170, 0.45);
}

.kicker a:hover, .kicker a:focus-visible { border-color: #00d8aa; }

p.subtitle {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.5;
  max-width: 54ch;
}

p.keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
}

.keyword {
  display: inline-block;
  padding: 9px 13px;
  border-radius: 6px;
  background: rgb(40, 40, 40);
  color: rgba(255, 255, 255, 0.72);
  font-family: "Fakt Blond SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.job-desc {
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(20px, 2.6vw, 25px);
  line-height: 1.4;
  max-width: 55ch;
  margin: 18px 0 0;
}

/* -- meta row -- */
.meta-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 28px 32px;
  margin: 40px 0 0;
}

.meta-item .eyebrow { margin-bottom: 8px; }

.meta-item p {
  margin: 0;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
}

.timeframe-with-donut {
  display: flex;
  align-items: center;
  gap: 12px;
}

.timeframe-with-donut p {
  flex: 1;
  min-width: 0;
}

.timeframe-donut {
  flex: 0 0 auto;
  display: block;
}

.timeframe-donut circle {
  fill: none;
  stroke-width: 4;
}

.timeframe-donut-track { stroke: rgba(255, 255, 255, 0.15); }

.timeframe-donut-value {
  stroke: #00d8aa;
  stroke-linecap: round;
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
  animation: timeframe-donut-fill 900ms cubic-bezier(0.33, 1, 0.68, 1) 200ms forwards;
}

@media (prefers-reduced-motion: reduce) {
  .timeframe-donut-value {
    animation: none;
    stroke-dashoffset: var(--donut-offset, 0);
  }
}

/* -- key points -- */
.key-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.key-points li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  color: #fff;
  font-size: clamp(18px, 2.4vw, 23px);
  line-height: 1.4;
}

.key-points li::before {
  content: "→";
  flex: 0 0 auto;
  color: #00d8aa;
}

@media (min-width: 1100px) {
  .key-points-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }

  .key-points { grid-column: 2 / -1; }
}

.stat {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-value {
  display: block;
  color: #00d8aa;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  display: block;
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.55);
  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
}

@media (min-width: 820px) {
  .case-blocks.approach-blocks { grid-template-columns: repeat(3, 1fr); }
}

.approach-blocks .case-block {
  border-color: rgb(33, 33, 33);
  background-color: rgb(33, 33, 33);
}

.approach-blocks .case-block:hover, .approach-blocks .case-block:focus-visible {
  border-color: rgb(48, 48, 48);
  background-color: rgb(48, 48, 48);
  transform: none;
}

.approach-blocks .case-block-media { aspect-ratio: 5 / 2; }

form { max-width: 480px; }

.field { margin-bottom: 28px; }

.field input, .field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  padding: 8px 0 10px;
  outline: none;
  transition: border-color 0.15s ease;
}

.field textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.4;
}

.field input::placeholder, .field textarea::placeholder {
  color: rgba(255, 255, 255, 0.32);
}

.field input:focus, .field textarea:focus {
  border-bottom-color: rgba(255, 255, 255, 0.9);
}

button[type="submit"] span {
  display: block;
  transform: translateY(2px);
}

button[type="submit"]:active { transform: translateY(1px); }

button[type="submit"]:disabled {
  cursor: default;
  opacity: 0.6;
}

.case-block .eyebrow { margin: 0 0 6px; }

.case-body h2 { max-width: 46rem; }

h3 {
  font-family: "Fakt Blond SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  margin: 0 0 20px;
  color: #fff;
  font-size: clamp(18px, 2.3vw, 22px);
  line-height: 1.3;
}

.case-body h3 { max-width: 46rem; }

h4 {
  font-family: "Fakt Blond SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  margin: 28px 0 12px;
  color: #fff;
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.35;
}

.case-body h4 { max-width: 46rem; }

.subsection + .subsection {
  margin-top: clamp(40px, 6vw, 56px);
  padding-top: clamp(40px, 6vw, 56px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.case-body p {
  max-width: 46rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(15.5px, 1.7vw, 17px);
  line-height: 1.65;
  margin: 0 0 20px;
}

.case-body p.see-also {
  margin-top: 22px;
  font-size: 15px;
}

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

.case-body blockquote {
  margin: 28px 0 24px;
  padding-left: 22px;
  border-left: 2px solid #00d8aa;
  color: #fff;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.5;
  max-width: 54ch;
}

.case-body blockquote:last-child { margin-bottom: 0; }

.case-body blockquote cite {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}

.ui-video.is-tall {
  width: fit-content;
  max-width: 100%;
}

.ui-video.is-small { max-width: 30rem; }

.ui-video + p { margin-top: clamp(24px, 3.5vw, 36px); }

.ui-video.is-tall video {
  width: auto;
  max-width: 100%;
  max-height: clamp(360px, 62vh, 560px);
}

.diagram svg {
  display: block;
  width: 100%;
  height: auto;
}

.figure.is-full { max-width: none; }

.figure figcaption {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.55);
  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.5;
}

.figure figcaption a {
  color: rgba(255, 255, 255, 0.8);
  border-bottom-color: rgba(255, 255, 255, 0.35);
}

.figure figcaption a:hover, .figure figcaption a:focus-visible {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.9);
}

.figure figcaption a[target="_blank"]::after { content: none; }

/* -- image gallery: large image + thumbnail strip, click to enlarge -- */
.gallery {
  margin: clamp(20px, 3vw, 28px) 0 clamp(24px, 4vw, 36px);
  max-width: 620px;
}

.gallery-frame { position: relative; }

.gallery-main {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: #161616;
  border-radius: 6px;
  cursor: zoom-in;
}

/* outgoing image, sits over .gallery-main and dissolves to reveal the new one */
.gallery-fade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-fade { display: none; }
}

.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, transform 0.08s ease;
}

.gallery-frame:hover .gallery-nav, .gallery-frame:focus-within .gallery-nav {
  opacity: 1;
}

.gallery-nav:hover, .gallery-nav:focus-visible {
  background: rgba(0, 0, 0, 0.8);
}

.gallery-nav:active { transform: translateY(-50%) translateY(1px); }

.gallery-nav svg { display: block; }

.gallery-nav-prev svg { transform: translateX(-1px); }

.gallery-nav-next svg { transform: translateX(1px); }

.gallery-nav-prev { left: 10px; }

.gallery-nav-next { right: 10px; }

@media (hover: none) {
  .gallery-nav { opacity: 0.9; }
}

.gallery .gallery-count {
  margin: 12px 0 0;
  color: #fff;
  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.gallery .gallery-caption {
  margin: 10px 0 0;
  max-width: none;
  color: rgba(255, 255, 255, 0.55);
  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.gallery-count + .gallery-caption { margin-top: 5px; }

.gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.gallery-thumb {
  flex: 0 0 auto;
  width: 84px;
  height: 56px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  background: none;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}

.gallery-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-thumb:hover, .gallery-thumb:focus-visible { opacity: 0.85; }

.gallery-thumb:active { transform: translateY(1px); }

.gallery-thumb.is-active {
  opacity: 1;
  border-color: #00d8aa;
}

@media (max-width: 560px) {
  .gallery-thumb {
    width: 64px;
    height: 44px;
  }
}

.figure-strip-imgs img[src$="validation-operation.png"] {
  object-position: 100% 50%;
}

.figure-strip-4 .figure-strip-imgs {
  grid-template-columns: repeat(4, 1fr);
}

/* -- resources -- */
.resources-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.resources-list a { font-size: clamp(15.5px, 1.7vw, 17px); }

/* -- sticky section nav (wide desktop only), matching the case study pages -- */
.toc {
  display: none;
  position: relative;
}

@media (min-width: 1100px) {
  .content {
    grid-column: 1;
    min-width: 0;
  }

  .side-rail {
    grid-column: 2;
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .side-rail .related {
    grid-template-columns: 1fr;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
}

.related {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 46rem;
  margin-top: clamp(40px, 6vw, 56px);
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

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

.related a {
  display: block;
  overflow: hidden;
  border: 1px solid rgb(33, 33, 33);
  border-radius: 8px;
  background-color: rgb(33, 33, 33);
  color: #fff;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.related a:hover, .related a:focus-visible {
  background-color: rgb(48, 48, 48);
  border-color: rgb(48, 48, 48);
}

.related-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 2;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.related a:hover .related-thumb, .related a:focus-visible .related-thumb {
  transform: scale(1.04);
}

.related-title {
  display: block;
  padding: 12px 15px 14px;
  font-family: "Fakt Blond SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  color: #fff;
  font-size: 15px;
  line-height: 1.35;
}

.toc a {
  display: block;
  padding: 8px 0 8px 16px;
  border-left: 2px solid rgba(255, 255, 255, 0.14);
  border-bottom: none;
  font-size: 16px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.toc a:hover, .toc a:focus-visible {
  color: #fff;
  border-left-color: rgba(255, 255, 255, 0.6);
}

.toc a.is-active { color: #00d8aa; }

.toc-indicator {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 0;
  background: #00d8aa;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), height 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

.toc-indicator.is-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .toc-indicator { transition: none; }
}

.principles {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 64px);
}

.principles .rule {
  width: 100%;
  margin: 0;
}

.principle-title {
  color: #fff;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.3;
  margin: 0 0 clamp(14px, 1.8vw, 18px);
  max-width: 32ch;
}

.principle p {
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(18px, 2.3vw, 22px);
  line-height: 1.55;
  margin: 0;
  max-width: 620px;
}

.principle p.note {
  color: rgba(255, 255, 255, 0.7);
  font-size: clamp(15.5px, 1.7vw, 17px);
  line-height: 1.65;
}

.principle p.principle-applied {
  font-size: clamp(15px, 1.7vw, 17px);
  margin-top: clamp(16px, 2vw, 22px);
}

.principle blockquote p + p { margin-top: 10px; }

.case-block-kicker-icon {
  display: block;
  height: 14px;
  width: auto;
  flex: 0 0 auto;
}

.case-block-subtitle {
  display: block;
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.5;
  margin-top: 8px;
  max-width: 54ch;
}

.case-block-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.case-block-keyword {
  display: inline-block;
  padding: 9px 13px;
  border-radius: 6px;
  background: rgb(48, 48, 48);
  color: rgba(255, 255, 255, 0.72);
  font-family: "Fakt Blond SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.case-block:hover .case-block-keyword, .case-block:focus-visible .case-block-keyword {
  background: rgb(64, 64, 64);
}

.case-studies-heading { margin-top: 0; }

.job-company a[target="_blank"]::after { content: none; }

/* -- case block with lead image -- */
.case-block.has-image {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 0 0 14px;
  overflow: hidden;
}

.case-block-media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center top;
  margin-bottom: 16px;
  transition: transform 0.3s ease;
}

/* Branded logo cards (Zonefully, Image Insight) are centred compositions,
not top-anchored UI screenshots -- override the default top crop. */
.case-block-media[src$="zonefully-card.jpg"], .case-block-media[src$="image-insight-card.jpg"] {
  object-position: center;
}

.case-block.has-image .case-block-text { padding: 0 22px; }

.case-block.has-image:hover .case-block-media, .case-block.has-image:focus-visible .case-block-media {
  transform: scale(1.03);
}

.case-block.has-thumb .case-block-text { min-width: 0; }

.case-block.has-thumb:hover .case-block-thumb, .case-block.has-thumb:focus-visible .case-block-thumb {
  transform: scale(1.03);
}

/* -- site nav -- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Frosted bar background lives on a pseudo-element so .site-nav itself is
not a backdrop-filter root — otherwise the open mobile menu panel (a
descendant that has its own backdrop-filter) can't blur the page. */
.site-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(19, 19, 19, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.site-nav-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 14px clamp(24px, 5vw, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
  min-height: 56px;
}

@media (min-width: 1100px) {
  .site-nav-inner { max-width: 1320px; }
}

.site-nav-brand {
  font-size: 24px;
  color: #fff;
  border-bottom: none;
  display: inline-block;
  transform-origin: 50% 55%;
}

@keyframes brand-wiggle {
  0%   { transform: rotate(0); }
  25%  { transform: rotate(-2.4deg); }
  55%  { transform: rotate(1.5deg); }
  80%  { transform: rotate(-0.6deg); }
  100% { transform: rotate(0); }
}

.site-nav-brand:hover { animation: brand-wiggle 0.4s ease-in-out; }

@media (prefers-reduced-motion: reduce) {
  .site-nav-brand:hover { animation: none; }
}

.site-nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 28px;
}

.site-nav-links a {
  font-family: "Fakt Blond SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
  border-bottom: none;
}

.site-nav-links a:hover, .site-nav-links a:focus-visible { color: #fff; }

.site-nav-links a.is-current { color: #00d8aa; }

.nav-item { position: relative; }

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  padding-top: 14px;
  min-width: 360px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
  z-index: 60;
}

/* Approach popover holds short items -> shrink to content instead of the 360px case-studies width */
.nav-dropdown--tight { min-width: 0; }

.nav-dropdown--tight .nav-dropdown-card-title { white-space: nowrap; }

.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown, .nav-item.is-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.nav-item:hover .nav-dropdown { transition-delay: 0.14s; }

/* Escape sets .is-dismissed (see nav.js). Without this the rule above keeps the
   panel on screen while the pointer rests on the item or focus sits inside it,
   so the key looks broken. Same specificity as that rule, declared after it, so
   it wins. Desktop only -- below 640px the dropdown is expanded inline and must
   stay visible. */
@media (min-width: 641px) {
  .nav-item.is-dismissed .nav-dropdown {
    opacity: 0;
    visibility: hidden;
  }
}

.nav-dropdown-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: #1a1a1a;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

.nav-dropdown-card {
  display: block;
  padding: 14px 16px 12px;
  border-radius: 8px;
  background-color: transparent;
  transition: background-color 0.2s ease;
}

.nav-dropdown-card:hover, .nav-dropdown-card:focus-visible {
  background-color: rgba(255, 255, 255, 0.08);
}

.nav-dropdown-card-kicker {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  color: #00d8aa;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  word-spacing: -3px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.nav-dropdown-card-kicker-icon {
  display: block;
  height: 12px;
  width: auto;
  flex: 0 0 auto;
}

.nav-dropdown-card-title {
  display: block;
  font-family: "Fakt Blond SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  color: #fff;
  font-size: 15px;
  line-height: 1.3;
}

.nav-dropdown-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin: 4px 0;
}

/* -- mobile: collapse the nav links behind a hamburger (<= 640px) -- */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin: -10px -12px -10px 0;
  padding: 0;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform 0.45s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.2s ease;
}

.nav-toggle-bar:nth-child(2) {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-nav.is-open .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-nav.is-open .nav-toggle-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.site-nav.is-open .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 640px) {
  .nav-toggle { display: flex; }

  .site-nav-inner { flex-wrap: nowrap; }

  .site-nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px clamp(24px, 5vw, 56px) 18px;
    background: rgba(19, 19, 19, 0.86);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .site-nav.is-open .site-nav-links { display: flex; }

  .site-nav-links > a, .nav-item > a {
    display: block;
    padding: 14px 0;
    font-size: 20px;
  }

  .site-nav-links > a + a, .nav-item {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .nav-dropdown {
    position: static;
    min-width: 0;
    padding: 0 0 10px;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  /* the desktop open-state rule is more specific and would otherwise
  still slide the panel -50% when the item is hovered/focused here */
  .nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown, .nav-item.is-open .nav-dropdown {
    transform: none;
  }

  .nav-dropdown-panel {
    gap: 2px;
    padding: 0;
    background: none;
    box-shadow: none;
  }

  .nav-dropdown-card { padding: 9px 0 9px 16px; }
}

@media (prefers-reduced-motion: no-preference) {
  /* The download arrow settles towards its stationary tray. */
  a[download] .download-arrow { transition: transform .2s ease; }

  a[download]:focus-visible .download-arrow { transform: translateY(2px); }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  a[download]:hover .download-arrow { transform: translateY(2px); }
}

/* -- hero entrance animation (word-by-word rise) --
.hero-armed is set on <html> by an inline head script only when
prefers-reduced-motion is not set; the body script splits the
statement into .word spans, staggers them, then adds .hero-play. */
.hero-armed #about-heading {
  opacity: 0;
  transform: translateY(8px);
}

.hero-play #about-heading {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* -- scroll reveal: fade the card grids in as they enter the viewport --
.reveal-armed is set on <html> pre-paint (only when motion is welcome);
the body script adds .is-revealed per card with a per-row --reveal-delay. */
.reveal-armed .case-blocks .case-block { opacity: 0; }

.reveal-armed .case-blocks .case-block.is-revealed {
  animation: card-fade-in 1.1s ease var(--reveal-delay, 0ms) both;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-armed .case-blocks .case-block, .reveal-armed .case-blocks .case-block.is-revealed {
    opacity: 1;
    animation: none;
  }
}

/* -- key points: stagger in as the list enters view -- */
.head-armed .key-points li {
  opacity: 0;
  transform: translateY(8px);
}

.key-points li.kp-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .head-armed .key-points li {
    opacity: 1;
    transform: none;
  }
}

/* Animated schema flow; the original artwork remains the static fallback. */
.schema-pulse, .schema-halo { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .schema-pulse, .schema-halo { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Let each corner move outwards without scaling its stroke. */
  .ui-video-expand .expand-corner { transition: transform .2s ease; }

  .ui-video-expand:focus-visible .expand-corner {
    transform: translate(var(--dx), var(--dy));
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ui-video-expand:hover .expand-corner {
    transform: translate(var(--dx), var(--dy));
  }
}

.green-stage [fill], .green-stage [stroke] {
  transition:fill .585s ease,stroke .585s ease;
}

.green-pipeline.is-flow-active .green-stage [fill]:not([fill="none"]):not(.stage-bg) {
  fill:#8af4d2;
}

.green-pipeline.is-flow-active .green-stage .stage-bg { fill:#091d1b; }

.green-pipeline.is-flow-active .green-stage [stroke] { stroke:#8af4d2; }

.green-pipeline.is-flow-active .green-stage [fill], .green-pipeline.is-flow-active .green-stage [stroke] {
  transition-delay:var(--stage-delay);
}

@media(prefers-reduced-motion:reduce) {
  .green-pipeline .green-stage [fill], .green-pipeline .green-stage [stroke] {
    transition:none;
  }
}

.green-trace {
  opacity:0;
  stroke-dasharray:18 118;
  stroke-dashoffset:18;
  pointer-events:none;
}

@media(prefers-reduced-motion:no-preference) {
  .green-pipeline.is-flow-active .green-trace {
    animation:pipeline-trace 1.105s linear var(--trace-delay) both;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .validation-card.is-flow-active .validation-arc {
    animation: validation-ring 2.1s cubic-bezier(.4,0,.2,1) var(--ring-delay) both;
  }
}

.feeds-line {
  stroke-dasharray:100;
  stroke-dashoffset:100;
}

.feeds-pulse {
  stroke-dasharray:12 112;
  stroke-dashoffset:12;
  opacity:0;
}

.feeds-module {
  transform-box:fill-box;
  transform-origin:center;
}

.feeds-arrival { opacity:0; }

@media(prefers-reduced-motion:no-preference) {
  .feeds-card.is-flow-active .feeds-line {
    animation:feeds-line-in var(--feed-duration) linear var(--feed-delay) both;
  }

  .feeds-card.is-flow-active .feeds-pulse {
    animation:feeds-travel var(--feed-duration) linear var(--feed-delay) both;
  }

  .feeds-card.is-flow-active .feeds-module {
    animation:feeds-pop .5s ease var(--arrival) both;
  }

  .feeds-card.is-flow-active .feeds-arrival {
    animation:feeds-arrive .85s ease-out var(--arrival) both;
  }
}

@media(prefers-reduced-motion:reduce) {
  .feeds-line { stroke-dashoffset:0; }
}

.mapping-row { opacity:0; }

.mapping-progress {
  transform:scaleX(0);
  transform-box:fill-box;
  transform-origin:left center;
}

.mapping-progress-left { transform:scaleX(.6); }

@media(prefers-reduced-motion:no-preference) {
  .mapping-card.is-flow-active .mapping-row {
    animation:mapping-row-in .3s ease var(--mapping-delay) both;
  }

  .mapping-card.is-flow-active .mapping-progress-left {
    animation:mapping-fill-left 3.4s ease both;
  }

  .mapping-card.is-flow-active .mapping-progress-right {
    animation:mapping-fill-right 3.4s ease both;
  }
}

@media(prefers-reduced-motion:reduce) {
  .mapping-row { opacity:1; }

  .mapping-progress { transform:none; }
}

/* Reset finished artwork before an explicitly requested hover replay. */
.is-flow-reset .green-stage [fill], .is-flow-reset .green-stage [stroke] {
  transition: none !important;
}