:root {
  --paper: #e8e6e7;
  --ink: #292929;
  --logo-grey: #b3b3b3;
  --line: rgba(41, 41, 41, .18);
  --radius: 28px;
  --sans: "Helvetica Neue", Arial, "Noto Sans TC", "PingFang TC", sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background-color: var(--paper);
  background-image: url('/assets/grain.svg');
  background-size: 160px 160px;
  color: var(--ink);
  font-family: var(--sans);
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
p { line-height: 1.85; }
a, h1, h2, h3, p { overflow-wrap: anywhere; }
a:focus-visible, summary:focus-visible, video:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 5px;
}
a:hover { text-decoration: underline; text-underline-offset: 5px; }
.ui-arrow {
  position: relative;
  display: inline-block;
  width: .72em;
  height: .72em;
  margin-left: .45em;
  vertical-align: .02em;
}
.ui-arrow::before {
  content: "";
  position: absolute;
  left: .02em;
  bottom: .08em;
  width: .88em;
  height: 1px;
  background: currentColor;
  transform: rotate(-45deg);
  transform-origin: left center;
}
.ui-arrow::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: .42em;
  height: .42em;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
}
.skip-link { position: absolute; left: 20px; top: -100px; z-index: 10; padding: 14px 20px; background: var(--paper); }
.skip-link:focus { top: 12px; }

