/* BioHacking Beauty (Confidential) — global styles */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',system-ui,sans-serif;background:#F4F9FD;color:#16233A;line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
h1,h2,h3,h4{text-wrap:balance}
p{text-wrap:pretty}
a{transition:opacity .18s}
a:hover{opacity:.82}
@keyframes fadeInUp{0%{opacity:0;transform:translateY(28px)}100%{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ───────── NAV ───────── */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:#F4F9FD;box-shadow:none;border-bottom:1px solid transparent;padding:0 56px;height:78px;display:flex;align-items:center;justify-content:space-between;transition:all .3s ease;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.site-nav.scrolled{background:rgba(255,255,255,.97);box-shadow:0 4px 26px rgba(23,54,93,.09);border-bottom-color:rgba(211,226,240,.9)}
.nav-logo{display:flex;align-items:center;gap:13px;flex-shrink:0}
.nav-logo img{height:46px;width:auto;object-fit:contain;mix-blend-mode:multiply}
.nav-links{display:flex;align-items:center;gap:42px}
.nav-link{font-size:14.5px;font-weight:400;color:#16233A;text-decoration:none;letter-spacing:.02em;padding-bottom:3px;border-bottom:2px solid transparent;transition:color .2s}
.nav-link:hover{color:#4F8FCB;opacity:1}
.nav-link.is-active{color:#4F8FCB;font-weight:600;border-bottom-color:#4F8FCB}
.nav-cta{display:flex;align-items:center;gap:12px;flex-shrink:0}
.btn-outline{text-decoration:none;color:#16233A;font-size:14px;font-weight:500;padding:10px 22px;border:1.5px solid #4F8FCB;border-radius:5px;letter-spacing:.02em;transition:background .2s,border-color .2s,color .2s}
.btn-outline:hover{background:#EAF3FB;border-color:#17365D;color:#17365D;opacity:1}
.btn-navy{text-decoration:none;color:#fff;font-size:14px;font-weight:600;padding:10px 24px;background:#17365D;border-radius:5px;letter-spacing:.03em;transition:background .2s}
.btn-navy:hover{background:#21507F;opacity:1}
.nav-burger{display:none;background:none;border:none;cursor:pointer;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.nav-burger span{display:block;width:24px;height:2px;background:#17365D;border-radius:2px}
.mobile-menu{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;z-index:999;background:#fff;padding:18px 22px 40px;flex-direction:column;overflow-y:auto;animation:fadeIn .2s ease}
.mobile-menu.open{display:flex}
.mobile-menu .mm-link{font-size:18px;font-weight:500;color:#17365D;text-decoration:none;padding:17px 4px;border-bottom:1px solid #EAF3FB}
.main{padding-top:78px}

/* ───────── HOME HERO ─────────
   The hero background photo is ONE file: assets/img/hero-bg.jpg
   Swap that file (same name) to change the hero image — no code edits.
   To point at a different filename instead, set --hero-image on .home-hero,
   e.g.  style="--hero-image:url('assets/img/my-photo.jpg')"                */
.home-hero{position:relative;overflow:hidden;background-color:#F1F7FC;
  background-image:radial-gradient(125% 90% at 50% -5%,rgba(228,240,250,.93) 0%,rgba(241,247,252,.93) 46%,rgba(255,255,255,.95) 100%),var(--hero-image,url('../img/hero-bg.jpg'));
  background-size:cover,cover;background-position:center,center;background-repeat:no-repeat,no-repeat}

/* ───────── FEATURE STRIP ───────── */
.strip-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;max-width:1240px;margin:0 auto}

/* ───────── HOVER STATES ───────── */
.hov-dark,.hov-blue,.hov-white-border{transition:background .2s,border-color .2s,color .2s,transform .2s,box-shadow .2s}
.hov-dark:hover{background:#21507F;opacity:1}
.hov-blue:hover{background:#3D77B0;opacity:1}
.hov-white-border:hover{border-color:#fff;background:rgba(255,255,255,.12);opacity:1}
.hov-card:hover{border-color:#B9D6EF;box-shadow:0 16px 44px rgba(23,54,93,.09);transform:translateY(-3px)}
.hov-lift:hover{box-shadow:0 16px 52px rgba(23,54,93,.1);transform:translateY(-3px)}
.hov-post:hover{transform:translateY(-4px);box-shadow:0 18px 50px rgba(23,54,93,.13);opacity:1}
.link-soft{text-decoration:none}
.link-soft:hover{color:#4F8FCB;opacity:1}
.hov-card,.hov-lift,.hov-post{transition:border-color .2s,box-shadow .2s,transform .2s}
.faq-q:hover{opacity:.75}

/* ───────── SIGN-IN BUTTONS ───────── */
.btn-si,.btn-si-lt{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-size:15px;font-weight:600;letter-spacing:.02em;border-radius:6px;padding:15px 30px;white-space:nowrap;transition:background .2s,border-color .2s,color .2s,transform .2s,box-shadow .2s}
.btn-si{color:#17365D;background:#fff;border:1.5px solid #4F8FCB}
.btn-si:hover{opacity:1;background:#EAF3FB;border-color:#17365D;transform:translateY(-2px);box-shadow:0 12px 26px rgba(23,54,93,.16)}
.btn-si-lt{color:#fff;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.5)}
.btn-si-lt:hover{opacity:1;background:rgba(255,255,255,.16);border-color:#fff;transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.2)}
.si-note{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;font-size:15px;color:#55677E}
.si-note.on-dark{color:rgba(255,255,255,.6)}
.si-link{text-decoration:none;font-weight:600;color:#3D77B0;border-bottom:1.5px solid #7FB0DA;padding-bottom:1px;transition:color .2s,border-color .2s}
.si-link:hover{opacity:1;color:#17365D;border-bottom-color:#17365D}
.si-note.on-dark .si-link{color:#8FBEE3;border-bottom-color:rgba(143,190,227,.5)}
.si-note.on-dark .si-link:hover{color:#fff;border-bottom-color:#fff}

/* ───────── FOOTER CTAs ───────── */
.btn-foot-join{transition:background .2s,color .2s,transform .2s,box-shadow .2s}
.btn-foot-join:hover{opacity:1;background:#7FB0DA;color:#0F2540;transform:translateY(-2px);box-shadow:0 12px 28px rgba(79,143,203,.32)}
.btn-foot-si{transition:background .2s,border-color .2s,color .2s,transform .2s}
.btn-foot-si:hover{opacity:1;color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55);transform:translateY(-2px)}

/* ───────── SLIDER ARROWS ───────── */
.slider-arrows{display:none}
.slider-arrows button{width:50px;height:50px;border-radius:50%;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sa-prev{background:#fff;border:1.5px solid #C6DCEF;color:#17365D;box-shadow:0 6px 18px rgba(23,54,93,.1)}
.sa-next{background:#17365D;border:1.5px solid #17365D;color:#fff;box-shadow:0 6px 18px rgba(23,54,93,.18)}

/* ───────── RESPONSIVE ───────── */
@media (min-width:769px) and (max-width:1024px){
  .main>section,.main>div,footer{padding-left:40px!important;padding-right:40px!important}
  [style*="repeat(3,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
  .strip-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:960px){
  .nav-links,.nav-cta{display:none!important}
  .nav-burger{display:flex!important}
}
@media (min-width:961px){.mobile-menu{display:none!important}}

@media (max-width:768px){
  .site-nav{padding-left:18px!important;padding-right:18px!important;height:64px!important}
  .main{padding-top:64px}
  /* every top-level block: mobile gutters + calmer vertical rhythm */
  .main>section,.main>div,footer{padding-left:20px!important;padding-right:20px!important}
  .main>section,.main>div{padding-top:60px!important;padding-bottom:60px!important}
  footer{padding-top:56px!important;padding-bottom:30px!important}
  /* decorative absolute layers never survive a narrow screen */
  .deco{display:none!important}
  /* home hero */
  .home-hero{min-height:0!important;padding-top:54px!important;padding-bottom:58px!important;background-attachment:scroll!important}
  .home-hero .hero-eyebrow{margin-bottom:18px!important}
  .home-hero .hero-kicker{font-size:12.5px!important;letter-spacing:.3em!important;margin-bottom:24px!important;padding-left:.3em!important}
  .home-hero p{font-size:16.5px!important;margin-bottom:30px!important}
  .home-hero .trust-row{padding-top:24px!important;gap:14px!important;flex-direction:column!important;align-items:flex-start!important;text-align:left!important}
  /* type scale */
  h1{font-size:clamp(32px,8.6vw,44px)!important;line-height:1.08!important}
  h2{font-size:clamp(27px,7.2vw,38px)!important;line-height:1.14!important}
  [style*="font-size:80px"],[style*="font-size:76px;font-weight:400"],[style*="font-size:57px"],[style*="font-size:54px"],[style*="font-size:52px"],[style*="font-size:50px"],[style*="font-size:46px"],[style*="font-size:44px"]{font-size:clamp(27px,7.2vw,38px)!important;line-height:1.16!important}
  [style*="font-size:76px;font-weight:600"],[style*="font-size:74px"]{font-size:clamp(42px,12vw,56px)!important}
  [style*="font-size:38px"]{font-size:30px!important}
  [style*="font-size:30px"],[style*="font-size:27px"]{font-size:22px!important;line-height:1.38!important}
  [style*="font-size:24px;font-style:italic"]{font-size:21px!important;line-height:1.38!important}
  /* one column everywhere except carousels */
  [style*="grid-template-columns"]:not(.rslider){grid-template-columns:1fr!important}
  .strip-grid{grid-template-columns:repeat(2,1fr)!important;gap:8px 12px!important}
  /* desktop gaps and card padding are far too large at 390px */
  [style*="gap:76px"],[style*="gap:72px"],[style*="gap:64px"],[style*="gap:40px"],[style*="gap:36px"],[style*="gap:34px"]{gap:24px!important}
  [style*="padding:52px"],[style*="padding:48px"],[style*="padding:46px"],[style*="padding:44px 52px"],[style*="padding:40px 44px"],[style*="padding:38px 34px"],[style*="padding:36px"],[style*="padding:34px"],[style*="padding:32px"]{padding:24px!important}
  [style*="padding:0 16px"]{padding:0!important}
  /* vertical rules become horizontal when columns collapse */
  [style*="border-left:3px solid #DEEBF7"]{border-left:0!important;border-top:3px solid #DEEBF7!important;padding-left:0!important;padding-top:22px!important}
  [style*="border-left:1px solid #DEEBF7"]{border-left:0!important;border-right:0!important;border-top:1px solid #DEEBF7!important;padding-top:24px!important;margin-top:4px!important}
  /* CTA rows stack full-width */
  .cta-row{flex-direction:column!important;align-items:stretch!important;gap:12px!important;width:100%}
  .cta-row>a{width:100%!important;text-align:center!important;justify-content:center!important;white-space:normal!important}
  /* carousels */
  .rslider{display:flex!important;grid-template-columns:none!important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:16px!important;scrollbar-width:none;padding-bottom:6px}
  .rslider::-webkit-scrollbar{display:none}
  .rslider>*{flex:0 0 86%!important;scroll-snap-align:center}
  .slider-arrows{display:flex!important}
}
@media (max-width:400px){
  .main>section,.main>div,footer{padding-left:16px!important;padding-right:16px!important}
  .btn-si,.btn-si-lt{padding-left:18px;padding-right:18px}
}