/* Theme collection from Figma, modes Dark / Light. Dark is the default. */

@property --dots {
  syntax: "<color>";
  inherits: true;
  initial-value: #44423c;
}

:root {
  color-scheme: dark;
  --bg: #161514;
  --text-primary: #fff8e3;
  --text-secondary: #d3cfc3;
  --text-muted: #a99d7a;
  --accent: #ffaf2e;
  --accent-text: #ffaf2e;
  --surface-placeholder: #2c2b27;
  --dots: #44423c;

  --gutter: 77px;
  --header-height: 118px;
  /* Extra room above the header row at the very top of the page only. */
  --header-top-space: 6px;
  --content-width: 1766px;
  --font-display: "Unbounded", sans-serif;
  --font-ui: "Inter", sans-serif;
  transition: --dots 0.35s ease;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fff8e3;
  --text-primary: #2b2722;
  --text-secondary: #3e3a32;
  --text-muted: #7a7054;
  --accent: #ff8a00;
  --accent-text: #c2410c;
  --surface-placeholder: #ece4ce;
  --dots: color-mix(in srgb, #aa9e7c 50%, transparent);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #fff8e3;
    --text-primary: #2b2722;
    --text-secondary: #3e3a32;
    --text-muted: #7a7054;
    --accent: #ff8a00;
    --accent-text: #c2410c;
    --surface-placeholder: #ece4ce;
    --dots: color-mix(in srgb, #aa9e7c 50%, transparent);
  }
}

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

/* Theme switch: main.js grows the new theme as a circle from the toggle, so
   the snapshots skip their default cross-fade and colours do not fade under
   the circle. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

:root.is-theme-switching,
:root.is-theme-switching *,
:root.is-theme-switching *::before,
:root.is-theme-switching *::after {
  transition: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  background-image: radial-gradient(
    circle,
    var(--dots) 1px,
    transparent 1.15px
  );
  background-size: 32px 32px;
  background-position: 0 0;
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.35s ease, color 0.35s ease;
}

::selection {
  background: var(--accent);
  color: var(--bg);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

a {
  color: inherit;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 20;
  padding: 8px 12px;
  background: var(--bg);
  color: var(--text-primary);
  font-size: 14px;
}

.skip-link:focus {
  top: 12px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  /* The row sits 6px below Figma (POR-9: Max Shakurov asked to lower it 15px,
     then to raise it 9px), at the top of the page and once scrolled alike, so
     the header never moves with the page. Figma: 8px padding, row centre at
     y=63; the row is centred, so each 1px of top space takes 2px of padding. */
  padding: calc(8px + var(--header-top-space) * 2) 73px 0 var(--gutter);
  /* Transparent over the page's own dots until the hero title reaches the
     header's bottom edge; then main.js fills it with the plain background,
     no dots, at once (POR-13). The transition only follows a theme switch
     while filled; main.js suspends it when the fill turns on or off. */
  background-color: transparent;
  transition: background-color 0.35s ease;
}

