/* MotionMade · premium matching App / Website showcases + readable typography */
html{scroll-padding-top:92px}
body{font-size:16px}
.desktop-nav{font-size:14px}
.eyebrow,.kicker,.eyebrow-right,.card-tiny,.card-live,.project-index,.service-top,.process-number,.form-topline,.work-count,.short-eyebrow,.short-live-meta{font-size:12px}
.hero p,.category-showcase-copy>p,.short-feature p,.section-head p,.contact-copy p{font-size:16px;line-height:1.85}
.button,.short-button,.text-link{font-size:14px}
.service-desc p,.process-grid p,.project-meta p,.footer-main p,.short-work-header p{font-size:15px}
.service-desc h3{font-size:22px}
#brief-form label{font-size:13px}
#brief-form input,#brief-form textarea,#brief-form select{font-size:15px}
.contact-card small{font-size:12px}
.short-video-card h3,.short-feature .short-home-gallery .short-video-card h3{font-size:15px;white-space:normal}
.short-video-card>p,.short-feature .short-home-gallery .short-video-card>p{font-size:12px}
.footer-main nav{font-size:14px}
/* Matched film galleries, original media, no fake device mockups */
.category-showcase{padding:91px 0 96px;border-top:1px solid #e5e8f4;position:relative;overflow:hidden;background:radial-gradient(ellipse 80% 110% at 93% 12%,#e4e1ff95,transparent 72%),#f8faff}
.category-showcase:nth-of-type(even){background:radial-gradient(ellipse 80% 110% at 92% 14%,#dbeaff9c,transparent 73%),#f7faff}
.category-showcase-layout{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;gap:clamp(32px,4.5vw,82px)}
.category-showcase-copy{max-width:650px}
.category-showcase h2{font:800 clamp(43px,4.5vw,70px)/1.12 "Manrope",sans-serif;letter-spacing:-.075em;color:#192440;margin:27px 0}
.category-showcase h2 em{font-style:normal;color:#806ccf}
.category-showcase-copy>p{color:#6e7b97;max-width:490px;margin-bottom:28px}
.category-showcase .short-live-meta{font-size:11px;margin-bottom:25px}
.category-showcase-glass{min-width:0;border:1px solid #ffffffdd;background:linear-gradient(130deg,#ffffffa1,#f7f6ff9a);backdrop-filter:blur(18px);border-radius:24px;padding:19px;box-shadow:0 24px 60px #4b57951a}
.category-showcase-top{display:flex;justify-content:space-between;align-items:center;gap:14px;color:#827aaa;font:500 10px "DM Mono",monospace;letter-spacing:.11em;margin:1px 3px 18px}
.category-showcase-top a{text-decoration:none;color:#665bc0}
.category-film-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;align-items:start}
.category-film-grid>.cat-video-card:first-child{grid-column:1/-1}
.cat-video-card{display:block;min-width:0;background:transparent;border:0;padding:0;text-align:left;cursor:pointer;color:#263454}
.cat-video-media{display:block;position:relative;border-radius:13px;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(130deg,#dfe4ff,#8f90c8);box-shadow:0 8px 19px #4d548f25}
.cat-video-media img{width:100%;height:100%;object-fit:cover}
.cat-video-name{font:750 13px/1.45 "Manrope",sans-serif;display:block;margin-top:10px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.category-film-grid>.cat-video-card:first-child .cat-video-name{font-size:16px}
/* lazy iframe sits on the visual, underlying clickable surface remains accessible */
.has-loop-preview{isolation:isolate}
.loop-preview-frame{position:absolute;inset:0;width:100%;height:100%;display:block;border:0;pointer-events:none;z-index:2;background:transparent}
.short-poster .loop-preview-frame,.featured-showreel-media .loop-preview-frame{z-index:3}
.mm-project>a{position:relative;display:block;overflow:hidden}
.mm-project>a .loop-preview-frame{z-index:3}
.short-play,.thumb-play,.mm-play,.hero-play{display:none!important}
.hero-watch-sound{display:none!important}
.hero-reel-player .hero-reel-ambient{pointer-events:none}
/* exactly one brand mark visible: animation OR approved static logo */
.site-header .brand.is-logo-playing .brand-logo-image{visibility:hidden!important;opacity:0!important}
.site-header .brand .brand-video-shell:not([hidden]){z-index:2;display:block}
.site-header .brand .brand-video-shell[hidden]{display:none!important}
.site-header .brand:not(.is-logo-playing) .brand-logo-image{visibility:visible!important;opacity:1!important}
/* service pages readability */
.mm-seo-page,.short-page{font-size:16px}
.mm-seo-page .mm-wrap p,.mm-seo-page .mm-section-lead,.mm-project p{font-size:15px;line-height:1.8}
.mm-seo-page .mm-nav a,.mm-seo-page .mm-watch,.mm-seo-page .mm-footer a{font-size:14px}
.mm-seo-page .mm-tag,.mm-seo-page .mm-eyebrow{font-size:12px}
.mm-project h3{font-size:21px}
/* featured showreel above individual short-form videos */
.featured-showreel{padding-top:65px;padding-bottom:60px}
.featured-showreel-eyebrow{border-top:1px solid #e2e7f2;padding-top:21px;display:flex;justify-content:space-between;gap:20px;align-items:center}
.featured-showreel-eyebrow>span:last-child,.showreel-index{font:500 11px "DM Mono",monospace;letter-spacing:.1em;color:#8c8cad}
.featured-showreel-body{margin-top:28px;display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:35px;align-items:center;border:1px solid #fff;background:linear-gradient(115deg,#f5f6ff,#e7e8ff);border-radius:24px;padding:clamp(20px,3vw,43px);box-shadow:0 23px 56px #5557a018}
.featured-showreel-copy h2{font:800 clamp(37px,3.6vw,60px)/1.13 "Manrope",sans-serif;color:#1b2747;letter-spacing:-.075em;margin:25px 0}
.featured-showreel-copy h2 em{font-style:normal;color:#826bd9}
.featured-showreel-copy p{font-size:15px;line-height:1.83;color:#6b7894;max-width:430px}
.featured-showreel-copy .showreel-hint{font:500 11px "DM Mono",monospace;color:#8e85b4;margin:17px 0 26px;line-height:1.8}
.featured-showreel-video{border:0;background:transparent;min-width:0;padding:0;cursor:pointer}
.featured-showreel-media{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:17px;isolation:isolate;box-shadow:0 20px 38px #282b5952;background:#242748}
.featured-showreel-media img{width:100%;height:100%;object-fit:cover}
.featured-reel-name{position:absolute;left:16px;bottom:16px;z-index:5;background:#171e36b9;backdrop-filter:blur(10px);color:#fff;border:1px solid #ffffff66;border-radius:8px;padding:11px 14px;font:500 10px "DM Mono",monospace;letter-spacing:.08em;pointer-events:none}
@media(max-width:1060px){.category-showcase-layout{grid-template-columns:.82fr 1.18fr;gap:25px}.category-showcase-glass{padding:13px}.category-showcase h2{font-size:clamp(39px,4.4vw,56px)}}
@media(max-width:860px){.featured-showreel-body{grid-template-columns:1fr}.featured-showreel-copy h2{font-size:45px}.featured-showreel{padding-top:48px}}
@media(min-width:671px) and (max-width:900px){.site-header .desktop-nav,.site-header .nav-cta{display:none!important}.site-header .menu-toggle{display:flex!important}.site-header .mobile-nav:not([hidden]){display:flex;flex-direction:column;gap:0;border-top:1px solid #e6e8f3;padding:10px 33px 18px;background:#ffffffed}.site-header .mobile-nav a{padding:13px 14px;font-weight:700;font-size:14px;border-bottom:1px solid #f0f1f8}}
@media(max-width:760px){.category-showcase-layout{grid-template-columns:1fr;gap:37px}.category-showcase{padding:73px 0}.category-showcase-glass{max-width:650px;width:100%}.category-showcase h2{font-size:clamp(40px,10vw,56px)}}
@media(max-width:430px){.category-showcase-glass{padding:12px;border-radius:16px}.category-film-grid{gap:11px}.cat-video-name{font-size:12px}.category-film-grid>.cat-video-card:first-child .cat-video-name{font-size:14px}.category-showcase .short-live-meta,.short-eyebrow{font-size:10px}.hero p,.category-showcase-copy>p,.short-feature p{font-size:15px}.featured-showreel-body{padding:17px;border-radius:15px}.featured-showreel-copy h2{font-size:39px}.featured-reel-name{font-size:9px;left:10px;bottom:10px}}


/* The single 2D film uses the same featured glass frame as App/Web with a wider image. */
.animation-showcase{background:radial-gradient(ellipse 72% 92% at 88% 30%,#e8ddffb8,transparent 76%),#faf9ff}
.animation-showcase .category-film-grid.single-film{display:block}
.animation-showcase .category-film-grid.single-film .cat-video-card{display:block;width:100%}
.animation-showcase .category-film-grid.single-film .cat-video-name{font-size:16px;white-space:normal}
.animation-showcase .cat-video-media{border-radius:16px}

/* Playback overlay appears only after actual YouTube PLAYING event. */
.has-loop-preview{position:relative}
.has-loop-preview .loop-preview-frame{opacity:0;pointer-events:none;z-index:3;transition:opacity .2s ease}
.has-loop-preview.video-ready .loop-preview-frame{opacity:1}
.has-loop-preview.video-unavailable .loop-preview-frame{display:none}
.has-loop-preview.video-ready img{opacity:0}
.short-poster img,.cat-video-media img{image-rendering:auto;transform:none!important}
.short-poster .short-play,.short-video-card .short-play{display:none!important}