/* Strength Den visual system: warm editorial light, cinematic midnight dark. */
:root {
  color-scheme: dark;
  --sdx-bg: #07111f;
  --sdx-bg-soft: #0b192b;
  --sdx-surface: rgba(13, 28, 49, .88);
  --sdx-surface-solid: #0d1c31;
  --sdx-surface-raised: #12243b;
  --sdx-ink: #f1f4f8;
  --sdx-muted: #aab8cb;
  --sdx-soft: #7f94af;
  --sdx-line: rgba(135, 168, 208, .22);
  --sdx-blue: #62a7ff;
  --sdx-blue-soft: rgba(69, 143, 231, .14);
  --sdx-gold: #e2b34f;
  --sdx-gold-deep: #bd8c2e;
  --sdx-danger: #db6470;
  --sdx-shadow: 0 22px 58px rgba(1, 8, 18, .26);
  --sdx-radius: 22px;
  --sdx-radius-sm: 15px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --sdx-bg: #f5f8fc;
  --sdx-bg-soft: #edf3fa;
  --sdx-surface: #ffffff;
  --sdx-surface-solid: #ffffff;
  --sdx-surface-raised: #f7faff;
  --sdx-ink: #13223a;
  --sdx-muted: #495d78;
  --sdx-soft: #63758e;
  --sdx-line: #d4dfec;
  --sdx-blue: #1768df;
  --sdx-blue-soft: rgba(23, 104, 223, .10);
  --sdx-gold: #a96d08;
  --sdx-gold-deep: #855400;
  --sdx-danger: #c6404b;
  --sdx-shadow: 0 12px 28px rgba(28, 54, 88, .08), 0 2px 6px rgba(28, 54, 88, .045);
}

html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
html[data-theme] body {
  color: var(--sdx-ink) !important;
  background-color: var(--sdx-bg) !important;
  transition: color .24s ease, background-color .24s ease;
}

html[lang="en"] body,
html[lang="en"] button,
html[lang="en"] input,
html[lang="en"] textarea,
html[lang="en"] select {
  font-family: "Space Grotesk", "Cairo", system-ui, sans-serif;
}
html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  font-family: "Cairo", system-ui, sans-serif !important;
}

html[data-theme] :is(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--sdx-gold) !important;
  outline-offset: 4px !important;
}

