/* Approved portfolio cases: shared by the home and landing-page service. */
.fx-portfolio-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; }
.fx-portfolio-card { min-width:0; }
.fx-portfolio-link { display:flex; flex-direction:column; height:100%; color:var(--fx-white); text-decoration:none; border-radius:10px; }
.fx-portfolio-link:focus-visible { outline:3px solid var(--fx-yellow); outline-offset:8px; }
.fx-portfolio-art { position:relative; aspect-ratio:4/3; overflow:hidden; border:1px solid rgba(145,197,231,.25); border-radius:10px; background:radial-gradient(ellipse at 85% 85%,#204c74, #101d34 67%); isolation:isolate; }
.fx-portfolio-art-pavlenko { background:radial-gradient(ellipse at 90% 25%,#254d70,#111d34 65%); }
.fx-portfolio-art-darya { background:radial-gradient(ellipse at 85% 20%,#54463e,#172033 70%); }
.fx-portfolio-browser { position:absolute; overflow:hidden; border:1px solid #44546a; border-radius:7px; background:#f5f6f2; box-shadow:0 16px 35px #02091655; transition:transform .55s cubic-bezier(.2,.75,.3,1); }
.fx-portfolio-chrome { position:relative; display:flex; align-items:center; gap:5px; height:19px; padding:0 9px; background:#1c2a3e; }
.fx-portfolio-chrome i { width:4px; height:4px; flex-shrink:0; border-radius:50%; background:#8895a6; }
.fx-portfolio-chrome i:nth-child(3) { background:var(--fx-yellow); }
.fx-portfolio-chrome span { margin:auto; padding-right:27px; font:9px/1 "Golos Text",sans-serif; color:#c3cede; }
.fx-portfolio-browser img { display:block; width:100%; height:auto; }
.fx-portfolio-art-hitech .fx-portfolio-browser-main { left:5%; top:8%; width:90%; transform:rotate(-2deg); }
.fx-portfolio-browser-detail { right:5%; bottom:6%; width:51%; transform:rotate(2deg); }
.fx-portfolio-art-pavlenko .fx-portfolio-browser-main { left:4%; top:19%; width:91%; transform:rotate(-1deg); }
.fx-portfolio-art-darya .fx-portfolio-browser-main { left:18%; top:19%; width:78%; transform:rotate(-1deg); }
.fx-portfolio-phone { position:absolute; right:4%; top:6%; width:26%; overflow:hidden; border:5px solid #0b111b; outline:1px solid #9eabc0; border-radius:23px; background:#0b111b; box-shadow:0 20px 35px #0005; transform:rotate(3deg); transition:transform .55s cubic-bezier(.2,.75,.3,1); }
.fx-portfolio-phone img { display:block; width:100%; height:auto; border-radius:17px; }
.fx-portfolio-art-darya .fx-portfolio-phone { left:2%; right:auto; top:7%; width:20%; transform:rotate(-3deg); }
.fx-portfolio-link:hover .fx-portfolio-browser-main { transform:translateY(-5px) rotate(0); }
.fx-portfolio-link:hover .fx-portfolio-browser-detail { transform:translateY(-9px) rotate(0); }
.fx-portfolio-link:hover .fx-portfolio-phone { transform:translateY(-7px) rotate(0); }
.fx-portfolio-copy { display:flex; flex-direction:column; flex:1; padding:27px 0 0; }
.fx-page .fx-portfolio-copy h3 { margin:0 0 12px; font-family:"Onest","Golos Text",sans-serif; font-size:clamp(27px,2.7vw,36px); line-height:1.05; font-weight:560; letter-spacing:-.04em; color:var(--fx-white); }
.fx-portfolio-copy p { margin:0 0 18px; color:#aebdd1; font-size:15px; line-height:1.6; }
.fx-portfolio-copy .fx-portfolio-subtitle { color:var(--fx-sky); font-size:17px; line-height:1.35; }
.fx-portfolio-action { display:inline-flex; align-items:center; align-self:flex-start; gap:30px; margin-top:auto; padding:13px 0 5px; color:var(--fx-yellow); font-size:16px; font-weight:550; }
.fx-portfolio-action > span { font-size:23px; transition:transform .3s ease; }
.fx-portfolio-link:hover .fx-portfolio-action > span { transform:translate(3px,-3px); }
.fx-cases-service { padding-top:100px; padding-bottom:110px; }
html.fx-case-open { overflow:hidden; scrollbar-gutter:stable; }
.fx-case-dialog { position:fixed; inset:0; width:min(1200px,calc(100vw - 48px)); max-width:none; height:calc(100dvh - 48px); max-height:none; margin:auto; padding:0; overflow:hidden; border:1px solid #334d6e; border-radius:16px; background:#0d1326; color:#f5f6f2; box-shadow:0 30px 120px #0008; font-family:"Golos Text",sans-serif; }
.fx-case-dialog::backdrop,.fx-case-lightbox::backdrop { background:#030914d9; backdrop-filter:blur(8px); }
.fx-case-modal-bar { display:flex; flex-shrink:0; align-items:center; gap:20px; height:76px; padding:12px 28px; border-bottom:1px solid #27394f; background:#0d1326; }
.fx-case-modal-bar img { width:98px; height:49px; object-fit:contain; }
.fx-case-modal-name { margin:auto; color:#bbcfe2; font-size:14px; }
.fx-case-close { display:grid; place-items:center; flex-shrink:0; width:46px; height:46px; border:1px solid #52627b; border-radius:50%; background:#14213a; color:#f5f6f2; font-size:29px; line-height:1; cursor:pointer; }
.fx-case-close:hover { color:#0d1326; background:var(--fx-yellow); border-color:var(--fx-yellow); }
.fx-case-close:focus-visible,.fx-case-zoom:focus-visible,.fx-case-play:focus-visible,.fx-case-secondary:focus-visible { outline:3px solid var(--fx-yellow); outline-offset:4px; }
.fx-case-scroll { height:calc(100% - 76px); overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.fx-case-body { padding:46px 48px 52px; }
.fx-case-body h2,.fx-case-body h3 { font-family:"Onest","Golos Text",sans-serif; font-weight:550; letter-spacing:-.045em; color:#f5f6f2; }
.fx-case-body h2 { max-width:980px; margin:0 0 23px; font-size:clamp(35px,4.6vw,60px); line-height:1.06; }
.fx-case-body h3 { max-width:850px; margin:0 0 24px; font-size:clamp(29px,3.2vw,43px); line-height:1.12; }
.fx-case-business { margin:0 0 27px; font-size:18px; color:var(--fx-sky); }
.fx-case-text { max-width:870px; margin:0 0 18px; font-size:17px; line-height:1.7; color:#c2cedb; }
.fx-case-section { margin-top:64px; padding-top:51px; border-top:1px solid #2b3b52; }
.fx-case-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start; margin:30px 0 0; }
.fx-case-gallery-single { grid-template-columns:1fr; }
.fx-case-gallery-portraits { grid-template-columns:repeat(3,minmax(0,1fr)); }
.fx-case-gallery-paired { grid-template-columns:minmax(0,1fr) minmax(180px,.42fr); }
.fx-case-figure { min-width:0; margin:0; }
.fx-case-figure figcaption { margin:12px 0 0; color:#8ea6c1; font-size:13px; line-height:1.4; }
.fx-case-zoom { display:block; position:relative; width:100%; padding:0; border:1px solid #3a4b64; border-radius:9px; overflow:hidden; background:#111e34; cursor:zoom-in; }
.fx-case-zoom img { display:block; width:100%; height:auto; }
.fx-case-figure-portrait .fx-case-zoom { max-width:270px; margin:auto; border:7px solid #09111e; border-radius:24px; box-shadow:0 16px 32px #0003; }
.fx-case-figure-portrait figcaption { text-align:center; }
.fx-case-zoom-mark { position:absolute; right:10px; bottom:10px; display:grid; place-items:center; width:33px; height:33px; border-radius:50%; background:#0d1326dd; color:#fff; font-size:18px; pointer-events:none; }
.fx-case-video { margin-top:62px; padding-top:50px; border-top:1px solid #2b3b52; }
.fx-case-player { position:relative; aspect-ratio:16/9; width:100%; overflow:hidden; border:1px solid #405674; border-radius:10px; background:#060d17; }
.fx-case-player video { display:block; width:100%; height:100%; object-fit:contain; }
.fx-case-player [hidden] { display:none!important; }
.fx-case-play { position:absolute; inset:0; display:flex; flex-direction:column; gap:13px; align-items:center; justify-content:center; width:100%; padding:20px; border:0; background:#081122; color:white; font-family:"Golos Text",sans-serif; cursor:pointer; }
.fx-case-play img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; transition:opacity .3s; }
.fx-case-play:hover img { opacity:.7; }
.fx-case-play-icon { position:relative; display:grid; place-items:center; width:78px; height:78px; padding-left:5px; border-radius:50%; background:var(--fx-yellow); color:#0d1326; font-size:29px; box-shadow:0 8px 40px #0006; }
.fx-case-play-label { position:relative; font-size:19px; font-weight:550; text-shadow:0 1px 6px #000; }
.fx-case-video-description { margin:17px 0 0; font-size:14px; line-height:1.5; color:#9bafc5; }
.fx-case-video-status { margin:12px 0 0; font-size:14px; color:#ffdb45; }
.fx-case-ending { margin-top:60px; padding-top:34px; border-top:1px solid #2b3b52; }
.fx-case-ending p { color:#9cafc6; font-size:15px; line-height:1.6; }
.fx-case-links { display:flex; flex-wrap:wrap; gap:16px; margin-top:24px; }
.fx-case-secondary { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 20px; border:1px solid #6a809a; border-radius:6px; color:#f5f6f2; text-decoration:none; }
.fx-case-secondary:hover { border-color:var(--fx-sky); background:#1c304a; }
.fx-case-loading { padding:64px 40px; color:#c2cedb; font-size:17px; }
.fx-case-lightbox { position:fixed; inset:0; width:min(1500px,96vw); max-width:none; max-height:96dvh; margin:auto; padding:60px 20px 18px; border:1px solid #425571; border-radius:12px; background:#0a1220; color:white; }
.fx-case-lightbox .fx-case-close { position:absolute; top:8px; right:12px; }
.fx-case-lightbox img { display:block; max-width:100%; max-height:calc(96dvh - 110px); width:auto; height:auto; margin:auto; object-fit:contain; }
.fx-case-lightbox p { margin:12px 0 0; text-align:center; font-size:14px; color:#bdcedd; }
@media(max-width:1100px) { .fx-portfolio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:900px) { .fx-portfolio-grid { gap:25px; } .fx-case-body { padding:34px 28px 42px; } .fx-case-modal-bar { padding-inline:22px; } .fx-case-gallery { gap:18px; } }
@media(max-width:700px) {
 .fx-portfolio-grid { grid-template-columns:1fr; gap:44px; }
 .fx-portfolio-copy { padding-top:22px; } .fx-portfolio-copy p { font-size:15px; }
 .fx-portfolio-art { aspect-ratio:4/3; }
 .fx-cases-service { padding-top:70px; padding-bottom:76px; }
 .fx-case-dialog { width:100%; height:100dvh; border:0; border-radius:0; }
 .fx-case-modal-bar { height:72px; padding:10px 16px; padding-top:max(10px,env(safe-area-inset-top)); }
 .fx-case-modal-bar img { width:82px; height:42px; } .fx-case-modal-name { font-size:12px; }
 .fx-case-close { width:43px; height:43px; }
 .fx-case-scroll { height:calc(100% - 72px); }
 .fx-case-body { padding:30px 18px 40px; }
 .fx-case-text { font-size:16px; line-height:1.65; }
 .fx-case-business { font-size:16px; }
 .fx-case-section { margin-top:42px; padding-top:34px; }
 .fx-case-gallery { grid-template-columns:1fr; gap:25px; margin-top:25px; }
 .fx-case-gallery-portraits { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
 .fx-case-gallery-portraits .fx-case-figure-portrait:last-child:nth-child(odd) { grid-column:1/-1; max-width:230px; justify-self:center; }
 .fx-case-gallery-paired { grid-template-columns:1fr; }
 .fx-case-figure-portrait .fx-case-zoom { max-width:245px; }
 .fx-case-video { margin-top:42px; padding-top:34px; }
 .fx-case-play-icon { width:60px; height:60px; font-size:24px; }
 .fx-case-play-label { font-size:16px; }
 .fx-case-links { flex-direction:column; } .fx-case-links > * { width:100%; }
 .fx-case-lightbox { width:100vw; border:0; border-radius:0; padding-inline:8px; }
}
@media(prefers-reduced-motion:reduce) { .fx-portfolio-browser,.fx-portfolio-phone,.fx-portfolio-action > span,.fx-case-play img { transition:none; } }

/* Automation cases: authored scenes, same modal and explicit demonstration caption. */
.fx-portfolio-art-ai { background:#162140; display:flex; align-items:center; }
.fx-portfolio-art-ai > img { display:block; width:100%; height:auto; transition:transform .65s cubic-bezier(.2,.75,.3,1); }
.fx-portfolio-link:hover .fx-portfolio-art-ai > img { transform:scale(1.025); }
.fx-case-presentation-note { max-width:870px; color:#91a9c0; font-size:13px; line-height:1.6; margin:0 0 28px; }
.fx-cases-service .fx-cases-head { margin-bottom:42px; }
@media(prefers-reduced-motion:reduce) { .fx-portfolio-art-ai > img { transition:none; } .fx-portfolio-link:hover .fx-portfolio-art-ai > img { transform:none; } }

/* Review v2: browse the curated set; dedicated portrait films on phones. */
.fx-project-filters { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 34px; }
.fx-project-filters button { padding:11px 17px; border:1px solid #445d78; border-radius:6px; background:transparent; color:#bfd0e2; font:500 14px/1.3 "Golos Text",sans-serif; cursor:pointer; }
.fx-project-filters button[aria-pressed="true"] { background:#91c5e7; color:#0d1326; border-color:#91c5e7; }
.fx-project-filters button:focus-visible { outline:3px solid #ffdb45; outline-offset:4px; }
.fx-portfolio-card[hidden] { display:none!important; }
.fx-case-player-portrait { aspect-ratio:9/16; max-width:560px; margin-inline:auto; }
.fx-case-intro > .fx-case-gallery:first-child { margin-top:0; margin-bottom:28px; }
@media(max-width:700px) { .fx-project-filters { gap:8px; margin-bottom:26px; } .fx-project-filters button { padding:10px 12px; font-size:13px; } .fx-case-player-portrait { max-width:400px; } }

/* v5: curated home and a complete catalogue. */
.fx-project-intro { max-width:760px; margin:0 0 34px; color:#b5c5d9; font-size:18px; line-height:1.6; }
.fx-catalogue-link { margin-top:42px; }
.fx-projects-page { padding-top:150px; min-height:70vh; }
.fx-projects-page .fx-cases-service { padding-top:40px; }
.fx-project-count { color:#aebdd1; margin:0 0 26px; font-size:14px; }
.fx-page .fx-portfolio-copy h3 { line-height:1.14; font-size:clamp(25px,2.2vw,32px); }
@media(max-width:700px) { .fx-projects-page { padding-top:110px; } .fx-project-intro { font-size:16px; } }
.fx-projects-page .fx-cases-head h1 { margin:0; font-family:"Onest","Golos Text",sans-serif; font-weight:550; font-size:clamp(36px,4vw,56px); line-height:1.1; letter-spacing:-.045em; color:var(--fx-white); }