/* =============================================
   VARIABLES, RESETS & BASE STYLES (REDESIGN)
   ============================================= */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* Stop iOS Safari auto-inflating text on orientation change, and kill the grey/blue
     tap-flash on touch (we provide our own :active feedback in Responsive.css). */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* On-brand text selection. */
::selection { background: var(--red); color: #fff; }
::-moz-selection { background: var(--red); color: #fff; }

/* Navbar wordmark face (Assets/Fonts/Ersen.ttf, 12 KB, preloaded from index.html). font-display:block
   so the logo never paints in a fallback face first - it is tiny and local, so the wait is ~0. */
@font-face {
  font-family: 'Ersen';
  src: url('../Assets/Fonts/Ersen.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  /* Brand red - the ONLY red on the site (owner, 2026-09-25: "#ED1C24 everywhere"). The darker
     --red-dk shade that primary buttons, hovers and small red text used for extra contrast was
     removed. NOTE: white text on --red is 4.38:1, just under the WCAG AA 4.5:1 for
     normal-size text. It PASSES for large text (18.66px bold / 24px+). If you want the
     small text (AA-large 3:1 is met). */
  --red: #ED1C24;
  --red-glow: rgba(237, 28, 36, .15);
  --navy: #0B1628;
  --navy-mid: #111D33;
  --navy-light: #1A2A44;
  --white: #FFFFFF;
  --off-white: #F5F6F8;
  --g100: #EBEDF2;
  --g200: #D8DCE5;
  --g300: #B8BFCC;
  --g500: #7A839A;
  --g600: #5A6378;
  --g700: #3D4560;
  --g800: #1E2538;
  /* How much every pop-up darkens the page behind it (Login, Customer Area, Resources,
     Sustainability, the photo viewer). Owner, 2026-10-07: "just make it 0.2 darker". */
  --popup-dim: rgba(11, 22, 40, .2);
  --heading: 'Oxanium', sans-serif;
  --body: 'Oxanium', sans-serif;
  --logo: 'Ersen', 'Oxanium', sans-serif;
  --pad: 120px 0;
  --max: 100%;
  --nav: 80px;
}

body {
  font-family: var(--body);
  color: var(--g800);
  line-height: 1.7;
  background: var(--white);
  opacity: 0;
  animation: fadeIn .3s ease .1s forwards;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

/* Respect users who've requested reduced motion: skip transitions, animations and parallax. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  body { opacity: 1 !important; animation: none !important; }
  .reveal { opacity: 1 !important; }
  .hero-title, .hero-label, .hero-description, .hero-buttons .btn,
  .hero-stats, .hero-info-box { opacity: 1 !important; }
}

a {
  text-decoration: none;
  color: inherit;
  transition: color .25s;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.container {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 60px;
}

/* In-page anchor jumps land clear of the fixed navbar (80px desktop / 70px mobile)
   instead of hiding the target heading underneath it. scroll-margin is invisible - it
   only changes where scrollIntoView() stops, so it affects no layout. */
section[id] { scroll-margin-top: 88px; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}