.site-header.is-solid {
  background-color: var(--bg);
}

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.nav a {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.nav a:hover {
  color: var(--accent);
}

.nav a[aria-current="true"] {
  color: var(--accent);
}

.nav a[aria-current="true"]:hover {
  color: var(--accent);
}

.icon {
  display: block;
  width: 16px;
  height: 16px;
  flex: none;
}

/* The header arrows shrink with the 16px nav text; the footer keeps 16. */
.nav .icon {
  width: 14px;
  height: 14px;
}

.wordmark {
  transition: color 0.2s ease;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 30px;
  text-decoration: none;
  white-space: nowrap;
}

.wordmark[aria-current="true"],
.wordmark:hover,
.wordmark:focus-visible {
  color: var(--accent);
}

.menu-toggle {
  display: none;
}

/* The button shows only its two lines, as Max Shakurov asked: the word MENU
   is hidden from the screen but still names the button. */
.menu-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.theme-toggle {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: color 0.2s ease;
}

.theme-toggle:hover {
  color: var(--accent);
}

.theme-toggle svg {
  grid-area: 1 / 1;
  width: 24px;
  height: 24px;
}

.theme-toggle .icon-moon {
  display: none;
}

:root[data-theme="light"] .theme-toggle .icon-sun {
  display: none;
}

:root[data-theme="light"] .theme-toggle .icon-moon {
  display: block;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .theme-toggle .icon-sun {
    display: none;
  }

  :root:not([data-theme]) .theme-toggle .icon-moon {
    display: block;
  }
}

/* Figma "1st screen": title top at 364px of a 1080px viewport (33.7%),
   scaled with the viewport height but never under the header. */
.hero {
  position: relative;
  min-height: 100svh;
  margin-top: calc(var(--header-height) * -1);
  padding: max(var(--header-height), calc(100svh * 364 / 1080)) var(--gutter) 0;
}

/* main.js pushes the page's dots on the first screen away from the cursor
   (POR-17). The canvas is see-through: at rest it is empty and the body shows
   its own dots; it draws only the pushed ones, over patches of background at
   their homes. It sits under the header and the hero text, runs on under the
   top of the next section and, where the hero sits under the header, up to
   the top of the page; main.js sets its top and height. */
.hero-dots {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
  width: 100%;
  pointer-events: none;
}

.hero-copy {
  width: min(100%, var(--content-width));
}

.hero h1 {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.23;
}

.hero h1 span {
  display: block;
}

/* main.js swirls the title and the lead under the cursor on a WebGL canvas
   (POR-20). The canvas draws only inside the lens circle; there the mask cuts
   the same circle out of the DOM text, with a 1px edge that fades against the
   canvas's. At rest the hole has a negative radius and the DOM text shows
   whole. The mask is on everywhere, with or without the lens: a masked text
   blends a shade apart from an unmasked one, so this way nothing changes
   when the lens starts, stops or is lost. main.js sets the canvas box and
   the --lens-* values. */
.hero-lens {
  position: absolute;
  z-index: 1;
  display: block;
  pointer-events: none;
}

.hero h1,
.hero-lead {
  --lens-x: 0px;
  --lens-y: 0px;
  --lens-r: -1px;
  -webkit-mask-image: radial-gradient(circle at var(--lens-x) var(--lens-y), transparent calc(var(--lens-r) - 0.5px), #000 calc(var(--lens-r) + 0.5px));
  mask-image: radial-gradient(circle at var(--lens-x) var(--lens-y), transparent calc(var(--lens-r) - 0.5px), #000 calc(var(--lens-r) + 0.5px));
}

.hero-lead {
  max-width: 1330px;
  margin: 19px 0 0;
  padding-top: 13px;
  color: var(--text-secondary);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.22;
  opacity: 0.75;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.case {
  min-height: 100vh;
  padding-top: var(--header-height);
  padding-bottom: 50px;
}

.case-head {
  width: min(var(--content-width), calc(100% - (var(--gutter) * 2)));
  margin-left: var(--gutter);
}

.case-head h3 {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1;
}

.case-summary {
  max-width: 1319px;
  margin: 13px 0 0;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1.34;
  opacity: 0.85;
}

/* One row of pairs under the title (POR-32); a pair wraps whole. */
.case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 18px 0 0;
}

.case-meta div {
  display: flex;
  align-items: baseline;
  gap: 7px;
  white-space: nowrap;
}

.case-meta dt {
  margin: 0;
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 16px;
  text-transform: uppercase;
  opacity: 0.9;
}

.case-meta dd {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 17px;
  opacity: 0.75;
}

.carousel {
  display: flex;
  gap: 20px;
  margin-top: 24px;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter);
  scrollbar-width: none;
  /* Vertical page scroll stays with the browser; horizontal swipe is in main.js. */
  touch-action: pan-y;
  overscroll-behavior-x: contain;
}

.carousel::-webkit-scrollbar {
  display: none;
}

.carousel.is-dragging {
  scroll-snap-type: none;
  user-select: none;
}

.slide {
  flex: none;
  width: 660px;
  scroll-snap-align: start;
}

.slide-wide {
  width: 953px;
}

.slide-wide .placeholder {
  aspect-ratio: 953 / 675;
}

.placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  aspect-ratio: 660 / 675;
  border-radius: 8px;
  background: var(--surface-placeholder);
  color: var(--text-muted);
}

/* A real screen sits in the same box and covers it; the box colour shows
   while the image loads. */
.placeholder:has(img) {
  position: relative;
  overflow: hidden;
}

.placeholder img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  -webkit-user-drag: none;
  user-select: none;
}

/* Grab and a slight zoom only where a real pointer can hover. Touch keeps
   the default cursor and does not scale the image. */
