:root {
  --sec-pad: clamp(40px, 4.4vw, 60px);
  --land-gap: 32px;
  --nav-h: 76px;
  --hero-out: 7.4s;
}

@media (max-width: 760px) {
  :root { --nav-h: 66px; }
}

#top .hero {
  min-height: max(720px, 100svh);
  align-items: flex-end;
}
#top .hero:after {
  background:
    linear-gradient(90deg, rgba(17,17,16,.08) 0%, transparent 60%),
    linear-gradient(0deg, rgba(17,17,16,.72) 0%, rgba(17,17,16,.2) 27%, transparent 54%);
}
#top .hero-inner {
  width: 100%;
  margin-inline: 0;
  padding: 0 var(--gutter) 48px;
}
#top .pipeline-title {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .16em .28em;
  width: min(48vw, 940px);
  max-width: none;
  margin: 0;
  font-size: clamp(40px, 5.5vw, 80px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.04em;
}
#top .pipeline-word {
  display: inline-flex;
  align-items: center;
  gap: .1em;
  white-space: nowrap;
  font: inherit;
  letter-spacing: inherit;
}
#top .pipeline-word svg {
  display: block;
  width: .62em;
  height: .62em;
  min-width: 0;
  flex: none;
  fill: none;
  stroke: #c8b994;
  stroke-width: 1.3;
}
#top .pipeline-word svg path,
#top .pipeline-word svg circle {
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  animation: hero-icon-draw .7s ease-out calc(var(--beat) * .4s + .3s) forwards,
    hero-icon-exit .4s ease calc(var(--hero-out) + var(--beat) * .12s) forwards;
}
#top .pipeline-word > span {
  position: relative;
  display: inline-block;
  clip-path: polygon(0 0, 0 0, -14% 100%, 0 100%);
  animation: hero-word-in .75s cubic-bezier(.22, 1, .36, 1) calc(var(--beat) * .4s + .45s) forwards,
    hero-word-out .6s cubic-bezier(.22, 1, .36, 1) calc(var(--hero-out) + var(--beat) * .12s) forwards;
}
#top .pipeline-word > span::after {
  content: "";
  position: absolute;
  height: 1px;
  left: 0;
  right: 0;
  bottom: .04em;
  background: #c8b994;
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  animation: hero-line-sweep .48s ease calc(var(--beat) * .4s + .45s) forwards;
}
#top .hero-proof {
  width: max-content;
  max-width: 100%;
  margin: 18px 0 0;
  color: #eee9df;
  font: 11px/1.7 var(--mono);
  letter-spacing: .05em;
  animation: hero-proof-out .5s ease var(--hero-out) forwards;
}
#top .hero-bottom {
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-top: 30px;
}
#top .hero-bottom p { max-width: 420px; }
#top .hero-actions { flex-wrap: wrap; gap: 18px 24px; }
#top .hero-actions a:first-child {
  color: #f4f1ea;
  border-bottom-color: #c8b994;
}
#top .hero-actions a:last-child { color: rgba(244,241,234,.82); }

@keyframes hero-icon-draw { to { stroke-dashoffset: 0; } }
@keyframes hero-icon-exit { to { opacity: 0; } }
@keyframes hero-word-in {
  to { clip-path: polygon(0 0, 114% 0, 100% 100%, 0 100%); }
}
@keyframes hero-word-out {
  to { clip-path: polygon(114% 0, 114% 0, 100% 100%, 100% 100%); }
}
@keyframes hero-line-sweep {
  0% { transform: scaleX(0); transform-origin: left center; opacity: 1; }
  70% { transform: scaleX(1); transform-origin: left center; opacity: 1; }
  100% { transform: scaleX(0); transform-origin: right center; opacity: 0; }
}
@keyframes hero-proof-out { to { opacity: 0; } }
@keyframes hero-reduced-out { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  #top .pipeline-word svg path,
  #top .pipeline-word svg circle { animation: none; stroke-dashoffset: 0; }
  #top .pipeline-word > span {
    clip-path: none;
    animation: hero-reduced-out .5s ease 5s forwards;
  }
  #top .pipeline-word > span::after { animation: none; }
  #top .hero-proof { animation: hero-reduced-out .5s ease 5s forwards; }
}

