:root {
  --ink: #111111;
  --paper: #f7f7f5;
  --line: #c7c7c2;
  --muted: #70706c;
  --pad: clamp(22px, 4.2vw, 72px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  overflow-x: hidden;
}
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  height: 88px;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(17,17,17,.1);
}
.brand { width: 102px; height: 42px; display: block; overflow: hidden; text-decoration: none; }
.brand-crop { width: 100%; height: 100%; display: block; overflow: hidden; position: relative; }
.brand img { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: contain; filter: grayscale(1) contrast(1.2); }
nav { display: flex; gap: clamp(18px, 3vw, 42px); }
nav a, .eyebrow, .work-meta, .counter, .swipe-note, footer {
  font-family: Arial, "Helvetica Neue", sans-serif;
  letter-spacing: .12em;
}
nav a { font-size: .72rem; text-decoration: none; }
nav a:hover { text-decoration: underline; text-underline-offset: 5px; }

.hero {
  position: relative;
  min-height: 100svh;
  padding: 88px var(--pad) 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.eyebrow { margin: 0 0 30px; font-size: .73rem; color: var(--muted); }
.hero h1, .works h2, .about h2, .contact h2 {
  margin: 0;
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: 1.18;
}
.logo-stage {
  position: relative;
  z-index: 2;
  width: min(76vw, 980px);
  opacity: 0;
  transform: translateY(20px) scale(.97);
  animation: logo-arrive 1.25s cubic-bezier(.2,.75,.2,1) 1.05s forwards;
}
.logo-stage::before { content: ""; position: absolute; inset: 15% 8% -10%; z-index: -1; background: rgba(0,0,0,.14); filter: blur(52px); transform: perspective(500px) rotateX(68deg); opacity: 0; animation: shadow-arrive 1.4s ease 1.3s forwards; }
.logo-film { display: block; width: 100%; background: var(--paper); mix-blend-mode: multiply; }
.intro-wipe { position: absolute; inset: 0; z-index: 5; pointer-events: none; animation: wipe-away .05s linear 1.25s forwards; }
.intro-wipe span { position: absolute; inset: 0; }
.wipe-light { background: #f7f7f5; clip-path: polygon(0 0,100% 0,0 100%); animation: split-light 1.25s cubic-bezier(.76,0,.24,1) forwards; }
.wipe-dark { background: #0a0a0a; clip-path: polygon(100% 0,100% 100%,0 100%); animation: split-dark 1.25s cubic-bezier(.76,0,.24,1) forwards; }
.intro-wipe > i { position: absolute; left: -15%; top: 50%; width: 130%; height: 1px; background: #8d8d89; transform: rotate(-29deg) scaleX(0); animation: line-draw .75s ease .12s forwards, line-fade .35s ease .9s forwards; }
.scroll-cue { position: absolute; z-index: 3; bottom: 28px; right: var(--pad); display: flex; align-items: center; gap: 16px; font-family: Arial, sans-serif; font-size: .62rem; letter-spacing: .16em; text-decoration: none; opacity: 0; animation: fade-in .7s ease 2s forwards; }
.scroll-cue i { width: 54px; height: 1px; background: var(--ink); transform-origin: left; transition: transform .3s; }
.scroll-cue:hover i { transform: scaleX(1.35); }
@keyframes split-light { to { transform: translate(-70%,-70%); } }
@keyframes split-dark { to { transform: translate(70%,70%); } }
@keyframes line-draw { to { transform: rotate(-29deg) scaleX(1); } }
@keyframes line-fade { to { opacity: 0; } }
@keyframes wipe-away { to { visibility: hidden; } }
@keyframes logo-arrive { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes shadow-arrive { to { opacity: 1; } }
@keyframes fade-in { to { opacity: 1; } }

.works { padding: 130px 0 140px; border-bottom: 1px solid var(--line); }
.section-heading { padding: 0 var(--pad) 230px; display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 32px; }
.section-heading h2 { font-size: clamp(2.8rem, 6vw, 5.5rem); }
.section-heading p { margin: 0; max-width: 540px; font-size: 1rem; line-height: 2; }
.gallery-shell { position: relative; }
.gallery {
  perspective: 1400px;
  display: flex;
  gap: clamp(18px, 2.6vw, 42px);
  padding: 0 max(var(--pad), calc((100vw - 1420px) / 2));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  cursor: grab;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery.dragging { cursor: grabbing; scroll-snap-type: none; }
.work-card { flex: 0 0 min(80vw, 1080px); scroll-snap-align: center; user-select: none; transform: rotateY(7deg) translateY(24px) scale(.94); transform-origin: center; opacity: .56; transition: transform .75s cubic-bezier(.2,.75,.2,1), opacity .55s ease; }
.work-card.is-active { transform: rotateY(0) translateY(0) scale(1); opacity: 1; }
.work-card.is-before { transform: rotateY(9deg) translateY(26px) scale(.93); transform-origin: right center; }
.work-card.is-after { transform: rotateY(-9deg) translateY(26px) scale(.93); transform-origin: left center; }
.movie-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: transparent; filter: drop-shadow(0 30px 34px rgba(0,0,0,.2)); transition: width .4s ease, aspect-ratio .4s ease; }
.movie-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.movie-frame video { display: block; width: 100%; height: 100%; border: 0; object-fit: contain; background: transparent; filter: grayscale(1); transition: filter .5s ease; }
.movie-frame.is-portrait { width: min(46vw, 460px); margin-inline: auto; }
.work-card:hover video, .work-card:focus-within video, .work-card.is-playing video { filter: grayscale(.08); }
.work-copy { padding: 27px 2px 0; }
.work-meta { display: flex; gap: 22px; font-size: .7rem; color: var(--muted); }
.work-meta span:first-child { color: var(--ink); }
.work-copy h3 { margin: 22px 0 18px; font-weight: 400; font-size: clamp(1.7rem, 3vw, 3rem); letter-spacing: -.04em; }
.work-copy p { margin: 0; max-width: 780px; font-size: 1rem; line-height: 2; color: #393936; }
.gallery-controls { padding: 48px var(--pad) 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.counter { display: flex; align-items: center; gap: 13px; font-size: .75rem; }
.counter i { width: 54px; height: 1px; background: var(--line); }
.swipe-note { margin: 0; font-size: .65rem; color: var(--muted); }
.arrows { justify-self: end; display: flex; gap: 8px; }
.arrows button { width: 54px; height: 54px; border: 1px solid var(--ink); border-radius: 50%; background: transparent; color: var(--ink); font-size: 1.25rem; cursor: pointer; transition: .2s ease; }
.arrows button:hover { color: var(--paper); background: var(--ink); }
.arrows button:focus-visible, .gallery:focus-visible, a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.about { padding: 140px var(--pad); border-bottom: 1px solid var(--line); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
.about h2 { font-size: clamp(3.6rem, 7vw, 7.2rem); }
.about-grid > div > p { margin: 12px 0 70px; max-width: 620px; font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 2.1; }
dl { margin: 0; border-top: 1px solid var(--line); }
dl div { display: grid; grid-template-columns: 120px 1fr; padding: 22px 0; border-bottom: 1px solid var(--line); }
dt { font-family: Arial, sans-serif; font-size: .7rem; letter-spacing: .14em; color: var(--muted); }
dd { margin: 0; font-size: 1.05rem; }
dd small { margin-left: 12px; color: var(--muted); }

.contact { min-height: 80vh; padding: 140px var(--pad); display: flex; flex-direction: column; justify-content: center; background: var(--ink); color: var(--paper); }
.contact .eyebrow { color: #999; }
.contact h2 { font-size: clamp(3rem, 7.5vw, 7.5rem); }
.contact-links { margin-top: 80px; display: flex; flex-direction: column; border-top: 1px solid #555; }
.contact-links a { display: flex; justify-content: space-between; padding: 22px 0; border-bottom: 1px solid #555; font-family: Arial, sans-serif; font-size: clamp(1rem, 2vw, 1.35rem); text-decoration: none; }
.contact-links a span { transition: transform .2s; }
.contact-links a:hover span { transform: translate(4px, -4px); }
footer { padding: 28px var(--pad); display: flex; justify-content: space-between; background: var(--ink); color: #aaa; font-size: .65rem; border-top: 1px solid #333; }

@media (max-width: 760px) {
  .site-header { height: 72px; }
  .brand { width: 78px; height: 34px; }
  nav { gap: 16px; }
  nav a { font-size: .62rem; }
  .hero { padding-top: 72px; }
  .logo-stage { width: min(94vw, 700px); }
  .works { padding: 100px 0; }
  .section-heading { grid-template-columns: 1fr; padding-bottom: 170px; }
  .work-card { flex-basis: 87vw; }
  .movie-frame.is-portrait { width: min(72vw, 430px); }
  .work-copy h3 { font-size: 1.65rem; }
  .work-copy p { line-height: 1.85; }
  .gallery-controls { padding-top: 34px; grid-template-columns: 1fr 1fr; }
  .swipe-note { display: none; }
  .arrows button { width: 46px; height: 46px; }
  .about { padding-block: 100px; }
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .about-grid > div > p { margin-top: 0; }
  dl div { grid-template-columns: 90px 1fr; }
  dd small { display: block; margin: 5px 0 0; }
  .contact { min-height: 72vh; padding-block: 110px; }
  .contact-links { margin-top: 60px; }
  footer { gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Full-screen monochrome identity film */
.hero { padding: 0; isolation: isolate; background: #0a0a0a; }
.hero-film { position: absolute; inset: -2%; width: 104%; height: 104%; object-fit: cover; filter: grayscale(1) contrast(1.12); z-index: -3; animation: hero-film-in 1.1s ease both; }
.hero-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(120deg, rgba(255,255,255,.08), transparent 42%, rgba(0,0,0,.13)); }
.logo-stage { width: min(64vw, 840px); position: relative; opacity: 1; transform: none; animation: none; }
.logo-stage::before { display: none; }
.logo-stage img { display: block; width: 100%; opacity: 0; clip-path: inset(0 100% 0 0); filter: grayscale(1) contrast(1.25); animation: logo-reveal 1.4s cubic-bezier(.2,.8,.2,1) .95s forwards, logo-breathe 7s ease-in-out 2.5s infinite; }
.logo-trace { position: absolute; z-index: 2; top: 9%; bottom: 8%; left: 0; width: 1px; background: linear-gradient(transparent, #111 15%, #fff 50%, #111 85%, transparent); box-shadow: 0 0 14px rgba(255,255,255,.9), 0 0 28px rgba(0,0,0,.25); opacity: 0; animation: trace-logo 1.4s cubic-bezier(.2,.8,.2,1) .95s forwards; }
@keyframes hero-film-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }
@keyframes logo-reveal { 0% { opacity: 0; clip-path: inset(0 100% 0 0); } 10% { opacity: 1; } 100% { opacity: 1; clip-path: inset(0); } }
@keyframes trace-logo { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes logo-breathe { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-7px) scale(1.008); } }

/* Liquid glass works stage */
.works { position: relative; isolation: isolate; overflow: hidden; color: #f8f8f6; background: radial-gradient(circle at 14% 18%, rgba(255,255,255,.19), transparent 25%), radial-gradient(circle at 86% 58%, rgba(255,255,255,.12), transparent 29%), linear-gradient(145deg, #090909 0%, #202123 49%, #080808 100%); }
.works::before, .works::after { content: ""; position: absolute; z-index: -1; width: 34vw; aspect-ratio: 1; border-radius: 50%; filter: blur(80px); opacity: .22; pointer-events: none; }
.works::before { left: -12vw; top: 18%; background: #fff; }
.works::after { right: -14vw; bottom: 7%; background: #777b82; }
.works .eyebrow, .works .section-heading p { color: rgba(255,255,255,.62); }
.gallery-shell { padding: 0 var(--pad); }
.gallery { width: min(1420px, 100%); margin: 0 auto; padding: 24px 0 80px; display: grid; grid-template-columns: repeat(12, 1fr); align-items: start; gap: clamp(22px, 3vw, 48px); overflow: visible; scroll-snap-type: none; cursor: default; perspective: 1600px; }
.work-card { --rx: 0deg; --ry: 0deg; position: relative; flex: none; padding: clamp(14px, 1.6vw, 24px); border: 1px solid rgba(255,255,255,.28); border-radius: clamp(28px, 3vw, 46px); background: linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,.06) 48%, rgba(255,255,255,.12)), rgba(255,255,255,.045); box-shadow: inset 0 1px 1px rgba(255,255,255,.65), inset 0 -1px 0 rgba(255,255,255,.08), 0 35px 75px rgba(0,0,0,.44), 0 4px 16px rgba(0,0,0,.35); backdrop-filter: blur(28px) saturate(145%); -webkit-backdrop-filter: blur(28px) saturate(145%); transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry)); transform-origin: center; opacity: 1; transition: transform .18s ease-out, border-color .35s ease, box-shadow .35s ease; scroll-snap-align: unset; }
.work-card::before { content: ""; position: absolute; inset: 1px; border-radius: inherit; background: linear-gradient(120deg, rgba(255,255,255,.22), transparent 32%, transparent 68%, rgba(255,255,255,.1)); pointer-events: none; }
.work-card::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: -34px; height: 42px; border-radius: 50%; background: rgba(0,0,0,.58); filter: blur(22px); z-index: -1; }
.work-card:hover, .work-card:focus-within { border-color: rgba(255,255,255,.56); box-shadow: inset 0 1px 1px #fff, 0 45px 95px rgba(0,0,0,.56), 0 6px 22px rgba(0,0,0,.38); }
.work-card:nth-child(1) { grid-column: 1 / span 7; }
.work-card:nth-child(2) { grid-column: 8 / span 5; margin-top: 150px; }
.work-card:nth-child(3) { grid-column: 1 / span 5; margin-top: -20px; }
.work-card:nth-child(4) { grid-column: 6 / span 7; margin-top: 120px; }
.movie-frame { width: 100%; filter: none; border-radius: clamp(20px, 2.3vw, 34px); overflow: hidden; background: rgba(0,0,0,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 16px 34px rgba(0,0,0,.3); }
.movie-frame.is-portrait { width: min(100%, 420px); }
.movie-frame video { object-fit: cover; filter: grayscale(1) contrast(1.04); }
.work-copy { position: relative; z-index: 1; padding: 26px 9px 8px; }
.work-meta { color: rgba(255,255,255,.56); }
.work-meta span:first-child { color: #fff; }
.work-copy h3 { color: #fff; font-size: clamp(1.5rem, 2.3vw, 2.5rem); }
.work-copy p { color: rgba(255,255,255,.7); font-size: .95rem; }

@media (max-width: 800px) {
  .logo-stage { width: 90vw; }
  .gallery-shell { padding: 0 var(--pad); }
  .gallery { display: flex; flex-direction: column; gap: 34px; padding-top: 0; }
  .work-card, .work-card:nth-child(n) { width: 100%; margin-top: 0; transform: none; }
  .movie-frame.is-portrait { width: min(78%, 390px); }
}

/* Use the supplied reference timing exactly */
.logo-complete,
.logo-lockup::after { display: none; }
.logo-reference-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border: 0; background: transparent; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.18); }

/* Portrait media keeps its own silhouette; copy sits beside it */
.work-card.is-portrait-card { width: min(55vw, 570px); display: grid; grid-template-columns: minmax(190px, 235px) 1fr; align-items: center; column-gap: 18px; }
.work-card.is-portrait-card .movie-frame { width: 100%; height: 430px; aspect-ratio: 9 / 16 !important; margin: 0; border-radius: 25px; }
.work-card.is-portrait-card .movie-frame video { width: 100%; height: 100%; object-fit: cover; }
.work-card.is-portrait-card .work-copy { align-self: center; padding: 18px 8px 18px 4px; }
.work-card.is-portrait-card .work-meta { flex-direction: column; gap: 7px; }
.work-card.is-portrait-card .work-copy h3 { font-size: clamp(1.35rem, 1.8vw, 1.75rem); line-height: 1.45; }
.work-card.is-portrait-card .work-copy p { font-size: .82rem; line-height: 1.75; }

@media (max-width: 800px) {
  .work-card.is-portrait-card { width: min(82vw, 460px); grid-template-columns: minmax(155px, 195px) 1fr; column-gap: 12px; }
  .work-card.is-portrait-card .movie-frame { height: 390px; }
  .work-card.is-portrait-card .work-copy h3 { font-size: 1.2rem; }
}

/* Refined logo reveal and compact carousel */
.logo-slice { display: none; }
.logo-complete {
  opacity: 0;
  clip-path: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0 58%, transparent 78%);
  mask-image: linear-gradient(90deg, #000 0 58%, transparent 78%);
  -webkit-mask-size: 240% 100%;
  mask-size: 240% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  filter: grayscale(1) contrast(1.25) blur(5px);
  animation: gradual-logo-reveal 2.15s cubic-bezier(.2,.75,.2,1) .78s forwards;
}
.logo-lockup::after { content: ""; position: absolute; left: 4%; right: 5%; bottom: 11%; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,0,0,.65), transparent); transform: scaleX(0); opacity: 0; animation: logo-ground-line 1.7s ease 1.35s forwards; }
.hero-service { position: absolute; z-index: 4; left: var(--pad); top: 122px; display: flex; align-items: baseline; gap: 16px; opacity: 0; transform: translateX(-14px); animation: hero-service-in .8s ease 1.8s forwards; }
.hero-service em { font-style: normal; font-size: clamp(1rem, 1.45vw, 1.25rem); letter-spacing: .24em; }
.hero-service small { font: 600 .58rem/1 Arial,sans-serif; letter-spacing: .26em; opacity: .55; }
@keyframes gradual-logo-reveal {
  0% { opacity: 0; -webkit-mask-position: 100% 0; mask-position: 100% 0; filter: grayscale(1) contrast(1.25) blur(5px); transform: scale(.985); }
  18% { opacity: 1; }
  100% { opacity: 1; -webkit-mask-position: 0 0; mask-position: 0 0; filter: grayscale(1) contrast(1.25) blur(0); transform: scale(1); }
}
@keyframes logo-ground-line { 0% { opacity: 0; transform: scaleX(0); } 25% { opacity: 1; } 100% { opacity: .35; transform: scaleX(1); } }
@keyframes hero-service-in { to { opacity: 1; transform: translateX(0); } }

.works { min-height: 930px; }
.gallery { width: min(90vw, 1120px); height: 565px; }
.work-card, .work-card:nth-child(n) { top: 18px; width: min(55vw, 570px); height: 475px; padding: 15px; border-radius: 32px; }
.work-card.is-portrait-card { width: min(34vw, 355px); }
.movie-frame { height: 285px; border-radius: 22px; }
.work-card.is-portrait-card .movie-frame { height: 350px; }
.work-card.is-portrait-card .movie-frame video { width: 100%; height: 100%; object-fit: cover; }
.work-card.is-portrait-card .work-copy { padding-top: 14px; }
.work-card.is-portrait-card .work-copy h3 { font-size: 1.45rem; margin-top: 11px; }
.work-card.is-portrait-card .work-copy p { font-size: .85rem; line-height: 1.7; }
.carousel-controls { bottom: 6px; }

@media (max-width: 800px) {
  .hero-service { top: 96px; gap: 9px; }
  .hero-service small { display: none; }
  .works { min-height: 830px; }
  .gallery { height: 555px; }
  .work-card, .work-card:nth-child(n) { width: min(78vw, 470px); height: 455px; }
  .work-card.is-portrait-card { width: min(62vw, 340px); }
  .movie-frame { height: 270px; }
  .work-card.is-portrait-card .movie-frame { height: 330px; }
}

/* Service title and stronger glass/reflection */
.logo-lockup > small { display: none; }
.logo-service { position: absolute; right: 7%; bottom: -1%; display: flex; align-items: baseline; gap: 18px; opacity: 0; transform: translateY(12px); animation: service-title-in .9s cubic-bezier(.2,.8,.2,1) 1.9s forwards; }
.logo-service::before { content: ""; position: absolute; left: -46px; top: 50%; width: 32px; height: 1px; background: #111; transform: scaleX(0); transform-origin: right; animation: service-line-in .6s ease 2.1s forwards; }
.logo-service em { font-style: normal; font-size: clamp(1rem, 1.5vw, 1.28rem); letter-spacing: .2em; white-space: nowrap; }
.logo-service small { position: static; font: 600 .62rem/1 Arial,sans-serif; letter-spacing: .28em; opacity: .58; animation: none; }
@keyframes service-title-in { to { opacity: 1; transform: translateY(0); } }
@keyframes service-line-in { to { transform: scaleX(1); } }

.works { background: radial-gradient(circle at 50% 10%, rgba(255,255,255,1) 0 12%, transparent 38%), radial-gradient(circle at 12% 50%, rgba(255,255,255,.85), transparent 27%), radial-gradient(circle at 88% 64%, rgba(191,225,244,.88), transparent 30%), linear-gradient(155deg, #edf7fc 0%, #d5e8f2 38%, #fbfdfe 68%, #cbdde7 100%); }
.gallery-shell::before { content: ""; position: absolute; left: -12vw; right: -12vw; bottom: 42px; height: 310px; z-index: -1; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.78)); border-top: 1px solid rgba(255,255,255,.95); box-shadow: inset 0 35px 70px rgba(255,255,255,.5), 0 -28px 90px rgba(255,255,255,.5); transform: perspective(900px) rotateX(67deg); transform-origin: bottom; }
.gallery-shell::after { content: ""; position: absolute; left: 17%; right: 17%; bottom: 58px; height: 150px; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse, rgba(86,132,156,.25), transparent 70%); filter: blur(18px); }
.work-card, .work-card:nth-child(n) { background: linear-gradient(135deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.48) 35%, rgba(206,232,246,.28) 58%, rgba(255,255,255,.68) 100%); border-color: rgba(255,255,255,.96); box-shadow: inset 2px 2px 3px rgba(255,255,255,1), inset -2px -2px 4px rgba(105,148,171,.13), 0 34px 80px rgba(62,105,128,.25), 0 8px 24px rgba(67,105,125,.14); -webkit-box-reflect: below 28px linear-gradient(to bottom, transparent 72%, rgba(255,255,255,.13)); }
.work-card::before { inset: 2px; background: linear-gradient(112deg, rgba(255,255,255,.9), transparent 18%, transparent 46%, rgba(255,255,255,.38) 51%, transparent 57%, rgba(255,255,255,.32)); background-size: 230% 100%; background-position: 100% 0; opacity: .75; transition: background-position .9s cubic-bezier(.2,.8,.2,1), opacity .4s; }
.work-card[data-position="center"]:hover::before, .work-card[data-position="center"]:focus-within::before { background-position: 0 0; opacity: 1; }
.work-card.is-portrait-card { width: min(42vw, 470px); }
.movie-frame { border: 1px solid rgba(255,255,255,.94); background: linear-gradient(145deg, rgba(255,255,255,.65), rgba(204,228,240,.34)); box-shadow: inset 0 1px 2px #fff, inset 0 -1px 2px rgba(90,136,158,.13), 0 18px 42px rgba(72,110,130,.2); }
.movie-frame.is-portrait video { width: auto; max-width: 100%; margin-inline: auto; }
.work-copy p { filter: blur(8px); letter-spacing: .06em; transition: max-height .55s ease, margin .42s ease, opacity .45s ease .06s, transform .5s cubic-bezier(.2,.8,.2,1), filter .5s ease, letter-spacing .6s ease; }
.work-card[data-position="center"]:hover .work-copy p, .work-card[data-position="center"]:focus-within .work-copy p { filter: blur(0); letter-spacing: .015em; }

@media (max-width: 800px) {
  .logo-service { right: 4%; gap: 10px; }
  .logo-service::before { display: none; }
  .logo-service small { font-size: .5rem; }
  .work-card.is-portrait-card { width: min(68vw, 410px); }
}

/* Editorial logo introduction */
.hero { background: #f4f6f8; color: #111; }
.hero-architecture { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(140deg, #fff 0%, #f5f7f9 48%, #e6ebef 100%); }
.hero-architecture .plane { position: absolute; inset: -15%; transform-origin: center; }
.hero-architecture .plane-a { background: #0b0b0c; clip-path: polygon(0 0, 52% 0, 14% 100%, 0 100%); animation: plane-enter-a 1.25s cubic-bezier(.7,0,.2,1) both; }
.hero-architecture .plane-b { background: linear-gradient(150deg, rgba(255,255,255,.9), rgba(194,204,212,.5)); clip-path: polygon(78% 0, 100% 0, 100% 100%, 43% 100%); animation: plane-enter-b 1.45s cubic-bezier(.7,0,.2,1) both; }
.hero-architecture .scan-line { position: absolute; top: -20%; left: 28%; width: 1px; height: 140%; background: linear-gradient(transparent, rgba(0,0,0,.75), transparent); transform: rotate(28deg); animation: scan-across 2.2s ease .45s both; }
.hero-architecture b { position: absolute; right: -2vw; bottom: -9vw; color: rgba(255,255,255,.62); font-family: Georgia, serif; font-size: clamp(11rem, 28vw, 30rem); font-weight: 400; letter-spacing: -.1em; line-height: 1; opacity: 0; animation: ghost-in 1.2s ease 1.5s forwards; }
.logo-lockup { position: relative; z-index: 2; width: min(58vw, 760px); aspect-ratio: 1.65; }
.logo-slice, .logo-complete { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) contrast(1.25); }
.logo-slice { overflow: hidden; }
.logo-slice img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) contrast(1.25); }
.slice-top { clip-path: inset(0 0 66% 0); transform: translateX(-15%); opacity: 0; animation: slice-top-in .8s cubic-bezier(.2,.9,.2,1) .7s forwards; }
.slice-mid { clip-path: inset(33% 0 33% 0); transform: translateX(15%); opacity: 0; animation: slice-mid-in .8s cubic-bezier(.2,.9,.2,1) .82s forwards; }
.slice-bottom { clip-path: inset(66% 0 0 0); transform: translateX(-12%); opacity: 0; animation: slice-bottom-in .8s cubic-bezier(.2,.9,.2,1) .94s forwards; }
.logo-complete { opacity: 0; animation: complete-logo 1s ease 1.48s forwards; }
.logo-lockup small { position: absolute; right: 8%; bottom: 5%; font: 600 .65rem/1 Arial,sans-serif; letter-spacing: .34em; opacity: 0; animation: ghost-in .7s ease 1.9s forwards; }
@keyframes plane-enter-a { from { transform: translateX(-55%); } to { transform: translateX(0); } }
@keyframes plane-enter-b { from { transform: translateX(60%); } to { transform: translateX(0); } }
@keyframes scan-across { 0% { opacity: 0; left: 15%; } 20% { opacity: 1; } 100% { opacity: 0; left: 83%; } }
@keyframes ghost-in { to { opacity: 1; } }
@keyframes slice-top-in { to { opacity: 1; transform: translateX(0); } }
@keyframes slice-mid-in { to { opacity: 1; transform: translateX(0); } }
@keyframes slice-bottom-in { to { opacity: 1; transform: translateX(0); } }
@keyframes complete-logo { to { opacity: 1; } }

/* Clean reflective 3D carousel */
.works { min-height: 1080px; background: radial-gradient(circle at 50% 20%, #fff 0 16%, transparent 42%), linear-gradient(160deg, #eef5f9 0%, #dce8ef 43%, #f9fbfc 78%, #d4e0e7 100%); color: #111; }
.works::before { width: 70vw; left: 15vw; top: 36%; background: rgba(255,255,255,.9); filter: blur(85px); opacity: .7; }
.works::after { width: 52vw; right: -12vw; bottom: 0; background: rgba(152,190,212,.48); filter: blur(100px); opacity: .45; }
.works .eyebrow, .works .section-heading p { color: #58656c; }
.gallery-shell { position: relative; max-width: 1500px; margin: 0 auto; perspective: 1700px; }
.gallery { position: relative; display: block; width: min(94vw, 1260px); height: 660px; padding: 0; overflow: visible; transform-style: preserve-3d; touch-action: pan-y; }
.work-card, .work-card:nth-child(n) { --rx: 0deg; --ry: 0deg; --rz: 0deg; position: absolute; top: 25px; left: 50%; width: min(64vw, 680px); height: 570px; margin: 0; padding: 18px; grid-column: auto; color: #111; border: 1px solid rgba(255,255,255,.85); border-radius: 38px; background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,255,255,.35)); box-shadow: inset 0 1px 1px #fff, 0 32px 80px rgba(61,88,105,.24); backdrop-filter: blur(28px) saturate(145%); transform-style: preserve-3d; transition: transform .75s cubic-bezier(.2,.8,.2,1), opacity .55s ease, filter .55s ease, box-shadow .4s ease; }
.work-card[data-position="center"] { z-index: 5; opacity: 1; filter: none; transform: translate3d(-50%,0,180px) rotateY(0) scale(1); }
.work-card[data-position="left"] { z-index: 3; opacity: .76; filter: saturate(.75); transform: translate3d(-112%,32px,-120px) rotateY(42deg) scale(.83); }
.work-card[data-position="right"] { z-index: 3; opacity: .76; filter: saturate(.75); transform: translate3d(12%,32px,-120px) rotateY(-42deg) scale(.83); }
.work-card[data-position="back"] { z-index: 1; opacity: .25; filter: blur(1px) saturate(.6); transform: translate3d(-50%,65px,-430px) rotateY(180deg) scale(.68); pointer-events: none; }
.work-card::after { left: 12%; right: 12%; bottom: -48px; height: 55px; background: rgba(84,110,126,.23); filter: blur(23px); }
.work-card[data-position="center"]:hover, .work-card[data-position="center"]:focus-within { transform: translate3d(-50%,-12px,260px) rotateY(0) scale(1.045); box-shadow: inset 0 1px 2px #fff, 0 50px 105px rgba(54,82,100,.34); }
.movie-frame { height: 350px; aspect-ratio: auto !important; border-radius: 25px; background: rgba(255,255,255,.36); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 15px 40px rgba(60,89,106,.18); }
.movie-frame.is-portrait { width: 100%; }
.movie-frame video { width: 100%; height: 100%; object-fit: cover; filter: none; background: transparent; }
.movie-frame.is-portrait video { object-fit: contain; }
.work-copy { padding: 21px 10px 4px; }
.work-meta { color: #6a777d; }
.work-meta span:first-child { color: #111; }
.work-copy h3 { margin: 15px 0 0; color: #111; font-size: clamp(1.5rem, 2.2vw, 2.2rem); }
.work-copy p { max-height: 0; margin: 0; overflow: hidden; color: #4d595f; opacity: 0; transform: translateY(8px); transition: max-height .5s ease, margin .4s ease, opacity .4s ease, transform .4s ease; }
.work-card[data-position="center"]:hover .work-copy p, .work-card[data-position="center"]:focus-within .work-copy p { max-height: 100px; margin-top: 11px; opacity: 1; transform: translateY(0); }
.carousel-controls { position: absolute; left: 50%; bottom: -8px; z-index: 10; display: flex; align-items: center; gap: 26px; transform: translateX(-50%); }
.carousel-controls button { width: 54px; height: 54px; border: 1px solid rgba(36,52,61,.35); border-radius: 50%; background: rgba(255,255,255,.52); color: #152027; font-size: 1.2rem; cursor: pointer; backdrop-filter: blur(15px); transition: background .25s, transform .25s; }
.carousel-controls button:hover { background: #fff; transform: scale(1.08); }
.carousel-count { display: flex; align-items: center; gap: 11px; min-width: 98px; font: .72rem/1 Arial,sans-serif; letter-spacing: .12em; }
.carousel-count i { width: 38px; height: 1px; background: #7f929d; }

@media (max-width: 800px) {
  .logo-lockup { width: 92vw; }
  .hero-architecture b { font-size: 42vw; }
  .works { min-height: 950px; }
  .gallery { display: block; height: 650px; }
  .work-card, .work-card:nth-child(n) { width: min(82vw, 520px); height: 540px; }
  .work-card[data-position="left"] { transform: translate3d(-105%,42px,-180px) rotateY(47deg) scale(.72); }
  .work-card[data-position="right"] { transform: translate3d(5%,42px,-180px) rotateY(-47deg) scale(.72); }
  .work-card[data-position="center"], .work-card[data-position="center"]:hover { transform: translate3d(-50%,0,160px) rotateY(0) scale(1); }
  .movie-frame { height: 315px; }
  .work-copy p { display: none; }
}

/* Focused Z-axis interaction */
.work-card {
  --rz: 0deg;
  transform: perspective(1400px) translateZ(0) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)) scale(1);
  transition: transform .5s cubic-bezier(.2,.85,.2,1), border-color .35s ease, box-shadow .45s ease;
}
.work-card:nth-child(1) { --rz: -2.2deg; }
.work-card:nth-child(2) { --rz: 2.5deg; }
.work-card:nth-child(3) { --rz: 1.8deg; }
.work-card:nth-child(4) { --rz: -2.4deg; }
.work-card[data-position="center"]:hover,
.work-card[data-position="center"]:focus-within {
  --rx: 0deg;
  --ry: 0deg;
  --rz: 0deg;
  z-index: 20;
  transform: translate3d(-50%,-12px,260px) rotateY(0) scale(1.045);
  border-color: rgba(255,255,255,.72);
  box-shadow: inset 0 1px 2px #fff, 0 58px 120px rgba(0,0,0,.68), 0 10px 34px rgba(0,0,0,.45);
}
.work-card.is-previewing::before {
  background: linear-gradient(120deg, rgba(255,255,255,.34), transparent 30%, transparent 72%, rgba(255,255,255,.14));
}

@media (max-width: 800px) {
  .work-card,
  .work-card:nth-child(n) { --rz: 0deg; transform: none; }
  .work-card[data-position="center"]:hover,
  .work-card[data-position="center"]:focus-within { transform: translate3d(-50%,0,160px) scale(1); }
}

/* Final liquid-glass polish */
.work-card {
  backdrop-filter: blur(34px) saturate(185%) brightness(1.08);
  -webkit-backdrop-filter: blur(34px) saturate(185%) brightness(1.08);
  border-color: rgba(255,255,255,.9);
  box-shadow:
    0 34px 75px rgba(90,125,160,.22),
    0 12px 26px rgba(255,255,255,.9) inset,
    0 -12px 28px rgba(136,190,230,.16) inset,
    1px 1px 0 rgba(255,255,255,.98) inset;
}
.work-card::before {
  background:
    linear-gradient(118deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.35) 18%, transparent 39%),
    radial-gradient(circle at 76% 9%, rgba(255,255,255,.98), transparent 25%),
    linear-gradient(180deg, rgba(255,255,255,.42), transparent 34%);
  opacity:.82;
}
.movie-frame {
  position:relative;
  border-color:rgba(255,255,255,.98);
  box-shadow:0 18px 38px rgba(46,82,120,.2), 0 2px 12px rgba(255,255,255,.95) inset;
}
.video-start {
  position:absolute;
  inset:0;
  z-index:8;
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  color:#172027;
  cursor:pointer;
}
.video-start[hidden] { display:none; }
.video-start span {
  display:none;
}
.video-start span::after {
  content:"";
  display:block;
  width:0;
  height:0;
  margin:18px 0 0 23px;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:16px solid #172027;
}
.video-start:hover span,.video-start:focus-visible span { transform:scale(1.08); background:#fff; }
.movie-title {
  position:absolute;
  top:16px;
  left:16px;
  z-index:7;
  max-width:calc(100% - 32px);
  margin:0;
  padding:9px 14px 8px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:999px;
  background:rgba(248,252,254,.66);
  color:#172027;
  box-shadow:0 8px 24px rgba(42,68,82,.16), inset 0 1px 1px rgba(255,255,255,.9);
  backdrop-filter:blur(12px) saturate(145%);
  -webkit-backdrop-filter:blur(12px) saturate(145%);
  font-size:.78rem;
  font-weight:500;
  line-height:1.25;
  letter-spacing:.07em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  pointer-events:none;
}

/* Transparent reference animation and consistent upright glass panels. */
.logo-lockup .logo-slice, .logo-lockup .logo-complete { display:none; }
.logo-lockup .logo-reference-film { opacity:0; pointer-events:none; }
.logo-alpha { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.hero-service { color:#fff; mix-blend-mode:difference; }
.work-card, .work-card:nth-child(n), .work-card.is-portrait-card {
  width:min(76vw,560px); height:680px; padding:22px; border-radius:32px;
  display:flex; flex-direction:column; justify-content:center; gap:24px;
}
.work-card .movie-frame { width:100%; height:auto; aspect-ratio:16/9 !important; flex-shrink:0; }
.work-card.is-portrait-card { display:grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap:18px; }
.work-card.is-portrait-card .movie-frame { width:100%; height:auto; aspect-ratio:9/16 !important; margin:0; }
.work-card .movie-frame video, .work-card.is-portrait-card .movie-frame video { width:100%; height:100%; object-fit:contain; }
.work-card .work-copy, .work-card.is-portrait-card .work-copy { padding:6px; }
.work-card .work-copy h3 { font-size:1.65rem; line-height:1.55; }
.work-card.is-portrait-card .work-copy h3 { font-size:1.25rem; }
.work-card .work-copy p { font-size:.85rem; line-height:1.9; }
.work-card[data-position="center"]:hover .work-copy p, .work-card[data-position="center"]:focus-within .work-copy p { max-height:340px; }
.gallery { height:830px; }
.works { min-height:1200px; }
@media(max-width:800px) {
 .work-card, .work-card:nth-child(n), .work-card.is-portrait-card { width:78vw; height:580px; padding:14px; gap:14px; }
 .work-card.is-portrait-card { grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:10px; }
 .work-card.is-portrait-card .movie-frame { height:auto; }
 .work-card .work-copy h3, .work-card.is-portrait-card .work-copy h3 { font-size:1rem; }
 .work-card .work-copy p { display:block; font-size:.7rem; line-height:1.65; }
 .gallery { height:710px; }
 .works { min-height:1030px; }
}

.gallery.awaiting-entrance { opacity:0; }
.gallery.entering { pointer-events:none; }
.gallery.entering .work-card { transition:none; animation:none; }
.gallery-shell:has(.entering) .carousel-controls { pointer-events:none; }
/* Side cards retain their depth and size; only a subtle, single wobble. */
.work-card[data-position="left"], .work-card[data-position="right"] { cursor:pointer; }
.work-card[data-position="left"] .movie-frame, .work-card[data-position="right"] .movie-frame { pointer-events:none; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
 .work-card[data-position="left"]:hover, .work-card[data-position="right"]:hover {
   animation:side-card-wiggle .58s ease-in-out;
 }
}
@keyframes side-card-wiggle {
 0%,100% { rotate:0deg; }
 22% { rotate:-.65deg; }
 44% { rotate:.65deg; }
 66% { rotate:-.35deg; }
 84% { rotate:.2deg; }
}
@media(prefers-reduced-motion:reduce) {
 .gallery.awaiting-entrance { opacity:1; }
 .gallery.entering { animation:none; }
}

.about-grid { grid-template-columns:1fr; gap:0; }
.about { padding-block:90px; }
.contact { min-height:0; padding-block:90px; }
.contact-links { margin-top:24px; }

.contact-detail { display:flex; align-items:baseline; gap:24px; }
.contact-detail small { min-width:90px; color:#aaa; font-size:.8rem; letter-spacing:.06em; }
.contact-links a:hover .contact-detail { transform:none; }
@media(max-width:600px) {
 .contact-detail { flex-direction:column; gap:8px; }
}

/* Readable sentence breaks and a larger, tightly framed header logo. */
.brand { width:132px; height:52px; }
.brand img { width:200%; height:auto; max-width:none; left:-50%; top:50%; bottom:auto; transform:translateY(-50%); }
.work-copy .copy-sentence { display:block; word-break:auto-phrase; line-break:strict; text-wrap:pretty; overflow-wrap:normal; }
.work-copy .copy-sentence + .copy-sentence { margin-top:.65em; }
.work-copy h3 { word-break:auto-phrase; line-break:strict; text-wrap:balance; }
@media(max-width:600px) {
 .brand { width:100px; height:42px; flex-shrink:0; }
 .site-header nav { gap:14px; }
 .site-header nav a { font-size:.65rem; }
}

/* Mobile carousel: stable touch controls and lightweight depth. */
@media (max-width:800px) {
  .works {
    min-height:1060px;
    overflow:hidden;
  }
  .gallery-shell {
    perspective:1100px;
  }
  .gallery {
    width:100%;
    height:735px;
    touch-action:pan-y;
    overscroll-behavior-x:contain;
  }
  .work-card,
  .work-card:nth-child(n),
  .work-card.is-portrait-card {
    top:24px;
    width:min(86vw,420px);
    height:610px;
    padding:14px;
    gap:14px;
    border-radius:28px;
    -webkit-box-reflect:none;
    backdrop-filter:blur(10px) saturate(135%);
    -webkit-backdrop-filter:blur(10px) saturate(135%);
    transition:transform .56s cubic-bezier(.2,.8,.2,1), opacity .42s ease, filter .42s ease;
    will-change:transform;
  }
  .work-card[data-position="center"],
  .work-card[data-position="center"]:hover,
  .work-card[data-position="center"]:focus-within {
    z-index:5;
    opacity:1;
    filter:none;
    transform:translate3d(-50%,0,0) rotateY(0) scale(1);
  }
  .work-card[data-position="left"] {
    z-index:3;
    opacity:.68;
    filter:saturate(.82) brightness(.96);
    transform:translate3d(-92%,32px,-150px) rotateY(34deg) scale(.83);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .work-card[data-position="right"] {
    z-index:3;
    opacity:.68;
    filter:saturate(.82) brightness(.96);
    transform:translate3d(-8%,32px,-150px) rotateY(-34deg) scale(.83);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .work-card[data-position="back"] {
    z-index:1;
    opacity:.18;
    filter:blur(1px) saturate(.7);
    transform:translate3d(-50%,64px,-300px) rotateY(180deg) scale(.66);
    pointer-events:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .work-card[data-position="center"] .movie-frame {
    position:relative;
    z-index:4;
    pointer-events:auto;
    touch-action:manipulation;
  }
  .work-card[data-position="center"] video {
    position:relative;
    z-index:5;
    pointer-events:auto;
    touch-action:manipulation;
  }
  .movie-title {
    top:10px;
    left:10px;
    max-width:calc(100% - 20px);
    padding:7px 10px 6px;
    font-size:.66rem;
    letter-spacing:.035em;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
  .work-card.is-portrait-card {
    grid-template-columns:minmax(0, 44fr) minmax(0, 56fr);
    gap:14px;
  }
  .work-card.is-portrait-card .work-copy {
    min-width:0;
    padding-inline:2px;
  }
  .work-card.is-portrait-card .work-copy h3 {
    font-size:1.05rem;
    line-height:1.5;
  }
  .work-card.is-portrait-card .work-copy p {
    font-size:.72rem;
    line-height:1.75;
  }
  .work-card[data-position="left"] .movie-frame,
  .work-card[data-position="right"] .movie-frame {
    pointer-events:none;
  }
  .work-card .work-copy p,
  .work-card[data-position="center"] .work-copy p {
    display:block;
    max-height:190px;
    margin-top:.7rem;
    overflow:visible;
    opacity:1;
    filter:none;
    transform:none;
    letter-spacing:.015em;
  }
  .carousel-controls {
    bottom:18px;
  }
}

/* Keep the reflective centre panel while reducing GPU work on background cards. */
@media (min-width:801px) {
  .work-card[data-position="center"] {
    backdrop-filter:blur(22px) saturate(160%);
    -webkit-backdrop-filter:blur(22px) saturate(160%);
  }
  .work-card[data-position="left"],
  .work-card[data-position="right"],
  .work-card[data-position="back"] {
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    -webkit-box-reflect:none;
  }
}

/* Titles sit above the films; the copy stays separate and easy to scan. */
.work-card > .movie-title {
  position:static;
  z-index:auto;
  align-self:stretch;
  max-width:none;
  margin:0;
  padding:0 4px 14px;
  border:0;
  border-bottom:1px solid rgba(40,57,67,.22);
  border-radius:0;
  background:transparent;
  color:#172027;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  font-size:clamp(1.6rem,2.5vw,2.15rem);
  font-weight:400;
  line-height:1.35;
  letter-spacing:.075em;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}
.work-card.is-portrait-card > .movie-title {
  grid-column:1 / -1;
  grid-row:1;
}
.work-card.is-portrait-card > .movie-frame {
  grid-column:1;
  grid-row:2;
  align-self:center;
}
.work-card.is-portrait-card > .work-copy {
  grid-column:2;
  grid-row:2;
  align-self:center;
}

@media (max-width:800px) {
  .gallery {
    height:535px;
  }
  .works {
    min-height:860px;
  }
  .work-card,
  .work-card:nth-child(n),
  .work-card.is-portrait-card {
    width:min(90vw,430px);
    height:390px;
    padding:12px;
    gap:10px;
    justify-content:flex-start;
  }
  .work-card:not(.is-portrait-card) {
    height:418px;
  }
  .work-card > .movie-title {
    min-height:48px;
    padding:4px 2px 11px;
    font-size:1.28rem;
    line-height:1.45;
    letter-spacing:.055em;
  }
  .work-card.is-portrait-card {
    grid-template-columns:minmax(0,42fr) minmax(0,58fr);
    grid-template-rows:auto auto;
    column-gap:10px;
    row-gap:10px;
    align-content:center;
  }
  .work-card .work-copy,
  .work-card.is-portrait-card .work-copy {
    padding:2px 0;
  }
  .work-card .work-copy p,
  .work-card.is-portrait-card .work-copy p {
    max-height:230px;
    margin-top:.45rem;
    font-size:.88rem;
    line-height:1.68;
  }
  .work-card.is-portrait-card .work-meta {
    margin-bottom:2px;
  }
  .carousel-controls {
    bottom:10px;
  }
}