@font-face {
  font-family: "TYDAL Slab";
  src: url("./roboto-slab.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
:root{
  --brand: #348b41;
  --brand-original: #348c41;
  --ink: #242424;
  --paper: #fff;
  --white: #fff;
  --line: color-mix(in srgb, var(--brand) 20%, white);
  --muted: #555;
  --deep: #348b41;
  --display: "TYDAL Slab",Georgia,serif;
  --body: "PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  --space: clamp(24px,4.5vw,80px);
  --ease: cubic-bezier(.16,1,.3,1);
}
*,
*:before,
*:after{
  box-sizing: border-box;
}
html{
  scroll-behavior: smooth;
  scroll-padding-top: 28px;
}
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
body,
button,
a{
  -webkit-tap-highlight-color: transparent;
}
::selection{
  background: var(--deep);
  color: var(--white);
}
:focus-visible{
  outline: 3px solid var(--deep);
  outline-offset: 6px;
}
a{
  color: inherit;
  text-decoration: none;
  text-underline-offset: .25em;
}
a:hover{
  text-decoration-thickness: 1px;
}
button{
  font: inherit;
  color: inherit;
  cursor: pointer;
}
button:disabled{
  cursor: default;
  opacity: .5;
}
button,
a{
  touch-action: manipulation;
}
img,
video{
  max-width: 100%;
  display: block;
}
svg{
  display: inline-block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  vertical-align: middle;
}
h1,
h2,
h3,
p,
figure{
  margin: 0;
}
h1,
h2,
h3{
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}
p{
  max-width: 70ch;
}
button{
  border-radius: 0;
}
button:focus-visible{
  outline-offset: 3px;
}
[hidden]{
  display: none !important;
}
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.skip-link{
  position: fixed;
  top: 12px;
  left: 20px;
  background: white;
  padding: 12px 22px;
  z-index: 100;
  transform: translateY(-180%);
}
.skip-link:focus{
  transform: none;
}
.site-header{
  height: 116px;
  padding: 0 var(--space);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  border-bottom: 1px solid var(--line);
}
.brand{
  display: block;
  width: 180px;
  flex-shrink: 0;
}
.brand img{
  width: 100%;
  height: auto;
}
.header-right{
  display: flex;
  align-items: center;
  gap: 46px;
}
.main-nav{
  display: flex;
  gap: 32px;
  align-items: center;
}
.main-nav a{
  font-size: 14px;
  white-space: nowrap;
  position: relative;
  padding: 12px 0;
}
.main-nav a:after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
.main-nav a:hover:after,
.main-nav a:focus-visible:after{
  transform: scaleX(1);
}
.language{
  font-family: var(--body);
  font-size: 13px;
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
}
.language:hover{
  background: var(--paper);
}
.menu-toggle{
  display: none;
  background: none;
  border: 0;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
.intro-strip{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px var(--space);
  border-bottom: 1px solid var(--line);
}
.intro-strip p{
  font-size: 14px;
  letter-spacing: .04em;
}
.intro-strip a{
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 13px;
}
.intro-strip a:hover svg{
  transform: translateX(5px);
}
.section{
  padding: 112px var(--space);
}
.section-heading{
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 44px;
  margin-bottom: 64px;
}
.section-heading h2{
  font-size: clamp(30px,3.3vw,50px);
  letter-spacing: -.025em;
  max-width: 16ch;
}
.section-heading p{
  font-size: 15px;
  color: var(--muted);
  padding-top: 10px;
  line-height: 1.9;
  max-width: 40ch;
}
.work-item{
  grid-column: span 6;
  min-width: 0;
}
.work-image{
  aspect-ratio: 1.66;
  overflow: hidden;
  position: relative;
  background: color-mix(in srgb, var(--brand) 10%, white);
}
.work-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.work-view{
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--deep);
  color: white;
  padding: 13px 18px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 18px;
  transform: translateY(100%);
  transition: transform .3s var(--ease);
}
.work-link:hover .work-view,
.work-link:focus-visible .work-view{
  transform: none;
}
.work-link:hover img{
  transform: scale(1.035);
}
.work-meta{
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  padding-top: 22px;
}
.work-meta h3{
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.02em;
}
.work-meta p{
  color: var(--muted);
  font-size: 12px;
  margin-top: 9px;
}
.work-arrow{
  padding-top: 3px;
}
.work-arrow svg{
  width: 28px;
  height: 28px;
  transition: transform .3s;
}
.work-link:hover .work-arrow svg{
  transform: translate(3px,-3px);
}
.about-section{
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: color-mix(in srgb, var(--brand) 10%, white);
}
.about-image{
  min-height: 680px;
  overflow: hidden;
}
.about-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 43% 50%;
}
.about-copy{
  padding: 84px var(--space);
}
.about-copy h2{
  font-size: clamp(28px,3.2vw,48px);
  letter-spacing: -.025em;
  line-height: 1.4;
  margin-bottom: 34px;
}
.about-copy>p{
  font-size: 15px;
  line-height: 2;
  margin-top: 20px;
  color: #242424;
}
.director-line{
  display: flex;
  gap: 22px;
  align-items: center;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid color-mix(in srgb, var(--brand) 20%, white);
}
.director-line img{
  width: 84px;
  height: 96px;
  object-fit: cover;
  flex-shrink: 0;
}
.director-line strong,
.director-line span{
  display: block;
}
.director-line strong{
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 5px;
}
.director-line span{
  font-size: 12px;
  color: var(--muted);
}
.service-list{
  border-top: 1px solid var(--line);
}
.service-row{
  display: grid;
  grid-template-columns: 1fr 1.45fr .85fr;
  gap: 30px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 32px 0;
}
.service-row h3{
  font-size: 25px;
  font-weight: 500;
}
.service-row p{
  font-size: 14px;
  color: var(--muted);
}
.service-en{
  font-family: var(--display);
  font-size: 15px;
  text-align: right;
  color: var(--deep);
}
.contact-section{
  background: var(--brand);
  padding: 84px var(--space);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: end;
  color: #242424;
}
.contact-section h2{
  font-size: clamp(34px,4.1vw,60px);
  color: white;
  line-height: 1.35;
  letter-spacing: -.025em;
}
.contact-section p{
  margin-top: 24px;
  font-size: 14px;
  max-width: 36ch;
}
.contact-email{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--display);
  font-size: clamp(23px,2.5vw,38px);
  font-weight: 500;
  padding-bottom: 20px;
  border-bottom: 1px solid #242424;
  overflow-wrap: anywhere;
}
.contact-email svg{
  width: 40px;
  height: 40px;
  transition: transform .3s var(--ease);
}
.contact-email:hover svg{
  transform: translateX(8px);
}
.contact-action>div{
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 22px;
  font-size: 13px;
}
.site-footer{
  background: #fff;
  padding: 48px var(--space) 24px;
}
.footer-top{
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 44px;
  align-items: center;
  padding-bottom: 45px;
}
.footer-logo{
  width: 190px;
  display: block;
}
.footer-logo img{
  width: 100%;
  height: auto;
}
.footer-top strong,
.footer-top span{
  display: block;
}
.footer-top strong{
  font-size: 14px;
  font-weight: 500;
}
.footer-top span{
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.footer-links a{
  display: block;
  font-size: 14px;
}
.footer-bottom{
  display: flex;
  gap: 30px;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
}
.footer-bottom a{
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-bottom svg{
  width: 16px;
  height: 16px;
}
.footer-bottom a:last-child svg{
  transform: rotate(-90deg);
}
.footer-bottom a:hover,
.footer-links a:hover{
  text-decoration: underline;
}
.back-link{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  margin-bottom: 38px;
}
.back-link svg{
  transform: rotate(180deg);
  width: 20px;
  height: 20px;
}
.project-heading{
  padding-top: 48px;
  padding-bottom: 52px;
}
.project-title{
  display: flex;
  gap: 48px;
  align-items: end;
  justify-content: space-between;
}
.project-title h1{
  font-size: clamp(40px,5.8vw,84px);
  letter-spacing: -.03em;
  max-width: 16ch;
}
.project-title>div{
  flex-shrink: 0;
  max-width: 45%;
  font-size: 13px;
  color: var(--muted);
}
.project-subtitle{
  font-family: var(--display);
  font-size: 25px;
  color: var(--ink);
  margin-bottom: 8px;
}
.project-main-image{
  margin: 0 var(--space);
}
.project-main-image>img{
  width: 100%;
  height: auto;
  aspect-ratio: 1.96;
  object-fit: cover;
}
.project-main-image figcaption,
.project-gallery figcaption{
  font-size: 11px;
  color: var(--muted);
  padding-top: 12px;
}
.project-story{
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 9vw;
  padding-top: 70px;
  padding-bottom: 60px;
}
.project-story h2{
  font-size: clamp(26px,3vw,42px);
  line-height: 1.5;
  margin-bottom: 28px;
  letter-spacing: -.025em;
}
.project-story p{
  font-size: 16px;
  line-height: 2;
  color: #555;
}
.project-story .project-note{
  font-size: 13px;
  color: var(--muted);
  margin-top: 22px;
}
.recognition{
  margin-top: 24px;
  font-weight: 600;
}
.project-actions{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 32px;
}
.button-primary{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--deep);
  color: white;
  min-height: 52px;
  padding: 14px 22px;
  font-size: 14px;
}
.button-primary:hover{
  background: #348b41;
}
.button-primary svg{
  width: 20px;
  height: 20px;
}
.text-link,
.source-link{
  display: inline-flex;
  gap: 14px;
  align-items: center;
  font-size: 13px;
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 20%, white);
  padding: 9px 0;
}
.source-link{
  margin-top: 24px;
  color: var(--muted);
}
.text-link svg,
.source-link svg{
  width: 18px;
  height: 18px;
}
.project-story dl{
  margin: 0;
}
.project-story dl>div{
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.project-story dl>div:first-child{
  border-top: 1px solid var(--line);
}
.project-story dt{
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 7px;
}
.project-story dd{
  font-size: 15px;
  margin: 0;
  overflow-wrap: anywhere;
}
.project-gallery{
  padding-top: 20px;
  padding-bottom: 100px;
  background: var(--paper);
}
.project-gallery figure{
  max-width: 960px;
  margin: auto;
}
.project-gallery img{
  width: 100%;
  height: auto;
  max-height: 780px;
  object-fit: contain;
  object-position: center;
}
.next-project{
  background: color-mix(in srgb, var(--brand) 10%, white);
  padding: 45px var(--space) 55px;
}
.next-project>p{
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 15px;
}
.next-project a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}
.next-project h2{
  font-size: clamp(30px,4.5vw,64px);
}
.next-project svg{
  width: 50px;
  height: 50px;
  transition: transform .3s;
}
.next-project a:hover svg{
  transform: translateX(10px);
}
.legal-page{
  max-width: 1050px;
  margin: auto;
  padding-top: 70px;
}
.legal-page h1{
  font-size: clamp(34px,4vw,56px);
  margin-bottom: 35px;
}
.legal-page h2{
  font-size: 24px;
  margin: 42px 0 16px;
}
.legal-page p{
  color: #555;
  font-size: 16px;
}
.legal-page a{
  text-decoration: underline;
}
.not-found{
  min-height: 65vh;
}
.not-found>p:first-child{
  font-family: var(--display);
  font-size: 72px;
  color: var(--brand);
}
.not-found h1{
  font-size: clamp(30px,5vw,68px);
  margin: 20px 0;
}
.not-found .button-primary{
  margin-top: 32px;
}
html[lang=en] .section-heading h2,
html[lang=en] .about-copy h2,
html[lang=en] .contact-section h2,
html[lang=en] .project-title h1,
html[lang=en] .next-project h2,
html[lang=en] .legal-page h1{
  font-family: var(--display);
  font-weight: 500;
}
html[lang=en] .service-en{
  display: none;
}
html[lang=en] .service-row{
  grid-template-columns: 1fr 1.7fr;
}
html[lang=en] .project-title h1{
  font-size: clamp(38px,5.3vw,76px);
}

