/* A continuous, image-led portfolio. Detailed case studies keep their own design. */
body.portfolio-flow { background: var(--paper); color: var(--ink); }
.portfolio-flow .site-header { height: 88px; display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 44px; position: sticky; top: 0; background: #f3f0e9f5; color: var(--ink); border-color: #15151520; backdrop-filter: blur(18px); }
.portfolio-flow .wordmark { font-size: 25px; }
.portfolio-flow .wordmark-star { transition: rotate .8s var(--ease); }
.portfolio-flow .wordmark:hover .wordmark-star { rotate: 110deg; }
.creator-location { font-size: 11px; line-height: 1.7; }
.creator-location>span { display: block; color: #776f64; font-size: 9px; }
.portfolio-flow .desktop-nav { font-size: 11px; }
.portfolio-flow .header-contact { font-size: 11px; gap: 20px; }
.reading-progress { position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background: var(--accent); transform: scaleX(var(--read-progress,0)); transform-origin: left; }
.flow-intro { max-width: 1644px; margin: auto; padding: 49px var(--gutter) 57px; }
.intro-kicker { display: flex; align-items: center; gap: 11px; font-size: 8px; font-weight: 550; letter-spacing: .12em; }
.intro-dot { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 4px #f5754516; }
.portfolio-flow h1 { display: flex; align-items: baseline; gap: .19em; position: relative; margin-top: 29px; font-size: clamp(70px,9.9vw,157px); font-weight: 550; letter-spacing: -.075em; line-height: .98; }
.portfolio-flow h1 em { font-family: var(--serif); font-weight: 400; letter-spacing: -.075em; white-space: nowrap; }
.intro-spark { font-size: .57em; color: var(--accent); align-self: center; margin-left: auto; letter-spacing: 0; animation: slow-rotate 28s linear infinite; }
.intro-bottom { display: flex; align-items: end; justify-content: space-between; margin-top: 34px; }
.intro-bottom>p { font-size: 13px; line-height: 1.8; letter-spacing: -.015em; }
.intro-bottom>p>span { font-size: 11px; color: #746d62; }
.explore-link { display: flex; align-items: center; gap: 24px; font-size: 10px; }
.explore-link>span { display: grid; place-items: center; height: 42px; width: 42px; border: 1px solid #15151555; border-radius: 50%; font-size: 21px; transition: translate .4s; }
.explore-link:hover>span { translate: 0 4px; }
.portfolio-flow .work-section { padding: 0 var(--gutter) 85px; scroll-margin-top: 88px; }
.flow-work-index { max-width: 1500px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 25px; border-top: 1px solid #15151550; border-bottom: 1px solid #15151525; padding: 20px 0; }
.flow-work-index h2 { font: 550 8px/1.6 var(--font); letter-spacing: .11em; white-space: nowrap; }
.flow-work-index h2>span { color: #877d70; margin-left: 23px; font-weight: 400; }
.flow-work-index nav { display: flex; gap: 35px; font-size: 10px; }
.flow-work-index a { padding: 5px 0; }
.flow-work-index a>span { font-size: 7px; color: #a36e53; vertical-align: super; margin-left: 8px; }
.flow-work-index a:hover { text-decoration: underline; text-underline-offset: 5px; }
.portfolio-flow .projects-grid { display: block; padding-top: 0; }
.portfolio-flow .project-card { margin: 0; padding-top: 46px; scroll-margin-top: 112px; }
.portfolio-flow .project-card+.project-card { margin-top: 90px; border-top: 1px solid #15151535; }
.flow-project-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding-bottom: 29px; }
.flow-project-kicker { font-size: 8px; letter-spacing: .12em; color: #807364; margin-bottom: 12px; }
.flow-project-heading h3 { font-size: clamp(40px,4.2vw,66px); font-weight: 550; line-height: 1; letter-spacing: -.065em; }
.flow-project-heading h3 em { font-family: var(--serif); font-weight: 400; }
.flow-project-summary { display: flex; align-items: end; gap: 42px; padding-bottom: 3px; }
.flow-project-summary p { font-size: 12px; line-height: 1.8; }
.flow-project-summary p>span { font-size: 10px; color: #746b5d; }
.flow-project-link { display: flex; align-items: center; gap: 18px; background: none; border-bottom: 1px solid #15151570; padding: 0 0 7px; font-size: 10px; white-space: nowrap; }
.flow-project-link>span { font-size: 20px; transition: translate .4s; }
.flow-project-link:hover>span { translate: 3px -3px; }
.flow-stage-reveal { perspective: 1600px; }
.portfolio-flow .project-visual { height: auto; min-height: 0; aspect-ratio: 1.95; border-radius: 4px; transform: perspective(1600px) rotateX(0deg) rotateY(0deg); transition: transform .65s var(--ease),box-shadow .65s; }
.flow-scene-label { position: absolute; top: 35px; left: 38px; font-size: 8px; letter-spacing: .13em; z-index: 3; }
.portfolio-flow .project-open { width: 52px; height: 52px; right: 32px; bottom: 30px; font-size: 29px; }
.flow-project-meta { display: flex; justify-content: space-between; gap: 30px; align-items: center; padding-top: 20px; }
.flow-project-meta>p:first-child { font-size: 7px; line-height: 1.7; letter-spacing: .08em; color: #736b5e; }
.flow-project-meta>p:first-child>span { margin: 0 12px; color: #aaa092; }
.project-status { display: flex; align-items: center; gap: 8px; font-size: 7px; letter-spacing: .1em; color: #847968; white-space: nowrap; }
.project-status>span { width: 4px; height: 4px; border-radius: 50%; background: #bc8c71; }

/* LOEV: an editorial image beside the actual app, in a single visual scene. */
.portfolio-flow .loev-visual { background: #b9a9b1; }
.loev-editorial { position: absolute; inset: 0 54% 0 0; overflow: hidden; }
.loev-editorial>img { height: 100%; object-fit: cover; object-position: 49% 33%; transition: scale 1.4s var(--ease); }
.loev-editorial-shade { position: absolute; inset: 0; background: linear-gradient(180deg,#15101510 35%,#251a2480); }
.loev-visual .flow-scene-label { color: #2b2428; }
.loev-scene-title { position: absolute; left: 38px; bottom: 40px; font-size: clamp(34px,5.3vw,82px); line-height: .97; letter-spacing: -.06em; color: #fffaf5; z-index: 2; }
.loev-scene-title>em { font-family: var(--serif); font-weight: 400; }
.portfolio-flow .loev-backdrop-word { left: 48%; top: 7%; font-size: clamp(100px,18.7vw,290px); font-weight: 650; letter-spacing: -.09em; line-height: .9; color: #9a818e; opacity: .5; }
.loev-orbit { position: absolute; width: 48%; aspect-ratio: 1; border: 1px solid #6b465f35; border-radius: 50%; left: 49%; top: 9%; transform: rotate(-25deg) scaleY(.65); }
.portfolio-flow .loev-device { width: 20%; max-width: 295px; border-width: 6px; border-radius: 34px; box-shadow: 0 30px 50px #30202a50; }
.portfolio-flow .loev-device img { border-radius: 26px; }
.portfolio-flow .loev-device-front { left: 72%; top: 11%; transform: rotate(9deg); z-index: 2; }
.portfolio-flow .loev-device-back { left: 52%; top: 24%; transform: rotate(-10deg) scale(.88); transform-origin: top center; }
.loev-scene-note { position: absolute; bottom: 30px; left: 51%; font-size: 7px; letter-spacing: .12em; color: #493442; }
.portfolio-flow .loev-visual:hover .loev-device-front { transform: rotate(5deg) scale(1.025); }
.portfolio-flow .loev-visual:hover .loev-device-back { transform: rotate(-13deg) scale(.88); }
.loev-visual:hover .loev-editorial>img { scale: 1.035; }

/* Louvro stays light: original transparent cutouts, original packaging and film. */
.portfolio-flow .louvro-visual { background: transparent; }
.portfolio-flow .louvro-card-headline { top: 21%; left: 4%; right: auto; font-size: clamp(42px,5.7vw,88px); text-align: left; z-index: 2; }
.portfolio-flow .louvro-card-products { top: 6%; bottom: 5%; left: 38%; right: 3%; }
.portfolio-flow .louvro-card-products img { height: 100%; object-fit: contain; filter: drop-shadow(14px 25px 17px #422c1e30); }
.portfolio-flow .louvro-card-front { width: 79%; left: 20%; top: 0; transform: rotate(5deg); }
.portfolio-flow .louvro-card-back { width: 58%; left: 0; top: 6%; height: 89%; transform: rotate(-12deg) scale(.93); }
.louvro-scene-detail { position: absolute; top: 62%; left: 4.2%; font-size: 11px; line-height: 1.7; color: #7d7163; }
.portfolio-flow .louvro-card-note { left: 4.2%; bottom: 30px; font-size: 7px; letter-spacing: .1em; }
.louvro-inline-details { display: grid; grid-template-columns: 1fr .35fr; gap: 25px; margin-top: 25px; align-items: start; }
.flow-packaging { margin: 0; padding: 25px 30px 20px; background: #fff; min-width: 0; }
.flow-packaging figcaption { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 0 20px; border-bottom: 1px solid #15151520; font-size: 8px; letter-spacing: .08em; }
.flow-packaging figcaption>span:last-child { font-size: 12px; letter-spacing: -.02em; }
.flow-packaging>button { background: none; padding: 25px 0 0; width: 100%; }
.flow-packaging img { width: 100%; max-height: 490px; object-fit: contain; transition: scale .7s var(--ease); }
.flow-packaging>button:hover img { scale: 1.015; }
.flow-film { min-width: 0; }
.flow-film-frame { position: relative; aspect-ratio: 9/16; width: 100%; background: #e9dfd1; overflow: hidden; }
.ambient-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-film-toggle { position: absolute; bottom: 17px; left: 17px; right: 17px; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 12px 15px; border-radius: 30px; background: #f3f0e9ec; color: var(--ink); backdrop-filter: blur(10px); font-size: 9px; }
.home-film-toggle>span:last-child { font-size: 13px; }
.flow-film>p { display: flex; justify-content: space-between; gap: 15px; padding-top: 11px; font-size: 6px; letter-spacing: .08em; line-height: 1.7; }
.flow-film>p>span { color: #796f60; }
.flow-film .home-film-error { font-size: 10px; letter-spacing: 0; }
.home-film-error a { text-decoration: underline; }

/* Quyen: a generous responsive website composition. */
.project-dialog[data-project=quyen] .dialog-close-icon { background: #864665; }
.portfolio-flow .quyen-visual { background: #e2d4d7; }
.quyen-scene-title { position: absolute; top: 24%; left: 4%; font: 500 clamp(33px,4.2vw,66px)/1.02 var(--font); letter-spacing: -.06em; color: #513444; }
.quyen-scene-title>em { font-family: var(--serif); font-weight: 400; }
.quyen-scene-note { position: absolute; bottom: 32px; left: 4.2%; font-size: 7px; line-height: 1.9; letter-spacing: .12em; color: #755865; }
.portfolio-flow .quyen-browser { left: 37%; width: 62%; top: 13%; height: 83%; border-radius: 9px; transform: rotate(-5deg); box-shadow: 0 25px 55px #3e243230; }
.portfolio-flow .browser-bar { display: flex; font-size: 7px; padding: 12px 16px; }
.portfolio-flow .quyen-page { display: block; height: calc(100% - 32px); overflow: hidden; }
.portfolio-flow .quyen-visual:hover .quyen-page img { transform: translateY(-37%); }
.portfolio-flow .quyen-mobile { width: 16%; left: 28%; right: auto; bottom: 9%; border-width: 5px; border-radius: 26px; aspect-ratio: .54; padding: 23px 12px; transform: rotate(6deg); z-index: 2; }
.portfolio-flow .quyen-mobile>span { font-size: clamp(12px,1.6vw,25px); }
.portfolio-flow .quyen-mobile .quyen-mobile-button { font-size: 6px; padding: 8px 12px; }
.portfolio-flow .quyen-visual:hover .quyen-browser { transform: rotate(-2deg) translateY(-5px); }

/* Meteor shares Quyen's website composition, using its own live desktop and mobile views. */
.portfolio-flow .meteor-visual { background: #d9e5f0; color: #203b54; }
.meteor-visual .quyen-scene-title { color: #142c44; }
.meteor-visual .quyen-scene-title>em { color: #326889; }
.meteor-visual .quyen-scene-note { color: #476379; }
.portfolio-flow .meteor-visual .quyen-browser { background: #0b1b29; box-shadow: 0 25px 55px #122b4540; }
.meteor-visual .browser-bar { background: #edf3f8; color: #3f5b72; }
.meteor-visual .browser-dots i { background: #91a9bc; }
.portfolio-flow .meteor-mobile { padding: 0; overflow: hidden; aspect-ratio: 390/844; background: #0b1b29; border-color: #18324b; box-shadow: 0 15px 35px #122b4550; }
.portfolio-flow .meteor-mobile img { width: 100%; height: 100%; margin: 0; object-fit: cover; }
.case-hero-image.meteor { padding: 55px 12%; height: 650px; overflow: hidden; background: #d9e5f0; }
.case-hero-image.meteor img { width: 100%; height: auto; max-height: none; object-fit: initial; border-radius: 8px; box-shadow: 0 20px 45px #122b4535; }
.case-story .case-site-link { margin: 28px 0 0; }
.case-site-link a { display: inline-flex; align-items: center; gap: 18px; padding-bottom: 6px; border-bottom: 1px solid #15151570; color: var(--ink); }
@media(max-width:760px) {
  .case-hero-image.meteor { height: 380px; padding: 32px 7%; }
}

/* Short, prominent contact ending. */
.portfolio-flow .flow-contact { margin: 0 var(--gutter); display: block; max-width: 1500px; padding: 43px 0 26px; background: var(--paper); color: var(--ink); border-top: 1px solid #15151550; scroll-margin-top: 110px; }
.flow-contact-heading>p:first-child { font-size: 8px; letter-spacing: .12em; color: #776e61; }
.portfolio-flow .contact-invitation { position: relative; margin-top: 25px; font-size: clamp(65px,9.5vw,145px); font-weight: 500; line-height: .93; letter-spacing: -.07em; color: var(--ink); }
.contact-invitation>em { font: 400 1em/.93 var(--serif); letter-spacing: -.07em; }
.contact-invitation>span { position: absolute; right: 3%; bottom: 5%; font-size: 1.6em; font-weight: 400; color: var(--accent); line-height: 1; }
.flow-contact-bottom { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-top: 37px; }
.portfolio-flow .contact-signature { font-size: 17px; font-weight: 500; letter-spacing: -.03em; color: var(--ink); line-height: 1.8; }
.contact-signature>span { display: block; color: #786e60; font-size: 10px; font-weight: 400; letter-spacing: 0; }
.portfolio-flow .contact-actions { width: min(42%,400px); }
.portfolio-flow .contact-button { font-size: 14px; padding: 15px 0; border-top: 1px solid #15151555; border-bottom: 1px solid #15151555; }
.portfolio-flow .contact-button small { display: inline; font-size: 10px; letter-spacing: 0; margin-left: 25px; }
.portfolio-flow .contact-button>span:last-child { font-size: 25px; }
.portfolio-flow .call-link { font-size: 10px; }
.portfolio-flow .footer-meta { display: flex; justify-content: space-between; gap: 25px; align-items: center; border-top: 1px solid #15151525; padding-top: 23px; margin-top: 40px; }
.portfolio-flow .footer-meta p,.portfolio-flow .motion-control { font-size: 8px; color: #796f60; }
.portfolio-flow .motion-control { padding: 0; }
.portfolio-flow .motion-indicator { border-color: #796f60; }
.portfolio-flow .back-to-top { font-size: 8px; }
.portfolio-flow .project-cursor { width: 90px; height: 90px; font-size: 8px; }

.portfolio-flow .floating-object { animation: flow-float 7s ease-in-out infinite; animation-play-state: paused; }
.portfolio-flow .is-in-view .floating-object { animation-play-state: running; }
.portfolio-flow .loev-device-back,.portfolio-flow .louvro-card-back { animation-delay: -3.5s; }
@keyframes flow-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -13px; } }
@media(hover:hover) and (pointer:fine) {
  .portfolio-flow .project-visual:hover { transform: perspective(1600px) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg)); }
  .portfolio-flow .louvro-visual:hover .louvro-card-front { transform: translateY(-6px) rotate(1deg) scale(1.03); }
  .portfolio-flow .louvro-visual:hover .louvro-card-back { transform: translate(-4px,3px) rotate(-16deg) scale(.93); }
}
.motion-off .portfolio-flow .project-visual:hover { transform: none; }
.motion-off .portfolio-flow .loev-visual:hover .loev-device-front { transform: rotate(9deg); }
.motion-off .portfolio-flow .loev-visual:hover .loev-device-back { transform: rotate(-10deg) scale(.88); }
.motion-off .portfolio-flow .louvro-visual:hover .louvro-card-front { transform: rotate(5deg); }
.motion-off .portfolio-flow .louvro-visual:hover .louvro-card-back { transform: rotate(-12deg) scale(.93); }
.motion-off .portfolio-flow .quyen-visual:hover .quyen-browser { transform: rotate(-5deg); }
.motion-off .portfolio-flow .quyen-visual:hover .quyen-page img { transform: none; }
.motion-off .loev-visual:hover .loev-editorial>img,.motion-off .flow-packaging>button:hover img { scale: 1; }
@media(min-width:1650px) { .portfolio-flow .flow-contact { margin-left: auto; margin-right: auto; } }
@media(max-width:1100px) {
  .portfolio-flow .site-header { gap: 24px; }
  .flow-project-summary { display: block; }
  .flow-project-link { margin-top: 10px; }
  .flow-project-summary p { font-size: 11px; }
  .flow-project-summary p>span { font-size: 9px; }
  .flow-project-heading h3 { font-size: 44px; }
  .flow-scene-label { top: 25px; left: 27px; font-size: 7px; }
  .portfolio-flow .loev-device { border-width: 5px; border-radius: 28px; }
  .portfolio-flow .loev-device img { border-radius: 21px; }
  .loev-scene-title { left: 27px; bottom: 30px; }
  .portfolio-flow .louvro-card-note,.quyen-scene-note { font-size: 6px; }
  .portfolio-flow .quyen-mobile { border-width: 4px; border-radius: 20px; }
  .portfolio-flow .quyen-mobile .quyen-mobile-button { font-size: 5px; padding: 7px; }
  .portfolio-flow .project-open { width: 44px; height: 44px; font-size: 25px; bottom: 24px; right: 24px; }
  .louvro-inline-details { gap: 20px; grid-template-columns: 1fr .38fr; }
  .flow-packaging { padding: 20px; }
}
@media(max-width:760px) {
  .portfolio-flow .site-header { height: 75px; grid-template-columns: 1fr auto auto; gap: 20px; padding: 0 var(--gutter); }
  .portfolio-flow .wordmark { font-size: 22px; }
  .portfolio-flow .wordmark-star { font-size: 27px; margin-left: 9px; }
  .creator-location,.portfolio-flow .desktop-nav { display: none; }
  .portfolio-flow .header-contact { margin: 0; gap: 10px; font-size: 10px; }
  .portfolio-flow .header-contact>span { width: 28px; height: 28px; font-size: 17px; }
  .portfolio-flow .menu-toggle span { background: var(--ink); }
  .portfolio-flow .mobile-menu { position: fixed; top: 75px; background: var(--paper); color: var(--ink); border-bottom: 1px solid #15151535; box-shadow: 0 20px 35px #15151515; }
  .portfolio-flow .mobile-menu a { border-color: #15151520; font-size: 20px; padding: 15px 0; }
  .flow-intro { padding-top: 32px; padding-bottom: 33px; }
  .intro-kicker { font-size: 6px; letter-spacing: .08em; gap: 9px; }
  .portfolio-flow h1 { display: block; font-size: clamp(62px,15.6vw,112px); line-height: .96; margin-top: 25px; max-width: 650px; }
  .portfolio-flow .flow-intro h1>span:first-child { display: block; }
  .intro-spark { position: absolute; top: 4%; right: 4%; font-size: .62em; }
  .intro-bottom { margin-top: 24px; gap: 15px; }
  .intro-bottom>p { font-size: 12px; line-height: 1.8; }
  .intro-bottom>p>span { font-size: 10px; }
  .explore-link { font-size: 0; gap: 0; }
  .explore-link>span { width: 35px; height: 35px; font-size: 18px; }
  .portfolio-flow .work-section { padding-bottom: 48px; scroll-margin-top: 75px; }
  .flow-work-index { display: block; padding: 16px 0 13px; }
  .flow-work-index h2 { display: flex; justify-content: space-between; font-size: 7px; }
  .flow-work-index nav { justify-content: space-between; gap: 15px; font-size: 9px; margin-top: 15px; }
  .flow-work-index a>span { font-size: 6px; margin-left: 5px; }
  .portfolio-flow .project-card { padding-top: 28px; scroll-margin-top: 94px; }
  .portfolio-flow .project-card+.project-card { margin-top: 45px; padding-top: 30px; }
  .flow-project-heading { display: block; padding-bottom: 21px; }
  .flow-project-kicker { font-size: 7px; margin-bottom: 10px; }
  .flow-project-heading h3 { font-size: clamp(33px,8.6vw,57px); }
  .flow-project-summary { display: flex; gap: 18px; justify-content: space-between; align-items: end; margin-top: 16px; }
  .flow-project-summary p { font-size: 11px; line-height: 1.7; }
  .flow-project-summary p>span { display: block; font-size: 9px; line-height: 1.6; margin-top: 2px; max-width: 190px; }
  .flow-project-summary p>br { display: none; }
  .flow-project-link { font-size: 8px; gap: 10px; margin-top: 0; padding-bottom: 5px; flex-shrink: 0; }
  .flow-project-link>span { font-size: 17px; }
  .portfolio-flow .project-visual { aspect-ratio: .83; border-radius: 3px; }
  .flow-scene-label { top: 21px; left: 20px; font-size: 7px; letter-spacing: .08em; }
  .portfolio-flow .project-open { width: 35px; height: 35px; right: 18px; bottom: 18px; font-size: 22px; }
  .flow-project-meta { gap: 15px; align-items: start; padding-top: 15px; }
  .flow-project-meta>p:first-child { font-size: 7px; line-height: 1.9; max-width: 65%; letter-spacing: .03em; }
  .flow-project-meta>p:first-child>span { margin: 0 4px; }
  .project-status { font-size: 7px; gap: 5px; line-height: 1.9; letter-spacing: .04em; }
  .project-status>span { width: 3px; height: 3px; margin-top: 3px; }
  .loev-editorial { inset: 0 0 38% 0; }
  .loev-editorial>img { object-position: 48% 32%; }
  .loev-editorial-shade { background: linear-gradient(90deg,#21161d22,#21161d00 60%); }
  .loev-scene-title { top: 18%; bottom: auto; left: 20px; font-size: clamp(34px,10vw,65px); text-shadow: 0 2px 12px #251a2426; }
  .portfolio-flow .loev-backdrop-word { top: 70%; left: 2%; font-size: 35vw; }
  .loev-orbit { top: 53%; left: 4%; width: 90%; }
  .portfolio-flow .loev-device { border-width: 3px; border-radius: 19px; width: 30%; max-width: 200px; }
  .portfolio-flow .loev-device img { border-radius: 14px; }
  .portfolio-flow .loev-device-front { left: 59%; top: 42%; transform: rotate(9deg); }
  .portfolio-flow .loev-device-back { left: 31%; top: 48%; transform: rotate(-10deg) scale(.9); }
  .portfolio-flow .loev-device .phone-camera { height: 8px; }
  .loev-scene-note { bottom: 23px; left: 20px; font-size: 6px; letter-spacing: .06em; max-width: 100px; line-height: 1.8; }
  .portfolio-flow .louvro-visual { aspect-ratio: .9; }
  .portfolio-flow .louvro-card-headline { top: 18%; left: 20px; font-size: clamp(37px,11vw,62px); }
  .portfolio-flow .louvro-card-products { top: 40%; bottom: 9%; left: 3%; right: 3%; }
  .portfolio-flow .louvro-card-front { width: 76%; left: 23%; height: 100%; }
  .portfolio-flow .louvro-card-back { width: 56%; left: 0; top: 6%; height: 90%; }
  .louvro-scene-detail { display: none; }
  .portfolio-flow .louvro-card-note { left: 20px; bottom: 23px; font-size: 6px; letter-spacing: .05em; }
  .louvro-inline-details { grid-template-columns: 1fr; gap: 19px; margin-top: 19px; }
  .flow-packaging { padding: 19px 15px 15px; }
  .flow-packaging figcaption { padding-bottom: 13px; font-size: 7px; gap: 12px; }
  .flow-packaging figcaption>span:last-child { font-size: 8px; }
  .flow-packaging>button { padding-top: 16px; }
  .flow-packaging img { min-height: 200px; }
  .flow-film { width: 67%; max-width: 330px; justify-self: center; }
  .home-film-toggle { font-size: 9px; bottom: 13px; left: 13px; right: 13px; padding: 10px 13px; }
  .flow-film>p { font-size: 7px; }
  .quyen-scene-title { top: 16%; left: 20px; font-size: clamp(35px,10vw,62px); }
  .quyen-scene-note { left: 20px; bottom: 22px; font-size: 6px; }
  .portfolio-flow .quyen-browser { left: 8%; width: 87%; height: 49%; top: 42%; transform: rotate(-5deg); border-radius: 5px; }
  .portfolio-flow .browser-bar { font-size: 4px; padding: 7px 9px; gap: 10px; }
  .portfolio-flow .browser-dots { gap: 2px; }
  .portfolio-flow .browser-dots i { width: 3px; height: 3px; }
  .portfolio-flow .quyen-page { height: calc(100% - 20px); }
  .portfolio-flow .quyen-mobile { left: 65%; bottom: 10%; width: 25%; border-width: 3px; border-radius: 13px; padding: 12px 6px; }
  .portfolio-flow .quyen-mobile img { margin-bottom: 9px; }
  .portfolio-flow .quyen-mobile>span { font-size: 12px; }
  .portfolio-flow .quyen-mobile .quyen-mobile-button { font-size: 4px; margin-top: 9px; padding: 5px 6px; }
  .portfolio-flow .flow-contact { padding-top: 29px; padding-bottom: 23px; scroll-margin-top: 96px; }
  .flow-contact-heading>p:first-child { font-size: 6px; }
  .portfolio-flow .contact-invitation { margin-top: 23px; font-size: clamp(61px,16vw,100px); }
  .contact-invitation>span { right: 0; font-size: 1.25em; bottom: 7%; }
  .flow-contact-bottom { display: block; margin-top: 28px; }
  .portfolio-flow .contact-signature { font-size: 15px; }
  .contact-signature>span { font-size: 9px; }
  .portfolio-flow .contact-actions { width: 100%; margin-top: 20px; }
  .portfolio-flow .contact-button { font-size: 12px; }
  .portfolio-flow .contact-button small { font-size: 9px; margin-left: 23px; }
  .portfolio-flow .call-link { font-size: 9px; }
  .portfolio-flow .footer-meta { gap: 12px; padding-top: 20px; margin-top: 28px; }
  .portfolio-flow .footer-meta p,.portfolio-flow .motion-control,.portfolio-flow .back-to-top { font-size: 8px; }
  .portfolio-flow .motion-control { min-height: 35px; }
  .portfolio-flow .back-to-top { gap: 8px; }
}
@media(max-width:370px) {
  .portfolio-flow .site-header { gap: 12px; }
  .portfolio-flow .wordmark { font-size: 19px; }
  .portfolio-flow .wordmark-star { font-size: 23px; margin-left: 7px; }
  .portfolio-flow .header-contact { gap: 7px; font-size: 9px; }
  .portfolio-flow h1 { font-size: 59px; }
  .intro-bottom>p { font-size: 10px; }
  .intro-bottom>p>span { font-size: 9px; }
  .flow-project-summary { gap: 12px; }
  .flow-project-summary p { font-size: 10px; }
  .flow-project-summary p>span { font-size: 8px; }
  .flow-project-link { font-size: 7px; gap: 6px; }
  .portfolio-flow .loev-device { border-radius: 16px; }
  .portfolio-flow .loev-device img { border-radius: 11px; }
  .portfolio-flow .louvro-card-headline { font-size: 36px; }
  .flow-film { width: 74%; }
  .portfolio-flow .quyen-mobile>span { font-size: 10px; }
}
@media(prefers-reduced-motion:reduce) {
  .portfolio-flow .project-visual:hover { transform: none; }
  .portfolio-flow .quyen-visual:hover .quyen-browser { transform: rotate(-5deg); }
  .loev-visual:hover .loev-editorial>img,.flow-packaging>button:hover img { scale: 1; }
}