:root {
  color-scheme: dark;
  --bg: #090a0d; --panel: #111318; --panel-2: #171a20;
  --text: #f4f3ef; --muted: #9a9da7; --line: rgba(255,255,255,.12);
  --accent: #c7ff55; --radius: 18px; --max: 1240px;
  font-family: "DM Sans", "Noto Sans Thai", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: "DM Sans","Noto Sans Thai",sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { color: #090a0d; background: var(--accent); }
.grain { position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }
.site-header { height: 82px; padding: 0 6.2%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; background: rgba(9,10,13,.84); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .12em; }
.brand-mark { width: 31px; height: 31px; display: grid; place-items: center; background: var(--accent); color: #111; border-radius: 50%; font-size: 17px; font-weight: 700; letter-spacing: 0; }
.brand-light { color: var(--muted); font-weight: 400; margin-left: 4px; }
.main-nav { display: flex; gap: 34px; color: #c4c5cb; font-size: 13px; }
.main-nav a, .site-footer a { transition: color .2s ease; }
.main-nav a:hover, .site-footer a:hover { color: var(--accent); }
.header-cta { border: 1px solid var(--line); padding: 11px 16px; border-radius: 999px; font-size: 12px; }
.header-cta span { color: var(--accent); margin-left: 9px; }
.hero { max-width: var(--max); min-height: 640px; margin: auto; padding: 100px 6.2% 94px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 44px; overflow: hidden; }
.eyebrow { margin: 0 0 24px; color: var(--muted); font-size: 10px; letter-spacing: .2em; font-weight: 700; }
.status-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 15px #c7ff5570; }
.hero h1 { margin: 0; font-size: clamp(42px,5.2vw,74px); line-height: 1.19; letter-spacing: -.055em; font-weight: 600; }
h1 em, .contact-section h2 em { color: var(--accent); font-style: normal; }
.hero-description { max-width: 440px; margin: 24px 0 30px; color: #a9abb4; font-size: 15px; line-height: 1.9; }
.hero-actions { display: flex; align-items: center; gap: 25px; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 24px; padding: 0 19px; border-radius: 999px; font-size: 12px; font-weight: 700; transition: transform .25s ease, background .25s ease; }
.button:hover { transform: translateY(-3px); }
.button-primary { background: var(--accent); color: #11140a; }
.button-primary:hover { background: #d7ff87; }
.button span { font-size: 17px; }
.text-link { color: #d8d8dc; font-size: 12px; }
.text-link span { color: var(--accent); margin-left: 6px; }
.hero-meta { margin-top: 54px; display: flex; flex-wrap: wrap; gap: 10px; color: #777b85; font-size: 9px; letter-spacing: .12em; }
.hero-art { min-height: 410px; position: relative; display: grid; place-items: center; }
.art-orbit { position: absolute; border: 1px solid rgba(199,255,85,.16); border-radius: 50%; }
.orbit-one { width: 390px; height: 390px; }
.orbit-two { width: 470px; height: 470px; border-style: dashed; opacity: .65; }
.art-cross { position: absolute; right: 8%; top: 4%; color: var(--accent); font-size: 42px; }
.art-frame { width: min(100%, 410px); height: 320px; padding: 18px; border: 1px solid #ffffff24; border-radius: 7px; background: radial-gradient(ellipse at 65% 44%,#333a2a 0%,#181b1d 33%,#101115 68%); box-shadow: 0 35px 100px #0009; position: relative; transform: rotate(-3deg); }
.art-frame:before { content: ""; position: absolute; inset: 8px; border: 1px solid #ffffff0b; pointer-events: none; }
.art-topline { display: flex; justify-content: space-between; color: #a2a4a9; font-size: 8px; letter-spacing: .14em; }
.art-center { position: absolute; inset: 50px 18px 42px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; }
.play-symbol { display: grid; place-items: center; width: 54px; height: 54px; padding-left: 4px; border: 1px solid #c7ff5580; color: var(--accent); border-radius: 50%; font-size: 15px; box-shadow: 0 0 50px #c7ff551a; }
.art-caption { font-size: 29px; line-height: 1.02; letter-spacing: -.04em; text-align: center; font-weight: 700; }
.art-caption i { color: var(--accent); font-style: normal; }
.art-timeline { position: absolute; bottom: 18px; left: 18px; right: 18px; height: 18px; display: flex; gap: 4px; align-items: end; }
.art-timeline i { flex: 1; height: 35%; background: #c7ff556b; border-radius: 2px; }
.art-timeline i:nth-child(3n) { height: 90%; } .art-timeline i:nth-child(4n) { height: 55%; } .art-timeline i:nth-child(5n) { height: 70%; }
.art-index { position: absolute; bottom: 0; right: 0; color: #7c8089; font-size: 8px; letter-spacing: .16em; }
.work-section { padding: 90px 6.2% 105px; border-top: 1px solid var(--line); background: #0d0e12; }
.section-heading { max-width: var(--max); margin: 0 auto 32px; display: flex; align-items: end; justify-content: space-between; gap: 25px; }
.section-heading .eyebrow { margin-bottom: 12px; }
.section-heading h2, .about-copy h2 { margin: 0; font-size: clamp(28px,3.3vw,44px); letter-spacing: -.045em; font-weight: 600; }
.section-note { color: var(--muted); font-size: 12px; line-height: 1.9; margin: 0 0 3px; }
.filters { max-width: var(--max); margin: 0 auto 28px; display: flex; flex-wrap: wrap; gap: 9px; }
.filter-button { color: #a7a9b1; background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 10px 15px; cursor: pointer; font-size: 11px; transition: all .2s ease; }
.filter-button:hover, .filter-button[aria-pressed="true"] { color: #10120b; background: var(--accent); border-color: var(--accent); }
.project-grid { max-width: var(--max); margin: auto; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px 18px; }
.project-group-heading { grid-column: 1 / -1; margin: 22px 0 0; padding: 0 0 12px; border-bottom: 1px solid var(--line); color: var(--text); font-size: 15px; font-weight: 600; letter-spacing: .01em; }
.project-card { min-width: 0; cursor: pointer; }
.project-thumb { aspect-ratio: 16/10; overflow: hidden; position: relative; background: linear-gradient(135deg,#23272c,#101115); border-radius: 10px; border: 1px solid #ffffff10; }
.project-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .25s ease; }
.project-thumb.thumb-missing { background: radial-gradient(ellipse at 50% 45%,#293126 0%,#171a1d 42%,#0d0e12 100%); }
.project-thumb.thumb-missing::before { content: "ATSADA STUDIO PROMAX"; position: absolute; inset: 0; display: grid; place-items: center; color: #c7ff55a8; font-size: clamp(12px,2vw,20px); font-weight: 700; letter-spacing: .2em; }
.project-thumb.thumb-missing::after { content: "PREVIEW UNAVAILABLE"; position: absolute; top: 14px; left: 14px; color: #a3a6af; font-size: 8px; letter-spacing: .15em; }
.project-card:hover .project-thumb img { transform: scale(1.055); opacity: .72; }
.thumb-shade { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 50%,#0009); }
.project-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.85); width: 48px; height: 48px; display: grid; place-items: center; padding-left: 3px; border-radius: 50%; background: var(--accent); color: #10120b; opacity: 0; transition: all .3s ease; }
.project-card:hover .project-play { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.project-category { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); color: white; background: #090a0db8; padding: 6px 9px; border-radius: 5px; font-size: 9px; letter-spacing: .03em; backdrop-filter: blur(10px); }
.project-subtype { position: absolute; top: 12px; right: 12px; color: #11140a; background: var(--accent); padding: 6px 9px; border-radius: 5px; font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.project-info { padding: 13px 2px 0; display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.project-title { margin: 0; font-size: 13px; line-height: 1.7; font-weight: 500; }
.project-number { flex-shrink: 0; color: #70737d; font-size: 10px; padding-top: 3px; }
.source-note, .loading-note { color: #777b85; font-size: 11px; text-align: center; margin: 32px auto 0; }
.about-section { max-width: var(--max); margin: auto; padding: 105px 6.2%; display: grid; grid-template-columns: .75fr 1.25fr; gap: 70px; }
.about-label .eyebrow { margin-bottom: 40px; }
.about-number { font-size: 76px; font-weight: 700; letter-spacing: -.08em; color: #282b31; }
.about-number span { color: var(--accent); font-size: 30px; margin: 0 8px; }
.about-copy h2 { line-height: 1.35; }
.about-copy > p { max-width: 590px; margin: 22px 0 28px; color: #a6a8b0; font-size: 14px; line-height: 2; }
.skill-list { display: flex; flex-wrap: wrap; gap: 8px; }
.skill-list span { border: 1px solid var(--line); color: #c2c4cb; border-radius: 999px; padding: 9px 13px; font-size: 10px; }
.contact-section { padding: 90px 20px 100px; text-align: center; border-top: 1px solid var(--line); background: radial-gradient(ellipse at 50% 100%,#20281a 0%,#0d0e12 60%); }
.contact-section .eyebrow { margin-bottom: 20px; }
.contact-section h2 { margin: 0; font-size: clamp(34px,5vw,60px); line-height: 1.3; letter-spacing: -.05em; }
.contact-actions { width: min(100%, 540px); margin: 30px auto 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }\n.contact-button { min-height: 58px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: #111318; color: var(--text); text-decoration: none; font-size: 13px; font-weight: 600; transition: border-color .2s ease, transform .2s ease, background .2s ease; }\n.contact-button:hover { border-color: var(--accent); transform: translateY(-2px); background: #171a1f; }\n.contact-icon { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 8px; background: #1877f2; color: white; font-size: 19px; font-weight: 700; }\n.contact-line-icon { background: #06c755; font-size: 9px; letter-spacing: -.04em; }\n.contact-phone .contact-icon { background: #343840; }\n.contact-button small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 400; }\n.contact-button-pending { cursor: default; opacity: .72; }\n.contact-arrow { margin-left: auto; color: var(--accent); }\n.contact-copy { margin: 20px 0 26px; color: #a4a6af; font-size: 13px; }
.contact-hint { margin-top: 22px; color: #777b85; font-size: 10px; }
.site-footer { min-height: 86px; border-top: 1px solid var(--line); padding: 20px 6.2%; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.site-footer > span, .site-footer > a:last-child { color: #777b85; font-size: 9px; letter-spacing: .08em; }
@media (max-width: 850px) {
  .hero { grid-template-columns: 1fr; padding-top: 75px; gap: 22px; }
  .hero-art { min-height: 380px; }
  .section-heading { align-items: start; flex-direction: column; }
  .project-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .about-section { gap: 35px; }
}
@media (max-width: 560px) {
  .site-header { height: 68px; padding: 0 5%; }
  .main-nav { gap: 15px; font-size: 11px; }
  .main-nav a:nth-child(2) { display: none; }
  .header-cta { padding: 9px 11px; font-size: 10px; }
  .brand { font-size: 11px; gap: 7px; }
  .brand-mark { width: 27px; height: 27px; }
  .hero { padding: 62px 5% 68px; }
  .hero h1 { font-size: clamp(39px,10vw,55px); }
  .hero-description { font-size: 13px; }
  .hero-meta { margin-top: 36px; font-size: 8px; }
  .hero-art { min-height: 320px; }
  .art-frame { height: 255px; width: 90%; }
  .orbit-one { width: 280px; height: 280px; } .orbit-two { width: 330px; height: 330px; }
  .art-caption { font-size: 25px; }
  .work-section { padding: 68px 5% 75px; }
  .project-grid { gap: 22px 12px; }
  .project-title { font-size: 11px; }
  .project-thumb { aspect-ratio: 4/3; border-radius: 7px; }
  .project-play { opacity: 1; width: 35px; height: 35px; font-size: 11px; }
  .project-category { left: 7px; bottom: 7px; font-size: 7px; padding: 5px 6px; }
  .about-section { padding: 72px 5%; grid-template-columns: 1fr; gap: 5px; }
  .about-label .eyebrow { margin-bottom: 12px; }
  .about-number { font-size: 48px; }
  .contact-section { padding: 70px 6% 78px; }
  .site-footer { padding: 20px 5%; flex-wrap: wrap; }
  .site-footer > span { order: 3; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }
/* On mobile, hide the page behind the modal completely to prevent background iframe/video layers from appearing above the overlay. */
body.modal-open > :not(.video-modal) { display: none !important; }
/* Hard guard: only media inside the active modal may remain visible while playing. */
body.modal-open iframe, body.modal-open video { visibility: hidden !important; pointer-events: none !important; }
body.modal-open .video-modal iframe, body.modal-open .video-modal video { visibility: visible !important; pointer-events: auto !important; }
.modal-open { overflow: hidden; }
.video-modal { position: fixed; inset: 0; z-index: 2147483000; isolation: isolate; display: grid; place-items: center; padding: 24px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.82); backdrop-filter: blur(12px); }
.modal-panel { position: relative; width: min(900px,100%); padding: 16px; background: #111318; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 30px 100px #000b; }
.modal-close { position: absolute; z-index: 2; top: 24px; right: 24px; width: 38px; height: 38px; border: 1px solid #ffffff40; border-radius: 50%; background: #090a0dcc; color: white; font-size: 25px; cursor: pointer; }
.modal-video { aspect-ratio: 16/9; background: #000; border-radius: 8px; overflow: hidden; }
.modal-video iframe { width: 100%; height: 100%; border: 0; }
.modal-title { margin: 15px 0 8px; font-size: 14px; line-height: 1.7; }
.modal-external { color: var(--accent); font-size: 11px; }
.project-card:focus-visible, .filter-button:focus-visible, .button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (max-width: 560px) { .video-modal { padding: 10px; } .modal-panel { padding: 8px; } .modal-close { top: 14px; right: 14px; } .modal-title { padding: 0 5px; font-size: 12px; } }
/* Hero video carousel */
.hero-showcase { --showcase-accent: var(--accent); min-width: 0; width: 100%; padding: 16px; position: relative; overflow: hidden; border: 1px solid #ffffff1a; border-radius: 14px; background: radial-gradient(ellipse at 50% 0%,#2b3124 0%,#121419 62%); box-shadow: 0 28px 90px #0008; transition: background .5s ease,border-color .5s ease; }
.showcase-topline { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#a5a8b0; font-size:9px; letter-spacing:.16em; padding:2px 2px 13px; }
.showcase-live { display:inline-flex; align-items:center; gap:8px; }
.showcase-live i { width:7px; height:7px; border-radius:50%; background:var(--showcase-accent); box-shadow:0 0 12px var(--showcase-accent); }
.showcase-screen { position:relative; aspect-ratio:16/9; min-height:220px; background:#030405; border-radius:8px; overflow:hidden; border:1px solid #ffffff20; }
.showcase-screen iframe { display:block; width:100%; height:100%; min-height:220px; border:0; background:#000; }
.showcase-screen-index { position:absolute; bottom:10px; right:10px; z-index:1; padding:5px 8px; border-radius:4px; background:#07080bc9; color:#fff; font-size:9px; letter-spacing:.12em; pointer-events:none; }
.showcase-placeholder { min-height:240px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; color:#a5a8b0; font-size:12px; }
.showcase-play { display:grid; place-items:center; width:50px; height:50px; padding-left:4px; border-radius:50%; color:#10120b; background:var(--showcase-accent); }
.showcase-bottom { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:17px 2px 13px; }
.showcase-copy { min-width:0; }
.showcase-kicker { display:block; margin-bottom:7px; color:var(--showcase-accent); font-size:8px; letter-spacing:.16em; }
.showcase-copy h2 { margin:0; font-size:clamp(14px,1.45vw,19px); line-height:1.5; font-weight:600; overflow-wrap:anywhere; }
.showcase-copy p { margin:5px 0 0; color:#9296a1; font-size:10px; line-height:1.6; }
.showcase-controls { flex:0 0 auto; display:flex; gap:6px; }
.showcase-controls button { width:34px; height:34px; border:1px solid #ffffff2c; border-radius:50%; color:#f4f3ef; background:#ffffff08; cursor:pointer; transition:background .2s ease,color .2s ease,border-color .2s ease; }
.showcase-controls button:hover,.showcase-controls button:focus-visible { color:#10120b; background:var(--showcase-accent); border-color:var(--showcase-accent); outline-offset:3px; }
.showcase-progress { height:2px; overflow:hidden; background:#ffffff16; }
.showcase-progress span { display:block; height:100%; width:100%; transform-origin:left center; background:var(--showcase-accent); animation:showcase-timer 10s linear forwards; }
.showcase-paused .showcase-progress span { animation-play-state:paused !important; }
.showcase-caption { padding-top:10px; color:#696d76; font-size:7px; letter-spacing:.18em; text-align:right; }
.style-editorial { --showcase-accent:#e9c98c; background:linear-gradient(145deg,#2a211a,#121317 55%); border-radius:2px; }
.style-editorial .showcase-screen { border-radius:2px; }
.style-studio { --showcase-accent:#70d9f5; background:radial-gradient(ellipse at 80% 10%,#152b37,#101217 65%); border-color:#70d9f52a; }
.style-studio .showcase-screen { border-color:#70d9f54a; }
@keyframes showcase-timer { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@media (max-width:850px) { .hero-showcase { max-width:650px; margin:0 auto; } }
@media (max-width:560px) {
  .hero-showcase { padding:10px; border-radius:10px; }
  .showcase-screen,.showcase-screen iframe { min-height:185px; }
  .showcase-bottom { align-items:flex-start; gap:8px; padding-top:12px; }
  .showcase-controls { gap:4px; }
  .showcase-controls button { width:30px; height:30px; }
  .showcase-copy h2 { font-size:12px; }
  .showcase-copy p { font-size:9px; }
  .showcase-caption { font-size:6px; }
}
/* Portrait fit: keep the existing wide Showcase treatment, but give modal playback a true 9:16 viewport. */
.video-backdrop { display:none; }
.showcase-screen.is-portrait .video-backdrop { display:block; position:absolute; inset:-5%; z-index:0; width:110%; height:110%; object-fit:cover; filter:blur(22px) brightness(.42); transform:scale(1.08); pointer-events:none; }
.showcase-screen.is-portrait iframe { position:absolute; z-index:1; top:0; left:0; width:100%; height:160%; min-height:0; max-width:none; aspect-ratio:auto; transform:scale(.625); transform-origin:top center; margin:0; display:block; background:#000; }
.modal-video { position:relative; }
.modal-panel:has(.modal-video.is-portrait) { width:min(460px,100%); max-height:calc(100vh - 20px); max-height:calc(100dvh - 20px); padding:60px 12px 12px; overflow-y:auto; }
.modal-panel:has(.modal-video.is-portrait) .modal-close { top:12px; right:12px; }
.modal-video.is-portrait { width:min(100%,calc((100vh - 130px)*9/16)); width:min(100%,calc((100dvh - 130px)*9/16)); aspect-ratio:9/16; margin-inline:auto; }
.modal-video.is-portrait .video-backdrop { display:none; }
.modal-video.is-portrait iframe { position:absolute; z-index:1; inset:0; width:100%; height:100%; min-height:0; max-width:none; aspect-ratio:9/16; transform:none; transform-origin:center; margin:0; display:block; background:#000; }

/* Remove small explanatory copy beneath section headings; keep titles and core package details. */
.section-note, .photo-heading > p, .photo-note, .source-note, .rates-intro { display:none !important; }

/* FINAL UI PASS — pastel neon galaxy / glass panels */
:root{--bg:#090817;--panel:#131128;--panel-2:#1b1735;--text:#f6f2ff;--muted:#b7afce;--line:rgba(220,202,255,.17);--accent:#c5a4ff;--radius:18px;--max:1240px}
body{background:radial-gradient(ellipse at 12% 4%,#21153d 0,transparent 34%),radial-gradient(ellipse at 88% 28%,#151e3c 0,transparent 31%),radial-gradient(ellipse at 50% 76%,#17102d 0,transparent 38%),var(--bg);color:var(--text)}
::selection{color:#100a20;background:#d9c4ff}
.site-header{background:rgba(10,8,26,.78);border-bottom-color:#c5a4ff26;box-shadow:0 8px 34px #08051640}
.brand-mark{background:linear-gradient(135deg,#d7c2ff,#91e8ff);color:#17102a;box-shadow:0 0 24px #b99aff40}
.main-nav a:hover,.site-footer a:hover,.text-link span,.header-cta span{color:#d7c2ff}
.header-cta,.button-outline,.filter-button,.featured-more{border-color:#c5a4ff55}
.header-cta:hover,.featured-more:hover{background:#c5a4ff12}
.status-dot{background:#9deaff;box-shadow:0 0 15px #9deaff80}
.hero{position:relative}
.hero:before{content:"";position:absolute;width:360px;height:360px;left:-190px;top:20px;border:1px solid #c5a4ff18;border-radius:50%;box-shadow:0 0 0 42px #c5a4ff05,0 0 0 88px #9deaff04;pointer-events:none}
h1 em,.contact-section h2 em{color:#d3baff;text-shadow:0 0 32px #b18aff35}
.hero-description,.photo-heading>p,.section-note,.rates-intro{color:#c0b8d8}
.button-primary{background:linear-gradient(110deg,#d8c4ff,#a7eaff);color:#16102b;box-shadow:0 8px 28px #bca0ff20}
.button-primary:hover{background:linear-gradient(110deg,#eadfff,#c4f3ff)}
.button-outline{background:linear-gradient(120deg,#bba0ff12,#8deaff08)}
.project-thumb{border-color:#d8c5ff1e;background:linear-gradient(135deg,#292044,#101127);box-shadow:0 10px 30px #05041435}
.project-thumb.thumb-missing{background:radial-gradient(ellipse at 50% 45%,#322454 0,#17132b 48%,#0c0a1b 100%)}
.project-thumb.thumb-missing:before{color:#d4bdff}
.project-play{background:linear-gradient(135deg,#d7c2ff,#9cecff);color:#151027;box-shadow:0 0 32px #c5a4ff55}
.project-subtype{background:#d5c0ff;color:#211339}
.project-group-heading{border-bottom-color:#c5a4ff3a}
.photo-section,.trust-section,.work-section{background:linear-gradient(180deg,#0c0a1cdd,#0b0a18f5)}
.photo-grid.photo-carousel,.photo-card{background:#17132b;border-color:#d7c4ff28;box-shadow:0 18px 50px #05031345}
.photo-carousel-controls button{background:#17132d;border-color:#c5a4ff45}
.photo-carousel-controls button:hover,.photo-carousel-controls button:focus-visible{background:#c5a4ff;color:#17102a;border-color:#c5a4ff}
.studio-mascot{border-color:#c5a4ff55;background:radial-gradient(circle at 50% 20%,#332554,#111025 72%);box-shadow:0 10px 28px #08051670}
.studio-mascot span{color:#d7c2ff}
.featured-section{background:radial-gradient(ellipse at 50% 0%,#2a1b49 0,#0d0b1b 62%)}
.trust-grid article,.inquiry-box,.modal-panel{border-color:#d7c4ff26;background:linear-gradient(145deg,#1b1732ee,#100e20f5);box-shadow:0 18px 48px #05031345}
.trust-grid article>span,.trust-heading .eyebrow,.trust-heading h2 em,.photo-heading .eyebrow,.photo-heading h2 em,.featured-more span{color:#d3baff}
.terms-panel{border-color:#c5a4ff32;background:linear-gradient(125deg,#bba0ff0a,#8deaff05)}
.terms-panel li{color:#d0c9e3}
.terms-panel li:before{background:#9deaff;box-shadow:0 0 10px #9deaff55}
.rate-ask{border-color:#c5a4ff70;color:#d7c2ff}
.rate-ask:hover{background:#c5a4ff13}
.inquiry-box select,.inquiry-box textarea{background:#0d0b1d;border-color:#c5a4ff38}
.inquiry-box select:focus,.inquiry-box textarea:focus{outline-color:#c5a4ff}
.contact-button{border-color:#c5a4ff35!important;background:#17132c!important}
.contact-button:hover{border-color:#c5a4ff88!important;background:#211a3b!important}
.contact-section{background:radial-gradient(ellipse at 50% 0%,#26183f 0,#0b0919 65%)}
.showcase-progress span{background:linear-gradient(90deg,#c5a4ff,#9deaff)}
.showcase-screen{border-color:#d7c4ff30}
.hero-showcase{--showcase-accent:#c5a4ff;background:radial-gradient(ellipse at 50% 0%,#2b1d4c 0,#121026 65%);border-color:#c5a4ff42;box-shadow:0 28px 90px #060415b0}
.style-editorial{--showcase-accent:#ffb9e8;background:linear-gradient(145deg,#35203e,#121026 58%)}
.style-studio{--showcase-accent:#9deaff;background:radial-gradient(ellipse at 80% 10%,#1b3450,#101024 65%);border-color:#9deaff40}
.showcase-controls button:hover,.showcase-controls button:focus-visible{color:#151027}
.project-card:focus-visible,.filter-button:focus-visible,.button:focus-visible,a:focus-visible,.showcase-controls button:focus-visible{outline:2px solid #9deaff;outline-offset:4px}
@media(max-width:560px){.hero:before{width:230px;height:230px;left:-170px;top:0}.contact-actions{grid-template-columns:1fr!important}.hero-showcase{box-shadow:0 18px 55px #06041599}}
@media(prefers-reduced-motion:reduce){.hero:before{display:none}}

/* CYBER CREATOR VISUAL LAYER — lightweight, responsive, reduced-motion aware */
:root { --accent:#c5a4ff; --accent-cool:#8cecff; --accent-pink:#ffb9e8; --line:rgba(220,202,255,.17); }
::selection { color:#100b20; background:var(--accent); }
.site-header { background:rgba(10,8,25,.76); border-bottom-color:rgba(197,164,255,.18); box-shadow:0 8px 32px rgba(5,3,20,.2); }
.brand { gap:11px; letter-spacing:.11em; }
.brand-mark { position:relative; isolation:isolate; width:43px; height:43px; flex:0 0 43px; display:grid; place-items:center; overflow:visible; border-radius:14px; border:1px solid rgba(220,202,255,.44); background:linear-gradient(145deg,rgba(197,164,255,.2),rgba(140,236,255,.08)); box-shadow:inset 0 1px rgba(255,255,255,.18),0 0 22px rgba(173,130,255,.2); transform:translateZ(0); transition:transform .35s ease,box-shadow .35s ease; }
.brand-mark::after { content:""; position:absolute; inset:-4px; border:1px solid rgba(140,236,255,.25); border-radius:17px; transform:rotate(8deg); z-index:-1; }
.brand-mark img { width:47px; height:47px; display:block; object-fit:contain; filter:drop-shadow(0 2px 8px rgba(172,139,255,.35)); }
.brand:hover .brand-mark { transform:translateY(-2px) rotate(-4deg); box-shadow:inset 0 1px rgba(255,255,255,.25),0 0 30px rgba(173,130,255,.35); }
.brand-name-en { color:#f4eeff; }
.brand-name-en b { color:var(--accent); }
.header-cta { border-color:rgba(197,164,255,.34); background:linear-gradient(130deg,rgba(197,164,255,.11),rgba(140,236,255,.04)); box-shadow:inset 0 1px rgba(255,255,255,.08); transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
.header-cta:hover { transform:translateY(-2px); border-color:var(--accent); box-shadow:0 0 22px rgba(197,164,255,.16); }
.hero { position:relative; isolation:isolate; }
.hero::before { content:""; position:absolute; z-index:-1; width:520px; height:520px; left:-230px; top:20px; border-radius:50%; background:radial-gradient(circle,rgba(133,91,255,.18),rgba(78,207,255,.045) 42%,transparent 70%); filter:blur(10px); pointer-events:none; }
.hero h1 { text-shadow:0 5px 35px rgba(150,111,255,.12); }
.hero h1 em { background:linear-gradient(100deg,#e3ceff 0%,#b9a0ff 42%,#8cecff 100%); color:transparent; background-clip:text; -webkit-background-clip:text; }
.button { position:relative; overflow:hidden; }
.button-primary { background:linear-gradient(115deg,#e0ccff 0%,#b99bff 50%,#a3edff 100%); box-shadow:0 8px 28px rgba(165,126,255,.18),inset 0 1px rgba(255,255,255,.5); }
.button-primary:hover { box-shadow:0 12px 34px rgba(165,126,255,.3),inset 0 1px rgba(255,255,255,.6); }
.button-outline { border:1px solid rgba(197,164,255,.36); background:rgba(197,164,255,.045); }
.hero-showcase { position:relative; isolation:isolate; border:1px solid rgba(197,164,255,.36); border-radius:22px; background:linear-gradient(145deg,rgba(33,25,62,.92),rgba(10,9,26,.96)); box-shadow:0 35px 90px rgba(3,2,15,.48),inset 0 1px rgba(255,255,255,.1); transform:perspective(1200px) rotateY(-2deg) rotateX(1deg); transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease; }
.hero-showcase:hover { transform:perspective(1200px) rotateY(0) rotateX(0) translateY(-4px); box-shadow:0 42px 100px rgba(3,2,15,.55),0 0 38px rgba(163,130,255,.13),inset 0 1px rgba(255,255,255,.14); }
.showcase-screen { background:radial-gradient(ellipse at 50% 10%,rgba(143,102,255,.22),transparent 62%),#080713; }
.showcase-topline,.showcase-bottom { position:relative; }
.showcase-live i { box-shadow:0 0 12px rgba(140,236,255,.8); }
.showcase-progress span { box-shadow:0 0 12px rgba(197,164,255,.6); }
.project-thumb { border-color:rgba(197,164,255,.16); box-shadow:0 8px 24px rgba(2,2,12,.18); transition:border-color .3s ease,box-shadow .3s ease,transform .35s cubic-bezier(.2,.8,.2,1); }
.project-card { perspective:900px; }
.project-card:hover .project-thumb { transform:translateY(-4px) rotateX(1deg); border-color:rgba(197,164,255,.5); box-shadow:0 18px 36px rgba(3,2,18,.34),0 0 22px rgba(153,115,255,.1); }

.project-play { background:linear-gradient(135deg,#e2d1ff,#a3edff); box-shadow:0 0 30px rgba(197,164,255,.35); }
.filter-button { backdrop-filter:blur(12px); }
.filter-button:hover,.filter-button[aria-pressed="true"] { background:linear-gradient(110deg,#dfcbff,#a4edff); border-color:transparent; box-shadow:0 4px 22px rgba(197,164,255,.18); }
.photo-card,.trust-grid article,.inquiry-box,.rate-card,.terms-panel { box-shadow:0 18px 45px rgba(3,2,16,.2),inset 0 1px rgba(255,255,255,.045); }
.photo-card { border:1px solid rgba(197,164,255,.16); border-radius:16px; overflow:hidden; transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease; }
.photo-card:hover { transform:translateY(-5px); border-color:rgba(197,164,255,.42); box-shadow:0 22px 48px rgba(3,2,16,.32),0 0 24px rgba(197,164,255,.09); }
.rate-card { position:relative; overflow:hidden; }
.rate-card::before { content:""; position:absolute; width:180px; height:180px; top:-110px; right:-90px; border-radius:50%; background:radial-gradient(circle,rgba(197,164,255,.15),transparent 68%); pointer-events:none; }
.rate-card.featured,.rate-card.is-featured { border-color:rgba(197,164,255,.5); box-shadow:0 20px 55px rgba(5,3,22,.3),0 0 34px rgba(197,164,255,.1),inset 0 1px rgba(255,255,255,.1); }
.contact-button { border-color:rgba(197,164,255,.18); background:linear-gradient(135deg,rgba(30,24,53,.88),rgba(13,12,29,.92)); box-shadow:inset 0 1px rgba(255,255,255,.06); }
.contact-button:hover { box-shadow:0 12px 30px rgba(3,2,18,.32),0 0 22px rgba(197,164,255,.12); }
.studio-mascot { filter:drop-shadow(0 12px 24px rgba(148,108,255,.18)); }
.site-footer .brand-mark { width:34px; height:34px; flex-basis:34px; border-radius:11px; }
.site-footer .brand-mark img { width:38px; height:38px; }
@media (max-width:850px) { .hero-showcase { transform:none; } .hero-showcase:hover { transform:translateY(-2px); } }
@media (max-width:560px) {
 .brand-mark { width:35px; height:35px; flex-basis:35px; border-radius:12px; }
 .brand-mark img { width:39px; height:39px; }
 .brand-mark::after { inset:-3px; border-radius:14px; }
 .hero-showcase { border-radius:16px; }
 .project-card:hover .project-thumb,.photo-card:hover { transform:none; }
}
@media (prefers-reduced-motion:reduce) {
 *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
 .hero-showcase,.hero-showcase:hover { transform:none; }
}
/* CYBER MOBILE OVERFLOW GUARD — prevent intrinsic grid content from widening the page */
.trust-grid,.trust-grid article,.terms-panel,.terms-panel > div,.rate-grid,.rate-card { min-width:0; }
.trust-grid article h3,.trust-grid article p,.terms-panel li,.terms-panel p { overflow-wrap:anywhere; }
.rate-card-featured { border-color:rgba(197,164,255,.5)!important; background:linear-gradient(155deg,#30224e,#141027 78%)!important; box-shadow:0 20px 60px rgba(169,135,255,.1)!important; }
@media(max-width:850px) {
 .trust-grid { grid-template-columns:minmax(0,1fr)!important; }
 .trust-grid article { width:100%; max-width:100%; }
 .terms-panel { grid-template-columns:minmax(0,1fr)!important; }
}
@media(max-width:560px) {
 .brand-name-en { font-size:10px; letter-spacing:.025em; }
 .site-header { max-width:100%; }
 .hero-showcase { max-width:100%; }
}
/* RESPONSIVE INTRINSIC-SIZE FIX — keep long titles and embed frames inside the viewport */
.hero-copy,.hero-showcase,.about-label,.about-copy,.project-card,.project-info,.photo-heading,.photo-card,.trust-grid article,.rate-card,.terms-panel { min-width:0; max-width:100%; }
.hero h1,.about-copy h2,.trust-grid h3,.rate-card h3 { overflow-wrap:anywhere; }
@media(max-width:850px) {
 .hero { grid-template-columns:minmax(0,1fr)!important; }
 .about-section { grid-template-columns:minmax(0,1fr)!important; }
}
@media(max-width:560px) {
 .hero-copy,.hero-showcase { width:100%; }
 .hero h1 { font-size:clamp(34px,9.2vw,48px); }
 .hero-actions { min-width:0; }
 .hero-meta { min-width:0; }
 .showcase-topline,.showcase-bottom { min-width:0; }
 .showcase-bottom { flex-wrap:wrap; }
 .showcase-copy { min-width:0; }
 .showcase-copy h2,.showcase-copy p { overflow-wrap:anywhere; }
}
/* Final viewport containment for long Thai copy and responsive controls */
@media(max-width:850px) {
 .hero h1 em { display:inline-block; max-width:100%; overflow-wrap:anywhere; }
 .contact-section h2,.trust-heading h2,.about-copy h2 { overflow-wrap:anywhere; }
 .terms-panel li strong { white-space:normal; overflow-wrap:anywhere; word-break:break-word; }
 .inquiry-box .button { max-width:100%; white-space:normal; }
 .showcase-screen { overflow:hidden; }
}
@media(max-width:560px) {
 .hero h1 em { display:inline; }
 .hero h1 { overflow-wrap:anywhere; }
 .site-footer { flex-wrap:wrap; }
 .inquiry-box .button { width:100%; justify-content:center; gap:10px; padding-inline:12px; }
}

/* NOW SHOWING refinements: true portrait viewport, no overlaid clip counter */
.showcase-screen-index { display:none !important; }
.showcase-screen.is-portrait { background:#05040b; }
.showcase-screen.is-portrait iframe {
  position:absolute; z-index:1; top:0; left:50%;
  width:auto; height:100%; min-height:0; max-width:100%;
  aspect-ratio:9/16; transform:translateX(-50%); transform-origin:center;
  margin:0; display:block; background:#000;
}
@media(max-width:560px) {
  .showcase-screen.is-portrait { min-height:0; aspect-ratio:16/9; }
  .showcase-screen.is-portrait iframe { min-height:0; }
}
/* Floating package CTA stays clear of the video player and hides in pricing/contact zones */
.floating-pricing-cta {
  position:fixed; right:max(14px,env(safe-area-inset-right)); bottom:calc(16px + env(safe-area-inset-bottom));
  z-index:22; display:flex; align-items:center; gap:10px;
  max-width:calc(100vw - 28px); padding:10px 15px 10px 10px;
  border:1px solid rgba(220,202,255,.42); border-radius:999px;
  color:#f8f4ff; background:linear-gradient(125deg,rgba(37,27,66,.96),rgba(13,17,37,.96));
  box-shadow:0 12px 34px rgba(4,3,18,.42),0 0 24px rgba(173,130,255,.18);
  backdrop-filter:blur(18px); transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
}
.floating-pricing-cta:hover { transform:translateY(-3px); border-color:#9deaff; box-shadow:0 14px 36px rgba(4,3,18,.5),0 0 26px rgba(157,234,255,.2); }
.floating-pricing-cta.is-hidden { opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px); }
.floating-pricing-icon { width:32px; height:32px; flex:0 0 32px; display:grid; place-items:center; border-radius:50%; color:#17102a; background:linear-gradient(135deg,#d8c4ff,#9deaff); font-size:17px; }
.floating-pricing-cta strong,.floating-pricing-cta small { display:block; }
.floating-pricing-cta strong { font-size:12px; line-height:1.35; }
.floating-pricing-cta small { margin-top:2px; color:#cfc5e9; font-size:10px; line-height:1.3; }
@media(max-width:560px) {
  .floating-pricing-cta { right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); padding:8px 12px 8px 8px; gap:8px; }
  .floating-pricing-icon { width:29px; height:29px; flex-basis:29px; }
  .floating-pricing-cta strong { font-size:11px; }
  .floating-pricing-cta small { font-size:9px; }
}
@media(prefers-reduced-motion:reduce) { .floating-pricing-cta { transition:none; } }


/* DUAL FORMAT SHOWCASE — fixed independent viewports for landscape and portrait */
.hero-showcase {
  --showcase-accent:#c7a5ff;
  border-color:rgba(177,145,255,.24);
  background:radial-gradient(ellipse at 12% 0%,rgba(111,73,170,.20),transparent 55%),radial-gradient(ellipse at 100% 30%,rgba(57,178,226,.11),transparent 46%),#0b0c14;
}
.showcase-topline { color:#b9b2cc; }
.showcase-live i { background:#bda0ff; box-shadow:0 0 12px rgba(189,160,255,.75); }
.showcase-format-note { color:#8fddff; font-size:8px; letter-spacing:.13em; }
.showcase-dual-grid {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(100px,.95fr);
  align-items:start;
  gap:clamp(8px,1.4vw,14px);
}
.showcase-camera {
  min-width:0; padding:9px;
  border:1px solid rgba(205,184,255,.16); border-radius:10px;
  background:linear-gradient(150deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
}
.showcase-camera-heading {
  display:flex; align-items:center; gap:8px; min-width:0;
  margin:0 0 9px; color:#f4f0ff;
}
.showcase-camera-heading > span:last-child { min-width:0; }
.showcase-camera-heading strong { display:block; font-size:11px; line-height:1.4; font-weight:650; }
.showcase-camera-heading small { display:block; margin-top:2px; color:#9babc7; font-size:7px; line-height:1.4; letter-spacing:.08em; }
.showcase-camera-icon {
  width:29px; height:29px; flex:0 0 29px; display:grid; place-items:center;
  border-radius:8px; color:#e3d5ff;
  border:1px solid rgba(199,165,255,.28);
  background:linear-gradient(140deg,rgba(160,117,255,.2),rgba(90,205,255,.1));
  font-size:17px;
}
.showcase-screen {
  min-width:0; min-height:0; aspect-ratio:16/9;
  border:1px solid rgba(175,160,255,.25); border-radius:7px;
  background:#03040a; overflow:hidden; position:relative; isolation:isolate;
}
.showcase-screen iframe {
  position:absolute; inset:0; display:block; width:100%; height:100%;
  min-height:0; border:0; background:#000;
}
.showcase-screen .video-backdrop { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.18; pointer-events:none; }
.showcase-camera-portrait .showcase-screen {
  width:min(100%,150px); margin-inline:auto; aspect-ratio:9/16; min-height:0;
}
.showcase-camera-landscape .showcase-screen { width:100%; aspect-ratio:16/9; }
.showcase-placeholder { min-height:0; width:100%; height:100%; aspect-ratio:inherit; font-size:9px; text-align:center; padding:8px; }
.showcase-placeholder .showcase-play {
  width:31px; height:31px; padding-left:2px; font-size:12px;
  color:#151026; background:linear-gradient(135deg,#c7a5ff,#8ee7ff);
}
.showcase-camera-footer {
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  margin-top:9px; min-width:0;
}
.showcase-camera-title {
  display:block; min-width:0; flex:1; color:#dcd7ec;
  font-size:9px; line-height:1.45; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.showcase-controls { gap:4px; }
.showcase-controls button {
  width:27px; height:27px; flex:0 0 27px;
  color:#e9e1ff; border-color:rgba(199,165,255,.3);
  background:rgba(148,112,222,.09);
}
.showcase-controls button:hover,.showcase-controls button:focus-visible {
  color:#12101c; background:linear-gradient(135deg,#c7a5ff,#8ee7ff);
  border-color:#bda0ff;
}
.showcase-caption { color:#8886a1; letter-spacing:.12em; }
.floating-pricing-cta {
  color:#f8f4ff !important;
  border-color:rgba(199,165,255,.56) !important;
  background:linear-gradient(125deg,rgba(43,29,72,.97),rgba(13,20,40,.97)) !important;
  box-shadow:0 12px 34px rgba(4,3,18,.44),0 0 22px rgba(173,130,255,.2) !important;
}
.floating-pricing-icon {
  color:#17102a !important;
  background:linear-gradient(135deg,#d5baff,#8ee7ff) !important;
}
.floating-pricing-cta small { color:#c9c3e6 !important; }
.floating-pricing-cta:hover {
  border-color:#8ee7ff !important;
  box-shadow:0 14px 36px rgba(4,3,18,.5),0 0 26px rgba(142,231,255,.2) !important;
}
@media(max-width:390px) {
  .hero-showcase { padding:10px; }
  .showcase-dual-grid { grid-template-columns:minmax(0,1.2fr) minmax(100px,.95fr); gap:7px; }
  .showcase-camera { padding:7px; }
  .showcase-camera-heading { gap:5px; margin-bottom:7px; }
  .showcase-camera-icon { width:24px; height:24px; flex-basis:24px; font-size:14px; }
  .showcase-camera-heading strong { font-size:10px; }
  .showcase-camera-heading small { font-size:6px; letter-spacing:.03em; }
  .showcase-camera-footer { flex-wrap:wrap; }
  .showcase-camera-title { flex-basis:100%; font-size:8px; -webkit-line-clamp:1; }
  .showcase-controls { margin-left:auto; }
  .showcase-controls button { width:25px; height:25px; flex-basis:25px; }
}
@media(prefers-reduced-motion:reduce) {
  .showcase-camera,.showcase-controls button,.floating-pricing-cta { transition:none !important; }
}

/* Final responsive behavior: stacked equal-width previews on phones */
.showcase-dual-grid { grid-template-columns:minmax(0,1.35fr) minmax(0,.95fr); }
.showcase-camera { width:100%; min-width:0; }
.showcase-camera-landscape .showcase-screen,
.showcase-camera-portrait .showcase-screen {
  width:100% !important; max-width:none !important; min-width:0; min-height:0;
  margin-inline:0 !important; height:auto !important; overflow:hidden;
}
.showcase-camera-landscape .showcase-screen { aspect-ratio:16/9 !important; }
.showcase-camera-portrait .showcase-screen { aspect-ratio:9/16 !important; }
.showcase-camera .showcase-screen iframe {
  position:absolute !important; inset:0 !important; display:block !important;
  width:100% !important; height:100% !important; min-width:0 !important; min-height:0 !important;
  max-width:100% !important; max-height:100% !important; aspect-ratio:auto !important;
  transform:none !important; margin:0 !important; border:0 !important;
}
.showcase-camera .showcase-screen .video-backdrop { inset:0; width:100%; height:100%; object-fit:cover; }
.floating-pricing-cta {
  color:#f8f4ff !important; border-color:rgba(199,165,255,.56) !important;
  background:linear-gradient(125deg,rgba(43,29,72,.97),rgba(13,20,40,.97)) !important;
  box-shadow:0 12px 34px rgba(4,3,18,.44),0 0 22px rgba(173,130,255,.2) !important;
}
.floating-pricing-icon { background:linear-gradient(135deg,#d5baff,#8ee7ff) !important; }
.floating-pricing-cta small { color:#c9c3e6 !important; }
@media(max-width:600px) {
  .showcase-dual-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
  .showcase-camera { width:100%; padding:10px; }
  .showcase-camera-heading { gap:8px; margin-bottom:8px; }
  .showcase-camera-icon { width:28px; height:28px; flex-basis:28px; font-size:16px; }
  .showcase-camera-heading strong { font-size:12px; }
  .showcase-camera-heading small { font-size:8px; letter-spacing:.08em; }
  .showcase-camera-landscape .showcase-screen,
  .showcase-camera-portrait .showcase-screen { width:100% !important; }
  .showcase-camera-footer { flex-wrap:nowrap; }
  .showcase-camera-title { flex:1; min-width:0; font-size:10px; -webkit-line-clamp:2; }
  .showcase-controls { flex:0 0 auto; margin-left:auto; }
  .showcase-controls button { width:29px; height:29px; flex-basis:29px; }
}


/* SINGLE ADAPTIVE SHOWCASE — one centered preview, frame follows detected video orientation */
#hero-showcase .showcase-screen {
  width:100%; max-width:none; min-width:0; height:auto; min-height:0;
  margin:0 auto; position:relative; overflow:hidden; isolation:isolate;
  aspect-ratio:9/16; background:#03040a; border-radius:10px;
  transition:aspect-ratio .18s ease;
}
#hero-showcase .showcase-screen.is-portrait {
  width:min(100%,260px); aspect-ratio:9/16; margin-inline:auto;
}
#hero-showcase .showcase-screen.is-landscape {
  width:100%; aspect-ratio:16/9; margin-inline:auto;
}
#hero-showcase .showcase-screen iframe {
  position:absolute !important; inset:0 !important; display:block !important;
  width:100% !important; height:100% !important; min-width:0 !important; min-height:0 !important;
  max-width:100% !important; max-height:100% !important; aspect-ratio:auto !important;
  margin:0 !important; transform:none !important; border:0 !important; background:#000;
}
#hero-showcase .showcase-screen .video-backdrop {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.14; pointer-events:none;
}
#hero-showcase .showcase-format-note { color:#bda0ff; font-size:9px; letter-spacing:.1em; }
#hero-showcase .showcase-bottom { align-items:center; gap:12px; }
#hero-showcase .showcase-copy { min-width:0; flex:1; }
#hero-showcase .showcase-copy h2,#hero-showcase .showcase-copy p { overflow-wrap:anywhere; }
@media(max-width:560px) {
  #hero-showcase .showcase-screen.is-portrait { width:min(100%,260px); aspect-ratio:9/16; }
  #hero-showcase .showcase-screen.is-landscape { width:100%; aspect-ratio:16/9; }
}
@media(prefers-reduced-motion:reduce) { #hero-showcase .showcase-screen { transition:none; } }

/* NOW SHOWING final centering and matte: keep both aspect ratios centered inside the card */
#hero-showcase {
  width:100%;
  min-width:0;
  align-self:center;
}
#hero-showcase .showcase-screen {
  display:block;
  flex:none;
  margin-inline:auto !important;
  overflow:hidden;
  box-sizing:border-box;
  border:2px solid #03040a !important;
  outline:1px solid rgba(199,165,255,.22);
  background:#000 !important;
  box-shadow:0 0 0 1px rgba(0,0,0,.95),0 14px 36px rgba(0,0,0,.38);
}
#hero-showcase .showcase-screen.is-portrait {
  width:min(100%,260px) !important;
  aspect-ratio:9/16 !important;
}
#hero-showcase .showcase-screen.is-landscape {
  width:min(100%,560px) !important;
  aspect-ratio:16/9 !important;
}
#hero-showcase .showcase-screen iframe {
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  border:0 !important;
  transform:none !important;
  object-fit:contain;
}
#hero-showcase .showcase-copy h2 {
  display:none !important;
}
#hero-showcase .showcase-copy .showcase-kicker {
  display:none;
}
#hero-showcase .showcase-bottom {
  justify-content:flex-end;
}
.hero-actions .button-outline {
  color:#171326 !important;
  background:linear-gradient(135deg,#ffffff,#eee9ff) !important;
  border:1px solid #ffffff !important;
  box-shadow:0 5px 18px rgba(199,165,255,.12);
}
.hero-actions .button-outline span {
  color:#654a9b !important;
}
.hero-actions .button-outline:hover,
.hero-actions .button-outline:focus-visible {
  color:#101827 !important;
  background:linear-gradient(135deg,#ffffff,#dff8ff) !important;
  border-color:#8ee7ff !important;
  box-shadow:0 8px 24px rgba(142,231,255,.18);
}
@media(max-width:560px) {
  #hero-showcase .showcase-screen.is-portrait { width:min(100%,260px) !important; }
  #hero-showcase .showcase-screen.is-landscape { width:100% !important; }
}

/* TAP-TO-PLAY: open the selected work in a centered, orientation-aware modal */
#hero-showcase .showcase-screen { cursor:pointer; }
#hero-showcase .showcase-open-full {
  position:absolute; z-index:4; inset:0; width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  border:0; border-radius:inherit; color:#f7f3ff; cursor:pointer;
  background:linear-gradient(180deg,rgba(8,7,20,.08),rgba(8,7,20,.42));
  font-size:12px; font-weight:650; letter-spacing:.02em;
  opacity:.92; transition:background .2s ease,opacity .2s ease;
}
#hero-showcase .showcase-open-full:hover,
#hero-showcase .showcase-open-full:focus-visible {
  opacity:1; background:rgba(10,7,25,.38);
}
#hero-showcase .showcase-open-full-icon {
  display:grid; place-items:center; width:54px; height:54px; padding-left:4px;
  border:1px solid rgba(255,255,255,.65); border-radius:50%;
  color:#17102a; background:linear-gradient(135deg,#e2d1ff,#a3edff);
  box-shadow:0 5px 28px rgba(0,0,0,.35),0 0 28px rgba(197,164,255,.25);
  font-size:17px;
}
.video-modal {
  position:fixed; z-index:10000; inset:0; width:100%; height:100%;
  height:100dvh; padding:clamp(12px,3vw,30px);
  display:flex; align-items:center; justify-content:center;
  overflow:auto; overscroll-behavior:contain;
  background:rgba(4,3,13,.94); backdrop-filter:blur(16px);
}
.video-modal .modal-backdrop { position:absolute; inset:0; background:transparent; }
.video-modal .modal-panel {
  position:relative; z-index:1; flex:none;
  width:min(100%,1000px); max-width:1000px; max-height:calc(100dvh - 36px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0; padding:clamp(8px,1.8vw,18px);
  overflow:visible; border:1px solid rgba(199,165,255,.28); border-radius:16px;
  background:linear-gradient(145deg,rgba(25,19,46,.98),rgba(8,8,19,.99));
  box-shadow:0 24px 90px rgba(0,0,0,.62),0 0 36px rgba(173,130,255,.12);
}
.video-modal .modal-close {
  position:absolute; z-index:5; top:8px; right:8px;
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.3); border-radius:50%;
  color:#fff; background:rgba(9,8,20,.88); font-size:26px; line-height:1; cursor:pointer;
}
.video-modal .modal-video {
  position:relative; flex:none; overflow:hidden; isolation:isolate;
  width:min(100%,900px); max-width:100%; max-height:calc(100dvh - 100px);
  margin:0 auto; aspect-ratio:16/9; border:1px solid rgba(199,165,255,.25);
  border-radius:10px; background:#000; box-shadow:0 10px 40px rgba(0,0,0,.45);
}
.video-modal .modal-video.is-portrait {
  width:auto; height:min(calc(100dvh - 100px),780px);
  max-width:100%; aspect-ratio:9/16;
}
.video-modal .modal-video.is-landscape {
  width:min(100%,900px,calc((100dvh - 100px)*16/9));
  height:auto; max-height:calc(100dvh - 100px); aspect-ratio:16/9;
}
.video-modal .modal-video iframe {
  position:absolute !important; inset:0 !important; display:block !important;
  width:100% !important; height:100% !important; min-width:0 !important; min-height:0 !important;
  max-width:none !important; max-height:none !important; margin:0 !important;
  border:0 !important; transform:none !important; background:#000;
}
.video-modal .modal-video .video-backdrop {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.08; pointer-events:none;
}
.video-modal .modal-title { display:none !important; }
@media(max-width:600px) {
  .video-modal { padding:10px; }
  .video-modal .modal-panel { width:100%; max-height:calc(100dvh - 20px); padding:8px; border-radius:12px; }
  .video-modal .modal-close { top:4px; right:4px; width:34px; height:34px; }
  .video-modal .modal-video { max-height:calc(100dvh - 72px); border-radius:8px; }
  .video-modal .modal-video.is-portrait { height:min(calc(100dvh - 72px),760px); width:auto; }
  .video-modal .modal-video.is-landscape {
    width:min(100%,calc((100dvh - 72px)*16/9));
    max-height:calc(100dvh - 72px);
  }
}
@media(prefers-reduced-motion:reduce) { #hero-showcase .showcase-open-full { transition:none; } }

/* Modal sizing correction: size by available width first, preserve the real video ratio */
.video-modal .modal-video.is-portrait {
  width:min(100%,600px,calc((100dvh - 100px)*9/16));
  height:auto;
  max-width:100%;
  max-height:calc(100dvh - 100px);
  aspect-ratio:9/16;
}
.video-modal .modal-video.is-landscape {
  width:min(100%,900px,calc((100dvh - 100px)*16/9));
  height:auto;
  max-height:calc(100dvh - 100px);
  aspect-ratio:16/9;
}
@media(max-width:600px) {
  .video-modal .modal-video.is-portrait {
    width:min(100%,calc((100dvh - 72px)*9/16));
    height:auto;
    max-width:100%;
    max-height:calc(100dvh - 72px);
    aspect-ratio:9/16;
  }
  .video-modal .modal-video.is-landscape {
    width:min(100%,calc((100dvh - 72px)*16/9));
    height:auto;
    max-width:100%;
    max-height:calc(100dvh - 72px);
    aspect-ratio:16/9;
  }
}
/* Showcase poster: keep the Google Drive preview UI out of the inline frame so its native play control cannot appear offset under our centered play button. The full player opens only in the centered modal. */
#hero-showcase .showcase-screen .showcase-poster { position:absolute; inset:0; z-index:1; display:block; width:100%; height:100%; min-width:0; min-height:0; max-width:none; max-height:none; margin:0; object-fit:contain; object-position:center center; background:#05040b; border:0; }
#hero-showcase .showcase-screen .showcase-open-full { z-index:2; }
#hero-showcase .showcase-screen .showcase-inline-player { position:absolute; inset:0; z-index:2; display:block; width:100%; height:100%; min-width:0; min-height:0; border:0; background:transparent; }
#hero-showcase .showcase-screen .showcase-poster { pointer-events:none; z-index:1; }


/* FINAL Google Drive viewport fit: the iframe always matches the detected frame exactly. */
#hero-showcase #showcase-screen {
  box-sizing:border-box !important;
  overflow:hidden !important;
  position:relative !important;
  margin-inline:auto !important;
  background:#000 !important;
}
#hero-showcase #showcase-screen.is-portrait {
  width:min(100%,260px) !important;
  aspect-ratio:9 / 16 !important;
  height:auto !important;
}
#hero-showcase #showcase-screen.is-landscape {
  width:min(100%,560px) !important;
  aspect-ratio:16 / 9 !important;
  height:auto !important;
}
#hero-showcase #showcase-screen .showcase-inline-player {
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:100% !important;
  max-height:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  transform:none !important;
  aspect-ratio:auto !important;
  background:#000 !important;
}
@media(max-width:560px) {
  #hero-showcase #showcase-screen.is-landscape { width:100% !important; }
  #hero-showcase #showcase-screen.is-portrait { width:min(100%,260px) !important; }
}

/* NOW SHOWING — tactile art-film sleeve archive */
#hero-showcase .showcase-screen.film-archive {
  position:relative; display:flex; flex-direction:column; gap:12px; width:100%; min-width:0;
  height:auto; min-height:0; aspect-ratio:auto; overflow:hidden; margin:0; padding:14px 0 12px;
  border:1px solid rgba(255,255,255,.13); border-radius:8px;
  background:radial-gradient(ellipse at 50% 42%,#24232b 0%,#121217 52%,#0a0a0d 100%);
  box-shadow:inset 0 1px rgba(255,255,255,.04),0 24px 55px rgba(0,0,0,.3);
}
.film-archive-heading,.film-archive-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 16px; color:#8d8d98; font-size:8px; letter-spacing:.16em; }
.film-archive-heading { padding-bottom:1px; }
.film-archive-heading span:last-child { color:#d3c8b4; }
.film-rail { display:flex; align-items:stretch; gap:13px; width:100%; padding:14px max(18px,calc((100% - 560px)/2)) 20px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:18px; scrollbar-width:thin; scrollbar-color:#625b68 transparent; -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y; }
.film-rail::-webkit-scrollbar { height:4px; }
.film-rail::-webkit-scrollbar-track { background:transparent; }
.film-rail::-webkit-scrollbar-thumb { background:#625b68; border-radius:99px; }
.film-sleeve { position:relative; display:flex; flex:0 0 172px; flex-direction:column; min-width:0; padding:0; overflow:hidden; text-align:left; color:#f2eee7; border:1px solid rgba(255,255,255,.18); border-radius:3px; background:linear-gradient(135deg,#33313a,#17171d 60%,#29262d); box-shadow:5px 8px 14px rgba(0,0,0,.38),inset 1px 0 rgba(255,255,255,.13); scroll-snap-align:center; cursor:pointer; transform:translateY(5px) scale(.94); opacity:.78; transition:transform .28s ease,opacity .28s ease,border-color .28s ease,box-shadow .28s ease; }
.film-sleeve::before { content:""; position:absolute; z-index:3; inset:0 auto 0 0; width:7px; background:repeating-linear-gradient(to bottom,rgba(255,255,255,.3) 0 4px,transparent 4px 10px); opacity:.25; pointer-events:none; }
.film-sleeve.is-selected { transform:translateY(0) scale(1); opacity:1; border-color:rgba(221,202,161,.8); box-shadow:0 16px 34px rgba(0,0,0,.48),0 0 0 1px rgba(221,202,161,.16); }
.film-sleeve:focus-visible { outline:2px solid #e3d2aa; outline-offset:4px; }
.film-sleeve-spine { display:flex; align-items:center; justify-content:space-between; gap:5px; min-height:25px; padding:0 10px 0 14px; color:#bdb5a7; font-size:7px; letter-spacing:.09em; }
.film-sleeve-spine b { color:#e6d7b8; font-size:11px; font-weight:500; }
.film-sleeve-cover { position:relative; display:block; isolation:isolate; margin:0 7px 0 12px; aspect-ratio:3/4.35; overflow:hidden; background:#29272c; }
.film-sleeve-cover img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.84) contrast(1.04); transition:transform .5s ease,filter .5s ease; }
.film-sleeve:hover .film-sleeve-cover img,.film-sleeve.is-selected .film-sleeve-cover img { transform:scale(1.035); filter:saturate(1) contrast(1.06); }
.film-cover-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,8,12,.12),transparent 32%,rgba(8,8,12,.12) 53%,rgba(8,8,12,.88) 100%); pointer-events:none; }
.film-cover-stamp { position:absolute; top:10px; left:9px; color:#fff4df; font-size:7px; line-height:1.5; letter-spacing:.15em; text-shadow:0 1px 5px #000; }
.film-cover-play { position:absolute; left:50%; top:47%; display:grid; place-items:center; width:35px; height:35px; padding-left:3px; border:1px solid rgba(255,255,255,.65); border-radius:50%; color:#fff8eb; background:rgba(15,14,19,.35); backdrop-filter:blur(5px); transform:translate(-50%,-50%) scale(.88); opacity:.72; transition:all .25s ease; }
.film-sleeve:hover .film-cover-play,.film-sleeve.is-selected .film-cover-play { opacity:1; transform:translate(-50%,-50%) scale(1); background:rgba(15,14,19,.7); }
.film-cover-title { position:absolute; left:10px; right:8px; bottom:10px; display:-webkit-box; overflow:hidden; color:#fffaf0; font-size:10px; font-weight:600; line-height:1.55; text-shadow:0 1px 8px #000; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.film-sleeve-footer { display:flex; justify-content:space-between; gap:5px; padding:9px 9px 10px 13px; color:#a6a0a0; font-size:6px; letter-spacing:.1em; }
.film-sleeve-footer span:last-child { color:#e3d2aa; }
.film-archive-footer { padding-top:1px; font-size:7px; letter-spacing:.11em; }
.film-archive-footer > span:first-child { display:flex; align-items:center; gap:7px; }
.film-archive-footer i { display:inline-block; width:5px; height:5px; border-radius:50%; background:#d8c39c; box-shadow:0 0 9px #d8c39c80; }
.film-swipe-hint { color:#9c98a0; letter-spacing:0; }
.film-swipe-hint b { margin-left:6px; color:#ded0b6; font-size:11px; }
.film-archive-loading { min-height:260px; display:grid; place-items:center; color:#aaa3ad; font-size:12px; }
@media(max-width:850px) {
  #hero-showcase .showcase-screen.film-archive { width:100%; }
  .film-rail { padding-inline:calc((100% - 172px)/2); }
}
@media(max-width:560px) {
  #hero-showcase .showcase-screen.film-archive { padding-top:12px; border-radius:7px; }
  .film-archive-heading,.film-archive-footer { padding-inline:12px; font-size:7px; }
  .film-rail { gap:11px; padding:12px calc((100% - 154px)/2) 17px; scroll-padding-inline:calc((100% - 154px)/2); }
  .film-sleeve { flex-basis:154px; transform:translateY(4px) scale(.94); }
  .film-sleeve.is-selected { transform:translateY(0) scale(1); }
  .film-sleeve-cover { aspect-ratio:3/4.2; }
  .film-cover-title { font-size:10px; }
  .film-swipe-hint { font-size:9px; }
}
@media(prefers-reduced-motion:reduce) { .film-sleeve,.film-sleeve-cover img,.film-cover-play { transition:none !important; } }

/* Film archive metadata stays visible; earlier showcase styles hid the title. */
#hero-showcase .showcase-bottom { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:14px; }
#hero-showcase .showcase-copy { display:block; min-width:0; flex:1; }
#hero-showcase .showcase-copy .showcase-kicker { display:inline-block !important; margin-bottom:6px; color:#b4a58b; font-size:8px; letter-spacing:.16em; }
#hero-showcase .showcase-copy h2 { display:block !important; margin:0 0 4px; color:#f0ede6; font-size:clamp(12px,1.2vw,15px); line-height:1.5; letter-spacing:.01em; overflow-wrap:anywhere; }
#hero-showcase .showcase-copy p { margin:0; color:#8f909a; font-size:10px; line-height:1.6; }
#hero-showcase .showcase-controls { flex-shrink:0; }

/* NOW SHOWING refinement: larger tactile sleeves, no clip titles or item counts. */
#hero-showcase .showcase-bottom,
#hero-showcase .showcase-caption,
#hero-showcase .showcase-format-note { display:none !important; }
#hero-showcase .showcase-screen.film-archive { min-height:0; padding:16px 0 14px; gap:8px; }
#hero-showcase .film-archive-heading { display:flex; justify-content:center; padding:0 12px; color:#aaa1b8; font-size:9px; letter-spacing:.2em; }
#hero-showcase .film-archive-heading span { text-align:center; }
#hero-showcase .film-rail { gap:16px; padding:16px max(22px,calc((100% - 220px)/2)) 22px; scroll-padding-inline:calc((100% - 220px)/2); }
#hero-showcase .film-sleeve { flex-basis:220px; transform:translateY(5px) scale(.94); }
#hero-showcase .film-sleeve.is-selected { transform:translateY(0) scale(1); }
#hero-showcase .film-sleeve-cover { aspect-ratio:3/4.3; }
#hero-showcase .film-cover-stamp { font-size:8px; line-height:1.6; }
#hero-showcase .film-sleeve-footer { padding-top:10px; padding-bottom:12px; font-size:7px; }
#hero-showcase .film-archive-footer { padding-inline:18px; }
#hero-showcase .film-swipe-hint { color:#d5c5e9; }
.video-modal .modal-title { display:none !important; }
@media(max-width:850px) {
  #hero-showcase .film-rail { padding-inline:calc((100% - 200px)/2); scroll-padding-inline:calc((100% - 200px)/2); }
  #hero-showcase .film-sleeve { flex-basis:200px; }
}
@media(max-width:560px) {
  #hero-showcase .showcase-screen.film-archive { padding-top:12px; padding-bottom:12px; }
  #hero-showcase .film-archive-heading { font-size:8px; }
  #hero-showcase .film-rail { gap:13px; padding:12px calc((100% - 184px)/2) 18px; scroll-padding-inline:calc((100% - 184px)/2); }
  #hero-showcase .film-sleeve { flex-basis:184px; }
  #hero-showcase .film-sleeve-cover { aspect-ratio:3/4.15; }
  #hero-showcase .film-sleeve-footer { padding:9px 8px 10px 12px; }
  #hero-showcase .film-archive-footer { padding-inline:12px; }
}

/* Floating Now Showing: remove the heavy panel and blend into the site's violet palette. */
#hero-showcase,
#hero-showcase:hover {
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
  overflow:visible !important;
}
#hero-showcase .showcase-topline {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  margin:0 0 12px;
  padding:0 2px;
}
#hero-showcase .showcase-live {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 11px;
  border:1px solid rgba(197,164,255,.26);
  border-radius:999px;
  background:rgba(40,29,68,.52);
  color:#ddccff;
  font-size:9px;
  letter-spacing:.18em;
  box-shadow:0 8px 24px rgba(8,5,25,.16);
}
#hero-showcase .showcase-live i {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#c5a4ff;
  box-shadow:0 0 12px rgba(197,164,255,.8);
}
#hero-showcase .showcase-screen.film-archive {
  gap:10px;
  padding:8px 0 6px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  overflow-anchor:none;
}
#hero-showcase .film-archive-heading {
  justify-content:flex-start !important;
  padding:0 4px !important;
  color:#bca9e5 !important;
  font-size:8px !important;
  letter-spacing:.19em !important;
  opacity:.88;
}
#hero-showcase .film-rail {
  gap:16px;
  padding-top:14px;
  padding-bottom:22px;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  overflow-anchor:none;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(90deg,transparent 0%,#000 7%,#000 93%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 7%,#000 93%,transparent 100%);
  scrollbar-width:none;
}
#hero-showcase .film-rail::-webkit-scrollbar { display:none; }
#hero-showcase .film-sleeve {
  border-color:rgba(197,164,255,.22);
  border-radius:7px;
  background:linear-gradient(145deg,rgba(46,35,73,.92),rgba(17,14,31,.96));
  box-shadow:0 14px 32px rgba(5,3,20,.24),inset 0 1px rgba(255,255,255,.07);
  opacity:.56;
  transform:translateY(7px) scale(.95);
  transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .42s ease,border-color .42s ease,box-shadow .42s ease;
}
#hero-showcase .film-sleeve.is-selected {
  border-color:rgba(197,164,255,.66);
  box-shadow:0 20px 42px rgba(6,3,24,.32),0 0 28px rgba(157,121,255,.12),inset 0 1px rgba(255,255,255,.1);
  opacity:1;
  transform:translateY(0) scale(1);
}
#hero-showcase .film-sleeve-spine {
  color:#b8acd0;
}
#hero-showcase .film-sleeve-spine b,
#hero-showcase .film-sleeve-footer span:last-child {
  color:#d5bdff;
}
#hero-showcase .film-sleeve-cover {
  background:linear-gradient(145deg,#211a36,#0d0b17);
  aspect-ratio:3/4.15;
}
#hero-showcase .film-sleeve-cover img {
  object-fit:contain !important;
  object-position:center center !important;
  background:linear-gradient(145deg,#211a36,#0d0b17);
  filter:none;
}
#hero-showcase .film-sleeve:hover .film-sleeve-cover img,
#hero-showcase .film-sleeve.is-selected .film-sleeve-cover img {
  transform:none;
  filter:none;
}
#hero-showcase .film-cover-shade {
  background:linear-gradient(180deg,rgba(12,8,24,.05),transparent 48%,rgba(12,8,24,.42));
}
#hero-showcase .film-cover-play {
  border-color:rgba(235,220,255,.78);
  color:#fff;
  background:rgba(37,25,62,.5);
}
#hero-showcase .film-archive-footer {
  justify-content:flex-start;
  padding-inline:4px !important;
  color:#9887bc;
  font-size:8px;
}
#hero-showcase .film-archive-footer i {
  background:#c5a4ff;
  box-shadow:0 0 10px rgba(197,164,255,.65);
}
#hero-showcase .film-swipe-hint {
  color:#c4b0e8;
}
#hero-showcase .film-swipe-hint b { color:#e0d0ff; }

/* Compact project groups: five visible cards per group, with a progressive reveal control. */
.project-card[hidden] { display:none !important; }
.project-show-more {
  grid-column:1 / -1;
  justify-self:center;
  margin:4px 0 18px;
  padding:11px 17px;
  border:1px solid rgba(197,164,255,.35);
  border-radius:999px;
  background:linear-gradient(120deg,rgba(83,57,132,.2),rgba(34,27,61,.45));
  color:#e0d0ff;
  font:inherit;
  font-size:12px;
  cursor:pointer;
  transition:background .25s ease,border-color .25s ease,transform .25s ease,opacity .25s ease;
}
.project-show-more:hover,
.project-show-more:focus-visible {
  background:rgba(197,164,255,.16);
  border-color:rgba(197,164,255,.72);
  transform:translateY(-2px);
  outline:none;
}
@media(max-width:560px) {
  #hero-showcase .film-rail { gap:13px; }
  #hero-showcase .film-archive-heading { padding-inline:3px !important; }
  #hero-showcase .film-archive-footer { padding-inline:3px !important; }
}
@media(prefers-reduced-motion:reduce) {
  #hero-showcase .film-sleeve { transition:none !important; }
  #hero-showcase .film-rail { scroll-behavior:auto; }
}

/* Override the legacy black viewport rule for the floating archive surface. */
#hero-showcase #showcase-screen.film-archive {
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Desktop users can grab and drag the cover rail with the mouse. */
#hero-showcase .film-rail { cursor:grab; }
#hero-showcase .film-rail.is-mouse-dragging {
  cursor:grabbing;
  user-select:none;
  -webkit-user-select:none;
  scroll-behavior:auto;
  scroll-snap-type:none;
}
#hero-showcase .film-rail.is-mouse-dragging .film-sleeve {
  pointer-events:none;
  transition:none;
}

/* Google Drive iframe stays at native scale on mobile; do not crop or magnify its controls. */
.modal-video.gdrive-video-wrapper iframe { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; transform:none !important; transform-origin:center center !important; }
@media (max-width:700px) {
  .video-modal { padding:12px; }
  .video-modal .modal-panel { width:100%; max-width:100%; padding:10px; }
  .modal-video.gdrive-video-wrapper { max-width:100%; }
  .modal-video.gdrive-video-wrapper iframe { transform:none !important; }
}
/* Touch-friendly photo carousel: keep vertical page scroll and handle horizontal swipes in JS. */
.photo-grid.photo-carousel { touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.photo-grid.photo-carousel .photo-card { cursor:pointer; }

/* Mobile Google Drive player: keep the complete embedded UI inside one viewport-sized frame. */
@media (max-width: 700px) {
  .video-modal {
    box-sizing: border-box !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    padding: 8px !important;
    overflow: hidden !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .video-modal .modal-panel {
    box-sizing: border-box !important;
    width: min(100%, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    min-width: 0 !important;
    padding: 6px !important;
    overflow: hidden !important;
    flex: 0 1 auto !important;
  }
  .video-modal .modal-video.gdrive-video-wrapper {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 36px) !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    aspect-ratio: 9 / 16;
  }
  .video-modal .modal-video.gdrive-video-wrapper.is-landscape {
    width: min(100%, calc((100dvh - 36px) * 16 / 9)) !important;
    aspect-ratio: 16 / 9 !important;
  }
  .video-modal .modal-video.gdrive-video-wrapper.is-portrait {
    width: min(100%, calc((100dvh - 36px) * 9 / 16)) !important;
    aspect-ratio: 9 / 16 !important;
  }
  .video-modal .modal-video.gdrive-video-wrapper iframe {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    transform: none !important;
  }
  .video-modal .modal-close { top: 3px !important; right: 3px !important; width: 32px !important; height: 32px !important; }
}
/* Hard mobile modal guard v2: never paint background players above the active dialog. */
body.modal-open iframe, body.modal-open video { display:none !important; visibility:hidden !important; pointer-events:none !important; }
body.modal-open .video-modal iframe, body.modal-open .video-modal video { display:block !important; visibility:visible !important; pointer-events:auto !important; }
/* Final responsive player shell: contain the provider iframe without scaling its internal controls. */
.video-modal { position:fixed; inset:0; display:grid; grid-template-columns:minmax(0,1fr); place-items:center; isolation:isolate; }
.video-modal .modal-panel { position:relative; z-index:1; box-sizing:border-box; width:min(900px,calc(100vw - 32px)); max-width:100%; max-height:calc(100dvh - 32px); min-width:0; }
.video-modal .modal-video { position:relative; isolation:isolate; display:block; width:100%; min-width:0; overflow:hidden; background:#000; }
.video-modal .modal-video iframe { position:absolute; inset:0; display:block; width:100%; height:100%; min-width:0; min-height:0; border:0; margin:0; transform:none !important; }
@media (max-width:700px) {
  .video-modal { padding: max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)) !important; }
  .video-modal .modal-panel { width:100%; max-width:100%; max-height:calc(100dvh - 16px); overflow:hidden; }
  .video-modal .modal-video.gdrive-video-wrapper { flex:none; }
  .video-modal .modal-video.gdrive-video-wrapper iframe { inset:0; transform:none !important; }
}


/* MOBILE PLAYER LAYOUT v3 — isolate the video viewport from modal chrome.
   The provider iframe is cross-origin; only its outer viewport can be styled here. */
.video-modal {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  grid-template-columns: minmax(0, 1fr) !important;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
  overflow: hidden !important;
  overscroll-behavior: none;
}
.video-modal .modal-panel {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  width: min(100%, 1000px) !important;
  max-width: calc(100vw - 16px) !important;
  max-height: calc(100dvh - 16px) !important;
  min-width: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.video-modal .modal-video.gdrive-video-wrapper {
  position: relative !important;
  display: block !important;
  flex: none !important;
  box-sizing: border-box !important;
  width: min(100%, 900px) !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: calc(100dvh - 48px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #000 !important;
  aspect-ratio: var(--video-ratio, 16 / 9) !important;
}
.video-modal .modal-video.gdrive-video-wrapper.is-portrait {
  width: min(100%, 600px, calc((100dvh - 48px) * 9 / 16)) !important;
  aspect-ratio: 9 / 16 !important;
}
.video-modal .modal-video.gdrive-video-wrapper.is-landscape {
  width: min(100%, 900px, calc((100dvh - 48px) * 16 / 9)) !important;
  aspect-ratio: 16 / 9 !important;
}
.video-modal .modal-video.gdrive-video-wrapper > iframe {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  transform: none !important;
  transform-origin: center center !important;
}
.video-modal .modal-close {
  top: max(6px, env(safe-area-inset-top)) !important;
  right: max(6px, env(safe-area-inset-right)) !important;
  z-index: 10 !important;
}
@media (max-width: 700px) {
  .video-modal .modal-panel { max-width: calc(100vw - 16px) !important; }
  .video-modal .modal-video.gdrive-video-wrapper { max-height: calc(100dvh - 32px) !important; }
  .video-modal .modal-video.gdrive-video-wrapper.is-portrait {
    width: min(calc(100vw - 24px), calc((100dvh - 32px) * 9 / 16)) !important;
    max-height: calc(100dvh - 32px) !important;
  }
  .video-modal .modal-video.gdrive-video-wrapper.is-landscape {
    width: min(calc(100vw - 24px), calc((100dvh - 32px) * 16 / 9)) !important;
    max-height: calc(100dvh - 32px) !important;
  }
}
@media (max-width: 380px) {
  .video-modal .modal-close { width: 30px !important; height: 30px !important; font-size: 22px !important; }
}
.video-modal .modal-video > video.modal-player-video,
.video-modal .modal-video > iframe.modal-player-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  border: 0;
  transform: none !important;
  background: #000;
}
.video-modal .modal-video > video.modal-player-video {
  object-fit: contain;
  z-index: 1;
}
.video-modal .modal-video > iframe.modal-player-frame {
  z-index: 1;
}


/* MOBILE DRIVE CLIP FIX (2026-10-11): the native Drive <video> draws its own controls
   at the top-right corner, where the close button also sat, so the two stacked on phones.
   On small screens, move × into a reserved strip above the clip so it never overlaps
   the video's controls, and reserve space below for the title. Desktop is unchanged. */
@media (max-width: 700px) {
  .video-modal .modal-close {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    right: 10px !important;
    z-index: 2147483000 !important;
    background: rgba(0, 0, 0, 0.72) !important;
    border-radius: 50% !important;
  }
  .video-modal .modal-video.gdrive-video-wrapper {
    margin-top: 48px !important;
    max-height: calc(100dvh - 48px - 64px) !important;
  }
  .video-modal .modal-video.gdrive-video-wrapper.is-portrait {
    width: min(calc(100vw - 24px), calc((100dvh - 48px - 64px) * 9 / 16)) !important;
  }
  .video-modal .modal-video.gdrive-video-wrapper.is-landscape {
    width: min(calc(100vw - 24px), calc((100dvh - 48px - 64px) * 16 / 9)) !important;
  }
  .video-modal .modal-video.gdrive-video-wrapper > video.modal-player-video {
    object-fit: contain !important;
  }
  .video-modal .modal-title {
    margin-top: 8px !important;
    position: relative !important;
    z-index: 2 !important;
  }
}


/* Phones: Drive clips open on Google Drive in a new tab; label tells viewers before they tap (2026-10-11). */
@media (max-width: 700px) {
  .project-card[data-source="drive"] .project-thumb { position: relative; }
  .project-card[data-source="drive"] .project-thumb::after {
    content: "แตะเพื่อดูบน Google Drive ↗";
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 4;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.68);
    color: #fff;
    font-size: 11px;
    line-height: 1.3;
    pointer-events: none;
  }
}


/* ===== NOW SHOWING redesign (2026-10-11) =====
   Desktop: full-width cinema stage + thumbnail strip, no box.  Phone: big swipe carousel, no box. */
.hero .hero-copy { grid-column: 1 / -1; }
#hero-showcase {
  grid-column: 1 / -1;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;
}
#hero-showcase:hover { transform: none !important; box-shadow: none !important; background: none !important; }
#hero-showcase::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8% -4% 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(150, 108, 255, 0.28), transparent 62%);
  filter: blur(30px);
  pointer-events: none;
}
#hero-showcase .showcase-caption { display: none !important; }
#hero-showcase .showcase-topline { justify-content: flex-start; padding: 0 0 14px; font-size: 11px; letter-spacing: 0.2em; color: #cfc6e8; }
#hero-showcase #showcase-screen.film-archive {
  aspect-ratio: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}
#hero-showcase .film-sleeve-spine,
#hero-showcase .film-sleeve-footer,
#hero-showcase .film-sleeve::before { display: none !important; }
#hero-showcase .film-sleeve-cover { margin: 0 !important; }
#hero-showcase .film-sleeve { padding: 0 !important; overflow: hidden; }

.ns-stage { display: none; }
.ns-stage.is-swapping .ns-bg,
.ns-stage.is-swapping .ns-img { opacity: 0; }

@media (min-width: 701px) {
  .ns-stage {
    display: block;
    position: relative;
    width: min(100%, 1120px);
    margin: 0 auto 20px;
    aspect-ratio: 16 / 9;
    max-height: 74vh;
    border-radius: 22px;
    overflow: hidden;
    background: #07060f;
    box-shadow: 0 40px 110px rgba(4, 2, 18, 0.65), 0 0 60px rgba(150, 108, 255, 0.16);
    color: #fff;
  }
  .ns-open { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
  .ns-bg, .ns-img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0.3s ease; }
  .ns-bg { object-fit: cover; filter: blur(28px) brightness(0.55) saturate(1.2); transform: scale(1.15); }
  .ns-img { object-fit: contain; }
  .ns-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 4, 14, 0.22) 0%, transparent 30%, rgba(5, 4, 14, 0.88) 100%); }
  .ns-play {
    position: absolute; left: 50%; top: 50%;
    width: 92px; height: 92px; padding-left: 6px;
    display: grid; place-items: center;
    border-radius: 50%; font-size: 34px; color: #151027;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    transform: translate(-50%, -50%);
    transition: transform 0.25s ease;
  }
  .ns-stage:hover .ns-play { transform: translate(-50%, -50%) scale(1.08); }
  .ns-meta { position: absolute; z-index: 2; left: 30px; right: 150px; bottom: 26px; pointer-events: none; }
  .ns-count { display: block; margin-bottom: 8px; font-size: 12px; letter-spacing: 0.2em; color: #cfc6e8; }
  .ns-title { margin: 0; font-size: clamp(18px, 2.2vw, 30px); line-height: 1.35; font-weight: 600; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6); }
  .ns-nav { position: absolute; z-index: 2; right: 24px; bottom: 24px; display: flex; gap: 10px; }
  .ns-nav button {
    width: 44px; height: 44px; display: grid; place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%;
    background: rgba(8, 6, 20, 0.55); color: #fff; font-size: 18px; cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .ns-nav button:hover, .ns-nav button:focus-visible { background: #fff; color: #151027; }

  /* the rail becomes a thumbnail strip under the stage; the old title/arrows row is replaced by the stage overlay */
  #hero-showcase .showcase-bottom,
  #hero-showcase .film-archive-heading,
  #hero-showcase .film-archive-footer { display: none !important; }
  #hero-showcase .film-rail {
    gap: 12px !important;
    padding: 8px calc((100% - 104px) / 2) 12px !important;
    scroll-padding-inline: calc((100% - 104px) / 2) !important;
  }
  #hero-showcase .film-sleeve { flex: 0 0 104px !important; transform: none !important; border-radius: 12px; opacity: 0.55; background: #0b0a16 !important; }
  #hero-showcase .film-sleeve.is-selected { opacity: 1; border-color: #c5a4ff !important; box-shadow: 0 0 0 2px #c5a4ff, 0 12px 30px rgba(0, 0, 0, 0.5) !important; }
  #hero-showcase .film-sleeve-cover { aspect-ratio: 3 / 4 !important; }
  #hero-showcase .film-cover-stamp,
  #hero-showcase .film-cover-play { display: none !important; }
}

@media (max-width: 700px) {
  #hero-showcase::before { inset: 10% -10% 10%; }
  #hero-showcase .showcase-topline { padding-bottom: 8px; }
  #hero-showcase .film-archive-heading { display: none !important; }
  #hero-showcase .film-rail {
    gap: 14px !important;
    padding: 6px calc((100% - min(76vw, 320px)) / 2) 14px !important;
    scroll-padding-inline: calc((100% - min(76vw, 320px)) / 2) !important;
    scroll-snap-type: x mandatory;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
  #hero-showcase .film-sleeve {
    flex: 0 0 min(76vw, 320px) !important;
    scroll-snap-align: center;
    border-radius: 20px !important;
    background: #0b0a16 !important;
    opacity: 0.5;
    transform: scale(0.9) !important;
  }
  #hero-showcase .film-sleeve.is-selected { opacity: 1; transform: scale(1) !important; }
  #hero-showcase .film-sleeve-cover { aspect-ratio: 9 / 14 !important; }
  #hero-showcase .film-cover-stamp { display: none !important; }
  #hero-showcase .film-cover-play { width: 64px; height: 64px; font-size: 22px; }
  #hero-showcase .film-sleeve[data-source="drive"] .film-sleeve-cover::after {
    content: "แตะเพื่อดูบน Google Drive ↗";
    position: absolute; left: 10px; bottom: 10px; z-index: 4;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(0, 0, 0, 0.68); color: #fff; font-size: 11px; line-height: 1.3;
    pointer-events: none;
  }
  #hero-showcase .showcase-bottom { justify-content: center; text-align: center; margin-top: 4px; }
  #hero-showcase .showcase-controls { display: none !important; }
  #hero-showcase .showcase-copy h2 { font-size: 15px; }
}


/* Now Showing cleanup: keep artwork and navigation, hide clip title and position/count labels. */
#hero-showcase .ns-meta { display: none !important; }
#hero-showcase .showcase-copy { display: none !important; }
#hero-showcase .showcase-bottom { justify-content: flex-end !important; }