@keyframes frame-in {
  from {
    opacity: .7;
    filter: brightness(.85);
  }

  to {
    opacity: 1;
    filter: brightness(1);
  }
}

@media (min-width:1700px) {
.section{
    padding-top: 130px;
    padding-bottom: 130px;
  }
}

@media (max-width:1100px) {
.header-right{
    gap: 25px;
  }
.main-nav{
    gap: 22px;
  }
.section-heading{
    gap: 32px;
  }
.work-meta h3{
    font-size: 23px;
  }
.about-copy{
    padding: 60px 36px;
  }
.about-image{
    min-height: 650px;
  }
.service-row{
    grid-template-columns: 1fr 1.7fr;
  }
.service-en{
    display: none;
  }
.contact-section{
    gap: 40px;
  }
.footer-top{
    grid-template-columns: .8fr 1.1fr 1fr;
    gap: 24px;
  }
.footer-logo{
    width: 155px;
  }
}

@media (max-width:760px) {
:root{
    --space: 24px;
  }
.site-header{
    height: auto;
    min-height: 96px;
    position: relative;
    flex-wrap: wrap;
    padding: 10px 24px;
  }
.brand{
    width: 150px;
  }
.header-right{
    gap: 14px;
  }
.main-nav{
    gap: 20px;
    padding: 14px 0 8px;
    flex-wrap: wrap;
  }
.site-header .main-nav{
    width: 100%;
    order: 3;
  }
.header-right{
    display: contents;
  }
.language{
    margin-left: auto;
    min-width: 40px;
    font-size: 12px;
  }
.menu-toggle{
    display: none;
  }
.js .header-right{
    display: flex;
  }
.js .menu-toggle{
    display: flex;
  }
.js .main-nav{
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    z-index: 20;
    padding: 14px 24px 26px;
    border-bottom: 1px solid var(--line);
  }
.js .main-nav.is-open{
    display: flex;
  }
.main-nav a{
    font-size: 15px;
  }
.intro-strip{
    padding-top: 18px;
    padding-bottom: 18px;
    gap: 14px;
  }
.intro-strip p{
    font-size: 11px;
    letter-spacing: 0;
  }
.intro-strip a{
    font-size: 11px;
    gap: 10px;
  }
.intro-strip svg{
    width: 18px;
    height: 18px;
  }
.section{
    padding-top: 72px;
    padding-bottom: 72px;
  }
.section-heading{
    display: block;
    margin-bottom: 36px;
  }
.section-heading h2{
    font-size: 32px;
    max-width: 18ch;
  }
.section-heading p{
    font-size: 14px;
    margin-top: 22px;
    padding-top: 0;
    max-width: 43ch;
  }
.work-item{
    margin: 0 0 42px;
  }
.work-item:last-child{
    margin-bottom: 0;
  }
.work-image{
    aspect-ratio: 1.5;
  }
.work-meta{
    padding-top: 17px;
  }
.work-meta h3{
    font-size: 24px;
  }
.work-meta p{
    font-size: 12px;
    margin-top: 7px;
  }
.work-view{
    display: none;
  }
.work-arrow svg{
    width: 24px;
    height: 24px;
  }
.about-section{
    grid-template-columns: 1fr;
  }
.about-image{
    min-height: 0;
    aspect-ratio: 1.25;
  }
.about-copy{
    padding: 50px 24px 56px;
  }
.about-copy h2{
    font-size: 33px;
    margin-bottom: 25px;
  }
.about-copy>p{
    font-size: 15px;
    line-height: 1.95;
  }
.director-line{
    margin-top: 30px;
    padding-top: 25px;
  }
.service-row,
  html[lang=en] .service-row{
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 25px 0;
  }
.service-row h3{
    font-size: 23px;
  }
.service-row p{
    font-size: 14px;
  }
.contact-section{
    grid-template-columns: 1fr;
    padding: 54px 24px;
    gap: 40px;
  }
.contact-section h2{
    font-size: 42px;
  }
.contact-section p{
    font-size: 13px;
    margin-top: 22px;
  }
.contact-email{
    font-size: 28px;
    gap: 10px;
  }
.contact-email svg{
    width: 28px;
    height: 28px;
  }
.contact-action>div{
    font-size: 12px;
  }
.site-footer{
    padding: 36px 24px 22px;
  }
.footer-top{
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding-bottom: 30px;
  }
.footer-logo{
    width: 155px;
    flex-basis: 155px;
    margin-right: 100%;
  }
.footer-top>div{
    width: 100%;
  }
.footer-top strong{
    font-size: 13px;
  }
.footer-top span,
  .footer-links a{
    font-size: 12px;
  }
.footer-bottom{
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 15px 25px;
    font-size: 10px;
  }
.footer-bottom>span{
    width: 100%;
  }
.project-heading{
    padding-top: 30px;
    padding-bottom: 32px;
  }
.back-link{
    margin-bottom: 24px;
  }
.project-title{
    display: block;
  }
.project-title h1{
    font-size: 44px;
  }
.project-title>div{
    max-width: none;
    margin-top: 22px;
  }
.project-subtitle{
    font-size: 23px;
  }
.project-main-image{
    margin: 0;
  }
.project-main-image>img{
    aspect-ratio: 1.45;
  }
.project-main-image figcaption{
    padding: 10px 24px 0;
  }
.project-story{
    grid-template-columns: 1fr;
    gap: 38px;
    padding-top: 42px;
    padding-bottom: 40px;
  }
.project-story h2{
    font-size: 29px;
  }
.project-story p{
    font-size: 15px;
  }
.project-story .project-note{
    font-size: 12px;
  }
.project-story dl{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
  }
.project-story dl>div:nth-child(2){
    border-top: 1px solid var(--line);
  }
.project-story dd{
    font-size: 13px;
  }
.project-gallery{
    padding-top: 10px;
    padding-bottom: 50px;
  }
.project-gallery img{
    max-height: 570px;
  }
.next-project{
    padding-top: 35px;
    padding-bottom: 40px;
  }
.next-project h2{
    font-size: 34px;
  }
.next-project svg{
    width: 34px;
    height: 34px;
  }
.legal-page{
    padding-top: 44px;
  }
.legal-page h1{
    font-size: 34px;
  }
.legal-page h2{
    font-size: 23px;
  }
.legal-page p{
    font-size: 15px;
  }
html[lang=en] .project-title h1{
    font-size: 43px;
    overflow-wrap: anywhere;
  }
}

@media (max-width:370px) {
.site-header{
    padding-left: 18px;
    padding-right: 18px;
  }
.brand{
    width: 135px;
  }
.js .header-right{
    gap: 8px;
  }
.menu-toggle{
    font-size: 12px;
    gap: 5px;
  }
.menu-toggle svg{
    width: 20px;
  }
.contact-email{
    font-size: 24px;
  }
.contact-section h2{
    font-size: 37px;
  }
.project-story dl{
    grid-template-columns: 1fr;
  }
.project-story dl>div:nth-child(2){
    border-top: 0;
  }
}

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

