/* Dark palette and section styling. Scoped so day mode uses site.css. */
:root:where([data-theme="dark"]){
  color-scheme:dark;
  --ink:#f0f2f5;
  --muted:#acb7c3;
  --paper:#000;
  --line:#ffffff20;
  --surface:#000;
  --raised:#151515;
}
:where(html[data-theme="dark"]) body{background:var(--surface)}
:where(html[data-theme="dark"]) :focus-visible{outline-color:#ffbd77}
:where(html[data-theme="dark"]) .skip-link{background:#fff;color:#102333}
:where(html[data-theme="dark"]) .utility-bar{background:#000;border-bottom:1px solid #ffffff0d}
:where(html[data-theme="dark"]) .site-header{background:#000;border-color:var(--line);box-shadow:0 8px 30px #0002}
:where(html[data-theme="dark"]) .brand{background:transparent;border-radius:0;padding:4px 0}
:where(html[data-theme="dark"]) .brand img{width:100%;filter:url("#rtl-dark-logo")}
:where(html[data-theme="dark"]) .nav-link:hover,:where(html[data-theme="dark"]) .nav-link.is-active,:where(html[data-theme="dark"]) .language-switch:hover,:where(html[data-theme="dark"]) .nav-services[open]>.services-trigger{color:var(--orange-light)}
:where(html[data-theme="dark"]) .services-dropdown{background:#111;border-color:#ffffff26;border-top-color:var(--orange);box-shadow:0 20px 45px #0007}
:where(html[data-theme="dark"]) .services-dropdown a.services-option:hover,:where(html[data-theme="dark"]) .services-dropdown a.services-option[aria-current="page"]{background:#ff9c2420;color:#ffc789}
:where(html[data-theme="dark"]) .services-dropdown a.services-overview{color:#ffc789}
:where(html[data-theme="dark"]) .dropdown-icon{background:#38291d;color:#ffbb72}
:where(html[data-theme="dark"]) .services-options li:nth-child(2) .dropdown-icon{background:#1c3044;color:#9ccfff}
:where(html[data-theme="dark"]) .services-options li:nth-child(3) .dropdown-icon{background:#193a35;color:#95e0cf}
:where(html[data-theme="dark"]) .services-options li:nth-child(4) .dropdown-icon{background:#302744;color:#d1b9ff}
:where(html[data-theme="dark"]) .services-option .dropdown-arrow{color:#bac6d2}
:where(html[data-theme="dark"]) .mobile-nav{background:#000;box-shadow:0 20px 30px #0006}
:where(html[data-theme="dark"]) .mobile-nav .services-dropdown{background:transparent;border-left-color:#674729}
:where(html[data-theme="dark"]) .mobile-nav a .icon{color:var(--orange-light)}
:where(html[data-theme="dark"]) .button{color:#111b24;border-radius:4px}
:where(html[data-theme="dark"]) .button-dark{color:#fff}
:where(html[data-theme="dark"]) .menu-toggle{border-color:#ffffff35}
:where(html[data-theme="dark"]) .eyebrow{color:var(--orange-light)}
:where(html[data-theme="dark"]) h2{font-weight:450}
:where(html[data-theme="dark"]) h2>span{color:#f0f2f5;font-weight:800}

:where(html[data-theme="dark"]) .promise-strip{background:#000;border-block:1px solid var(--line)}
:where(html[data-theme="dark"]) .promise-icon{background:#ff9c2418;color:var(--orange-light);border:1px solid #ff9c2430}
:where(html[data-theme="dark"]) .promise-item h2{color:#f0f2f5}

/* Pure-black page surfaces; borders and raised cards separate sections. */
:where(html[data-theme="dark"]) .section-space{padding-block:104px}
:where(html[data-theme="dark"]) .services{background:#000;position:relative}
:where(html[data-theme="dark"]) .section-heading h2{font-size:clamp(34px,3.5vw,50px)}
:where(html[data-theme="dark"]) .section-intro{font-size:14px}
:where(html[data-theme="dark"]) .service-card{--service-accent:#ffb268;--service-tint:#2b241e;background:linear-gradient(145deg,var(--service-tint),#141d27 65%);border:1px solid #ffffff1c;border-top:2px solid var(--service-accent);border-radius:12px;color:#f0f2f5;transition:transform .25s,box-shadow .25s,border-color .25s}
:where(html[data-theme="dark"]) .service-card-2{--service-accent:#8ac5ff;--service-tint:#1b2a3c}
:where(html[data-theme="dark"]) .service-card-3{--service-accent:#8fdac8;--service-tint:#1a302f}
:where(html[data-theme="dark"]) .service-card-4{--service-accent:#c4a8ff;--service-tint:#29243b}
:where(html[data-theme="dark"]) .service-icon,:where(html[data-theme="dark"]) .service-card-1 .service-icon{background:#ffffff08;color:var(--service-accent);border:1px solid #ffffff16}
:where(html[data-theme="dark"]) .service-card-top{margin-bottom:38px}
:where(html[data-theme="dark"]) .service-number{font-size:32px;font-weight:400;letter-spacing:-.06em;color:#ffffff40}
:where(html[data-theme="dark"]) .service-tag,:where(html[data-theme="dark"]) .service-card-1 .service-tag{color:var(--service-accent)}
:where(html[data-theme="dark"]) .service-description,:where(html[data-theme="dark"]) .service-card-1 .service-description{color:#b9c5d0;font-size:13px}
:where(html[data-theme="dark"]) .service-link,:where(html[data-theme="dark"]) .service-card-1 .service-link{border-color:var(--line)}
:where(html[data-theme="dark"]) .service-link>span,:where(html[data-theme="dark"]) .service-card-1 .service-link>span{border-color:#ffffff30}
:where(html[data-theme="dark"]) .about{position:relative;background:#000}
:where(html[data-theme="dark"]) .brand-visual{border:1px solid #ffffff25;border-radius:14px;box-shadow:0 25px 50px #0004}
:where(html[data-theme="dark"]) .about-visual::before{content:"";position:absolute;inset:30px -15px 30px 45%;background:linear-gradient(145deg,#ff982f,#b75b12);clip-path:polygon(38% 0,100% 0,100% 100%,0 100%);z-index:0;border-radius:10px}
:where(html[data-theme="dark"]) .brand-caption{color:#172737}
:where(html[data-theme="dark"]) .location-badge{background:#1b2b3a;border-top:1px solid #ffffff20;box-shadow:0 16px 35px #0004}
:where(html[data-theme="dark"]) .about-copy h2{font-size:clamp(32px,3vw,44px)}
:where(html[data-theme="dark"]) .about-copy>p:not(.eyebrow){font-size:14px}
:where(html[data-theme="dark"]) .about-points .icon{background:#ff9c241a;color:var(--orange-light)}
:where(html[data-theme="dark"]) .text-link{border-color:#ffffff30}
:where(html[data-theme="dark"]) .text-link:hover,:where(html[data-theme="dark"]) .text-link .icon{color:var(--orange-light)}
:where(html[data-theme="dark"]) .team-card{background:linear-gradient(145deg,color-mix(in srgb,var(--team-accent) 12%,#111b25),#141e29 75%);border-color:#ffffff20;box-shadow:0 12px 30px #0002}
:where(html[data-theme="dark"]) .team-role{color:#c2cdd7}
:where(html[data-theme="dark"]) .team-card::after{border-color:#ffffff14;box-shadow:0 0 0 22px #ffffff05,0 0 0 44px #ffffff03}
:where(html[data-theme="dark"]) .team-portrait{box-shadow:0 10px 28px #0004}
:where(html[data-theme="dark"]) .clients{background:#000}
:where(html[data-theme="dark"]) .client-card{background:#131d27;border-color:#ffffff1c;transition:border-color .25s,background .25s}
:where(html[data-theme="dark"]) .client-sample{background:#ffffff08;color:#bac7d1}
:where(html[data-theme="dark"]) .client-name{color:#dae2e9}
:where(html[data-theme="dark"]) .client-symbol{background:#ff9c2415;color:#ffbd7b}
:where(html[data-theme="dark"]) .client-symbol-1{background:#8bc5ff12;color:#9acbfa}
:where(html[data-theme="dark"]) .client-symbol-2{background:#c4a8ff12;color:#cfbaff}
:where(html[data-theme="dark"]) .client-logo{background:#fff;border-radius:4px;padding:8px}
:where(html[data-theme="dark"]) .process{background:#000;border-block:1px solid var(--line)}
:where(html[data-theme="dark"]) .process h2{font-size:clamp(32px,3.4vw,48px)}
:where(html[data-theme="dark"]) .process h2>span{color:#fff}
:where(html[data-theme="dark"]) .step-number{background:#ff9c2410;border-color:#ff9c2450;font-size:16px}
:where(html[data-theme="dark"]) .step h3{font-size:21px}
:where(html[data-theme="dark"]) .step>p{font-size:13px}
:where(html[data-theme="dark"]) .contact{background:#000;color:var(--ink);border-block:1px solid var(--line)}
:where(html[data-theme="dark"]) .contact::after{background:none}
:where(html[data-theme="dark"]) .contact .eyebrow{color:var(--orange-light)}
:where(html[data-theme="dark"]) .contact .eyebrow::before{background:var(--orange)}
:where(html[data-theme="dark"]) .contact-copy>p:not(.eyebrow),:where(html[data-theme="dark"]) .contact-row>div>span:first-child{color:var(--muted)}
:where(html[data-theme="dark"]) .contact-row{border-color:var(--line)}
:where(html[data-theme="dark"]) .contact-icon{color:var(--orange-light);background:#ff9c2418;border-color:#ff9c2430}
:where(html[data-theme="dark"]) .contact h2{font-weight:750}
:where(html[data-theme="dark"]) .contact .button-dark{background:var(--orange);color:#111}
:where(html[data-theme="dark"]) .contact .button-dark:hover{background:var(--orange-light)}
:where(html[data-theme="dark"]) .faq{background:#000}
:where(html[data-theme="dark"]) .faq h2{font-weight:650}
:where(html[data-theme="dark"]) .faq-item summary{font-size:14px}
:where(html[data-theme="dark"]) .faq-item summary .icon{color:var(--orange-light)}
:where(html[data-theme="dark"]) .faq-item>p{font-size:13px}
:where(html[data-theme="dark"]) .site-footer{background:#000;border-top:1px solid var(--line)}

/* Service pages share the same dark palette and readable status treatments. */
:where(html[data-theme="dark"]) .service-hero{background:#000}
:where(html[data-theme="dark"]) .service-tabs a{background:#15212d;color:#d2dce4}
:where(html[data-theme="dark"]) .service-tabs a[aria-current]{background:#ff9c2417;border-color:#ff9c2460;color:#ffbd7b}
:where(html[data-theme="dark"]) .service-tabs a[aria-current] .icon{color:#ffbd7b}
:where(html[data-theme="dark"]) .service-detail>p{color:#bdc8d2}
:where(html[data-theme="dark"]) .detail-number{background:#ff9c2418;color:#ffbd7b}
:where(html[data-theme="dark"]) .service-inclusions .icon{color:#ffbd7b}
:where(html[data-theme="dark"]) .service-detail .service-note{background:#172431;color:#c5d1da}
:where(html[data-theme="dark"]) .service-detail.service-development{background:#28221c;border-color:#866038}
:where(html[data-theme="dark"]) .service-detail .development-badge{color:#ffcd91;background:#50381f}
:where(html[data-theme="dark"]) .service-request{background:linear-gradient(145deg,#203448,#121e2a);border:1px solid #ffffff20;box-shadow:0 15px 40px #0003;top:100px}
:where(html[data-theme="dark"]) .service-workflow{background:#000}
:where(html[data-theme="dark"]) .workflow-grid li{background:#182733;border-color:#ffffff20}
:where(html[data-theme="dark"]) .workflow-grid li::before{color:#ffbd7b}
:where(html[data-theme="dark"]) .related-card{background:#14212c}
:where(html[data-theme="dark"]) .related-card>.icon:first-child{color:#ffbd7b}
:where(html[data-theme="dark"]) .related-card:hover{background:#29251f;border-color:#8b6238}
:where(html[data-theme="dark"]) .service-detail h2{font-weight:650}

@media(hover:hover) and (pointer:fine){
  :where(html[data-theme="dark"]) .service-card:hover{border-color:var(--service-accent);box-shadow:0 20px 38px #0004}
  :where(html[data-theme="dark"]) .client-card:hover{background:#1b2b39;border-color:#ff9c2450}
  :where(html[data-theme="dark"]) .team-card:hover{box-shadow:0 20px 40px #0004}
}

@media(max-width:900px){

  :where(html[data-theme="dark"]) .section-space{padding-block:76px}
  :where(html[data-theme="dark"]) .section-intro{font-size:13px}
  :where(html[data-theme="dark"]) .about-copy>p:not(.eyebrow){font-size:13px}
}
@media(max-width:680px){

  :where(html[data-theme="dark"]) .section-space{padding-block:62px}
  :where(html[data-theme="dark"]) .section-heading h2{font-size:36px}
  :where(html[data-theme="dark"]) .service-card-top{margin-bottom:28px}
  :where(html[data-theme="dark"]) .service-description{font-size:13px}
  :where(html[data-theme="dark"]) .service-card h3{font-size:25px}
  :where(html[data-theme="dark"]) .about-copy h2{font-size:34px}
  :where(html[data-theme="dark"]) .about-visual::before{right:0}
  :where(html[data-theme="dark"]) .team-card::after{border-color:#ffffff0d;box-shadow:0 0 0 22px #ffffff03}
  :where(html[data-theme="dark"]) .faq-item summary{font-size:13px}
  :where(html[data-theme="dark"]) .process h2{font-size:34px;max-width:none}
  :where(html[data-theme="dark"]) .step h3{font-size:21px}
}

@media(prefers-reduced-motion:reduce){
  :where(html[data-theme="dark"]) .service-card:hover,:where(html[data-theme="dark"]) .team-card:hover,:where(html[data-theme="dark"]) .team-card:hover .team-portrait img,:where(html[data-theme="dark"]) .button:hover,:where(html[data-theme="dark"]) .contact-row:hover>.icon{transform:none}
}

/* Match the transparent navbar treatment in the dark footer. */
:where(html[data-theme="dark"]) .footer-logo{background:transparent;border-radius:0}
:where(html[data-theme="dark"]) .footer-logo img{filter:url("#rtl-dark-logo")}