/* Victor Pacheco, wedding film editor.
   One locked dark theme: films are watched with the lights down, and the footage
   (tungsten reception light) should be the brightest thing on the page.
   Radius rule: buttons, tabs and tags are full pills; glass frames are 16px;
   the video inside a frame is 10px. */

:root {
  --bg: oklch(0.15 0.008 65);
  --bg-deep: oklch(0.11 0.006 65);
  --text: oklch(0.95 0.008 80);
  --text-muted: oklch(0.78 0.012 75);
  --text-faint: oklch(0.66 0.012 75);
  --accent: oklch(0.83 0.11 76);
  --accent-ink: oklch(0.2 0.03 70);
  --glass: oklch(1 0 0 / 0.07);
  --glass-strong: oklch(1 0 0 / 0.12);
  --glass-line: oklch(1 0 0 / 0.2);
  --hairline: oklch(1 0 0 / 0.1);

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --fs-small: 0.875rem;
  --fs-body: 1.0625rem;
  --fs-h4: 1.0625rem;
  --fs-h3: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
  --fs-h2: clamp(2.25rem, 1.3rem + 3.4vw, 4.5rem);
  /* "WEDDING" is about 5.7em wide at this stretch: 15.5vw keeps it inside the gutters. */
  --fs-hero: clamp(3rem, 15.5vw, 15rem);

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1320px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: clamp(96px, 12vw, 176px);

  --radius-frame: 16px;
  --radius-media: 10px;
  --frame-pad: 7px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --z-media: 0;
  --z-title: 1;
  --z-subject: 2;
  --z-content: 3;
  --z-header: 10;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.55;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
ul[role="list"], ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, dl, dd { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

a { color: inherit; }

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Placeholders for real data still to be filled in. Visible on purpose. */
mark.todo {
  background: none;
  color: var(--accent);
  border: 1px dashed oklch(0.83 0.11 76 / 0.6);
  border-radius: 4px;
  padding: 0 4px;
}

/* Blurred reception lights behind the whole page. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-media);
  background: url("assets/frames/backdrop.webp") center / cover no-repeat;
  opacity: 0.5;
  pointer-events: none;
}
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, oklch(0.15 0.008 65 / 0.55), oklch(0.11 0.006 65 / 0.85));
}

main, .site-header { position: relative; z-index: var(--z-content); }

.container {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

/* Glass, used only where something is framed: videos, tabs, the about sheet. */
.frame {
  padding: var(--frame-pad);
  border-radius: var(--radius-frame);
  background: var(--glass);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.frame > video,
.frame > img {
  width: 100%;
  border-radius: var(--radius-media);
  object-fit: cover;
  background: var(--bg-deep);
}

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.button:hover { background: oklch(0.88 0.1 78); }
.button:active { transform: scale(0.97); }
.button--ghost {
  background: var(--glass);
  color: var(--text);
  border-color: var(--glass-line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.button--ghost:hover { background: var(--glass-strong); }
.button--small { min-height: 40px; padding: 0 18px; font-size: var(--fs-small); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3em; /* flex drops the space between "Filmed by" and the name */
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.pill--accent { color: var(--text); border-color: oklch(0.83 0.11 76 / 0.5); }
.pill--approved { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* Header: transparent over the hero, glass once the hero has scrolled away. */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px var(--gutter);
  transition: background-color 300ms var(--ease-out), border-color 300ms var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header.is-solid {
  background: oklch(0.13 0.008 65 / 0.72);
  border-bottom-color: var(--hairline);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.site-header__name {
  font-weight: 650;
  font-stretch: 112%;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.site-header__company { color: var(--text-muted); font-weight: 500; }
.site-header__nav {
  display: flex;
  gap: var(--space-3);
  margin-left: auto;
  font-size: 0.9375rem;
}
.site-header__nav a {
  color: var(--text-muted);
  text-decoration: none;
  padding: 10px 2px;
  transition: color 200ms var(--ease-out);
}
.site-header__nav a:hover { color: var(--text); }

/* Hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto auto;
  padding: 96px var(--gutter) var(--space-4);
  overflow: hidden;
}
.hero__media,
.hero__video,
.hero__dust,
.hero__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__media { z-index: var(--z-media); background: var(--bg-deep); }
.hero__video { object-fit: cover; object-position: 60% 30%; }
.hero__shade {
  background:
    linear-gradient(180deg, oklch(0.11 0.006 65 / 0.55) 0%, transparent 22%),
    linear-gradient(0deg, oklch(0.11 0.006 65 / 0.95) 0%, oklch(0.11 0.006 65 / 0.55) 38%, transparent 70%);
}

.hero__title {
  position: relative;
  z-index: var(--z-title);
  grid-row: 2;
  display: flex;
  flex-direction: column;
  font-size: var(--fs-hero);
  font-weight: 800;
  font-stretch: 118%;
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--text);
}
.hero__line { display: block; white-space: nowrap; }
.hero__letter { display: inline-block; will-change: transform, filter, opacity; }

/* With a cut-out of the couple, the title moves up behind them. */
.hero__subject {
  position: absolute;
  z-index: var(--z-subject);
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 30%;
  pointer-events: none;
}
.hero.has-subject .hero__title { grid-row: 1; align-self: center; }

.hero__foot {
  position: relative;
  z-index: var(--z-content);
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.hero__intro {
  max-width: 34ch;
  color: var(--text-muted);
  font-size: 1.125rem;
  line-height: 1.45;
}
.hero__name {
  display: block;
  color: var(--text);
  font-weight: 650;
  font-stretch: 112%;
  font-size: 1.25rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Sections */
.section { padding-block: var(--space-6) 0; }
.section__title {
  font-size: var(--fs-h2);
  font-weight: 650;
  font-stretch: 112%;
  line-height: 1.04;
  letter-spacing: -0.03em;
  max-width: 18ch;
}
.section__title .word { display: inline-block; will-change: transform, filter, opacity; }
.section__lede {
  margin-top: var(--space-2);
  max-width: 52ch;
  color: var(--text-muted);
  font-size: 1.125rem;
}

/* Tabs: glass segmented bar with a sliding highlight (HUYPHIU). */
.tabs { margin-top: var(--space-4); }
.tabs__bar {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--count), minmax(0, 1fr));
  max-width: 640px;
  padding: 6px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.tabs__indicator {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: calc((100% - 12px) / var(--count));
  border-radius: 999px;
  background: var(--glass-strong);
  border: 1px solid oklch(0.83 0.11 76 / 0.45);
}
.tabs__tab {
  position: relative;
  min-height: 46px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text-muted);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 200ms var(--ease-out);
}
.tabs__tab:hover { color: var(--text); }
.tabs__tab[aria-selected="true"] { color: var(--text); font-weight: 650; }
.tabs__panel { margin-top: var(--space-5); }
.tabs__panel[hidden] { display: none; }

.panel__note {
  max-width: 56ch;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}
.panel__caption {
  margin-top: var(--space-3);
  color: var(--text-faint);
  font-size: var(--fs-small);
}

/* Case: film, story and three scenes (Marlon Vier) */
.case + .case {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--hairline);
}
.case__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}
.case__couple {
  font-size: var(--fs-h3);
  font-weight: 650;
  font-stretch: 112%;
  letter-spacing: -0.02em;
  margin-right: auto;
}
.case__tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }

.case__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-block: var(--space-3) var(--space-3);
}
.case__meta dt,
.profile__sheet dt,
.craft__numbers dt {
  color: var(--text-faint);
  font-size: var(--fs-small);
}
.case__meta dd { font-weight: 500; }

.film {
  position: relative;
  display: block;
  width: 100%;
  cursor: pointer;
  text-align: left;
}
.film__poster {
  aspect-ratio: 16 / 9;
  transition: transform 500ms var(--ease-out), filter 500ms var(--ease-out);
}
.film:hover .film__poster { filter: brightness(1.08); }
.film__play {
  position: absolute;
  left: calc(var(--frame-pad) + var(--space-3));
  bottom: calc(var(--frame-pad) + var(--space-3));
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px 0 14px;
  border-radius: 999px;
  background: oklch(0.13 0.008 65 / 0.6);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-weight: 600;
  transition: transform 160ms var(--ease-out), background-color 200ms var(--ease-out);
}
.film__play svg { width: 22px; height: 22px; fill: var(--accent); }
.film__time { color: var(--text-muted); font-weight: 500; }
.film:hover .film__play { background: oklch(0.13 0.008 65 / 0.78); }
.film:active .film__play { transform: scale(0.97); }

.case__story {
  margin-top: var(--space-4);
  max-width: 62ch;
}
.case__story h4,
.process__title {
  font-size: var(--fs-h4);
  font-weight: 650;
  margin-bottom: var(--space-1);
}
.case__story p { color: var(--text-muted); }

.scenes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.scene video { aspect-ratio: 16 / 9; }
.scene p {
  margin-top: 10px;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* Teasers: three frames, the middle one offset down (HUYPHIU stagger). */
.teasers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: start;
}
.teasers li:nth-child(2) { margin-top: var(--space-5); }
.teaser {
  display: block;
  width: 100%;
  cursor: pointer;
  text-align: left;
}
.teaser video { aspect-ratio: 4 / 5; }
.teaser__label {
  display: flex;
  justify-content: space-between;
  padding: 12px 6px 4px;
  font-weight: 600;
}
.teaser__label span { color: var(--text-muted); font-weight: 500; }

/* Social cuts: vertical glass cards at staggered heights, client name below. */
.social {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: start;
}
.social__item:nth-child(even) { margin-top: var(--space-5); }
.social__card { display: block; width: 100%; cursor: pointer; }
.social__card video,
.social__card .social__still { aspect-ratio: 9 / 16; }
.social__client {
  margin-top: 10px;
  font-weight: 600;
}

/* About sheet */
.sheet {
  padding: clamp(16px, 3vw, 40px);
  border-radius: var(--radius-frame);
  background: oklch(0.13 0.008 65 / 0.55);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.sheet .tabs__panel { margin-top: var(--space-4); }

.profile {
  display: grid;
  grid-template-columns: minmax(200px, 0.8fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.profile__photo {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
}
.profile__photo-todo { color: var(--text-faint); font-size: var(--fs-small); }
.profile__text { display: grid; gap: var(--space-2); font-size: 1.125rem; }
.profile__text p + p { color: var(--text-muted); }
.profile__sheet { display: grid; gap: var(--space-2); }
.profile__sheet dd { font-weight: 500; }

.craft {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.craft__list { display: grid; gap: 22px; }
.stat {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 3ch;
  align-items: center;
  gap: var(--space-3);
}
.stat__bar {
  position: relative;
  height: 2px;
  background: var(--hairline);
}
.stat__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(var(--value));
  transition: transform 1100ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.stat.is-pending .stat__bar::after { transform: scaleX(0); transition: none; }
.stat__value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--accent);
}
.craft__numbers { display: grid; gap: var(--space-3); }
.craft__numbers dd {
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  font-weight: 650;
  font-stretch: 112%;
  line-height: 1.1;
}
.craft__unit { font-size: 1.125rem; font-weight: 500; font-stretch: 100%; color: var(--text-muted); }

.fineprint {
  margin-top: var(--space-2);
  color: var(--text-faint);
  font-size: 0.8125rem;
}

.toolkit__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
}
.tool h3 { font-size: 1.0625rem; font-weight: 650; margin-top: var(--space-2); }
.tool p { margin-top: 6px; color: var(--text-muted); font-size: 0.9375rem; }
/* App icons drawn in each app's own colors. */
.tool__mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  font-size: 1.375rem;
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: -0.02em;
}
.tool__mark--pr { background: #00005b; color: #9999ff; }
.tool__mark--ae { background: #00005b; color: #d291ff; }
.tool__mark--dr { background: #233a51; }
.tool__mark--dr img { width: 32px; height: 32px; }
.tool--wide {
  grid-column: 1 / -1;
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
}
.tool--wide h3 { margin-top: 0; }
.tool--wide p { max-width: 70ch; }

/* Services */
.services {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: var(--space-5) var(--space-6);
}
.deliverables { display: grid; gap: 0; }
.deliverable {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px var(--space-3);
  padding-block: var(--space-3);
}
.deliverable + .deliverable { border-top: 1px solid var(--hairline); }
.deliverable h3 { font-size: 1.25rem; font-weight: 650; font-stretch: 108%; }
.deliverable p { grid-column: 1; color: var(--text-muted); }
.deliverable__time {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--text-muted);
  font-size: var(--fs-small);
  white-space: nowrap;
}

.process { grid-column: 1 / -1; }
.process__steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.process__steps li {
  padding-top: var(--space-2);
  border-top: 1px solid var(--glass-line);
}
.process__num {
  display: block;
  font-weight: 650;
  font-stretch: 112%;
  color: var(--accent);
  margin-bottom: 6px;
}
.process__steps p { color: var(--text-muted); font-size: 0.9375rem; }

/* Contact */
.contact {
  position: relative;
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  overflow: hidden;
}
.contact__bg {
  position: absolute;
  inset: 0;
  background: url("assets/frames/contact.webp") center / cover no-repeat;
  opacity: 0.55;
}
.contact__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--bg) 0%, oklch(0.15 0.008 65 / 0.4) 35%, oklch(0.11 0.006 65 / 0.92) 100%);
}
.contact__inner { position: relative; padding-bottom: var(--space-6); }
.contact__title {
  font-size: clamp(2.75rem, 1.2rem + 6vw, 7rem);
  font-weight: 750;
  font-stretch: 118%;
  line-height: 0.98;
  letter-spacing: -0.035em;
  max-width: 12ch;
}
.contact__title .word { display: inline-block; will-change: transform, filter, opacity; }
.contact__lede { margin-top: var(--space-3); color: var(--text-muted); font-size: 1.125rem; }
.contact__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-4);
}
.contact__details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--fs-small);
}

