body { margin: 0; text-wrap: pretty; }
#page { --font-body: 'Poppins', system-ui, sans-serif; font-family: var(--font-body); }
#page p, #page li, #page span, #page figcaption, #page a:not(.btn), #page td, #page th { font-family: 'Poppins', system-ui, sans-serif; }
a { color: var(--color-accent-700); text-decoration: none; }
#page { --color-accent: #1b5fa8; --color-accent-100:#e7eff8; --color-accent-200:#c6d9ee; --color-accent-300:#9dbde0; --color-accent-400:#4b83be; --color-accent-500:#1b5fa8; --color-accent-600:#17518f; --color-accent-700:#124272; --color-accent-800:#0e3358; --color-accent-900:#0a2540; --color-accent-2:#1b5fa8; --color-accent-2-500:#1b5fa8; --color-accent-2-600:#17518f; --color-accent-2-700:#124272; }

a:hover { color: var(--color-accent); }
#page .prem-dd { position: relative; }
#page .prem-dd-menu { display: none; }
#page .prem-dd:hover .prem-dd-menu, #page .prem-dd:focus-within .prem-dd-menu { display: block; }
#page .prem-dd-menu a::after { display: none; }
#page .prem-dd-menu a:hover { background: var(--color-accent); color: #fff !important; }

#page .btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; width: auto !important; max-width: max-content; border-radius: 8px !important; padding: 14px 22px !important; font-family: var(--font-heading); font-weight: 700; font-size: 15px; line-height: 1; border-width: 2px; transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease; }
#page .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
#page .btn:active { transform: translateY(0); box-shadow: none; }
#page .btn svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 1150px) {
  .prem-nav-links { gap: 24px !important; font-size: 16px !important; }
}
@media (max-width: 1000px) {
  .prem-nav-links { display: none !important; }
}
@media (max-width: 900px) {
  .prem-hero-h1 { font-size: 42px !important; }
  .prem-hero-row { grid-template-columns: minmax(0,1fr) !important; }
  .prem-hero-gallery { padding: 0 clamp(40px,8vw,96px) clamp(40px,6vw,72px) !important; }
  .prem-split { grid-template-columns: minmax(0,1fr) !important; }
  .prem-cta-h { font-size: 34px !important; }
  .prem-range { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
  .prem-explainer { grid-template-columns: minmax(0,1fr) !important; }
}
@media (max-width: 600px) {
  .prem-range { grid-template-columns: minmax(0,1fr) !important; }
}

/* ---- motion ---- */
@keyframes prem-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes prem-drift { from { transform: scale(1.06) translate3d(0,0,0); } to { transform: scale(1.14) translate3d(0,-1.2%,0); } }
@keyframes prem-ring { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(1.9); opacity: 0; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes prem-bar { from { width: 0; } to { width: 18%; } }

#page .prem-in { opacity: 0; }
#page .prem-in.is-vis { animation: prem-rise .72s cubic-bezier(.22,.7,.24,1) both; }

#page header img[alt^="FS 2200"] { animation: prem-drift 26s ease-in-out infinite alternate; will-change: transform; }
#page header .prem-hero-h1, #page header h2, #page header ul li, #page header .btn { animation: prem-rise .8s cubic-bezier(.22,.7,.24,1) both; }
#page header h2 { animation-delay: .1s; }
#page header ul li:nth-child(1) { animation-delay: .2s; }
#page header ul li:nth-child(2) { animation-delay: .29s; }
#page header ul li:nth-child(3) { animation-delay: .38s; }
#page header ul li:nth-child(4) { animation-delay: .47s; }
#page header .btn { animation-delay: .58s; }

#page .prem-nav-links a { position: relative; transition: color .25s ease; }
#page .prem-nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .32s cubic-bezier(.22,.7,.24,1); }
#page .prem-nav-links a:hover::after { transform: scaleX(1); }

#page .btn { transition: transform .22s cubic-bezier(.22,.7,.24,1), box-shadow .22s ease, background-color .22s ease, color .22s ease; }
#page .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(10,37,64,.22); }
#page .btn:active { transform: translateY(0); }

#page #range > div { transition: transform .35s cubic-bezier(.22,.7,.24,1), box-shadow .35s ease, z-index 0s; position: relative; }
#page #range > div:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(10,37,64,.16); z-index: 2; }
#page #range > div > div:first-child { overflow: hidden; }
#page #range > div > div:first-child img { transition: transform .7s cubic-bezier(.22,.7,.24,1); }
#page #range > div:hover > div:first-child img { transform: scale(1.07); }
#page #range a[href] { display: inline-block; transition: transform .28s cubic-bezier(.22,.7,.24,1); }
#page #range > div:hover a[href] { transform: translateX(5px); }

#page figure [aria-label="Play video"], #page figure [aria-hidden="true"] > span { transition: transform .3s cubic-bezier(.22,.7,.24,1); }
#page figure:hover [aria-label="Play video"] > span { transform: scale(1.09); }
#page .prem-pulse { position: absolute; width: 78px; height: 78px; border: 2px solid #fff; border-radius: 4px; animation: prem-ring 2.6s ease-out infinite; pointer-events: none; }
#page figure .is-vis-bar { animation: prem-bar 2.4s ease-out both; }

#page footer a { transition: color .22s ease, transform .22s ease; display: inline-block; }
#page footer a:hover { color: #fff; transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  #page *, #page *::after { animation: none !important; transition: none !important; }
  #page .prem-in { opacity: 1 !important; }
}
#page .prem-play:hover { background: rgba(20,18,17,0.12) !important; }
