/* PPT-inspired editorial system. Legacy --ink/--paper denote surface/text. */
@font-face {
  font-family: "Studio Sans";
  src: local("思源黑体 CN Medium"), local("Source Han Sans SC Medium"), local("Noto Sans SC Medium"), local("Noto Sans SC");
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: "Studio Sans";
  src: local("思源黑体 CN Bold"), local("Source Han Sans SC Bold"), local("Noto Sans SC Bold"), local("Noto Sans SC");
  font-weight: 700 900;
  font-display: swap;
}
:root {
  --charcoal: #323232;
  --cream: #f6f1eb;
  --sand: #e1dad2;
  --ink: var(--cream);
  --paper: var(--charcoal);
  --accent: var(--charcoal);
  --line: rgba(50, 50, 50, .22);
  --sans: "Studio Sans", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --navigation-font: var(--sans);
  --display-english: "Agency FB", var(--sans);
  color-scheme: light;
}
body, .portfolio-page { font-family: var(--sans); font-weight: 400; }
body { background: var(--cream); color: var(--charcoal); }
::selection { background: var(--charcoal); color: var(--cream); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
:is(h1,h2,h3,strong) { font-weight: 700; }
:is(button,input,select,textarea) { font-family: var(--sans); }
.portfolio-page, .portfolio-page--5 { --muted: rgba(50,50,50,.72); --panel: var(--sand); --stroke: var(--line); }
:is(.team,.content-page__main,.contact)::before, .member-page::before,
.home__texture { display: none; }
/* Reuse the supplied mark, recoloured for paper surfaces. */
:is(.products__brand,.team__brand,.services-heading__brand,.content-page__brand,.member__brand,.demo-brand,.contact__brand) img,
.portfolio-logo { filter: brightness(0) saturate(100%) invert(17%); }
/* Cover: edge-to-edge photographic field and charcoal end panel. */
.home { background: var(--cream); }
.home__background { inset: 0 24% 0 0; background: var(--sand); }
.home__image { filter: saturate(.8); position: relative; left: -10%; width: 110%; }
.home__shade { inset: 0 0 0 76%; background: var(--charcoal); }
.brand-mark { left: auto; right: 4%; bottom: 15%; width: 16%; }
.brand-mark img { width: 100%; filter: brightness(0) invert(96%) sepia(9%) saturate(180%); }
.home .next-page-link { left: 88%; bottom: 30px; }
.home .next-page-link img { opacity: .8; }
.next-page-link img { filter: brightness(0) saturate(100%) invert(17%); }
.home .next-page-link img { filter: brightness(0) invert(96%) sepia(9%) saturate(180%); }
/* The directory is a dark editorial insert, with an inverse selected row. */
.service-nav-page .navigation {
  --ink: var(--charcoal); --paper: var(--cream); --accent: var(--cream);
  background: var(--charcoal); border: 1px solid var(--sand); border-radius: 0;
  clip-path: none; color: var(--cream); padding: 40px;
}
.service-nav-page .navigation-backdrop { background: rgba(50,50,50,.35); backdrop-filter: blur(4px); }
.service-nav-page .navigation__list a { border-color: rgba(246,241,235,.22); }
.service-nav-page .navigation__list a span,
.service-nav-page .navigation__list a::before,
.service-nav-page .nav-masthead { color: var(--sand); }
.service-nav-page .navigation__list a em { font-weight: 500; letter-spacing: -.035em; }
.service-nav-page .navigation__list a:is(:hover,:focus-visible) { background: rgba(246,241,235,.1); }
.service-nav-page .navigation__list a[aria-current=page] { background: var(--cream); color: var(--charcoal); }
.service-nav-page .navigation__list a[aria-current=page] :is(span,em),
.service-nav-page .navigation__list a[aria-current=page]::before { color: var(--charcoal); }
.service-nav-page .nav-brand { color: var(--cream); letter-spacing: -.04em; }
.service-nav-page .menu-button,
.service-nav-page .language-toggle {
  background: var(--cream); color: var(--charcoal); border: 1px solid var(--charcoal);
  clip-path: none; border-radius: 0; font-weight: 500;
}
.service-nav-page .menu-button:is(:hover,:focus-visible,[aria-expanded=true]),
.service-nav-page .language-toggle:is(:hover,:focus-visible,[aria-expanded=true]) {
  background: var(--charcoal); color: var(--cream); border-color: var(--sand);
}
.service-nav-page .language-options { background: var(--cream); border: 1px solid var(--charcoal); }
.language-options button { color: var(--charcoal); }
.language-options button:is(:hover,:focus-visible,[aria-pressed=true]),
.language-options button[aria-pressed=true]:is(:hover,:focus-visible) { background: var(--sand); color: var(--charcoal); }
/* Type follows the deck's large medium-weight titles and bold detail hierarchy. */
.reel-intro h1 { font-weight: 500; letter-spacing: -.055em; }
.reel-intro h1 span { font-weight: 700; }
.archive-heading h2 { font-family: var(--sans); font-weight: 500; letter-spacing: -.065em; }
:is(.products__title,.team__title,.services-heading__title,.demo-heading) h1 {
  font-weight: 700; letter-spacing: -.055em; line-height: 1.05;
}
.reel-intro { padding-block: clamp(36px,5vw,76px); }
.reel-intro-note, .archive-heading > p { line-height: 1.9; }
.reel-footnote span:first-child, .services2-signature p,
.member__section h2 small, .studio-room figcaption span { font-style: italic; }
.reel-entry-title { font-weight: 500; }
.reel-entry[aria-pressed=true] .reel-entry-title { font-weight: 700; }
.reel-entry[aria-pressed=true] { background: var(--sand); padding-inline: 12px; }
.reel-poster::before { background: none; }
.reel-poster img { filter: drop-shadow(0 12px 18px rgba(50,50,50,.12)); }
.reel-credit { background: var(--charcoal); --paper: var(--cream); --muted: var(--sand); color: var(--cream); }
.reel-credit h3 { font-weight: 700; }
.reel-image-label { color: var(--charcoal); }
.archive-card-image { background: var(--sand); }
.archive-card:hover .archive-card-image { background: var(--sand); }
.archive-card-copy strong { font-weight: 500; }
.works-tweaks { box-shadow: 0 12px 40px rgba(50,50,50,.12); }
.portfolio-page--5 .work-dialog { background: var(--cream); color: var(--charcoal); }
.portfolio-page--5 .dialog-poster { background: var(--sand); }
.work-dialog::backdrop, .device-viewer::backdrop { background: rgba(50,50,50,.65); }
.dialog-close { color: var(--charcoal); }
/* Services retain the photography; all titles on images remain cream. */
.services2-page-body .service-item {
  --paper: var(--cream); --accent: var(--cream);
  clip-path: none; border: 0; background-color: var(--charcoal); color: var(--cream);
}
.services2-page-body .service-content::before,
.services2-page-body .service-content::after { display: none; }
.services2-page-body .service-item::after { -webkit-text-stroke-color: var(--cream); font-weight: 500; }
.services2-page-body .service-title p { font-weight: 700; letter-spacing: -.04em; text-shadow: 0 2px 14px rgba(50,50,50,.45); }
.services2-page-body .service-title h2 { text-shadow: 0 1px 8px var(--charcoal); }
.services2-page-body .service-details,
.services2-page-body .service-item:is(:hover,:focus,:focus-within) .service-details {
  background: var(--sand); color: var(--charcoal); --accent: var(--charcoal); border-color: var(--sand);
}
.services2-page-body .service-details p { color: var(--charcoal); }
.services2-page-body .service-details::before { background: var(--charcoal); }
.services2-page-body .service-demo .service-details { background: var(--cream); }
.services2-page-body .service-demo .service-details p { color: var(--charcoal); }
.services2-page-body .service-demo:is(:hover,:focus,:focus-within) .service-demo-label span { background: var(--charcoal); color: var(--cream); }
.services2-intro { padding-bottom: 56px; }
.services2-intro h2 { font-weight: 500; }
/* Team photographs become flat editorial plates with a paper caption. */
.team-card { background: var(--sand); color: var(--charcoal); }
.team-card__texture { bottom: 82px; }
.team-card::after { bottom: 82px; }
.team-card img { height: calc(100% - 82px); object-position: center 25%; }
.team-card__caption { inset: auto 0 0; min-height: 82px; padding: 14px 18px; background: var(--sand); align-content: center; }
.team-card__caption strong { font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.team-card__caption small { line-height: 1.5; }
.member__header { padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.member h1 { font-weight: 700; letter-spacing: -.04em; }
.member__tabs a:is(:hover,:focus-visible), .device__directory a:is(:hover,:focus-visible) { background: var(--sand); }
.member__copy { font-family: var(--sans); }
.member__portrait { background: var(--sand); }
.member__section h2 { font-weight: 700; letter-spacing: -.02em; }
.member__section h2 small { font-weight: 400; }
/* Audio controls: charcoal action, cream glyph, sand waveform. */

.demo-search input { border-radius: 0; background: var(--sand); border-color: transparent; }
.demo-search input::placeholder { color: rgba(50,50,50,.65); }
.filter-submit, .demo-play, .demo-empty button { background: var(--charcoal); color: var(--cream); }
.filter-submit { border-radius: 0; }
.filter-submit:hover { background: var(--charcoal); opacity: .85; }
.filter-option input { border-color: rgba(50,50,50,.6); border-radius: 0; }
.demo-card { border-color: var(--sand); background: var(--cream); }
.demo-card.is-playing { border-color: var(--charcoal); }
.demo-card h3 { font-weight: 700; }
.demo-tags { background: var(--sand); }
.demo-tag { border-radius: 0; color: var(--charcoal); border-color: rgba(50,50,50,.3); }
.demo-tag:first-child, .demo-tag.is-selected { border-color: var(--charcoal); }
.wave-base { fill: var(--sand); }
.wave-progress { fill: var(--charcoal); }
.demo-error { color: var(--charcoal); font-weight: 700; }
.demo-heading { padding-right: 148px; }
.studio-room__specs { background: var(--sand); padding-inline: 24px; }
.studio-room h2 { font-weight: 500; letter-spacing: -.06em; }
.device-inventory h2 { font-weight: 700; }
.contact { gap: 52px; }
.contact__brand { padding: 36px 0; }
.contact__brand p { font-style: italic; letter-spacing: .08em; }
.contact__details { max-width: 960px; gap: 0; border-block: 1px solid var(--line); }
.contact__details section { padding: 36px 20px; }
.contact__details section + section { border-left: 1px solid var(--line); background: var(--sand); }
.contact__details h1 { font-weight: 700; letter-spacing: -.035em; }
.contact__social-link span { font-style: italic; font-weight: 500; }
/* Agency FB is reserved for navigation and prominent English display text.
   Body copy, equipment models and supporting labels keep Studio Sans. */
.service-nav-page .navigation__list a em,
.service-nav-page .nav-brand,
.service-nav-page .menu-button,
.service-nav-page .language-toggle,
:is(.products__title,.team__title,.services-heading__title,.content-page__title,.demo-heading) h1,
.services2-page-body .service-title p,
.services2-intro h2 span,
.archive-heading h2,
.studio-room h2,
.device__directory a[href^="#room-"],
.contact__details h1 {
  font-family: var(--display-english);
  letter-spacing: .015em;
}
.service-nav-page .navigation__list a em,
.studio-room h2 { font-weight: 700; }
.service-nav-page .menu-button { font-size: 18px; }
.service-nav-page .language-toggle { font-size: 16px; line-height: 1; }
.portfolio-page--5 .portfolio-tabs a {
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
  padding-block: 10px; border-bottom: 0;
}
.portfolio-page-title {
  font: 700 clamp(34px, 3.5vw, 53px)/1 var(--display-english);
  letter-spacing: .015em;
}
@media (max-width: 700px) {

  .service-nav-page .menu-button { font-size: 16px; }
  .service-nav-page .language-toggle { font-size: 14px; }
  .portfolio-page--5 .portfolio-tabs { top: 76px; }
  .portfolio-page--5 .portfolio-tabs a { align-items: flex-start; gap: 3px; }
  .portfolio-page-title { font-size: 32px; }
  .home__background { inset: 0 0 26% 0; }
  .home__shade { inset: 74% 0 0; }
  .brand-mark { left: 26px; right: auto; bottom: 8%; width: 36%; }
  .home .next-page-link { left: 85%; bottom: 6%; }
  .service-nav-page .navigation { padding: 24px 20px; }
  .service-nav-page .navigation__list a em { font-size: 27px; }
  .demo-heading { padding-right: 100px; align-items: flex-start; gap: 24px; }
  .demo-brand { width: 80px; flex-shrink: 0; }
  .demo-heading h1 { font-size: clamp(23px,6vw,32px); }
  .demo-heading p { font-size: 12px; letter-spacing: .04em; }
  .member__header { padding-right: 105px; align-items: flex-start; }
  .member__back { max-width: 95px; text-align: right; }
  .contact__details { grid-template-columns: 1fr; }
  .contact__details section + section { border-left: 0; border-top: 1px solid var(--line); }
  .contact { padding-top: 112px; }
  .studio-room__specs { padding-inline: 16px; }
  .reel-intro { padding-block: 36px 28px; }
  .archive-heading h2 { font-size: clamp(40px,11vw,72px); }
}
@media (max-width: 420px) {
  .demo-heading { flex-direction: column; gap: 28px; }
  .demo-heading > div { text-align: left; }
}