/* Main call to action: a slow band of light passes over it every few seconds. */
.button--cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.button--cta::after {
  content: "";
  position: absolute;
  inset: -2px auto -2px 0;
  z-index: -1;
  width: 40%;
  background: linear-gradient(100deg, transparent, oklch(1 0 0 / 0.55), transparent);
  transform: translateX(-120%) skewX(-18deg);
  animation: cta-sheen 4.8s var(--ease-out) 1.8s infinite;
}
@keyframes cta-sheen {
  0% { transform: translateX(-120%) skewX(-18deg); }
  28%, 100% { transform: translateX(320%) skewX(-18deg); }
}

/* Floating "Contact Now" */
.float-cta {
  position: fixed;
  right: var(--gutter);
  bottom: calc(var(--gutter) * 0.6 + 8px);
  z-index: var(--z-header);
  opacity: 0;
  transform: translateY(16px) scale(0.96);
  pointer-events: none;
  transition: opacity 300ms var(--ease-out), transform 400ms var(--ease-out);
}
.float-cta.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.float-cta__button { min-height: 52px; padding: 0 26px; }
.float-cta__menu {
  inset: auto var(--gutter) calc(var(--gutter) * 0.6 + 72px) auto;
  margin: 0;
  min-width: 200px;
  padding: 6px;
  border-radius: var(--radius-frame);
  border: 1px solid var(--glass-line);
  background: oklch(0.16 0.008 65 / 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--text);
}
.float-cta__menu a {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 500;
}
.float-cta__menu a:hover { background: var(--glass-strong); }
.float-cta__menu:popover-open { animation: menu-in 220ms var(--ease-out); }
@keyframes menu-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
}

