/* Ikigai Creative — design system */

@font-face {
  font-family: "Druk Cond";
  src: url("./fonts/DrukCondTrialSuper.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}


:root {
  --ink: #0a0a0a;
  --paper: #ffffff;
  --off-white: #fafaf7;
  --gray: #6b6b6b;
  --rule: rgba(10, 10, 10, 0.12);
  --rule-dark: rgba(255, 255, 255, 0.16);

  --font-display: "Druk Cond", sans-serif;
  --font-mono: "Courier New", monospace;
  --font-mono-ui: "IBM Plex Mono", monospace;
  --font-italic: "Alumni Sans", sans-serif;
  --font-sans: "Open Sans", sans-serif;

  --container-pad: 40px;
  --content-pad: 34px;
  --content-max: 1440px;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.7;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.footer :focus-visible,
.lightbox :focus-visible,
.hero :focus-visible {
  outline-color: var(--paper);
}

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

/* Type presets */

.label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.nav-label {
  font-family: var(--font-mono-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.95;
  margin: 0;
}

.heading {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.95;
  margin: 0;
  font-size: 47.6px;
}

.heading-small {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
  font-size: 27.2px;
}

.thin-italic {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 200;
  font-size: 17px;
  line-height: 1.2;
}

.mono-lead {
  font-family: var(--font-mono);
  font-weight: 400;
  font-style: normal;
  font-size: 23.8px;
  line-height: 1.2;
}

.mono-body {
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.7;
}

/* Layout */

.container {
  padding-left: var(--content-pad);
  padding-right: var(--content-pad);
}

/* Nav */

.nav {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
  border-bottom: 1px solid var(--rule);
  position: relative;
  z-index: 10;
  background: var(--paper);
}

.nav__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.nav__logo img {
  width: 190px;
  height: auto;
}

.nav__links {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__links a {
  color: var(--gray);
  transition: color 0.2s ease;
  position: relative;
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.nav__links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__links a:hover,
.nav__links a[aria-current="page"] {
  color: var(--ink);
}

.nav__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav__toggle span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--ink);
  margin: 5px 0;
}

/* Hero */

.hero {
  position: relative;
  height: calc(85vh - 96px);
  min-height: 480px;
  overflow: hidden;
  background: var(--ink);
}

.hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Section rhythm */

.section {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  padding-top: 102px;
  padding-bottom: 102px;
  border-bottom: 1px solid var(--rule);
}

.section:last-of-type {
  border-bottom: none;
}

.section__label {
  margin-bottom: 20.4px;
}

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20.4px;
  flex-wrap: wrap;
  margin-bottom: 54.4px;
}

.display {
  font-size: 81.6px;
}

@media (max-width: 900px) {
  .display {
    font-size: 47.6px;
  }
  .heading {
    font-size: 30.6px;
  }
}

/* Studio / intro section */

.studio-section {
  position: relative;
  padding-top: 68px;
  padding-bottom: 68px;
}

.studio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54.4px;
  margin-top: 54.4px;
}

.studio-grid .mono-body {
  font-size: 14.45px;
  line-height: 1.65;
}

.ikigai-word {
  font-family: var(--font-sans);
  font-size: 23.8px;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0;
}

.ikigai-ipa {
  font-family: var(--font-sans);
  font-size: 23.8px;
  font-weight: 300;
  letter-spacing: 0.01em;
  margin: 3.4px 0 13.6px;
}

.ikigai-definition {
  font-family: var(--font-mono);
  font-size: 23.8px;
  line-height: 1.2;
  margin: 0;
}

/* Work grid */

.work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40.8px 54.4px;
  padding-inline: 54.4px;
}

.work-card {
  display: block;
  width: 100%;
  min-width: 0;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.work-card__image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: visible;
  background: var(--off-white);
  margin-bottom: 17px;
}

.work-card__image img,
.work-card__image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-card__poster,
.work-card__teaser {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
  transition: opacity 0.25s ease, transform 0.4s ease, box-shadow 0.4s ease;
}

.work-card__poster {
  filter: grayscale(1) contrast(1.08) brightness(0.98);
}

/* Touch devices have no hover, so the color reveal can never happen —
   the resting state must be the color state there. */
@media (hover: none) {
  .work-card__poster {
    filter: none;
  }
}

.work-card__teaser {
  opacity: 0;
}

.work-card:hover .work-card__image {
  position: relative;
  z-index: 5;
}

.work-card:hover .work-card__poster,
.work-card:hover .work-card__teaser {
  transform: scale(1.08);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 10px 20px rgba(0, 0, 0, 0.25);
}

.work-card:hover .work-card__teaser {
  opacity: 1;
}

/* Video lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(10, 10, 10, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.lightbox[hidden] {
  display: none;
}

.lightbox__inner {
  width: 100%;
  max-width: 1200px;
}

.lightbox__video {
  width: 100%;
  max-height: 85vh;
  display: block;
  background: #000;
}

.lightbox__close {
  position: absolute;
  top: 24px;
  right: 32px;
  background: none;
  border: none;
  color: var(--paper);
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
}

.work-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 13.6px;
}

.work-card__client {
  font-family: var(--font-mono-ui);
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: var(--gray);
}

.work-card__code {
  display: flex;
  gap: 13.6px;
  align-items: baseline;
  font-family: var(--font-mono-ui);
  font-size: 10px;
  letter-spacing: 0.12em;
  line-height: 1;
  white-space: nowrap;
}

.work-card__ref {
  color: var(--ink);
}

.work-card__year {
  color: var(--gray);
}

/* Work filter (work page) */

.work-filters {
  display: flex;
  gap: 10.2px;
  flex-wrap: wrap;
  margin-bottom: 54.4px;
}

.work-filters button {
  font-family: var(--font-mono-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--rule);
  padding: 8.5px 13.6px;
  cursor: pointer;
  color: var(--ink);
}

.work-filters button.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.work-card--placeholder .work-card__image {
  background-image: repeating-linear-gradient(
    45deg,
    var(--rule),
    var(--rule) 1px,
    transparent 1px,
    transparent 12px
  );
}

.work-card--placeholder .heading-small,
.work-card--placeholder .work-card__client,
.work-card__code .undefined {
  color: var(--gray);
}

/* Services list (homepage teaser + services page) */

.services-list {
  display: flex;
  flex-direction: column;
}

.service-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20.4px;
  padding: 34px 0;
  border-top: 1px solid var(--rule);
}

