/* Newport Beach FIT — Shared Styles */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#F8F8F3;--dark:#0A0A0A;--dark2:#141414;--surface:#EFEFEA;
  --yellow:#FDEF74;--yellow-dim:rgba(253,239,116,.12);--yellow-border:rgba(253,239,116,.25);
  --text:#0A0A0A;--text-sub:#555555;--text-muted:#999999;
  --border:rgba(0,0,0,0.08);--border-soft:rgba(0,0,0,0.05);
  --on-dark:rgba(255,255,255,.65);--radius:12px;--nav-h:88px
}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;font-weight:700;line-height:1.1}
img{display:block;max-width:100%}

/* DEMO BANNER */
.demo-banner{background:var(--yellow);padding:9px 48px;text-align:center;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dark);position:relative;z-index:201}
.demo-banner a{color:var(--dark);text-decoration:none;opacity:.7}

/* HEADER */
header{position:fixed;top:0;left:0;right:0;z-index:200;transform:translateY(0);transition:transform .35s cubic-bezier(.77,0,.175,1),background .3s,box-shadow .3s;background:transparent}
header.scrolled{background:rgba(10,10,10,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
header.hidden{transform:translateY(-100%)}
nav{padding:0 48px;height:var(--nav-h);display:flex;justify-content:space-between;align-items:center}
.wordmark{font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;text-decoration:none}
.wordmark span{color:var(--yellow)}
.nav-links{display:flex;gap:32px;list-style:none;align-items:center}
.nav-links a{font-size:13px;font-weight:500;color:rgba(255,255,255,.65);text-decoration:none;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-links a.active{color:var(--yellow) !important}
.btn-nav{padding:10px 22px;background:var(--yellow);color:var(--dark) !important;font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border-radius:6px;transition:opacity .2s}
.btn-nav:hover{opacity:.9}

/* HAMBURGER */
.hamburger{display:none;flex-direction:column;justify-content:space-between;width:28px;height:18px;background:none;border:none;cursor:pointer;padding:0;z-index:300}
.hamburger span{display:block;height:1.5px;background:#fff;transition:transform .3s ease,opacity .3s ease;transform-origin:center}
.hamburger.is-open span:nth-child(1){transform:translateY(8.25px) rotate(45deg)}
.hamburger.is-open span:nth-child(2){opacity:0}
.hamburger.is-open span:nth-child(3){transform:translateY(-8.25px) rotate(-45deg)}

/* DRAWER */
.menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);opacity:0;pointer-events:none;transition:opacity .35s;z-index:250}
.menu-overlay.is-open{opacity:1;pointer-events:all}
.menu-drawer{position:fixed;top:0;right:0;width:min(340px,85vw);height:100vh;background:var(--dark2);z-index:260;transform:translateX(100%);transition:transform .4s cubic-bezier(.77,0,.175,1);display:flex;flex-direction:column;padding:52px 40px 56px;border-left:1px solid rgba(255,255,255,.06)}
.menu-drawer.is-open{transform:translateX(0)}
.drawer-wordmark{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);margin-bottom:56px}
.drawer-nav{list-style:none;flex:1}
.drawer-nav li{border-top:1px solid rgba(255,255,255,.07)}
.drawer-nav li:last-child{border-bottom:1px solid rgba(255,255,255,.07)}
.drawer-nav a{display:block;padding:20px 0;font-family:'Space Grotesk',sans-serif;font-size:clamp(1.4rem,4vw,1.8rem);font-weight:700;color:#fff;text-decoration:none;transition:color .2s,padding-left .2s}
.drawer-nav a:hover{color:var(--yellow);padding-left:8px}
.drawer-cta{margin-top:40px;display:block;text-align:center;padding:16px 24px;background:var(--yellow);color:var(--dark);font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-radius:6px}

/* BUTTONS */
.btn-primary{display:inline-block;padding:15px 34px;background:var(--yellow);color:var(--dark);font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-radius:6px;transition:opacity .2s,transform .15s}
.btn-primary:hover{opacity:.9;transform:scale(.97)}
.btn-outline-light{display:inline-block;padding:15px 34px;border:1px solid rgba(255,255,255,.25);color:rgba(255,255,255,.85);font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-radius:6px;transition:border-color .2s,color .2s}
.btn-outline-light:hover{border-color:#fff;color:#fff}

/* SECTION LABEL */
.section-label{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);margin-bottom:14px}
.section-label-dark{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);margin-bottom:14px}

/* FOOTER */
footer{padding:40px 48px;background:var(--dark);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.footer-left .footer-brand{font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;margin-bottom:6px}
.footer-left .footer-brand span{color:var(--yellow)}
.footer-left p{font-size:12px;color:rgba(255,255,255,.35);letter-spacing:.05em}
.footer-links{display:flex;gap:24px;flex-wrap:wrap}
.footer-links a{font-size:12px;color:rgba(255,255,255,.4);text-decoration:none;letter-spacing:.05em;transition:color .2s}
.footer-links a:hover{color:#fff}
.footer-copy{font-size:11px;color:rgba(255,255,255,.2);letter-spacing:.05em;width:100%;padding-top:24px;border-top:1px solid rgba(255,255,255,.06)}

/* SHARED JS BEHAVIOR (inline per page) */

@media(max-width:900px){
  .nav-links{display:none}
  .hamburger{display:flex}
}
@media(max-width:768px){
  nav{padding:0 24px}
  footer{padding:32px 24px}
  .demo-banner{padding:9px 24px}
}