:root {
  --smmb-porcelain: #f4f5f2;
  --smmb-pearl: #e7e9e6;
  --smmb-silver: #c9cdca;
  --smmb-steel: #aeb3af;
  --smmb-graphite: #171918;
  --smmb-muted: #626763;
  --smmb-accent: #214e68;
  --smmb-accent-bright: #3b7191;
  --smmb-on-accent: #f7f7f3;
  --smmb-line: rgba(23, 25, 24, .18);
  --smmb-ease: cubic-bezier(.2, .8, .2, 1);
}

html { scroll-behavior: smooth; overflow-x: hidden; }
body { width: 100%; max-width: 100%; overflow-x: hidden; }
::selection { color: var(--smmb-on-accent); background: var(--smmb-accent); }

/* Shared porcelain, silver and graphite foundation. */
body.smmburo-oxide-home {
  --paper: var(--smmb-porcelain);
  --white: var(--smmb-on-accent);
  --ink: var(--smmb-graphite);
  --muted: var(--smmb-muted);
  --line: var(--smmb-line);
  --oxide: var(--smmb-accent);
  --oxide-dark: #183d53;
  --mint: #9eb7c4;
}

body.smmburo-oxide-media,
body.smmburo-oxide-practice,
body.smmburo-case,
body.smmburo-concept,
body.smmburo-about,
body.smmburo-concepts,
body.smmburo-contacts { background: var(--smmb-porcelain); color: var(--smmb-graphite); }

.topbar,
.top {
  background: rgba(244, 245, 242, .84) !important;
  border-color: var(--smmb-line) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  position: sticky !important;
  top: 0;
  z-index: 50 !important;
}

.desktop-nav a,
.nav a,
.nav span { border-color: var(--smmb-line) !important; transition: color .45s var(--smmb-ease), background .45s var(--smmb-ease); }
.desktop-nav a:hover,
.nav a:hover,
.nav .active { color: var(--smmb-on-accent) !important; background: var(--smmb-accent) !important; }

.eyebrow i,
.kicker i { background: var(--smmb-accent-bright) !important; }