.services-list .service-item:last-child {
  border-bottom: 1px solid var(--rule);
}

.service-item__index {
  font-size: 11px;
  color: var(--gray);
  transition: color 0.3s ease;
}

.service-item .heading {
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

a.service-item:hover .heading {
  transform: translateX(14px);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
}

a.service-item:hover .service-item__index {
  color: var(--ink);
}

.service-item--detailed {
  flex-direction: column;
  align-items: stretch;
  gap: 13.6px;
}

.service-item--detailed p:not(.heading) {
  max-width: 640px;
  color: var(--gray);
  margin: 0;
}

/* CTA */

.cta {
  padding-top: 119px;
  padding-bottom: 119px;
  background: var(--off-white);
}

.cta__inner {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.cta .display {
  margin-bottom: 20.4px;
}

.cta .mono-lead {
  color: var(--ink);
  margin-bottom: 34px;
}

.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  padding: 17px 27.2px;
  border: 1px solid var(--ink);
  transition: background 0.2s ease, color 0.2s ease;
}

.btn:hover {
  background: transparent;
  color: var(--ink);
}

/* Footer */

.footer {
  background: var(--ink);
  color: var(--paper);
  padding-top: 68px;
  padding-bottom: 27.2px;
}

.footer__inner {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

.footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 27.2px;
  margin-bottom: 54.4px;
}

.footer__logo img {
  width: 187px;
  height: auto;
  filter: invert(1);
}

.footer__links {
  display: flex;
  gap: 27.2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__links a {
  color: rgba(255, 255, 255, 0.7);
}

.footer__links a:hover {
  color: var(--paper);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 13.6px;
  flex-wrap: wrap;
  padding-top: 27.2px;
  border-top: 1px solid var(--rule-dark);
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
}

.footer-copyright {
  font-family: var(--font-mono-ui);
  letter-spacing: 0.08em;
  line-height: 1.4;
}

.footer-tagline {
  color: rgba(255, 255, 255, 0.7);
}

/* Contact page */

.contact-row {
  padding: 34px 0;
  border-top: 1px solid var(--rule);
}

.contact-row:last-child {
  border-bottom: 1px solid var(--rule);
}

.contact-row .label {
  margin-bottom: 13.6px;
}

/* About page */

.about-lede {
  max-width: 900px;
}

.about-body {
  max-width: 640px;
  margin-top: 40.8px;
  display: flex;
  flex-direction: column;
  gap: 20.4px;
  color: var(--gray);
}

.about-body.mono-body {
  font-size: 17.25px;
  line-height: 1.7;
}

/* Stills — photography contact sheet.
   Deliberate opposite of the work grid: always color, no crossfade,
   no grayscale. Film moves, photography holds still. */

.stills-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 74px;
  grid-auto-flow: dense;
  gap: 3px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.still {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
  min-height: 0;
  cursor: pointer;
  display: block;
}

.still img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.still:hover img {
  transform: scale(1.045);
}

.still__n {
  position: absolute;
  top: 10px;
  right: 12px;
  font-family: var(--font-mono-ui);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
  z-index: 2;
}

.still__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px;
  text-align: left;
  font-family: var(--font-mono-ui);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  z-index: 2;
}

.still:hover .still__cap {
  opacity: 1;
  transform: translateY(0);
}

.still--a { grid-column: span 3; grid-row: span 4; }
.still--b { grid-column: span 2; grid-row: span 6; }
.still--c { grid-column: span 1; grid-row: span 6; }
.still--d { grid-column: span 3; grid-row: span 4; }
.still--e { grid-column: span 2; grid-row: span 4; }
.still--f { grid-column: span 1; grid-row: span 4; }
.still--g { grid-column: span 3; grid-row: span 6; }
.still--h { grid-column: span 3; grid-row: span 6; }
.still--i { grid-column: span 3; grid-row: span 8; }
.still--j { grid-column: span 3; grid-row: span 6; }

.lightbox--photo .lightbox__inner {
  max-width: 1100px;
}

.lightbox__img {
  width: 100%;
  max-height: 85vh;
  object-fit: contain;
  display: block;
  background: #000;
}

@media (max-width: 900px) {
  .stills-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 130px;
  }
  .still--a, .still--b, .still--c, .still--d,
  .still--e, .still--f, .still--g, .still--h,
  .still--i, .still--j {
    grid-column: span 1;
    grid-row: span 3;
  }
}

/* Hero scroll cue */

.hero__cue {
  position: absolute;
  left: var(--container-pad);
  bottom: 34px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero__cue .label {
  color: rgba(255, 255, 255, 0.85);
}

.hero__cue-line {
  width: 1px;
  height: 64px;
  margin-left: 2px;
  background: rgba(255, 255, 255, 0.9);
  animation: cue-draw 2.6s cubic-bezier(0.6, 0, 0.3, 1) infinite;
}

@keyframes cue-draw {
  0% {
    clip-path: inset(0 0 100% 0);
  }
  45% {
    clip-path: inset(0);
  }
  100% {
    clip-path: inset(100% 0 0 0);
  }
}

/* Film grain overlay */

.grain {
  position: fixed;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  pointer-events: none;
  z-index: 90;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.045;
  will-change: transform;
  animation: grain-shift 1.2s steps(6) infinite;
}

@keyframes grain-shift {
  0%, 100% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-2%, 1%);
  }
  40% {
    transform: translate(1%, -2%);
  }
  60% {
    transform: translate(-1%, 2%);
  }
  80% {
    transform: translate(2%, -1%);
  }
}

