:root {
  --ink: #000;
  --paper: #fff;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Poppins", "Segoe UI", sans-serif;
  --type: "American Typewriter", "Courier Prime", Courier, serif;
  --script: "Ballet", cursive;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 161px;
  padding: 36px 66px 28px;
}

.brand,
.site-header .navbar-brand {
  font-family: var(--serif);
  font-size: 55px;
  line-height: 1;
  font-weight: 400;
  text-decoration: none;
  letter-spacing: 0.01em;
  color: var(--ink);
}

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

.site-nav a {
  font-family: var(--serif);
  font-size: 35px;
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
}

.site-nav a:hover {
  color: transparent;
  -webkit-text-stroke: 1px var(--ink);
}

.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }

.hero {
  padding: 0 40px 120px;
  text-align: center;
}

.hero-frame {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
}

.hero-stage {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  width: min(1232px, 100%);
  margin: 0 auto;
  aspect-ratio: 879 / 676;
  overflow: hidden;
  container-type: inline-size;
}

.typewriter {
  position: absolute;
  left: 0;
  top: -40.68%;
  width: 100.01%;
  height: 194.82%;
  max-width: none;
}

.typewriter-reel {
  position: absolute;
  left: 15.18%;
  top: 17.32%;
  width: 67.05%;
  height: 80.46%;
  object-fit: fill;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s linear;
  -webkit-mask: url("../img/typewriter-mask.svg") center / 100% 100% no-repeat;
  mask: url("../img/typewriter-mask.svg") center / 100% 100% no-repeat;
}

.hero-stage.is-showing-reel .typewriter-reel { opacity: 1; }

.hello {
  position: absolute;
  left: 32.5%;
  top: 18.5%;
  width: 35.5%;
  z-index: 4;
  text-align: left;
  font-family: var(--type);
  font-size: 1.62cqw;
  line-height: 1.15;
}

.hello p { margin: 0; }
.hello .typed-line { margin-top: 0.55em; }

.typed {
  display: block;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
}

.typed span {
  display: inline-block;
  white-space: pre;
  opacity: 0;
  animation-name: keystroke;
  animation-duration: 0.03s;
  animation-timing-function: steps(1, start);
  animation-fill-mode: both;
}

@keyframes keystroke {
  from { opacity: 0; }
  to { opacity: 1; }
}

.script-word {
  position: absolute;
  left: 50%;
  top: 62%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: var(--script);
  font-size: clamp(110px, 28vw, 460px);
  line-height: 0.75;
  font-weight: 400;
  white-space: nowrap;
  pointer-events: none;
}

.script-word-back { z-index: 1; }

.script-word-front {
  z-index: 3;
  animation: word-fade 0.7s ease 0.45s both;
}

.script-word a {
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
  display: inline-flex;
}

.script-word span { display: inline-block; }

@keyframes word-fade {
  from { opacity: 1; }
  to { opacity: 0; }
}

.hope {
  margin: 28px auto 0;
  font-family: var(--type);
  font-size: 24px;
}

.welcome {
  max-width: 877px;
  margin: 72px auto 0;
  font-size: 30px;
  line-height: 1.25;
}

.case,
.contact,
.about {
  width: min(1200px, calc(100% - 160px));
  margin: 48px auto 140px;
}

.case-head {
  margin-bottom: 24px;
}

.about-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  margin-bottom: 24px;
}

.case h1,
.about h1,
.contact h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(64px, 10.4vw, 150px);
  line-height: 1;
  letter-spacing: -0.02em;
}

.case h1 { width: fit-content; }

.case h1 .title-line { display: block; }

.case h1 .title-last {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  width: fit-content;
}

.case h1 .title-last .word {
  width: max-content;
  white-space: nowrap;
}

.contact h1 { font-size: clamp(72px, 11vw, 165px); }

.case h1 .case-client {
  width: 0;
  min-width: 100%;
  margin: 28px 0 0;
  font-family: var(--type);
  font-weight: 400;
  font-size: 35px;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: right;
}

.case-copy,
.about-copy,
.contact-list a,
.contact-list p {
  margin: 0;
  font-size: clamp(18px, 2.1vw, 30px);
  line-height: 1.25;
  max-width: none;
}

