/* M ONE identity over the existing Flowstate layout and motion. Load last. */
:root {
  --base: #f3f2eb;
  --heading: #191c17;
  --muted: #666e5c;
  --gold: #64734f;
  --gold-deep: #536045;
  --gold-light: #7b8964;
  --line: #191c1728;
  --glass: #e7e8dd;
  --brand-yellow: #ffdf00;
  --button-fill: #daddad;
  --panel: #e7e8dd;
}
html { color-scheme: light; scrollbar-color: #7b8964 var(--base); }
body { font-family: Manrope, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; }
html[dir=rtl] body { font-family: 'Noto Kufi Arabic', sans-serif; }
html[dir=rtl] .brand, .brand, .footer-signature, .phone-statusbar { font-family: Manrope, Arial, sans-serif; }
.languages button { font-family: inherit; }
::selection { background: var(--button-fill); color: var(--heading); }
:focus-visible { outline-color: var(--gold); }
.scrim { background: radial-gradient(ellipse at 50% 46%, #f3f2eb94, #f3f2eb38 58%, #f3f2eb0d); }
.site-header { background: #f3f2ebf5; border-color: var(--line); backdrop-filter: blur(15px); }
.site-header .header-brand>span:last-child { color: var(--heading); font-weight: 600; letter-spacing: -.055em; }
.site-header .header-brand b { color: var(--heading); font-weight: 500; }
.site-header .header-brand-mark img,
.footer-brand .footer-logo-mark img,
.phone-header .phone-brand-mark img { position: static; width: 100%; height: 100%; max-width: 100%; object-fit: contain; mix-blend-mode: normal; border-radius: 0; margin: 0; }
.button, .hero-badge, .glass-card,
.service-icon, .service-tag, .system-tabs button, .visual-node,
.project-image, .project-arrow, .concept-tag, .filters button,
.faq-search, .page-process .process-card, .project-detail-image,
.phone-selected-icon, .phone-selection-tabs button, dialog, .dialog-close { border-radius: 3px; }
/* Same language control as the corporate header, including RTL ordering. */
.languages { direction: inherit; align-items: center; gap: 3px; padding: 4px; border-color: #191c1724; border-radius: 999px; font-size: 10px; white-space: nowrap; flex-shrink: 0; }
.languages button { display: grid; place-items: center; min-height: 32px; min-width: 0; padding: 5px 9px; border-radius: 999px; font-size: inherit; line-height: 1.8; color: #666a60; }
.languages button.active { background: #191c17; color: #f4f3ed; }
.languages button:hover { background: #dedfd5; color: #191c17; }
.languages button.active:hover { background: #191c17; color: #f4f3ed; }
.mobile-nav { background: var(--base); }
/* Make the current page visible in desktop, mobile and footer navigation. */
.desktop-nav a { padding-block: 8px; }
.desktop-nav a[aria-current="page"] {
  color: var(--heading);
  font-weight: 700;
  box-shadow: 0 3px 0 var(--brand-yellow);
}
.mobile-nav a[aria-current="page"] {
  color: var(--heading);
  font-weight: 700;
  background: var(--panel);
  border-inline-start: 3px solid var(--brand-yellow);
}
.site-footer .footer-nav a[aria-current="page"] {
  color: var(--brand-yellow);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.button { min-height: 48px; padding: 15px 22px; font-size: 12px; font-weight: 600; line-height: 1.4; gap: 24px; }
.button:hover { transform: none; }
.hero-actions .button, .closing-actions .primary { font-size: 11px; }
.primary { background: var(--button-fill); border-color: var(--button-fill); color: var(--heading); }
.primary:hover { background: #e6e9c7; border-color: #bac194; }
.header-cta { background: var(--heading); border-color: var(--heading); color: var(--base); }
.header-cta:hover { background: #333a29; border-color: #333a29; color: var(--base); }
.secondary { background: #f3f2eb80; border-color: #191c1740; color: var(--heading); }
.secondary:hover { background: var(--panel); border-color: var(--gold); }
.hero-badge { background: #e7e8dd99; }
.status-dot { box-shadow: none; }
.slide-dot span { background: #191c1730; border-radius: 0; }
.slide-dot.active span { background: var(--gold); }
.hero-line.accent, em { color: #767b6c; }
.section, .page-hero { background: #f3f2eb40; }
.glass-card { box-shadow: none; backdrop-filter: blur(10px); }
.service-card:hover { border-color: #7b8964; }
.service-icon, .service-tag, .phone-selected-icon { border-color: #64734f45; }
.card-index { color: #747d66; }
.system-explorer { box-shadow: none; }
.window-dots i { background: #191c1740; }
.system-tabs button[aria-selected=true], .phone-selection-tabs button[aria-pressed=true] { background: var(--button-fill); color: var(--heading); border-color: #7b8964; }
.visual-node { background: var(--base); }
.visual-node.center { background: var(--button-fill); border-color: #7b8964; box-shadow: none; }
.process-card { border-color: #64734f55; }
.process-num { color: #7c846f; }
.project-image, .project-detail-image { background: var(--panel); }
.concept-tag { background: #f3f2ebe6; color: var(--heading); }
.project-arrow { background: var(--button-fill); color: var(--heading); }
.filters button.active { background: var(--heading); border-color: var(--heading); color: var(--base); }
dialog { background: var(--base); }
dialog::backdrop { background: #191c1799; }
.dialog-close { background: var(--base); }
.contact-form input, .contact-form select, .contact-form textarea,
.contact-form .contact-select-trigger { background: var(--base); color: var(--heading); border-radius: 3px; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #737b66; }
.contact-form input:focus-visible, .contact-form select:focus-visible, .contact-form textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.contact-select-popup { background: var(--base); border-color: #64734f70; border-radius: 3px; box-shadow: 0 14px 30px #191c1718; }
.contact-select-options { scrollbar-color: var(--gold) var(--panel); }
.contact-form .contact-select-option { border-radius: 3px; }
.contact-form .contact-select-option:hover, .contact-form .contact-select-option:focus-visible { background: var(--panel); color: var(--heading); }
.contact-form .contact-select-option[aria-selected=true] { background: var(--button-fill); color: var(--heading); }
.contact-option-check { border-color: #191c1740; border-radius: 3px; }
.contact-select-option[aria-selected=true] .contact-option-check { background: var(--heading); border-color: var(--heading); color: var(--base); }
.contact-form .contact-select-chip, .contact-form .contact-select-done { background: var(--button-fill); color: var(--heading); border-color: #64734f40; border-radius: 3px; }
.contact-form .contact-select-trigger:hover, .contact-form .contact-select-trigger[aria-expanded=true] { box-shadow: 0 0 0 3px #64734f12; }
/* Keep the physical phone preview legible on its dark screen. */
.phone-screen { --gold: #ffdf00; --muted: #b9c0ae; --line: #ffffff28; font-family: Manrope, Arial, sans-serif; }
html[dir=rtl] .phone-screen { font-family: 'Noto Kufi Arabic', sans-serif; }
.phone-start { background: var(--button-fill); border-radius: 3px; box-shadow: none; }
/* Horizontal pinning, card transforms and fluid anchors remain owned by portfolio.js. */
.portfolio-section { background: #e7e8dd55; border-color: var(--line); }
.portfolio-head h2, .portfolio-card h3 { color: var(--heading); }
.portfolio-head h2 { font-weight: 500; }
.portfolio-head h2 em { color: #767b6c; }
.portfolio-head-note, .portfolio-description, .portfolio-category,
.portfolio-direction, .portfolio-counter { color: var(--muted); }
.portfolio-window { scrollbar-color: #7b896455 transparent; }
.portfolio-card { background: #f3f2eb; border-color: var(--line); border-radius: 3px; box-shadow: none; }
.portfolio-pinned .portfolio-card { border-color: rgb(100 115 79 / calc(.2 + var(--center-glow, 0) * .3)); box-shadow: 0 16px 40px #191c1710; }
.portfolio-card:after { box-shadow: inset 0 0 38px rgb(100 115 79 / calc(var(--center-glow, 0) * .06)); }
.portfolio-card:hover, .portfolio-card:focus-within { border-color: #7b8964; }
.portfolio-media { background: var(--panel); border-color: var(--line); }
.portfolio-card-index { border-radius: 3px; background: #f3f2ebe6; border-color: #191c1730; color: var(--heading); }
.portfolio-case-link { border-radius: 3px; background: var(--button-fill); border-color: var(--button-fill); color: var(--heading); }
.portfolio-case-link:hover { background: #e6e9c7; border-color: #7b8964; }
.portfolio-meter { background: #191c1720; }
.portfolio-meter span { background: var(--gold); box-shadow: none; }
.portfolio-counter b { color: var(--heading); }
.portfolio-media img[src$='m-one-logo.png'], .project-image img[src$='m-one-logo.png'], .project-detail-image img[src$='m-one-logo.png'] { background: var(--panel); }
.site-footer { --heading: #f3f2eb; --muted: #b9c0ae; --gold: #ffdf00; --line: #ffffff20; background: #191c17; color: var(--heading); border-color: var(--line); }
.site-footer .footer-grid h4, .site-footer .footer-brand .footer-logo-name { color: var(--heading); }
.site-footer .footer-brand .footer-logo-name { font-weight: 600; }
.site-footer .footer-grid a, .site-footer .footer-grid span, .footer-brand p,
.footer-copyright { color: var(--muted); }
.site-footer .footer-grid a:hover { color: var(--heading); }
.site-footer .footer-email { color: var(--brand-yellow)!important; }
.footer-brand .footer-logo-name b { color: var(--brand-yellow); }
.footer.footer-signature-row { width: min(1320px, calc(100% - 112px)); border-top: 1px solid #ffffff20; }
.footer-bottom a.footer-signature { display: flex; gap: 9px; }
.back-top { display: flex; align-items: center; gap: 12px; min-height: 40px; color: #b9c0ae; white-space: nowrap; }
.back-top>span { display: grid; place-items: center; width: 20px; height: 20px; color: #ffdf00; }
.footer-bottom .back-top svg { width: 20px; height: 20px; transform: none; }
.site-footer :focus-visible { outline-color: var(--brand-yellow); }
html::-webkit-scrollbar-track, html::-webkit-scrollbar-corner { background: var(--base); border-color: var(--line); }
html::-webkit-scrollbar-thumb { background: #7b8964; border-color: var(--base); border-radius: 3px; }
html::-webkit-scrollbar-thumb:hover, html::-webkit-scrollbar-thumb:active { background: #536045; }
@media(max-width:1150px) { .footer.footer-signature-row { width: calc(100% - 72px); } }
@media(max-width:760px) {
  .topbar { width: calc(100% - 20px); gap: 10px; }
  .languages { font-size: 13px; gap: 2px; padding: 3px; }
  .languages button { min-width: 40px; min-height: 44px; padding: 6px 8px; font-weight: 600; color: #505747; }
  .languages button.active { color: #f4f3ed; }
  .footer.footer-signature-row { width: calc(100% - 40px); }
}
@media(max-width:520px) {
  .site-header .header-brand { gap: 7px; }
  .site-header .header-brand>span:last-child { font-size: 16px; }
  .site-header .header-brand-mark { width: 34px; height: 24px; }
  .portfolio-card { border-radius: 3px; }
  html[dir=rtl] .hero-intro { font-size: 12px; line-height: 2; }
}
@media(max-width:380px) {
  .topbar { width: calc(100% - 12px); gap: 4px; }
  .site-header .header-brand { gap: 7px; }
  .site-header .header-brand>span:last-child { font-size: 14px; }
  .site-header .header-brand b { display: block; font-size: 10px; line-height: 1.1; letter-spacing: .04em; }
  .site-header .header-brand-mark { width: 28px; height: 24px; }
  .header-actions { gap: 4px; }
  .languages { font-size: 12px; padding: 2px; }
  .languages button { min-width: 36px; min-height: 40px; padding: 6px; }
  .menu-toggle { width: 38px; min-width: 38px; height: 44px; flex-shrink: 0; }
}
@media(forced-colors:active) { html { scrollbar-color: auto; } }