/* Final refinements: contact, accessibility, theme clarity and service scenes. */

/* Shared controls remain readable in both themes. */
.icon-control,
.menu-toggle,
.channel-icon,
.footer-icon-link,
.footer-mini-link,
.close-whatsapp,
.accessibility-toggle,
.accessibility-close {
  color: var(--text);
}

.icon-control svg,
.menu-toggle svg,
.channel-icon svg,
.footer-icon-link svg,
.footer-mini-link svg,
.close-whatsapp svg,
.accessibility-toggle svg,
.accessibility-close svg,
.accessibility-controls svg {
  stroke: currentColor;
}

html[data-theme="light"] .icon-control,
html[data-theme="light"] .menu-toggle {
  color: #101827;
  border-color: rgba(12, 24, 45, .16);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 10px 28px rgba(35, 58, 91, .09);
}

html[data-theme="dark"] .icon-control,
html[data-theme="dark"] .menu-toggle {
  color: #f7f9fc;
  border-color: rgba(255, 255, 255, .16);
  background: rgba(18, 23, 32, .88);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .24);
}

html[data-theme="light"] .footer-icon-link,
html[data-theme="light"] .footer-mini-link,
html[data-theme="light"] .contact-channel {
  color: #39465c;
}

html[data-theme="dark"] .footer-icon-link,
html[data-theme="dark"] .footer-mini-link,
html[data-theme="dark"] .contact-channel {
  color: #cbd2de;
}

html[data-theme="light"] .channel-icon {
  color: #0f1a2d;
  border-color: rgba(12, 24, 45, .14);
  background: rgba(255, 255, 255, .92);
}

html[data-theme="dark"] .channel-icon {
  color: #f5f7fb;
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
}

.contact-channel .channel-copy b {
  color: var(--text);
}

/* The mobile menu always occupies its own viewport and never sits behind the hero. */
.mobile-menu {
  position: fixed !important;
  inset: 0 !important;
  width: 100%;
  height: 100dvh;
  min-height: 100svh;
  max-height: none;
  z-index: 3900;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--header) + 34px) max(24px, 6vw) max(34px, env(safe-area-inset-bottom));
}

.mobile-menu nav {
  width: min(100%, 720px);
  margin: auto;
}

.mobile-menu.is-open a:nth-child(7) {
  transition-delay: .50s;
}

body.menu-open {
  overflow: hidden;
  touch-action: none;
}

/* Contact cards are intentionally simple: person and number only. */
.phone-contact .channel-copy {
  display: flex;
  align-items: center;
  min-height: 34px;
}

.phone-contact .channel-copy b {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Use Google's anchored place marker; the branded badge is only a visual key. */
.map-embed {
  position: relative;
  isolation: isolate;
}

.map-brand-badge {
  position: absolute;
  inset-inline-start: 18px;
  inset-block-end: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 36px);
  padding: 9px 12px 9px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 15px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .18);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  pointer-events: none;
}

.map-brand-badge img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.map-brand-badge span {
  display: grid;
  gap: 2px;
}

.map-brand-badge b {
  font-size: 10px;
  letter-spacing: .13em;
}

.map-brand-badge small {
  color: var(--muted);
  font-size: 10px;
}

/* Hero production objects now feel alive even before the first scroll. */
.rig-svg .camera-body,
.rig-svg .camera-lens,
.rig-svg .microphone {
  transform-box: fill-box;
  will-change: transform;
}

.rig-svg .camera-body {
  transform-origin: 48% 58%;
  animation: heroCameraFloat 5.8s ease-in-out infinite alternate;
}

.rig-svg .camera-lens {
  transform-origin: center;
  animation: heroLensBreathe 4.4s ease-in-out infinite;
}

.rig-svg .microphone {
  transform-origin: 50% 82%;
  animation: heroMicSway 5.2s ease-in-out infinite alternate;
}

.stage-label-camera,
.stage-label-audio {
  animation: heroLabelPulse 3.8s ease-in-out infinite;
}

.stage-label-audio {
  animation-delay: -1.7s;
}

.stage-meter span {
  animation: heroMeter 1.35s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -90ms);
}

@keyframes heroCameraFloat {
  from { transform: translate3d(0, 4px, 0) rotate(-.25deg); }
  to { transform: translate3d(0, -10px, 0) rotate(.45deg); }
}

@keyframes heroLensBreathe {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.022); filter: brightness(1.12); }
}

@keyframes heroMicSway {
  from { transform: translate3d(0, 2px, 0) rotate(-1.3deg); }
  to { transform: translate3d(3px, -9px, 0) rotate(1.6deg); }
}

@keyframes heroLabelPulse {
  0%, 100% { opacity: .58; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}

@keyframes heroMeter {
  from { transform: scaleY(.45); opacity: .45; }
  to { transform: scaleY(1); opacity: 1; }
}

/* Accessibility menu. */
.accessibility-toggle {
  position: fixed;
  inset-inline-start: max(18px, env(safe-area-inset-left));
  inset-block-end: max(20px, env(safe-area-inset-bottom));
  z-index: 2850;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 16px 45px rgba(0, 0, 0, .18);
  transition: transform .25s var(--ease), background .25s ease, color .25s ease;
}

.accessibility-toggle:hover {
  transform: translateY(-3px) rotate(-4deg);
}

.accessibility-toggle svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.accessibility-backdrop {
  position: fixed;
  inset: 0;
  z-index: 4300;
  background: rgba(2, 5, 10, .5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .25s ease;
}

.accessibility-backdrop.is-visible {
  opacity: 1;
}

.accessibility-panel {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 4400;
  width: min(420px, 100%);
  padding: max(28px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom));
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  border-inline-end: 1px solid var(--line);
  box-shadow: 30px 0 80px rgba(0, 0, 0, .24);
  overflow-y: auto;
  transform: translateX(-104%);
  transition: transform .42s var(--ease), background .3s ease, color .3s ease;
}

html[dir="rtl"] .accessibility-panel {
  transform: translateX(104%);
  border-inline-end: 0;
  border-inline-start: 1px solid var(--line);
}

.accessibility-panel.is-open,
html[dir="rtl"] .accessibility-panel.is-open {
  transform: translateX(0);
}

.accessibility-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.accessibility-head h2 {
  max-width: 270px;
  margin: 0;
  font-size: clamp(27px, 5vw, 38px);
  line-height: 1.08;
  letter-spacing: -.045em;
}

.accessibility-close {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-2);
}