.case h2,
.about h2 {
  margin: 56px 0 16px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 55px);
  line-height: 1.15;
}

.note {
  margin-top: 48px;
  font-size: 25px;
  line-height: 1.25;
  font-style: italic;
}

.note strong { font-style: italic; }

.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px 48px;
  align-items: start;
}

.portrait {
  width: 320px;
  height: 370px;
  object-fit: cover;
  justify-self: end;
}

.signature {
  display: block;
  width: 305px;
  margin: 48px 0 0 auto;
  transform: rotate(18.65deg);
}

.contact-list {
  margin-top: 48px;
  padding-left: 131px;
  display: grid;
  gap: 20px;
}

.contact-list a,
.contact-list p { margin: 0; text-decoration: none; }

.works {
  width: 100%;
  margin: 0 auto 80px;
}

.work-row {
  margin: 0 0 39px;
}

.work-row h2 {
  flex: 0 0 clamp(220px, 32vw, 460px);
  margin: 0 24px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1.15;
  text-align: center;
}

.work-row:hover h2 { font-weight: 600; }

.work-arrow-slot {
  flex: 0 0 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 24px;
}

.work-arrow { width: 86px; height: auto; }

.work-row:hover .work-arrow { width: 150px; }

.work-scroll {
  display: flex;
  align-items: center;
  overflow-x: auto;
  scroll-behavior: auto;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-left: clamp(24px, 5vw, 70px);
}

.work-scroll::-webkit-scrollbar { display: none; }

.work-scroll.is-dragging { cursor: grabbing; user-select: none; }

.work-scroll a,
.work-scroll span {
  position: relative;
  flex: 0 0 auto;
  margin-right: 100px;
}

.work-scroll a:last-child,
.work-scroll span:last-child { margin-right: clamp(24px, 5vw, 70px); }

.work-scroll a img,
.work-scroll span img {
  width: 450px;
  height: 400px;
  object-fit: cover;
}

.work-scroll video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
}

.work-scroll a.is-playing video,
.work-scroll span.is-playing video { opacity: 1; }

.grid {
  display: grid;
  gap: 38px 50px;
  margin-top: 36px;
  align-items: start;
}