.site-footer {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-3);
  border-top: 1px solid var(--hairline);
  color: var(--text-faint);
  font-size: var(--fs-small);
}

/* Film player dialog */
.player {
  width: min(1280px, 100% - 2 * var(--gutter));
  max-width: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
}
.player::backdrop { background: oklch(0.08 0.004 65 / 0.88); backdrop-filter: blur(6px); }
.player__frame video,
.player__frame iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-media);
  background: var(--bg-deep);
}
.player form { display: flex; justify-content: flex-end; margin-top: 12px; }
.player--vertical { width: min(420px, 100% - 2 * var(--gutter), (100svh - 120px) * 9 / 16); }
.player--vertical .player__frame video,
.player--vertical .player__frame iframe { aspect-ratio: 9 / 16; }

/* Layout below desktop */
@media (max-width: 1080px) {
  .profile { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .profile__sheet { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .toolkit__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services { grid-template-columns: minmax(0, 1fr); }
  .process__steps { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

@media (max-width: 760px) {
  .site-header__nav { display: none; }
  .site-header__name { line-height: 1.2; }
  .site-header__company { display: block; font-size: 0.8125rem; }
  .site-header__sep { display: none; }
  .site-header .button { margin-left: auto; }
  .hero__video { object-position: 62% 30%; }
  .hero__foot { flex-direction: column; align-items: stretch; }
  .hero__actions .button { flex: 1; }
  /* The header already carries "Send a test project" on small screens. */
  .hero__actions .button--ghost { display: none; }
  .tabs__tab { font-size: var(--fs-small); padding: 0 6px; }
  .scenes { grid-template-columns: minmax(0, 1fr); }
  .teasers { grid-template-columns: minmax(0, 1fr); }
  .teasers li:nth-child(2) { margin-top: 0; }
  .teaser video { aspect-ratio: 16 / 9; }
  .social { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .social__item:nth-child(even) { margin-top: var(--space-4); }
  .profile, .craft { grid-template-columns: minmax(0, 1fr); }
  .profile__photo { max-width: 320px; }
  .stat { grid-template-columns: minmax(0, 1fr) 3ch; }
  .stat__bar { grid-column: 1 / -1; grid-row: 2; }
  .toolkit__list { grid-template-columns: minmax(0, 1fr); }
  .deliverable { grid-template-columns: minmax(0, 1fr); }
  .deliverable__time { grid-column: 1; grid-row: auto; }
  .site-footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button--cta::after { display: none; }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}