.inner-header, .inner-footer, .page-container { width: min(1280px, calc(100% - 96px)); margin-inline: auto; }
.inner-header { min-height: 116px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand img, .inner-footer img { width: 142px; height: auto; }
.inner-header nav { display: flex; align-items: center; flex-wrap: wrap; gap: 30px; font-size: 13px; }
.inner-header nav a { padding-block: 10px; }
.inner-header .contact-link { padding: 12px 21px; border: 1px solid var(--line); border-radius: 999px; }
main { min-width: 0; }
.page-container { padding-block: 26px 56px; border-top: 1px solid var(--line); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 9px 14px; font-size: 12px; line-height: 1.6; color: #555; }
.breadcrumb span::before { content: '/'; margin-right: 14px; color: #777; }
.page-hero { padding-block: 64px 60px; max-width: 960px; }
.eyebrow { font-size: 11px; letter-spacing: .16em; margin-bottom: 24px; }
h1 { font-size: clamp(34px, 4.5vw, 64px); line-height: 1.22; letter-spacing: -.045em; }
.page-hero > p:not(.eyebrow) { max-width: 680px; margin-top: 28px; font-size: 17px; }

.cinematic-hero {
  position: relative;
  isolation: isolate;
  width: min(1920px, 100%);
  margin-inline: auto;
  overflow: hidden;
  color: #fff;
  background: #6f6f70;
}
.cinematic-hero--static {
  min-height: clamp(640px, 88svh, 920px);
  border-radius: 0 0 28px 28px;
}
.cinematic-hero--static::before,
.cinematic-hero--static::after,
.cinematic-vignette {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cinematic-hero--static::before {
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(12, 12, 13, .58) 0%, rgba(12, 12, 13, .18) 19%, transparent 34%),
    linear-gradient(90deg, rgba(17, 17, 18, .78) 0%, rgba(17, 17, 18, .44) 42%, rgba(17, 17, 18, .08) 72%),
    linear-gradient(0deg, rgba(20, 20, 21, .72) 0%, transparent 48%);
}
.cinematic-hero--static::after {
  z-index: -1;
  background: url('/assets/grain.svg') 0 0 / 150px 150px;
  opacity: .12;
  mix-blend-mode: soft-light;
}
.cinematic-vignette {
  z-index: -2;
  box-shadow: inset 0 0 150px rgba(10, 10, 11, .28);
}
.cinematic-media,
.cinematic-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cinematic-media { z-index: -3; }
.cinematic-media img {
  max-width: none;
  object-fit: cover;
  object-position: var(--hero-position-desktop);
  transform: scale(1.02);
  transition: transform 700ms cubic-bezier(.2, .65, .25, 1);
}
.cinematic-hero--static:hover .cinematic-media img { transform: scale(1); }
.service-page > .inner-header,
.pricing-page > .inner-header,
.work-page > .inner-header {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: rgba(255, 255, 255, .9);
  border-bottom: 1px solid rgba(255, 255, 255, .3);
}
.service-page > .inner-header .brand img,
.pricing-page > .inner-header .brand img,
.work-page > .inner-header .brand img {
  filter: brightness(0) invert(1);
  opacity: .58;
}
.service-page > .inner-header .contact-link,
.pricing-page > .inner-header .contact-link,
.work-page > .inner-header .contact-link { border-color: rgba(255, 255, 255, .56); }
.service-page > .inner-header a:focus-visible,
.pricing-page > .inner-header a:focus-visible,
.work-page > .inner-header a:focus-visible,
.cinematic-copy a:focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 6px rgba(10, 10, 11, .72);
}
.cinematic-copy {
  position: absolute;
  inset: 116px 0 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: min(1280px, calc(100% - 96px));
  margin-inline: auto;
  padding-bottom: clamp(54px, 8vh, 92px);
  pointer-events: none;
}
.cinematic-copy > * { pointer-events: auto; }
.cinematic-copy .breadcrumb { margin-bottom: auto; padding-top: 26px; color: rgba(255, 255, 255, .72); }
.cinematic-copy .breadcrumb span::before { color: rgba(255, 255, 255, .45); }
.cinematic-copy .eyebrow { margin: 0 0 20px; color: rgba(255, 255, 255, .78); }
.cinematic-copy h1 {
  max-width: 900px;
  font-size: clamp(42px, 5.3vw, 78px);
  line-height: 1.06;
  letter-spacing: -.052em;
  text-wrap: balance;
}
.cinematic-copy .keep-phrase { white-space: nowrap; }
.hero-statement {
  max-width: 620px;
  margin-top: 24px;
  color: rgba(255, 255, 255, .84);
  font-size: clamp(15px, 1.45vw, 19px);
  line-height: 1.75;
}
.cinematic-actions { display: flex; align-items: center; gap: 24px; margin-top: 30px; }
.cinematic-actions a { display: inline-flex; align-items: center; min-height: 50px; font-size: 13px; }
.cinematic-primary { padding: 14px 23px; border-radius: 999px; background: rgba(246, 245, 245, .94); color: #292929; }
.cinematic-secondary { padding: 12px 2px; border-bottom: 1px solid rgba(255, 255, 255, .65); }
.cinematic-actions a:hover { text-decoration: none; }
.cinematic-legend { position: absolute; inset: 0; z-index: 2; pointer-events: none; font-size: 9px; letter-spacing: .16em; color: rgba(255, 255, 255, .78); }
.cinematic-legend span { position: absolute; padding: 8px 11px; border: 1px solid rgba(255, 255, 255, .34); border-radius: 999px; background: rgba(30, 30, 31, .2); backdrop-filter: blur(8px); }
.cinematic-legend span:nth-child(1) { top: 180px; left: max(48px, calc((100% - 1280px) / 2)); }
.cinematic-legend span:nth-child(2) { top: 180px; right: max(48px, calc((100% - 1280px) / 2)); }
.cinematic-legend span:nth-child(3) { top: 55%; right: max(48px, calc((100% - 1280px) / 2)); }

.cinematic-hero--video {
  min-height: clamp(640px, 88svh, 920px);
  border-radius: 0 0 28px 28px;
  background: #0d0d0e;
}
.cinematic-hero--video::before,
.cinematic-hero--video::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
.cinematic-hero--video::before {
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(10, 10, 11, .6) 0%, rgba(10, 10, 11, .16) 22%, transparent 38%),
    linear-gradient(90deg, rgba(12, 12, 13, .76) 0%, rgba(12, 12, 13, .36) 45%, transparent 78%),
    linear-gradient(0deg, rgba(12, 12, 13, .8) 0%, transparent 52%);
}
.cinematic-hero--video::after {
  z-index: -1;
  background: url('/assets/grain.svg') 0 0 / 150px 150px;
  opacity: .1;
  mix-blend-mode: soft-light;
}
.cinematic-video-media,
.cinematic-video-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cinematic-video-media { z-index: -3; }
.cinematic-video-media video {
  max-width: none;
  object-fit: cover;
  object-position: var(--hero-position-desktop);
  background: #0d0d0e;
  transition: object-position 240ms ease;
}
.cinematic-copy--case { transition: opacity 240ms ease, visibility 0s linear; }
.cinematic-disclosure { max-width: 540px; margin-top: 13px; color: rgba(255, 255, 255, .62); font-size: 12px; line-height: 1.65; }
.cinematic-case-actions { align-items: center; }
.cinematic-case-actions button { font: inherit; color: inherit; }
.cinematic-watch,
.cinematic-original {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 11px 2px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .65);
  background: transparent;
  cursor: pointer;
  font-size: 13px;
}
.cinematic-watch[hidden],
.cinematic-video-controls[hidden] { display: none; }
.cinematic-watch svg { width: 16px; height: 16px; margin-left: 9px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.cinematic-video-controls {
  position: absolute;
  right: max(48px, calc((100% - 1280px) / 2));
  bottom: clamp(54px, 8vh, 92px);
  z-index: 4;
  display: flex;
  gap: 12px;
}
.cinematic-video-controls button {
  display: grid;
  width: 50px;
  height: 50px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 999px;
  background: rgba(22, 22, 23, .54);
  color: #fff;
  backdrop-filter: blur(12px);
  cursor: pointer;
}
.cinematic-video-controls button[hidden] { display: none; }
.cinematic-video-controls svg { width: 22px; height: 22px; overflow: visible; }
.cinematic-video-controls path { vector-effect: non-scaling-stroke; }
.cinematic-video-controls .icon-play,
.cinematic-video-controls .icon-speaker { fill: currentColor; }
.cinematic-video-controls .icon-pause,
.cinematic-video-controls .icon-wave,
.cinematic-video-controls .icon-slash,
.cinematic-video-controls .icon-exit { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cinematic-video-controls .icon-pause,
.cinematic-video-controls .icon-slash { display: none; }
.cinematic-video-controls [data-action='play'].is-playing .icon-play { display: none; }
.cinematic-video-controls [data-action='play'].is-playing .icon-pause { display: block; }
.cinematic-video-controls [data-action='sound'].is-muted .icon-wave { display: none; }
.cinematic-video-controls [data-action='sound'].is-muted .icon-slash { display: block; }
.cinematic-hero--video.is-awaiting-play .cinematic-video-controls {
  inset: 0;
  display: block;
  pointer-events: none;
}
.cinematic-hero--video.is-awaiting-play .cinematic-video-controls button { pointer-events: auto; }
.cinematic-hero--video.is-awaiting-play [data-action='play'] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.cinematic-hero--video.is-awaiting-play [data-action='sound'] {
  position: absolute;
  right: max(48px, calc((100% - 1280px) / 2));
  bottom: clamp(54px, 8vh, 92px);
}
.cinematic-hero--video.is-awaiting-play [data-action='exit'] {
  position: absolute;
  right: max(48px, calc((100% - 1280px) / 2));
  bottom: clamp(54px, 8vh, 92px);
}
.cinematic-hero--video.is-awaiting-play.is-watch-mode [data-action='sound'] {
  right: calc(max(48px, calc((100% - 1280px) / 2)) + 62px);
}
.cinematic-video-controls button:focus-visible,
.cinematic-watch:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  box-shadow: 0 0 0 6px rgba(10, 10, 11, .72);
}
.cinematic-video-status {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 4;
  width: min(560px, calc(100% - 40px));
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .82);
  font-size: 12px;
  text-align: center;
}
.cinematic-hero--video.is-watch-mode::before,
.cinematic-hero--video.is-watch-mode .cinematic-vignette { opacity: 0; }
.cinematic-hero--video.is-watch-mode .cinematic-copy--case {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition-delay: 0s, 240ms;
}
.cinematic-hero--video.is-watch-mode .cinematic-video-media video { object-fit: contain; object-position: center; }
.cinematic-hero--video.is-watch-mode .cinematic-video-controls { bottom: 30px; }

.editorial-body { padding-block: clamp(74px, 9vw, 132px) 64px; border-top: 0; }
.editorial-intro { max-width: 760px; margin: 0 0 64px auto; font-size: clamp(18px, 2vw, 24px); line-height: 1.7; }
.content-section { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px; padding-block: 64px; border-top: 1px solid var(--line); }
.content-section h2 { font-size: 28px; line-height: 1.4; }
.content-section p + p { margin-top: 18px; }
.content-section--wide h2 { grid-column: 1 / span 4; }
.content-section--wide > div { grid-column: 6 / -1; max-width: 760px; }
.content-section--narrow h2 { grid-column: 2 / span 5; }
.content-section--narrow > div { grid-column: 8 / span 4; max-width: 540px; }
.faq-section h2 { grid-column: 1 / span 4; }
.faq-section > div { grid-column: 6 / -1; max-width: 760px; }
.faq-section details { padding: 18px 0; border-bottom: 1px solid var(--line); }
.faq-section details:first-child { padding-top: 0; }
.faq-section summary { cursor: pointer; line-height: 1.6; }
.faq-section details p { margin-top: 14px; }

.related-works { padding-block: 54px 72px; border-top: 1px solid var(--line); }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 26px; }
.section-heading h2 { font-size: 28px; }
.section-heading > span { font-size: 10px; letter-spacing: .12em; }
.related-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px; align-items: start; }
.related-work-card { min-width: 0; }
.related-work-card--wide { grid-column: span 7; }
.related-work-card--narrow { grid-column: span 5; }
.related-work-card img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); background: var(--logo-grey); }
.related-work-card--wide img { aspect-ratio: 7 / 5; }
.card-caption { padding: 18px 2px 0; }
.card-caption h3 { font-size: 20px; line-height: 1.4; }
.card-caption > span { display: block; margin-top: 9px; color: #555; font-size: 11px; letter-spacing: .04em; }

.editorial-body--case .case-section:nth-child(even) h2 { grid-column: 2 / span 4; }
.editorial-body--case .case-section:nth-child(even) > div { grid-column: 7 / span 5; }

.page-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 26px;
  padding: clamp(34px, 5vw, 64px);
  border: 1px solid rgba(41, 41, 41, .14);
  border-radius: var(--radius);
  background: rgba(212, 211, 212, .38) url('/assets/grain.svg') 0 0 / 150px 150px;
}
.page-cta h2 { font-size: clamp(28px, 3vw, 40px); letter-spacing: -.03em; }
.page-cta a { display: inline-flex; align-items: center; min-height: 48px; padding: 16px 25px; border: 1px solid var(--ink); border-radius: 999px; font-size: 13px; transition: background-color .2s, color .2s; }
.page-cta a:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.inner-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 34px 24px 42px; border-top: 1px solid var(--line); border-radius: 20px 20px 0 0; background: rgba(232, 230, 231, .34) url('/assets/grain.svg') 0 0 / 150px 150px; font-size: 11px; }
.inner-footer > span { font-size: 9px; letter-spacing: .12em; }
.inner-footer img { width: 110px; }