#work, #about, #brands, #contact {
  padding-block: var(--sec-pad);
  scroll-margin-top: calc(var(--land-gap) - var(--sec-pad));
}
#work {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  display: grid;
  grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, 1440px) minmax(var(--gutter), 1fr);
}
#work > * {
  grid-column: 2;
  width: auto;
  margin-inline: 0;
  padding-inline: 0;
}
#work .filters { margin-bottom: 0; }
#work .work-intro { margin: 0 0 32px; }
#work .work-carousel { margin-top: 0; }
#work .carousel-track { padding-top: 14px; }
#brands .brands-copy {
  grid-template-columns: max-content minmax(0, 1fr);
  gap: clamp(24px, 4vw, 60px);
  margin-bottom: 48px;
}
#brands .brands-copy .eyebrow { margin-bottom: 24px; }
#brands .brands-copy h2 { margin: 0; }
#about { background: #1f1e1b; color: var(--paper); border-top: 1px solid #41413c; }
#about .about-heading h2 { margin: 24px 0 48px; }
#about .about-heading .cut-intro { margin: 0; }
#about .about-heading .local-time {
  grid-column: 2;
  grid-row: 3;
  font: 11px var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #a6a198;
  margin: 18px 0 0;
}
#about .local-time i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7fbf7f;
  margin-right: 10px;
  animation: pulse 2s infinite;
}
@keyframes pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { #about .local-time i { animation: none; } }

#contact .contact-head { margin-top: 0; }
[data-reveal] { transform: translateY(10px); }

@media (max-width: 900px) {
  #top .pipeline-title { width: min(62vw, 680px); }
  #brands .brands-copy { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 760px) {
  #top .hero-inner { padding-bottom: 38px; }
  #top .pipeline-title { width: 100%; max-width: 460px; gap: .13em .24em; }
  #top .hero-bottom { align-items: flex-start; flex-direction: column; gap: 20px; margin-top: 24px; }
  #top .hero-bottom p { max-width: 400px; }
  #top .hero-actions { gap: 18px 22px; }
}
@media (max-width: 430px) {
  #top .hero-inner { padding-bottom: 30px; }
  #top .pipeline-title { max-width: 340px; }
}

/* Keep the Work copy on the content grid while the film track reaches both edges. */
#work { --work-bg: #191917; --vignette-w: clamp(60px, 14vw, 260px); }
#work .work-carousel {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 0;
  position: relative;
}
#work .work-carousel::before,
#work .work-carousel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 56px;
  z-index: 3;
  width: var(--vignette-w);
  pointer-events: none;
}
#work .work-carousel::before {
  left: 0;
  background: linear-gradient(90deg, var(--work-bg) 0%, rgba(25,25,23,.55) 40%, rgba(25,25,23,0) 100%);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.6) 45%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.6) 45%, transparent 100%);
}
#work .work-carousel::after {
  right: 0;
  background: linear-gradient(270deg, var(--work-bg) 0%, rgba(25,25,23,.55) 40%, rgba(25,25,23,0) 100%);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  -webkit-mask-image: linear-gradient(270deg, #000 0%, rgba(0,0,0,.6) 45%, transparent 100%);
  mask-image: linear-gradient(270deg, #000 0%, rgba(0,0,0,.6) 45%, transparent 100%);
}
#work .carousel-slide {
  transition: opacity .4s, transform .55s var(--ease), filter .4s;
}
#work .carousel-slide:not(.is-active) { opacity: .42; filter: blur(1.5px) saturate(.8); }
#work .carousel-slide.is-active { opacity: 1; filter: none; }
#work .carousel-slide .carousel-media { cursor: default; }
#work .carousel-slide.is-active .carousel-media {
  cursor: pointer;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(244,241,234,.08);
}
#work .carousel-slide.is-active .carousel-media:hover {
  box-shadow: 0 28px 70px -22px rgba(0,0,0,.8), 0 0 0 1px rgba(244,241,234,.22);
}

