@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {--az: #0000ff; --az2: #1a1aff; --az-text: #aaaaff; --ff: 'Plus Jakarta Sans',sans-serif; --fd: var(--ff); --fi: var(--ff); --fm: var(--ff); --s5: #aaa; --s6: #b8b8b8;}
:root[data-theme="light"] {--az-text: #0000cc; --s5: #505050; --s6: #414141;}
[hidden] {display: none !important;}
:focus-visible {outline: 3px solid var(--az-text); outline-offset: 5px;}
.nav-logo {flex-shrink: 0; display: flex; align-items: center; gap: 10px;}
.nav-logo-text {font-weight: 800; white-space: nowrap; font-family: var(--ff) !important; font-size: 20px !important; letter-spacing: -0.04em !important;}
.nav-logo svg {width: 26px; height: 26px; flex-shrink: 0;}
.nav-cta {font-size: 12px; letter-spacing: 0px; white-space: nowrap; min-height: 44px;}
.ham {min-width: 44px; flex: 0 0 44px; align-items: center; justify-content: center; gap: 5px; width: 44px !important; height: 44px !important;}
.ham span {width: 24px; flex-shrink: 0;}
.drawer,  :root[data-theme="light"] .drawer {overflow-y: auto; overscroll-behavior: contain; background: var(--b); padding: 80px 24px 28px; justify-content: flex-start;}
.drawer > * {flex-shrink: 0;}
.drawer a,  .drawer a.nav-new-page,  .drawer a.nav-sessions {color: var(--w);}
.drawer-close {margin-left: auto; margin-bottom: 12px;}
.drawer-close {align-self: flex-end; min-width: 44px; min-height: 44px; background: transparent; border: 1px solid var(--br3); border-radius: 4px; color: var(--w); font: 600 14px var(--ff); padding: 10px 14px;}
.drawer .drawer-cta {font-size: 16px; line-height: 1.4; letter-spacing: 0px; padding: 14px 18px; background: rgb(0, 0, 255); color: rgb(255, 255, 255);}
.drawer .drawer-social a {font-size: 13px; color: var(--s6); letter-spacing: 0px;}
.h-xl.rv.vis,  .h-mix.rv.vis {transform: none;}
.suite-tab,  .pf-btn,  .filter-btn {font-size: 12px; min-height: 44px; letter-spacing: 0.03em;}
.suite-tab.on,  :root[data-theme="light"] .suite-tab.on {background: rgb(0, 0, 255); color: rgb(255, 255, 255); border-color: rgb(0, 0, 255);}
.footer-tagline,  :root[data-theme="light"] .footer-tagline {color: var(--s6);}
.skip,  .skip-link,  :root[data-theme="light"] .skip {background: rgb(0, 0, 255); color: rgb(255, 255, 255);}
.label,  .stat-lbl,  .port-fs-label,  .port-fs-meta,  .port-cat,  .session-cat,  .svc-modal-eyebrow,  .svc-modal-sec-title,  .case-cat-badge,  .case-client,  .case-metric,  .filter-count {font-size: 12px; letter-spacing: 0.04em;}
.case-metric-highlight,  .case-metric,  .filter-count {color: var(--w); background: var(--s2);}
.case-cat-badge,  .case-year-badge {background: rgb(17, 17, 17); color: rgb(255, 255, 255);}
.case-title,  .casos-hero-title,  .timeline-title {font-weight: 800; letter-spacing: -0.04em;}
.casos-hero-title {font-size: clamp(44px, 7vw, 100px); line-height: 1.06;}
.case-title {font-size: clamp(24px, 3vw, 36px); line-height: 1.15;}
.casos-hero-title em,  .timeline-title em {font-style: normal;}
.case-cta {font-size: 14px; min-height: 44px; color: var(--w);}
.case-desc,  .casos-hero-desc {font-size: 16px; color: var(--s6);}
.case-thumb img {aspect-ratio: 16 / 10; object-fit: cover;}
.case-card .case-footer {gap: 12px; flex-wrap: wrap;}
.case-contact {font-size: 13px; text-decoration: underline; text-underline-offset: 4px;}
.cta-wa {background: rgb(0, 0, 255); color: rgb(255, 255, 255); font-size: 14px; animation: auto ease 0s 1 normal none running none;}
.filter-status {padding: 18px 0px; color: var(--s6); font-size: 13px;}
.mm-proof-grid {display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 24px; margin-top: 32px;}
.mm-proof-grid article {padding: 28px; border: 1px solid var(--br3); border-radius: 8px;}
.mm-proof-grid h3 {font-size: 24px; letter-spacing: -0.03em; margin-bottom: 12px;}
.mm-proof-grid p,  .mm-contact-note p {font-size: 16px; color: var(--s6); line-height: 1.7;}
.mm-contact-note {padding: 32px; border: 1px solid var(--br3); border-radius: 8px;}
.mm-contact-note h3 {font-size: 28px; margin-bottom: 16px; letter-spacing: -0.04em;}
.mm-contact-note ol {padding-left: 22px; margin: 20px 0px; color: var(--s6); line-height: 2;}
.mm-expand {display: flex; margin: 28px auto 0px; min-height: 44px;}
.mm-collapsible:not(.is-expanded) > :nth-child(n+4) {display: none;}
.mm-selection {display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 16px; margin-bottom: 28px;}
.mm-selection article {min-width: 0px;}
.mm-selection a {display: block;}
.mm-selection img {width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px;}
.mm-selection h3 {font-size: 20px; line-height: 1.3; margin: 14px 0px 6px;}
.mm-selection p {font-size: 13px; color: var(--s6);}
.mm-catalog {margin: 32px 0px;}
.mm-catalog > summary {cursor: pointer; font-size: 16px; font-weight: 600; padding: 20px 0px; border-block: 1px solid var(--br3);}
.mm-catalog[open] > summary {margin-bottom: 24px;}
.mm-work-link {display: inline-block; margin: 12px 0px; color: var(--az-text); text-decoration: underline; text-underline-offset: 4px; font-size: 14px;}
.svc-modal-footer {flex-wrap: wrap;}
.svc-modal-footer .btn {white-space: normal;}
.footer {padding: 60px 0px 24px; border-top: 1px solid var(--br3); background: var(--s1);}
.footer-inner {display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 36px;}
.footer-logo {display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 26px; font-weight: 800;}
.footer-logo svg {fill: var(--az-text);}
.footer-tagline {font-size: 14px; max-width: 36ch; line-height: 1.7;}
.footer-links {display: flex; flex-direction: column; gap: 12px; font-size: 13px;}
.footer-col-title {font-size: 12px; font-weight: 700; margin-bottom: 20px; color: var(--s6);}
.footer-bottom {display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; border-top: 1px solid var(--br3); padding-top: 24px; margin-top: 40px;}
.footer-bottom p {font-size: 12px; color: var(--s6);}
.mm-ast {fill: var(--az-text);}
.h30-context {max-width: 530px; font-size: 16px; line-height: 1.7; color: var(--s6); margin: 20px 0px;}
.hero .h30-context,  .hero .hero-eyebrow,  .hero .hero-scroll-hint {color: rgb(204, 204, 204);}
.hero .hero-eyebrow {font-size: 11px; letter-spacing: 0.12em;}
.nav,  :root[data-theme="light"] .nav {background: var(--b) !important;}
.nav .nav-logo-text,  .nav .nav-links a,  .nav .nav-cta,  :root[data-theme="light"] .nav .nav-logo-text,  :root[data-theme="light"] .nav .nav-links a,  :root[data-theme="light"] .nav .nav-cta {color: var(--w) !important;}
.nav .nav-logo svg {fill: rgb(0, 0, 255); color: rgb(0, 0, 255);}
.btn.btn-pri,  :root[data-theme="light"] .btn.btn-pri {background: rgb(0, 0, 255); color: rgb(255, 255, 255); font-size: 13px; letter-spacing: 0.02em;}
.btn.btn-pri:hover {background: rgb(26, 26, 255);}
.pf-n,  .pf-btn.on .pf-n {opacity: 1; font-size: 12px;}
.label,  .timeline-step-num,  .cta-eyebrow,  .cta-title em {color: var(--az-text);}
.timeline-step-num {font-size: 12px;}
.suite-viz-label,  .suite-viz-arrow,  .hero-cta-micro {color: var(--s6); font-size: 12px;}
.port-badge.port-badge--new {background: rgb(17, 17, 17); color: rgb(255, 255, 255);}
.casos-eyebrow,  .casos-hero-title em,  .casos-hero-accent {color: var(--w);}
.casos-eyebrow {font-size: 12px; letter-spacing: 0.1em;}
.casos-hero-accent {font-size: clamp(20px, 3vw, 36px); font-style: normal; color: var(--s6);}
.filter-inner {display: flex; flex-wrap: wrap; gap: 8px;}
.filter-btn {padding: 10px 14px;}
.filter-bar {position: static;}
.port-item--v-xl {color: rgb(255, 255, 255); background: rgb(17, 17, 17) !important;}
.port-item--v-xl * {color: rgb(255, 255, 255) !important;}
.mm-selection .mm-work-link {margin-top: 8px;}
#vm-direct {margin: 12px 0px; background: rgb(17, 17, 17); color: rgb(255, 255, 255); border-color: rgb(136, 136, 136); font-size: 13px;}
.casos-hero {padding: 120px 0px 60px;}
.casos-hero-stats {margin-top: 32px;}
.casos-eyebrow span {color: var(--s6);}
.casos-actions {display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px;}
.drawer a.nav-new-page,  .drawer a.nav-sessions {color: var(--w) !important;}
.cases-grid {grid-template-columns: repeat(3, minmax(0px, 1fr));}
.mm-selection img {height: auto;}
.mm-selection picture {display: block;}
.mm-deferred-image {aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; background: var(--s2);}
.mm-deferred-image picture,  .mm-deferred-image img {width: 100%; height: 100%; object-fit: cover;}
@media (min-width: 701px) and (max-width: 1000px) {
.cases-grid {grid-template-columns: repeat(2, minmax(0px, 1fr));}
}
@media (max-width: 700px) {
.cases-grid {grid-template-columns: 1fr;}
.mm-deferred-image {aspect-ratio: 16 / 9;}
#portafolio .h-xl {font-size: 32px; line-height: 1.1; word-break: normal;}
.casos-hero {padding: 104px 0px 40px;}
.casos-stat-val {font-size: 28px;}
.casos-actions .btn {font-size: 13px; letter-spacing: 0px;}
}
:root {--az-glow: none; --meeting-note: #b8b8b8;}
:root[data-theme="light"] {--meeting-note: #414141;}
body::after {content: none !important;}
body {cursor: auto !important;}
a,  button,  [role="button"],  summary {cursor: pointer !important;}
.rv,  .rv.vis,  .stagger-init,  .stagger-vis,  .hero-name,  .h30-name,  .h30-lead,  .hero-cta-row,  .hero-meta,  .h30-scroll {opacity: 1 !important; transform: none !important; filter: none !important; animation: auto ease 0s 1 normal none running none !important; transition: none !important;}
.port-item.port-hidden {display: none !important;}
*,  ::before,  ::after {backdrop-filter: none !important;}
.hero *,  .hero ::before,  .hero ::after,  .stat-val,  .marquee-track,  .brand-track {animation: auto ease 0s 1 normal none running none !important;}
.hero-cta-row::before,  .hero-name::before,  .hero-name::after,  .svc-card::before,  .svc-card::after,  .port-item::after,  .case-card::before,  .cta-section::before {content: none !important;}
.hero-name,  .hero-name-blue,  .h30-name,  .cta-title em,  .h-xl em,  .h-mix em {background-image: none !important; -webkit-text-fill-color: currentcolor !important; background-clip: border-box !important; font-style: normal !important;}
.h30-name {line-height: 1.05; letter-spacing: -0.055em; color: rgb(255, 255, 255) !important;}
.hero-name-blue {color: rgb(255, 255, 255) !important;}
.h30-bg::after {background: rgba(0, 0, 0, 0.6) !important;}
.h30-plate {mask-image: none !important;}
.h30-plate--l,  .h30-plate--r {opacity: 0.6;}
.hero .h30-context,  .hero .h30-lead {color: rgb(255, 255, 255) !important;}
.h30-context {margin-inline: auto; max-width: 560px;}
.mm-meeting-note {font-size: 14px; line-height: 1.5; color: var(--meeting-note); margin-top: 16px;}
.hero .mm-meeting-note {color: rgb(255, 255, 255);}
.h30-scroll {left: 50%; transform: translateX(-50%) !important;}
.hsh-line {background: rgb(170, 170, 170) !important;}
.hero .btn-sec {background: rgb(17, 17, 17) !important; border-color: rgb(136, 136, 136) !important; color: rgb(255, 255, 255) !important;}
.hero .btn-sec:hover {background: rgb(38, 38, 38) !important;}
.nav .nav-cta,  .nav .nav-cta:hover,  :root[data-theme="light"] .nav .nav-cta {background: rgb(0, 0, 255) !important; color: rgb(255, 255, 255) !important; border-color: rgb(0, 0, 255) !important;}
.btn-pri,  .nav-cta,  .drawer-cta,  .cta-wa {box-shadow: none !important;}
.btn:hover,  .nav-cta:hover,  .drawer-cta:hover,  .cta-wa:hover {opacity: 1 !important; transform: none !important;}
.cta-wa:hover {background: rgb(26, 26, 255) !important; box-shadow: none !important;}
.nav,  .filter-bar,  .drawer,  .svc-modal-box {background: var(--b) !important;}
.case-card,  .svc-card,  .suite-intro-card,  .mm-contact-note,  .mm-proof-grid article {border-color: var(--br3) !important; box-shadow: none !important; background: var(--s1) !important;}
.case-card:hover,  .svc-card:hover,  .suite-intro-card:hover {border-color: var(--s6) !important; box-shadow: none !important; transform: none !important;}
.mm-proof-grid {grid-template-columns: 1fr; gap: 0px;}
.mm-proof-grid article {border-right: 0px; border-bottom: 0px; border-left: 0px; border-image: none; border-top: 1px solid var(--br3); border-radius: 0px; padding: 24px 0px; background: transparent !important;}
.mm-contact-note {border-radius: 0px;}
main em {font-style: normal !important;}
.cta-section > .wrap > .mm-meeting-note,  .cta-section .mm-meeting-note {text-align: center;}
.casos-hero-title,  .casos-hero-accent,  .casos-hero-desc,  .casos-hero-stats {animation: auto ease 0s 1 normal none running none !important; opacity: 1 !important; transform: none !important;}
.nav-sessions,  .nav-sessions::before,  .footer-intl,  .footer-intl::before {animation: auto ease 0s 1 normal none running none !important;}
.suites-split-viz {grid-template-columns: 1fr !important; gap: 0px !important;}
.suite-viz-half {min-height: 0px !important; padding: 24px 0px !important; border-top: 0px !important; border-right: 0px !important; border-left: 0px !important; border-image: none !important; border-bottom: 1px solid var(--br3) !important; background: transparent !important; border-radius: 0px !important; box-shadow: none !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important;}
.suite-viz-lbl {font-size: 18px !important; text-transform: none !important; letter-spacing: 0px !important; color: var(--w) !important;}
.svc-grid {grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; gap: 24px !important;}
.svc-card {border-right: 0px !important; border-bottom: 0px !important; border-left: 0px !important; border-image: none !important; border-top: 1px solid var(--br3) !important; border-radius: 0px !important; background: transparent !important; padding: 24px 0px !important;}
.svc-num {font-size: 13px !important; color: var(--s6) !important;}
.svc-title {font-size: 26px !important; line-height: 1.3 !important;}
.suite-tags-row {display: none;}
.suites-intro h2 {font-size: clamp(32px, 4vw, 56px); line-height: 1.1; max-width: 15ch; margin-bottom: 24px;}
#contacto h2 {font-size: clamp(36px, 5vw, 64px); line-height: 1.1; max-width: 14ch; margin-bottom: 24px;}
.casos-hero-desc {color: var(--s6) !important;}
.casos-hero,  .casos-hero-bg {background: var(--b) !important;}
.casos-hero-bg::before {content: none !important;}
.port-num-bg,  .proceso-num-bg {display: none !important;}
.port-overlay {background: rgba(0, 0, 0, 0.85) !important;}
.session-info,  .film-info {background: rgba(0, 0, 0, 0.85);}
.mm-meeting-note {letter-spacing: 0px !important; text-transform: none !important;}
.mm-no-js {margin-top: 76px; padding: 16px 24px; background: var(--s1); color: var(--w); position: relative; line-height: 1.8;}
@media (max-width: 700px) {
.mm-meeting-note {font-size: 13px;}
.h30-name {font-size: clamp(40px, 13vw, 72px);}
.svc-grid {grid-template-columns: 1fr !important;}
.suite-viz-half {padding: 18px 0px !important;}
}
@media (max-width: 700px) {
.nav-inner {gap: 8px;}
.nav-logo-text {font-size: 18px !important;}
.nav-logo svg {width: 22px; height: 22px;}
.nav-right {margin-left: auto; gap: 4px;}
.drawer > a:not(.drawer-cta) {font-size: clamp(24px, 7vw, 34px);}
.mm-proof-grid,  .mm-selection {grid-template-columns: 1fr;}
.mm-proof-grid {gap: 14px;}
.mm-proof-grid article {padding: 22px;}
.mm-selection {gap: 24px;}
.mm-selection img {aspect-ratio: 16 / 9;}
.h30-context {font-size: 15px; max-width: 32ch;}
.hero-cta-row {flex-wrap: wrap; gap: 12px;}
.hero-cta-row .btn {font-size: 13px; min-height: 48px;}
.port-fs-meta {line-height: 1.6;}
.suite-tab {padding: 12px 10px;}
.mm-contact-note {padding: 24px;}
.cta-inner {gap: 28px;}
.case-client {flex-wrap: wrap;}
.cases-grid {grid-template-columns: 1fr;}
.casos-hero-stats {flex-wrap: wrap;}
.footer-inner {grid-template-columns: 1fr 1fr; gap: 28px;}
.footer-brand {grid-column: 1 / -1;}
}
@media (prefers-reduced-motion: reduce) {
html {scroll-behavior: auto;}
*,  ::before,  ::after {animation: auto ease 0s 1 normal none running none !important; transition: none !important; scroll-behavior: auto !important;}
.rv,  .stagger-init {opacity: 1 !important; transform: none !important;}
.cd,  .cr,  #cd,  #cr,  .cursor-dot,  .cursor-ring {display: none !important;}
body,  a,  button {cursor: auto !important;}
}
.nav .theme-btn,  :root[data-theme="light"] .nav:not(.scrolled) .theme-btn {color: var(--w); border-color: var(--br3); width: 44px; height: 44px; flex: 0 0 44px;}
@media (max-width: 700px) {
html {scroll-padding-top: 80px;}
.wrap {padding-inline: 20px;}
.sec {padding-block: 52px;}
.nav-inner {min-height: 64px;}
.nav-right {padding-left: 0px; border-left: 0px;}
.hero {min-height: 0px; height: auto;}
.h30 {padding: 104px 20px 36px;}
.h30-name {font-size: clamp(36px, 11.8vw, 54px); line-height: 1.08;}
.h30-lead,  .h30-scroll {display: none;}
.h30-context {font-size: 16px; line-height: 1.55; max-width: 35ch; margin: 20px auto 0px;}
.h30 .hero-cta-row {margin-top: 24px; max-width: 350px; gap: 10px;}
.hero-cta-row .btn,  .casos-actions .btn {font-size: 14px; letter-spacing: 0px; min-height: 48px;}
.mm-meeting-note {font-size: 14px; line-height: 1.5; margin-top: 12px;}
.h-xl,  .h-mix,  .suites-intro h2,  #contacto h2 {font-size: clamp(28px, 8vw, 36px); line-height: 1.15; letter-spacing: -0.035em;}
.suites-intro h2 {max-width: 20ch;}
.svc-title {font-size: 24px !important;}
.svc-desc,  .faq-q,  .faq-a,  .body-txt {font-size: 16px; line-height: 1.6;}
.suite-tab {font-size: 13px; letter-spacing: 0px; line-height: 1.35; padding: 12px 8px;}
.suites-tabs {display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr));}
.svc-grid {gap: 12px !important;}
.svc-card {padding-block: 20px !important;}
.mm-selection {gap: 28px;}
.mm-selection h3 {font-size: 21px;}
.mm-work-link,  .case-contact {display: flex; align-items: center; min-height: 44px; font-size: 14px; line-height: 1.5;}
.session-thumb {aspect-ratio: 16 / 9;}
.session-title {font-size: 18px; line-height: 1.3; letter-spacing: 0px;}
.session-cat,  .film-cat,  .session-ep {font-size: 12px; letter-spacing: 0.03em;}
.sessions-grid,  .cine-grid {gap: 20px;}
.casos-hero {padding: 96px 0px 28px;}
.casos-hero-title {font-size: clamp(34px, 10vw, 44px); line-height: 1.08;}
.casos-hero-accent {font-size: 18px; margin-top: 12px;}
.casos-hero-desc {margin-top: 16px; line-height: 1.6;}
.casos-actions {display: grid; grid-template-columns: 1fr; margin-top: 20px; gap: 10px;}
.casos-actions .btn {justify-content: center; width: 100%;}
.casos-hero-stats {flex-direction: row; margin-top: 24px;}
.casos-stat {min-width: 0px; padding: 16px 12px; border-bottom: 0px; border-right: 1px solid var(--br); flex: 1 1 0%;}
.casos-stat-val {font-size: 22px; letter-spacing: -0.02em;}
.casos-stat-lbl {font-size: 12px; letter-spacing: 0px; line-height: 1.4; margin-top: 6px;}
.filter-bar {padding-block: 12px;}
.filter-inner {gap: 8px; overflow: visible;}
.filter-btn {font-size: 13px; letter-spacing: 0px; padding: 10px 12px;}
.cases-section {padding-top: 8px;}
.filter-status {padding: 12px 0px; font-size: 14px;}
.case-body {padding: 20px;}
.case-title {font-size: 24px; line-height: 1.2;}
.case-footer {gap: 4px !important;}
.case-cta {min-height: 48px;}
.cta-contact-val {display: inline-flex; align-items: center; min-height: 44px; font-size: 16px;}
.cta-contact-label {font-size: 12px; letter-spacing: 0.04em;}
.cta-contact-item {margin-bottom: 8px;}
.mm-contact-note {padding: 20px;}
.mm-contact-note h3 {font-size: 25px; line-height: 1.3;}
.footer {padding-top: 40px;}
.footer-links {gap: 0px; font-size: 14px;}
.footer-links a {display: flex; align-items: center; min-height: 44px;}
.footer-col-title {font-size: 13px; margin-bottom: 8px;}
.footer-inner {gap: 24px;}
.drawer,  :root[data-theme="light"] .drawer {padding: 16px 24px max(24px,env(safe-area-inset-bottom)); height: 100dvh; gap: 4px; align-items: stretch;}
.drawer-close {order: -2; position: sticky; top: 0px; background: var(--b); z-index: 1; margin-bottom: 4px;}
.drawer .drawer-cta {order: -1; text-align: center; margin: 0px 0px 12px; padding: 14px 8px;}
.drawer > a:not(.drawer-cta) {font-size: 24px; line-height: 1.4; padding: 6px 0px; min-height: 44px;}
.drawer-social {flex-wrap: wrap; margin-top: 8px;}
.drawer-social a {display: flex; align-items: center; min-height: 44px; font-size: 14px;}
.drawer-div {margin: 8px 0px;}
.svc-modal-inner {max-height: calc(100dvh - 16px); overscroll-behavior: contain; padding-bottom: max(24px,env(safe-area-inset-bottom));}
.svc-modal-close,  .vm-close,  #lightbox-close {min-width: 44px; min-height: 44px; font-size: 16px; color: var(--w); background: var(--b);}
.svc-modal-close {position: sticky; top: 0px; margin-left: auto; display: block; z-index: 3;}
#lightbox-close {top: max(12px,env(safe-area-inset-top)); right: 12px; background: rgb(17, 17, 17); color: rgb(255, 255, 255);}
#lb-img-wrap,  #lightbox-img {max-height: calc(100dvh - 160px); max-width: calc(-24px + 100vw);}
#lightbox-prev,  #lightbox-next {top: auto; bottom: max(16px,env(safe-area-inset-bottom)); transform: none; min-width: 48px; min-height: 48px; background: rgb(17, 17, 17); color: rgb(255, 255, 255); font-size: 14px;}
#lightbox-counter {bottom: max(30px,env(safe-area-inset-bottom)); font-size: 14px; color: rgb(255, 255, 255); letter-spacing: 0px;}
.vm-box {max-height: calc(100dvh - 24px); overflow-y: auto;}
.vm-close {color: rgb(255, 255, 255); background: rgb(17, 17, 17);}
#vm-direct {font-size: 14px; white-space: normal; min-height: 48px; line-height: 1.5;}
}
@media (hover: none) {
.session-play {opacity: 1; transform: none; background: rgb(0, 0, 255);}
.port-play-btn,  .film-play {opacity: 1;}
.session-card:hover,  .case-card:hover {transform: none; box-shadow: none;}
.session-card:hover .session-thumb-img,  .case-card:hover .case-thumb img {transform: none; filter: none;}
.session-waveform {display: none;}
}
@media (max-width: 700px) {
#lightbox-close,  #lightbox-prev,  #lightbox-next,  #lightbox-counter {z-index: 3;}
#lightbox-caption {bottom: 80px; max-width: calc(-40px + 100vw); font-size: 13px; line-height: 1.4; z-index: 2; background: rgb(17, 17, 17); padding: 6px 10px;}
}
.vm-close {position: relative; top: auto; right: auto; margin: 10px 10px 10px auto;}
@media (max-width: 700px) {
.drawer {z-index: 1200;}
.vm-box {padding-bottom: 8px;}
#vm-direct {margin: 12px; width: calc(100% - 24px); justify-content: center;}
.svc-modal-spec-key,  .svc-modal-spec-val {font-size: 12px;}
}
.drawer > a:not(.drawer-cta) {color: var(--w) !important;}