@media print {
.site-header,
  .next-project,
  .menu-toggle,
  .language,
  .footer-bottom{
    display: none;
  }

  .about-section,
  .contact-section{
    display: block;
    background: white;
    color: black;
  }

  .contact-section h2{
    color: black;
  }
.section{
    padding: 25px;
  }
.work-item{
    break-inside: avoid;
    margin: 20px 0;
  }
.work-image{
    max-height: 240px;
  }
.work-view{
    display: none;
  }
.about-image{
    max-height: 250px;
  }
.site-footer{
    break-inside: avoid;
  }
a{
    text-decoration: underline;
  }
}

/* Responsive and identity corrections from the first inspection. */

@font-face {
  font-family: "TYDAL DIN";
  src: local("DIN Next Slab W01 Regular");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "TYDAL DIN";
  src: local("DIN Next Slab W01 Medium");
  font-weight: 500 600;
  font-display: swap;
}

@font-face {
  font-family: "TYDAL DIN";
  src: local("DIN Next Slab W01 Bold");
  font-weight: 700 900;
  font-display: swap;
}
:root{
  --display: "TYDAL DIN","TYDAL Slab",Georgia,serif;
}
.site-header{
  height: 128px;
}
.brand{
  width: 160px;
}
.section-heading h2{
  max-width: 60%;
  flex: 0 1 60%;
}

