/* Noosa Nutraceuticals — shared site styles */

@font-face {
  font-family: 'Movatif';
  src: url('fonts/Movatif-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Logam';
  src: url('fonts/Logam-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; }
::selection { background: #2AD4D4; color: #0D0D0D; }
input::placeholder, textarea::placeholder { color: #6b665c; opacity: .8; }

/* ── keyframes ── */
@keyframes heroInLeft { 0% { opacity:0; transform:translateX(-220px) scale(.9); filter:blur(16px); } 60% { opacity:1; } 100% { opacity:1; transform:translateX(0) scale(1); filter:blur(0); } }
@keyframes heroInRight { 0% { opacity:0; transform:translateX(220px) scale(.9); filter:blur(16px); } 60% { opacity:1; } 100% { opacity:1; transform:translateX(0) scale(1); filter:blur(0); } }
@keyframes heroFadeUp { from { opacity:0; transform:translateY(28px); filter:blur(6px); } to { opacity:1; transform:translateY(0); filter:blur(0); } }
@keyframes heroLoopLeft { 0% { opacity:0; transform:translateX(-220px) scale(.9); filter:blur(16px); } 5.5% { opacity:1; } 9% { opacity:1; transform:translateX(0) scale(1); filter:blur(0); } 96% { opacity:1; transform:translateX(0) scale(1); filter:blur(0); } 100% { opacity:0; transform:translateX(-220px) scale(.9); filter:blur(16px); } }
@keyframes heroLoopRight { 0% { opacity:0; transform:translateX(220px) scale(.9); filter:blur(16px); } 5.5% { opacity:1; } 9% { opacity:1; transform:translateX(0) scale(1); filter:blur(0); } 96% { opacity:1; transform:translateX(0) scale(1); filter:blur(0); } 100% { opacity:0; transform:translateX(220px) scale(.9); filter:blur(16px); } }
@keyframes heroLoopUp { 0% { opacity:0; transform:translateY(28px); filter:blur(6px); } 9% { opacity:1; transform:translateY(0); filter:blur(0); } 96% { opacity:1; transform:translateY(0); filter:blur(0); } 100% { opacity:0; transform:translateY(28px); filter:blur(6px); } }
@keyframes cardWobble {
  0%   { transform:translateY(0)     rotate(0deg); }
  18%  { transform:translateY(-14px) rotate(-1.4deg); }
  38%  { transform:translateY(-6px)  rotate(1.1deg); }
  55%  { transform:translateY(-9px)  rotate(-0.7deg); }
  72%  { transform:translateY(-3px)  rotate(0.4deg); }
  88%  { transform:translateY(-5px)  rotate(-0.2deg); }
  100% { transform:translateY(-4px)  rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  [data-hero-anim] { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ── layout shells ── */
#page { height:100vh; overflow:hidden; display:flex; flex-direction:column; font-family:-apple-system,'Helvetica Neue',Helvetica,Arial,sans-serif; }
#page.home, #page.contact {
  background:
    linear-gradient(105deg, rgba(11,11,12,0.5) 0%, rgba(11,11,12,0.18) 44%, rgba(11,11,12,0.06) 100%),
    linear-gradient(180deg, rgba(11,11,12,0.32) 0%, rgba(11,11,12,0.1) 22%, rgba(11,11,12,0.42) 46%, rgba(11,11,12,0.92) 74%, rgba(11,11,12,1) 88%),
    url('palm-bg-dark2.jpg') top center / cover no-repeat fixed;
  background-color:#0B0B0C;
  color:#F5F2EC;
}
#page.rise { background:#EEF5B2; color:#16170d; }

.nav { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:18px 32px; flex-wrap:wrap; background:#0B0B0C; padding:clamp(16px,2.4vh,24px) clamp(24px,6vw,80px); }
.nav-logo { font-family:'Movatif','Hanken Grotesk',system-ui,sans-serif; font-weight:400; font-size:22px; letter-spacing:0.005em; color:#F5F2EC; text-decoration:none; line-height:1; white-space:nowrap; }
.nav-links { display:flex; align-items:center; gap:clamp(22px,2.4vw,36px); }
.nav-link { font-size:12.5px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:#b3aea4; text-decoration:none; transition:color .25s ease; }
.nav-link:hover { color:#F5F2EC; }
.nav-link.active { color:#F5F2EC; }

.footer { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:10px 28px; flex-wrap:wrap; padding:clamp(14px,2vh,22px) clamp(24px,6vw,80px); }
.footer-link { font-size:12.5px; letter-spacing:0.03em; color:#8c877e; text-decoration:none; transition:color .25s ease; }
.footer-link:hover { color:#F5F2EC; }
.footer-copy { font-size:12px; letter-spacing:0.04em; color:#5c584f; }
.footer.rise { background:#e6efa3; }
.footer-link.rise { color:#556030; }
.footer-link.rise:hover { color:#16170d; }
.footer-copy.rise { color:#8a9150; }

/* ── responsive ── */
@media (max-width: 900px), (max-height: 620px) {
  #page { height:auto !important; min-height:100vh; overflow:visible !important; background-attachment:scroll !important; }
  .home-main { max-width:100% !important; }
  #contact-grid { grid-template-columns:1fr !important; gap:36px !important; }
}
@media (max-width: 560px) {
  .card { flex-direction:column !important; height:auto !important; }
  .card > .card-media { flex:0 0 auto !important; width:100% !important; max-width:100% !important; height:172px !important; }
  .card > .card-body { padding:18px 20px 22px !important; }
}

/* ── homepage hero ── */
.home-main { flex:1 1 auto; min-height:0; width:100%; max-width:min(1500px,92vw); margin:0 auto; display:flex; flex-direction:column; padding:clamp(14px,2.4vh,30px) clamp(24px,6vw,80px); }
.hero { padding:clamp(16px,4vh,52px) 0 0; }
.hero h1 { margin:0; max-width:760px; font-family:'Movatif','Hanken Grotesk',system-ui,sans-serif; font-weight:500; font-size:clamp(38px,6.2vh,74px); line-height:1.03; letter-spacing:-0.025em; color:#F8F6F1; }
.hero p { margin:clamp(14px,2vh,20px) 0 0; max-width:520px; font-size:clamp(14px,1.7vh,16px); line-height:1.6; color:#bdb8ae; }
.hero-in-left { display:inline-block; animation:heroLoopLeft 30s cubic-bezier(.19,1.25,.32,1) .3s infinite both; }
.hero-in-left-2 { display:inline-block; animation:heroLoopLeft 30s cubic-bezier(.19,1.25,.32,1) 1.1s infinite both; }
.hero-in-right { display:inline-block; color:#C8B89A; animation:heroLoopRight 30s cubic-bezier(.19,1.25,.32,1) 1.9s infinite both; }
.hero-sub { animation:heroLoopUp 30s cubic-bezier(.16,1,.3,1) 2.8s infinite both; }

.cards-wrap { flex:1 1 auto; min-height:0; display:flex; align-items:flex-end; justify-content:center; padding-bottom:clamp(12px,4vh,52px); }
.cards-inner { width:100%; max-width:min(1120px,90vw); }
.cards-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(24px,3vw,52px); }

.card { display:flex; flex-direction:row; height:clamp(192px,26vh,300px); border-radius:5px; overflow:hidden; box-shadow:0 22px 50px rgba(0,0,0,0.5); transition:box-shadow .4s ease; }
.card:hover { animation:cardWobble 0.9s cubic-bezier(.34,1.4,.5,1) both; box-shadow:0 34px 70px rgba(0,0,0,0.6); }
.card.rise-card { background:#EEF5B2; border:1px solid #dbe39a; }
.card.yayo-card { background:#111008; border:1px solid #2a2419; }

.card-media { flex:0 0 40%; max-width:40%; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#e6efa3; padding:clamp(10px,2vh,16px); }
.card-media.yayo { flex:0 0 52%; max-width:52%; display:block; background:none; padding:0; }
.card-media.yayo img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.rise-mark-word { font-family:'Saira Condensed',sans-serif; font-weight:800; font-size:clamp(30px,5vh,50px); line-height:0.82; letter-spacing:0.01em; color:#16170d; }
.rise-mark-sub { margin-top:clamp(3px,0.6vh,6px); font-family:'Saira Condensed',sans-serif; font-weight:700; font-size:clamp(11px,1.7vh,15px); line-height:1; letter-spacing:0.3em; text-indent:0.3em; text-transform:uppercase; color:#16170d; }
.rise-mark-tag { margin-top:clamp(2px,0.5vh,4px); font-family:'JetBrains Mono',monospace; font-size:clamp(8.5px,1.3vh,10.5px); font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:#2AD4D4; }

.card-body { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:center; padding:clamp(14px,2vh,22px) clamp(18px,1.8vw,26px); }
.card-body h2.rise-title { margin:clamp(4px,0.8vh,9px) 0 clamp(2px,0.4vh,5px); font-family:'Saira Condensed','Hanken Grotesk',system-ui,sans-serif; font-weight:800; font-size:clamp(28px,4vh,46px); line-height:0.9; letter-spacing:0.01em; text-transform:uppercase; color:#0D0D0D; }
.card-body p.rise-copy { margin:0; font-size:12px; line-height:1.45; color:#556030; }
.card-body h2.yayo-title { margin:clamp(4px,0.8vh,9px) 0 clamp(4px,0.8vh,8px); font-family:'Logam','Syne',system-ui,sans-serif; font-weight:400; font-size:clamp(40px,5.6vh,66px); line-height:0.88; letter-spacing:0.01em; color:#FFFFFF; }
.card-body p.yayo-copy { margin:0; font-size:12px; line-height:1.45; color:#C8B89A; }

.pill-btn { display:inline-flex; align-items:center; gap:8px; align-self:flex-start; margin-top:clamp(7px,1.1vh,13px); padding:8px 15px; font-size:12px; font-weight:600; letter-spacing:0.03em; border-radius:999px; text-decoration:none; transition:gap .25s ease, filter .25s ease; }
.pill-btn:hover { gap:13px; filter:brightness(1.06); }
.pill-btn.rise { color:#0D0D0D; background:#2AD4D4; }
.pill-btn.yayo { color:#111008; background:#E8DFC8; }
.pill-btn span:last-child { font-size:14px; }
.pill-btn span:first-child { white-space:nowrap; }

/* ── contact page ── */
.contact-main { flex:1 1 auto; min-height:0; width:100%; max-width:min(1500px,92vw); margin:0 auto; display:flex; flex-direction:column; justify-content:center; padding:clamp(24px,4vh,60px) clamp(24px,6vw,80px); }
#contact-grid { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(40px,6vw,100px); align-items:center; }
.eyebrow { margin:0 0 clamp(10px,1.6vh,16px); font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:500; letter-spacing:0.22em; text-transform:uppercase; color:#C8B89A; }
.contact-h1 { margin:0; font-family:'Movatif','Hanken Grotesk',system-ui,sans-serif; font-weight:500; font-size:clamp(38px,6.2vh,74px); line-height:1.03; letter-spacing:-0.025em; color:#F8F6F1; }
.contact-lead { margin:clamp(14px,2vh,20px) 0 0; max-width:420px; font-size:clamp(14px,1.7vh,16px); line-height:1.6; color:#bdb8ae; }
.contact-email-link { display:inline-block; margin-top:clamp(20px,3.5vh,36px); font-family:'JetBrains Mono',monospace; font-size:clamp(12px,1.6vh,14px); letter-spacing:0.04em; color:#EEF5B2; text-decoration:none; border-bottom:1px solid rgba(238,245,178,0.35); padding-bottom:4px; transition:border-color .25s ease; }
.contact-email-link:hover { border-color:#EEF5B2; }
.contact-location { margin:clamp(14px,2.4vh,24px) 0 0; font-size:13px; line-height:1.6; color:#8c877e; }

#contact-form { display:flex; flex-direction:column; gap:clamp(14px,2vh,20px); background:rgba(11,11,12,0.55); border:1px solid rgba(245,242,236,0.12); border-radius:6px; padding:clamp(22px,3.5vh,36px); backdrop-filter:blur(8px); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vh,20px); }
.field { display:flex; flex-direction:column; gap:7px; }
.field span { font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:#8c877e; }
.field input, .field textarea { width:100%; background:rgba(245,242,236,0.06); border:1px solid rgba(245,242,236,0.16); border-radius:4px; padding:11px 13px; font-size:14px; color:#F5F2EC; outline:none; transition:border-color .2s ease; font-family:inherit; }
.field textarea { resize:vertical; min-height:110px; line-height:1.5; }
.field input:focus, .field textarea:focus { border-color:#EEF5B2; }
.form-actions { display:flex; align-items:center; gap:16px; }
.submit-btn { display:inline-flex; align-items:center; gap:8px; padding:11px 22px; font-size:13px; font-weight:600; letter-spacing:0.03em; color:#0D0D0D; background:#EEF5B2; border:none; border-radius:999px; cursor:pointer; transition:gap .25s ease, filter .25s ease, opacity .25s ease; }
.submit-btn:hover { gap:13px; filter:brightness(1.05); }
.submit-btn:disabled { opacity:.6; cursor:default; }
.form-error { font-size:12.5px; color:#e08a7a; }
.success-box { display:flex; flex-direction:column; gap:12px; background:rgba(11,11,12,0.55); border:1px solid rgba(238,245,178,0.3); border-radius:6px; padding:clamp(28px,5vh,44px); }
.success-box .title { font-family:'Movatif','Hanken Grotesk',system-ui,sans-serif; font-size:clamp(22px,3.4vh,30px); color:#EEF5B2; }
.success-box p { margin:0; font-size:14px; line-height:1.6; color:#bdb8ae; }

/* ── rise page ── */
.rise-main { flex:1 1 auto; min-height:0; width:100%; max-width:min(1500px,92vw); margin:0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:clamp(24px,4vh,60px) clamp(24px,6vw,80px); }
.rise-logo { width:clamp(78px,14.5vh,116px); height:auto; display:block; margin-bottom:clamp(6px,1.2vh,12px); animation:heroFadeUp 1.1s cubic-bezier(.16,1,.3,1) .1s both; }
.rise-h1 { margin:0; font-family:'Saira Condensed','Hanken Grotesk',system-ui,sans-serif; font-weight:800; font-size:clamp(72px,15vh,150px); line-height:0.82; letter-spacing:0.01em; text-transform:uppercase; color:#16170d; animation:heroFadeUp 1.1s cubic-bezier(.16,1,.3,1) .3s both; }
.rise-sub { margin-top:clamp(5px,0.9vh,9px); font-family:'Saira Condensed',sans-serif; font-weight:700; font-size:clamp(16px,3vh,26px); line-height:1; letter-spacing:0.3em; text-indent:0.3em; text-transform:uppercase; color:#16170d; animation:heroFadeUp 1.1s cubic-bezier(.16,1,.3,1) .45s both; }
.rise-tag { margin-top:clamp(2px,0.4vh,4px); font-family:'JetBrains Mono',monospace; font-size:clamp(12px,2vh,16px); font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:#2AD4D4; animation:heroFadeUp 1.1s cubic-bezier(.16,1,.3,1) .6s both; }
.rise-copy { margin:clamp(18px,3vh,30px) 0 0; max-width:440px; font-size:clamp(14px,1.7vh,16px); line-height:1.6; color:#556030; animation:heroFadeUp 1.1s cubic-bezier(.16,1,.3,1) .75s both; }
.rise-actions { display:flex; align-items:center; gap:16px; margin-top:clamp(24px,4vh,44px); animation:heroFadeUp 1.1s cubic-bezier(.16,1,.3,1) .9s both; }
.rise-soon { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:#556030; }