@media (hover: hover) and (pointer: fine) {
  .carousel {
    cursor: grab;
  }

  .carousel.is-dragging,
  .carousel.is-dragging .placeholder,
  .carousel.is-dragging .placeholder img {
    cursor: grabbing;
  }

  .placeholder,
  .placeholder img {
    cursor: zoom-in;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .placeholder img {
    transition: transform 0.45s ease;
  }

  .placeholder:hover img {
    transform: scale(1.035);
  }
}

.placeholder-icon {
  width: 32px;
  height: 32px;
  background-color: currentColor;
  opacity: 0.4;
  -webkit-mask: url("assets/icons/image.svg") center / contain no-repeat;
  mask: url("assets/icons/image.svg") center / contain no-repeat;
}

.placeholder-label {
  font-size: 13px;
  line-height: 16px;
  opacity: 0.4;
}

.caption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 16px 0 0;
}

.eyebrow {
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 16px;
  text-transform: uppercase;
}

.caption-text {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.4;
  opacity: 0.8;
}

.carousel-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 0 var(--gutter);
}

.carousel-dots button {
  position: relative;
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: color-mix(in srgb, var(--text-muted) 40%, transparent);
  cursor: pointer;
}

.carousel-dots button::before {
  content: "";
  position: absolute;
  inset: -8px;
}

.carousel-dots button[aria-current="true"] {
  width: 24px;
  background: var(--accent);
}

.about {
  padding: var(--header-height) var(--gutter) 96px;
}

.about-inner {
  width: min(1316px, 100%);
}

.about h2 {
  margin: 0 0 56px;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
  scroll-margin-top: calc(var(--header-height) + 16px);
}

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

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 32px;
}

.timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: -12px;
  left: 11.25px;
  width: 1.5px;
  background: var(--text-muted);
}

.timeline-item.is-current::before {
  background: linear-gradient(to bottom, var(--accent), var(--text-muted));
}

.timeline-mark {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
}

.timeline-mark::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 2px solid var(--text-muted);
  border-radius: 50%;
  background: var(--bg);
}

.timeline-item.is-current .timeline-mark::before {
  top: 6px;
  left: 6px;
  width: 12px;
  height: 12px;
  border: 0;
  background: var(--accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 32%, transparent);
}

/* With motion on, the still halo gives way to rings that come out from under
   the dot, grow to 48px and fade out (POR-25). Only transform and opacity move;
   the ring starts at the dot's 12px, so each restart is hidden by the dot. */
@media (prefers-reduced-motion: no-preference) {
  .timeline-item.is-current .timeline-mark::before {
    box-shadow: none;
  }

  .timeline-item.is-current .timeline-mark::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -12px;
    left: -12px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 32%, transparent);
    transform: scale(0.25);
    animation: timeline-halo 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;
  }
}

@keyframes timeline-halo {
  from {
    transform: scale(0.25);
    opacity: 1;
  }

  to {
    transform: scale(1);
    opacity: 0;
  }
}

.timeline-body {
  min-width: 0;
  padding-top: 4px;
}

.timeline-item:not(:last-child) .timeline-body {
  padding-bottom: 64px;
}

.timeline-date {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 17px;
}

.timeline-body h3 {
  margin: 6px 0 0;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.timeline-role {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 22px;
}

.timeline-text {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.5;
}

.text-link {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.text-link:hover {
  color: var(--accent);
}

/* The last word and the arrow: they wrap together, never apart (POR-19). */
.text-link-end {
  white-space: nowrap;
}

/* The LinkedIn nav arrow, scaled down from 16px to sit with 16px body text. */
.text-link-arrow {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 3px;
  vertical-align: 0;
}

.site-footer {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: var(--header-height) var(--gutter) 56px;
}

.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 28px;
  text-align: center;
}

.contact-label,
.copy-email {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 16px;
  text-transform: uppercase;
}

.copy-email {
  cursor: pointer;
}

.copy-email:hover {
  color: var(--text-primary);
}

.contact-email {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.23;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 0.2s ease;
}

/* The email copies on click (main.js): no rolling letters, it only dims a
   little on hover, as Max Shakurov asked. */
.contact-email:hover,
.contact-email:focus-visible {
  color: var(--text-secondary);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 32px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 16px;
  text-transform: uppercase;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--accent);
}

/* Link hover (POR-24, main.js splits the text): no underline at rest; on
   hover the letters roll up one by one from the left, each into its copy
   one line below, and the underline draws in from the left, 1px thick.
   The logo rolls its letters with no line; the big email has neither. The
   accent colour is each link's own :hover rule. */
