/* Cinematic Deemaar identity. Static site + embedded Remotion sequence. */
@font-face {font-family: Manrope; src: url('assets/fonts/Manrope.ttf') format('truetype'); font-weight: 200 800; font-display: swap;}
body.cinematic {--ink:#f2f5f9; --muted:#b2bdcc; --line:#283344; --panel:#111b29; --panel-strong:#131e2d; --surface:#080e18; --blue:#74beff; --orange:#ffb567; --green:#79dba4; --teal:#74beff; color:var(--ink); background:#080e18; font-family:Manrope,sans-serif; scrollbar-color:#45566e #080e18;}
.cinematic::before,.cinematic #network-field {display:none;}
.cinematic ::selection {color:#080e18; background:#a5d5ff;}
.cinematic input,.cinematic textarea {caret-color:#74beff;}
.cinematic :focus-visible {outline:2px solid #a5d5ff; outline-offset:5px;}
.cinematic a {text-underline-offset:5px;}
.cinematic .site-header {top:0; width:100%; margin:0; padding:20px max(28px,calc((100vw - 1280px)/2)); background:#080e18; border:0; border-bottom:1px solid #26303e; border-radius:0; box-shadow:none; backdrop-filter:none;}
.cinematic .brand-logo {width:238px; height:auto;}
.cinematic .nav-links {gap:25px; color:#c3ccd9; font-size:.82rem;}
.cinematic .nav-links a {opacity:1;}
.cinematic .nav-links a:hover {color:#fff; transform:none;}
.cinematic .nav-cta {border:0; background:transparent; padding:8px 0; color:#fff;}
.cinematic .nav-links .nav-login {padding:10px 18px; color:#d5deeb; background:#172333; border:1px solid #344155; box-shadow:none; border-radius:6px;}
.cinematic .section-band,.cinematic footer {width:min(1280px,calc(100% - 56px));}
.cinematic .hero {position:relative; display:block; min-height:650px; height:min(730px,56.25vw); padding:0; isolation:isolate;}
.cinematic .hero-copy {position:absolute; left:0; top:50%; translate:0 -55%; width:48%; z-index:2;}
.cinematic h1 {color:#f2f5f9; font-weight:550; font-size:clamp(3.6rem,5.9vw,5.6rem); line-height:1.06; letter-spacing:-.04em; margin-bottom:28px;}
.cinematic h2 {font-weight:550; letter-spacing:-.035em; line-height:1.12; font-size:clamp(2rem,3.4vw,3.25rem);}
.cinematic h3 {letter-spacing:-.025em; font-weight:650;}
.cinematic .hero-lede {color:#b2bdcc; max-width:450px; font-size:1.02rem; line-height:1.8;}
.cinematic .hero-actions {gap:24px; margin-top:32px; align-items:center;}
.cinematic .button {font-size:.9rem; font-weight:700; border-radius:6px; min-height:49px; gap:22px;}
.cinematic .button.primary {color:#091321; background:#a5d5ff; box-shadow:none; text-shadow:none; padding:0 22px;}
.cinematic .button.primary:hover {background:#c8e6ff;}
.cinematic .button.secondary {color:#d6deea; background:transparent; border:0; padding:10px 0; border-bottom:1px solid #536277; border-radius:0; min-height:auto;}
.cinematic .hero-visual {position:absolute; inset:0 -28px; max-width:none; width:auto; perspective:none; z-index:-1; overflow:hidden;}
.cinematic .hero-visual::after {display:none;}
#deemaar-motion {width:100%; height:100%;}
#deemaar-motion > div {width:100%;}
.cinematic .hero-visual .motion-poster {width:100%; height:100%; object-fit:cover; animation:none; transform:none; box-shadow:none; opacity:.35; mask-image:linear-gradient(90deg,transparent,black);}
.hero-bottom {position:absolute; bottom:35px; left:0; right:0; display:flex; align-items:center; justify-content:space-between; gap:18px; color:#a8b6c9; font-size:.78rem;}
.motion-error {color:#d8e2f0; padding:40px;}
.cinematic .eyebrow,.cinematic .product-kicker,.cinematic .service-number,.cinematic .outcome-grid > article > strong {display:none;}
.cinematic .reveal {opacity:1; transform:none; transition:none;}
.cinematic .mini-link {display:none;}
.product-photo-link {display:inline-flex; align-items:center; gap:20px; margin-top:12px; font-size:.83rem; font-weight:650;}
.product-photo-link.blue {color:#74beff;} .product-photo-link.orange {color:#ffb567;} .product-photo-link.green {color:#79dba4;}
.product-photo-link:hover {text-decoration:underline;}
.cinematic .products,.cinematic .services,.cinematic .platform,.cinematic .outcomes,.cinematic .roi,.cinematic .contact {padding-top:110px;}
.cinematic .section-heading {max-width:780px; margin-bottom:50px;}
.cinematic .section-heading p,.cinematic .platform-copy > p,.cinematic .contact-copy > p {color:#b2bdcc; line-height:1.8; max-width:70ch;}
.cinematic .product-detail-stack {gap:0;}
.cinematic .product-detail {grid-template-columns:minmax(250px,.75fr) minmax(0,1.7fr); grid-template-areas:'media content' 'roi content'; gap:26px 64px; padding:52px 0; border:0; border-top:1px solid #2a3545; border-radius:0; background:transparent; box-shadow:none; overflow:visible;}
.cinematic .product-detail::before,.cinematic .product-detail::after {display:none;}
.cinematic .product-logo-panel {display:flex; align-items:center; justify-content:center; min-width:0; height:210px; padding:15px; background:#111b29; border:0; border-radius:12px; box-shadow:none;}
.cinematic .product-logo-panel::before {display:none;}
.cinematic .product-logo-panel img {display:block; min-width:0; min-height:0; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; transform:none; animation:none; filter:none;}
.cinematic .product-detail-copy h3 {font-size:2.25rem;}
.cinematic .blue-detail h3 {color:#74beff;} .cinematic .orange-detail h3 {color:#ffb567;} .cinematic .green-detail h3 {color:#79dba4;}
.cinematic .product-detail-copy > p {color:#b2bdcc; line-height:1.8;}
.cinematic .feature-columns {gap:32px; grid-template-columns:1.15fr 1fr; margin-top:22px;}
.cinematic .feature-columns > div {padding:0; background:transparent; border:0; box-shadow:none; border-radius:0;}
.cinematic .feature-columns > div:hover,.cinematic .gross-example:hover,.cinematic .service-grid article:hover,.cinematic .roi-grid article:hover,.cinematic .outcome-grid article:hover {transform:none; box-shadow:none;}
.cinematic .feature-columns strong {color:#f2f5f9; margin-bottom:16px;}
.cinematic .feature-columns li {color:#b2bdcc; line-height:1.65;}
.cinematic .feature-columns li::before {width:4px; height:4px; background:#798da7;}
.cinematic .gross-example {--gross-accent:#efd09b; padding:22px; border:0; border-radius:12px; background:#241f16; color:#d8c8ad;}
.cinematic .gross-example::after {display:none;}
.cinematic .gross-example strong {color:#efd09b; font-size:.85rem; margin-bottom:0;}
.cinematic .gross-example span {color:#d8c8ad; font-size:.9rem; line-height:1.8;}
.cinematic .gross-example .gross-amount,.cinematic .gross-example .gross-amount > span {color:#f5d89f; font-size:2.15rem; font-weight:650; line-height:1.2; letter-spacing:-.025em; font-variant-numeric:tabular-nums;}
.cinematic .gross-amount {display:block; margin:7px 0 12px;}
.cinematic .service-grid,.cinematic .roi-grid,.cinematic .outcome-grid {gap:30px;}
.cinematic .service-grid article,.cinematic .roi-grid article,.cinematic .outcome-grid article {padding:28px 0 0; border:0; border-top:1px solid #344155; border-radius:0; background:transparent; box-shadow:none;}
.cinematic .service-grid h3 {min-height:0; font-size:1.3rem; line-height:1.4;}
.cinematic .service-grid p,.cinematic .service-grid li,.cinematic .roi-grid p,.cinematic .outcome-grid p {color:#b2bdcc; line-height:1.8;}
.cinematic .roi-grid article {padding:26px; border:0; border-radius:12px; background:#241f16;}
.cinematic .roi-grid article:hover {border-color:transparent;}
.cinematic .roi-grid strong {color:#f5d89f; font-size:1rem; font-variant-numeric:tabular-nums;}
.cinematic .roi-grid p {color:#d8c8ad;}
.cinematic .roi-grid h3 {color:#f4e9d5;}
.cinematic .roi-grid article > span {color:#efd09b; background:transparent; border:0; padding:0; font-size:.8rem; text-transform:none; letter-spacing:0;}
.lifecycle-heading {color:#a5d5ff;}
.lifecycle-flow {position:relative; padding:26px 0 28px; margin:0 0 56px;}
.lifecycle-steps {position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin:0; padding:0; list-style:none;}
.lifecycle-step {position:relative; text-align:center; color:#89c7ed;}
.lifecycle-step.intake {color:#f2b76e;}.lifecycle-step.outreach {color:#8ed6b4;}
.lifecycle-step a {display:flex; flex-direction:column; align-items:center; padding:0 12px;}
.lifecycle-step .lifecycle-logo {width:170px; height:120px; overflow:visible; margin-bottom:40px;}
.lifecycle-step strong {font-size:1.2rem; font-weight:650; line-height:1.3;}
.lifecycle-copy {width:100%; max-width:32ch;}
.lifecycle-copy strong,.lifecycle-tagline {display:block;}
.lifecycle-tagline {color:#b2bdcc; font-size:.9rem; margin-top:10px;}
.lifecycle-copy p {color:#b2bdcc; font-size:.9rem; line-height:1.75; margin:18px 0 0;}
.lifecycle-step a:hover .product-photo-link {text-decoration:underline;}
.lifecycle-step::before {content:''; position:absolute; left:calc(50% - 5px); top:130px; width:10px; height:10px; border-radius:50%; background:currentColor;}
.lifecycle-track {position:absolute; left:16.6667%; right:16.6667%; top:160px; height:1px; display:flex; background:#344155;}
.lifecycle-track span {position:relative; flex:1; height:1px;}
.lifecycle-track span::after {content:''; position:absolute; inset:0; background:#c7d5e4; transform-origin:left;}
.lifecycle-flow.is-playing .lifecycle-track span::after {animation:lifecycle-link 6s cubic-bezier(.16,1,.3,1) infinite both;}
.lifecycle-flow.is-playing .lifecycle-track span:nth-child(2)::after {animation-delay:650ms;}
.lifecycle-flow.is-playing .lifecycle-step .lifecycle-logo {animation:lifecycle-arrive 6s cubic-bezier(.16,1,.3,1) infinite both;}
.lifecycle-flow.is-playing .lifecycle-step:nth-child(2) .lifecycle-logo {animation-delay:450ms;}
.lifecycle-flow.is-playing .lifecycle-step:nth-child(3) .lifecycle-logo {animation-delay:1000ms;}
.lifecycle-flow.is-playing .half-silver {animation:link-silver 6s cubic-bezier(.16,1,.3,1) infinite both;}
.lifecycle-flow.is-playing .half-color {animation:link-color 6s cubic-bezier(.16,1,.3,1) infinite both;}
.lifecycle-flow.is-playing .lifecycle-step:nth-child(2) .lifecycle-half {animation-delay:450ms;}
.lifecycle-flow.is-playing .lifecycle-step:nth-child(3) .lifecycle-half {animation-delay:1000ms;}
.lifecycle-flow.is-playing .lifecycle-step::before {animation:lifecycle-point 6s ease-out infinite both;}
.lifecycle-flow.is-playing .lifecycle-step:nth-child(2)::before {animation-delay:650ms;}
.lifecycle-flow.is-playing .lifecycle-step:nth-child(3)::before {animation-delay:1300ms;}
@keyframes lifecycle-link {0%,100% {transform:scaleX(0);} 15%,80% {transform:scaleX(1);}}
@keyframes lifecycle-arrive {0%,100% {opacity:.7; translate:0 8px;} 15%,80% {opacity:1; translate:0 0;}}
@keyframes lifecycle-point {0%,100% {scale:.85;} 12% {scale:1.25;} 20%,80% {scale:1;}}
@keyframes link-silver {0%,100% {transform:translateX(-18px);} 15%,80% {transform:translateX(0);}}
@keyframes link-color {0%,100% {transform:translateX(18px);} 15%,80% {transform:translateX(0);}}
.lifecycle-flow.is-paused *,.lifecycle-flow.is-paused *::before,.lifecycle-flow.is-paused *::after {animation-play-state:paused !important;}
.cinematic .platform {gap:70px;}
.service-scene {margin:0; align-self:center;}
.service-scene img {width:100%; height:360px; object-fit:cover; border-radius:12px;}
.service-scene figcaption {margin-top:18px; font-size:.85rem; color:#b2bdcc;}
.cinematic .dashboard-shell {transform:none; animation:none; border:0; border-radius:12px; background:#131e2d; box-shadow:none;}
.cinematic .dashboard-shell::after {display:none;}
.cinematic .flow-line,.cinematic .signal-panel span,.cinematic .node {animation:none;}
.cinematic .capability-list span {color:#c7d2e2; background:transparent; border-color:#344155;}
.cinematic .contact {gap:80px; padding-bottom:90px;}
.cinematic .contact-form {padding:32px; border:0; background:#131e2d; box-shadow:none; border-radius:12px;}
.cinematic .contact-form input,.cinematic .contact-form textarea,.cinematic .contact-form select {color:#f2f5f9; background:#080e18; border-color:#465569; border-radius:6px;}
.cinematic .contact-form textarea::placeholder {color:#93a3b8;}
.cinematic .contact-form button {color:#091321; background:#a5d5ff; box-shadow:none;}
.cinematic .contact-email {color:#a5d5ff; padding:0 0 6px; border:0; border-bottom:1px solid #536277; border-radius:0; background:transparent;}
.cinematic footer {color:#93a3b8; border-top:1px solid #2a3545; padding:30px 0;}
.cinematic [id] {scroll-margin-top:115px;}
@media (max-width:1100px) {
  .cinematic .nav-links {gap:16px;} .cinematic .brand-logo {width:205px;}
  .cinematic .hero {min-height:580px;} .cinematic .hero-copy {width:49%;}
  .cinematic h1 {font-size:clamp(3.2rem,6.5vw,4.5rem);}
  .cinematic .product-detail {gap:26px 40px;} .cinematic .feature-columns {grid-template-columns:1fr; gap:28px;}
}
@media (max-width:980px) {
  .cinematic .site-header {padding:16px 28px;}
  .cinematic .hero {height:auto; min-height:auto; padding:64px 0 0;}
  .cinematic .hero-copy {position:relative; top:auto; width:100%; translate:none; max-width:650px;}
  .cinematic h1 {font-size:clamp(3.6rem,8vw,5rem);} .cinematic .hero-lede {max-width:600px;}
  .cinematic .hero-visual {position:relative; inset:auto; margin:30px 0 0; aspect-ratio:5/4; width:100%; height:auto;}
  #deemaar-motion {width:100%; height:auto; translate:none; position:relative;}
  .hero-bottom {position:relative; bottom:auto; padding:0 0 32px;}
  .cinematic .product-detail {grid-template-columns:230px minmax(0,1fr);}
  .cinematic .product-detail-copy h3 {font-size:1.85rem;}
  .cinematic .service-grid,.cinematic .roi-grid,.cinematic .outcome-grid {grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px;}
  .cinematic .platform,.cinematic .contact {gap:40px;}
}
@media (max-width:680px) {
  .lifecycle-steps {grid-template-columns:1fr; gap:36px;}
  .lifecycle-step {text-align:left;}
  .lifecycle-step a {display:grid; grid-template-columns:100px minmax(0,1fr); gap:22px; padding:0; align-items:start;}
  .lifecycle-step .lifecycle-logo {width:100px; height:90px; margin:0;}
  .lifecycle-copy {padding-top:14px; max-width:none;}
  .lifecycle-step strong {font-size:1.05rem;}.lifecycle-tagline {font-size:.85rem; margin-top:8px;}
  .lifecycle-copy p {font-size:.85rem; margin-top:14px;}
  .lifecycle-step::before {left:46px; top:95px; width:8px; height:8px;}
  .lifecycle-step:not(:last-child)::after {content:''; position:absolute; left:50px; top:103px; bottom:-48px; width:1px; background:#a7bbcf; transform-origin:top;}
  .lifecycle-flow.is-playing .lifecycle-step:not(:last-child)::after {animation:lifecycle-vertical 6s cubic-bezier(.16,1,.3,1) infinite both;}
  .lifecycle-flow.is-playing .lifecycle-step:nth-child(2)::after {animation-delay:650ms;}
  .lifecycle-step:last-child::before {display:none;}
  .lifecycle-track {display:none;}
  .lifecycle-flow {padding:0; margin-bottom:40px;}
  .lifecycle-flow.is-playing .lifecycle-step::before {animation:none;}
  .cinematic .roi-grid article {padding:24px;}
  .cinematic .site-header {padding:14px 20px;} .cinematic .brand-logo {width:185px;}
  .cinematic .section-band,.cinematic footer {width:calc(100% - 40px);}
  .cinematic .hero {padding-top:46px;} .cinematic h1 {font-size:clamp(2.8rem,11.3vw,4.2rem); margin-bottom:22px;}
  .cinematic .hero-lede {font-size:.95rem; line-height:1.75;}
  .cinematic .hero-actions {flex-direction:row; align-items:center; gap:22px;}
  .cinematic .hero-actions .button {width:auto; font-size:.8rem;} .cinematic .button.primary {gap:15px; padding-inline:17px;}
  .cinematic .hero-visual {margin-top:26px;} .hero-bottom {font-size:.78rem; gap:10px;}
  .product-photo-link {font-size:.73rem; gap:12px; margin-top:10px;}
  .cinematic .products,.cinematic .services,.cinematic .platform,.cinematic .outcomes,.cinematic .roi,.cinematic .contact {padding-top:70px;}
  .cinematic .section-heading {margin-bottom:30px;}
  .cinematic .product-detail {grid-template-columns:1fr; grid-template-areas:'media' 'content' 'roi'; padding:32px 0; gap:25px;}
  .cinematic .product-logo-panel {height:195px;} .cinematic .product-detail-copy h3 {font-size:2rem;}
  .cinematic .feature-columns {gap:28px;}
  .cinematic .service-grid,.cinematic .roi-grid,.cinematic .outcome-grid {grid-template-columns:1fr;}
  .cinematic .contact-form {padding:24px 18px;} .cinematic .contact-email {font-size:.93rem; overflow-wrap:anywhere;}
}
@keyframes lifecycle-vertical {0%,100% {transform:scaleY(0);} 15%,80% {transform:scaleY(1);}}
@media (prefers-reduced-motion:reduce) {.cinematic *,.cinematic *::before,.cinematic *::after {animation:none !important; transition:none !important; scroll-behavior:auto;}}