/* ===== Base ===== */
html {scroll-behavior: smooth; scroll-snap-type: y proximity; }
body {font-family: -system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; background: #fff; color: #1d1d1f;  margin: 0; margin-left: 8px; margin-right: 8px; }
h1 { font-size: 3.5em; font-weight: 700; margin: 0; }
h2 { font-size: 3.0em; font-weight: 640; margin: 0; margin-top: 0.3em; margin-bottom: 0.6em; color: #1d1d1f; text-align: center; }
h3 { font-size: 1.5em; font-weight: 400; margin: 0; margin-top: 0.5em; margin-bottom: 0.5em; color: #0071e3; text-align: left; }
p { font-size: 1.2em; line-height: 1.7; font-weight: 350; text-align: justify; }
/* ===== Navigation ===== */
.navbar { background: rgba(255,255,255,0.95); box-shadow: 8px 8px 8px 8px rgba(0,0,0,0.03); position: sticky; top: 0; z-index: 100; margin: 0px;}
.navbar__inner { position: relative; height: 56px; display: flex; align-items: center; justify-content: flex-start; }
.navbar__brand { display: flex; align-items: center; gap: 10px; margin-left: 0; white-space: nowrap; flex: 0 0 auto; }
.navbar__logo { height: 32px; margin-left:16px; width: auto; display: block; }
.navbar__toggle { display: none; margin-left: auto; flex-direction: column; justify-content: center; align-items: center; height: 56px; width: 40px; background: none; border: none; cursor: pointer; z-index: 1001; padding: 0; }
.navbar__toggle-bar { width: 28px; height: 2px; background: #6e6e73; margin: 2.5px 0; border-radius: 2px; transition: 0.3s; }
.navbar__links { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 36px; row-gap:6px; margin: 0; padding: 0; list-style: none; width: max-content; text-align: center; visibility: visible; pointer-events: auto;}
.navbar__links li {display: flex; align-items: center; }
.navbar__links a { color: #1d1d1f; text-decoration: none; font-size: 1.05em; font-weight: 500; padding: 0; transition: color 0.2s; white-space: nowrap; }
.navbar__links a:hover { color: #0071e3; }
/* ===== General Page ===== */
.slide {scroll-margin-top: 56px; margin:0; display: flex; flex-direction: column; border-bottom: none; }
/* ===== Hero Page ===== */
.hero { justify-content: center; align-items: center; text-align: center; min-height: 80vh; background: #fff; }
.hero__content { display: flex; flex-direction: column; align-items: center; }
.hero__logo { display: block; width: 160px; height: 160px; margin: 0 auto 8px; }
.logo-rotator { position: relative; width: 160px; height: 160px; display: inline-block; margin: 0; padding-bottom: 16px;}
.logo-rotator .logo-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 1.2s ease; will-change: opacity; }
.logo-rotator .logo-active { opacity: 1; }
.logo-rotator .logo-fading-out { opacity: 0; }
.logo-rotator:hover .logo-frame { transition: opacity 0.4s ease; }
@media (prefers-reduced-motion: reduce) { .logo-rotator .logo-frame { transition: none; } }
.hero__title { font-size: 3.2em; font-weight: 700; margin-bottom: 0.5em; letter-spacing: -1px; text-align: center; }
.hero__subtitle { font-size: 1.5em; font-weight: 600; color: #6e6e73; margin-bottom: 0.5em; margin-top: 0.5em; text-align: center; }
.hero__strapline { font-size: 1.5em; font-weight: 400; margin: 0; margin-top: 0.5em; margin-bottom: 0.5em; color: #0071e3; text-align: center; }
/* ===== Mobile Nav (small tablets + phones) ===== */
@media (max-width: 900px) {
    /* Navbar */
    .navbar__inner {position: relative; justify-content: flex-start; padding-left: 8px; }
    .navbar__logo { height: 32px; }
    .navbar__toggle { display: flex; margin-left: 0; }
    .navbar__links { position: fixed; top: 56px; left: 0; height: 100svh; width: 260px; max-width: 80vw; padding: 10px 10px 10px; background: rgba(255,255,255,0.95); border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 10px 30px rgba(0,0,0,0.15); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; overflow-y: auto; transform: translateX(-100%); transition: transform 280ms ease, visibility 0s linear 280ms; visibility: hidden; pointer-events: none; z-index: 900; }
    .navbar__links li { display: block; }
    .navbar__links a  { display: block; padding: 10px 8px; text-align: left; }
    .navbar.is-open .navbar__links { transform: translateX(0); visibility: visible; pointer-events: auto; transition: transform 280ms ease; }
}
/* ===== Phone layout (stack/center content) ===== */
@media (max-width: 700px) {
    /* Hero */
    .hero__title { font-size: 2.5em; }
    .hero__subtitle, .hero__strapline { font-size: 1.2em; }
}