/* Align About to the same 1440px content column and compact its timeline. */
#about > .wrap { width: min(100%, calc(1440px + 2 * var(--gutter))); max-width: none; }
#about .timeline-block {
  max-width: none;
  padding: 28px clamp(24px, 3vw, 44px) 24px;
}
#about .timeline-top { grid-area: top; }
#about .timeline-help { grid-area: help; margin: 12px 0 0; }
#about .timeline-rail { grid-area: rail; }
#about .timeline-clip { grid-area: clip; }
#about .timeline-clip h3 { color: #111; }
#about .about-closing {
  grid-area: closing;
  margin: 28px 0 0;
  padding-top: 18px;
  border-top: 1px solid #d8d4cc;
}
@media (min-width: 901px) {
  #about .timeline-block {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    grid-template-areas: "top clip" "help clip" "rail clip" "closing closing";
    column-gap: clamp(40px, 6vw, 96px);
    align-items: start;
  }
  #about .timeline-rail { margin-top: 56px; }
  #about .timeline-clip {
    align-self: center;
    min-height: 0;
    height: 160px;
    grid-template-columns: 1fr;
    gap: 10px;
    align-content: center;
    padding: 0 0 0 clamp(24px, 3vw, 44px);
    border-left: 1px solid #bbb5ab;
  }
  #about .timeline-clip h3 { margin: 0; }
  #about .timeline-clip p { margin: 0; max-width: 34ch; }
}
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  #about .timeline-scroll { min-height: 720px; }
  #about .timeline-block { top: calc(var(--nav-h) + 24px); }
}
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  #about .timeline-scroll { min-height: 0; }
  #about .timeline-block {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "help" "rail" "clip" "closing";
    column-gap: 0;
  }
  #about .timeline-rail { margin-top: 56px; }
  #about .timeline-clip {
    align-self: stretch;
    min-height: 0;
    height: 150px;
    grid-template-columns: 1fr;
    gap: 8px;
    align-content: center;
    padding: 18px 0 0;
    border-left: 0;
    border-top: 1px solid #bbb5ab;
  }
  #about .timeline-clip h3,
  #about .timeline-clip p { margin: 0; }
}
@media (max-width: 760px) {
  #work { --vignette-w: 36px; }
  #work .work-carousel::before,
  #work .work-carousel::after {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  #work .carousel-slide:not(.is-active) { filter: none; }
  #about .verb[data-step="0"] .verb-code { left: auto; right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #work .carousel-slide { transition: none; }
}

/* Contact possibilities: independent lines preserve Studio's line-by-line editing. */
#contact .contact-head { grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); }
#contact .contact-head > div:first-child { align-self:stretch; display:flex; flex-direction:column; justify-content:space-between; }
#contact .contact-lines { width:min(100%,460px); justify-self:end; align-self:end; list-style:none; padding:0; margin:0; }
#contact .contact-lines li { position:relative; border-bottom:1px solid #41413c; opacity:0; translate:0 14px; }
#contact .contact-lines li::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:#c7a17d; transform:scaleX(0); transform-origin:left; pointer-events:none; transition:transform .5s cubic-bezier(.22,1,.36,1); }
#contact .contact-line { display:flex; align-items:baseline; gap:18px; width:100%; padding:16px 0; border:0; background:none; color:#dedbd4; text-align:left; font:500 clamp(20px,1.65vw,30px)/1.2 var(--sans); letter-spacing:-.035em; }
#contact .contact-line-number { flex:none; color:#a6a198; font:11px var(--mono); letter-spacing:.06em; }
#contact .contact-line-text { display:block; transform-origin:left center; transition:transform .35s cubic-bezier(.22,1,.36,1),color .35s; white-space:nowrap; }
#contact .contact-lines li:last-child .contact-line-text { color:#c7a17d; font-family:var(--serif); font-style:italic; white-space:normal; }
#contact .contact-head.revealed .contact-lines li { animation:contactLineIn .7s cubic-bezier(.22,1,.36,1) var(--line-delay,200ms) both; }
@keyframes contactLineIn { to { opacity:1; translate:0 0; } }
@media (hover:hover) and (pointer:fine) {
  #contact .contact-lines:has(.contact-line:hover) .contact-line:not(:hover) .contact-line-text { color:#a6a198; }
  #contact .contact-line:hover .contact-line-text { color:#f4f1ea; transform:translateX(12px) scale(1.03); }
  #contact .contact-line:hover .contact-line-number { color:#c7a17d; }
  #contact .contact-lines li:has(.contact-line:hover)::after { transform:scaleX(1); }
}
@media (hover:none) {
  #contact .contact-line:active .contact-line-text { transform:scale(.97); }
}
@media (max-width:900px) {
  #contact .contact-head { grid-template-columns:minmax(0,1fr); }
  #contact .contact-lines { justify-self:start; width:min(100%,520px); }
}

/* Tools keep their existing typography and underline, with evenly spaced labels. */
#about .software-strip ul { gap:6px 32px; margin-left:0; }
#about .software-strip li { padding:10px 0; margin-right:0; opacity:0; translate:0 8px; }
#about .software-strip.revealed li { animation:toolLineIn .65s cubic-bezier(.22,1,.36,1) var(--tool-delay,100ms) both; }
#about .software-strip .tool-label { display:inline-block; transform-origin:left center; transition:transform .3s cubic-bezier(.22,1,.36,1),color .3s; }
@keyframes toolLineIn { to { opacity:1; translate:0 0; } }
@media (hover:hover) and (pointer:fine) {
  #about .software-strip li:hover { border-bottom-color:#c7a17d; }
  #about .software-strip li:hover .tool-label { color:#f4f1ea; transform:translateY(-4px) scale(1.04); }
}