/* A consistent dark glass navigation stays legible over both hero treatments. */
html[data-theme] #hdr {
  background: rgba(5, 13, 26, .82) !important;
  border-bottom: 1px solid rgba(162, 185, 216, .14) !important;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .12);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
}
html[data-theme] #hdr .navlinks a,
html[data-theme] #hdr .nav-cta,
html[data-theme] #hdr .lang-btn { color: #f2f5fb; }
html[data-theme] #hdr .navlinks a { transition: color .2s ease, opacity .2s ease; }
html[data-theme] #hdr .navlinks a:hover { color: #fff; }
html[data-theme] #hdr .nav-cta {
  background: var(--sdx-gold) !important;
  color: #101a28 !important;
  box-shadow: 0 8px 22px rgba(226, 179, 79, .16);
}
html[data-theme] #hdr .lang-switch,
html[data-theme] .mobile-menu .lang-switch {
  border-color: rgba(174, 195, 222, .2) !important;
  background: rgba(255, 255, 255, .055) !important;
}
html[data-theme] #hdr .lang-btn.active { background: rgba(255, 255, 255, .16) !important; }
html[data-theme] .mobile-menu {
  background: #081425 !important;
  border-color: rgba(145, 176, 215, .2) !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .3);
}
html[data-theme] .mobile-menu a { color: #edf3fb !important; }

.sd-theme-toggle {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid rgba(180, 201, 229, .24);
  border-radius: 999px;
  background: rgba(255, 255, 255, .055);
  color: #f5f7fb;
  font: 700 11px/1 "Space Grotesk", "Cairo", system-ui, sans-serif;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.sd-theme-toggle:hover { background: rgba(255, 255, 255, .12); border-color: rgba(226, 179, 79, .65); transform: translateY(-1px); }
.sd-theme-toggle svg { width: 16px; height: 16px; flex: none; }
.sd-theme-toggle-mobile { display: none; }
.sd-theme-toggle .sd-theme-label { white-space: nowrap; }

/* The landing page keeps its cinematic first frame, then gains clearer rhythm. */
html[data-theme] .hero { color: #f1f4f8 !important; }
html[data-theme] .hero h1 { color: #f5f7fb !important; text-wrap: balance; letter-spacing: -.055em; }
html[data-theme] .hero .sub { color: rgba(241, 245, 250, .86) !important; max-width: 58ch; line-height: 1.8; }
html[data-theme] .hero-board { border-bottom: 1px solid var(--sdx-line); }
html[data-theme] .hero-tag { border-color: rgba(122, 171, 231, .28); }

html[data-theme] .sec {
  color: var(--sdx-ink) !important;
  border-color: var(--sdx-line);
}
html[data-theme] .sec:nth-of-type(even) { background-color: var(--sdx-bg-soft); }
html[data-theme] .sec:nth-of-type(odd) { background-color: var(--sdx-bg); }
html[data-theme] .sec-head h2,
html[data-theme] .sec h2,
html[data-theme] .sec h3 { color: var(--sdx-ink); text-wrap: balance; }
html[data-theme] .sec-head p,
html[data-theme] .sec p { color: var(--sdx-muted); }
html[lang="en"][data-theme] .sec h2,
html[lang="en"][data-theme] .sec-head h2 { letter-spacing: -.045em; }
html[dir="rtl"][data-theme] .sec h2,
html[dir="rtl"][data-theme] .sec-head h2 { letter-spacing: 0; line-height: 1.45; }
html[data-theme] .eyebrow,
html[data-theme] .booth-eyebrow,
html[data-theme] .portfolio-kicker,
html[data-theme] .cp-eyebrow,
html[data-theme] .cp-index { color: var(--sdx-blue); }
html[data-theme] .gold,
html[data-theme] .num,
html[data-theme] .tl-year.gold { color: var(--sdx-gold); }

/* Cards use one material language across home, services, portfolio and contact. */
html[data-theme] :is(.stat, .svc, .sector, .case, .work, .logo-card, .why,
  .solution-card, .chaos, .tl-item, .process-card, .cap, .booth-service-card,
  .portfolio-card, .portfolio-download, .cp-card, .contact-direct a, .lang-card,
  .booth-case, .partner-box) {
  background-color: var(--sdx-surface) !important;
  border-color: var(--sdx-line) !important;
  box-shadow: var(--sdx-shadow);
  transition: color .24s ease, background-color .24s ease, border-color .24s ease, box-shadow .24s ease, transform .24s ease;
}
html[data-theme] :is(.stat, .svc, .sector, .case, .work, .logo-card, .why,
  .solution-card, .chaos, .tl-item, .process-card, .cap, .booth-service-card,
  .portfolio-card, .portfolio-download, .cp-card, .contact-direct a,
  .booth-case, .partner-box) { border-radius: var(--sdx-radius); }
@media (hover:hover) {
  html[data-theme] :is(.svc, .sector, .work, .portfolio-card, .booth-service-card, .cp-card, .portfolio-download):hover {
    border-color: color-mix(in srgb, var(--sdx-gold) 54%, var(--sdx-line)) !important;
    box-shadow: var(--sdx-shadow), 0 0 0 1px color-mix(in srgb, var(--sdx-gold) 20%, transparent);
    transform: translateY(-4px);
  }
  html[data-theme] :is(.case, .work, .portfolio-card) img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
  html[data-theme] :is(.case, .work, .portfolio-card):hover img { transform: scale(1.035); }
}

html[data-theme] :is(.btn, .btn-gold, .nav-cta, .booth-button-primary, .cp-button,
  .cp-submit, .portfolio-card-link) { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
html[data-theme] :is(.btn-gold, .booth-button-primary, .cp-submit) {
  background: var(--sdx-gold) !important;
  border-color: transparent !important;
  color: #101a28 !important;
  box-shadow: 0 12px 28px rgba(179, 132, 37, .18);
}
html[data-theme] :is(.btn-ghost, .booth-button-secondary, .cp-button.ghost) {
  border-color: var(--sdx-line) !important;
  color: var(--sdx-ink) !important;
  background: var(--sdx-surface) !important;
}
html[data-theme] :is(.btn, .booth-button, .cp-button, .cp-submit):hover { transform: translateY(-2px); }
html[data-theme="dark"] #top a.btn.btn-ghost { color: #f1f4f8 !important; }

/* Light mode is a complete warm theme; image-led hero and closing CTA remain cinematic. */
html[data-theme="light"] body { background-image: none !important; }
html[data-theme="light"] .sec:nth-of-type(even) { background-color: #edf3fa !important; }
html[data-theme="light"] .sec:nth-of-type(odd) { background-color: #f5f8fc !important; }
html[data-theme="light"] .sec :is(h2,h3),
html[data-theme="light"] .portfolio-page :is(h1,h2,h3),
html[data-theme="light"] .services-page :is(h1,h2,h3),
html[data-theme="light"] .booth-page :is(h2,h3),
html[data-theme="light"] .cp-section :is(h2,h3),
html[data-theme="light"] .entry :is(h1,h2,h3),
html[data-theme="light"] .listing :is(h1,h2,h3),
html[data-theme="light"] .lang-page :is(h1,h2,h3) { color: var(--sdx-ink) !important; }
html[data-theme="light"] .sec :is(p,li,.lab,.desc,.case-body),
html[data-theme="light"] .portfolio-page p,
html[data-theme="light"] .booth-page p,
html[data-theme="light"] .cp-section p,
html[data-theme="light"] .entry .excerpt,
html[data-theme="light"] .entry-body,
html[data-theme="light"] .listing .intro,
html[data-theme="light"] .lang-intro,
html[data-theme="light"] .lang-card p { color: var(--sdx-muted) !important; }
html[data-theme="light"] .hero,
html[data-theme="light"] .booth-hero,
html[data-theme="light"] .cp-hero,
html[data-theme="light"] .cta,
html[data-theme="light"] .home-cta,
html[data-theme="light"] .booth-cta {
  color: #f1f4f8 !important;
  background-color: #07111f !important;
}
html[data-theme="light"] .hero :is(h1,h2,h3,p),
html[data-theme="light"] .booth-hero :is(h1,h2,h3,p),
html[data-theme="light"] .cp-hero :is(h1,h2,h3,p),
html[data-theme="light"] .cta :is(h1,h2,h3,p),
html[data-theme="light"] .home-cta :is(h1,h2,h3,p),
html[data-theme="light"] .booth-cta :is(h1,h2,h3,p) { color: #f1f4f8 !important; }
html[data-theme="light"] .portfolio-page,
html[data-theme="light"] .entry,
html[data-theme="light"] .listing,
html[data-theme="light"] .lang-page {
  color: var(--sdx-ink) !important;
  background: var(--sdx-bg) !important;
}
html[data-theme="light"] .booth-page { background-color: var(--sdx-bg) !important; }
html[data-theme="light"] .booth-capabilities,
html[data-theme="light"] .booth-case,
html[data-theme="light"] .contact-experience,
html[data-theme="light"] .contact-band,
html[data-theme="light"] .portfolio-downloads { color: var(--sdx-ink) !important; }
html[data-theme="light"] .portfolio-card-body,
html[data-theme="light"] .portfolio-download,
html[data-theme="light"] .booth-service-card,
html[data-theme="light"] .cap,
html[data-theme="light"] .process-card,
html[data-theme="light"] .cp-card,
html[data-theme="light"] .contact-direct a,
html[data-theme="light"] .lang-card { color: var(--sdx-ink) !important; }
html[data-theme="light"] .portfolio-card-tag,
html[data-theme="light"] .tag,
html[data-theme="light"] .booth-image-label,
html[data-theme="light"] .booth-visual-index { color: #fff !important; }
html[data-theme="light"] .portfolio-hero-aside { border-color: var(--sdx-gold) !important; color: var(--sdx-muted) !important; }
html[data-theme="light"] .project-form {
  color: var(--sdx-ink) !important;
  background: var(--sdx-surface-solid) !important;
  border-color: var(--sdx-line) !important;
}
html[data-theme="light"] .project-form :is(label,span) { color: var(--sdx-muted); }
html[data-theme="light"] .project-form :is(input,textarea,select) {
  color: var(--sdx-ink) !important;
  background: #fff !important;
  border-color: var(--sdx-line) !important;
}
html[data-theme="light"] .project-form :is(input,textarea,select)::placeholder { color: #8a96a6 !important; }
html[data-theme="light"] .project-form .consent span { color: var(--sdx-muted) !important; }
html[data-theme="light"] .sdm-cmp .chaos { background: #fff !important; }
html[data-theme="light"] .sdm-cmp .solution-card { background: #edf4ff !important; }
html[data-theme="light"] .sdm-cmp .chaos :is(span,p),
html[data-theme="light"] .sdm-cmp .solution-card :is(span,p) { color: var(--sdx-muted) !important; }
html[data-theme="light"] .stat .num { color: var(--sdx-gold-deep) !important; }
html[data-theme="light"] .work-cap,
html[data-theme="light"] .case-foot,
html[data-theme="light"] .portfolio-card-body { color: var(--sdx-ink) !important; }
html[data-theme="light"] .logo-card { background: rgba(255,255,255,.82) !important; }
html[data-theme="light"] .logo-card img { filter: none; }

/* Keep the light palette bright and crisp across the full homepage. */
html[data-theme="light"] :is(.sec, .cp-section, .clients-panel) {
  color: var(--sdx-ink) !important;
  border-color: var(--sdx-line) !important;
}
html[data-theme="light"] :is(.sec, .cp-section, .clients-panel)::before,
html[data-theme="light"] :is(.sec, .cp-section, .clients-panel)::after {
  background-color: transparent;
}
html[data-theme="light"] .sec-head h2,
html[data-theme="light"] .about-editorial :is(h2, p),
html[data-theme="light"] .about-timeline :is(h2, p),
html[data-theme="light"] .why :is(h3, .wn),
html[data-theme="light"] .tl-item :is(h3, p),
html[data-theme="light"] .wheel-detail :is(h2, h3, p, li),
html[data-theme="light"] .value-quote { color: var(--sdx-ink) !important; }
html[data-theme="light"] .sec-head p,
html[data-theme="light"] .about-editorial p,
html[data-theme="light"] .about-timeline p,
html[data-theme="light"] .wheel-detail > p,
html[data-theme="light"] .tl-item p,
html[data-theme="light"] .wheel-detail li,
html[data-theme="light"] .value-side { color: var(--sdx-muted) !important; }

html[data-theme="light"] :is(.stat, .svc, .sector, .case, .work, .logo-card, .why,
  .solution-card, .chaos, .tl-item, .process-card, .cap, .booth-service-card,
  .portfolio-card, .portfolio-download, .cp-card, .contact-direct a, .lang-card,
  .booth-case, .partner-box) {
  color: var(--sdx-ink) !important;
  background-color: var(--sdx-surface) !important;
  border-color: var(--sdx-line) !important;
  box-shadow: var(--sdx-shadow);
}
html[data-theme="light"] :is(.stat, .svc, .sector, .case, .work, .logo-card, .why,
  .solution-card, .chaos, .tl-item, .process-card, .cap, .booth-service-card,
  .portfolio-card, .portfolio-download, .cp-card, .contact-direct a,
  .booth-case, .partner-box) :is(h3, p, span, li, .desc, .wn, .lab) {
  color: inherit;
}
html[data-theme="light"] :is(.stat, .svc, .sector, .case, .work, .why,
  .portfolio-card, .booth-service-card, .cp-card, .contact-direct a) {
  border-radius: 18px;
}
html[data-theme="light"] .sec :is(.desc, .case-body, .wt, .lab, .tl-copy) {
  color: var(--sdx-muted) !important;
}

/* The vendor comparison uses its own dark-mode colors; restyle every layer here. */
html[data-theme="light"] .sdm-cmp,
html[data-theme="light"] .sd-comparison {
  background: var(--sdx-bg-soft) !important;
  background-image: none !important;
}
html[data-theme="light"] .sdm-cmp :is(.toggle-row, .sd-comparison-toggle) {
  padding: 5px !important;
  border: 1px solid #c8d6e8 !important;
  border-radius: 999px !important;
  background: #e6edf6 !important;
  box-shadow: inset 0 1px 2px rgba(29, 58, 94, .08);
}
html[data-theme="light"] .sdm-cmp .toggle-row button {
  color: #40546e !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html[data-theme="light"] .sdm-cmp .toggle-row button.active.bad {
  color: #fff !important;
  background: #2878f0 !important;
  box-shadow: 0 4px 12px rgba(40, 120, 240, .24) !important;
}
html[data-theme="light"] .sdm-cmp .toggle-row button.active.good {
  color: #14233a !important;
  background: #edbd4b !important;
  box-shadow: 0 4px 12px rgba(169, 109, 8, .18) !important;
}
html[data-theme="light"] .sdm-cmp .panel,
html[data-theme="light"] .sdm-cmp .chaos-grid { color: var(--sdx-ink) !important; }
html[data-theme="light"] .sdm-cmp .chaos {
  color: #23354e !important;
  background: #fff !important;
  border: 1px solid #cfdae8 !important;
  box-shadow: 0 4px 12px rgba(31, 55, 86, .045);
}
html[data-theme="light"] .sdm-cmp .chaos::before { color: #d44d59 !important; }
html[data-theme] .sdm-cmp .chaos::before,
html[data-theme] .sd-comparison .chaos::before {
  display: none !important;
  content: none !important;
}
html[data-theme="light"] .sdm-cmp .chaos-note {
  color: #4c607a !important;
  border-color: #d6e0ed !important;
}
html[data-theme="light"] .sdm-cmp .solution-card {
  color: var(--sdx-ink) !important;
  background: linear-gradient(140deg, #edf4ff 0%, #fff 100%) !important;
  border: 1px solid #b8cbea !important;
  box-shadow: 0 10px 28px rgba(32, 74, 129, .09);
}
html[data-theme="light"] .sdm-cmp .solution-card :is(h3, p, span) { color: inherit !important; }
html[data-theme="light"] .sdm-cmp .solution-card .pills span {
  color: #31516f !important;
  background: #fff !important;
  border-color: #cfdaea !important;
}
html[data-theme="light"] .sd-comparison #p-bad,
html[data-theme="light"] .sd-comparison #p-good {
  color: var(--sdx-ink) !important;
  background: #fff !important;
  border: 1px solid var(--sdx-line) !important;
  border-top: 3px solid #5d8fe1 !important;
  box-shadow: var(--sdx-shadow);
}
html[data-theme="light"] .sd-comparison #p-good {
  background: linear-gradient(145deg, #edf4ff, #fff) !important;
  border-color: #bfd0e8 !important;
  border-top-color: var(--sdx-gold) !important;
}
html[data-theme="light"] .sd-comparison :is(.chaos, .chaos-note, .solution-card > p) { color: var(--sdx-muted) !important; }
html[data-theme="light"] .sd-comparison .chaos { background: #f8faff !important; border-color: #d6dfeb !important; }
html[data-theme="light"] .sd-comparison .solution-card { color: var(--sdx-ink) !important; border-color: #c5d5ea !important; }
html[data-theme="light"] .sd-comparison-panels::before {
  color: #fff !important;
  background: #2878f0 !important;
  border-color: #fff !important;
  box-shadow: 0 5px 16px rgba(40, 120, 240, .2);
}

/* Retain the logo marquee, without enclosing the full client section in a slab. */
html[data-theme="light"] .clients-panel {
  background: #edf3fa !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html[data-theme="light"] .clients-panel .wrap,
html[data-theme="light"] .clients-panel .marquee-wrap { background: transparent !important; }
html[data-theme="light"] .clients-panel .logo-card {
  background: #fff !important;
  border: 1px solid #d7e1ec !important;
  box-shadow: 0 5px 16px rgba(31, 55, 86, .06);
}

/* Make the capability wheel and timeline markers read sharply on pale sections. */
html[data-theme="light"] .wheel .track,
html[data-theme="light"] .wheel .track.t2 { border-color: #cbd9ea !important; }
html[data-theme="light"] .wheel-center {
  color: #fff !important;
  background: radial-gradient(circle at 35% 28%, #355882, #172d4d 72%) !important;
  border-color: #4d82d1 !important;
  box-shadow: 0 12px 32px rgba(25, 64, 115, .2), inset 0 0 24px rgba(85, 151, 241, .2) !important;
}
html[data-theme="light"] .wheel :is(.wheel-item, .wheel-node, .orbit-item, .wheel-label) { color: #243a56 !important; }
html[data-theme="light"] .wheel :is(.wheel-item, .wheel-node, .orbit-item) { background-color: #e8f0fb !important; border-color: #b9cce5 !important; }
html[data-theme="light"] .wheel :is(svg, .icon) { color: #2878e8; }
html[data-theme="light"] .wheel .nlab { color: #3a5270 !important; font-weight: 700; }
html[data-theme="light"] .wheel-center .wc-sub { color: #d9e5f5 !important; }
html[data-theme="light"] .timeline-item em,
html[data-theme="light"] .tl-item .tl-year { color: #9c6506 !important; }
html[data-theme="light"] .timeline-line::before,
html[data-theme="light"] #tl-fill { background-color: #d7a43b !important; }
html[data-theme="light"] .why-grid { gap: 12px; background: transparent !important; }
html[data-theme="light"] .why-grid .why {
  background: #fff !important;
  border: 1px solid #d5dfeb !important;
  box-shadow: 0 5px 16px rgba(31, 55, 86, .055);
}
html[data-theme="light"] .why-grid .wn { color: #1768df !important; }
html[data-theme="light"] .partners .pcard {
  color: #14233a !important;
  background: #fff !important;
  border: 1px solid #cbd8e8 !important;
  box-shadow: 0 8px 20px rgba(31, 55, 86, .08);
}
html[data-theme="light"] .partners .pcard.shine {
  background: linear-gradient(135deg, #fff8e7, #fff) !important;
  border-color: #e4c16f !important;
}

/* Service and project imagery stays vivid and deliberate in either theme. */
html[data-theme] :is(.case-media, .work-img, .portfolio-card-media, .booth-case-image, .media) { overflow: hidden; }
html[data-theme] :is(.case-media img, .work-img img, .portfolio-card-media img, .booth-case-image img) {
  display: block;
  width: 100%;
  object-fit: cover;
}
html[data-theme] .portfolio-card-media img { aspect-ratio: 1.45 / 1; }
html[data-theme] .portfolio-card-body { padding: clamp(20px, 2vw, 28px) !important; }
html[data-theme] .booth-case-image img { border-radius: var(--sdx-radius); }

/* CMS-rendered article, contact and listing pages share the same tokens. */
html[data-theme] .entry { color: var(--sdx-ink) !important; }
html[data-theme] .entry-body { line-height: 1.9; }
html[data-theme] .entry img { border-radius: var(--sdx-radius); box-shadow: var(--sdx-shadow); }
html[data-theme] .listing .cms-project-card,
html[data-theme] .cms-project-card { border-color: var(--sdx-line) !important; background: var(--sdx-surface) !important; color: var(--sdx-ink) !important; border-radius: var(--sdx-radius); box-shadow: var(--sdx-shadow); }

html[data-theme] footer { color: var(--sdx-muted); }
html[data-theme] footer a { color: var(--sdx-ink); }
html[data-theme] .contact-bar { border-color: var(--sdx-line); }
html[data-theme] .cb { border-color: var(--sdx-line); }
html[data-theme] .cbl { color: var(--sdx-soft); }

@media (max-width: 900px) {
  .sd-theme-toggle-desktop { display: none !important; }
  .sd-theme-toggle-mobile { display: inline-flex; width: 100%; margin: 12px 0 8px; justify-content: center; }
  html[data-theme] .mobile-menu { padding: 22px !important; }
}
@media (max-width: 680px) {
  html[data-theme] .sec { padding-block: clamp(58px, 16vw, 82px); }
  html[data-theme] .sec-head { margin-bottom: 28px; }
  html[data-theme] .sec-head h2,
  html[data-theme] .sec h2 { max-width: 100%; font-size: clamp(30px, 9vw, 42px); line-height: 1.12; overflow-wrap: anywhere; }
  html[dir="rtl"][data-theme] .sec-head h2,
  html[dir="rtl"][data-theme] .sec h2 { line-height: 1.42; }
  html[data-theme] .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-theme] .chaos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-theme] :is(.stat, .svc, .sector, .case, .work, .why, .portfolio-card, .booth-service-card) { min-width: 0; }
  html[data-theme] .portfolio-shell { width: min(100% - 32px, 1180px); }
  html[data-theme] .portfolio-hero { gap: 22px; }
  html[data-theme] .portfolio-grid { gap: 16px; }
  html[data-theme] .project-form { padding: clamp(20px, 6vw, 30px) !important; }
  html[data-theme] .contact-direct a { overflow-wrap: anywhere; }
}
@media (max-width: 420px) {
  .sd-theme-toggle-mobile { min-height: 46px; }
  html[data-theme] .portfolio-grid,
  html[data-theme] .booth-service-grid { grid-template-columns: 1fr; }
  html[data-theme] .stat-grid,
  html[data-theme] .chaos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* Statistic cards stay visually still when the pointer passes over them. */
html[data-theme] :is(.stat, .stat:hover, .stat:active, .stat:focus, .stat:focus-visible) {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;
  animation: none !important;
  transition: none !important;
  background-color: var(--sdx-surface) !important;
  border-color: var(--sdx-line) !important;
  box-shadow: var(--sdx-shadow) !important;
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] *, html[data-theme] *::before, html[data-theme] *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}