/* Main section numbers are distinct from the small service and process indices. */
.section-number {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 31px;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--accent);
  min-width: 37px;
}
.heading-title { gap: 20px; }
.section-heading h2 { font-family: var(--serif); font-weight: 300; letter-spacing: .05em; }
.service-index { color: var(--muted); }

/* Keep the concept label near its copy on wider screens. */
@media (min-width: 701px) {
  .statement { grid-template-columns: 160px minmax(0, 1fr); gap: 44px; padding-top: 64px; padding-bottom: 60px; }
  .statement-label { padding-top: 10px; }
  .statement h2 { margin-bottom: 24px; }
  .statement p:last-child { margin-bottom: 0; }
}
@media (min-width: 1100px) {
  .statement > div:last-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 44px; }
  .statement h2 { grid-column: 1 / -1; }
  .statement p { margin-bottom: 0; }
}

/* The moving image belongs only to the introductory heading panel. */
.hero { position: relative; isolation: isolate; overflow: hidden; padding-top: 0; margin-top: 28px; background: #26352e; color: #fff; }
.hero-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 43%; pointer-events: none; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,26,22,.66), rgba(15,26,22,.55)); pointer-events: none; }
.hero .hero-intro { position: relative; z-index: 1; display: grid; min-height: 600px; align-items: center; gap: 55px; margin: 0; padding: 90px 44px 105px; }
.hero .hero-kicker { color: #fff; }
.hero .dot { background: #e4eadc; }
.hero .hero-copy .en { color: #fff; }
.hero .film-bottom { position: absolute; z-index: 1; bottom: 26px; left: 44px; right: 44px; margin: 0; color: #fff; align-items: center; }
.hero-footer-actions { display: flex; align-items: center; gap: 25px; }
.hero-toggle { color: #fff; font-size: 10px; padding: 8px 0; letter-spacing: .04em; min-width: 58px; text-align: left; }
.hero a:focus-visible, .hero button:focus-visible { outline-color: #fff; }
@media (min-width: 1500px) { .hero .hero-intro { min-height: 660px; } }
@media (max-width: 850px) { .hero .hero-intro { grid-template-columns: 1fr 1fr; gap: 30px; padding-left: 30px; padding-right: 30px; } .hero .film-bottom { left: 30px; right: 30px; } }
@media (max-width: 700px) {
  .hero { margin-top: 18px; }
  .hero .hero-intro { display: block; min-height: 640px; padding: 64px 24px 100px; }
  .hero .hero-copy { padding-top: 28px; }
  .hero .film-bottom { bottom: 20px; left: 24px; right: 24px; }
  .hero-footer-actions { gap: 18px; }
  .hero .scroll-link { gap: 13px; }
}

/* Preserve the original portrait and its full frame at every screen size. */
.portrait {
  aspect-ratio: auto;
  background: transparent;
  overflow: visible;
  max-width: 340px;
}
.portrait img {
  height: auto;
  object-fit: contain;
  object-position: center;
}
.contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 25px 20px; }
.contact-fields label { display: block; min-width: 0; font-size: 12px; line-height: 1.7; }
.full-field { grid-column: 1 / -1; }
.required, .optional { margin-left: 7px; color: var(--muted); font-size: 9px; }
.contact-fields input, .contact-fields select, .contact-fields textarea {
  display: block;
  width: 100%;
  margin-top: 9px;
  border: 0;
  border-bottom: 1px solid #aeb3a7;
  border-radius: 0;
  background: transparent;
  padding: 12px 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.7;
}
.contact-fields textarea { min-height: 130px; resize: vertical; }
.contact-fields input::placeholder, .contact-fields textarea::placeholder { color: #747a72; opacity: 1; }
.contact-hint a { text-decoration: underline; text-underline-offset: 3px; }
.contact-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.contact-submit { display: flex; justify-content: space-between; width: 100%; padding: 18px 22px; background: var(--ink); color: var(--paper); font-size: 13px; }
.contact-submit:disabled { cursor: wait; opacity: .65; }
#contact-status { font-size: 12px; line-height: 2; margin: 18px 0 0; padding: 15px; border: 1px solid var(--line); overflow-wrap: anywhere; }
#contact-status[data-state="error"] { color: #813d2e; border-color: #a66a58; }
#contact-status[data-state="success"] { color: #38513c; }
.contact-social { flex-wrap: wrap; }
.work-thumb { width: 100%; text-align: left; }
.work-credit { font-size: 10px; line-height: 1.9; color: var(--muted); margin: 12px 0 0; }
.work-guide { font-size: 11px; }
.work-dialog { max-height: calc(100dvh - 40px); overflow: auto; }
.work-dialog [hidden] { display: none !important; }
.work-dialog .dialog-top { position: sticky; top: 0; background: var(--paper); z-index: 1; }
.work-dialog-media { background: #202a25; }
.work-dialog-media img { max-height: 47vh; width: 100%; object-fit: contain; }
.work-dialog-media video { display: block; width: 100%; max-height: 55vh; }
.work-dialog.is-vertical .work-dialog-media video { width: auto; max-width: 100%; height: 62vh; max-height: 62vh; margin: 0 auto; object-fit: contain; }
.work-dialog-copy { padding: 30px 35px 35px; }
.work-dialog-copy h2 { font-family: var(--serif); font-size: 23px; font-weight: 300; letter-spacing: .04em; }
.work-facts { display: flex; flex-wrap: wrap; gap: 20px 50px; padding: 20px 0; margin: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.work-facts dt { color: var(--muted); font-size: 10px; margin-bottom: 8px; }
.work-facts dd { font-size: 12px; margin: 0; }
#work-dialog-description { font-size: 12px; line-height: 2.2; }
.work-media-status { font-size: 11px; line-height: 2; }
.work-dialog-links { display: flex; gap: 25px; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 25px; }
.work-dialog-links .text-link { font-size: 11px; gap: 15px; }
@media (max-width: 700px) {
  .section-number { font-size: 27px; min-width: 32px; }
  .heading-title { gap: 14px; }
  .portrait { aspect-ratio: auto; max-width: 300px; }
  .contact-fields { grid-template-columns: 1fr; gap: 23px; }
  .contact-fields input, .contact-fields select, .contact-fields textarea { font-size: 16px; }
  .work-dialog-copy { padding: 22px 20px 25px; }
  .work-dialog-copy h2 { font-size: 21px; }
  .work-facts { gap: 20px 30px; }
  .work-guide { font-size: 10px; }
}