.accessibility-close svg {
  width: 18px;
  fill: none;
  stroke-width: 1.7;
}

.accessibility-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-block: 24px;
}

.accessibility-controls > button,
.a11y-font-controls {
  min-height: 104px;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--text);
  background: var(--surface-2);
}

.accessibility-controls > button {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 14px;
  text-align: center;
  font-size: 12px;
  font-weight: 750;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.accessibility-controls > button:hover,
.accessibility-controls > button.is-active {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 11%, var(--surface));
  transform: translateY(-2px);
}

.accessibility-controls svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.a11y-font-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

.a11y-font-controls button {
  border: 0;
  color: var(--text);
  background: transparent;
  font-size: 25px;
  font-weight: 800;
}

.a11y-font-controls button + button {
  border-inline-start: 1px solid var(--line);
}

.accessibility-reset {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text);
  background: transparent;
  font-weight: 750;
}

body.accessibility-open {
  overflow: hidden;
}

html[data-a11y-font="1"] { font-size: 112.5%; }
html[data-a11y-font="2"] { font-size: 125%; }
html.a11y-readable body { font-family: Arial, "Noto Kufi Arabic", sans-serif !important; letter-spacing: .01em; }
html.a11y-underline a:not(.button):not(.brand) { text-decoration: underline !important; text-underline-offset: .18em; }
/* Safe grayscale keeps text, controls and contrast readable. */
html.a11y-grayscale[data-theme="light"] {
  --blue: #343a43;
  --blue-bright: #59616d;
  --cyan: #222a34;
}
html.a11y-grayscale[data-theme="dark"] {
  --blue: #cbd1d9;
  --blue-bright: #f4f6f8;
  --cyan: #aeb7c2;
}
html.a11y-grayscale img,
html.a11y-grayscale video,
html.a11y-grayscale .production-rig,
html.a11y-grayscale .service-visual,
html.a11y-grayscale .case-media picture,
html.a11y-grayscale .loader-mark {
  filter: grayscale(1) contrast(1.08);
}
html.a11y-grayscale[data-theme="dark"] .button-primary {
  color: #0b1017;
  background: linear-gradient(135deg, #f2f4f7, #aeb6c1);
  box-shadow: 0 16px 40px rgba(255, 255, 255, .1);
}
html.a11y-grayscale[data-theme="light"] .button-primary {
  color: #fff;
  background: linear-gradient(135deg, #272d35, #555e69);
}
html.a11y-grayscale .accessibility-panel,
html.a11y-grayscale .site-header,
html.a11y-grayscale .mobile-menu,
html.a11y-grayscale .cookie-banner {
  filter: none;
}
html.a11y-contrast { --line: currentColor; --line-strong: currentColor; }
html.a11y-contrast body { background: #000; }
html.a11y-contrast[data-theme="light"] body { background: #fff; }
html.a11y-contrast .button,
html.a11y-contrast .contact-channel,
html.a11y-contrast .service-card,
html.a11y-contrast .project-form { border-width: 2px !important; }
html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: .001ms !important;
}

/* Distinct motion language for every service page. */
.service-hero-visual {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 36px;
  background:
    radial-gradient(circle at 75% 24%, color-mix(in srgb, var(--blue) 20%, transparent), transparent 34%),
    linear-gradient(145deg, var(--surface), var(--surface-2));
  box-shadow: var(--shadow);
}

.service-scene {
  position: relative;
  width: min(78%, 480px);
  aspect-ratio: 1;
}

.service-visual-label {
  z-index: 5;
  right: 24px;
  bottom: 20px;
}

html[dir="rtl"] .service-visual-label {
  right: auto;
  left: 24px;
}

/* Digital marketing: live radar. */
.radar-scene {
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: radial-gradient(circle, color-mix(in srgb, var(--blue) 18%, transparent), transparent 62%);
}

.radar-ring {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--blue) 44%, transparent);
  border-radius: 50%;
}
.radar-ring.r1 { inset: 12%; }
.radar-ring.r2 { inset: 28%; }
.radar-ring.r3 { inset: 43%; }
.radar-sweep {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48%;
  height: 2px;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--cyan), transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--cyan) 60%, transparent);
  animation: radarSweep 4s linear infinite;
}
.radar-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 18px var(--cyan);
  animation: radarDot 1.8s ease-in-out infinite alternate;
}
.radar-dot.d1 { left: 29%; top: 34%; }
.radar-dot.d2 { right: 22%; top: 46%; animation-delay: -.6s; }
.radar-dot.d3 { left: 47%; bottom: 21%; animation-delay: -1.1s; }
.radar-metric {
  position: absolute;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-soft);
  background: var(--surface);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
}
.radar-metric.m1 { right: -5%; top: 22%; animation: metricFloat 3.5s ease-in-out infinite alternate; }
.radar-metric.m2 { left: -5%; bottom: 22%; animation: metricFloat 3.5s -1.4s ease-in-out infinite alternate; }
@keyframes radarSweep { to { transform: rotate(360deg); } }
@keyframes radarDot { to { transform: scale(1.8); opacity: .45; } }
@keyframes metricFloat { to { transform: translateY(-8px); } }