.grid img,
.grid video {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

.stagger { padding-left: 120px; }

.phones {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(28px, 7vw, 101px);
  flex-wrap: wrap;
  margin-top: 48px;
}

.phones img,
.phones video {
  width: min(504px, 100%);
  height: auto;
  aspect-ratio: 504 / 874;
  object-fit: cover;
  background: #000;
}

.phones .phone-b {
  width: min(492px, 100%);
  aspect-ratio: 492 / 874;
}

.wide { margin: 36px auto 0; width: min(1046px, 100%); display: block; }

video.media {
  display: block;
  height: auto;
  max-width: 100%;
  background: #000;
  object-fit: cover;
}

video.atlas-film { width: min(1046px, 100%); aspect-ratio: 1046 / 576; margin: 48px auto 0; }
video.film { width: min(1046px, 100%); margin: 48px auto 0; }
video.wan { width: min(835px, 100%); aspect-ratio: 835 / 470; margin: 48px auto 0; }
video.min-a { width: min(829px, 100%); aspect-ratio: 829 / 466; margin: 48px auto 0; }
iframe.yt { display: block; width: min(924px, 100%); aspect-ratio: 16 / 9; height: auto; margin: 48px auto 0; border: 0; }
video.em { width: min(1106px, 100%); aspect-ratio: 1106 / 622; margin: 48px auto 0; }
video.s11 { width: min(599px, 100%); aspect-ratio: 599 / 418; margin: 48px auto 0; }
video.lgf-deck { width: min(619px, 100%); aspect-ratio: 619 / 362; }
video.lgf-poster { width: min(218px, 70%); aspect-ratio: 218 / 453; margin: 48px auto 0; }
video.reel,
img.reel { width: min(333px, 100%); height: auto; aspect-ratio: 333 / 592; object-fit: cover; justify-self: center; }
video.story { width: min(340px, 100%); aspect-ratio: 340 / 604; }
.reels { justify-items: center; align-items: start; }
.pelo-mix {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 36px 48px;
  margin-top: 28px;
}
.pelo-mix img { width: min(213px, 100%); height: auto; object-fit: cover; }

.poster { width: min(560px, 100%); }

.center { justify-items: center; }

#ewSiteFooter { display: none !important; }

#ew-consent-bar,
.ew-consent-modal,
.modal-backdrop {
  display: none !important;
}

body.modal-open {
  overflow: auto !important;
  padding-right: 0 !important;
}

.up-top { grid-template-columns: 2fr 1fr; }
.up-bottom { grid-template-columns: 1fr 2fr 1fr; }

.link-line { font-style: italic; }

@media (max-width: 980px) {
  .site-header { padding: 28px 24px; min-height: 0; flex-wrap: wrap; }
  .brand,
  .site-header .navbar-brand { font-size: 40px; }
  .site-nav { gap: 20px; }
  .site-nav a { font-size: 24px; }
  .case, .about, .contact { width: min(100% - 40px, 1200px); }
  .about-layout { grid-template-columns: 1fr; }
  .portrait { justify-self: start; width: min(320px, 100%); height: auto; aspect-ratio: 320 / 370; }
  .signature { width: min(240px, 70%); }
  .case h1 { max-width: 100%; }
  .case h1 .title-last { max-width: 100%; }
  .case h1 .title-last .word { width: auto; max-width: 100%; white-space: normal; }
  .case h1 .case-client { font-size: clamp(18px, 4vw, 28px); text-align: left; margin-top: 16px; }
  .work-arrow-slot { display: none; }
  .work-row h2 { flex-basis: clamp(120px, 28vw, 180px); font-size: clamp(26px, 3.4vw, 40px); }
  .stagger { padding-left: 0; }
  .work-scroll a,
  .work-scroll span { margin-right: 28px; }
  .work-scroll a img,
  .work-scroll span img { width: min(450px, 78vw); height: auto; aspect-ratio: 450 / 400; }
  .cols-3, .cols-4, .cols-2 { grid-template-columns: 1fr 1fr; }
  .contact-list { padding-left: 0; }
  .contact-list a,
  .contact-list p { overflow-wrap: anywhere; }
  .hello { top: 16%; }
}

@media (max-width: 640px) {
  .site-header { padding: 18px 20px 8px; gap: 4px 12px; }
  .brand,
  .site-header .navbar-brand { font-size: 40px; }
  .site-nav { width: 100%; justify-content: space-between; gap: 8px; }
  .site-nav a { font-size: 20px; padding: 8px 0; }

  .hero { padding: 0 0 72px; }
  .script-word { font-size: clamp(78px, 26vw, 140px); }
  .hope { margin-top: 18px; font-size: 18px; }
  .welcome { margin-top: 32px; padding: 0 20px; font-size: 18px; }

  .case, .about, .contact { width: min(100% - 32px, 1200px); margin-bottom: 72px; }
  .case h1,
  .about h1 { font-size: clamp(42px, 12vw, 64px); }
  .contact h1 { font-size: clamp(46px, 13vw, 72px); }
  .case h2,
  .about h2 { margin-top: 36px; font-size: clamp(28px, 7vw, 40px); }
  .grid { gap: 18px; margin-top: 20px; }
  .note { font-size: 18px; }
  .signature { width: min(180px, 52%); margin-right: 16px; }

  .work-scroll {
    display: block;
    overflow: visible;
    padding: 0 16px 8px;
    cursor: auto;
  }
  .work-row { margin-bottom: 28px; }
  .work-row h2 {
    display: block;
    width: auto;
    max-width: none;
    flex: none;
    margin: 0 0 12px;
    text-align: left;
    font-size: 32px;
  }
  .work-scroll a,
  .work-scroll span,
  .work-scroll a:last-child,
  .work-scroll span:last-child { display: block; margin: 0 0 14px; }
  .work-scroll a img,
  .work-scroll span img { width: 100%; }

  .cols-3, .cols-4, .cols-2, .up-top, .up-bottom { grid-template-columns: 1fr; }
  .phones { gap: 24px; }
  .phones img,
  .phones video,
  .phones .phone-b { width: min(260px, 72%); }
  .reels { gap: 18px; }
  .pelo-mix { gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .typed span { animation: none; opacity: 1; }
  .script-word-front { animation: none; opacity: 0; }
  .typewriter-reel,
  .work-scroll video { display: none; }
}