/* Custom cursor */

html.has-cursor,
html.has-cursor * {
  cursor: none !important;
}

html.has-cursor .lightbox,
html.has-cursor .lightbox * {
  cursor: auto !important;
}

.cursor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
  mix-blend-mode: difference;
}

.cursor--hidden {
  opacity: 0 !important;
}

.cursor__dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #fff;
}

.cursor__ring {
  position: fixed;
  top: 0;
  left: 0;
}

.cursor__ring-inner {
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  border: 1px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.35s ease;
}

.cursor__ring-inner span {
  font-family: var(--font-mono-ui);
  font-size: 5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #000;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.cursor--link .cursor__ring-inner {
  transform: scale(1.5);
}

.cursor--play .cursor__ring-inner {
  transform: scale(2.4);
  background: #fff;
}

.cursor--play .cursor__ring-inner span {
  opacity: 1;
}

.cursor--play .cursor__dot {
  opacity: 0;
}

/* Service hover preview */

.service-preview {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  pointer-events: none;
  z-index: 40;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.service-preview--on {
  opacity: 1;
}

.service-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scroll reveals */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reveal--visible {
  opacity: 1;
  transform: none;
}

/* Marquee */

.marquee {
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  padding: 27.2px 0;
}

.marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee 64s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__group {
  display: flex;
  flex-shrink: 0;
}

.marquee__text {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 61.2px;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__cue-line,
  .grain,
  .marquee__track {
    animation: none;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Responsive */

@media (max-width: 900px) {
  .marquee__text {
    font-size: 34px;
  }
  .marquee {
    padding: 17px 0;
  }
  .service-preview {
    display: none;
  }
}

@media (max-width: 900px) {
  :root {
    --container-pad: 24px;
    --content-pad: 20px;
  }

  .nav__links {
    position: fixed;
    inset: 96px 0 0 0;
    background: var(--paper);
    flex-direction: column;
    padding: 32px 24px;
    gap: 24px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .nav__links.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav__toggle {
    display: block;
  }

  .section {
    padding-top: 61.2px;
    padding-bottom: 61.2px;
  }

  .studio-grid,
  .work-grid {
    grid-template-columns: 1fr;
  }

  .footer__top {
    flex-direction: column;
  }
}

/* Rebuild — quiet navigation, generous images, one-screen landing. */
:root { --accent: #ee3024; --paper: #f6f4ee; --font-mono-ui: "Courier New", monospace; --font-sans: Arial, sans-serif; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.nav { height:88px; justify-content:space-between; }
.nav__logo { position:static; transform:none; }
.nav__logo img { width:145px; mix-blend-mode:multiply; }
.nav__links a { color:var(--ink); }
.nav__links a[aria-current="page"] { color:var(--accent); }
.btn { border-radius:30px; }
.footer { padding-top:48px; }
.footer__top { margin-bottom:32px; }
.home-root, .home-page { width:100%; height:100%; overflow:hidden; background:#10110d; }
.home-stage { position:relative; height:100svh; height:100dvh; width:100%; overflow:hidden; color:var(--accent); --banner-height:58px; }
.home-film { position:absolute; inset:0 0 var(--banner-height); }
.home-film video { width:100%; height:100%; object-fit:cover; }
.home-film::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.64),rgba(0,0,0,.12) 44%,rgba(0,0,0,.26)); }
.home-header { position:absolute; z-index:2; top:0; left:0; right:0; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:start; padding:28px 32px; }
.home-intro, .home-nav, .home-cta, .home-caption { font: bold 11px/1.4 var(--font-mono); letter-spacing:.035em; text-transform:uppercase; }
.home-intro { margin:0; color:#f6f4ee; }
.home-intro span { display:inline-block; margin-top:12px; opacity:.65; }
.home-cta { justify-self:center; display:flex; gap:25px; border:1px solid currentColor; border-radius:40px; padding:13px 21px; color:#f6f4ee; transition:background .2s,color .2s; }
.home-cta:hover { background:var(--accent); border-color:var(--accent); color:var(--ink); }
.home-nav { justify-self:end; display:flex; flex-direction:column; text-align:right; color:#f6f4ee; }
.home-nav a { padding:4px 0; }
.home-nav a:hover { color:var(--accent); }
.home-page :focus-visible { outline-color:#fff; outline-offset:5px; }
.home-wordmark { position:absolute; margin:0; left:22px; right:22px; bottom:calc(var(--banner-height) + 22px); height:min(43vw,62%); pointer-events:none; }
.home-wordmark svg { width:100%; height:100%; display:block; overflow:visible; }
.home-wordmark text { fill:currentColor; font:800 530px "Druk Cond", sans-serif; }
.home-caption { position:absolute; left:32px; right:32px; bottom:calc(var(--banner-height) + min(43vw,62dvh) + 42px); display:flex; justify-content:space-between; align-items:center; color:#f6f4ee; font-size:10px; font-weight:normal; }
.motion-toggle { font:inherit; text-transform:uppercase; color:inherit; border:0; padding:10px 0 10px 15px; background:transparent; cursor:pointer; }
.home-page .marquee { position:absolute; bottom:0; left:0; width:100%; height:var(--banner-height); padding:0; display:flex; align-items:center; background:var(--accent); color:#12130f; }
.home-page .marquee__text { font: bold 14px/1 var(--font-mono); letter-spacing:.06em; }
.home-page.motion-paused .marquee__track { animation-play-state:paused; }
.portfolio { max-width:1800px; margin:auto; }
.portfolio .section { max-width:none; }
.portfolio-films { padding-top:65px; padding-bottom:70px; }
.portfolio-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:55px; }
.portfolio-heading .display { font-size:clamp(100px,14vw,200px); }
.portfolio-heading .label { margin-top:0; margin-bottom:24px; }
.portfolio-intro { margin:0 0 8px; color:var(--gray); }
.work-page .work-grid { padding:0; gap:48px 24px; }
.work-page .work-card__image { aspect-ratio:16/10; overflow:hidden; margin-bottom:16px; }
.work-page .work-card__poster { filter:none; }
.work-page .work-card:hover .work-card__poster, .work-page .work-card:hover .work-card__teaser { transform:scale(1.025); box-shadow:none; }
.work-page .heading-small { font:normal 14px/1.3 var(--font-mono); text-transform:none; }
.work-page .work-card__year { color:var(--gray); }
.work-card__image::after { content:""; position:absolute; right:16px; bottom:16px; background:var(--paper); color:var(--ink); width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font:20px Arial; pointer-events:none; }
.work-page .stills-section { padding-top:65px; }
.work-page .stills-grid { gap:12px; background:none; border:0; grid-auto-rows:90px; }
.work-page .still__cap { opacity:1; transform:none; }
.portfolio-cta { padding-top:30px; padding-bottom:80px; }
.portfolio-cta p { color:var(--gray); }
.portfolio-cta a { font-family:var(--font-display); font-size:clamp(48px,7vw,110px); line-height:1; text-transform:uppercase; }
.portfolio-cta a:hover { color:var(--accent); }
.lightbox { padding:50px 24px; }
@media(max-width:900px) {
 .nav__links { inset:88px 0 0; visibility:hidden; }
 .nav__links.open { visibility:visible; }
 .home-header { padding:24px; }
 .home-cta { padding:11px 15px; gap:12px; }
 .home-wordmark { left:14px; right:14px; }
 .home-caption { left:24px; right:24px; }
 .portfolio-heading { align-items:start; flex-direction:column; gap:24px; }
 .work-page .work-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .work-page .stills-grid { grid-auto-rows:100px; }
}
@media(max-width:600px) {
 .home-stage { --banner-height:48px; }
 .home-header { padding:22px 20px; grid-template-columns:1fr 1fr; gap:24px; }
 .home-intro, .home-nav, .home-cta { font-size:10px; }
 .home-cta { grid-row:2; grid-column:1; justify-self:start; }
 .home-nav { grid-column:2; grid-row:1 / span 2; }
 .home-nav a { padding:7px 0; }
 .home-wordmark { height:49vw; left:10px; right:10px; bottom:calc(var(--banner-height) + 18px); }
 .home-caption { bottom:calc(var(--banner-height) + 49vw + 32px); left:20px; right:20px; font-size:8px; }
 .home-page .marquee__text { font-size:12px; }
 .work-page .work-grid { grid-template-columns:1fr; gap:32px; }
 .portfolio-films { padding-top:40px; }
 .portfolio-heading { margin-bottom:35px; }
 .work-page .stills-grid { gap:8px; grid-auto-rows:70px; }
 .footer__links { gap:20px; }
 .portfolio-cta { padding-bottom:55px; }
}
@media(max-height:500px) and (min-width:601px) {
 .home-header { padding:16px 24px; }
 .home-intro span, .home-caption > span { display:none; }
 .home-wordmark { height:52%; bottom:calc(var(--banner-height) + 10px); }
 .home-caption { bottom:calc(var(--banner-height) + 52% + 8px); }
}
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto!important; transition:none!important; } }
.work-card:focus-visible .work-card__teaser { opacity:1; }
@media(prefers-reduced-motion:reduce) { .work-card:hover .work-card__teaser, .work-card:focus-visible .work-card__teaser { opacity:0; } }

/* Monochrome homepage: an asymmetric studio signature over moving film. */
.home-page { --accent:#fff; color:#fff; }
.home-stage { color:#fff; --banner-height:46px; }
.home-film { inset:0 0 var(--banner-height); }
.home-film video { filter:grayscale(1); }
.home-film::after { background:linear-gradient(90deg,rgba(0,0,0,.56),rgba(0,0,0,.05) 80%),linear-gradient(180deg,rgba(0,0,0,.45),transparent 35%,rgba(0,0,0,.6)); }
.home-header { display:flex; align-items:center; justify-content:space-between; padding:28px 40px; }
.home-signature { font:800 30px/.9 var(--font-display); display:flex; align-items:center; gap:14px; }
.home-signature span { max-width:65px; font:9px/1.4 var(--font-mono); letter-spacing:.08em; }
.home-nav { flex-direction:row; gap:30px; font-size:10px; font-weight:normal; }
.home-nav a { padding:10px 0; border-bottom:1px solid transparent; }
.home-nav a:hover { color:#fff; border-bottom-color:#fff; }
.home-composition { position:absolute; top:46%; left:40px; width:64%; transform:translateY(-50%); }
.home-kicker { display:flex; align-items:center; gap:24px; font:18px/1.2 serif; margin:0 0 24px; }
.home-kicker span { font:10px/1.4 var(--font-mono); text-transform:uppercase; letter-spacing:.13em; }
.home-wordmark { position:static; width:100%; height:clamp(130px,23vw,370px); margin:0; }
.home-byline { display:flex; justify-content:space-between; padding-top:22px; margin-top:20px; border-top:1px solid rgba(255,255,255,.45); font:10px/1.5 var(--font-mono); }
.home-note { position:absolute; bottom:calc(var(--banner-height) + 110px); right:40px; width:240px; font:12px/1.7 var(--font-mono); }
.home-note p { margin:0 0 24px; }
.home-note a { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid #fff; font-size:10px; text-transform:uppercase; letter-spacing:.07em; }
.home-note a:hover { opacity:.7; }
.home-note a span { font-size:20px; }
.home-caption { left:40px; right:40px; bottom:calc(var(--banner-height) + 20px); font-size:9px; }
.home-caption > span span { margin:0 14px; opacity:.5; }
.home-page .marquee { height:var(--banner-height); background:#f5f5f3; color:#111; }
.home-page .marquee__track { flex:0 0 auto; width:max-content; animation:marquee 48s linear infinite; }
.home-page .marquee__group { flex:0 0 auto; min-width:0; width:max-content; justify-content:flex-start; }
.home-page .marquee__text { flex:0 0 auto; font:10px/1 var(--font-mono); letter-spacing:.1em; padding:0 18px; }
.home-page .marquee:hover .marquee__track { animation-play-state:running; }
.home-page.motion-paused .marquee__track { animation-play-state:paused; }
@media(min-width:1600px) { .home-composition { width:60%; } }
@media(max-width:900px) {
 .home-header { padding:24px; }
 .home-nav { gap:22px; }
 .home-composition { left:24px; width:72%; top:43%; }
 .home-note { right:24px; bottom:calc(var(--banner-height) + 90px); }
 .home-caption { left:24px; right:24px; }
}
@media(max-width:600px) {
 .home-header { padding:24px 20px; align-items:flex-start; gap:18px; }
 .home-signature { font-size:25px; flex-direction:column; align-items:flex-start; gap:6px; }
 .home-signature span { font-size:7px; max-width:none; }
 .home-nav { display:grid; grid-template-columns:repeat(2,auto); gap:4px 20px; text-align:left; font-size:9px; }
 .home-nav a { padding:5px 0; }
 .home-composition { top:42%; left:20px; width:calc(100% - 40px); }
 .home-wordmark { height:32vw; }
 .home-kicker { margin-bottom:22px; gap:16px; font-size:16px; }
 .home-kicker span { font-size:8px; }
 .home-byline { font-size:8px; padding-top:16px; margin-top:16px; gap:16px; }
 .home-note { left:20px; right:20px; width:auto; bottom:calc(var(--banner-height) + 85px); display:flex; align-items:end; gap:25px; justify-content:space-between; font-size:10px; }
 .home-note p { margin:0; }
 .home-note a { font-size:8px; gap:18px; padding:8px 0; }
 .home-caption { left:20px; right:20px; bottom:calc(var(--banner-height) + 15px); font-size:8px; }
 .home-caption > span { max-width:160px; }
 .home-caption > span span { margin:0 4px; }
}
@media(max-height:550px) and (min-width:601px) {
 .home-header { padding:16px 24px; }
 .home-composition { top:48%; width:48%; }
 .home-wordmark { height:27vh; }
 .home-kicker { margin-bottom:12px; }
 .home-byline { margin-top:12px; padding-top:10px; }
 .home-note { bottom:calc(var(--banner-height) + 70px); }
 .home-caption > span { display:inline; }
}
@media(prefers-reduced-motion:reduce) { .home-page .marquee__track { animation:none; } }

/* Simplified colour-film landing. */
.home-stage { --banner-height:76px; }
.home-film video { filter:none; }
.home-film::after { background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.08) 45%,rgba(0,0,0,.22)); }
.home-header { align-items:flex-start; }
.home-intro { font-size:11px; font-weight:normal; line-height:1.5; }
.home-intro span { display:block; margin-top:16px; opacity:1; text-transform:none; }
.home-composition { top:auto; left:28px; right:28px; bottom:calc(var(--banner-height) + 24px); width:auto; transform:none; }
.home-wordmark { width:100%; height:min(39vw,57dvh); }
.studio-button { position:absolute; top:24%; right:40px; display:flex; align-items:center; background:#fff; color:#111; min-height:62px; padding:0 10px 0 24px; gap:30px; clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,13px 100%,0 calc(100% - 13px)); transition:background .2s,transform .2s; }
.studio-button > span:first-child { font: bold 11px/1 var(--font-mono); text-transform:uppercase; letter-spacing:.04em; }
.studio-button__arrow { width:42px; height:42px; display:grid; place-items:center; background:#111; color:#fff; font:25px/1 Arial,sans-serif; transition:transform .2s; }
.studio-button:hover { transform:translateY(-3px); background:#e8e8e8; }
.studio-button:hover .studio-button__arrow { transform:rotate(45deg); }
.studio-button:focus-visible { outline-offset:-5px; outline:2px solid #111; }
.home-page > main > .motion-toggle { position:absolute; bottom:calc(var(--banner-height) + min(39vw,57dvh) + 40px); right:32px; width:32px; height:32px; padding:0; font-size:14px; opacity:.8; }
.home-page .marquee__group { gap:0; }
.home-page .marquee__text { padding:0; font:800 46px/1 var(--font-display); letter-spacing:.01em; }
@media(max-width:900px) {
 .home-composition { left:20px; right:20px; width:auto; top:auto; }
 .studio-button { right:24px; }
}
@media(max-width:600px) {
 .home-stage { --banner-height:62px; }
 .home-intro { font-size:9px; }
 .home-intro span { margin-top:12px; }
 .home-composition { left:12px; right:12px; bottom:calc(var(--banner-height) + 22px); }
 .home-wordmark { height:43vw; }
 .studio-button { top:36%; left:20px; right:auto; min-height:56px; padding-left:20px; gap:24px; }
 .studio-button > span:first-child { font-size:10px; }
 .studio-button__arrow { height:36px; width:36px; font-size:22px; }
 .home-page .marquee__text { font-size:36px; }
 .home-page > main > .motion-toggle { right:16px; bottom:calc(var(--banner-height) + 43vw + 34px); }
}
@media(max-height:550px) and (min-width:601px) {
 .home-stage { --banner-height:52px; }
 .home-wordmark { height:49dvh; }
 .home-composition { bottom:calc(var(--banner-height) + 12px); }
 .home-intro { font-size:9px; }
 .home-intro span { margin-top:5px; }
 .studio-button { top:20%; right:24px; min-height:42px; gap:15px; padding-left:16px; }
 .studio-button__arrow { height:30px; width:30px; font-size:20px; }
 .home-page .marquee__text { font-size:34px; }
 .home-page > main > .motion-toggle { bottom:calc(var(--banner-height) + 49dvh + 18px); right:260px; }
}

/* Reference-scale utility text in the original mono typeface. */
.home-intro, .home-nav { font-family:var(--font-mono); font-size:11px; font-weight:700; line-height:1.4; letter-spacing:.035em; color:#fff; text-shadow:none; }
.home-intro span { font-weight:700; text-transform:uppercase; }
.studio-button > span:first-child { font-family:var(--font-mono); font-size:11px; font-weight:700; }
.home-page > main > .motion-toggle { font-family:var(--font-mono); font-weight:700; opacity:1; text-shadow:none; }
@media(max-width:600px) { .home-intro, .home-nav, .studio-button > span:first-child { font-size:10px; } }

/* Final header alignment. */
.home-header .home-intro { transform:translateX(-8px); }
.home-header .home-nav { display:flex; flex-direction:column; align-items:flex-end; gap:0; text-align:right; }
.home-header .home-nav a { padding:3px 0; }

/* A restrained invitation, directly above the studio wordmark. */
.home-page .studio-button { top:auto; left:32px; right:auto; bottom:calc(var(--banner-height) + min(39vw,57dvh) + 42px); min-height:36px; padding:6px 0; gap:18px; clip-path:none; border:0; border-bottom:1px solid rgba(255,255,255,.65); background:transparent; color:#fff; }
.home-page .studio-button__arrow { width:auto; height:auto; background:transparent; color:inherit; font-size:20px; }
.home-page .studio-button:hover { transform:none; background:transparent; border-bottom-color:#fff; }
.home-page .studio-button:hover .studio-button__arrow { transform:translate(3px,-3px); }
.home-page .studio-button:focus-visible { outline:2px solid #fff; outline-offset:5px; }
@media(max-width:600px) { .home-page .studio-button { left:20px; bottom:calc(var(--banner-height) + 43vw + 34px); min-height:32px; } }
@media(max-height:550px) and (min-width:601px) { .home-page .studio-button { left:28px; bottom:calc(var(--banner-height) + 49dvh + 20px); min-height:30px; } }

/* White editorial pages, using the portfolio's type and spacing. */
:root { --paper:#fff; --off-white:#fff; }
.home-page .marquee { background:#fff; }
.editorial-main { max-width:1800px; margin:0 auto; padding-top:65px; padding-bottom:80px; }
.editorial-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:55px; }
.editorial-heading .label { margin:0 0 24px; }
.editorial-heading .display { font-size:clamp(100px,14vw,200px); }
.editorial-intro { margin:0 0 8px; max-width:400px; color:var(--gray); font-size:13px; }
.service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:60px 24px; }
.service-project img { width:100%; aspect-ratio:16/10; object-fit:cover; }
.service-title { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:22px 0 15px; }
.service-title h2 { font:800 clamp(36px,4vw,58px)/1 var(--font-display); text-transform:uppercase; margin:0; }
.service-title span { font-size:10px; color:var(--gray); }
.service-project > p { max-width:490px; margin:0; line-height:1.7; }
.service-project .service-detail { margin-top:18px; color:var(--gray); font-size:10px; text-transform:uppercase; letter-spacing:.03em; }
.editorial-link { display:inline-flex; align-items:center; justify-content:space-between; gap:48px; margin-top:55px; padding:10px 0; border-bottom:1px solid currentColor; font:700 11px/1.4 var(--font-mono); text-transform:uppercase; }
.editorial-link span { font:24px/1 Arial; }
.editorial-link:hover { opacity:.6; }
.about-editorial { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.about-copy { max-width:570px; padding-top:10px; }
.about-copy h2 { font:800 clamp(42px,5vw,74px)/1 var(--font-display); text-transform:uppercase; margin:0 0 32px; }
.about-copy > p { max-width:500px; margin:0 0 22px; font-size:14px; line-height:1.8; }
.about-image { margin:0; }
.about-image img { width:100%; height:620px; object-fit:cover; }
.about-image figcaption { margin-top:15px; color:var(--gray); font-size:9px; text-transform:uppercase; }
.about-meaning { display:block; margin-top:38px; }
.about-meaning > span { display:block; font:700 26px/1.4 "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif; letter-spacing:.04em; margin-bottom:14px; }
.about-meaning h3 { font:800 40px/1.1 var(--font-display); text-transform:uppercase; margin:0 0 14px; }
.about-meaning p { font-size:13px; line-height:1.7; margin:0; color:var(--gray); }
.about-copy .editorial-link { margin-top:35px; }
.contact-main .editorial-heading { margin-bottom:45px; }
.contact-main .editorial-heading .display { font-size:clamp(90px,11vw,155px); }
.contact-layout { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:8vw; align-items:start; }
.contact-intro { font-size:16px; line-height:1.7; margin:0 0 36px; }
.contact-details dl { margin:0; }
.contact-details dl > div { margin-bottom:28px; }
.contact-details dt { text-transform:uppercase; font-size:9px; letter-spacing:.08em; color:var(--gray); margin-bottom:6px; }
.contact-details dd { margin:0; font-size:13px; overflow-wrap:anywhere; }
.contact-details a:hover { text-decoration:underline; text-underline-offset:4px; }
.enquiry-form { width:100%; max-width:820px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 20px; }
.form-grid label { display:block; font:700 11px/1.5 var(--font-mono); }
.form-grid label > span { color:var(--gray); font-size:10px; font-weight:400; }
.form-wide { grid-column:1/-1; }
.form-grid input, .form-grid select, .form-grid textarea { display:block; margin-top:10px; width:100%; min-width:0; border:1px solid #b8b8b8; border-radius:0; background:#fff; color:#111; font:13px/1.5 var(--font-mono); padding:13px 12px; }
.form-grid input, .form-grid select { min-height:48px; }
.form-grid textarea { resize:vertical; min-height:145px; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color:#111; outline:1px solid #111; outline-offset:0; }
.form-grid ::placeholder { color:#777; opacity:1; }
.form-trap { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.form-bottom { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:24px; }
.form-bottom p { font-size:9px; line-height:1.6; color:var(--gray); margin:0; }
.form-bottom button { border:1px solid #111; background:#111; color:#fff; padding:16px 22px; display:flex; gap:30px; align-items:center; font:700 11px/1 var(--font-mono); text-transform:uppercase; cursor:pointer; }
.form-bottom button span { font:20px/1 Arial; }
.form-bottom button:hover { background:#fff; color:#111; }
@media(max-width:900px) {
 .editorial-heading { flex-direction:column; align-items:flex-start; gap:24px; }
 .about-editorial { gap:35px; }
 .about-image img { height:560px; }
 .contact-layout { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:35px; }
 .form-grid { grid-template-columns:1fr; }
 .form-bottom { align-items:flex-start; flex-direction:column-reverse; }
}
@media(max-width:600px) {
 .editorial-main { padding-top:40px; padding-bottom:55px; }
 .editorial-heading { margin-bottom:35px; }
 .editorial-heading .display { font-size:88px; }
 .editorial-heading .label { font-size:9px; line-height:1.4; }
 .service-grid, .about-editorial, .contact-layout { grid-template-columns:1fr; }
 .service-grid { gap:38px; }
 .service-title { margin-top:18px; }
 .service-project > p { font-size:12px; }
 .about-editorial { gap:40px; }
 .about-copy > p { font-size:13px; }
 .about-image img { height:auto; aspect-ratio:4/5; }
 .contact-main .editorial-heading .display { font-size:90px; }
 .contact-layout { gap:35px; }
 .contact-details dl { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
 .contact-details dl > div:first-child { grid-column:1/-1; }
 .contact-details dl > div { margin:0; }
 .contact-intro { font-size:14px; margin-bottom:24px; }
 .form-bottom { flex-direction:row; align-items:center; }
}

.contact-main { padding-top:65px; }
.contact-main .editorial-heading { margin-bottom:30px; }
.contact-main .editorial-heading .display { font-size:clamp(90px,9vw,145px); }
.contact-main .enquiry-form { padding-top:2px; }
@media(max-width:600px) { .contact-main { padding-top:40px; } .contact-main .editorial-heading .display { font-size:90px; } }

/* The portfolio's large, unboxed call to action, shared across pages. */
.editorial-link { display:inline-block; padding:0; border:0; font:800 clamp(48px,7vw,110px)/1 var(--font-display); text-transform:uppercase; letter-spacing:normal; }
.editorial-link span { font:inherit; white-space:nowrap; }
.editorial-link:hover { opacity:1; color:var(--accent); }
.form-bottom { flex-direction:column; align-items:flex-start; gap:22px; }
.form-bottom button { display:inline-block; padding:0; border:0; background:none; color:var(--ink); font:800 clamp(48px,7vw,110px)/1 var(--font-display); text-align:left; }
.form-bottom button span { font:inherit; }
.form-bottom button:hover { background:none; color:var(--accent); }
.home-page .studio-button { border:0; padding:0; gap:14px; min-height:0; }
.home-page .studio-button > span:first-child, .home-page .studio-button__arrow { font:800 clamp(34px,4.5vw,64px)/1 var(--font-display); letter-spacing:normal; }
.home-page .studio-button:hover { opacity:.75; }
.home-page .studio-button:hover .studio-button__arrow { transform:none; }

/* Small, relevant questions introduce the large calls to action. */
.question-cta { margin-top:55px; }
.about-copy .question-cta { margin-top:35px; }
.cta-question, .form-bottom .cta-question { margin:0 0 16px; color:var(--gray); font:400 13.5px/1.7 var(--font-mono); text-transform:none; letter-spacing:normal; }
.question-cta .editorial-link, .about-copy .question-cta .editorial-link { margin-top:0; }
.home-page .studio-button .cta-question { position:absolute; bottom:100%; left:0; margin:0 0 12px; white-space:nowrap; color:rgba(255,255,255,.8); font:400 12px/1.5 var(--font-mono); text-transform:none; letter-spacing:normal; }
@media(max-width:600px) { .home-page .studio-button .cta-question { font-size:11px; } }

/* Keep the homepage invitation and wordmark on the same left edge. */
.home-stage { --wordmark-inset:28px; }
.home-page .home-composition, .home-page .studio-button { left:var(--wordmark-inset); }
@media(max-width:900px) { .home-stage { --wordmark-inset:20px; } }
@media(max-width:600px) { .home-stage { --wordmark-inset:12px; } }


/* Personal about page: one introduction and one scanned film portrait. */
.personal-about { max-width:1320px; margin:0 auto; padding-top:88px; padding-bottom:100px; }
.personal-about__layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(55px,8vw,120px); align-items:center; }
.personal-about__copy { max-width:555px; }
.personal-about__eyebrow { margin:0 0 25px; color:#686868; font-size:10px; letter-spacing:.09em; }
.personal-about__copy h1 { font-size:clamp(76px,8.5vw,120px); line-height:.98; margin:0 0 34px; }
.personal-about__bio { max-width:485px; }
.personal-about__bio p { font:400 14px/1.9 var(--font-mono); margin:0 0 20px; text-wrap:pretty; }
.personal-about__bio p:last-child { margin-bottom:0; }
.personal-about__portrait { margin:0; width:100%; max-width:425px; justify-self:center; padding:8px 12px; }
.film-scan { position:relative; width:100%; aspect-ratio:420/610; transform:rotate(2deg); filter:drop-shadow(1px 3px 2px #00000020); }
.film-scan__photo { position:absolute; inset:7.5% 12.85%; width:74.3%; height:85%; object-fit:cover; object-position:20% center; }
.film-scan__photo--empty { display:grid; place-items:center; background:radial-gradient(ellipse at 35% 25%,#352b25 0%,#211b18 48%,#161411 100%); }
.film-scan__photo--empty span { font:10px/1.5 var(--font-mono); text-transform:uppercase; letter-spacing:.16em; color:#b0a18f; }
.film-scan__border { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.personal-about__portrait figcaption { margin-top:25px; font:10px/1.6 var(--font-mono); text-align:center; }
.personal-about__portrait figcaption span { color:#777; }
@media (max-width:900px) {
  .personal-about { padding-top:55px; padding-bottom:70px; }
  .personal-about__layout { gap:35px; }
  .personal-about__copy h1 { font-size:80px; }
  .personal-about__bio p { font-size:13px; line-height:1.8; }
}
@media (max-width:650px) {
  .personal-about { padding:45px 24px 65px; }
  .personal-about__layout { grid-template-columns:minmax(0,1fr); gap:45px; }
  .personal-about__copy { max-width:520px; }
  .personal-about__copy h1 { font-size:clamp(66px,17vw,96px); margin-bottom:26px; }
  .personal-about__eyebrow { margin-bottom:20px; }
  .personal-about__portrait { max-width:335px; }
}

/* Contact page: larger, heavier supporting text and form controls. */
/* Consistent navigation typography across every page. */
.nav__links.nav-label, .home-header .home-nav { font-size:12px; font-weight:700; }
.contact-page .editorial-heading .label { font-size:12px; font-weight:700; line-height:1.5; }
.contact-page .contact-intro { font-size:18px; font-weight:700; line-height:1.7; }
.contact-page .contact-details dt { font-size:12px; font-weight:700; color:#555; }
.contact-page .contact-details dd { font-size:16px; font-weight:700; line-height:1.6; }
.contact-page .form-grid label { font-size:15px; }
.contact-page .form-grid label > span { font-size:13px; font-weight:700; color:#555; }
.contact-page .form-grid input,
.contact-page .form-grid select,
.contact-page .form-grid textarea { font-size:16px; font-weight:700; line-height:1.6; }
.contact-page .form-grid ::placeholder { color:#666; }
.contact-page .form-bottom p { font-size:13px; font-weight:700; line-height:1.7; color:#555; }
.contact-page .form-bottom .cta-question { font-size:16px; font-weight:700; }
.contact-page .form-bottom button:disabled { color:#777; cursor:wait; }
.contact-page .form-status { min-height:1.7em; margin:18px 0 0; color:#9b1c1c; font:700 13px/1.7 var(--font-mono); }
@media (max-width:1100px) {
  .contact-page .form-grid { grid-template-columns:minmax(0,1fr); }
}

/* Branded form confirmation page. */
.thank-you-page { min-height:100dvh; display:flex; flex-direction:column; background:#fff; }
.thank-you-main { flex:1; display:flex; align-items:center; padding-top:70px; padding-bottom:90px; }
.thank-you-content { width:100%; }
.thank-you-kicker { margin:0 0 22px; color:#666; font:700 12px/1.5 var(--font-mono); text-transform:uppercase; letter-spacing:.06em; }
.thank-you-title { margin:0; font:800 clamp(120px,20vw,300px)/.78 var(--font-display); text-transform:uppercase; letter-spacing:-.01em; }
.thank-you-message { max-width:620px; margin:48px 0 0; font:700 clamp(17px,1.6vw,24px)/1.55 var(--font-mono); }
.thank-you-page .question-cta { margin-top:60px; }
.thank-you-page .editorial-link { font-size:clamp(55px,8vw,120px); }
@media (max-width:600px) {
  .thank-you-main { align-items:flex-start; padding-top:75px; padding-bottom:60px; }
  .thank-you-title { font-size:clamp(100px,31vw,160px); line-height:.82; }
  .thank-you-message { margin-top:34px; font-size:15px; }
  .thank-you-page .question-cta { margin-top:48px; }
  .thank-you-page .editorial-link { font-size:clamp(48px,15vw,76px); }
}

/* Consistent monochrome controls on iOS and other mobile browsers. */
.ui-arrow { display:inline-block; width:.65em; height:.65em; vertical-align:.06em; flex-shrink:0; }
.home-nav .ui-arrow, .contact-details .ui-arrow { width:.9em; height:.9em; }
button.work-card { color:var(--ink); -webkit-text-fill-color:var(--ink); -webkit-appearance:none; appearance:none; }
.work-card__image::after { background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 19 19 5M5 5h14v14' stroke='%230a0a0a' stroke-width='1.7'/%3E%3C/svg%3E") center/20px 20px no-repeat; }

/* The studio name sits quietly within the personal introduction. */
@font-face {
  font-family:"Zen Maru Gothic";
  src:url("./fonts/ZenMaruGothic-Medium.ttf") format("truetype");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
.studio-name { max-width:485px; margin-top:32px; }
.studio-name__reading { display:flex; align-items:center; gap:16px; margin:0 0 15px; }
.studio-name__reading [lang="ja"] { font:500 32px/1.3 "Zen Maru Gothic",sans-serif; letter-spacing:.02em; }
.studio-name__pronunciation { font:400 11px/1.5 var(--font-mono); color:var(--gray); }
.studio-name__story { font:400 14px/1.9 var(--font-mono); margin:0; text-wrap:pretty; }
@media(max-width:900px) { .studio-name__story { font-size:13px; line-height:1.8; } }