.link-label {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 max(1px, 0.04em) no-repeat;
  transition: background-size 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

a:hover .link-label,
a:focus-visible .link-label {
  background-size: 100% max(1px, 0.04em);
}

/* The Experience arrow sits inside the label: the line stops at the text,
   short of the 12px arrow and its 3px gap. With box-decoration-break: slice
   100% spans all lines together, so it holds when the link wraps. */
.text-link:hover .link-label,
.text-link:focus-visible .link-label {
  background-size: calc(100% - 15px) max(1px, 0.04em);
}

/* The logo rolls without the line. Only the image goes: the size rules above
   still apply, and the shorthand would reset the size to auto at rest. */
.wordmark .link-label {
  background-image: none;
}

.roll-word {
  white-space: nowrap;
}

.roll-char {
  display: inline-block;
  /* Cut only above and below: the copy moves only up, and a glyph may be
     wider than its box. */
  clip-path: inset(0 -0.5em);
}

.roll-char > span {
  display: inline-block;
  text-shadow: 0 1lh currentColor;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--i) * 18ms);
}

a:hover .roll-char > span,
a:focus-visible .roll-char > span {
  transform: translateY(-1lh);
}

.footer-links .icon {
  width: 16px;
  height: 16px;
}

.copyright {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 16px;
  opacity: 0.7;
}

/* Under 1400 the nav row runs into the centred logo (POR-12 measured it
   overlapping up to 44px at 1081), so it folds into a menu button with a
   dropdown at every narrower width, as Max Shakurov asked. With Contact as
   the fifth item (POR-26) the row clears the logo by 26 only from 1391. */
@media (width < 1400px) {
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 36px;
    /* The icon lines up with the gutter; the pill shows only when open. */
    margin-left: -16px;
    padding: 0 16px;
    border: 0;
    border-radius: 18px;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 16px;
    letter-spacing: 1.5px;
    line-height: 20px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
  }

  .menu-toggle:hover {
    color: var(--accent);
  }

  .menu-toggle[aria-expanded="true"] {
    background: color-mix(in srgb, var(--text-primary) 14%, var(--bg));
  }

  .menu-icon {
    width: 18px;
    height: 8px;
    border-top: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
  }

  .nav {
    position: absolute;
    /* 4px under the button: row centre (half of header + top padding) + 18 + 4. */
    top: calc((var(--header-height) + 8px + var(--header-top-space) * 2) / 2 + 22px);
    left: calc(var(--gutter) - 16px);
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    min-width: 220px;
    padding: 28px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 12%, transparent);
    border-radius: 20px;
    background: color-mix(in srgb, var(--text-primary) 4%, var(--bg));
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }

  .site-header.is-menu-open .nav {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
}

@media (max-width: 1200px) {
  :root {
    --gutter: 40px;
  }

  .hero h1 {
    font-size: clamp(40px, 5.4vw, 64px);
  }

  .hero-lead {
    font-size: clamp(20px, 2.6vw, 32px);
  }
}

@media (max-width: 1080px) {
  .hero {
    min-height: auto;
    margin-top: 0;
    padding-top: 48px;
    padding-bottom: 72px;
  }

  .work {
    scroll-margin-top: var(--header-height);
  }

  .case {
    min-height: auto;
    padding-top: 0;
  }

  .slide {
    width: min(660px, 78vw);
  }

  .slide-wide {
    width: min(953px, 86vw);
  }
}

/* ≤720 keeps the one row of 721–1399 (button, centred logo, theme toggle),
   as Max Shakurov asked: the header must not break into two rows. The logo
   shrinks to fit and is centred on the screen. */
@media (max-width: 720px) {
  :root {
    --gutter: 20px;
  }

  .site-header {
    padding-right: var(--gutter);
  }

  /* 16px caps; the 30px line keeps the row. */
  .wordmark {
    font-size: 16px;
  }

  .hero h1 {
    font-size: 34px;
    letter-spacing: -0.5px;
  }

  .hero h1 span {
    display: inline;
  }

  .hero h1 span:not(:last-child)::after {
    content: " ";
  }

  .hero-lead {
    margin-top: 20px;
    padding-top: 0;
    font-size: 18px;
  }

  .case-head h3,
  .about h2 {
    font-size: 32px;
  }

  .timeline-body h3 {
    font-size: 22px;
  }

  .timeline-item:not(:last-child) .timeline-body {
    padding-bottom: 40px;
  }

  .contact {
    gap: 20px;
  }

  .contact-email {
    font-size: clamp(26px, 7.6vw, 64px);
  }

  /* Four footer links (POR-34) must stay in one row at 375. */
  .footer-links {
    column-gap: 12px;
    letter-spacing: 1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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