/* ===== Mobile responsive overrides for Studio Korai ===== Target: viewports up to 810px wide. Approach: CSS for layout-level fixes + a runtime JS patcher (in /mobile.js) for the deep "width:1px / flex-flow:row" Framer chain. */ @media (max-width: 810px) { html, body { overflow-x: hidden !important; width: 100% !important; max-width: 100vw !important; } body, #main { width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; } /* Universal: clamp anything that overflows viewport width */ #main [class*="framer-"] { max-width: 100% !important; } /* The runtime patcher tags treated elements with [data-mfix]; we use that to scope width/flex overrides without breaking unrelated CSS. */ [data-mfix="w1"] { width: 100% !important; max-width: 100% !important; flex: none !important; flex-basis: auto !important; } [data-mfix="row"] { flex-direction: column !important; flex-flow: column !important; align-items: stretch !important; flex-wrap: nowrap !important; gap: 12px !important; } /* Don't blanket-stretch children of converted row containers — that turns 10px decorative dots (with aspect-ratio:1) into giant orange squares. Instead, only stretch children that would otherwise be cramped — handled by the `data-mfix="narrowtext"` tag set on text-bearing wide-enough kids. */ [data-mfix="narrowtext"] { width: 100% !important; max-width: 100% !important; height: auto !important; flex: none !important; padding-left: 16px !important; padding-right: 16px !important; box-sizing: border-box !important; } /* Tame ridiculously large display fonts at mobile so they don't break per-char. Framer sets the font via CSS variable --framer-font-size, so we match both direct font-size and the CSS variable form. */ #main [style*="--framer-font-size:200px"], #main [style*="--framer-font-size:170px"], #main [style*="--framer-font-size:140px"], #main [style*="--framer-font-size:120px"], #main [style*="--framer-font-size:100px"], #main [style*="--framer-font-size:95px"], #main [style*="--framer-font-size:85px"], #main [style*="--framer-font-size:80px"], #main [style*="--framer-font-size:75px"], #main [style*="font-size: 200px"], #main [style*="font-size: 170px"], #main [style*="font-size: 100px"], #main [style*="font-size: 95px"], #main [style*="font-size: 85px"], #main [style*="font-size: 80px"] { --framer-font-size: clamp(36px, 11vw, 52px) !important; font-size: clamp(36px, 11vw, 52px) !important; --framer-line-height: 1.05 !important; line-height: 1.05 !important; --framer-letter-spacing: -0.02em !important; letter-spacing: -0.02em !important; } #main [style*="--framer-font-size:72px"], #main [style*="--framer-font-size:64px"], #main [style*="--framer-font-size:62px"], #main [style*="--framer-font-size:60px"], #main [style*="--framer-font-size:56px"], #main [style*="--framer-font-size:54px"], #main [style*="--framer-font-size:52px"], #main [style*="--framer-font-size:51px"], #main [style*="--framer-font-size:48px"], #main [style*="--framer-font-size:44px"], #main [style*="--framer-font-size:40px"], #main [style*="font-size: 72px"], #main [style*="font-size: 64px"], #main [style*="font-size: 60px"], #main [style*="font-size: 56px"], #main [style*="font-size: 48px"], #main [style*="font-size: 44px"], #main [style*="font-size: 40px"] { --framer-font-size: clamp(26px, 7.5vw, 36px) !important; font-size: clamp(26px, 7.5vw, 36px) !important; --framer-line-height: 1.1 !important; line-height: 1.15 !important; } #main [style*="--framer-font-size:36px"], #main [style*="--framer-font-size:32px"], #main [style*="--framer-font-size:28px"], #main [style*="font-size: 36px"], #main [style*="font-size: 32px"] { --framer-font-size: clamp(20px, 5.5vw, 26px) !important; font-size: clamp(20px, 5.5vw, 26px) !important; line-height: 1.2 !important; } /* Letter-spacing on hero fonts often needs taming */ #main [style*="--framer-letter-spacing:-7px"], #main [style*="--framer-letter-spacing:-6px"], #main [style*="--framer-letter-spacing:-5px"], #main [style*="--framer-letter-spacing:-4px"] { --framer-letter-spacing: -0.02em !important; letter-spacing: -0.02em !important; } /* Line-height presets that are too tight at small sizes */ #main [style*="--framer-line-height:140px"], #main [style*="--framer-line-height:160px"], #main [style*="--framer-line-height:200px"] { --framer-line-height: 1.05 !important; line-height: 1.05 !important; } /* Anything explicitly sized 1200/1320/1920/etc → fluid */ #main [style*="width: 1920px"], #main [style*="width: 1320px"], #main [style*="width: 1200px"], #main [style*="width: 1163px"], #main [style*="width: 627px"], #main [style*="width: 390px"], #main [style*="width: 330px"] { width: 100% !important; max-width: 100% !important; } /* ========================================================= ABOUT PAGE (.framer-zbbNX wrapper) ========================================================= */ .framer-zbbNX { width: 100% !important; min-width: 0 !important; } /* ===== About page nav bar — same translucent floating pill ===== */ .framer-zbbNX .framer-ws4y3f { position: fixed !important; top: 12px !important; left: 12px !important; right: 12px !important; width: auto !important; z-index: 1000 !important; color: #fff !important; min-height: 48px !important; height: 48px !important; padding: 6px 10px !important; box-sizing: border-box !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; overflow: visible !important; background: rgba(20, 20, 20, 0.4) !important; backdrop-filter: blur(14px) saturate(140%) !important; -webkit-backdrop-filter: blur(14px) saturate(140%) !important; border-radius: 999px !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.25) !important; } /* Reset all descendants inside the about nav */ .framer-zbbNX .framer-ws4y3f * { position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; color: #fff !important; } /* Pass-through wrappers */ .framer-zbbNX .framer-ws4y3f .framer-uotdc9-container, .framer-zbbNX .framer-ws4y3f .framer-r32eww, .framer-zbbNX .framer-ws4y3f .framer-tjxbui, .framer-zbbNX .framer-ws4y3f .framer-sdvw3n, .framer-zbbNX .framer-ws4y3f .framer-gsi776 { display: contents !important; } /* Brand logo (left) */ .framer-zbbNX .framer-ws4y3f .framer-1h2svk0 { flex: 0 0 auto !important; width: 100px !important; height: 40px !important; margin: 0 !important; order: 1 !important; position: relative !important; overflow: visible !important; } .framer-zbbNX .framer-ws4y3f .framer-1h2svk0 > div { position: absolute !important; inset: 0 !important; } .framer-zbbNX .framer-ws4y3f .framer-1h2svk0 img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; display: block !important; } /* TIAGO KURUAYA wordmark on the right of the about-page pill */ .framer-zbbNX .framer-ws4y3f .framer-kzcxx2 { display: flex !important; align-items: center !important; justify-content: flex-end !important; flex: 0 0 auto !important; width: auto !important; height: auto !important; margin: 0 0 0 auto !important; order: 4 !important; font-size: 8px !important; --framer-font-size: 8px !important; --framer-letter-spacing: 0.04em !important; letter-spacing: 0.04em !important; --framer-line-height: 1 !important; line-height: 1 !important; color: #fff !important; white-space: nowrap !important; text-align: right !important; --framer-text-alignment: right !important; padding: 0 !important; overflow: visible !important; } .framer-zbbNX .framer-ws4y3f .framer-kzcxx2 * { font-size: 8px !important; --framer-font-size: 8px !important; line-height: 1 !important; --framer-line-height: 1 !important; color: #fff !important; white-space: nowrap !important; } /* Hide decorative rectangles */ .framer-zbbNX .framer-ws4y3f .framer-cexriu, .framer-zbbNX .framer-ws4y3f .framer-9j2xlv, .framer-zbbNX .framer-ws4y3f [data-framer-name="Rectangle 2"], .framer-zbbNX .framer-ws4y3f [data-framer-name="Rectangle 3"] { display: none !important; } /* HOME + CONTATO grouped as a single darker pill */ .framer-zbbNX .framer-ws4y3f .framer-13ya5f, .framer-zbbNX .framer-ws4y3f .framer-1fjjf68, .framer-zbbNX .framer-ws4y3f [data-framer-name="Sobre"], .framer-zbbNX .framer-ws4y3f [data-framer-name="contato"] { flex: 0 0 auto !important; width: auto !important; height: 30px !important; font-size: 11px !important; --framer-font-size: 11px !important; --framer-letter-spacing: 0.04em !important; letter-spacing: 0.04em !important; font-weight: 500 !important; --framer-font-weight: 500 !important; padding: 0 10px !important; margin: 0 !important; white-space: nowrap !important; color: #fff !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: rgba(0,0,0,0.55) !important; border-radius: 999px !important; } .framer-zbbNX .framer-ws4y3f [data-framer-name="Sobre"] { order: 2 !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; padding-right: 7px !important; margin-left: auto !important; } /* Inner

/ for about nav links: shrink-to-fit + inherit font */ .framer-zbbNX .framer-ws4y3f [data-framer-name="Sobre"] p, .framer-zbbNX .framer-ws4y3f [data-framer-name="contato"] p, .framer-zbbNX .framer-ws4y3f [data-framer-name="Sobre"] a, .framer-zbbNX .framer-ws4y3f [data-framer-name="contato"] a { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; line-height: 1 !important; --framer-line-height: 1 !important; font-size: 11px !important; --framer-font-size: 11px !important; background: transparent !important; color: #fff !important; } .framer-zbbNX .framer-ws4y3f [data-framer-name="contato"] { order: 3 !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; padding-left: 7px !important; margin-left: -8px !important; } /* About page needs top-padding too so first content isn't covered by floating nav */ .framer-zbbNX .framer-1xxszis { padding-top: 84px !important; } .framer-zbbNX .framer-1xxszis { padding: 24px 0 0 !important; } .framer-zbbNX .framer-juunzp, .framer-zbbNX .framer-1xk9e02, .framer-zbbNX .framer-tx6s4s { padding: 48px 16px !important; gap: 24px !important; } .framer-zbbNX .framer-grkce9 { padding: 56px 16px !important; gap: 32px !important; } .framer-zbbNX .framer-790bjc { width: 100% !important; max-width: 100% !important; padding: 56px 16px 24px !important; align-items: stretch !important; } .framer-zbbNX img, .framer-zbbNX picture { max-width: 100% !important; height: auto !important; } /* ========================================================= INDEX / SPLASH (.framer-fO2Fp wrapper) ========================================================= */ .framer-fO2Fp.framer-1vyqjj2 { width: 100% !important; max-width: 100vw !important; margin-left: auto !important; margin-right: auto !important; } .framer-fO2Fp .framer-zfkdwz, .framer-fO2Fp .framer-1ihl7l8 { width: 100% !important; max-width: 100vw !important; } /* ========================================================= HOME PAGE (.framer-2KP66 wrapper) ========================================================= */ .framer-2KP66.framer-1uk00hc { width: 100% !important; max-width: 100vw !important; height: auto !important; min-height: 100vh !important; position: relative !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; overflow: hidden !important; padding: 0 !important; gap: 0 !important; } .framer-2KP66.framer-1uk00hc > * { position: relative !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; transform: none !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; aspect-ratio: auto !important; margin: 0 !important; flex-shrink: 0 !important; border-radius: 0 !important; } /* Hide purely decorative panels (solid-color rectangles + spacers). NOTE: kvmmm5 / uzwjua actually hold nav content on home page — DON'T hide them. */ .framer-2KP66 .framer-9jgdso, /* Rectangle 3 — full-width black panel (not in nav) */ .framer-2KP66 .framer-1inwqh1, /* Rectangle 18 (decorative) */ .framer-2KP66 .framer-g9p57g, /* Rectangle 2 (decorative) */ .framer-2KP66 .framer-ta7735, /* spacer */ .framer-2KP66 .framer-iiaakp, /* black rounded strip (empty) */ .framer-2KP66 .framer-cfuyid { /* huge black background panel */ display: none !important; } /* === Reorder home sections to match desktop scroll order === Reference: desktop top values, sorted ascending. Default order:0 would place unspecified children before the nav, so explicit orders are assigned to every section we care about. */ .framer-2KP66.framer-1uk00hc .framer-8w49wl { order: 1 !important; } /* Top nav */ .framer-2KP66 .framer-9czv6x-container { order: 5 !important; } /* Hero scroll-video */ .framer-2KP66 .framer-q2ygkj { order: 6 !important; } /* Hero black panel: "Trabalho no encontro" author intro (contains zsK1Hq video) */ .framer-2KP66 .framer-17twc6k-container { order: 7 !important; } /* Project preview carousel */ .framer-2KP66 .framer-henscn { order: 10 !important; } /* "Cor e luz" hero image (Frame 5) */ .framer-2KP66 .framer-czt1vo { order: 11 !important; } /* "O tratamento de cor" text overlay */ .framer-2KP66 .framer-bm2wux { order: 14 !important; } /* "Criando imagens que respiram" — relocated via mobile.js to follow czt1vo / fd1jxq */ .framer-2KP66 .framer-fd1jxq { order: 12 !important; } /* Frame 4 with color treatment text */ .framer-2KP66 .framer-slvgb7 { order: 15 !important; } /* Slides dark panel */ .framer-2KP66 .framer-l9x7o { order: 16 !important; } /* "Trabalhando design sonoro" text */ .framer-2KP66 .framer-1uz8rsx { order: 20 !important; } /* Produção Musical player */ .framer-2KP66 .framer-md5q8n { order: 21 !important; } /* Sound design content */ .framer-2KP66 .framer-evft5e { order: 25 !important; } /* Forest video */ .framer-2KP66 .framer-qy68q9 { order: 26 !important; } /* fita 1 (tape image) */ .framer-2KP66 .framer-1ucf23g { order: 27 !important; } /* "Onde a imagem aprende a existir" */ .framer-2KP66 .framer-hlrtsl-container { order: 28 !important; } .framer-2KP66 .framer-ocv3wk-container { order: 29 !important; } .framer-2KP66 .framer-123w4e1 { order: 30 !important; } /* Project gallery image 1 */ .framer-2KP66 .framer-kb9sky { order: 31 !important; } .framer-2KP66 .framer-17jqawx { order: 32 !important; } /* Project gallery image 2 */ .framer-2KP66 .framer-f6n5mm { order: 33 !important; } /* Project gallery image 3 */ .framer-2KP66 .framer-qi9uew { order: 34 !important; } /* Project gallery image 4 */ .framer-2KP66 .framer-l9vsvm { order: 35 !important; } /* Thin divider */ .framer-2KP66 .framer-z1eq8c { order: 40 !important; } /* "Frame n' Motion" credit link */ .framer-2KP66 .framer-1tr4czx { order: 41 !important; } .framer-2KP66 .framer-1f523ji { order: 50 !important; } .framer-2KP66 .framer-1w6pzhc { order: 51 !important; } /* Nossa Saúde logo */ .framer-2KP66 .framer-lsw87w { order: 52 !important; } /* Logos row */ .framer-2KP66 .framer-6c1sg7 { order: 55 !important; } /* "Audiovisual. Design. Movimento." */ .framer-2KP66 .framer-s8ahrb { order: 60 !important; } /* Main footer (Links + Social + ©) */ /* Descendant positioning reset */ .framer-2KP66.framer-1uk00hc [class*="framer-"] { position: relative !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; transform: none !important; aspect-ratio: auto !important; } .framer-2KP66 img, .framer-2KP66 picture, .framer-2KP66 video { max-width: 100% !important; height: auto !important; object-fit: contain !important; } /* Section padding */ .framer-2KP66 .framer-henscn, .framer-2KP66 .framer-fd1jxq, .framer-2KP66 .framer-qy68q9, .framer-2KP66 .framer-123w4e1, .framer-2KP66 .framer-17jqawx, .framer-2KP66 .framer-f6n5mm, .framer-2KP66 .framer-qi9uew, .framer-2KP66 .framer-kb9sky, .framer-2KP66 .framer-1uz8rsx, .framer-2KP66 .framer-evft5e, .framer-2KP66 .framer-1ucf23g, .framer-2KP66 .framer-1tr4czx, .framer-2KP66 .framer-l9x7o, .framer-2KP66 .framer-md5q8n, .framer-2KP66 .framer-cfuyid, .framer-2KP66 .framer-q2ygkj, .framer-2KP66 .framer-jgyiv2, .framer-2KP66 .framer-192ubzp, .framer-2KP66 .framer-1azducu, .framer-2KP66 .framer-anpimp, .framer-2KP66 .framer-1dvoy03, .framer-2KP66 .framer-1sd2kj9, .framer-2KP66 .framer-ahcsgt { min-height: 0 !important; padding: 16px !important; box-sizing: border-box !important; white-space: normal !important; } .framer-2KP66 .framer-slvgb7 { border-radius: 0 !important; min-height: 55vh !important; padding: 24px 16px !important; } /* "Criando imagens que respiram." — shrink from 75px down on mobile */ .framer-2KP66 .framer-anpimp, .framer-2KP66 .framer-anpimp p, .framer-2KP66 .framer-anpimp p span, .framer-2KP66 .framer-anpimp .framer-text { font-size: 28px !important; --framer-font-size: 28px !important; line-height: 1.15em !important; --framer-line-height: 1.15em !important; color: #fff !important; --framer-text-color: #fff !important; } /* Black-background panel for the relocated "Criando imagens que respiram." */ .framer-2KP66 .framer-bm2wux { background: #000 !important; width: 100% !important; padding: 48px 24px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; } /* ===== Mobile nav bar (home page) — translucent floating pill ===== Matches the desktop design: a pill-shaped container with semi-transparent dark background + backdrop blur, fixed at the top so the hero video plays behind it. An inner darker pill groups Sobre + contato. Layout uses `justify-content: flex-start` plus two `margin-left: auto` items to produce [logo] ... [center pill] ... [TIAGO wordmark]. */ .framer-2KP66.framer-1uk00hc .framer-8w49wl { position: fixed !important; top: 12px !important; left: 12px !important; right: 12px !important; width: auto !important; z-index: 1000 !important; color: #fff !important; min-height: 48px !important; height: 48px !important; padding: 6px 10px !important; box-sizing: border-box !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; overflow: visible !important; background: rgba(20, 20, 20, 0.4) !important; backdrop-filter: blur(14px) saturate(140%) !important; -webkit-backdrop-filter: blur(14px) saturate(140%) !important; border-radius: 999px !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.25) !important; } /* All descendants: no absolute positioning, white text */ .framer-2KP66.framer-1uk00hc .framer-8w49wl * { position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; color: #fff !important; } /* Intermediate wrappers become pass-throughs so children flatten into the flex row */ .framer-2KP66.framer-1uk00hc .framer-8w49wl .framer-kvmmm5, .framer-2KP66.framer-1uk00hc .framer-8w49wl .framer-1sjq3vs, .framer-2KP66.framer-1uk00hc .framer-8w49wl .framer-7zs0au { display: contents !important; } /* Brand logo (left). The image inside is rendered via an absolutely-positioned , so we have to also constrain the inner wrappers and use object-fit:contain so the logo doesn't get cropped or stretched. */ .framer-2KP66.framer-1uk00hc .framer-8w49wl .framer-1m78v2r { flex: 0 0 auto !important; width: 100px !important; height: 40px !important; margin: 0 !important; order: 1 !important; position: relative !important; overflow: visible !important; } .framer-2KP66.framer-1uk00hc .framer-8w49wl .framer-1m78v2r > div { position: absolute !important; inset: 0 !important; } .framer-2KP66.framer-1uk00hc .framer-8w49wl .framer-1m78v2r img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; display: block !important; } /* "TIAGO KURUAYA" wordmark on the right of the pill */ .framer-2KP66.framer-1uk00hc .framer-8w49wl .framer-nrprti { display: flex !important; align-items: center !important; justify-content: flex-end !important; flex: 0 0 auto !important; width: auto !important; height: auto !important; margin: 0 0 0 auto !important; /* pushes itself + everything after to the right edge */ order: 4 !important; font-size: 8px !important; --framer-font-size: 8px !important; --framer-letter-spacing: 0.04em !important; letter-spacing: 0.04em !important; --framer-line-height: 1 !important; line-height: 1 !important; color: #fff !important; white-space: nowrap !important; text-align: right !important; --framer-text-alignment: right !important; padding: 0 !important; overflow: visible !important; } .framer-2KP66.framer-1uk00hc .framer-8w49wl .framer-nrprti * { font-size: 8px !important; --framer-font-size: 8px !important; line-height: 1 !important; --framer-line-height: 1 !important; color: #fff !important; white-space: nowrap !important; } /* Sobre + contato — grouped together inside their own darker pill. We give each link a half-radius and a hairline gap to read as one pill. */ .framer-2KP66.framer-1uk00hc .framer-8w49wl .framer-dhyoxf, .framer-2KP66.framer-1uk00hc .framer-8w49wl .framer-8m8rco { flex: 0 0 auto !important; width: auto !important; height: 30px !important; font-size: 11px !important; --framer-font-size: 11px !important; --framer-letter-spacing: 0.04em !important; letter-spacing: 0.04em !important; font-weight: 500 !important; --framer-font-weight: 500 !important; padding: 0 10px !important; margin: 0 !important; white-space: nowrap !important; cursor: pointer !important; color: #fff !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: rgba(0,0,0,0.55) !important; border-radius: 999px !important; } /* Inner

+ elements inside the nav links: shrink-to-fit + inherit font size */ .framer-2KP66.framer-1uk00hc .framer-8w49wl .framer-dhyoxf p, .framer-2KP66.framer-1uk00hc .framer-8w49wl .framer-8m8rco p, .framer-2KP66.framer-1uk00hc .framer-8w49wl .framer-dhyoxf a, .framer-2KP66.framer-1uk00hc .framer-8w49wl .framer-8m8rco a { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; line-height: 1 !important; --framer-line-height: 1 !important; font-size: 11px !important; --framer-font-size: 11px !important; background: transparent !important; color: #fff !important; } .framer-2KP66.framer-1uk00hc .framer-8w49wl .framer-dhyoxf { order: 2 !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; padding-right: 7px !important; /* margin-left:auto absorbs slack between the logo and this pill, then TIAGO's own margin-left:auto absorbs slack on the right — result is [logo] ... [pill in center] ... [TIAGO] */ margin-left: auto !important; } .framer-2KP66.framer-1uk00hc .framer-8w49wl .framer-8m8rco { order: 3 !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; padding-left: 7px !important; margin-left: -8px !important; } /* Hide decorative background rectangles inside the nav */ .framer-2KP66.framer-1uk00hc .framer-8w49wl .framer-uzwjua, .framer-2KP66.framer-1uk00hc .framer-8w49wl .framer-g9p57g, .framer-2KP66.framer-1uk00hc .framer-8w49wl .framer-1inwqh1 { display: none !important; } /* Because the home nav is fixed-positioned, the page wrapper needs top space so the first content (hero video) isn't covered by the floating pill. */ .framer-2KP66.framer-1uk00hc { padding-top: 72px !important; } /* The hero video container should peek out from behind the nav. Give it a min-height so it's a real visible area, not a tiny stub. */ .framer-2KP66 .framer-9czv6x-container { min-height: 40vh !important; height: auto !important; margin-top: -72px !important; /* video extends up under the nav pill */ padding-top: 0 !important; position: relative !important; mix-blend-mode: normal !important; } /* Make sure the hero video autoplays + loops on mobile (it's scroll-controlled on desktop) */ .framer-2KP66 .framer-9czv6x-container video { width: 100% !important; height: 100% !important; min-height: 40vh !important; object-fit: cover !important; display: block !important; } /* Footer rows */ .framer-2KP66 .framer-s8ahrb, .framer-2KP66 .framer-l9vsvm { padding: 32px 16px !important; gap: 24px !important; } }