.button,
.read,
.text-link,
.about-links a,
.contact-grid a { transition: color .35s var(--smmb-ease), background .35s var(--smmb-ease), transform .35s var(--smmb-ease), box-shadow .35s var(--smmb-ease); }
.primary { color: var(--smmb-on-accent) !important; background: var(--smmb-accent) !important; }
.primary:hover { background: #183d53 !important; box-shadow: 0 16px 35px rgba(33, 78, 104, .22); transform: translateY(-4px); }
.read:hover,
.text-link:hover,
.about-links a:hover,
.contact-grid a:hover { color: var(--smmb-accent); }

/* Home */
.smmburo-oxide-home .topbar { background: rgba(244, 245, 242, .84) !important; }
.smmburo-oxide-home .grid-paper { background-color: var(--smmb-porcelain); }
.smmburo-oxide-home .oxide-cut {
  background: linear-gradient(90deg, #4f5552 0%, #f9faf8 17%, #9da39f 34%, #f6f8f5 53%, #737a75 73%, #e7eae7 89%, #555a57 100%);
  mix-blend-mode: screen;
  opacity: .82;
  box-shadow: 18px 0 44px rgba(45, 50, 47, .14), inset 0 0 12px rgba(255, 255, 255, .8);
}
.smmburo-oxide-home .metric-card:hover {
  background: linear-gradient(145deg, rgba(59, 113, 145, .92), rgba(33, 78, 104, .86));
  box-shadow: 0 34px 54px rgba(33, 78, 104, .28), inset 0 1px rgba(255, 255, 255, .5);
}
.smmburo-oxide-home .route-strip a:hover,
.smmburo-oxide-home .article-card.medium,
.smmburo-oxide-home .case-card.oxide { color: var(--smmb-on-accent); background: var(--smmb-accent); }
.smmburo-oxide-home .feature-index span,
.smmburo-oxide-home .concept-number span { color: var(--smmb-accent); }
.smmburo-oxide-home .radar i,
.smmburo-oxide-home .concept-scenes i { background: var(--smmb-accent-bright); box-shadow: 0 0 0 8px rgba(59, 113, 145, .16); }
.smmburo-oxide-home .concept-scenes div:after { background: linear-gradient(120deg, transparent 45%, rgba(59, 113, 145, .34)); }
.smmburo-oxide-home .concept-frame:before,
.smmburo-oxide-home .lab-mark:after { background: linear-gradient(180deg, var(--smmb-accent-bright), var(--smmb-accent)); }
.smmburo-oxide-home .proof { background: var(--smmb-silver); }
.smmburo-oxide-home .featured,
.smmburo-oxide-home .latest,
.smmburo-oxide-home .about { background: var(--smmb-porcelain); }
.smmburo-oxide-home .feature-data,
.smmburo-oxide-home .article-card.large,
.smmburo-oxide-home .concept-frame { background: var(--smmb-pearl); }
.smmburo-oxide-home .footer { background: var(--smmb-accent); }

/* Media */
.smmburo-oxide-media .nav .active,
.smmburo-oxide-media .card.oxide,
.smmburo-oxide-media .heist-brand,
.smmburo-oxide-media .footer { background: var(--smmb-accent) !important; }
.smmburo-oxide-media .issue h1 em,
.smmburo-oxide-media .ticker b,
.smmburo-oxide-media .heist-item b,
.smmburo-oxide-media .manifesto .mark { color: var(--smmb-accent) !important; }
.smmburo-oxide-media .signal { background: var(--smmb-accent-bright); box-shadow: 0 0 0 10px rgba(59,113,145,.22), 0 0 0 22px rgba(59,113,145,.1); }
.smmburo-oxide-media .issue-art:before { background: linear-gradient(#aeb3af, #f3f4f1, #727875); box-shadow: 25px 0 50px rgba(0,0,0,.22); }
.smmburo-oxide-media .card,
.smmburo-oxide-media .archive { background: var(--smmb-pearl); }
.smmburo-oxide-media .card.main { background: var(--smmb-silver); }
.smmburo-oxide-media .dep:hover { color: var(--smmb-on-accent); background: var(--smmb-accent); }
.smmburo-oxide-media .heist-list,
.smmburo-oxide-media .manifesto { background: var(--smmb-porcelain); }
.smmburo-oxide-media .issue-art {
  color: var(--smmb-on-accent) !important;
  background: var(--smmb-accent) !important;
}

/* Practice */
.smmburo-oxide-practice .nav .active,
.smmburo-oxide-practice .role,
.smmburo-oxide-practice .role-card,
.smmburo-oxide-practice .honest,
.smmburo-oxide-practice .case-card.red { background: var(--smmb-accent) !important; }
.smmburo-oxide-practice .hero h1 em,
.smmburo-oxide-practice .case-mark b,
.smmburo-oxide-practice .metric strong,
.smmburo-oxide-practice .before b,
.smmburo-oxide-practice .flow-item b,
.smmburo-oxide-practice .commerce-metrics strong,
.smmburo-oxide-practice .eff-row b,
.smmburo-oxide-practice .footer h2 em { color: var(--smmb-accent) !important; }
.smmburo-oxide-practice .ticker b { color: var(--smmb-accent-bright) !important; }
.smmburo-oxide-practice .role-card p,
.smmburo-oxide-practice .honest p { color: rgba(247, 247, 243, .82); }
.smmburo-oxide-practice .bar { background: var(--smmb-accent); }
.smmburo-oxide-practice .hero,
.smmburo-oxide-practice .hero > * { min-width: 0; }
.smmburo-oxide-practice .hero-right { overflow: hidden; }
.smmburo-oxide-practice .case-mark { font-size: clamp(80px, 6.6vw, 104px); }
.smmburo-oxide-practice .commerce-copy,
.smmburo-oxide-practice .portfolio { background: var(--smmb-silver); }
.smmburo-oxide-practice .commerce-panel,
.smmburo-oxide-practice .efficiency { background: var(--smmb-porcelain); }

/* About */
.smmburo-about .hero,
.smmburo-about .education { background: var(--smmb-porcelain); }
.smmburo-about .hero h1 em,
.smmburo-about .formula b,
.smmburo-about .time small,
.smmburo-about .edu b,
.smmburo-about .manifesto .mark { color: var(--smmb-accent) !important; }
.smmburo-about .ticker,
.smmburo-about .role.red,
.smmburo-about .range-left,
.smmburo-about .footer { color: var(--smmb-on-accent); background: var(--smmb-accent) !important; }
.smmburo-about .trajectory,
.smmburo-about .range-map,
.smmburo-about .role.silver { background: var(--smmb-silver); }

/* Concepts */
.smmburo-concepts .hero,
.smmburo-concepts .method { background: var(--smmb-porcelain); }
.smmburo-concepts .hero h1 em,
.smmburo-concepts .principles b,
.smmburo-concepts .step b,
.smmburo-concepts .manifesto .mark { color: var(--smmb-accent) !important; }
.smmburo-concepts .ticker,
.smmburo-concepts .world.red,
.smmburo-concepts .cinema-copy,
.smmburo-concepts .archive-card.red,
.smmburo-concepts .footer { color: var(--smmb-on-accent); background: var(--smmb-accent) !important; }
.smmburo-concepts .planet,
.smmburo-concepts .drop { background: var(--smmb-accent-bright) !important; box-shadow: 0 0 80px rgba(59,113,145,.3); }
.smmburo-concepts .world.main,
.smmburo-concepts .cinema-stage,
.smmburo-concepts .archive,
.smmburo-concepts .archive-card { background: var(--smmb-silver); }

/* Contacts keeps its dramatic two-door interaction, now in the new palette. */
.smmburo-contacts { --paper: var(--smmb-porcelain); --silver: var(--smmb-pearl); --oxide: var(--smmb-accent); --ink: var(--smmb-graphite); }
.smmburo-contacts .door-telegram { color: var(--smmb-on-accent); background: var(--smmb-accent) !important; }
.smmburo-contacts .door:after { background: var(--smmb-accent); }

/* 1.7.1 contrast pass: remove inherited black surfaces and keep the palette airy. */
.smmburo-oxide-home .hero-visual img {
  filter: grayscale(1) brightness(.80) contrast(1.14) !important;
}
.smmburo-oxide-home .hero-visual:after {
  background: linear-gradient(90deg, rgba(14, 28, 36, .24), rgba(14, 28, 36, .02) 48%, rgba(14, 28, 36, .10)) !important;
}
.smmburo-oxide-home .oxide-cut {
  background: linear-gradient(90deg, #48545a 0%, #f4f7f6 18%, #7f929c 45%, #dce4e5 67%, #3b4a52 100%) !important;
  mix-blend-mode: screen !important;
  opacity: .72 !important;
}

.smmburo-oxide-home .dark-section {
  color: var(--smmb-graphite) !important;
  background: var(--smmb-silver) !important;
}
.smmburo-oxide-home .dark-section .section-label.light {
  color: var(--smmb-muted) !important;
  border-color: var(--smmb-line) !important;
}
.smmburo-oxide-home .dark-section .section-intro p,
.smmburo-oxide-home .lab-copy > p:not(.eyebrow),
.smmburo-oxide-home .lab-mark span { color: var(--smmb-muted) !important; }
.smmburo-oxide-home .case-card.graphite {
  color: var(--smmb-on-accent) !important;
  background: var(--smmb-accent-bright) !important;
}
.smmburo-oxide-home .concept-scenes {
  color: var(--smmb-graphite) !important;
  background: var(--smmb-steel) !important;
}
.smmburo-oxide-home .concept-scenes div { border-color: rgba(23, 25, 24, .24) !important; }
.smmburo-oxide-home .article-card.quote {
  color: var(--smmb-graphite) !important;
  background: var(--smmb-steel) !important;
}
.smmburo-oxide-home .lab {
  color: var(--smmb-graphite) !important;
  background: var(--smmb-pearl) !important;
}
.smmburo-oxide-home .lab-copy { border-color: var(--smmb-line) !important; }
.smmburo-oxide-home .dark-section .outline {
  color: var(--smmb-graphite) !important;
  border-color: var(--smmb-graphite) !important;
}

.smmburo-oxide-media .card.dark {
  color: var(--smmb-on-accent) !important;
  background: var(--smmb-accent-bright) !important;
}
.smmburo-oxide-media .departments {
  color: var(--smmb-graphite) !important;
  background: var(--smmb-silver) !important;
}
.smmburo-oxide-media .departments .label,
.smmburo-oxide-media .dep-list,
.smmburo-oxide-media .dep { border-color: var(--smmb-line) !important; }
.smmburo-oxide-media .departments .label,
.smmburo-oxide-media .dep b,
.smmburo-oxide-media .dep p { color: var(--smmb-muted) !important; }
.smmburo-oxide-media .filters .on {
  color: var(--smmb-on-accent) !important;
  background: var(--smmb-accent) !important;
}

.smmburo-oxide-practice .ticker {
  color: var(--smmb-on-accent) !important;
  background: var(--smmb-accent) !important;
}
.smmburo-oxide-practice .ticker b { color: #b9d3e1 !important; }
.smmburo-oxide-practice .system {
  color: var(--smmb-graphite) !important;
  background: var(--smmb-pearl) !important;
}
.smmburo-oxide-practice .system .label,
.smmburo-oxide-practice .flow,
.smmburo-oxide-practice .flow-item { border-color: var(--smmb-line) !important; }
.smmburo-oxide-practice .system .label,
.smmburo-oxide-practice .system-head p,
.smmburo-oxide-practice .flow-item p { color: var(--smmb-muted) !important; }
.smmburo-oxide-practice .flow-item strong { color: var(--smmb-graphite) !important; }
.smmburo-oxide-practice .case-card.main {
  color: var(--smmb-on-accent) !important;
  background: var(--smmb-accent) !important;
}
.smmburo-oxide-practice .case-card.red {
  color: var(--smmb-on-accent) !important;
  background: var(--smmb-accent-bright) !important;
}
.smmburo-oxide-practice .case-card.main *,
.smmburo-oxide-practice .case-card.red * { color: inherit !important; }
.smmburo-oxide-practice .footer {
  color: var(--smmb-graphite) !important;
  background: var(--smmb-pearl) !important;
}
.smmburo-oxide-practice .footer h2 em { color: var(--smmb-accent) !important; }
.smmburo-oxide-practice .footer-bottom { border-color: var(--smmb-line) !important; }

.smmburo-about .roles {
  color: var(--smmb-graphite) !important;
  background: var(--smmb-silver) !important;
}
.smmburo-about .roles .label,
.smmburo-about .role-grid,
.smmburo-about .role { border-color: var(--smmb-line) !important; }
.smmburo-about .roles .label,
.smmburo-about .roles-head p { color: var(--smmb-muted) !important; }
.smmburo-about .role.red {
  color: var(--smmb-on-accent) !important;
  background: var(--smmb-accent) !important;
}
.smmburo-about .education-note {
  color: var(--smmb-on-accent) !important;
  background: var(--smmb-accent-bright) !important;
}
.smmburo-about .education-note small { color: rgba(247, 247, 243, .72) !important; }
.smmburo-about .manifesto {
  color: var(--smmb-graphite) !important;
  background: var(--smmb-pearl) !important;
}
.smmburo-about .manifesto p { color: var(--smmb-muted) !important; }
.smmburo-about .manifesto p strong { color: var(--smmb-graphite) !important; }

.smmburo-concepts .hero-art {
  color: var(--smmb-on-accent) !important;
  background: var(--smmb-accent) !important;
}
.smmburo-concepts .worlds {
  color: var(--smmb-graphite) !important;
  background: var(--smmb-silver) !important;
}
.smmburo-concepts .worlds .label,
.smmburo-concepts .world { border-color: var(--smmb-line) !important; }
.smmburo-concepts .worlds .label,
.smmburo-concepts .world-head p { color: var(--smmb-muted) !important; }
.smmburo-concepts .world.red {
  color: var(--smmb-on-accent) !important;
  background: var(--smmb-accent) !important;
}
.smmburo-concepts .world.black {
  color: var(--smmb-on-accent) !important;
  background: var(--smmb-accent-bright) !important;
}
.smmburo-concepts .archive-card.dark {
  color: var(--smmb-on-accent) !important;
  background: var(--smmb-accent) !important;
}
.smmburo-concepts .manifesto {
  color: var(--smmb-graphite) !important;
  background: var(--smmb-pearl) !important;
}
.smmburo-concepts .manifesto p { color: var(--smmb-muted) !important; }
.smmburo-contacts .postscript {
  color: var(--smmb-graphite) !important;
  background: var(--smmb-steel) !important;
}

@media (max-width: 900px) {
  .smmburo-oxide-home .mobile-menu nav {
    color: var(--smmb-on-accent) !important;
    background: var(--smmb-accent) !important;
  }
}

/* Shared motion and tactile response. Motion only hides content after JS is ready. */
html[data-smmb-motion="ready"] .smmb-reveal {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(30px);
  transition: opacity .85s var(--smmb-ease), filter .85s var(--smmb-ease), transform .85s var(--smmb-ease);
  transition-delay: calc(var(--smmb-order, 0) * 70ms);
}
html[data-smmb-motion="ready"] .smmb-reveal.smmb-visible { opacity: 1; filter: none; transform: none; }

.smmb-card-motion { transition: color .5s var(--smmb-ease), background .5s var(--smmb-ease), transform .5s var(--smmb-ease), box-shadow .5s var(--smmb-ease), padding .5s var(--smmb-ease); }
.smmb-card-motion:hover { transform: translateY(-7px); box-shadow: 0 22px 44px rgba(23, 25, 24, .13); }
.smmb-card-motion:hover [aria-hidden="true"],
.smmb-card-motion:hover > span:last-child { transform: translate(4px, -4px) rotate(7deg); }

.smmburo-oxide-media .card:not(.dark):hover,
.smmburo-oxide-media .archive-row:hover,
.smmburo-oxide-practice .case-card:not(.main):hover,
.smmburo-oxide-practice .eff-row:hover,
.smmburo-about .time:hover,
.smmburo-about .sector:hover,
.smmburo-about .edu:hover,
.smmburo-concepts .step:hover,
.smmburo-concepts .archive-card:not(.dark):hover {
  color: var(--smmb-on-accent) !important;
  background: var(--smmb-accent) !important;
}
.smmburo-oxide-media .archive-row:hover *,
.smmburo-oxide-practice .eff-row:hover *,
.smmburo-about .time:hover *,
.smmburo-about .sector:hover *,
.smmburo-about .edu:hover *,
.smmburo-concepts .step:hover * { color: inherit !important; }
.smmburo-about .role:hover,
.smmburo-concepts .world:hover { transform: translateY(-8px); box-shadow: 0 25px 55px rgba(23,25,24,.22); }

.smmb-bar { transform: scaleY(0); transform-origin: bottom; transition: transform .9s var(--smmb-ease); transition-delay: calc(var(--smmb-order, 0) * 70ms); }
.smmb-bar.smmb-visible { transform: scaleY(1); }

.ticker.smmb-ticker { padding: 0 !important; }
.smmb-ticker-track { min-width: max-content; display: flex; align-items: center; gap: 48px; padding-left: 6vw; animation: smmbTicker 32s linear infinite; }
.smmb-ticker:hover .smmb-ticker-track { animation-play-state: paused; }
@keyframes smmbTicker { to { transform: translateX(-50%); } }
@keyframes radarPulse {
  0%, 100% { box-shadow: 0 0 0 7px rgba(59, 113, 145, .18); }
  50% { box-shadow: 0 0 0 17px rgba(59, 113, 145, 0); }
}

.smmb-parallax { --smmb-x: 0px; --smmb-y: 0px; }
.smmburo-about .portrait.smmb-parallax img { transform: translate3d(var(--smmb-x), var(--smmb-y), 0) scale(1.045); transition: transform .85s var(--smmb-ease); }
.smmburo-concepts .hero-art.smmb-parallax .planet { transform: translate3d(var(--smmb-x), var(--smmb-y), 0); transition: transform .85s var(--smmb-ease); }
.smmburo-oxide-media .issue-art.smmb-parallax:before { transform: translate3d(var(--smmb-x), var(--smmb-y), 0) skew(-13deg); transition: transform .85s var(--smmb-ease); }

@media (max-width: 900px) {
  .topbar,
  .top { position: relative !important; }
  .smmb-card-motion:hover { transform: none; box-shadow: none; }
  .smmb-ticker-track { animation-duration: 24s; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html[data-smmb-motion="ready"] .smmb-reveal { opacity: 1; filter: none; transform: none; }
  .smmb-bar { transform: scaleY(1); }
}