/* Photography and video: camera and aperture. */
.camera-scene { display: grid; place-items: center; }
.camera-shell {
  position: relative;
  width: 76%;
  aspect-ratio: 1.38;
  border: 2px solid color-mix(in srgb, var(--text) 30%, transparent);
  border-radius: 26px;
  background: linear-gradient(145deg, #202632, #070a10 66%);
  box-shadow: 0 30px 65px rgba(0, 0, 0, .36);
  animation: cameraSceneFloat 5s ease-in-out infinite alternate;
}
.camera-top {
  position: absolute;
  left: 24%; top: 17%;
  width: 31%; height: 10%;
  border-radius: 8px 8px 0 0;
  background: #111722;
}
.camera-grip {
  position: absolute;
  right: -4%; top: 20%; bottom: 15%; width: 18%;
  border-radius: 10px 20px 20px 10px;
  background: #080b11;
}
.camera-aperture {
  position: absolute;
  left: 50%; top: 52%;
  width: 48%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 13px solid #303949;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 38% 34%, #8de9ff, #266ee3 20%, #0c1830 49%, #020409 70%);
  animation: aperturePulse 4s ease-in-out infinite;
}
.camera-aperture i {
  position: absolute;
  left: 50%; top: 50%;
  width: 52%; height: 2px;
  transform-origin: left center;
  background: rgba(255,255,255,.18);
}
.camera-aperture i:nth-child(1){transform:rotate(0)}
.camera-aperture i:nth-child(2){transform:rotate(60deg)}
.camera-aperture i:nth-child(3){transform:rotate(120deg)}
.camera-aperture i:nth-child(4){transform:rotate(180deg)}
.camera-aperture i:nth-child(5){transform:rotate(240deg)}
.camera-aperture i:nth-child(6){transform:rotate(300deg)}
.camera-record {
  position: absolute; right: 12%; top: 12%; width: 10px; height: 10px;
  border-radius: 50%; background: #ff4f63; box-shadow: 0 0 15px #ff4f63;
  animation: recordBlink 1.2s steps(2,end) infinite;
}
.camera-focus-line {
  position: absolute; inset: 12%;
  border: 1px solid color-mix(in srgb, var(--cyan) 22%, transparent);
  border-radius: 50%;
  animation: focusRing 4.8s ease-in-out infinite;
}
@keyframes cameraSceneFloat { to { transform: translateY(-13px) rotate(.8deg); } }
@keyframes aperturePulse { 50% { transform: translate(-50%,-50%) scale(1.055); filter: brightness(1.16); } }
@keyframes recordBlink { 50% { opacity: .25; } }
@keyframes focusRing { 50% { inset: 22%; opacity: .2; } }

/* Podcast: microphone and live waveform. */
.audio-scene { display: grid; place-items: center; }
.podcast-mic {
  position: relative;
  width: 27%; height: 54%;
  border: 2px solid color-mix(in srgb, var(--text) 24%, transparent);
  border-radius: 42% 42% 32% 32%;
  background: linear-gradient(145deg, #313a49, #080b10 65%);
  animation: micFloat 4.4s ease-in-out infinite alternate;
}
.podcast-mic span {
  position: absolute; inset: 9% 17% 38%;
  border-radius: 42%;
  background: repeating-linear-gradient(180deg, #48566b 0 2px, transparent 2px 10px), #111722;
}
.podcast-mic i {
  position: absolute; left: 50%; bottom: -30%; width: 3px; height: 32%;
  transform: translateX(-50%); background: #536176;
}
.podcast-mic i::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 110px; height: 3px;
  transform: translateX(-50%); border-radius: 999px; background: #536176;
}
.audio-wave {
  position: absolute; left: 0; right: 0; bottom: 11%;
  display: flex; align-items: center; justify-content: center; gap: 5px; height: 58px;
}
.audio-wave b {
  width: 4px; height: calc(12px + (var(--i) % 6) * 6px);
  border-radius: 999px; background: linear-gradient(var(--cyan), var(--blue));
  animation: waveBounce .75s calc(var(--i) * -55ms) ease-in-out infinite alternate;
}
.audio-orbit {
  position: absolute; inset: 8%; border: 1px solid color-mix(in srgb, var(--blue) 34%, transparent); border-radius: 50%;
  animation: audioOrbit 8s linear infinite;
}
.audio-orbit::after { content:""; position:absolute; width:9px; height:9px; top:12%; left:18%; border-radius:50%; background:var(--cyan); box-shadow:0 0 18px var(--cyan); }
@keyframes micFloat { to { transform: translateY(-12px) rotate(1.5deg); } }
@keyframes waveBounce { to { height: 58px; opacity: .5; } }
@keyframes audioOrbit { to { transform: rotate(360deg); } }

/* Branding: living identity system. */
.brand-scene { transform: rotate(-3deg); animation: brandBoardFloat 6s ease-in-out infinite alternate; }
.brand-letter {
  position: absolute; left: 12%; top: 10%;
  font-size: clamp(120px, 17vw, 220px); line-height: .8; font-weight: 800; letter-spacing: -.12em;
  color: var(--text); opacity: .92;
}
.brand-tile { position:absolute; border-radius:20px; box-shadow:0 18px 44px rgba(0,0,0,.18); }
.brand-tile.t1 { width:28%; aspect-ratio:1; right:8%; top:9%; background:var(--blue); animation: tileFloat 4s ease-in-out infinite alternate; }
.brand-tile.t2 { width:20%; aspect-ratio:1; right:20%; bottom:18%; background:var(--cyan); animation: tileFloat 4s -1.4s ease-in-out infinite alternate; }
.brand-tile.t3 { width:14%; aspect-ratio:1; left:21%; bottom:11%; border:1px solid var(--line-strong); background:var(--surface); animation: tileFloat 4s -2.2s ease-in-out infinite alternate; }
.brand-line { position:absolute; height:1px; background:var(--line-strong); transform-origin:left; animation: brandLine 3s ease-in-out infinite alternate; }
.brand-line.l1 { left:8%; right:5%; top:62%; }
.brand-line.l2 { left:36%; right:6%; top:72%; animation-delay:-1s; }
.brand-wordmark { position:absolute; right:8%; bottom:6%; font-size:10px; font-weight:800; letter-spacing:.16em; color:var(--muted); }
@keyframes brandBoardFloat { to { transform:translateY(-13px) rotate(1deg); } }
@keyframes tileFloat { to { transform:translateY(-12px) rotate(4deg); } }
@keyframes brandLine { from { transform:scaleX(.25); } to { transform:scaleX(1); } }

/* Websites: an actual code system. */
.code-scene { width:min(86%,540px); aspect-ratio:1.18; display:grid; place-items:center; }
.code-window {
  position:relative; width:92%; min-height:62%; overflow:hidden;
  border:1px solid rgba(112,228,255,.2); border-radius:20px;
  background:#07101a; box-shadow:0 30px 70px rgba(0,0,0,.35);
  animation: codeFloat 5s ease-in-out infinite alternate;
}
.code-bar { display:flex; gap:7px; padding:13px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
.code-bar i { width:8px; height:8px; border-radius:50%; background:#ff5e69; }
.code-bar i:nth-child(2){background:#f6c44b}.code-bar i:nth-child(3){background:#4ee28d}
.code-window pre { margin:0; padding:22px; color:#b9c6d8; font:600 clamp(12px,1.25vw,16px)/1.8 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap; }
.code-window pre span { color:#72e4ff; }.code-window pre b { color:#8ba8ff; }.code-window pre em { color:#7df1aa; font-style:normal; }
.code-cursor { position:absolute; left:22px; bottom:20px; width:8px; height:18px; background:var(--cyan); animation:codeBlink .8s steps(2,end) infinite; }
.code-grid { position:absolute; inset:3%; border:1px solid color-mix(in srgb,var(--blue) 20%,transparent); transform:rotate(5deg); z-index:-1; animation:gridDrift 7s ease-in-out infinite alternate; }
@keyframes codeFloat { to { transform:translateY(-12px) rotate(-.6deg); } }
@keyframes codeBlink { 50% { opacity:0; } }
@keyframes gridDrift { to { transform:rotate(-2deg) scale(.94); } }

/* Content and post: moving edit timeline. */
.edit-scene { width:min(88%,560px); aspect-ratio:1.2; }
.edit-preview { position:absolute; left:8%; right:8%; top:5%; height:54%; overflow:hidden; border-radius:18px; background:linear-gradient(135deg,#0b1220,#244e9e); box-shadow:0 25px 60px rgba(0,0,0,.3); }
.edit-preview::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 35%,rgba(114,228,255,.55),transparent 20%),linear-gradient(120deg,transparent 48%,rgba(255,255,255,.12) 49% 51%,transparent 52%); animation:previewPan 6s ease-in-out infinite alternate; }
.edit-preview span,.edit-preview i,.edit-preview b { position:absolute; border:1px solid rgba(255,255,255,.5); }
.edit-preview span { inset:12%; }.edit-preview i { left:50%; top:12%; bottom:12%; }.edit-preview b { top:50%; left:12%; right:12%; }
.edit-timeline { position:absolute; left:3%; right:3%; bottom:6%; height:31%; padding:13px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.track { height:17%; margin-bottom:8px; border-radius:4px; background:linear-gradient(90deg,var(--blue) 0 42%,transparent 42% 45%,color-mix(in srgb,var(--cyan) 65%,var(--blue)) 45% 76%,transparent 76%); }
.track.tr2 { background:linear-gradient(90deg,transparent 0 12%,#8d6cff 12% 54%,transparent 54% 58%,var(--blue) 58% 92%,transparent 92%); }
.track.tr3 { background:linear-gradient(90deg,var(--cyan) 0 25%,transparent 25% 34%,#5b81ff 34% 69%,transparent 69%); }
.edit-playhead { position:absolute; top:6px; bottom:6px; left:18%; width:2px; background:#ff4f63; box-shadow:0 0 12px #ff4f63; animation:playhead 5s linear infinite; }
.edit-timecode { position:absolute; right:8%; top:61%; padding:7px 10px; border-radius:8px; color:#fff; background:#06070a; font:700 10px ui-monospace,monospace; letter-spacing:.08em; }
@keyframes previewPan { to { transform:scale(1.08) translateX(2%); } }
@keyframes playhead { from { left:10%; } to { left:88%; } }

@media (max-width: 900px) {
  .desktop-nav a[data-en="Contact"] { display: none; }
  .service-hero-visual { min-height: 390px; }
  .service-scene { width: min(76%, 390px); }
}

@media (max-width: 760px) {
  .mobile-menu { align-content: start; padding-top: calc(var(--header) + 26px); }
  .mobile-menu nav { margin: 0 auto; }
  .mobile-menu a { font-size: clamp(27px, 8.8vw, 42px); padding: 12px 0; }
  .map-brand-badge { inset-inline-start: 10px; inset-block-end: 10px; max-width: calc(100% - 20px); }
  .accessibility-toggle { width: 48px; height: 48px; inset-inline-start: 12px; inset-block-end: 16px; }
  .accessibility-panel { width: 100%; }
  .service-hero-visual { min-height: 320px; border-radius: 26px; }
  .service-scene { width: min(76%, 310px); }
  .brand-letter { font-size: 110px; }
  .code-window pre { padding: 17px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .rig-svg .camera-body,
  .rig-svg .camera-lens,
  .rig-svg .microphone,
  .stage-label-camera,
  .stage-label-audio,
  .stage-meter span,
  .service-scene,
  .service-scene *,
  .accessibility-panel,
  .accessibility-backdrop {
    animation: none !important;
  }
}

/* Small icon details that must remain legible after a theme or language change. */
.language-symbol svg,
.button svg,
.channel-arrow,
.text-link svg,
.whatsapp-arrow {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.language-swap i {
  background: currentColor;
  opacity: .72;
}

html[data-theme="light"] .language-label,
html[data-theme="light"] .language-symbol,
html[data-theme="light"] .channel-arrow,
html[data-theme="light"] .footer-icon-link svg {
  color: #172238;
}

html[data-theme="dark"] .language-label,
html[data-theme="dark"] .language-symbol,
html[data-theme="dark"] .channel-arrow,
html[data-theme="dark"] .footer-icon-link svg {
  color: #eef3fb;
}


/* Step one refinements: matched service art, clean location and favicon-ready polish. */
.service-matched-visual {
  min-height: 520px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line);
  border-radius: 36px;
  background: linear-gradient(145deg, var(--surface), var(--surface-2));
  box-shadow: var(--shadow);
}
.service-matched-visual .service-page-art {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
}
.service-matched-visual .service-page-art::after {
  background: linear-gradient(to top, color-mix(in srgb, var(--bg) 78%, transparent) 2%, transparent 62%);
}
.service-matched-visual .service-visual-label {
  z-index: 12;
  inset-inline-end: 24px;
  inset-block-end: 20px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-soft);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
html[dir="rtl"] .service-matched-visual .service-visual-label {
  right: auto;
  left: 24px;
}
.service-matched-visual .strategy-radar,
.service-matched-visual .camera-shell,
.service-matched-visual .wave-stage,
.service-matched-visual .brand-board,
.service-matched-visual .code-window,
.service-matched-visual .edit-timeline {
  transform-origin: center;
}
.service-matched-visual .strategy-radar { animation: matchedArtFloat 6.5s ease-in-out infinite alternate; }
.service-matched-visual .camera-shell { animation: cameraDrift 5.5s ease-in-out infinite alternate; }
.service-matched-visual .wave-stage { animation: matchedAudioFloat 5s ease-in-out infinite alternate; }
.service-matched-visual .brand-board { animation: brandBoard 6s ease-in-out infinite alternate; }
.service-matched-visual .code-window { animation: matchedCodeFloat 6s ease-in-out infinite alternate; }
.service-matched-visual .edit-timeline { animation: matchedEditFloat 6s ease-in-out infinite alternate; }
@keyframes matchedArtFloat { to { transform: translate3d(-10px, 16px, 0) rotate(2deg); } }
@keyframes matchedAudioFloat { to { transform: translateX(-50%) translateY(-10px); } }
@keyframes matchedCodeFloat { to { transform: translateY(-10px) rotate(.7deg); } }
@keyframes matchedEditFloat { to { transform: translateY(-9px); } }

/* A label-free branded map surface with one exact company marker. */
.map-embed-clean {
  position: relative;
  display: block;
  min-height: 420px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 28px;
  cursor: pointer;
  background: var(--surface-2);
}
.brand-map {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 57% 48%, color-mix(in srgb, var(--blue) 13%, transparent), transparent 29%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 95%, var(--blue)), var(--surface));
}
.brand-map::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .62;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 42px 42px;
}
.map-road {
  position: absolute;
  z-index: 2;
  display: block;
  height: 13px;
  border-block: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--surface) 80%, transparent);
}
.road-a { width: 122%; left: -12%; top: 42%; transform: rotate(-9deg); }
.road-b { width: 90%; right: -18%; top: 66%; transform: rotate(28deg); }
.road-c { width: 72%; left: -12%; top: 20%; transform: rotate(35deg); }
.road-d { width: 84%; left: 30%; top: 18%; transform: rotate(79deg); }
.road-e { width: 70%; left: 12%; top: 78%; transform: rotate(-27deg); }
.map-block {
  position: absolute;
  z-index: 1;
  display: block;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
}
.block-a { width: 19%; height: 22%; left: 10%; top: 12%; transform: rotate(-8deg); }
.block-b { width: 23%; height: 17%; right: 10%; top: 14%; transform: rotate(7deg); }
.block-c { width: 18%; height: 22%; left: 18%; bottom: 10%; transform: rotate(5deg); }
.block-d { width: 24%; height: 18%; right: 8%; bottom: 12%; transform: rotate(-11deg); }
.map-coordinate {
  position: absolute;
  z-index: 3;
  inset-inline-end: 22px;
  inset-block-start: 20px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
}
.company-map-marker {
  position: absolute;
  z-index: 6;
  left: 57%;
  top: 49%;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid color-mix(in srgb, var(--blue) 45%, transparent);
  border-radius: 50% 50% 50% 12px;
  background: color-mix(in srgb, var(--surface) 91%, transparent);
  box-shadow: 0 22px 60px rgba(0,0,0,.28), 0 0 0 9px color-mix(in srgb, var(--blue) 7%, transparent);
  rotate: -45deg;
  transition: transform .35s var(--ease), box-shadow .35s ease;
}
.company-map-marker::before,
.company-map-marker i {
  content: "";
  position: absolute;
  inset: -15px;
  border: 1px solid color-mix(in srgb, var(--blue) 36%, transparent);
  border-radius: 50%;
  animation: companyPinPulse 2.8s ease-out infinite;
}
.company-map-marker i { inset: -30px; animation-delay: -1.4s; }
.company-map-marker img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  rotate: 45deg;
}
.map-embed-clean:hover .company-map-marker {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 28px 75px rgba(0,0,0,.34), 0 0 0 12px color-mix(in srgb, var(--blue) 10%, transparent);
}
@keyframes companyPinPulse {
  0% { transform: scale(.7); opacity: .8; }
  100% { transform: scale(1.35); opacity: 0; }
}
.map-embed-clean .map-brand-badge { pointer-events: none; }

@media (max-width: 760px) {
  .service-matched-visual { min-height: 320px; border-radius: 26px; }
  .service-matched-visual .service-visual-label { inset-inline-end: 14px; inset-block-end: 13px; }
  html[dir="rtl"] .service-matched-visual .service-visual-label { left: 14px; }
  .service-matched-visual .strategy-radar { width: 310px; right: -12%; top: -70px; }
  .service-matched-visual .camera-shell { transform: scale(.82); }
  .service-matched-visual .brand-board { width: 88%; left: 6%; transform: scale(.86) rotate(-2deg); transform-origin: center; }
  .service-matched-visual .code-window { width: 88%; left: 6%; }
  .service-matched-visual .edit-timeline { width: 90%; left: 5%; transform: scale(.92); transform-origin: center; }
  .map-embed-clean { min-height: 340px; }
  .company-map-marker { left: 55%; top: 48%; width: 62px; height: 62px; }
  .company-map-marker img { width: 34px; height: 34px; }
  .map-coordinate { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .service-matched-visual .strategy-radar,
  .service-matched-visual .camera-shell,
  .service-matched-visual .wave-stage,
  .service-matched-visual .brand-board,
  .service-matched-visual .code-window,
  .service-matched-visual .edit-timeline,
  .company-map-marker::before,
  .company-map-marker i { animation: none !important; }
}

/* Final production polish: camera, edit suite, map, navigation and WhatsApp motion. */

/* Header rendering stays stable while scrolling on mobile and desktop. */
.site-header {
  top: 0;
  left: 0;
  right: 0;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: background-color, border-color, box-shadow;
  contain: layout style;
}
.site-header.scrolled {
  box-shadow: 0 12px 38px rgba(14, 28, 50, .08);
}
html[data-theme="dark"] .site-header.scrolled {
  box-shadow: 0 14px 44px rgba(0, 0, 0, .28);
}
main section[id] { scroll-margin-top: calc(var(--header) + 18px); }

/* Service links have explicit contrast in light mode. */
.service-page-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin-top: 19px;
  padding: 10px 13px;
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
  border-radius: 999px;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s var(--ease);
}
.service-page-link svg { width: 16px; }
.service-page-link:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--blue) 45%, transparent);
  background: color-mix(in srgb, var(--blue) 11%, var(--surface));
}
html[data-theme="light"] .service-page-link {
  color: #071328;
  border-color: rgba(13, 32, 62, .18);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 9px 24px rgba(27, 52, 90, .09);
}
html[data-theme="light"] .service-page-link:hover {
  color: #061124;
  border-color: rgba(36, 111, 255, .38);
  background: #fff;
}

/* A recognizable professional camera, used on the card and its service page. */
.visual-camera-pro {
  background:
    radial-gradient(circle at 62% 24%, rgba(65, 132, 255, .3), transparent 28%),
    radial-gradient(circle at 32% 15%, rgba(114, 228, 255, .1), transparent 26%),
    linear-gradient(145deg, #0b1019, #06080c 68%);
}
.pro-camera {
  position: absolute;
  width: min(88%, 430px);
  aspect-ratio: 1.25;
  left: 50%;
  top: 34px;
  transform: translateX(-50%) rotate(-2deg);
  transform-origin: center;
  filter: drop-shadow(0 34px 36px rgba(0, 0, 0, .52));
  animation: proCameraFloat 5.8s ease-in-out infinite alternate;
}
.pro-camera-shadow {
  position: absolute;
  left: 12%;
  right: 8%;
  bottom: -2%;
  height: 18%;
  border-radius: 50%;
  background: rgba(0, 0, 0, .44);
  filter: blur(18px);
}
.pro-camera-body {
  position: absolute;
  inset: 19% 5% 6% 5%;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 26px 28px 34px 22px;
  background:
    linear-gradient(108deg, rgba(255,255,255,.09), transparent 18%),
    linear-gradient(145deg, #30394a 0%, #151b25 28%, #0a0d13 72%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset -18px -18px 38px rgba(0,0,0,.32);
}
.pro-camera-top {
  position: absolute;
  width: 48%;
  height: 22%;
  left: 18%;
  top: 8%;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px 16px 5px 5px;
  background: linear-gradient(160deg, #303949, #111720 72%);
  clip-path: polygon(6% 100%, 16% 20%, 34% 0, 78% 0, 100% 100%);
}
.pro-camera-hotshoe {
  position: absolute;
  width: 19%;
  height: 5%;
  left: 35%;
  top: 5.5%;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 4px;
  background: repeating-linear-gradient(90deg, #697384 0 4px, #1b2029 4px 8px);
}
.pro-camera-viewfinder {
  position: absolute;
  width: 21%;
  height: 12%;
  left: 28%;
  top: 12%;
  border: 6px solid #0a0d12;
  border-radius: 10px 10px 4px 4px;
  background: radial-gradient(circle at 42% 42%, #477dba, #0a1422 46%, #020307 72%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.13);
}
.pro-camera-model {
  position: absolute;
  left: 5.5%;
  top: 11%;
  color: rgba(255,255,255,.58);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .13em;
}
.pro-camera-shutter,
.pro-camera-dial {
  position: absolute;
  top: 7%;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #697486, #171c25 58%, #05070a 72%);
  box-shadow: 0 3px 8px rgba(0,0,0,.45);
}
.pro-camera-shutter { width: 8%; aspect-ratio: 1; right: 14%; }
.pro-camera-dial {
  width: 12%;
  aspect-ratio: 1;
  right: 27%;
  background: repeating-conic-gradient(#8993a3 0 6deg, #171c25 6deg 16deg);
  border: 4px solid #11151c;
}
.pro-camera-grip {
  position: absolute;
  width: 22%;
  height: 77%;
  right: -3%;
  top: 12%;
  border-radius: 20px 28px 35px 12px;
  background:
    repeating-linear-gradient(98deg, rgba(255,255,255,.035) 0 2px, transparent 2px 5px),
    linear-gradient(150deg, #1b212c, #080a0f 72%);
  box-shadow: inset 6px 0 12px rgba(255,255,255,.03);
}
.pro-camera-record {
  position: absolute;
  width: 3.2%;
  aspect-ratio: 1;
  right: 8%;
  top: 25%;
  border-radius: 50%;
  background: #ff4264;
  box-shadow: 0 0 0 4px rgba(255,66,100,.1), 0 0 16px rgba(255,66,100,.7);
  animation: cameraRecordPulse 1.5s ease-in-out infinite;
}
.pro-camera-screen {
  position: absolute;
  width: 23%;
  height: 30%;
  right: 9%;
  bottom: 14%;
  overflow: hidden;
  border: 4px solid #080a0f;
  border-radius: 8px;
  background:
    linear-gradient(rgba(114,228,255,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(114,228,255,.13) 1px, transparent 1px),
    linear-gradient(135deg, #244266, #0a111d 65%);
  background-size: 14px 14px, 14px 14px, auto;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12);
}
.pro-camera-screen i {
  position: absolute;
  width: 32%;
  height: 42%;
  left: 34%;
  top: 29%;
  border: 1px solid rgba(114,228,255,.72);
}
.pro-camera-screen b {
  position: absolute;
  right: 6px;
  top: 5px;
  color: #ff6079;
  font-size: 5px;
  letter-spacing: .08em;
}
.pro-camera-lens {
  position: absolute;
  width: 57%;
  aspect-ratio: 1;
  left: 16%;
  top: 21%;
  border-radius: 50%;
  background: radial-gradient(circle, #0b0f16 0 42%, #293241 43% 48%, #07090d 49% 56%, #4a5667 57% 59%, #0c1016 60% 100%);
  box-shadow: 0 0 0 10px #111722, 0 0 0 12px rgba(255,255,255,.14), 0 24px 45px rgba(0,0,0,.58);
  animation: cameraLensBreathe 4.8s ease-in-out infinite;
}
.lens-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
}
.ring-one { inset: 7%; box-shadow: inset 0 0 0 5px #10151d; }
.ring-two { inset: 14%; border-style: dashed; border-color: rgba(255,255,255,.24); animation: lensRingSpin 13s linear infinite; }
.ring-three { inset: 21%; box-shadow: inset 0 0 26px rgba(45,124,255,.12); }
.lens-glass {
  position: absolute;
  inset: 25%;
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 30%, rgba(155,239,255,.9) 0 4%, rgba(61,137,255,.72) 7%, transparent 18%),
    radial-gradient(circle at 63% 65%, rgba(90,57,255,.36), transparent 27%),
    radial-gradient(circle, #17335c 0, #081326 47%, #020307 74%);
  box-shadow: inset 0 0 34px #000, 0 0 22px rgba(45,124,255,.24);
}
.lens-glass i {
  position: absolute;
  inset: 13%;
  clip-path: polygon(50% 0, 83% 18%, 100% 50%, 82% 82%, 50% 100%, 18% 82%, 0 50%, 18% 18%);
  border: 1px solid rgba(153,209,255,.18);
  transform: rotate(calc(var(--blade, 0) * 60deg));
}
.lens-glass i:nth-child(1){--blade:0}.lens-glass i:nth-child(2){--blade:1}.lens-glass i:nth-child(3){--blade:2}.lens-glass i:nth-child(4){--blade:3}.lens-glass i:nth-child(5){--blade:4}.lens-glass i:nth-child(6){--blade:5}
.lens-glass span {
  position: absolute;
  width: 34%;
  height: 18%;
  right: 13%;
  top: 18%;
  border-radius: 50%;
  background: rgba(147,235,255,.22);
  filter: blur(4px);
  transform: rotate(-24deg);
}
.camera-focus-ui {
  position: absolute;
  inset: 31% 24% 21% 24%;
  opacity: .5;
}
.camera-focus-ui span { position: absolute; width: 18px; height: 18px; }
.camera-focus-ui span:nth-child(1){left:0;top:0;border-left:1px solid var(--cyan);border-top:1px solid var(--cyan)}
.camera-focus-ui span:nth-child(2){right:0;top:0;border-right:1px solid var(--cyan);border-top:1px solid var(--cyan)}
.camera-focus-ui span:nth-child(3){left:0;bottom:0;border-left:1px solid var(--cyan);border-bottom:1px solid var(--cyan)}
.camera-focus-ui span:nth-child(4){right:0;bottom:0;border-right:1px solid var(--cyan);border-bottom:1px solid var(--cyan)}
.camera-readout {
  position: absolute;
  left: 15%;
  right: 13%;
  bottom: 1%;
  display: flex;
  justify-content: space-between;
  color: rgba(210,226,246,.64);
  font: 700 6px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
}
@keyframes proCameraFloat { to { transform: translateX(-50%) translateY(-9px) rotate(1deg); } }
@keyframes cameraRecordPulse { 50% { opacity: .35; box-shadow: 0 0 0 7px rgba(255,66,100,0), 0 0 7px rgba(255,66,100,.25); } }
@keyframes cameraLensBreathe { 50% { transform: scale(1.018); filter: brightness(1.12); } }
@keyframes lensRingSpin { to { transform: rotate(360deg); } }

/* A recognizable post production interface with video, motion and audio tracks. */
.visual-edit-pro {
  background:
    radial-gradient(circle at 66% 18%, rgba(92, 83, 255, .24), transparent 30%),
    radial-gradient(circle at 28% 18%, rgba(45,124,255,.17), transparent 25%),
    linear-gradient(145deg, #0c1018, #06080d 72%);
}
.edit-suite {
  position: absolute;
  width: min(90%, 460px);
  height: 296px;
  left: 50%;
  top: 28px;
  overflow: hidden;
  transform: translateX(-50%) rotate(-1deg);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 20px;
  background: #0a0e15;
  box-shadow: 0 28px 48px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  animation: editSuiteFloat 6s ease-in-out infinite alternate;
}
.edit-suite-top {
  height: 28px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: #111720;
}
.edit-suite-top b { margin-right: auto; color: rgba(231,238,248,.66); font: 800 6px/1 ui-monospace, monospace; letter-spacing: .14em; }
.edit-suite-top i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.15); }
.edit-app-mark { width: 9px; height: 9px; border-radius: 3px; background: linear-gradient(135deg, var(--blue), #8b6dff); box-shadow: 0 0 12px rgba(45,124,255,.5); }
.edit-monitor {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 38px;
  height: 112px;
  display: grid;
  grid-template-columns: 1fr 92px;
  gap: 8px;
}
.edit-preview-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: linear-gradient(135deg, #1e3c68, #101a2a 58%, #090d14);
}
.preview-grid { position:absolute; inset:0; opacity:.22; background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px); background-size:33.333% 33.333%; }
.preview-subject { position:absolute; width:34%; height:78%; left:34%; bottom:-10%; border-radius:44% 44% 12% 12%; background:linear-gradient(145deg,#738bb3,#18243a 68%); box-shadow:0 0 34px rgba(91,142,220,.3); }
.preview-subject::before { content:""; position:absolute; width:34%; aspect-ratio:1; left:33%; top:-15%; border-radius:50%; background:#9eb5d3; }
.preview-play { position:absolute; left:50%; top:50%; width:0; height:0; transform:translate(-42%,-50%); border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:15px solid rgba(255,255,255,.9); filter:drop-shadow(0 0 8px rgba(255,255,255,.25)); }
.edit-preview-frame small { position:absolute; right:7px; bottom:5px; color:rgba(255,255,255,.72); font:700 6px/1 ui-monospace,monospace; }
.edit-scopes {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 5px;
  padding: 12px 9px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: radial-gradient(circle at 50% 48%, rgba(86,120,255,.13), transparent 53%), #070a10;
}
.edit-scopes span { width: 5px; height: var(--scope,42%); border-radius:999px; background:linear-gradient(to top,#367cff,#6fe0ff); box-shadow:0 0 9px rgba(76,150,255,.25); animation:scopeBounce 1.8s ease-in-out infinite alternate; }
.edit-scopes span:nth-child(1){--scope:32%;animation-delay:-.4s}.edit-scopes span:nth-child(2){--scope:70%;animation-delay:-.8s}.edit-scopes span:nth-child(3){--scope:48%;animation-delay:-1.2s}.edit-scopes span:nth-child(4){--scope:82%;animation-delay:-.3s}.edit-scopes span:nth-child(5){--scope:56%;animation-delay:-1s}.edit-scopes span:nth-child(6){--scope:38%;animation-delay:-.6s}
.edit-ruler {
  position: absolute;
  left: 34px;
  right: 10px;
  top: 158px;
  height: 18px;
  display: flex;
  justify-content: space-between;
  color: rgba(216,225,239,.42);
  font: 700 5px/1 ui-monospace, monospace;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, transparent 1px 16px);
  padding-top: 7px;
}
.edit-tracks-pro {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: 110px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  background: #080b11;
}
.edit-track { position:relative; height:33.333%; display:flex; align-items:center; gap:3px; padding-left:28px; border-bottom:1px solid rgba(255,255,255,.055); }
.edit-track:last-of-type { border-bottom:0; }
.edit-track > b { position:absolute; left:7px; color:rgba(218,227,241,.4); font:800 6px/1 ui-monospace,monospace; }
.clip { position:relative; height:22px; flex:1; overflow:hidden; border-radius:4px; background:linear-gradient(90deg,#265fc8,#4088ff); }
.clip-b { flex:.62; background:linear-gradient(90deg,#493ab7,#7e68ff); }
.clip-c { flex:.38; background:linear-gradient(90deg,#235782,#39a8df); }
.clip i { position:absolute; inset:3px; opacity:.4; background:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0 1px,transparent 1px 10px); }
.motion-clip { height:20px; flex:.72; display:grid; place-items:center; border-radius:4px; color:#e7e1ff; background:linear-gradient(90deg,#6d50e8,#9a6fff); font:700 5px/1 ui-monospace,monospace; letter-spacing:.08em; }
.motion-clip.short { flex:.28; background:linear-gradient(90deg,#cc5b9a,#ff7db2); }
.audio-wave { height:21px; flex:1; display:flex; align-items:center; gap:2px; padding:0 4px; border-radius:4px; background:rgba(41,174,196,.16); }
.audio-wave i { width:2px; height:var(--wave,55%); border-radius:999px; background:#51d4de; animation:editWave 1.25s ease-in-out infinite alternate; }
.audio-wave i:nth-child(3n){--wave:88%}.audio-wave i:nth-child(3n+1){--wave:36%}.audio-wave i:nth-child(3n+2){--wave:64%}
.edit-playhead-pro { position:absolute; z-index:4; top:0; bottom:0; left:12%; width:1px; background:#ff4f70; box-shadow:0 0 9px rgba(255,79,112,.7); animation:proEditHead 5.3s ease-in-out infinite; }
.edit-playhead-pro::before { content:""; position:absolute; left:-4px; top:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:6px solid #ff4f70; }
.edit-controls { position:absolute; right:14px; top:44px; display:none; }
@keyframes editSuiteFloat { to { transform:translateX(-50%) translateY(-8px) rotate(.8deg); } }
@keyframes scopeBounce { to { transform:scaleY(.45); opacity:.46; } }
@keyframes editWave { to { transform:scaleY(.35); opacity:.55; } }
@keyframes proEditHead { 50% { left:88%; } }

/* Service detail views use the same artwork at a larger scale. */
.service-matched-visual .visual-camera-pro,
.service-matched-visual .visual-edit-pro { inset: 0; }
.service-matched-visual .pro-camera { width: min(84%, 560px); top: 66px; }
.service-matched-visual .edit-suite { width: min(88%, 620px); height: 365px; top: 70px; }
.service-matched-visual .edit-monitor { height: 145px; }
.service-matched-visual .edit-ruler { top: 190px; }
.service-matched-visual .edit-tracks-pro { height: 145px; }

/* Theme adaptation keeps equipment readable in light mode. */
html[data-theme="light"] .visual-camera-pro {
  background: radial-gradient(circle at 62% 24%, rgba(36,111,255,.18), transparent 29%), linear-gradient(145deg,#f8fbff,#dfe7f1 72%);
}
html[data-theme="light"] .pro-camera { filter:drop-shadow(0 28px 30px rgba(29,49,78,.26)); }
html[data-theme="light"] .visual-edit-pro {
  background: radial-gradient(circle at 66% 18%, rgba(92,83,255,.13), transparent 30%), linear-gradient(145deg,#f8fbff,#e4ebf4 72%);
}
html[data-theme="light"] .edit-suite { box-shadow:0 26px 45px rgba(28,48,77,.22), inset 0 1px 0 rgba(255,255,255,.08); }

/* Restore the real Google map while retaining a branded shortcut. */
.map-google-embed {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface-2);
  box-shadow: var(--shadow);
}
.map-google-embed iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  filter: saturate(.86) contrast(1.03);
}
html[data-theme="dark"] .map-google-embed iframe { filter: saturate(.72) contrast(1.08) brightness(.82); }
.map-brand-link {
  pointer-events: auto;
  text-decoration: none;
  transition: transform .25s var(--ease), border-color .25s ease;
}
.map-brand-link:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--blue) 45%,transparent); }
.map-brand-link img { border-radius:10px; }

/* WhatsApp now has a complete open and close sequence. */
.floating-whatsapp {
  isolation: isolate;
  transition: transform .42s var(--ease), box-shadow .32s ease, background-color .32s ease;
}
.floating-whatsapp::before,
.floating-whatsapp::after {
  content:"";
  position:absolute;
  inset:-7px;
  z-index:-1;
  border:1px solid rgba(35,201,105,.38);
  border-radius:50%;
  animation:whatsappRing 2.8s ease-out infinite;
}
.floating-whatsapp::after { inset:-15px; animation-delay:-1.4s; }
body.whatsapp-open .floating-whatsapp { transform:rotate(90deg) scale(.92); box-shadow:0 18px 55px rgba(35,201,105,.38); }
body.whatsapp-open .floating-whatsapp::before,
body.whatsapp-open .floating-whatsapp::after { animation-play-state:paused; opacity:0; }
.whatsapp-backdrop { transition:opacity .34s ease, visibility .34s ease; }
.whatsapp-panel {
  clip-path: inset(100% 0 0 0 round 28px);
  opacity:0;
  transform:translateY(24px) scale(.94) rotate(1.2deg);
  transition:clip-path .5s var(--ease), opacity .28s ease, transform .5s var(--ease), visibility .5s ease;
}
body.whatsapp-open .whatsapp-panel {
  clip-path:inset(0 0 0 0 round 28px);
  opacity:1;
  transform:translateY(0) scale(1) rotate(0);
}
.whatsapp-option { opacity:0; transform:translateY(14px); transition:opacity .28s ease, transform .38s var(--ease), border-color .25s ease, box-shadow .25s ease; }
body.whatsapp-open .whatsapp-option { opacity:1; transform:translateY(0); }
body.whatsapp-open .whatsapp-option:nth-child(1){transition-delay:.11s}
body.whatsapp-open .whatsapp-option:nth-child(2){transition-delay:.18s}
@keyframes whatsappRing { 0%{transform:scale(.72);opacity:.65} 100%{transform:scale(1.45);opacity:0} }

@media (max-width: 760px) {
  .site-header.scrolled { backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter:blur(14px) saturate(120%); }
  .pro-camera { width: min(92%, 380px); top: 28px; }
  .edit-suite { width: 92%; height: 278px; top: 24px; }
  .edit-monitor { height: 100px; }
  .edit-ruler { top: 146px; }
  .edit-tracks-pro { height: 104px; }
  .service-matched-visual .pro-camera { width: min(92%, 430px); top: 48px; }
  .service-matched-visual .edit-suite { width: 92%; height: 292px; top: 42px; }
  .service-matched-visual .edit-monitor { height: 108px; }
  .service-matched-visual .edit-ruler { top: 154px; }
  .service-matched-visual .edit-tracks-pro { height: 112px; }
  .map-google-embed { min-height: 360px; }
}

@media (prefers-reduced-motion: reduce) {
  .pro-camera,
  .pro-camera-record,
  .pro-camera-lens,
  .ring-two,
  .edit-suite,
  .edit-scopes span,
  .audio-wave i,
  .edit-playhead-pro,
  .floating-whatsapp::before,
  .floating-whatsapp::after { animation:none !important; }
  .whatsapp-panel,.whatsapp-option { transition-duration:.01ms !important; }
}