/* Media Fera — Base styles Reset, global typography and small structural helpers. */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 96px; /* keeps anchored sections clear of the floating header */ } html, body { margin: 0; padding: 0; } body { background: var(--color-background); color: var(--color-on-surface); font: 400 15px/22px var(--font-display); letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; overscroll-behavior: none; transition: background-color 250ms ease, color 250ms ease; } /* Restrained theme-switch transition on the main surface elements only — not every element, and it never plays on first load: a CSS transition can only animate a value that changes after the element already has one, so the very first paint (theme set inline in ) is always instant. */ main, .site-header__bar, .surface-card, .project-card, .service-card, .method-card, .ai-card, .metric-card, .pill, .geo-panel, .geo-highlight, .footer-card, .mobile-nav, .cta-panel, .production-feature { transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease; } @media (prefers-reduced-motion: reduce) { body, main, .site-header__bar, .surface-card, .project-card, .service-card, .method-card, .ai-card, .metric-card, .pill, .geo-panel, .geo-highlight, .footer-card, .mobile-nav, .cta-panel, .production-feature { transition: none; } } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, p, blockquote { margin: 0; } ::selection { background: var(--color-secondary-fixed); color: var(--color-on-secondary-fixed); } ::-webkit-scrollbar { display: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Material Symbols icon baseline alignment */ .material-symbols-outlined { font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; line-height: 1; vertical-align: middle; } /* Section rhythm shared by every homepage section */ .section { width: 100%; padding-inline: var(--gutter-mobile); padding-block: var(--space-xl); } .section--tinted { background: var(--color-surface-container-lowest); } .section--tight { padding-block: var(--space-xl); } .section__inner { max-width: var(--content-max); margin-inline: auto; } @media (min-width: 768px) { .section { padding-inline: var(--margin); padding-block: var(--space-2xl); } .section--tight { padding-block: var(--space-xl); } }