/* R10: reference-led presentation layer; the original R9 components remain in styles.css. */
:root { --paper:#f4f8fc; --ink:#0b2543; --muted:#5c7391; }
html { scrollbar-gutter:stable; }
.hero { width:100%; height:auto; aspect-ratio:1672/941; min-height:0; max-height:none; }
.hero .scene img,.hero .scene video { object-position:50% 50%; }
.hero-shade { background:linear-gradient(180deg,transparent 65%,#08243612 80%,#07233630); }
.site-header { top:2.4%; left:4.5%; right:3%; height:7%; min-height:52px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; backdrop-filter:none; gap:24px; }
.brand { color:var(--ink); gap:12px; }
.brand b { font-size:clamp(22px,1.7vw,31px); letter-spacing:-.4px; }
.brand small { font-size:clamp(8px,.9vw,14px); margin-top:6px; letter-spacing:3px; }
.brand .sail { width:clamp(30px,3.1vw,50px); height:52px; }
.desktop-nav { font-size:clamp(13px,1.04vw,18px); gap:clamp(24px,3.1vw,55px); }
.desktop-nav a,.desktop-nav button { min-height:44px; padding:10px 0; }
.header-actions { gap:22px; }
.header-search { display:flex; width:44px; height:44px; }
.header-cta { min-height:44px; padding:10px 24px; font-size:clamp(12px,1vw,16px); }
.header-cta svg { width:18px; height:18px; }
.hero-copy { left:4.5%; top:15.9%; width:60%; }
.hero-copy .eyebrow { font-size:clamp(9px,.86vw,15px); letter-spacing:.31em; margin-bottom:1.1vw; line-height:1.6; }
.english-title { font-size:6.68vw; font-weight:400; letter-spacing:-.028em; line-height:1.04; }
.chinese-title { font-size:4.42vw; font-weight:700; line-height:1.2; letter-spacing:.025em; margin-top:0; }
.hero-subtitle { font-size:1.64vw; color:#344b64; margin:.6vw 0 2vw; letter-spacing:.06em; }
.hero-buttons { gap:2.1vw; }
.hero .button { min-height:48px; padding:1.05vw 2.6vw; gap:20px; font-size:clamp(13px,1.24vw,21px); }
.hero .film-button { padding:0; }
.round-play { height:3.5vw; width:3.5vw; min-width:44px; min-height:44px; }
.hero-motto { top:22%; right:2.8%; font:400 1.05vw/1.6 var(--sans); transform:none; letter-spacing:.08em; text-shadow:none; color:#173450; }
.hero-motto p { margin:0 0 2vw; }
.hero-motto>span { display:block; padding:1.7vw 0 0; position:relative; font-size:.8vw; letter-spacing:0; }
.hero-motto>span::before { content:''; position:absolute; top:0; left:0; width:34%; border-top:1px solid #2c485f; }
.hero-dock { left:12.6%; right:12.6%; height:11.4%; bottom:11.1%; min-height:74px; border-radius:19px; }
.hero-dock>a,.hero-dock>button { padding:12px 10px; gap:14px; }
.hero-dock svg { width:2.3vw; height:2.3vw; min-width:28px; min-height:28px; }
.hero-dock b { font-size:clamp(11px,1.02vw,18px); }
.hero-dock small { font-size:clamp(9px,.78vw,14px); }
.hero-lower { bottom:2.5%; left:4.5%; right:3%; align-items:center; }
.scene-selector { display:flex; align-items:center; gap:18px; }
.scene-selector p { display:none; }
.selector-line { gap:12px; font-size:12px; }
.selector-line .icon-button { width:44px; height:44px; }
.selector-line #prev-scene { margin-left:4px; }
.scene-name { margin-inline:6px; font-size:12px; }
.ocean-toolbar>.icon-button { width:44px; height:44px; }
.scene-status { min-height:44px; font-size:11px; }
.scene-status small { font-size:8px; letter-spacing:1.5px; }
.scroll-cue { position:absolute; bottom:2.2%; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; color:#eef6fe; font-size:13px; line-height:1.5; gap:7px; min-height:44px; z-index:3; }
.scroll-cue svg { transform:rotate(90deg); width:20px; height:20px; }
.mobile-eyebrow { display:none; }
.content-width { width:88.2%; max-width:1500px; }
.learning { padding:42px 0 26px; background-color:#f5f9fd; }
.section-heading { margin-bottom:24px; gap:40px; }
.section-heading h2 { font-size:clamp(27px,2.55vw,39px); font-weight:700; letter-spacing:.02em; line-height:1.4; margin-bottom:13px; }
.learning .eyebrow { font-size:10px; letter-spacing:.32em; margin-bottom:9px; }
.learning-intro { font-size:clamp(14px,1.35vw,19px); line-height:1.65; }
.heading-aside { padding-top:20px; max-width:32%; }
.heading-aside p { font-size:clamp(12px,1.07vw,16px); margin-bottom:22px; }
.text-link { min-height:44px; }
.heading-aside i { margin-bottom:12px; }
.feature-grid { gap:14px; }
.feature { min-height:238px; padding:24px 26px; border-radius:17px; background:#ffffffed; box-shadow:0 8px 24px #6686a00a; }
.feature-num { color:#6781a0; font-size:13px; }
.feature-icon { width:84px; height:84px; top:21px; right:27px; }
.feature h3 { margin:63px 0 16px; font-size:clamp(16px,1.48vw,22px); font-weight:600; }
.feature p { font-size:clamp(12px,1.08vw,15px); color:#627895; padding-right:18px; }
.small-arrow { bottom:29px; right:20px; }
.case-section,.case-inner { min-height:350px; }
.case-section { background:#4a6783; }
.case-water { background:linear-gradient(90deg,#35577783,transparent 45%,#244b7020),url('assets/case-bokeh.webp') center/cover; }
.case-water::after { backdrop-filter:none; background:#7294ba10; }
.case-portrait { width:31%; left:33%; height:100%; object-fit:cover; object-position:50% 25%; mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); }
.case-inner { padding-block:40px; gap:50px; }
.case-copy { max-width:42%; }
.case-copy h2 { font-size:clamp(25px,2.4vw,36px); font-weight:600; line-height:1.4; letter-spacing:.02em; }
.case-copy>p:not(.eyebrow) { font-size:clamp(12px,1.08vw,16px); line-height:1.8; }
.case-copy .button { min-height:44px; font-size:14px; padding:12px 28px; }
.case-card { width:39%; padding:25px 23px 34px; border-radius:20px; gap:15px; background:#e3edfc28; }
.case-card h3 { font-size:clamp(15px,1.42vw,22px); margin-bottom:18px; }
.case-card li { font-size:clamp(11px,1.05vw,15px); gap:10px; margin:10px 0; }
.project-art { width:34%; transform:translateY(-39px); }
.project-art img { height:185px; border-radius:8px; }
.project-art span { font-size:29px; }
.case-card-link { min-height:32px; bottom:4px; right:20px; }
.quote { padding:37px 0 30px; gap:35px; }
.quote p { font-size:19px; letter-spacing:5px; }
.quote-mark { font-size:68px; }
.closing-quote { color:#b4c5d9; transform:translateY(14px); }
.site-footer { font-size:11px; padding-block:12px; }
.site-footer button,.site-footer a { min-height:44px; display:inline-flex; align-items:center; font-size:11px; }
.site-footer .footer-brand { font-size:18px; }
.drawer { width:510px; }
.drawer-intro,.drawer-foot,.drawer-search input,.course-row { font-size:14px; }
.drawer-search input { min-height:24px; }
.course-row { min-height:48px; }
.drawer-head .icon-button,.dialog-close { width:44px; height:44px; }
.search-count { font-size:12px; color:#6a8198; }
.setting-line select { min-height:44px; }
.technical-status { font-variant-numeric:tabular-nums; }
.modal { max-height:90dvh; overflow:auto; }
.modal .eyebrow { max-width:calc(100% - 36px); }
.cinema .hero .scene img,.cinema .hero .scene video { object-fit:contain; }
.cinema .hero { background:#0b2235; }
.cinema .scroll-cue { display:none; }
.cinema .hero-lower { bottom:24px; }

@media (min-width:901px) and (max-width:1150px) {
  .site-header { gap:16px; }
  .brand b { font-size:21px; }
  .brand small { font-size:8px; letter-spacing:2px; }
  .desktop-nav { gap:22px; font-size:13px; }
  .header-actions { gap:8px; }
  .header-search { display:none; }
  .hero-dock { left:7%; right:7%; }
  .hero-dock>a,.hero-dock>button { gap:10px; }
  .hero-motto { right:2.4%; font-size:12px; }
  .hero-motto>span { font-size:10px; }
  .scene-status { font-size:10px; }
  .ocean-toolbar { gap:7px; }
  .settings-button { display:none; }
  .feature { padding:20px; min-height:215px; }
  .feature-icon { width:75px; height:75px; right:20px; }
  .feature h3 { margin-top:60px; }
  .case-card { width:40%; padding-inline:18px; gap:10px; }
  .case-copy { max-width:43%; }
  .project-art img { height:161px; }
}

@media (max-width:900px) {
  .hero { height:auto; aspect-ratio:2/3; max-height:none; min-height:660px; background:#132e3e; }
  .hero .scene picture,.hero .scene img { height:auto; bottom:auto; }
  .hero .scene img { width:100%; height:auto; object-fit:contain; object-position:top; }
  .hero .scene video { height:auto; width:100%; object-fit:contain; object-position:top; }
  .hero-shade { background:linear-gradient(180deg,#051d3214,transparent 65%,#0e293714); }
  .site-header { left:6%; right:6%; top:22px; height:44px; min-height:44px; gap:12px; }
  .brand { color:#fff; gap:9px; }
  .brand b { font-size:21px; }
  .brand small { font-size:8px; letter-spacing:1.5px; margin-top:3px; }
  .brand .sail { width:31px; height:39px; }
  .desktop-nav,.header-cta { display:none; }
  .header-actions { margin-left:auto; gap:5px; }
  .header-search,.mobile-menu { display:flex; height:44px; width:44px; }
  .mobile-menu { border-color:transparent; }
  .hero-copy { left:6%; top:12vw; padding-top:28px; width:88%; color:#fff; }
  .desktop-eyebrow { display:none; }
  .mobile-eyebrow { display:inline; }
  .hero-copy .eyebrow { font-size:clamp(9px,1.45vw,14px); letter-spacing:.28em; color:#f3f8ff; margin-bottom:8px; }
  .english-title { font-size:9.7vw; line-height:1.06; letter-spacing:-.025em; }
  .chinese-title { font-size:6.9vw; font-weight:700; letter-spacing:.02em; line-height:1.28; margin-top:5px; }
  .hero-subtitle { color:#f3f7fc; font-size:clamp(12px,2.2vw,18px); letter-spacing:0; white-space:normal; margin:9px 0 14px; line-height:1.65; max-width:68%; text-shadow:0 1px 8px #173652; }
  .hero-subtitle span { display:block; }
  .hero-buttons { gap:9px; }
  .hero .button { min-height:44px; padding:10px 14px; font-size:12px; gap:10px; }
  .hero .primary { background:#fff; color:#173350; }
  .hero .film-button { padding:8px 10px; font-size:12px; gap:6px; border:1px solid #eef5ff87; background:#17334d38; backdrop-filter:blur(3px); }
  .hero .film-button .round-play { width:21px; height:21px; min-width:21px; min-height:21px; border:0; background:none; }
  .round-play { width:36px; height:36px; min-width:36px; min-height:36px; border-color:#f1f8ffc4; background:#ffffff13; }
  .round-play svg { width:16px; height:16px; }
  .hero-motto { display:none; }
  .hero-lower { left:6%; right:6%; bottom:175px; align-items:flex-end; gap:12px; }
  .scene-selector { display:block; }
  .selector-line { gap:9px; font-size:12px; }
  .selector-line .icon-button { width:44px; height:44px; }
  .selector-line #prev-scene { margin-left:0; }
  .scene-name { display:none; }
  .scene-selector p { display:block; font-size:11px; margin:8px 0 0; line-height:1.7; letter-spacing:.04em; }
  .mobile-break { display:block; }
  .ocean-toolbar { gap:4px; }
  .ocean-toolbar>.icon-button { width:36px; height:44px; border:0; }
  .ocean-toolbar>.icon-button svg { width:17px; height:17px; }
  .scene-status { font-size:9px; max-width:108px; min-height:44px; }
  .scene-status small { font-size:7px; letter-spacing:.07em; }
  .settings-button,.cinema-button { display:none!important; }
  .hero-dock { left:6%; right:6%; bottom:65px; height:95px; min-height:0; border-radius:15px; grid-template-columns:repeat(4,1fr); }
  .hero-dock>*:nth-child(5) { display:none; }
  .hero-dock>a,.hero-dock>button { flex-direction:column; text-align:center; padding:10px 3px; gap:5px; }
  .hero-dock svg { width:27px; height:27px; min-width:27px; min-height:27px; }
  .hero-dock b { font-size:11px; }
  .hero-dock small { font-size:8px; }
  .scroll-cue { bottom:9px; font-size:10px; gap:3px; min-height:42px; }
  .content-width { width:88%; }
  .learning { padding:33px 0 28px; }
  .section-heading { display:block; margin-bottom:18px; }
  .section-heading h2 { font-size:clamp(23px,3.6vw,30px); line-height:1.5; letter-spacing:0; }
  .learning-intro { font-size:13px; }
  .heading-aside { padding:0; margin-top:10px; max-width:none; display:flex; justify-content:flex-end; }
  .heading-aside p,.heading-aside i { display:none; }
  .heading-aside .text-link { font-size:13px; gap:14px; }
  .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .feature { min-height:207px; padding:18px 16px 20px; border-radius:16px; }
  .feature-icon { width:72px; height:72px; right:14px; top:16px; }
  .feature-num { font-size:11px; }
  .feature h3 { font-size:16px; margin:66px 0 12px; line-height:1.5; }
  .feature p { font-size:11px; line-height:1.8; padding-right:5px; }
  .small-arrow { right:10px; bottom:20px; width:23px; height:23px; }
  .case-section,.case-inner { min-height:630px; }
  .case-inner { display:block; padding-top:31px; padding-bottom:28px; }
  .case-copy { max-width:100%; position:relative; z-index:2; }
  .case-copy h2 { font-size:clamp(23px,3.6vw,30px); white-space:normal; line-height:1.5; }
  .case-copy .eyebrow { font-size:9px; }
  .case-copy>p:not(.eyebrow) { font-size:12px; max-width:90%; text-shadow:0 1px 8px #133248; }
  .case-copy .button { min-height:44px; font-size:13px; padding:11px 22px; }
  .case-portrait { left:30%; width:75%; top:90px; height:330px; object-position:50% 20%; opacity:.85; mask-image:linear-gradient(90deg,transparent,#000 25%,#000 95%),linear-gradient(#000 75%,transparent); mask-composite:intersect; }
  .case-card { width:100%; max-width:480px; padding:24px 20px 40px; margin:90px auto 0; gap:12px; border-radius:20px; background:#afc4df38; }
  .case-card .eyebrow { font-size:10px; }
  .case-card h3 { font-size:16px; white-space:normal; margin-bottom:18px; }
  .case-card li { font-size:12px; gap:7px; }
  .project-art { width:31%; transform:translateY(-43px); }
  .project-art img { height:160px; }
  .project-art span { font-size:25px; }
  .project-art em { font-size:20px; }
  .case-card-link { font-size:11px; min-height:44px; bottom:0; right:18px; }
  .quote { padding:30px 0 20px; gap:12px; }
  .quote p { font-size:13px; letter-spacing:1.5px; }
  .quote div>span { font-size:7px; letter-spacing:.1em; }
  .quote-mark { font-size:43px; }
  .site-footer { flex-wrap:wrap; justify-content:center; gap:0 14px; padding-bottom:12px; font-size:10px; }
  .site-footer div { gap:20px; }
  .site-footer button,.site-footer a { font-size:11px; }
  .site-footer .footer-brand { font-size:17px; }
  .drawer { width:min(510px,100%); padding:24px 20px; }
  .modal { padding:33px 25px; }
  .cinema .hero .scene img,.cinema .hero .scene video { width:100%; height:100%; object-fit:contain; }
}

@media (min-width:600px) and (max-width:900px) {
  .hero { height:auto; }
  .site-header { top:4vw; }
  .brand b { font-size:27px; }
  .brand small { font-size:10px; }
  .hero-copy { padding-top:20px; }
  .hero .button { padding:14px 30px; font-size:16px; }
  .hero .film-button { font-size:15px; }
  .hero-lower { bottom:27%; }
  .hero-dock { bottom:12%; height:12%; }
  .hero-dock b { font-size:16px; }
  .hero-dock small { font-size:12px; }
  .hero-dock svg { width:35px; height:35px; }
  .scroll-cue { bottom:4%; font-size:12px; }
  .scene-status { font-size:12px; max-width:none; }
  .scene-status small { font-size:9px; }
  .scene-selector p { font-size:14px; }
  .feature { min-height:235px; padding:25px; }
  .feature h3 { font-size:20px; }
  .feature p { font-size:14px; }
  .case-portrait { left:42%; width:54%; top:0; height:450px; }
  .case-card { margin-right:0; }
}

@media (max-width:374px) {
  .brand b { font-size:18px; }
  .brand small { font-size:7px; }
  .brand .sail { width:25px; }
  .site-header { gap:4px; }
  .header-actions { gap:0; }
  .hero-copy { top:55px; padding-top:36px; }
  .hero-copy .eyebrow { font-size:8px; letter-spacing:.22em; }
  .hero .button { padding:9px 15px; font-size:12px; }
  .hero .film-button { font-size:11px; }
  .hero-buttons { gap:9px; }
  .hero-subtitle { max-width:67%; font-size:11px; }
  .hero-dock b { font-size:10px; }
  .hero-dock small { font-size:7px; }
  .hero-lower { gap:6px; }
  .selector-line { gap:5px; font-size:11px; }
  .ocean-toolbar>.icon-button { width:28px; }
  .scene-status { max-width:92px; font-size:8px; }
  .feature { padding-inline:13px; min-height:213px; }
  .feature h3 { font-size:14px; }
  .feature p { font-size:10px; }
  .small-arrow { bottom:15px; }
  .section-heading h2 { font-size:21px; }
  .case-card { padding-inline:16px; gap:8px; }
  .case-card h3 { font-size:15px; }
  .case-card li { font-size:10px; }
}

.keep-phrase { display:inline-block; }
.preview-notice { position:relative; z-index:101; margin:0; padding:16px 24px; color:#24435a; background:#e7f3fc; font-size:14px; line-height:1.7; }
#play-ocean-prompt[hidden],.scene-status[hidden] { display:none!important; }
#play-ocean-prompt { padding:4px 10px; border:1px solid #ffffff70; border-radius:10px; background:#14384988; }
.mobile-dock { display:none; }
@media (max-width:900px) {
  .desktop-dock { display:none; }
  .mobile-dock { display:grid; }
}
.mobile-nav-links { display:flex; flex-direction:column; margin-top:24px; }
.mobile-nav-links a,.mobile-nav-links button { text-align:left; padding:15px 4px; min-height:55px; border-bottom:1px solid #dfe7ef; font-size:18px; }
.mobile-nav-links a:hover,.mobile-nav-links button:hover { color:#3e7399; }
.mobile-nav-note { margin-top:26px; font-size:12px; color:#6a8198; }

/* The approved wide film gets its own fixed mobile framing. The live image is
   never stretched or animated with CSS; only the decoded MP4 provides motion. */
@media (max-width:900px) {
  .hero[data-video-framing="wide"] .scene { background:linear-gradient(180deg,#7798b7,#8ca7b9 24%,#153544 84%); }
  .hero[data-video-framing="wide"]:has(#ocean-video.is-visible) #scene-poster { visibility:hidden; }
  .hero[data-video-framing="wide"] .scene video {
    inset:clamp(82px,26vw,200px) 0 auto;
    width:100%; height:min(92vw,760px);
    object-fit:cover; object-position:60% 50%;
    mask-image:linear-gradient(transparent,#000 32px,#000 86%,transparent);
  }
  .hero[data-video-framing="wide"] .hero-copy { text-shadow:0 1px 9px #163b5770; }
  .cinema .hero[data-video-framing="wide"] .scene video { inset:0; height:100%; object-fit:contain; object-position:center; mask-image:none; }
}