/* WAVE film collection — September 2026 */
:root { --film-bg: #0b1417; --film-muted: #a4b2b1; --film-accent: #e9b486; }
body { background: var(--film-bg); }
main { max-width: none; border: 0; box-shadow: none; }
.site-header { background: rgba(11,20,23,.9); backdrop-filter: blur(18px); }
.site-header.is-scrolled { background: rgba(11,20,23,.94); }
.header-inner { max-width: 1720px; }
.primary-nav a { font-size: 13px; letter-spacing: .06em; }
.site-footer { max-width: none; background: #091114; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--film-accent); outline-offset: 5px; }
.film-archive-hero { padding: 170px 6vw 60px; max-width: 1840px; margin: auto; }
.film-archive-hero > div { display:flex; align-items: end; justify-content: space-between; gap:40px; margin: 26px 0 36px; }
.film-archive-hero h1 { margin:0; font:500 clamp(48px,6.6vw,108px)/1.2 var(--body); letter-spacing:-.07em; }
.film-archive-hero h1 em { font-family: 'Songti SC',serif; font-weight:400; color:#c4d0cb; font-style:normal; }
.film-archive-hero p:not(.section-index) { margin:0 0 10px; color:var(--film-muted); font-size:15px; line-height:1.9; }
.film-archive-hero > a { display:flex; justify-content:space-between; padding-top:24px; border-top:1px solid #ffffff24; font-size:12px; letter-spacing:.13em; }
.film-archive-hero > a span { color:var(--film-accent); font-size:24px; }
.archive-section { max-width:1840px; margin:auto; padding:20px 6vw 100px; background:var(--film-bg); }
.archive-toolbar { max-width:none; grid-template-columns:1fr; gap:24px; margin-bottom:24px; }
.archive-filter { display:flex; flex-wrap:wrap; gap:6px 28px; border:0; border-bottom:1px solid #ffffff24; padding:0; }
.archive-filter button { flex:0 0 auto; min-height:76px; padding:12px 0 18px; border:0; border-bottom:2px solid transparent; background:transparent; color:#96a6a5; font-size:17px; line-height:1.6; transition:color .2s,border-color .2s; }
.archive-filter button small { display:block; margin-bottom:4px; font:10px/1.4 var(--body); letter-spacing:.06em; color:inherit; }
.archive-filter button:hover, .archive-filter button.is-active { color:#f4efe6; background:transparent; border-bottom-color:var(--film-accent); }
.archive-search { max-width:340px; justify-self:end; min-height:44px; padding:0 0 8px; border:0; border-bottom:1px solid #ffffff40; background:transparent; }
.archive-search label > span { display:none; }
.archive-search input { padding:7px 0; font-size:13px; }
.archive-result { max-width:none; margin:-62px 0 34px; min-height:44px; pointer-events:none; font-size:12px; }
.archive-result button { pointer-events:auto; margin-right:370px; }
.archive-result strong { font-size:24px; color:var(--film-accent); }
.archive-grid { max-width:none; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px 28px; align-items:start; }
.film-card { min-width:0; animation:film-in .55s ease both; animation-delay:calc(min(var(--card-order), 5)*.045s); }
.film-frame { position:relative; display:block; width:100%; aspect-ratio:16/9; padding:0; overflow:hidden; background:#152327; border:0; color:#fff; isolation:isolate; }
.film-frame img, .film-frame video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .65s ease,opacity .3s ease; }
.film-frame img { filter:none; }
.film-frame video { opacity:0; }
.film-card--portrait .film-frame img,.film-card--portrait .film-frame video { object-fit:contain; }
.film-card--portrait .film-frame { background:radial-gradient(ellipse at center,#30413f,#111b1e 70%); }
.film-frame::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,#0005,transparent 30%,transparent 70%,#0005); pointer-events:none; }
.film-number { position:absolute; z-index:2; left:20px; top:18px; font-size:11px; letter-spacing:.08em; text-shadow:0 1px 4px #000; }
.film-duration { position:absolute; z-index:2; bottom:18px; right:20px; font:12px var(--body); letter-spacing:.08em; }
.film-play { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; opacity:0; transition:opacity .25s; }
.film-play b { display:grid; place-items:center; height:64px; width:64px; border:1px solid #fff8; border-radius:50%; background:#10202466; backdrop-filter:blur(12px); font-size:17px; font-weight:400; padding-left:3px; }
.film-play > span { font-size:11px; letter-spacing:.1em; }
.film-frame:hover .film-play,.film-frame:focus-visible .film-play { opacity:1; }
.film-frame:hover img { transform:scale(1.035); }
.film-frame.is-previewing video { opacity:1; }
.film-caption { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 0 0; }
.film-caption p { color:#9badaa; font-size:11px; letter-spacing:.08em; margin:0 0 9px; }
.film-caption h2 { margin:0; font:500 clamp(19px,1.75vw,29px)/1.4 var(--body); letter-spacing:-.035em; }
.film-detail { flex-shrink:0; display:grid; place-items:center; height:40px;width:40px;border:1px solid #ffffff30; border-radius:50%; color:var(--film-accent); transition:background .2s,color .2s; }
.film-detail:hover { background:var(--film-accent); color:#102024; }
.archive-more { max-width:none; }
.archive-more button { padding:18px 28px; }
.selected-section { padding:100px 6vw; background:var(--film-bg); }
.selected-section .section-heading { max-width:1560px; }
.showcase-controls { max-width:1560px; }
.showcase-archive-layout { max-width:1560px; grid-template-columns:minmax(230px,.3fr) minmax(0,1fr); gap:40px; }
.showcase-media { aspect-ratio:16/9; min-height:0; border:0; }
.showcase-media video { object-fit:contain; background:#101b1e; }
.showcase-summary { background:transparent; border:0; padding:26px 0; }
.showcase-summary h3 { line-height:1.4; font-size:clamp(24px,2.4vw,38px); }
.showcase-index { border:0; background:transparent; padding:0; }
.showcase-index ol button { border-bottom:1px solid #ffffff22; padding:20px 8px; }
.home-categories { grid-template-columns:repeat(3,1fr); }
.life-section { display:grid; grid-template-columns:1fr 1fr; gap:7vw; padding:110px 6vw; background:#e9e5dc; color:#183033; }
.life-heading h2 { font:500 clamp(38px,4.4vw,70px)/1.25 var(--body); letter-spacing:-.055em; margin:30px 0; }
.life-heading h2 em { font-family:'Songti SC',serif; font-style:normal; font-weight:400; }
.life-heading > p:last-child { font-size:14px; line-height:1.9; color:#5b6b68; }
.life-heading .section-index { color:#79614c; }
.life-options { display:grid; align-content:center; }
.life-options a { display:block; padding:32px 0; border-top:1px solid #18303340; transition:padding .3s; }
.life-options a:last-child { border-bottom:1px solid #18303340; }
.life-options a:hover { padding-left:14px; }
.life-options span { color:#79614c; font-size:10px; letter-spacing:.12em; }
.life-options h3 { font-size:28px; font-weight:500; margin:16px 0 12px; }
.life-options p { color:#5b6b68; font-size:13px; line-height:1.8; }
.life-options b { display:block; text-align:right; font-size:12px; font-weight:500; margin-top:22px; }
.archive-section .life-section { margin-top:40px; }
@keyframes film-in { from { opacity:0; transform:translateY(15px); } to { opacity:1; transform:none; } }
@media(min-width:1500px) { .archive-grid { gap:60px 36px; } }
@media(max-width:900px) { .film-archive-hero { padding-top:140px; } .film-archive-hero > div { display:block; } .film-archive-hero p:not(.section-index) { margin-top:24px; } .showcase-archive-layout { grid-template-columns:1fr; } .showcase-index ol { display:flex; overflow-x:auto; } .showcase-index li { min-width:220px; } .showcase-index > p,.showcase-index > strong,.showcase-index > span { display:none; } .life-section { gap:40px; } }
@media(max-width:640px) { .film-archive-hero { padding:120px 22px 34px; } .film-archive-hero h1 { font-size:45px; } .archive-section { padding:10px 22px 70px; } .archive-filter { gap:4px 20px; } .archive-filter button { font-size:14px; min-height:65px; padding-bottom:12px; } .archive-filter small { font-size:8px!important; } .archive-search { justify-self:stretch; max-width:none; width:100%; } .archive-result { margin:0 0 22px; } .archive-result button { margin-right:0; } .archive-grid { grid-template-columns:1fr; gap:34px; } .film-caption { padding-top:16px; } .film-caption h2 { font-size:21px; } .film-number { left:14px; top:12px; font-size:9px; } .film-play { opacity:1; } .film-play b { height:48px;width:48px; } .film-play > span { display:none; } .selected-section { padding:65px 22px; } .life-section { grid-template-columns:1fr; padding:65px 24px; gap:30px; } .home-categories { grid-template-columns:1fr; } .showcase-summary { display:block; } .showcase-summary__actions { margin-top:20px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }
.archive-filter button:hover,.archive-filter button.is-active { box-shadow:none; }
.archive-search input { border:0; width:100%; }
.archive-result[hidden] { display:none; }
#film-collection { scroll-margin-top:110px; }
.archive-grid--all { grid-template-columns:repeat(4,minmax(0,1fr)); }
.archive-grid--all .film-card { grid-column:span 2; }
.archive-grid--all .film-card--portrait { grid-column:span 1; }
.archive-grid--all .film-card--portrait .film-frame { aspect-ratio:9/16; }
.archive-grid--all .film-card--portrait .film-caption h2 { font-size:19px; }
.archive-grid--all .film-card--portrait .film-number { font-size:9px; left:12px; }
.archive-grid--all .film-card--portrait .film-caption { gap:8px; }
.archive-grid--all .film-card--portrait .film-detail { width:30px;height:30px; }
.life-films { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:24px; }
.life-films button { border:0; padding:0; background:#173033; color:#f3eee5; text-align:left; transition:transform .3s; }
.life-films button:hover { transform:translateY(-4px); }
.life-films img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.life-films span { display:block; padding:14px; font-size:12px; color:#f3eee5; letter-spacing:0; }
.life-films small { display:block; margin-top:8px; color:#b8c5bb; }
.showcase-controls nav { flex-wrap:wrap; }
@media(max-width:640px) { .archive-grid--all { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 14px; } .archive-grid--all .film-card--portrait .film-caption { display:block; } .archive-grid--all .film-card--portrait .film-caption h2 { font-size:17px; } .archive-grid--all .film-card--portrait .film-detail { display:none; } .archive-grid--all .film-card--portrait .film-caption p { font-size:9px; line-height:1.5; } .life-films { grid-template-columns:1fr; } }
.archive-grid--brand { grid-template-columns:repeat(6,minmax(0,1fr)); }
.archive-grid--brand .film-card { grid-column:span 3; }
.archive-grid--brand .film-card--portrait { grid-column:span 2; }
.archive-grid--brand .film-card--portrait .film-frame { aspect-ratio:9/16; }
.archive-grid--brand .film-card:first-child { grid-column:1/-1; display:grid; grid-template-columns:2fr 1fr; gap:36px; align-items:center; border-bottom:1px solid #ffffff20; padding-bottom:40px; }
.archive-grid--brand .film-card:first-child .film-caption { align-items:start; }
.archive-grid--brand .film-card:first-child h2 { font-size:clamp(25px,3vw,44px); }
@media(max-width:640px) { .archive-grid--brand { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 14px; } .archive-grid--brand .film-card { grid-column:span 2; } .archive-grid--brand .film-card--portrait { grid-column:span 1; } .archive-grid--brand .film-card:first-child { display:block; padding-bottom:0; border:0; } .archive-grid--brand .film-card--portrait .film-caption h2 { font-size:16px; } .archive-grid--brand .film-card--portrait .film-detail { display:none; } }
.archive-search { display:flex; align-items:center; width:340px; }
.archive-search label { flex:1; min-width:0; }
.archive-search button { flex-shrink:0; align-self:center; }
@media(max-width:640px) { .archive-search { width:100%; } }
/* Keep editorial ordering intact as the brand collection grows. */
.archive-grid--brand .film-card:has([data-open-video="taihe-electromechanical"]),
.archive-grid--brand .film-card:has([data-open-video="longi-product"]) { grid-column:1/-1; display:grid; grid-template-columns:2fr 1fr; gap:36px; align-items:center; padding-bottom:40px; border-bottom:1px solid #ffffff20; }
@media(max-width:640px) {
 .archive-grid--brand .film-card:has([data-open-video="taihe-electromechanical"]),
 .archive-grid--brand .film-card:has([data-open-video="longi-product"]) { display:block; padding-bottom:0; border:0; }
}

/* Mobile recovery: keep the public archive readable on narrow screens even when a
   browser has retained desktop layout metrics from an older release. */
@media (max-width: 780px) {
  html, body { width: 100%; min-width: 320px; overflow-x: hidden; }
  main { width: 100%; max-width: none; margin: 0; }
  .site-header { width: 100%; }
  .header-inner { width: 100%; }
  .primary-nav { width: 100%; }
  .home-hero, .page-hero, .film-archive-hero { min-height: auto; }
  .film-archive-hero { padding-top: 126px; }
  .film-archive-hero h1 { max-width: 100%; font-size: clamp(42px, 14vw, 72px); }
  .archive-section, .selected-section, .contact-section, .contact-aside { width: 100%; }
  .archive-grid, .archive-grid--all, .archive-grid--brand, .archive-grid--culture, .archive-grid--narrative, .archive-grid--life { grid-template-columns: 1fr; }
  .archive-grid .film-card, .archive-grid--brand .film-card, .archive-grid--brand .film-card--portrait { grid-column: auto; }
  .film-card { min-width: 0; }
  .film-caption h2 { overflow-wrap: anywhere; }
}
@media (max-width: 420px) {
  .brand { font-size: 18px; }
  .header-cta { display: none; }
  .menu-toggle { margin-left: auto; }
  .film-archive-hero { padding: 112px 20px 30px; }
  .archive-section { padding-inline: 20px; }
}

/* Restored intake contact surface */
.contact-section--intake { grid-template-columns:minmax(260px,.62fr) minmax(0,1.2fr); gap:clamp(38px,7vw,120px); }
.contact-section--intake h2 { font-size:clamp(45px,5vw,78px); line-height:.98; }
.intake-grid { display:grid; border-top:1px solid rgba(19,40,50,.26); }
.intake-grid a { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:20px; align-items:center; min-height:104px; padding:17px 0; border-bottom:1px solid rgba(19,40,50,.26); color:var(--ink); }
.intake-grid a:hover { padding-inline:14px; background:rgba(237,240,233,.32); }
.intake-grid a>span,.intake-grid b { color:#9a5b3d; font:800 12px var(--condensed); letter-spacing:.04em; }
.intake-grid h3 { margin:0; font:600 clamp(21px,2vw,31px)/1 var(--display); }
.intake-grid p { margin:7px 0 0; color:var(--ink-soft); font-size:14px; }
.contact-aside--direct { align-items:start; }
.contact-channels { display:grid; border-top:1px solid var(--line-light); }
.contact-channels>a { display:grid; grid-template-columns:60px minmax(0,1fr) auto; gap:7px 16px; align-items:center; min-height:86px; padding:17px 0; border-bottom:1px solid var(--line-light); }
.contact-channels>a span,.contact-channels>a small,.contact-channels>a b { font:800 12px/1.35 var(--condensed); letter-spacing:.045em; }
.contact-channels>a span,.contact-channels>a b { color:#e4ad7e; }
.contact-channels>a strong { overflow-wrap:anywhere; font-size:clamp(16px,1.35vw,21px); }
.contact-channels>a small { grid-column:2; color:#a9c0bd; font-weight:500; }
.contact-channels>a b { grid-column:3; grid-row:1/3; }
.contact-channel-note { padding-top:18px; color:#d4e2dd; font-size:14px; line-height:1.7; }
@media(max-width:780px){.contact-section--intake{grid-template-columns:1fr;}.intake-grid a{grid-template-columns:34px minmax(0,1fr);gap:11px}.intake-grid b{grid-column:2}.contact-channels>a{grid-template-columns:52px minmax(0,1fr) auto}}
@media(max-width:420px){.contact-channels>a{grid-template-columns:48px minmax(0,1fr)}.contact-channels>a b{grid-column:2;grid-row:3}}

/* Wedding collection */
.wedding-section { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:center; gap:6vw; padding:100px 6vw; background:#192a2b; }
.wedding-section__copy h2 { font:500 clamp(32px,4vw,62px)/1.3 var(--body); letter-spacing:-.045em; margin:24px 0; }
.wedding-section__copy h2 em { font-family:"Songti SC",serif; font-weight:400; font-style:normal; color:#e9c2a3; }
.wedding-section__copy>p:not(.section-index) { color:#bdcbc7; font-size:15px; line-height:1.9; margin-bottom:30px; }
.wedding-section__film { padding:0; border:1px solid #ffffff25; background:#0b1417; color:var(--paper); text-align:left; }
.wedding-section__film img { display:block; width:100%; aspect-ratio:16/9; object-fit:contain; }
.wedding-section__film>span { display:flex; justify-content:space-between; gap:16px; padding:20px; font-size:16px; }
.wedding-section__film small { color:#e9b486; }
@media(max-width:780px) { .wedding-section { grid-template-columns:1fr; padding:64px 22px; gap:28px; } .archive-grid--wedding { grid-template-columns:minmax(0,1fr); } }

/* Responsive tracks must shrink before their scrolling children do. */
@media (max-width: 1100px) {
  .home-intro { grid-template-columns: minmax(0,1fr); min-height:0; gap:28px; }
  .page-hero__bottom { grid-template-columns:minmax(0,1fr); gap:24px; }
}
@media (max-width: 900px) {
  .showcase-archive-layout { grid-template-columns:minmax(0,1fr); }
  .showcase-index, .showcase-current, .showcase-controls > * { min-width:0; }
  .showcase-index ol { max-width:100%; overscroll-behavior-x:contain; }
  .showcase-current { grid-template-columns:minmax(0,1fr); min-height:0; }
  .showcase-media, .showcase-media video { aspect-ratio:16/9; min-height:0; }
}
@media (max-width: 780px) {
  .header-inner { grid-template-columns:minmax(0,1fr) auto; }
  .header-cta { display:none; }
  .menu-toggle { width:44px; min-height:44px; padding:13px 7px; }
  .primary-nav { top:100%; visibility:hidden; }
  .site-header.is-menu-open .primary-nav { visibility:visible; max-height:calc(100dvh - 74px); overflow-y:auto; }
  .home-hero { padding:118px 22px 40px; }
  .home-hero h1 { font-size:clamp(54px,16vw,100px); line-height:.95; }
  .hero-actions { flex-wrap:wrap; }
  .hero-actions .button { flex:1 1 180px; }
  .scroll-cue { position:static; display:flex; justify-content:flex-end; margin-top:26px; }
  .home-intro, .selected-section, .life-section, .wedding-section { padding:60px 22px; }
  .home-intro h2, .section-heading h2, .about-statement h2, .trust-section h2,
  .promise-section h2, .lab-section h2, .contact-section h2, .contact-aside h2,
  .about-network__heading h2, .home-conversion h2, .page-cta h2, .detail-related h2 {
    font-size:clamp(30px,8.5vw,48px); line-height:1.25; overflow-wrap:anywhere;
  }
  .page-hero { padding:118px 22px 54px; }
  .page-hero h1, .work-detail-hero__copy h1 { font-size:clamp(34px,9.5vw,56px); line-height:1.2; overflow-wrap:anywhere; min-width:0; }
  .page-hero__bottom { margin-top:28px; }
  .showcase-controls { grid-template-columns:minmax(0,1fr); }
  .showcase-controls nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .showcase-controls button { grid-template-columns:minmax(0,1fr); gap:4px; padding:12px; min-height:64px; font-size:16px; }
  .showcase-controls button small { font-size:9px; line-height:1.4; }
  .showcase-summary { min-height:0; padding:22px 16px; }
  .showcase-summary h3 { font-size:25px; overflow-wrap:anywhere; }
  .film-archive-hero { padding:114px 22px 30px; }
  .film-archive-hero h1 { font-size:clamp(35px,10vw,60px); line-height:1.2; }
  .archive-toolbar { gap:18px; }
  .archive-filter { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; margin:0; }
  .archive-filter button { min-width:0; min-height:64px; padding:10px 0; font-size:16px; border-left:0; }
  .archive-filter button:nth-child(3) { border-left:0; }
  .archive-search { width:100%; max-width:none; min-height:48px; justify-self:stretch; }
  .archive-search input { font-size:16px; }
  .archive-result { margin:0 0 24px; flex-wrap:wrap; gap:12px; }
  .archive-result button { margin-right:0; min-height:44px; }
  .archive-grid { grid-template-columns:minmax(0,1fr); gap:32px; }
  .archive-grid .film-card { grid-column:1 / -1; }
  .archive-grid--brand .film-card:first-child,
  .archive-grid--brand .film-card:has([data-open-video="taihe-electromechanical"]),
  .archive-grid--brand .film-card:has([data-open-video="longi-product"]) { display:block; border:0; padding-bottom:0; }
  .archive-grid .film-card--portrait .film-frame { aspect-ratio:3/4; }
  .film-card--portrait .film-frame img, .film-card--portrait .film-frame video { object-fit:contain; }
  .film-play { opacity:1; }
  .film-caption h2, .archive-grid--brand .film-card:first-child h2 { font-size:22px; line-height:1.4; }
  .film-detail { min-width:44px; min-height:44px; }
  .life-section { grid-template-columns:minmax(0,1fr); }
  .work-detail-hero { grid-template-columns:minmax(0,1fr); min-height:0; padding-bottom:36px; }
  .work-detail-player__media video { object-fit:contain; }
  .work-detail-nav { position:static; grid-template-columns:minmax(0,1fr) auto; }
  .detail-related__cards { grid-template-columns:minmax(0,1fr); }
  .detail-related__cards a:nth-child(3) { display:block; }
  .service-grid, .audience-grid, .trust-grid, .lab-section > div { grid-template-columns:minmax(0,1fr); }
  .service-grid article, .audience-grid article, .trust-grid article { min-height:0; padding:24px; }
  .service-grid h3 { margin-top:24px; }
  .engine-launch strong, .engine-diagram article h3, .service-grid h3, .audience-grid h3 { line-height:1.3; }
  .flow-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .flow-panel { min-height:0; padding:28px 20px; }
  .home-conversion, .page-cta { min-height:0; padding:60px 22px; }
  .video-dialog { max-height:calc(100dvh - 24px); overflow-y:auto; }
  .video-dialog__top { padding:10px 14px; gap:12px; }
  .icon-close { min-width:64px; min-height:44px; flex-shrink:0; }
  .video-dialog__caption { padding:20px; }
  .video-dialog__caption h2 { font-size:26px; line-height:1.3; overflow-wrap:anywhere; }
}
@media (max-width: 780px) {
  .team-group { contain-intrinsic-width:none; }
}