:root { --navy: #1B2E4B; --blue: #3A5A8C; --teal: #4ECDC4; --mist: #A8DADC; --bg: #A8DADC; --white: #F7FAFB; --text-dark: #1B2E4B; --text-mid: rgba(27,46,75,0.7); --nav-h: 76px; /* fallback; synced to real nav height by script.js */ } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} /* Visually hidden but still readable by screen readers and search engines — NOT display:none (which some crawlers/assistive tech discount as "not real content"). Standard technique, used here only for the page's single real

— see index.html's opening . / .sr-only{ position:absolute !important;width:1px;height:1px; padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0; } html{scroll-behavior:smooth;} body{background:var(--bg);color:var(--navy);font-family:'Space Grotesk',sans-serif;overflow-x:hidden;} / ── NAV (now a top bar) ── / nav{ position:fixed;top:0;left:0;right:0; width:100%; background:rgba(27,46,75,0.97); backdrop-filter:blur(14px); border-bottom:1px solid rgba(78,205,196,0.15); display:flex;flex-direction:row;align-items:center;justify-content:space-between; / Was flex-wrap:wrap on all sizes, which let the nav
drop onto a second line underneath the logo on ordinary desktop widths, not just genuinely narrow ones. Desktop now never wraps; wrapping is re-enabled only inside the small-screen media query below. / flex-wrap:nowrap;row-gap:0.5rem; padding:1rem 2.5rem;z-index:200; } nav .nav-logo{ display:flex;align-items:center;flex-shrink:0; margin-bottom:0;padding-bottom:0; / Explicit longhand on every side (not just bottom/right) so no browser's default user-agent border can show through — this is what produced the border visible in Edge but not Firefox. / border-top:none;border-left:none;border-bottom:none; border-right:1px solid rgba(78,205,196,0.15); outline:none; padding-right:1.75rem;margin-right:1rem; opacity:1 !important;visibility:visible !important; } nav .nav-logo:focus,nav .nav-logo:focus-visible,nav .nav-logo:active{outline:none;border:none;border-right:1px solid rgba(78,205,196,0.15);} nav .nav-logo img{width:auto;max-height:32px;border:none;outline:none;} .logo-text{ font-family:'Playfair Display',serif;font-size:1rem;font-weight:700; color:var(--white);letter-spacing:0.01em;white-space:nowrap; } .logo-text em{font-style:italic;font-weight:400;color:var(--teal);} nav ul{list-style:none;display:flex;flex-direction:row;flex-wrap:nowrap;gap:0.1rem;flex-shrink:1;} nav ul li a{ font-family:'Montserrat',sans-serif;font-size:0.65rem;font-weight:500; letter-spacing:0.18em;text-transform:uppercase; color:rgba(247,250,251,0.65);text-decoration:none; display:block;padding:0.55rem 0.7rem; border-left:none;border-bottom:2px solid transparent;transition:all 0.3s ease; } nav ul li a:hover,nav ul li a.active{ color:var(--teal);border-bottom-color:var(--teal); } / ── MAIN ── / main{margin-left:0;margin-top:var(--nav-h);} section{ min-height:calc(100vh - var(--nav-h));padding:6rem 5rem; display:flex;flex-direction:column;justify-content:center; position:relative;overflow:hidden; } section:nth-child(odd){background:rgba(168,218,220,0.55);} section:nth-child(even){background:rgba(168,218,220,0.35);} .section-label{ font-family:'Montserrat',sans-serif;font-size:0.62rem; letter-spacing:0.32em;text-transform:uppercase;color:var(--blue); margin-bottom:1.25rem;display:flex;align-items:center;gap:0.75rem; } .section-label::after{content:'';display:block;width:36px;height:1px;background:var(--blue);opacity:0.4;} h2{ font-family:'Playfair Display',serif;font-size:clamp(2rem,3.5vw,3.2rem); font-weight:700;line-height:1.15;color:var(--navy);margin-bottom:1.5rem; } p{ font-family:'Space Grotesk',sans-serif;font-style:italic; font-size:1rem;line-height:1.85;color:var(--text-mid);max-width:640px; } .divider{width:48px;height:2px;background:var(--teal);margin:1.25rem 0;} / ── REVEAL ── / .reveal{opacity:0;transform:translateY(28px);transition:opacity 0.75s ease,transform 0.75s ease;} .reveal.visible{opacity:1;transform:translateY(0);} / ══════════════════════════════ SECTION 1 — MISSION ══════════════════════════════ / #mission{ background:#192F48 !important;position:relative; / Logo and text now stack vertically (was: both independently centered at the exact same point, which — now that the text is also centered per request — meant the opaque logo fully hid it rather than just overlapping its edge). This still reads as "logo above the text" (both in DOM order and, at any breakpoint where they get close enough to brush against each other, in z-index), without the two ever being able to fully collide again. / align-items:center;gap:2.5rem; } / Smooths the hard navy → light-bg cut at the bottom of the mission section, echoing the teal "active" bar used under nav links. / #mission::after{ content:''; position:absolute;left:0;right:0;bottom:0; height:min(22vh,170px); pointer-events:none;z-index:1; background-image: linear-gradient(to right,transparent,rgba(78,205,196,0.85) 50%,transparent), linear-gradient(to bottom,transparent,var(--bg) 90%); background-size:55% 2px,100% 100%; background-position:center 42%,center; background-repeat:no-repeat,no-repeat; } .infinity-wrap{ position:relative; / 200% of the original 34vw / 380px baseline width, per request — but also capped by height (min(46vh,520px)) so it can never grow taller than the section itself on short/wide viewports; the video inside scales down proportionally (object-fit:contain below) rather than overflowing or being cropped. Height cap is a bit smaller than before now that it shares the section with the text block below it rather than sitting on top of it. / width:68vw;max-width:760px; height:auto;max-height:min(46vh,520px); / Kept in case any breakpoint ever brings it close enough to the text to brush against it — not load-bearing now that they no longer share the same position (see #mission above). / z-index:5; display:flex;align-items:center;justify-content:center; border:none;outline:none;box-shadow:none; } .infinity-wrap img, .infinity-wrap canvas, .infinity-wrap video{ width:100%;height:auto;max-height:100%;object-fit:contain;display:block; border:0 none !important;outline:0 none !important;box-shadow:none !important; -webkit-appearance:none;appearance:none;background:transparent; } / Chromium/Edge draws its own default UI (border + play glyph) over a