@media (max-width:760px) {
.site-header{
    height: auto;
    min-height: 116px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
.brand{
    width: 140px;
  }
.section-heading h2{
    max-width: 100%;
  }
}

@media (max-width:370px) {
.brand{
    width: 135px;
  }
}

@media (max-width:760px) {

  .footer-bottom{
    font-size: 11px;
  }
}

.contact-section{
  color: #242424;
}

@media (max-width:760px) {
.footer-top{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
.footer-logo{
    width: 155px;
    flex: none;
    margin-right: 0;
  }
}
:root{
  --brand-readable: #348b41;
  --cjk: "PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  --body: "TYDAL DIN","TYDAL Slab","PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  --type-body: 16px;
  --type-meta: 13px;
  --type-title: clamp(26px,2.4vw,36px);
  --type-section: clamp(30px,3.3vw,50px);
}
body{
  font-family: var(--body);
  font-size: var(--type-body);
  font-synthesis: none;
}
h1,
h2,
h3,
strong{
  font-weight: 600;
}
html[lang=en] h1,
html[lang=en] h2,
html[lang=en] h3,
html[lang=en] strong{
  font-weight: 500;
}
[lang=en]{
  font-family: var(--display);
}
[lang=zh-Hant]{
  font-family: var(--cjk);
}
html[lang=zh-Hant]{
  font-family: var(--body);
}
.intro-strip>div{
  display: flex;
  gap: 30px;
}
.intro-strip a{
  padding: 8px 0;
  min-height: 44px;
}
.intro-strip a:hover{
  text-decoration: underline;
}
.intro-strip p{
  font-size: 14px;
  letter-spacing: 0;
}
.section-heading h2{
  font-size: var(--type-section);
  max-width: 60%;
  flex-basis: 60%;
}
.section-heading p{
  font-size: 16px;
  max-width: 45ch;
}
.film-grid{
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 42px;
}
.work-item{
  min-width: 0;
}
.film-grid .work-image{
  aspect-ratio: 16/10;
}
.work-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.work-meta{
  align-items: start;
  padding-top: 20px;
}
.work-meta h3{
  font-size: var(--type-title);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
}
.work-meta .project-client{
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 7px;
}
.work-meta .work-subtitle{
  font-size: 16px;
  color: var(--ink);
  margin-top: 8px;
}
.work-arrow{
  padding-top: 26px;
}
.work-view{
  font-size: 14px;
}
.work-recognition{
  font-size: 13px;
  line-height: 1.85;
  color: var(--deep);
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  max-width: none;
}
.work-context{
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
  margin-top: 5px;
}
.music-section{
  padding-top: 0;
}
.music-grid{
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 28px;
}
.music-grid .work-image{
  aspect-ratio: 16/10;
}
.music-grid .work-meta h3{
  font-size: 24px;
  line-height: 1.4;
  max-width: 20ch;
}
.music-grid .work-subtitle{
  font-size: 14px;
}
.music-grid .work-recognition{
  margin-top: 16px;
}
.commissions-section{
  padding-top: 0;
}
.commission-list{
  border-top: 1px solid var(--line);
}
.commission-item{
  border-bottom: 1px solid var(--line);
}
.commission-item>a{
  display: grid;
  grid-template-columns: 180px 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 24px 0;
}
.commission-item img{
  width: 180px;
  height: 104px;
  object-fit: cover;
}
.commission-item h3{
  font-size: 23px;
  font-weight: 500;
  line-height: 1.4;
}
.commission-item p{
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
}
.commission-item>a>span{
  display: flex;
  gap: 18px;
  align-items: center;
  font-size: 13px;
}
.commission-item a:hover h3{
  text-decoration: underline;
}
.about-copy p,
.service-row p{
  font-size: 16px;
}
.about-copy h2{
  font-size: var(--type-section);
}
.service-row h3{
  font-weight: 500;
}
.service-en{
  font-family: var(--display);
}
.contact-section{
  background: var(--brand-readable);
  color: white;
}
.contact-section h2{
  font-weight: 500;
}
.contact-section p,
.contact-action>div,
.contact-email{
  color: white;
}
.contact-email{
  border-color: color-mix(in srgb, var(--brand) 20%, white);
  font-weight: 500;
}
.contact-section :focus-visible{
  outline-color: white;
}
.contact-section p{
  font-size: 16px;
}
.contact-action>div{
  font-size: 14px;
}
.site-footer{
  font-size: 13px;
}
.footer-bottom{
  font-size: 12px;
}
.footer-top strong{
  font-weight: 500;
}
.project-title h1{
  font-weight: 500;
  line-height: 1.25;
}
.project-subtitle{
  font-family: var(--body);
}
.project-story>div>p{
  font-size: 16px;
  max-width: 65ch;
}
.project-story h2{
  font-weight: 500;
}
.project-story .project-note{
  font-size: 14px;
}
.project-recognition{
  margin: 32px 0;
}
.project-recognition h3{
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 16px;
}
.project-recognition ul{
  padding: 0;
  margin: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.project-recognition li{
  border-bottom: 1px solid var(--line);
}
.project-recognition a{
  display: grid;
  grid-template-columns: 1fr 24px;
  gap: 4px 16px;
  padding: 16px 0;
}
.project-recognition a>span:first-child{
  font-size: 13px;
  color: var(--muted);
  grid-column: 1;
}
.project-recognition strong{
  font-size: 16px;
  font-weight: 500;
  grid-column: 1;
}
.project-recognition svg{
  grid-column: 2;
  grid-row: 1/3;
  align-self: center;
  width: 19px;
  height: 19px;
}
.project-recognition a:hover strong{
  text-decoration: underline;
}
.project-recognition .sr-only{
  grid-column: 1;
}
.next-project h2{
  font-weight: 500;
}

@media (min-width:761px) and (max-width:1100px) {
.music-grid{
    gap: 22px;
  }
.music-grid .work-meta h3{
    font-size: 22px;
  }
.commission-item>a{
    grid-template-columns: 150px 1fr auto;
    gap: 24px;
  }
.commission-item img{
    width: 150px;
    height: 90px;
  }
}

@media (max-width:760px) {
.intro-strip{
    display: block;
    padding: 20px 24px;
  }
.intro-strip>div{
    gap: 28px;
    margin-top: 8px;
  }
.intro-strip a{
    font-size: 13px;
  }
.intro-strip p{
    font-size: 14px;
  }
.section-heading h2{
    max-width: 100%;
    font-size: 32px;
    flex-basis: auto;
  }
.section-heading p{
    font-size: 16px;
    max-width: 100%;
    padding-top: 0;
  }
.section-heading{
    margin-bottom: 36px;
    gap: 22px;
  }
.film-grid{
    grid-template-columns: 1fr;
    gap: 44px;
  }
.film-grid .work-image{
    aspect-ratio: 16/10;
  }
.work-meta h3{
    font-size: 30px;
  }
.work-meta .work-subtitle{
    font-size: 16px;
  }
.work-recognition{
    font-size: 13px;
    margin-top: 16px;
  }
.work-context{
    font-size: 13px;
  }
.work-arrow{
    padding-top: 26px;
  }
.music-section,
  .commissions-section{
    padding-top: 0;
  }
.music-grid{
    grid-template-columns: 1fr;
    gap: 40px;
  }
.music-grid .work-image{
    aspect-ratio: 16/9;
  }
.music-grid .work-meta h3{
    font-size: 26px;
    max-width: none;
  }
.music-grid .work-subtitle{
    font-size: 15px;
  }
.music-grid .work-recognition{
    font-size: 13px;
  }
.commission-item>a{
    grid-template-columns: 100px 1fr;
    gap: 18px;
    padding: 22px 0;
  }
.commission-item img{
    width: 100px;
    height: 74px;
  }
.commission-item h3{
    font-size: 19px;
  }
.commission-item p{
    font-size: 12px;
  }
.commission-item>a>span{
    display: none;
  }
.about-copy h2{
    font-size: 32px;
  }
.about-copy p,
  .service-row p{
    font-size: 16px;
  }
.contact-section p{
    font-size: 16px;
  }
.contact-action>div{
    font-size: 13px;
  }
.footer-bottom{
    font-size: 12px;
  }
.footer-top{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
.footer-logo{
    width: 155px;
    flex: none;
    margin: 0;
  }
.project-title h1{
    font-size: 38px;
  }
.project-story h2{
    font-size: 28px;
  }
.project-story p{
    font-size: 16px;
  }
.project-recognition strong{
    font-size: 16px;
  }
}

@media (max-width:370px) {
.intro-strip>div{
    gap: 20px;
  }
.commission-item>a{
    grid-template-columns: 88px 1fr;
    gap: 15px;
  }
.commission-item img{
    width: 88px;
    height: 68px;
  }
.commission-item h3{
    font-size: 18px;
  }
}

@media print {

  .contact-section{
    background: white;
    color: black;
  }

  .contact-section p,
  .contact-email,
  .contact-action>div{
    color: black;
  }
.commission-item img{
    max-width: 120px;
  }
}
.film-grid>.work-item,
.music-grid>.work-item{
  grid-column: auto;
  margin-top: 0;
}
.skip-link{
  clip-path: inset(50%);
}
.skip-link:focus{
  clip-path: none;
}
:root{
  --soft-surface: color-mix(in srgb, var(--brand) 10%, white);
  --on-deep: #fff;
}
html{
  scrollbar-color: var(--muted) var(--paper);
}
.intro-strip{
  padding-top: 28px;
  padding-bottom: 28px;
  align-items: center;
}
.intro-strip>p{
  font-size: 16px;
  line-height: 1.85;
  max-width: 58ch;
}
.intro-strip>div{
  flex-shrink: 0;
  gap: 26px;
}
.film-grid{
  gap: clamp(28px,3.4vw,56px);
}
.film-grid .work-image{
  aspect-ratio: 1.9;
}
.film-title-art{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 176px;
  padding: 20px 28px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.film-title-art img{
  width: auto;
  height: auto;
  max-width: min(65%,240px);
  max-height: 134px;
  object-fit: contain;
  object-position: left center;
  transform: none;
}
.work-link:hover .film-title-art img{
  transform: none;
}
.film-grid .work-meta{
  padding-top: 20px;
  gap: 24px;
  align-items: center;
}
.film-grid .work-meta .project-client{
  font-size: 13px;
  margin: 0;
}
.film-grid .work-meta .work-subtitle{
  font-size: 17px;
  margin-top: 5px;
}
.film-grid .work-arrow{
  padding-top: 0;
}
.film-grid .work-recognition{
  margin-top: 22px;
}
.film-grid>.work-item,
.music-grid>.work-item{
  margin-bottom: 0;
}
.coproduction-section{
  background: var(--deep);
  color: var(--white);
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(56px,9vw,150px);
  align-items: start;
}
.coproduction-copy h2{
  font-size: var(--type-section);
  line-height: 1.35;
  letter-spacing: -.025em;
  max-width: 16ch;
  font-weight: 500;
  margin-bottom: 28px;
}
.coproduction-copy>p{
  font-size: 17px;
  line-height: 1.95;
  color: var(--on-deep);
  max-width: 39ch;
}
.coproduction-copy>a{
  display: inline-flex;
  align-items: center;
  gap: 30px;
  min-height: 48px;
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 20%, white);
  padding: 10px 0;
  margin-top: 30px;
  font-size: 15px;
  color: var(--white);
}
.coproduction-copy>a:hover{
  border-bottom-color: white;
}
.coproduction-copy>a svg{
  width: 22px;
  height: 22px;
  transition: transform .3s var(--ease);
}
.coproduction-copy>a:hover svg{
  transform: translateX(5px);
}
.coproduction-cases article{
  padding: 28px 0;
  border-top: 1px solid color-mix(in srgb, var(--brand) 20%, white);
}
.coproduction-cases article:first-child{
  padding-top: 22px;
}
.coproduction-cases article:last-child{
  padding-bottom: 0;
}
.coproduction-cases h3{
  font-size: 26px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 14px;
}
.coproduction-cases p{
  font-size: 16px;
  line-height: 1.9;
  color: var(--on-deep);
  max-width: 50ch;
}
.coproduction-cases small{
  display: block;
  margin-top: 15px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--on-deep);
}
.coproduction-cases a:hover{
  text-decoration: underline;
}
.coproduction-section :focus-visible{
  outline-color: white;
}
.coproduction-section+.music-section{
  padding-top: 112px;
}
a.director-line{
  position: relative;
  padding-bottom: 8px;
  min-width: 0;
}
a.director-line>div{
  min-width: 0;
  flex: 1;
}
a.director-line>span:last-child{
  margin-left: auto;
  flex-shrink: 0;
  align-self: center;
  color: var(--deep);
}
a.director-line>span:last-child svg{
  width: 23px;
  height: 23px;
  transition: transform .3s var(--ease);
}
a.director-line:hover strong{
  text-decoration: underline;
  text-underline-offset: .3em;
}
a.director-line:hover>span:last-child svg{
  transform: translate(3px,-3px);
}
.project-title.has-title-art{
  min-height: 195px;
  align-items: center;
}
.project-title .project-title-art{
  width: auto;
  max-width: 340px;
  height: auto;
  max-height: 218px;
  object-fit: contain;
  object-position: left center;
}
.project-title.has-title-art>div{
  border-left: 1px solid var(--line);
  padding: 8px 0 8px 32px;
  min-width: 240px;
}
.project-page:has(.has-title-art)>.project-main-image>img{
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
}
.project-production{
  display: grid;
  grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr);
  gap: clamp(50px,8vw,130px);
  background: var(--soft-surface);
  padding-top: 80px;
  padding-bottom: 84px;
}
.project-production>h2{
  font-size: clamp(28px,3vw,42px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.025em;
  max-width: 15ch;
}
.production-body>p,
.production-body>div>p{
  font-size: 16px;
  line-height: 2;
  max-width: 65ch;
  color: #242424;
}
.production-body>p+p{
  margin-top: 20px;
}
.production-body>div+div{
  margin-top: 30px;
}
.production-body>div>a{
  display: inline-flex;
  gap: 18px;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 20%, white);
  padding: 9px 0;
  margin-top: 20px;
  font-size: 14px;
}
.production-credits{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
  margin: 32px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--brand) 20%, white);
}
.production-credits>div{
  padding: 19px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 20%, white);
  min-width: 0;
}
.production-credits dt{
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
  line-height: 1.6;
}
.production-credits dd{
  font-size: 15px;
  margin: 0;
  line-height: 1.85;
  overflow-wrap: anywhere;
}
.production-credits dd a{
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--brand) 20%, white);
}
.project-gallery{
  padding-top: 72px;
  padding-bottom: 90px;
}
.project-gallery .gallery-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
.project-gallery .gallery-grid figure{
  width: 100%;
  max-width: none;
  margin: 0;
}
.project-gallery .gallery-grid img{
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  aspect-ratio: auto;
}
.project-gallery .gallery-grid>figure:only-child{
  grid-column: 1/-1;
  max-width: 960px;
  margin: auto;
}
.project-gallery figcaption{
  font-size: 12px;
  line-height: 1.7;
}
.production-intro{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(48px,8vw,130px);
  align-items: end;
  padding-top: 92px;
  padding-bottom: 88px;
  border-bottom: 1px solid var(--line);
}
.production-intro h1{
  font-size: clamp(42px,5.3vw,76px);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -.03em;
  max-width: 13ch;
}
.production-intro>p{
  font-size: 18px;
  line-height: 1.95;
  color: #242424;
  max-width: 48ch;
}
.production-case{
  display: grid;
  grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr);
  gap: clamp(50px,8vw,130px);
  border-bottom: 1px solid var(--line);
  padding-top: 84px;
  padding-bottom: 90px;
}
.production-case:nth-of-type(odd){
  background: var(--soft-surface);
}
.production-case>aside{
  min-width: 0;
}
.production-case>aside>img{
  width: auto;
  height: auto;
  max-width: min(100%,290px);
  max-height: 220px;
  object-fit: contain;
  object-position: left center;
  margin: 0 0 32px;
}
.production-case>aside figure{
  background: var(--white);
  padding: 24px;
  margin-bottom: 28px;
}
.production-case>aside figure img{
  width: 100%;
  height: 190px;
  object-fit: contain;
}
.production-case>aside>p{
  font-size: 14px;
  line-height: 1.85;
  color: var(--muted);
  max-width: 30ch;
}
.production-case>aside>p+p{
  margin-top: 8px;
}
.production-case>aside>a{
  display: inline-flex;
  align-items: center;
  gap: 20px;
  min-height: 44px;
  margin-top: 20px;
  font-size: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 20%, white);
}
.production-case>aside>dl{
  margin: 24px 0 0;
  font-size: 13px;
}
.production-case>aside>dl>div{
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.production-case>aside dt{
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 3px;
}
.production-case>aside dd{
  margin: 0;
  overflow-wrap: anywhere;
}
.production-case>div{
  min-width: 0;
}
.production-case>div>h2{
  font-size: clamp(28px,3vw,42px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.025em;
  margin-bottom: 26px;
  max-width: 22ch;
}
.production-case>div>p{
  font-size: 16px;
  line-height: 2;
  max-width: 65ch;
  color: #242424;
}
.production-case>div>p+p{
  margin-top: 20px;
}
.production-records{
  margin-top: 38px;
}
.production-records h3{
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 16px;
}
.production-records ul{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid color-mix(in srgb, var(--brand) 20%, white);
}
.production-records li{
  padding: 15px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 20%, white);
  font-size: 14px;
  line-height: 1.85;
  font-variant-numeric: tabular-nums;
}
.production-records li a{
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
}
.production-records li a:hover{
  text-decoration: underline;
}
.production-records li a svg{
  width: 18px;
  height: 18px;
  margin-top: 4px;
}
.production-records li small,
.production-records li time{
  font-size: 12px;
  color: var(--muted);
}
.production-records li strong{
  font-weight: 500;
}
.production-records .project-recognition{
  margin: 0;
}
.production-records .project-recognition a{
  display: grid;
  padding: 0;
}
.production-records .project-note{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.85;
  margin-top: 16px;
}
.production-contact{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 20px 56px;
  background: var(--deep);
  color: white;
}
.production-contact h2{
  font-size: var(--type-section);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.025em;
}
.production-contact p{
  font-size: 16px;
  line-height: 1.95;
  color: var(--on-deep);
  margin-top: 22px;
  max-width: 44ch;
}
.production-contact>h2{
  grid-column: 1;
  grid-row: 1/3;
  align-self: start;
}
.production-contact>p{
  grid-column: 2;
  margin-top: 0;
}
.production-contact>a{
  grid-column: 2;
}
.production-contact>a,
.production-contact>div>a{
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  min-height: 52px;
  font-family: var(--display);
  font-size: clamp(22px,2.5vw,36px);
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 20%, white);
  padding: 16px 0;
  overflow-wrap: anywhere;
}
.production-contact>a.button-primary{
  background: transparent;
}
.production-contact>a:hover{
  border-bottom-color: white;
}
.production-contact :focus-visible{
  outline-color: white;
}