/* Service and pricing pages use one centered editorial column instead of alternating left/right blocks. */
.pricing-page .editorial-intro,
.service-page .editorial-intro {
  max-width: 820px;
  margin: 0 auto clamp(38px, 5vw, 72px);
  text-align: center;
}
.pricing-page .content-section,
.service-page .content-section {
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.pricing-page .content-section h2,
.pricing-page .content-section > div,
.service-page .content-section h2,
.service-page .content-section > div {
  grid-column: 1;
  width: min(100%, 860px);
  max-width: none;
  margin-inline: auto;
}
.pricing-page .content-section h2,
.service-page .content-section h2 {
  font-weight: 600;
  line-height: 1.28;
}
.pricing-page .content-section > div,
.service-page .content-section > div { width: min(100%, 760px); }
.pricing-page .cinematic-copy h1 { max-width: 760px; font-weight: 700; letter-spacing: -.06em; }

@media (max-width: 700px) {
  :root { --radius: 22px; }
  .inner-header, .inner-footer, .page-container { width: calc(100% - 40px); }
  .inner-header { min-height: 132px; flex-wrap: wrap; gap: 8px; padding-block: 20px 12px; }
  .brand img { width: 110px; }
  .inner-header nav { width: 100%; justify-content: space-between; gap: 8px; font-size: 12px; }
  .inner-header .contact-link { padding: 10px 12px; }
  .page-container { padding-block: 22px 36px; }
  .breadcrumb { font-size: 11px; }
  .page-hero { padding-block: 44px 40px; }
  .eyebrow { font-size: 10px; margin-bottom: 20px; }
  h1 { font-size: clamp(32px, 9vw, 48px); line-height: 1.3; }
  .page-hero > p:not(.eyebrow) { font-size: 15px; margin-top: 22px; }
  .cinematic-hero--static {
    min-height: 100svh;
    aspect-ratio: 9 / 16;
    border-radius: 0 0 22px 22px;
  }
  .cinematic-hero--static::before {
    background:
      linear-gradient(180deg, rgba(12, 12, 13, .58) 0%, rgba(12, 12, 13, .12) 22%, transparent 36%),
      linear-gradient(0deg, rgba(17, 17, 18, .82) 0%, rgba(17, 17, 18, .3) 48%, rgba(17, 17, 18, .08) 75%),
      linear-gradient(90deg, rgba(18, 18, 19, .28), transparent 72%);
  }
  .cinematic-vignette { box-shadow: inset 0 0 80px rgba(10, 10, 11, .22); }
  .cinematic-media img { object-position: var(--hero-position-mobile); }
  .service-page > .inner-header,
  .pricing-page > .inner-header,
  .work-page > .inner-header {
    width: calc(100% - 40px);
    min-height: 112px;
    flex-wrap: nowrap;
    gap: 14px;
    padding-block: max(18px, env(safe-area-inset-top)) 12px;
  }
  .service-page > .inner-header .brand,
  .pricing-page > .inner-header .brand,
  .work-page > .inner-header .brand { flex: 0 0 auto; }
  .service-page > .inner-header .brand img,
  .pricing-page > .inner-header .brand img,
  .work-page > .inner-header .brand img { width: 88px; }
  .service-page > .inner-header nav,
  .pricing-page > .inner-header nav,
  .work-page > .inner-header nav { width: auto; margin-left: auto; flex-wrap: nowrap; justify-content: flex-end; gap: 8px; font-size: 10px; }
  .service-page > .inner-header .contact-link,
  .pricing-page > .inner-header .contact-link,
  .work-page > .inner-header .contact-link { padding: 8px 9px; white-space: nowrap; }
  .cinematic-copy {
    inset: 112px 0 0;
    width: calc(100% - 40px);
    padding-bottom: max(38px, calc(env(safe-area-inset-bottom) + 24px));
  }
  .cinematic-copy .breadcrumb { padding-top: 18px; font-size: 10px; }
  .cinematic-copy .eyebrow { margin-bottom: 15px; font-size: 9px; }
  .cinematic-copy h1 { max-width: 350px; font-size: clamp(36px, 10.5vw, 50px); line-height: 1.08; }
  .pricing-page .cinematic-copy h1 { font-weight: 700; }
  .hero-statement { max-width: 330px; margin-top: 17px; font-size: 14px; line-height: 1.65; }
  .cinematic-actions { flex-wrap: wrap; gap: 14px 18px; margin-top: 22px; }
  .cinematic-actions a { min-height: 46px; font-size: 12px; }
  .cinematic-primary { padding: 12px 18px; }
  .cinematic-legend span { font-size: 8px; padding: 7px 9px; }
  .cinematic-legend span:nth-child(1) { top: 160px; right: 20px; left: auto; }
  .cinematic-legend span:nth-child(2) { top: 65%; right: auto; left: 20px; }
  .cinematic-legend span:nth-child(3) { top: 65%; right: 20px; }
  .cinematic-hero--video {
    min-height: 100svh;
    aspect-ratio: 9 / 16;
    border-radius: 0 0 22px 22px;
  }
  .cinematic-hero--video::before {
    background:
      linear-gradient(180deg, rgba(10, 10, 11, .58) 0%, rgba(10, 10, 11, .12) 22%, transparent 36%),
      linear-gradient(0deg, rgba(12, 12, 13, .86) 0%, rgba(12, 12, 13, .38) 48%, transparent 76%);
  }
  .cinematic-video-media video { object-position: var(--hero-position-mobile); }
  .cinematic-copy--case { padding-bottom: max(34px, calc(env(safe-area-inset-bottom) + 22px)); }
  .cinematic-copy--case h1 { font-size: clamp(34px, 9.6vw, 44px); }
  .cinematic-copy--case .hero-statement { max-width: 310px; font-size: 13px; line-height: 1.55; }
  .cinematic-disclosure { max-width: 310px; margin-top: 9px; font-size: 10px; }
  .cinematic-case-actions { gap: 8px 14px; margin-top: 17px; }
  .cinematic-case-actions a,
  .cinematic-case-actions button { min-height: 44px; font-size: 11px; }
  .cinematic-case-actions .cinematic-primary { padding: 10px 14px; }
  .cinematic-watch svg { width: 14px; height: 14px; }
  .cinematic-video-controls { top: 128px; right: 20px; bottom: auto; gap: 10px; }
  .cinematic-video-controls button { width: 46px; height: 46px; }
  .cinematic-video-controls svg { width: 20px; height: 20px; }
  .cinematic-hero--video.is-awaiting-play [data-action='sound'] { top: 128px; right: 20px; bottom: auto; }
  .cinematic-hero--video.is-awaiting-play [data-action='exit'] { top: 128px; right: 20px; bottom: auto; }
  .cinematic-hero--video.is-awaiting-play.is-watch-mode [data-action='sound'] { right: 76px; }
  .cinematic-hero--video.is-watch-mode .cinematic-video-controls { top: 128px; bottom: auto; }
  .cinematic-hero--video.is-awaiting-play.is-watch-mode .cinematic-video-controls { inset: 0; }
  .editorial-body { width: calc(100% - 40px); padding-block: 62px 36px; }
  .editorial-intro { margin-bottom: 38px; font-size: 18px; }
  .content-section { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-block: 30px; }
  .content-section h2,
  .content-section > div,
  .content-section--wide h2,
  .content-section--wide > div,
  .content-section--narrow h2,
  .content-section--narrow > div,
  .faq-section h2,
  .faq-section > div { grid-column: 1; max-width: none; }
  .content-section h2, .section-heading h2 { font-size: 24px; }
  .related-works { padding-block: 28px 36px; }
  .section-heading { gap: 12px; }
  .section-heading > span { font-size: 8px; }
  .related-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .related-work-card--wide, .related-work-card--narrow { grid-column: 1; }
  .related-work-card img, .related-work-card--wide img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
  .card-caption h3 { font-size: 20px; }
  .editorial-body--case .case-section:nth-child(even) h2,
  .editorial-body--case .case-section:nth-child(even) > div { grid-column: 1; }
  .page-cta { gap: 22px; margin-top: 12px; padding: 28px 24px; }
  .inner-footer { flex-wrap: wrap; gap: 16px; padding-block: 24px; }
  .inner-footer > span { display: none; }
}

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