/* The director's contact sheet: real work, generous rhythm, restrained motion */
:root {
  --bg: #f4f5f7;
  --panel: #e9edf2;
  --ink: #18232f;
  --muted: #57616e;
  --line: #18232f24;
  --blue: #245bdf;
  --yellow: #c3d3ff;
  --gutter: clamp(1.15rem, 5vw, 6.5rem);
  --radius: 1rem;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}
body { background: var(--bg); background-image: none; }
html { scroll-padding-top: 0; }
.film-grain, .film-timecode, .creative-spine, [data-chapter]::before { display: none; }
.ambient { opacity: .035; }
.pointer-glow { width: 60rem; height: 60rem; background: radial-gradient(circle, #245bdf0f, transparent 65%); }
.reveal { opacity: 1; transform: none; }
.motion-enabled .reveal { opacity: 1; transform: none; }
.motion-enabled .reveal.is-visible { animation: quiet-reveal .65s var(--ease-out) both; }
@keyframes quiet-reveal { from { opacity: .72; translate: 0 .65rem; } to { opacity: 1; translate: 0 0; } }
.section { padding-block: clamp(2.8rem, 4.5vw, 4.6rem); }
.section[id], .site-footer[id] { scroll-margin-top: 6rem; }
.section-heading { grid-template-columns: minmax(0, 1fr) auto; margin-bottom: 1.55rem; gap: 1.5rem; padding-bottom: 1rem; }
.section-heading h2, .about-statement h2 { font-size: clamp(2.25rem, 4.1vw, 4.3rem); line-height: 1.08; letter-spacing: -.055em; text-transform: none; }
.section-heading::after { width: 4rem; height: 2px; background: var(--blue); }
.section-heading h2 { display: flex; align-items: center; gap: 1rem; }
.section-symbol { display: inline-flex; width: .72em; height: .72em; color: var(--blue); flex: none; }
.section-symbol svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.motion-enabled .section-heading.is-visible .section-symbol { animation: symbol-arrive 1.5s var(--ease-out) both; }
@keyframes symbol-arrive { from { transform: rotate(-90deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
:focus-visible { outline: 3px solid #245bdf; outline-offset: 5px; }
button, a { touch-action: manipulation; }

/* A compact navigation, with every destination visible on touch screens */
.site-header { grid-template-columns: auto 1fr auto; gap: 2rem; min-height: 5.25rem; padding-block: .9rem; background: #f4f5f7ed; }
.identity { gap: .65rem; }
.identity-mark { border-radius: .6rem; width: 2.2rem; height: 2.2rem; background: var(--blue); color: white; }
.identity-mark svg { width: 1.4rem; height: 1.4rem; }
.name-lockup strong { white-space: nowrap; font-size: 1.3rem; }
.nav-links { justify-self: end; border: 0; background: none; padding: 0; gap: .15rem; }
.nav-links a { min-height: 2.75rem; padding: .65rem .7rem; border-radius: .6rem; font-size: .875rem; }
.nav-links a:hover, .nav-links a:focus-visible { transform: none; background: #245bdf0c; color: var(--blue); }
.nav-links a.is-active { background: #245bdf; color: white; }
.nav-links a.is-active .nav-icon { color: white; }
.nav-links a:hover .nav-icon { color: inherit; }

/* The opening sequence is made of projects, not decorative stock imagery */
.hero { grid-template-columns: 1.04fr 1fr; gap: clamp(2rem, 4vw, 4rem); min-height: 0; max-width: 110rem; margin-inline: auto; padding-block: clamp(2.5rem, 4vw, 4.5rem); overflow: visible; }
.hero::before { content: ""; position: absolute; z-index: -1; width: min(60vw, 54rem); aspect-ratio: 1; right: 0; top: -12rem; pointer-events: none; background: radial-gradient(ellipse, #245bdf0b, transparent 66%); }
.hero-copy { padding-block: 1rem; }
.hero-role { margin: 0 0 2rem; font-size: .875rem; line-height: 1.5; letter-spacing: .075em; color: var(--muted); font-weight: 600; }
.hero-intro { font-size: clamp(2rem, 3.05vw, 3.55rem); line-height: 1.21; font-weight: 500; letter-spacing: -.045em; }
.hero-intro span { margin: 0; }
.hero-intro strong { margin-top: .45em; font-size: 1.02em; font-weight: 850; letter-spacing: -.055em; }
.hero-stop { position: relative; display: inline-block; font-style: normal; }
.hero-stop::after { content: ""; position: absolute; bottom: .025em; left: 0; right: 0; height: 2px; background: var(--ink); transform-origin: left; }
.motion-enabled.is-ready .hero-stop::after { animation: stop-line 950ms var(--ease-out) 450ms both; }
@keyframes stop-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero-signature { margin-top: 2.5rem; gap: .65rem; }
.hero-call { font-size: .95rem; font-weight: 800; letter-spacing: .03em; }
.hero-signature .hero-name { font-size: clamp(2.5rem, 3.4vw, 3.8rem); }
.hero-actions { margin-top: 1.5rem; }
.hero-actions .text-link { display: inline-flex; align-items: center; gap: .65rem; padding-block: .5rem; min-height: 2.75rem; font-size: 1rem; }
.hero-actions .text-link::after { content: ""; width: .7rem; height: .7rem; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .25s; }
.hero-actions .text-link:hover::after { transform: translateX(.2rem) rotate(45deg); }
.opening-board { --board-x: 0px; --board-y: 0px; display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 1rem; position: relative; padding: 1.75rem .75rem 1rem; perspective: 1200px; }
.opening-board::before { position: absolute; inset: 0 .2rem 1.5rem; content: ""; border: 1px solid #245bdf22; border-radius: 1.2rem; transform: rotate(-4deg); background: #e9edf7; z-index: -1; }
.opening-frame { position: relative; min-width: 0; margin: 0; padding: .4rem; background: #fff; border: 1px solid #18232f18; border-radius: .85rem; box-shadow: 0 .7rem 2rem #18232f0a; overflow: hidden; transition: transform .7s var(--ease-out), box-shadow .3s; }
.opening-board { grid-template-columns: 1.22fr .78fr; align-items: start; }
.opening-main { grid-column: 1; grid-row: 1; transform: translate3d(var(--board-x), var(--board-y), 0) rotate(-1.5deg); }
.opening-secondary { grid-column: 1; grid-row: 2; transform: translate3d(calc(var(--board-x) * -.7), 0, 0) rotate(-3deg); }
.opening-third { grid-column: 2; grid-row: 1 / 3; align-self: center; transform: translate3d(calc(var(--board-x) * -.5), var(--board-y), 0) rotate(3deg); }
.opening-main > img { width: 100%; height: auto; border-radius: .4rem; }
.opening-third .direct-player { border-radius: .5rem; box-shadow: none; }
.opening-third .direct-play { width: 2.75rem; height: 2.75rem; }
.opening-frame:hover, .opening-frame:focus-visible, .opening-frame:focus-within { transform: translateY(-.35rem); box-shadow: 0 1rem 2rem #18232f18; }
.frame-topline { display: flex; justify-content: space-between; align-items: center; padding: .35rem .5rem .7rem; font-size: .875rem; font-weight: 700; }
.frame-topline svg, .frame-caption svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.frame-topline svg { color: var(--blue); }
.opening-video { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #17232f; border-radius: .5rem; overflow: hidden; cursor: pointer; aspect-ratio: 16 / 9; }
.opening-video img { width: 100%; height: 100%; object-fit: contain; }
.opening-frame .inline-video { border: 0; border-radius: .5rem; }
.opening-secondary > img, .opening-third > img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; border-radius: .4rem; background: #edf1f8; }
.frame-caption { display: flex; align-items: center; justify-content: space-between; padding: .65rem .4rem .3rem; font-size: .875rem; font-weight: 700; }
.frame-caption svg { transition: transform .25s; }
.opening-frame:hover .frame-caption svg { transform: translate(2px, -2px); }
.opening-play { position: absolute; inset: auto auto .9rem .9rem; display: flex; align-items: center; gap: .4rem; padding: .6rem .9rem; border: 1px solid #ffffff50; border-radius: 2rem; color: #fff; background: #18232fdc; font-weight: 700; font-size: .875rem; backdrop-filter: blur(10px); transition: background .2s, transform .3s; }
.opening-play svg { width: 1rem; height: 1rem; fill: currentColor; }
.opening-video:hover .opening-play { background: var(--blue); transform: translateX(.15rem); }
.motion-enabled .opening-frame { opacity: 0; }
.motion-enabled.is-ready .opening-main { animation: frame-arrive 1s var(--ease-out) .1s both; }
.motion-enabled.is-ready .opening-secondary { animation: frame-arrive 1s var(--ease-out) .3s both; }
.motion-enabled.is-ready .opening-third { animation: frame-arrive 1s var(--ease-out) .45s both; }
@keyframes frame-arrive { from { opacity: 0; translate: 0 1.5rem; } to { opacity: 1; translate: 0 0; } }

/* First the work: three motion pieces, then a cinematic editorial grid */
#films { margin-inline: clamp(.5rem, 1.2vw, 1.25rem); padding-inline: calc(var(--gutter) - clamp(.5rem, 1.2vw, 1.25rem)); border-radius: 1.4rem; background: radial-gradient(circle at 90% 10%, #28466a, transparent 40%), #16232e; }
#films .section-symbol { color: #a6c0ff; }
#films .section-heading::after { background: #a6c0ff; }
#films .section-heading h2 { color: #fff; }
.film-grid { gap: .9rem; }
.motion-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.film-card { --frame-accent: #8faaff; }
.film-card:nth-child(3n + 2) { --frame-accent: #9ed4d0; }
.film-card:nth-child(3n) { --frame-accent: #e4a6c2; }
.youtube-embed {
  display: block;
  width: 100%;
  min-height: 200px;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: .7rem;
  background: #000;
  box-shadow: 0 .5rem 1.6rem #101c2c1f;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.youtube-embed:hover,
.youtube-embed:focus-visible {
  transform: translateY(-.2rem);
  box-shadow: 0 1rem 2.2rem #101c2c30;
}
.film-card > .video-trigger { z-index: 3; border-radius: .7rem; border: 1px solid #ffffff35; border-bottom: 3px solid var(--frame-accent); box-shadow: 0 .5rem 1.6rem #101c2c14; transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .4s; }
.film-card > .video-trigger:hover, .film-card > .video-trigger:focus-visible { transform: translateY(-.35rem); box-shadow: 0 1rem 2.2rem #101c2c30; border-color: var(--frame-accent); }
.film-card button img { object-fit: cover; transform: scale(1) !important; filter: none !important; image-rendering: auto; }
.film-card button:hover img { transform: scale(1.04) !important; }
.film-card button img[hidden] { display: none; }
.thumbnail-fallback { position: absolute; inset: 0; display: flex; align-items: end; padding: 1.25rem; background: linear-gradient(135deg, #223e60, #18232f); color: #d9e5ff; font-size: clamp(1.2rem, 2vw, 2rem); font-weight: 600; letter-spacing: -.02em; text-align: left; }
.film-shade { display: none; }
.motion-enabled .films .film-card::after { display: none; }
.motion-enabled .film-card.reveal, .motion-enabled .direct-card.reveal, .motion-enabled .still.reveal { transform: none; }
.video-trigger { position: relative; overflow: hidden; background: linear-gradient(135deg, #24446a, #17232f); }
.film-card .hover-slot { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .7rem; opacity: 0; pointer-events: none; transition: opacity .7s ease, transform .55s var(--ease-out); }
.film-card .hover-slot iframe { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; }
.film-card:hover .hover-slot { transform: translateY(-.35rem); }
.film-card.is-hover-preview .hover-slot { opacity: 1; }
.film-grid .film-card > .video-trigger.is-hover-preview { background: transparent; }
.film-card > .video-trigger.is-hover-preview img,
.film-card > .video-trigger.is-hover-preview .thumbnail-fallback { opacity: 0; }
.video-trigger.is-hover-preview .play-button { opacity: .55; transform: translate(-50%, -50%) scale(.83); }
.video-trigger .preview-label { position: absolute; z-index: 3; left: 1rem; bottom: 1rem; padding: .38rem .7rem; border: 1px solid #ffffff70; border-radius: 999px; background: #16232eb8; color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .015em; pointer-events: none; backdrop-filter: blur(8px); }
.film-card:nth-child(3n + 2) .video-trigger { background: linear-gradient(135deg, #39445c, #17232f); }
.film-card:nth-child(3n) .video-trigger { background: linear-gradient(135deg, #395271, #162b3a); }
.play-button-small { width: 3.25rem; height: 3.25rem; background: #f4f5f7ed; color: var(--ink); backdrop-filter: blur(8px); box-shadow: 0 0 0 .35rem color-mix(in srgb, var(--frame-accent), transparent 66%), 0 .2rem 1rem #0002; }
.play-button::before { display: none; }
.film-card button:hover .play-button { background: #fff; box-shadow: 0 0 0 .65rem #ffffff20; }
.film-card button:hover .play-button svg { animation: play-breathe 1.3s ease-in-out infinite alternate; }
@keyframes play-breathe { to { transform: translateX(.16rem) scale(1.1); } }
.film-card button::before, .image-trigger::before, .direct-player::after { display: none; }
.film-card > .inline-video { border: 2px solid var(--frame-accent); border-radius: .7rem; box-shadow: 0 .8rem 1.8rem #101c2c24; }
.opening-third .direct-player { outline: 2px solid #91cac2; outline-offset: 2px; }
.player-status { display: none; }
.film-card .inline-video .inline-close { position: absolute; z-index: 5; top: .6rem; right: .6rem; bottom: auto; left: auto; display: grid; place-items: center; width: 2.5rem; min-width: 2.5rem; height: 2.5rem; min-height: 2.5rem; padding: 0; aspect-ratio: 1; transform: none; border: 1px solid #ffffffb0; border-radius: 50%; background: #17232fe8; color: white; box-shadow: 0 .25rem 1rem #0006; cursor: pointer; }
.film-card .inline-video .inline-close:hover, .film-card .inline-video .inline-close:focus-visible { transform: none; background: #245bdf; border-color: #fff; }
.inline-close svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; }
#scenes { background: radial-gradient(circle at 88% 10%, #dbe7f8, transparent 34%), var(--bg); color: var(--ink); }
.scene-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .9rem; }
.scene-grid .film-card, .scene-grid .film-card:nth-child(n + 4) { grid-column: span 2; }
.scene-grid .film-card:nth-child(-n + 2) { grid-column: span 3; }
.scene-grid .film-card:last-child { width: auto; justify-self: stretch; }

/* One authored program, with each chapter immediately available. */
.programs {
  background: #101923;
  color: #f4f7fb;
  overflow: hidden;
}
.programs .section-heading { border-color: #ffffff24; }
.programs .section-heading h2 { color: #fff; }
.programs .section-heading::after { background: #8faaff; }
.programs .section-symbol { color: #8faaff; }
.program-row {
  display: grid;
  grid-template-columns: minmax(18rem, .88fr) minmax(24rem, 1.35fr);
  gap: clamp(.8rem, 1.5vw, 1.25rem);
  align-items: stretch;
}
.program-project {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  width: 100%;
  min-height: 22rem;
  padding: clamp(1.1rem, 2.5vw, 1.8rem);
  border: 1px solid #ffffff22;
  border-radius: 1.1rem;
  background: radial-gradient(circle at 8% 12%, #31548666, transparent 35%), #17232f;
  color: #f4f7fb;
  box-shadow: 0 1.4rem 3.5rem #03070d40;
  font: inherit;
  text-align: left;
  cursor: default;
  overflow: hidden;
  transition: transform .55s var(--ease-out), border-color .35s ease, box-shadow .55s var(--ease-out);
}
.program-project::before {
  position: absolute;
  inset: .6rem;
  border: 1px solid #ffffff0e;
  border-radius: .7rem;
  content: "";
  pointer-events: none;
}
.program-copy { position: relative; z-index: 1; padding: clamp(.5rem, 2vw, 1.5rem); }
.program-format {
  display: inline-flex;
  padding: .4rem .7rem;
  border: 1px solid #9cb7ff66;
  border-radius: 999px;
  color: #cbd8ff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.program-copy h3 {
  margin: 1.15rem 0 .6rem;
  font-family: var(--display);
  font-size: clamp(2.5rem, 5vw, 5.7rem);
  line-height: .9;
  letter-spacing: -.065em;
}
.program-copy p { margin: 0; color: #b8c4d0; font-size: 1rem; }
.program-card-footer { position: relative; z-index: 1; padding: 1rem 1.5rem 1.25rem; border-top: 1px solid #ffffff1c; color: #aebdca; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.episode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: clamp(.55rem, 1vw, .8rem); }
.episode-card {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid #ffffff20;
  border-radius: .72rem;
  background: #0a0f14;
  overflow: hidden;
  transition: transform .45s var(--ease-out), border-color .3s ease, box-shadow .45s var(--ease-out);
}
.episode-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; transform: scale(1.015); }
.episode-card .program-trigger { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: linear-gradient(180deg, transparent 55%, #07101b52); cursor: pointer; }
.episode-card .program-trigger::after { position: absolute; right: .7rem; bottom: .65rem; width: .55rem; height: .55rem; border-radius: 50%; background: #d6e0ff; box-shadow: 0 0 0 .28rem #d6e0ff24; content: ""; transition: transform .35s var(--ease-out), background .25s ease; }
.episode-card:hover, .episode-card:focus-visible { transform: translateY(-.35rem); border-color: #9cb7ff88; box-shadow: 0 1.1rem 2.5rem #03070d55; }
.episode-card:hover .program-trigger::after, .episode-card .program-trigger:focus-visible::after { transform: scale(1.35); background: #fff; }
.episode-card:has(.program-trigger:focus-visible) { outline: 2px solid #b8c9ff; outline-offset: 3px; }
.program-dialog { width: min(94vw, 76rem); }
.program-dialog-shell { padding: .75rem; }
.program-dialog-role { margin: .8rem .45rem .2rem; color: #aebdca; font-size: .875rem; }

/* The brand strip is a breath between the two film formats */
.partners { background: #fff; border-block: 1px solid var(--line); padding-block: .7rem; }
.section-kicker { padding-block: .4rem; border: 0; }
.section-kicker p { color: var(--muted); text-transform: none; letter-spacing: 0; font-size: .875rem; font-weight: 500; }
.logo-marquee { padding-block: .5rem .2rem; }
.logo-set figure { height: 5.3rem; width: 9rem; padding: .7rem; border: 0; border-radius: 0; box-shadow: none; background: white; }
.logo-set img { max-width: 7rem; max-height: 4rem; }
.direct-videos { background: linear-gradient(130deg, #e9eef5, #e0ebf4 58%, #e9e5ef); }
.direct-grid { max-width: 72rem; gap: .9rem; }
.direct-card { --reel-accent: #8faaff; padding: .32rem; border-radius: 1.1rem; background: linear-gradient(140deg, var(--reel-accent), #cdd9ef 55%, var(--reel-accent)); box-shadow: 0 .5rem 1.5rem #18232f14; transition: transform .4s var(--ease-out), box-shadow .4s; }
.direct-card:nth-child(2n) { --reel-accent: #8cc9c0; }
.direct-card:nth-child(3n) { --reel-accent: #d9a9c2; }
.direct-card:nth-child(4n) { --reel-accent: #b2b3e4; }
.direct-card:hover { transform: translateY(-.35rem); box-shadow: 0 1rem 2rem #18232f27; }
.direct-player { border-radius: .82rem; border: 0; box-shadow: none; }
.direct-card .direct-play { box-shadow: 0 0 0 .45rem color-mix(in srgb, var(--reel-accent), transparent 60%); }
.direct-player.is-previewing video { transform: none; filter: none; }
.direct-card:hover .direct-player { transform: translateY(-.3rem); }
.direct-play { width: 3.25rem; height: 3.25rem; background: #f4f5f7e8; }

/* Full artwork, gallery-style, grouped by real aspect ratio */
.stills { background: #fff; border: 0; }
.stills-grid {
  --stills-column-gap: clamp(.55rem, 1vw, .9rem);
  --stills-row-gap: clamp(.55rem, 1vw, .9rem);
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: var(--stills-row-gap) var(--stills-column-gap);
  align-items: start;
  max-width: 92rem;
  margin-inline: auto;
  transition: height .45s var(--ease-out);
}
.stills-grid .still, .stills-grid .still:nth-child(n) {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  grid-column: span 1;
  grid-row: auto;
}
.stills-grid.is-packed { display: flex; }
.stills-grid.is-packed .still,
.stills-grid.is-packed .still:nth-child(n) {
  position: relative;
  left: auto !important;
  top: auto !important;
  margin: 0;
  transition: width .45s var(--ease-out), opacity .65s ease;
}
.stills .image-trigger, .stills .still-portrait .image-trigger { aspect-ratio: auto; height: var(--still-media-height, auto); background: #edf0f4; border-radius: .5rem; }
.stills .image-trigger img { width: 100%; height: 100%; object-fit: contain; transform: none !important; filter: none !important; }
.still figcaption { padding-top: .72rem; flex-direction: row; gap: .75rem; align-items: baseline; border-top: 1px solid transparent; }
.still figcaption span { font-size: .875rem; color: var(--ink); font-weight: 700; letter-spacing: 0; text-transform: none; }
.still figcaption strong { font-size: .8125rem; font-weight: 400; color: var(--muted); text-align: right; }
.still .image-trigger { overflow: hidden; transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out); }
.still:hover .image-trigger { transform: translateY(-.22rem); box-shadow: 0 1rem 2.2rem #18232f14; }
.still-oil .image-trigger { box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .motion-enabled .film-grid:has(.film-card:hover) .film-card:not(:hover) > .video-trigger,
  .motion-enabled .film-grid:has(.film-card:hover) .film-card:not(:hover) > .inline-video,
  .motion-enabled .direct-grid:has(.direct-card:hover) .direct-card:not(:hover) .direct-player,
  .motion-enabled .stills-grid:has(.still:hover) .still:not(:hover) .image-trigger { opacity: .85; filter: none; }
}

/* Impact is a visual case, not another wall of copy */
.transformation { background: #edf1f7; border: 0; }
.case-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.case-intro .section-heading { display: block; border: 0; margin: 0; padding: 0; }
.case-intro .section-heading::before, .case-intro .section-heading::after { display: none; }
.case-intro .section-heading h2 { display: block; max-width: 11em; font-size: clamp(2.25rem, 3.4vw, 3.75rem); }
.eyebrow { font-size: .875rem; letter-spacing: .055em; font-weight: 600; }
.eyebrow > span { display: none; }
.case-result { justify-content: start; align-items: center; margin-top: 2.5rem; gap: 1rem; padding: 0; }
.case-result strong { font-size: clamp(3rem, 5.5vw, 5rem); line-height: 1; }
.case-result span { font-size: .875rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.case-summary { display: block; border: 0; background: none; border-radius: 0; margin: 2rem 0 0; max-width: 26rem; }
.case-summary p { background: none; padding: .75rem 0; font-size: 1rem; line-height: 1.55; border-top: 1px solid var(--line); }
.comparison-grid { width: min(100%, 29rem); gap: .9rem; }
.comparison-card { padding: .4rem; border: 1px solid #18232f16; border-radius: .8rem; box-shadow: 0 .8rem 2rem #18232f0a; }
.comparison-label { padding: .4rem .3rem .7rem; }
.comparison-label span { font-size: .875rem; text-transform: none; letter-spacing: 0; }
.comparison-after .comparison-label span { color: var(--blue); }
.comparison-image { border-radius: .4rem; }
.story-grid { width: 100%; gap: 1.25rem; margin-top: 2.5rem; }
.story-card { min-height: 0; padding: 1.75rem; border-radius: .9rem; border: 1px solid var(--line); }
.story-card-blue { background: #fff; color: var(--ink); }
.story-card-yellow { background: #e0e9f7; color: var(--ink); }
.story-card::after { display: none; }
.story-card img { width: 3.5rem; height: 3.5rem; padding: .3rem; border-radius: .5rem; }
.story-card p { margin: 1.5rem 0 .6rem; font-size: .875rem; opacity: 1; color: var(--muted); letter-spacing: 0; text-transform: none; }
.story-card h3 { max-width: 15em; font-size: clamp(1.5rem, 2.3vw, 2.25rem); text-transform: none; line-height: 1.13; letter-spacing: -.035em; }
.mini-case { margin: 1.75rem 0 0; gap: .75rem; }
.mini-case div { grid-template-columns: 5.5rem 1fr; border-color: var(--line); }
.mini-case dt { font-size: .75rem; opacity: 1; color: var(--muted); }
.mini-case dd { font-size: .9375rem; font-weight: 400; }

/* Three facts answer the client's first questions before the work begins. */
.proof-rail {
  display: grid;
  grid-template-columns: .8fr 1.4fr 1fr;
  max-width: 110rem;
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(2.8rem, 5vw, 5rem);
}
.proof-item {
  min-width: 0;
  padding: 1.15rem clamp(1rem, 2vw, 1.75rem);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.proof-item:first-child { padding-left: 0; }
.proof-item:last-child { border-right: 0; padding-right: 0; }
.proof-item span,
.proof-item small { display: block; color: var(--muted); font-size: .75rem; line-height: 1.45; }
.proof-item span { margin-bottom: .55rem; font-weight: 650; }
.proof-item strong { display: block; font-size: clamp(1rem, 1.5vw, 1.35rem); line-height: 1.25; letter-spacing: -.025em; }
.proof-item small { margin-top: .35rem; }

/* The person behind the work enters only after the work has spoken */
.about { grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); border: 0; }
.about-portrait { width: min(100%, 21rem); margin: 0; justify-self: center; padding: .5rem; border: 1px solid var(--line); border-radius: .85rem; background: #fff; }
.about-portrait img { width: 100%; height: auto; border-radius: .45rem; }
.about-portrait figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding: .8rem .4rem .3rem; font-size: .875rem; color: var(--muted); }
.about-portrait figcaption strong { color: var(--ink); font-weight: 500; }
.about-copy { align-self: initial; padding: 0; }
.about-statement { margin-bottom: 2rem; }
.about-statement h2 { font-size: clamp(2.2rem, 3.4vw, 3.75rem); line-height: 1.1; }
.about-copy p { font-size: 1.0625rem; line-height: 1.75; }
.capabilities { margin: 2rem 0 0; gap: 0; }
.capabilities li { min-height: 0; padding: 1rem 1rem 1rem 0; }
.capabilities li + li { padding-left: 1rem; }
.capabilities span { display: none; }
.capabilities strong { font-size: .875rem; text-transform: none; }
.capabilities p { font-size: .875rem; line-height: 1.65; margin: 0; }

/* The final invitation stays calm and unmistakable */
.site-footer { position: relative; background: #dde7f6; isolation: isolate; padding-top: clamp(4rem, 7vw, 7rem); }
.site-footer::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at var(--contact-x, 70%) 35%, #b9cdff88, transparent 55%); pointer-events: none; }
.footer-title { max-width: 15em; font-size: clamp(2.5rem, 5.3vw, 5.5rem); line-height: 1.07; text-transform: none; letter-spacing: -.045em; }
.footer-title em { display: inline-block; margin-top: .05em; }
.contact-links { margin-top: 3rem; gap: 1rem; }
.contact-links a { min-height: 6rem; border-radius: .75rem; background: #ffffff90; gap: .8rem; }
.contact-links a:hover { transform: translateY(-.25rem); background: white; box-shadow: 0 .6rem 1.5rem #18232f0a; }
.contact-links a:first-child { border-color: #245bdf45; background: #fff; }
.contact-detail small { font-size: .8125rem; letter-spacing: .04em; }
.contact-links strong { font-size: .9375rem; }
.contact-icon { width: 2.75rem; height: 2.75rem; border-radius: .6rem; }
.footer-meta { margin-top: 4rem; font-size: .8125rem; letter-spacing: 0; text-transform: none; }
.footer-meta a { min-height: 2.75rem; display: inline-flex; align-items: center; border: 0; }
.project-cta { min-width: 0; grid-template-columns: auto auto; gap: .6rem; padding: .45rem .9rem .45rem .45rem; background: #18232fef; box-shadow: 0 .4rem 1.5rem #18232f24; }
.project-cta small, .project-cta-line { display: none; }
.project-cta strong { margin: 0; font-size: .875rem; letter-spacing: 0; }
.project-cta-icon { width: 2.25rem; height: 2.25rem; }
.project-cta:hover { background: var(--blue); }
.dialog-shell header p, .dialog-close { font-size: .875rem; }
.dialog-close { min-height: 2.75rem; border-color: #ffffff40; }
#lightbox-caption { color: #b8c4d0; font-size: .9375rem; }

@media (max-width: 1120px) {
  .site-header { gap: 1rem; }
  .nav-icon { display: none; }
  .nav-links a { padding-inline: .7rem; }
  .hero { gap: 2rem; }
  .contact-links { grid-template-columns: 1fr 1fr; }
  .contact-links a:first-child { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  :root { --gutter: clamp(1.15rem, 4vw, 3rem); }
  .hero { grid-template-columns: 1fr 1fr; min-height: 0; padding-block: 3.5rem; }
  .hero-intro { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
  .hero-role { font-size: .8125rem; margin-bottom: 1.5rem; }
  .opening-board { gap: .65rem; padding-inline: 0; }
  .stills-grid { grid-template-columns: none; }
  .case-layout { gap: 2rem; }
  .direct-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; gap: .7rem; }
  .about { grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); gap: 2.5rem; }
  .program-row { grid-template-columns: minmax(16rem, .85fr) minmax(20rem, 1.15fr); }
  .capabilities { grid-template-columns: 1fr; }
  .capabilities li, .capabilities li + li { padding: .9rem 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .capabilities li:last-child { border: 0; }
}
@media (max-width: 760px) {
  .site-header { grid-template-columns: 1fr auto; gap: .6rem; min-height: 0; padding-block: .6rem; }
  .identity { grid-column: 1; grid-row: 1; }
  .identity-mark { display: none; }
  .name-lockup strong { font-size: 1.2rem; }
  .nav-links { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); width: 100%; gap: .15rem; border-radius: 0; }
  .nav-links a { justify-content: center; min-height: 2.75rem; padding: .4rem .1rem; font-size: .875rem; }
  .section[id], .site-footer[id] { scroll-margin-top: 7rem; }
  .hero { grid-template-columns: 1fr; padding-block: 2.25rem 2.75rem; gap: 1.5rem; }
  .hero-copy { padding: 0; max-width: none; }
  .hero-intro { font-size: clamp(1.9rem, 5.6vw, 2.65rem); line-height: 1.22; }
  .hero-role { font-size: .875rem; margin-bottom: 1.4rem; }
  .hero-signature { margin-top: 1.5rem; }
  .hero-signature .hero-name { font-size: 2.8rem; }
  .hero-actions { position: absolute; right: 0; bottom: 0; margin: 0; }
  .hero-actions .text-link { font-size: .9375rem; }
  .opening-board { width: min(100%, 34rem); justify-self: center; gap: .75rem; padding: .7rem .3rem .5rem; }
  .opening-main { transform: rotate(-1deg); }
  .opening-secondary { transform: rotate(-2deg); }
  .opening-third { transform: rotate(2deg); }
  .opening-board::before { transform: rotate(-2deg); inset: 0 0 .5rem; }
  .section { padding-block: 3.5rem; }
  .section-heading { margin-bottom: 1.75rem; padding-bottom: 1rem; }
  .section-heading h2, .about-statement h2 { font-size: clamp(2rem, 6vw, 3rem); }
  .proof-rail { grid-template-columns: 1fr 1fr; padding-bottom: 2.8rem; }
  .proof-item { padding: 1rem; }
  .proof-item:first-child { padding-left: 0; }
  .proof-item:nth-child(2) { border-right: 0; }
  .proof-item:last-child { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-left: 0; }
  .motion-grid { grid-template-columns: 1fr; gap: 1rem; }
  .scene-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .scene-grid .film-card:nth-child(n) { grid-column: auto; }
  .scene-grid .film-card:first-child { grid-column: 1 / -1; }
  .program-row { grid-template-columns: 1fr; }
  .program-project { min-height: 18rem; }
  .episode-card { min-height: 0; }
  .direct-grid { grid-template-columns: 1fr 1fr; max-width: 35rem; gap: 1rem; }
  .direct-card:hover .direct-player { transform: none; }
  .case-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .case-intro .section-heading h2 { max-width: none; font-size: clamp(2rem, 6vw, 3rem); }
  .case-result { margin-top: 1.75rem; }
  .case-summary { max-width: none; margin-top: 1.5rem; }
  .comparison-grid { width: min(100%, 25rem); gap: .6rem; }
  .story-grid { gap: 1rem; margin-top: 3rem; }
  .story-card { min-height: 0; padding: 1.5rem; }
  .story-card p { margin-top: 1.5rem; }
  .about { grid-template-columns: minmax(0, .65fr) minmax(0, 1fr); align-items: start; gap: 1.5rem; }
  .about-statement { margin-bottom: 1.5rem; }
  .about-copy p { font-size: 1rem; }
  .about-portrait { position: sticky; top: 8rem; }
  .about-portrait figcaption { font-size: .8125rem; }
  .project-cta { left: auto; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); grid-template-columns: auto auto; }
  .footer-meta { flex-direction: row; flex-wrap: wrap; align-items: center; }
}
@media (max-width: 480px) {
  .nav-links { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .1rem; }
  .nav-links a { min-height: 2.75rem; padding-block: .4rem; }
  .nav-icon { display: inline-grid; }
  .section[id], .site-footer[id] { scroll-margin-top: 9.7rem; }
  .site-header { gap: .3rem; }
  .hero { padding-top: 1.65rem; }
  .hero-intro { font-size: clamp(1.68rem, 6.4vw, 2rem); }
  .hero-role { font-size: .8125rem; margin-bottom: 1.2rem; }
  .hero-signature .hero-name { font-size: 2.45rem; }
  .hero-call { font-size: .8125rem; }
  .hero-actions { position: static; margin-top: 1rem; }
  .opening-board { gap: .65rem; }
  .opening-main { padding: .3rem; }
  .frame-topline { padding-block: .3rem .5rem; }
  .frame-caption { padding: .5rem .2rem .25rem; }
  .scene-grid { grid-template-columns: 1fr; }
  .scene-grid .film-card:first-child { grid-column: auto; }
  .program-project { min-height: 16rem; padding: .65rem; }
  .program-copy { padding: .75rem; }
  .program-copy h3 { font-size: clamp(2.4rem, 14vw, 3.5rem); }
  .program-copy p { font-size: .9rem; }
  .program-card-footer { padding: .8rem .75rem .9rem; }
  .episode-grid { gap: .45rem; }
  .episode-card { min-height: 0; border-radius: .6rem; }
  .direct-grid { gap: .65rem; }
  .direct-player { border-radius: .7rem; }
  .direct-play { width: 2.75rem; height: 2.75rem; }
  .stills-grid { --stills-column-gap: .45rem; --stills-row-gap: .75rem; grid-template-columns: none; gap: .75rem .45rem; }
  .still figcaption { display: block; padding-top: .55rem; }
  .still figcaption span,
  .still figcaption strong { display: block; font-size: .75rem; text-align: left; }
  .still figcaption strong { margin-top: .1rem; }
  .proof-rail { grid-template-columns: 1fr; padding-top: .25rem; }
  .proof-item,
  .proof-item:first-child,
  .proof-item:last-child { grid-column: auto; padding: .9rem 0; border-right: 0; }
  .story-grid { grid-template-columns: 1fr; }
  .mini-case div { grid-template-columns: 4.9rem 1fr; }
  .about { grid-template-columns: 1fr; gap: 2rem; }
  .about-portrait { position: static; width: min(65%, 15rem); justify-self: start; }
  .about-portrait figcaption { display: grid; }
  .about-copy { max-width: 100%; }
  .contact-links { grid-template-columns: 1fr; margin-top: 2rem; }
  .contact-links a:first-child { grid-column: auto; }
  .contact-links a { min-height: 5.5rem; padding: .9rem; gap: .75rem; }
  .contact-links strong { font-size: .875rem; }
  .footer-title { font-size: clamp(2rem, 8vw, 2.7rem); }
  .footer-meta { gap: .6rem 1.5rem; }
  .footer-meta a { width: 100%; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .site-header { position: relative; }
  .hero { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .hero-actions { position: static; margin-top: 1rem; }
  .hero-intro { font-size: 1.8rem; }
  .project-cta { bottom: .5rem; right: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .opening-frame { opacity: 1 !important; translate: none !important; }
  .hero-stop::after { transform: none; }
  .opening-main, .opening-secondary, .opening-third { transform: none; }
  .logo-track { transform: none; }
  .logo-marquee { overflow-x: auto; }
}