@media (min-width:761px) and (max-width:1100px) {
.header-right{
    gap: 26px;
  }
.main-nav{
    gap: 22px;
  }
.intro-strip>p{
    max-width: 42ch;
  }
.intro-strip>div{
    gap: 20px;
  }
.film-title-art{
    height: 156px;
    padding: 18px 24px;
  }
.film-title-art img{
    max-height: 120px;
    max-width: 72%;
  }
.coproduction-section{
    gap: 48px;
  }
.coproduction-copy>p{
    font-size: 16px;
  }
.project-production,
  .production-case{
    grid-template-columns: minmax(0,.65fr) minmax(0,1.35fr);
    gap: 48px;
  }
.production-case>aside>img{
    max-height: 180px;
  }
.production-credits{
    gap: 0 22px;
  }
}

@media (max-width:760px) {
.intro-strip{
    padding-top: 25px;
    padding-bottom: 22px;
  }
.intro-strip>p{
    font-size: 15px;
    max-width: 40ch;
  }
.intro-strip>div{
    margin-top: 15px;
    gap: 26px;
  }
.film-grid{
    gap: 48px;
  }
.film-grid .work-image{
    aspect-ratio: 1.78;
  }
.film-title-art{
    height: 142px;
    padding: 16px 22px;
  }
.film-title-art img{
    max-width: 68%;
    max-height: 108px;
  }
.film-grid .work-meta{
    padding-top: 17px;
  }
.film-grid .work-meta .work-subtitle{
    font-size: 16px;
  }
.film-grid .work-recognition{
    margin-top: 18px;
  }
.coproduction-section{
    grid-template-columns: 1fr;
    gap: 44px;
    padding-top: 60px;
    padding-bottom: 64px;
  }
.coproduction-copy h2{
    font-size: 32px;
    max-width: 18ch;
    margin-bottom: 24px;
  }
.coproduction-copy>p{
    font-size: 16px;
    max-width: 100%;
  }
.coproduction-copy>a{
    margin-top: 24px;
  }
.coproduction-cases article{
    padding: 24px 0;
  }
.coproduction-cases h3{
    font-size: 24px;
  }
.coproduction-cases p{
    font-size: 15px;
  }
.coproduction-cases small{
    font-size: 12px;
  }
.coproduction-section+.music-section{
    padding-top: 72px;
  }
a.director-line{
    gap: 18px;
  }
a.director-line>span:last-child svg{
    width: 20px;
    height: 20px;
  }
.project-title.has-title-art{
    display: block;
    min-height: 0;
  }
.project-title .project-title-art{
    max-width: 250px;
    max-height: 180px;
    margin: 8px 0 28px;
  }
.project-title.has-title-art>div{
    margin-top: 0;
    padding: 17px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
    min-width: 0;
    max-width: 100%;
  }
.project-production{
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 56px;
    padding-bottom: 60px;
  }
.project-production>h2{
    font-size: 28px;
    max-width: 100%;
  }
.production-body>p{
    font-size: 16px;
  }
.production-credits{
    gap: 0 22px;
    margin-top: 28px;
  }
.production-credits>div{
    padding: 17px 0;
  }
.production-credits dd{
    font-size: 14px;
  }
.project-gallery{
    padding-top: 44px;
    padding-bottom: 56px;
  }
.project-gallery .gallery-grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }
.project-gallery figcaption{
    font-size: 11px;
  }
.production-intro{
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 52px;
    padding-bottom: 52px;
    align-items: start;
  }
.production-intro h1{
    font-size: 42px;
    max-width: 14ch;
  }
.production-intro>p{
    font-size: 16px;
    line-height: 1.95;
  }
.production-case{
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 52px;
    padding-bottom: 60px;
  }
.production-case>aside>img{
    max-width: 245px;
    max-height: 174px;
    margin-bottom: 24px;
  }
.production-case>aside figure{
    max-width: 320px;
    margin-bottom: 22px;
  }
.production-case>aside figure img{
    height: 150px;
  }
.production-case>aside>p{
    max-width: 100%;
  }
.production-case>aside>dl{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
  }
.production-case>div>h2{
    font-size: 28px;
    max-width: 100%;
    margin-bottom: 22px;
  }
.production-case>div>p{
    font-size: 16px;
  }
.production-records{
    margin-top: 32px;
  }
.production-records li{
    font-size: 13px;
  }
.production-records li a{
    gap: 15px;
  }
.production-contact{
    grid-template-columns: 1fr;
    gap: 30px;
    padding-top: 56px;
    padding-bottom: 60px;
  }
.production-contact h2{
    font-size: 32px;
  }
.production-contact p{
    font-size: 16px;
    margin-top: 20px;
  }
.production-contact>a,
  .production-contact>div>a{
    font-size: 27px;
  }
.production-contact>h2,
  .production-contact>p,
  .production-contact>a{
    grid-column: 1;
    grid-row: auto;
  }
.production-contact>p{
    margin-top: 0;
  }
}

@media (max-width:370px) {
.production-credits{
    grid-template-columns: 1fr;
  }
.production-intro h1{
    font-size: 37px;
  }
.production-contact>a,
  .production-contact>div>a{
    font-size: 24px;
  }
.film-title-art{
    height: 130px;
  }
.film-title-art img{
    max-height: 98px;
  }
a.director-line{
    gap: 14px;
  }
a.director-line img{
    width: 70px;
    height: 84px;
  }
}

@media print {
.coproduction-section,
  .project-production,
  .production-contact,
  .production-case:nth-of-type(odd){
    background: white;
    color: black;
  }
.coproduction-copy>p,
  .coproduction-copy>a,
  .coproduction-cases p,
  .coproduction-cases small,
  .production-contact p{
    color: black;
  }
.production-case,
  .project-production{
    break-inside: avoid;
  }
.production-intro,
  .production-case,
  .project-production,
  .production-contact{
    padding: 25px;
  }
}

@media (min-width:761px) {
.main-nav{
    order: -1;
  }
}