/* The centre film reads as playable without obscuring its frame. */
#work .carousel-slide.is-active { position:relative; z-index:4; }
#work .carousel-slide .carousel-media { cursor:pointer; }
#work .carousel-slide .carousel-media img { opacity:1; }
#work .carousel-slide:not(.is-active) .carousel-media:hover { opacity:1; }
#work .carousel-slide:not(.is-active):hover { opacity:.7; }
#work .carousel-slide .carousel-play { position:absolute; z-index:5; left:50%; top:50%; width:64px; height:64px; border:1px solid rgba(244,241,234,.72); border-radius:50%; background:rgba(244,241,234,.14); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transform:translate(-50%,-50%) scale(.7); opacity:0; pointer-events:none; transition:opacity .35s,transform .55s cubic-bezier(.22,1,.36,1),background .3s; }
#work .carousel-slide .carousel-play::before { content:""; position:absolute; left:50%; top:50%; width:0; height:0; border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:16px solid #f4f1ea; transform:translate(-35%,-50%); }
#work .carousel-slide .carousel-play::after { content:""; position:absolute; inset:-1px; border:1px solid rgba(244,241,234,.55); border-radius:50%; opacity:0; transform:scale(1); }
#work .carousel-slide.is-portrait .carousel-play { width:52px; height:52px; }
#work .carousel-slide.is-active .carousel-media:focus-visible { outline:1px solid #c7a17d; outline-offset:4px; }
#work .carousel-slide.is-active .carousel-play { pointer-events:auto; }
#work .carousel-slide.is-active .carousel-media:focus-visible .carousel-play { opacity:1; transform:translate(-50%,-50%) scale(1); }
#work .carousel-slide.is-active .carousel-media:focus-visible img { filter:brightness(.84); }
#work .carousel-slide.is-active .carousel-media.is-opening .carousel-play { opacity:0; transform:translate(-50%,-50%) scale(1.4); }
#work .carousel-track.is-dragging, #work .carousel-track.is-dragging .carousel-media { cursor:grabbing; }
#work .carousel-track.is-dragging .carousel-play { opacity:0; }
#work .carousel-track.is-dragging .carousel-slide .carousel-media img { filter:none; transform:none; }
@media (hover:hover) and (pointer:fine) {
  #work .carousel-slide.is-active .carousel-media:hover img { opacity:1; filter:brightness(.83); transform:scale(1.035); }
  #work .carousel-slide.is-active .carousel-media:hover .carousel-play { opacity:1; transform:translate(-50%,-50%) scale(1); }
  #work .carousel-slide.is-active .carousel-media:hover .carousel-play::after { animation:playRing .9s ease-out 1; }
  #work .carousel-slide.is-active .carousel-media:hover::after { color:#f4f1ea; transform:translateX(6px); }
  #work .carousel-slide.is-active .carousel-media .carousel-play:hover { background:#f4f1ea; }
  #work .carousel-slide.is-active .carousel-media .carousel-play:hover::before { border-left-color:#191917; }
  #work .carousel-track.is-dragging .carousel-slide.is-active .carousel-media:hover img { filter:none; transform:none; }
  #work .carousel-track.is-dragging .carousel-slide.is-active .carousel-media:hover .carousel-play { opacity:0; }
}
@keyframes playRing { 15% { opacity:.65; } 100% { opacity:0; transform:scale(1.8); } }
@media (max-width:900px) { #work .carousel-slide .carousel-play { width:56px; height:56px; } }
@media (max-width:600px) { #work .carousel-slide .carousel-play { width:48px; height:48px; } }
@media (hover:none) {
  #work .carousel-slide.is-active .carousel-play { opacity:.7; transform:translate(-50%,-50%) scale(1); }
  #work .carousel-slide .carousel-media:hover img { filter:none; transform:none; opacity:1; }
  #work .carousel-slide.is-active .carousel-media:active .carousel-play { transform:translate(-50%,-50%) scale(.92); }
}
@media (prefers-reduced-motion:reduce) {
  #contact .contact-lines li, #about .software-strip li { opacity:1; translate:none; }
  #contact .contact-head.revealed .contact-lines li, #about .software-strip.revealed li { animation:none; }
  #contact .contact-line-text, #about .software-strip .tool-label { transition:color .2s; }
  #contact .contact-line:hover .contact-line-text, #contact .contact-line:active .contact-line-text, #about .software-strip li:hover .tool-label { transform:none; }
  #work .carousel-slide .carousel-play { transition:opacity .2s; transform:translate(-50%,-50%) scale(1); }
  #work .carousel-slide.is-active .carousel-media:hover img { transform:none; }
  #work .carousel-slide.is-active .carousel-media:hover .carousel-play::after { animation:none; }
  #work .carousel-slide.is-active .carousel-media:hover::after { transform:none; }
}