@media (max-width:760px) {
}
.project-main-image>img{
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
}
.project-main-image.source-limited{
  max-width: 966px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width:760px) {
.project-main-image.source-limited{
    max-width: 100%;
    margin: 0;
  }
}
.work-release{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  margin-top: 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.work-release svg{
  width: 17px;
  height: 17px;
}
.project-release{
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.project-release h3{
  font-size: 18px;
  margin-bottom: 16px;
}
.project-release .text-link{
  margin-top: 12px;
}

@media (max-width:760px) {
}
.intro-strip{ gap: 32px; }
.intro-strip>div{ flex-wrap: wrap; justify-content: flex-end; max-width: 39%; gap: 12px 24px; }
.intro-strip a{ min-height: 44px; display: inline-flex; align-items: center; }
.film-grid{ grid-template-columns: 1.08fr 1fr; align-items: start; }
.film-grid>.work-item:nth-child(2){ margin-top: 84px; }
.film-grid .work-image{ aspect-ratio: 1.92; }
.film-title-art{
  position: relative;
  width: 78%;
  height: 134px;
  margin-top: -30px;
  margin-left: 22%;
  padding: 20px 26px;
  border: 0;
  box-shadow: 0 12px 24px rgba(23,38,27,.07);
}
.film-title-art img{ max-height: 100px; max-width: 78%; }
.film-grid .work-meta{ margin-top: 8px; }
.music-section{ background: color-mix(in srgb, var(--brand) 5%, white); padding-top: 96px; padding-bottom: 96px; }
.music-grid{ gap: 28px; }
.music-grid>.work-item:nth-child(2){ padding-top: 38px; }
.music-grid>.work-item:nth-child(3){ padding-top: 76px; }
.commissions-section{ padding-top: 76px; padding-bottom: 80px; }
.coproduction-section{ grid-template-columns: .85fr 1.15fr; gap: 8vw; }
.coproduction-copy{ position: sticky; top: 128px; }
.coproduction-copy>p{ max-width: 42ch; }
.coproduction-cases{ display: grid; grid-template-columns: 1fr 1fr; gap: 25px; min-width: 0; }
.coproduction-cases article,
.coproduction-cases article:first-child{ padding: 0; border: 0; }
.coproduction-cases article:nth-child(2){ padding-top: 84px; }
.coproduction-photo{ width: 100%; height: auto; aspect-ratio: 1.2; object-fit: cover; margin-bottom: 25px; }
.coproduction-cases h3{ font-size: 23px; }
.coproduction-cases h3 svg{ width: 20px; height: 20px; }
.coproduction-cases p{ font-size: 14px; line-height: 1.9; }
.about-section{ border-top: 1px solid #555; }
.service-row{ transition: background-color .2s var(--ease); }
.service-row:hover{ background: color-mix(in srgb, var(--brand) 5%, white); }
.contact-guidance{ font-size: 15px; line-height: 1.9; max-width: 52ch; margin: 0 0 26px; color: #fff; }
.production-case{ column-gap: 7vw; row-gap: 52px; }
.production-visual{ grid-column: 1 / -1; margin: 0; }
.production-visual>img{ width: 100%; height: auto; max-height: 590px; object-fit: cover; }
.production-visual>figcaption{ font-size: 12px; line-height: 1.7; color: var(--muted); margin-top: 12px; }
.production-case>aside{ padding-top: 8px; }
.production-case>aside>img{ max-height: 180px; }
.production-case:nth-of-type(2) .production-visual{ width: 88%; margin-left: auto; }
.production-case:nth-of-type(2)>aside{ grid-column: 1; }
.production-intro{ border-bottom: 1px solid var(--line); }

@media (max-width: 1100px) and (min-width: 761px) {
.main-nav{ gap: 20px; }
.header-right{ gap: 24px; }
.coproduction-section{ grid-template-columns: 1fr 1.25fr; gap: 40px; }
.coproduction-cases{ grid-template-columns: 1fr; }
.coproduction-cases article:nth-child(2){ padding-top: 20px; }
.coproduction-photo{ aspect-ratio: 1.9; }
}
@media (max-width: 760px) {
.intro-strip>div{ max-width: 100%; justify-content: flex-start; gap: 8px 24px; }
.film-grid{ grid-template-columns: 1fr; gap: 44px; }
.film-grid>.work-item:nth-child(2){ margin-top: 0; }
.film-title-art{ height: 115px; padding: 14px 24px; margin-top: -22px; }
.film-title-art img{ max-height: 87px; }
.music-grid>.work-item:nth-child(2),
  .music-grid>.work-item:nth-child(3){ padding-top: 0; }
.coproduction-section{ grid-template-columns: 1fr; gap: 40px; }
.coproduction-copy{ position: static; }
.coproduction-cases{ grid-template-columns: 1fr 1fr; gap: 18px; }
.coproduction-cases article:nth-child(2){ padding-top: 42px; }
.coproduction-photo{ aspect-ratio: 1; margin-bottom: 18px; }
.coproduction-cases h3{ font-size: 20px; }
.coproduction-cases p{ font-size: 14px; }
.production-case{ gap: 30px; }
.production-visual{ margin-left: calc(-1 * var(--space)); width: calc(100% + 2 * var(--space)); }
.production-visual>figcaption{ padding: 0 var(--space); }
.production-case:nth-of-type(2) .production-visual{ width: calc(100% + 2 * var(--space)); margin-left: calc(-1 * var(--space)); }
.production-case>aside>img{ max-height: 150px; margin-bottom: 18px; }
.contact-guidance{ font-size: 14px; margin-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
}
@media print {
.coproduction-copy{ position: static; }
.production-visual{ width: 100%; margin: 0; }
}

@media (max-width:760px) {
.music-section{ padding-top: 64px; padding-bottom: 64px; } }
:root{
 --paper: #fff;
 --ink: #242424;
 --muted: #555;
 --deep: #348b41;
 --brand-readable: #348b41;
 --soft-surface: color-mix(in srgb,var(--brand) 10%,white);
 --on-deep: #fff;
 --line: color-mix(in srgb,var(--brand) 20%,white);
 --brand-tint: color-mix(in srgb,var(--brand) 5%,white);
}
.work-section,.services-section{ position: relative; isolation: isolate; background: #fff; }
.work-section::before,.services-section::before{ content:''; position:absolute; inset:0; background:url('v5-paper-fibre.webp') 0 0 / 480px 480px repeat; filter:grayscale(1); opacity:.12; pointer-events:none; z-index:-1; }
.services-section::before{opacity:.08}
.music-section{ background:var(--brand-tint); }
.about-copy{ background:var(--soft-surface); }
.service-row:hover{ background:var(--brand-tint); }
.film-title-art{ position:static; width:100%; height:150px; margin:0; padding:24px 0 10px; background:transparent; border:0; box-shadow:none; }
.film-title-art img{ width:auto; height:auto; max-height:116px; max-width:min(70%,250px); }
.film-grid .work-meta{ margin-top:0; padding-top:10px; }
.coproduction-section{ background:var(--brand); align-items:center; }
.coproduction-copy{ position:static; }
.coproduction-copy>p{ font-family:var(--body); font-size:16px; font-weight:400; color:white; line-height:1.9; }
.coproduction-copy>a{ font-size:16px; font-weight:500; border-color:white; }
.coproduction-cases p{ font-family:var(--body); font-size:16px; font-weight:400; color:white; line-height:1.9; }
.coproduction-cases h3{ font-size:26px; }
.coproduction-photo{ object-position:35% 50%; }
.coproduction-cases article:nth-child(2) .coproduction-photo{ object-position:22% 50%; }
.coproduction-cases article{ background:transparent; }
.coproduction-cases small{ font-size:14px; font-weight:400; color:white; }
.contact-section,.production-contact{ position:relative; isolation:isolate; overflow:hidden; background:var(--brand); }
.contact-section::before,.production-contact::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:url('v7-island-repeat-white.svg') 0 0 / 216px 82.382px repeat; opacity:.04; }
.contact-section h2,.production-contact h2,.contact-section p,.contact-email,.contact-action>div{ color:white; }
.contact-section p,.production-contact p{ font-family:var(--body); font-size:16px; font-weight:400; line-height:1.9; }
.contact-action>div{ font-size:14px; font-weight:400; line-height:1.8; }
.contact-email{ border-color:white; }
.production-contact>a{ color:white; border-color:white; }
.site-footer{ background:white; padding-top:48px; padding-bottom:24px; box-shadow:none; }
.button-primary{ font-size:19px; font-weight:700; }
.button-primary:hover{ background:var(--brand); text-decoration:underline; }
.film-progress li>span,.work-recognition{ color:var(--ink); }
@media(max-width:760px) {
.film-title-art{ height:128px; margin:0; padding:22px 0 8px; width:100%; }
.film-title-art img{ max-height:98px; max-width:70%; }
.film-grid .work-image{ aspect-ratio:1.8; }
.coproduction-cases{ grid-template-columns:1fr; gap:32px; }
.coproduction-cases article:nth-child(2){ padding-top:0; }
.coproduction-photo{ aspect-ratio:1.9; margin-bottom:20px; }
.coproduction-cases article:nth-child(2) .coproduction-photo{ object-position:35% 50%; }
.contact-section::before,.production-contact::before{ background-size:168px 64.075px; }
.site-footer{ padding-bottom:24px; }
}
@media print {
.work-section::before,.services-section::before,.contact-section::before,.production-contact::before{ display:none; } }
.film-progress{ margin-top: 24px; padding-top: 22px; border-top: 1px solid #ccc; }
.film-progress h4{ font-size: 16px; font-weight: 500; line-height: 1.5; margin: 0 0 14px; }
.film-progress ul{ margin: 0; padding: 0; list-style: none; }
.film-progress li{ display: grid; grid-template-columns: 46px 1fr; gap: 18px; align-items: baseline; margin-top: 10px; }
.film-progress li>span{ font-size: 13px; font-variant-numeric: tabular-nums; color: var(--deep); }
.film-progress li>p{ margin: 0; font-size: 14px; line-height: 1.8; color: var(--ink); }
.project-progress{ margin-top: 30px; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.project-progress h3{ margin: 0 0 18px; font-size: 22px; font-weight: 500; }
.project-progress>p{ line-height: 1.9; }
.project-progress .text-link{ margin-top: 20px; }
.production-records .record-entry{ display: grid; grid-template-columns: 1fr; gap: 12px; }
.production-records .record-entry>span{ font-size: 13px; color: var(--muted); }
.production-records .record-entry>strong{ font-size: 16px; font-weight: 500; line-height: 1.75; }


/* V7 hero replacement. Integrate after removing ALL previous hero rules.
   Required DOM and motion-control lookup and observer changes: docs/V7-HERO.md.
   The 43/57 composition is V4; the film window is its source 16:9 ratio. */
.hero {
  display: grid;
  grid-template-columns: minmax(0,43fr) minmax(0,57fr);
  grid-template-rows: auto auto;
  min-height: 0;
  background: #348b41;
  isolation: isolate;
}
.hero-title,
.hero-screen { display: contents; }
.hero-copy {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  padding: clamp(20px,2.5vw,40px) var(--space);
  background: #348b41;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}
.hero h1 {
  max-width: 7ch;
  margin: 0;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(48px,6.6vw,96px);
  font-weight: 500;
  line-height: 1.01;
  letter-spacing: -.035em;
}
.hero h1 span { font-weight: 700; }
.hero .hero-zh {
  max-width: none;
  margin: 0;
  color: #fff;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .015em;
}
.hero-bottom {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  padding: 12px var(--space);
  min-width: 0;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 20px;
  background: #fff;
  color: #000;
  border-top: 1px solid #ccc;
}
.hero-bottom p {
  max-width: none;
  color: inherit;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
}
.hero-action {
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 8px 0;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 1;
  gap: 16px;
  border-bottom: 1px solid currentColor;
}
.hero-action span { font-size: 14px; font-weight: 500; line-height: 1.4; }
.hero-action>svg { width: 24px; height: 24px; border: 0; border-radius: 0; padding: 0; }
.hero-action:hover>svg { background: none; transform: translateX(3px); }
.hero-images {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-width: 0;
  min-height: 0;
  align-self: start;
  overflow: hidden;
  background: #348b41;
}
.hero-slide {
  position: absolute;
  inset: 0;
  display: block;
  color: #fff;
  animation: none;
}
.hero-slide[hidden] { display: none; }
.hero-slide>.hero-poster,
.hero-slide>.hero-motion {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-position: center;
  border: 0;
  transform: none;
}
/* Only a still may crop. Never crop the supplied complete video/title card. */
.hero-slide>.hero-poster { object-fit: cover; }
.hero-slide>.hero-motion {
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease);
}
.hero-slide.has-frame>.hero-motion { opacity: 1; }
.hero-slide:hover>.hero-poster { transform: none; }
.hero-slide>.hero-title-art {
  position: absolute;
  z-index: 1;
  left: clamp(20px,2.1vw,32px);
  bottom: clamp(20px,2.1vw,32px);
  width: clamp(100px,12vw,170px);
  height: auto;
  max-height: 32%;
  object-fit: contain;
  object-position: left bottom;
  pointer-events: none;
  transform: none;
  transition: none;
}
/* Ohong's supplied moving title card is already in the video. MALICE retains
   its separate original lettering. Apply this attribute only to Ohong. */
.hero-slide[data-video-title="embedded"].has-frame>.hero-title-art { opacity: 0; }
.hero-slide:hover>.hero-title-art { transform: none; }
.hero-controls {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  min-height: 80px;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(155px,.8fr);
  align-items: stretch;
  gap: 12px;
  padding: 8px 20px 8px 12px;
  background: #fff;
  color: #000;
  border-top: 1px solid #ccc;
}
.hero-selector,
.js .hero-selector {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  min-width: 0;
  min-height: 0;
  border: 0;
  gap: 8px;
  background: transparent;
}
.hero-selector button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 56px;
  margin: 0;
  padding: 8px 4px;
  gap: 2px;
  color: #000;
  background: #fff;
  border: 0;
  border-bottom: 3px solid transparent;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}
.hero-selector button:before { content: none; }
.hero-selector button>span:last-child { font-size: 12px; line-height: 1.4; }
.hero-selector button[aria-pressed=true] {
  background: #fff;
  color: #000;
  border-bottom-color: #348b41;
}
.hero-selector button:hover { background: #fff; text-decoration: underline; text-underline-offset: 4px; }
.hero-tools { display: none; min-width: 0; }
.hero-screen:has(.hero-slide[data-slide="0"]:not([hidden])) .hero-tools[data-controls-slide="0"],
.hero-screen:has(.hero-slide[data-slide="1"]:not([hidden])) .hero-tools[data-controls-slide="1"] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.hero-tools .motion-toggle,
.hero-tools .hero-film-caption {
  position: static;
  inset: auto;
  z-index: auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  max-width: 100%;
  min-width: 0;
  min-height: 32px;
  margin: 0;
  padding: 4px 0;
  gap: 8px;
  border: 0;
  background: transparent;
  color: #000;
  font: 500 13px/1.4 var(--body);
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}
.hero-tools .motion-toggle[hidden] { display: none; }
.hero-tools .motion-toggle:hover,
.hero-tools .hero-film-caption:hover { background: transparent; text-decoration: underline; text-underline-offset: 4px; }
.hero-tools .hero-film-caption>span { font: inherit; }
.hero-tools .motion-toggle svg,
.hero-tools .hero-film-caption svg { width: 15px; height: 15px; flex-shrink: 0; }
.motion-pause-icon { display: none; }
.motion-toggle[aria-pressed=true] .motion-play-icon { display: none; }
.motion-toggle[aria-pressed=true] .motion-pause-icon { display: block; }
.hero :is(a,button):focus-visible { outline: 2px solid #000; outline-offset: 3px; }
/* Static first film + link are useful without JS; avoid inoperative selectors. */
html:not(.js) .hero-selector { display: none; }
html:not(.js) .hero-controls { grid-template-columns: 1fr; }
@media (max-width: 1000px) and (min-width: 761px) {
  .hero-copy { padding-inline: 28px; }
  .hero-bottom { padding-inline: 28px; }
  .hero-controls { gap: 8px; padding-inline: 8px; }
}
@media (max-width: 760px) {
  .hero { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto auto; }
  .hero-copy {
    grid-column: 1;
    grid-row: 1;
    padding: 32px 24px 0;
    gap: 24px;
  }
  .hero h1 { font-size: clamp(56px,11.2vw,80px); max-width: 7ch; }
  .hero .hero-zh { font-size: 24px; font-weight: 500; }
  .hero-bottom {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    margin: 0;
    padding: 12px 24px 24px;
    background: #348b41;
    color: #fff;
    border: 0;
  }
  .hero-bottom p { display: none; }
  /* Large, bold white text meets contrast on the fixed VIS green. */
  .hero-action span { font-size: 19px; font-weight: 700; }
  .hero-action { gap: 20px; }
  .hero-action:focus-visible { outline-color: #fff; }
  .hero-images { grid-column: 1; grid-row: 3; aspect-ratio: 16 / 9; }
  .hero-slide>.hero-title-art { left: 20px; bottom: 20px; width: 120px; max-height: 32%; }
  .hero-controls {
    grid-column: 1;
    grid-row: 4;
    grid-template-columns: minmax(0,1fr);
    padding: 8px 16px 12px;
    gap: 4px;
  }
  .hero-selector button { min-height: 56px; }
  .hero-screen:has(.hero-slide[data-slide="0"]:not([hidden])) .hero-tools[data-controls-slide="0"],
  .hero-screen:has(.hero-slide[data-slide="1"]:not([hidden])) .hero-tools[data-controls-slide="1"] {
    display: grid;
    grid-template-columns: minmax(0,1.25fr) minmax(0,1fr);
    align-items: center;
    gap: 12px;
  }
  .hero-tools .motion-toggle,
  .hero-tools .hero-film-caption { min-height: 44px; font-size: 13px; }
  .hero-tools .hero-film-caption { justify-self: end; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-motion { transition: none; }
  .hero-action:hover>svg { transform: none; }
}
@media print {
  .hero-slide>.hero-motion,
  .hero-tools .motion-toggle,
  .hero-selector { display: none; }
}

.film-progress li>span {color:var(--ink)}

/* MALICE has a scope source; fill its film window. Ohong preserves its full title frame. */
#hero-film-motion-malice {object-fit:cover}
.service-en {color:var(--muted)}

/* V8: supporting copy shares the site reading role; section titles share its scale. */
.coproduction-copy h2,.contact-section h2,.production-contact h2{font-size:var(--type-section);font-weight:600;line-height:1.25;letter-spacing:-.025em}
html[lang=en] .coproduction-copy h2,html[lang=en] .contact-section h2,html[lang=en] .production-contact h2{font-weight:500}
.contact-section p{max-width:45ch;margin-top:24px}
.production-contact>a.button-primary{font-weight:500}
@media(max-width:760px){
.coproduction-copy h2,.contact-section h2,.production-contact h2{font-size:32px}
}
/* V9 — material belongs to the unprinted white surfaces, never brand fields. */
.work-section,.services-section,.commissions-section,.site-footer{position:relative;isolation:isolate}
.work-section::before,.services-section::before,.commissions-section::before,.site-footer::before,
.work-section::after,.services-section::after,.commissions-section::after,.site-footer::after{
 content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;filter:grayscale(1);
 background-repeat:repeat;mix-blend-mode:normal;
}
.work-section::before{background-image:url('v9-cotton.webp');background-size:540px 540px;opacity:.31}
.work-section::after{background-image:url('v9-vellum.webp');background-size:1040px 1040px;background-position:170px 90px;opacity:.13}
.commissions-section::before{background-image:url('v9-vellum.webp');background-size:720px 720px;opacity:.22}
.commissions-section::after{background-image:url('v5-paper-fibre.webp');background-size:360px 360px;background-position:80px 120px;opacity:.08}
.services-section::before{background-image:url('v9-vellum.webp');background-size:880px 880px;opacity:.28}
.services-section::after{background-image:url('v9-cotton.webp');background-size:420px 420px;background-position:130px 50px;opacity:.12}
.site-footer::before{background-image:url('v9-cotton.webp');background-size:540px 540px;opacity:.20}
.site-footer::after{background-image:url('v6-island-repeat-brand.svg');background-size:324px 123.573px;opacity:.025}
a.director-line{gap:24px}
a.director-line .director-portrait{display:block;width:160px;height:180px;overflow:hidden;flex:0 0 160px}
a.director-line .director-portrait img{width:100%;height:100%;object-fit:cover;object-position:62% 37%;transform:scale(1.3);transform-origin:62% 37%}
a.director-line>div{min-width:0}
@media(max-width:760px){
 a.director-line{gap:18px}
 a.director-line .director-portrait{width:120px;height:140px;flex-basis:120px}
}
@media print{
 .work-section::before,.work-section::after,.services-section::before,.services-section::after,
 .commissions-section::before,.commissions-section::after,.site-footer::before,.site-footer::after{display:none}
}
/* V9 — photographic depth: image planes lift from paper; typography stays fixed. */
.film-grid .work-image{box-shadow:0 2px 5px rgba(0,0,0,.07),0 12px 28px rgba(0,0,0,.09);transition:box-shadow 280ms var(--ease)}
.commission-item img{box-shadow:0 2px 8px rgba(0,0,0,.09)}
.director-portrait{box-shadow:0 3px 7px rgba(0,0,0,.08),0 12px 24px rgba(0,0,0,.08)}
.work-image img{transition:transform 360ms cubic-bezier(.16,1,.3,1)}
.work-link:hover .work-image img,.work-link:focus-visible .work-image img{transform:scale(1.012)}
.work-link:focus-visible .work-arrow svg{transform:translate(3px,-3px)}
.film-grid .work-link:hover .work-image,.film-grid .work-link:focus-visible .work-image{box-shadow:0 3px 7px rgba(0,0,0,.08),0 17px 34px rgba(0,0,0,.12)}
.work-view{transition:transform 220ms cubic-bezier(.16,1,.3,1)}
/* A continuous cue ties the two films together; selection never moves the frame. */
.hero-selector{position:relative}
.hero-selector button[aria-pressed=true]{border-bottom-color:transparent}
.hero-selector::after{content:'';position:absolute;left:0;bottom:0;width:calc((100% - 8px)/2);height:2px;background:var(--brand);transform:translateX(0);transition:transform 220ms cubic-bezier(.16,1,.3,1);pointer-events:none}
.hero-selector:has([data-select-slide="1"][aria-pressed=true])::after{transform:translateX(calc(100% + 8px))}
.hero-images{view-transition-name:featured-film}
::view-transition{pointer-events:none}
::view-transition-group(root),::view-transition-new(root){animation:none}
::view-transition-old(root){display:none}
::view-transition-group(featured-film){animation-duration:220ms}
::view-transition-old(featured-film){animation:film-dissolve-out 220ms ease-out both}
::view-transition-new(featured-film){animation:film-dissolve-in 220ms ease-out both}
@keyframes film-dissolve-out{from{opacity:1}to{opacity:0}}
@keyframes film-dissolve-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
 .hero-images{view-transition-name:none}
 .hero-selector::after{transition:none}
 .work-link:hover .work-image img,.work-link:focus-visible .work-image img{transform:none}
}
@media(hover:none){.work-link:hover .work-image img{transform:none}}

/* V10 — tidal strata. Base brand swatches stay exact; only neutral light/ink moves. */
.hero-copy,.coproduction-section,.contact-section{position:relative;isolation:isolate}
.hero-copy>:not(.tide-scene),.work-section>:not(.tide-scene),.commissions-section>:not(.tide-scene),
.coproduction-section>:not(.tide-scene),.services-section>:not(.tide-scene),.contact-section>:not(.tide-scene){position:relative;z-index:1}
.tide-scene{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;color:#000;--tide-band:.022;--tide-line:.065;--tide-return:.045;contain:paint}
.tide-scene svg{display:block;width:100%;height:100%;overflow:visible}
.tide-layer{transform-box:view-box;transform-origin:center;animation-play-state:paused!important}
.tide-band{fill:currentColor;fill-opacity:var(--tide-band);animation:tide-in 18s ease-in-out -5s infinite alternate}
.tide-contour{fill:none;stroke:currentColor;stroke-opacity:var(--tide-line);stroke-width:1;animation:tide-across 27s ease-in-out -18s infinite alternate}

.tide-return{fill:none;stroke:currentColor;stroke-opacity:var(--tide-return);stroke-width:.8;animation:tide-back 34s ease-in-out -11s infinite alternate}
.tide-scene.is-running .tide-layer{animation-play-state:running!important}
.tide-scene--hero{color:#fff;--tide-band:.075;--tide-line:.15;--tide-return:.10}
.tide-scene--coproduction{color:#fff;--tide-band:.055;--tide-line:.12;--tide-return:.08}
.tide-scene--coproduction{mask-image:linear-gradient(#000 24%,rgba(0,0,0,.7) 45%,transparent 82%)}
.tide-scene--coproduction svg{transform:scaleX(-1)}
.tide-scene--coproduction .tide-band{animation-duration:26s;animation-delay:-14s}
.tide-scene--films svg{height:720px;transform:translateY(-100px)}
.tide-scene--commissions svg{height:540px;transform:scaleX(-1) translateY(-150px)}
.tide-scene--commissions{--tide-band:.016;--tide-line:.045;--tide-return:.03}
.tide-scene--services svg{height:100%;transform:scaleX(-1)}
.tide-scene--services .tide-band{animation-duration:29s;animation-delay:-22s}
.tide-scene--contact{color:#fff;--tide-band:.035;--tide-line:.09;--tide-return:.055}
.tide-scene--contact{mask-image:linear-gradient(100deg,transparent 20%,#000 100%)}
.tide-scene--contact .tide-band{animation-duration:32s;animation-delay:-13s}
.ambient-toggle{appearance:none;border:0;background:transparent;padding:0;color:inherit;font:inherit;text-align:left;cursor:pointer;min-height:24px}
.ambient-toggle:hover{text-decoration:underline;text-underline-offset:4px}
.ambient-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:5px}
.ambient-toggle[hidden]{display:none}
.footer-bottom{flex-wrap:wrap}
@keyframes tide-in{from{transform:translate(-42px,22px) rotate(-.5deg)}to{transform:translate(42px,-22px) rotate(.5deg)}}
@keyframes tide-across{from{transform:translate(30px,16px)}to{transform:translate(-30px,-16px)}}
@keyframes tide-back{from{transform:translate(-26px,-14px)}to{transform:translate(26px,14px)}}
@media(max-width:760px){
 .tide-scene--hero{mask-image:linear-gradient(#000 80%,transparent)}
 .tide-scene--hero svg{width:125%;transform:translateX(-12%)}
 .tide-scene--coproduction svg{width:180%;transform:translateX(-35%) scaleX(-1)}
 .tide-scene--films svg{width:160%;height:800px;transform:translate(-20%,-100px)}
 .tide-scene--services svg{width:160%;transform:translateX(-35%) scaleX(-1)}
 .ambient-toggle{min-height:44px}
}
@media(prefers-reduced-motion:reduce){.tide-scene .tide-layer{animation:none!important}}
@media print{.tide-scene,.ambient-toggle{display:none}}
/* The legacy sticky offset must not apply to this foreground stacking context. */
.coproduction-section>.coproduction-copy{top:auto}
@media(max-width:760px){
 /* Keep the broad current at human scale as the two case studies stack vertically. */
 .tide-scene--coproduction svg{height:760px}
}

/* V10.1 — open water: separate fine currents, no solid ribbon. */
.tide-scene{--tide-line:.085;--tide-return:.065}
.tide-scene--hero{--tide-line:.25;--tide-return:.18}
.tide-scene--coproduction{--tide-line:.21;--tide-return:.16}
.tide-scene--commissions{--tide-line:.06;--tide-return:.045}
.tide-scene--contact{--tide-line:.15;--tide-return:.11}
.tide-contour{animation:tide-current 12s ease-in-out -4s infinite alternate}
.tide-return{animation:tide-countercurrent 17s ease-in-out -12s infinite alternate}
.tide-ripples{fill:none;stroke:currentColor;stroke-opacity:var(--tide-return);animation:tide-crosscurrent 21s ease-in-out -7s infinite alternate}
.tide-thread{fill:none;stroke-linecap:round;animation:tide-undulate var(--thread-time) ease-in-out var(--thread-delay) infinite alternate}
@keyframes tide-current{from{transform:translate(-55px,26px) rotate(-.8deg)}to{transform:translate(55px,-26px) rotate(.8deg)}}
@keyframes tide-countercurrent{from{transform:translate(40px,24px) skewX(-2deg)}to{transform:translate(-40px,-24px) skewX(2deg)}}
@keyframes tide-crosscurrent{from{transform:translate(-35px,-20px) rotate(1deg)}to{transform:translate(35px,20px) rotate(-1deg)}}
@keyframes tide-undulate{from{transform:translate(-8px,5px) skewX(-1.8deg) scaleY(.975)}to{transform:translate(8px,-5px) skewX(1.8deg) scaleY(1.025)}}

/* V10.2 — fine-to-full reflections and a restrained, local water sheen. */
.tide-hairline{fill:none;stroke-linecap:round}
.tide-reflection{fill:currentColor;fill-opacity:var(--tide-line);stroke:none}
.tide-glow{display:none;fill:currentColor;fill-opacity:.13;stroke:none;filter:blur(4px)}
.tide-scene--hero .tide-glow,.tide-scene--coproduction .tide-glow,.tide-scene--contact .tide-glow{display:block}
.tide-scene--hero .tide-reflection{fill-opacity:.19}
.tide-scene--coproduction .tide-reflection{fill-opacity:.13}
.tide-scene--contact .tide-reflection{fill-opacity:.09}
@media(max-width:760px){.tide-glow{filter:blur(3px)}}

/* V10.3: the contact field carries water; the quiet footer carries the VIS repeat. */
.contact-section::before{display:none}