@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;900&family=Barlow:wght@400;500;600;700&display=swap');

/* ── RESET ── */
#jm * { box-sizing:border-box; margin:0; padding:0; }
#jm a { text-decoration:none !important; }
#jm img { display:block; }

/* ── ROOT ── */
#jm {
  font-family:'Barlow',sans-serif;
  background:#f5f2ed;
  color:#1c1c1c;
  width:100%;
}

/* ═════════════.═════════════════
   NAV
══════════════════════════════ */
#jm nav {
  background:#1c1c1c;
  position:sticky;
  top:0;
  z-index:999;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 2rem;
  box-shadow:0 2px 12px rgba(0,0,0,0.4);
}
#jm .nav-logo {
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.5rem;
  font-weight:900;
  color:#fff;
  letter-spacing:0.05em;
  text-decoration:none !important;
  white-space:nowrap;
}
#jm .nav-logo span { color:#e07b2a; }

#jm .nav-links {
  display:flex;
  align-items:center;
  gap:1.5rem;
  list-style:none;
}
#jm .nav-links a {
  color:#ccc;
  font-size:0.8rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  transition:color 0.2s;
  text-decoration:none !important;
}
#jm .nav-links a:hover { color:#e07b2a; }

#jm .nav-tiktok {
  background:#e07b2a;
  color:#fff !important;
  padding:0.35rem 1rem;
  border-radius:4px;
  font-size:0.8rem;
  font-weight:700;
  text-decoration:none !important;
  white-space:nowrap;
  transition:background 0.2s;
}
#jm .nav-tiktok:hover { background:#c96b1e; }

/* hamburger — hidden on desktop */
#jm .nav-toggle {
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  background:none;
  border:none;
  padding:4px;
}
#jm .nav-toggle span {
  display:block;
  width:24px;
  height:2px;
  background:#fff;
  border-radius:2px;
  transition:all 0.3s;
}

/* ══════════════════════════════
   HERO
══════════════════════════════ */
#jm .hero {
  background:#1c1c1c;
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:340px;
}
#jm .hero-text {
  padding:48px 40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:16px;
}
#jm .eyebrow {
  font-size:12px;
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
  color:#e07b2a;
}
#jm .hero-title {
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(2rem,4vw,3.2rem);
  font-weight:900;
  line-height:1.05;
  color:#fff;
}
#jm .hero-title span { color:#e07b2a; }

#jm .bio {
  display:flex;
  align-items:center;
  gap:14px;
}
#jm .bio img {
  width:60px;
  height:60px;
  border-radius:50%;
  border:3px solid #e07b2a;
  object-fit:cover;
  flex-shrink:0;
}
#jm .bio p { color:#bbb; font-size:14px; line-height:1.6; }
#jm .bio p strong { color:#fff; }

#jm .hero-btns { display:flex; flex-wrap:wrap; gap:10px; }

#jm .btn {
  display:inline-block;
  background:#e07b2a;
  color:#fff !important;
  padding:10px 20px;
  border-radius:5px;
  font-weight:700;
  font-size:14px;
  text-decoration:none !important;
  transition:background 0.2s;
  cursor:pointer;
}
#jm .btn:hover { background:#c96b1e; }
#jm .btn-outline {
  background:transparent;
  border:2px solid #e07b2a;
  color:#e07b2a !important;
}
#jm .btn-outline:hover { background:#e07b2a; color:#fff !important; }

#jm .hero-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#jm .hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ══════════════════════════════
   DISCLOSURE
══════════════════════════════ */
#jm .disclosure {
  background:#2e2e2e;
  color:#999;
  text-align:center;
  font-size:13px;
  padding:8px 16px;
}
#jm .disclosure strong { color:#bbb; }

/* ══════════════════════════════
   SECTION SHELL
══════════════════════════════ */
#jm .section {
  max-width:1100px;
  margin:0 auto;
  padding:40px 20px 10px;
  scroll-margin-top:70px;
}
#jm .section-head {
  border-bottom:3px solid #1c1c1c;
  padding-bottom:10px;
  margin-bottom:20px;
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
}
#jm .section-head h2 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:28px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1px;
}
#jm .section-head span {
  font-size:14px;
  font-weight:500;
  color:#7a7067;
}

/* ══════════════════════════════
   FEATURED CARD
══════════════════════════════ */
#jm .featured-wrap {
  max-width:1100px;
  margin:40px auto 0;
  padding:0 20px;
  scroll-margin-top:70px;
}
#jm .featured {
  background:#1c1c1c;
  border-radius:10px;
  display:grid;
  grid-template-columns:1fr 1.5fr;
  overflow:hidden;
}
#jm .featured img {
  width:100%;
  height:100%;
  min-height:240px;
  object-fit:cover;
}
/* Responsive YouTube embed */
#jm .video-wrap {
  position:relative;
  width:100%;
  padding-bottom:56.25%;
  height:0;
  overflow:hidden;
}
#jm .video-wrap iframe {
  position:absolute;
  top:0; left:0;
  width:100%;
  height:100%;
  border:0;
}
#jm .featured-body {
  padding:32px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:12px;
}
#jm .featured-label {
  font-size:11px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#e07b2a;
}
#jm .featured-body h2 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.8rem;
  font-weight:900;
  color:#fff;
  line-height:1.1;
}
#jm .featured-body p { color:#bbb; font-size:14px; line-height:1.65; }
#jm .featured-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }

#jm .btn-sm {
  display:inline-block;
  background:#e07b2a;
  color:#fff !important;
  padding:8px 16px;
  border-radius:4px;
  font-size:13px;
  font-weight:700;
  text-decoration:none !important;
  transition:background 0.2s;
}
#jm .btn-sm:hover { background:#c96b1e; }
#jm .btn-sm.ghost {
  background:transparent;
  border:1px solid #555;
  color:#ccc !important;
}
#jm .btn-sm.ghost:hover { border-color:#e07b2a; color:#e07b2a !important; }

/* ══════════════════════════════
   PRODUCT GRID
══════════════════════════════ */
#jm .grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:20px;
  margin-bottom:40px;
}
#jm .card {
  background:#fff;
  border:1px solid #e0dbd2;
  border-radius:8px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform 0.18s,box-shadow 0.18s;
}
#jm .card:hover {
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(0,0,0,0.10);
}
#jm .card img {
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  background:#eee;
}
#jm .card-body {
  padding:14px;
  display:flex;
  flex-direction:column;
  flex:1;
}
#jm .card-name {
  font-weight:600;
  font-size:14px;
  line-height:1.4;
  margin-bottom:4px;
  color:#1c1c1c;
}
#jm .card-price {
  font-size:13px;
  font-weight:700;
  color:#2a6496;
  margin-bottom:6px;
}
#jm .card-note {
  font-size:13px;
  color:#7a7067;
  font-style:italic;
  line-height:1.4;
  margin-bottom:12px;
  flex:1;
}
#jm .card-note::before {
  content:"Jerry: ";
  font-weight:700;
  font-style:normal;
  color:#e07b2a;
}
#jm .card-body a {
  display:block;
  background:#e07b2a;
  color:#fff !important;
  text-align:center;
  padding:10px 8px;
  border-radius:4px;
  font-size:13px;
  font-weight:700;
  text-decoration:none !important;
  transition:background 0.2s;
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
}
#jm .card-body a:hover { background:#c96b1e; }

/* ══════════════════════════════
   TOOL STRIP
══════════════════════════════ */
#jm .tool-outer {
  max-width:1100px;
  margin:10px auto 50px;
  padding:0 20px;
}
#jm .tool {
  background:linear-gradient(135deg,#2a6496 0%,#1f5077 100%);
  border-radius:12px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,360px);
  align-items:center;
  padding:28px 32px;
  gap:18px 28px;
  box-shadow:0 14px 34px rgba(10,32,48,0.22);
  overflow:hidden;
}
#jm .tool-copy { min-width:0; }
#jm .tool-label {
  font-size:11px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#aad4f5;
  margin-bottom:4px;
}
#jm .tool h3 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:22px;
  font-weight:900;
  color:#fff;
  margin-bottom:4px;
}
#jm .tool p {
  font-size:14px;
  color:#cce4f5;
  max-width:42ch;
}
#jm .tool-media {
  grid-column:2;
  grid-row:1 / span 2;
  display:block;
  background:rgba(7,24,38,0.2);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:12px;
  padding:10px;
  box-shadow:0 18px 36px rgba(7,24,38,0.3);
}
#jm .tool-shot {
  width:100%;
  border-radius:8px;
  display:block;
}
#jm .btn-white {
  background:#fff;
  color:#2a6496 !important;
  padding:10px 24px;
  border-radius:5px;
  font-weight:700;
  font-size:14px;
  text-decoration:none !important;
  white-space:nowrap;
  flex-shrink:0;
  transition:opacity 0.2s;
  justify-self:start;
  box-shadow:0 10px 20px rgba(8,24,38,0.18);
}
#jm .btn-white:hover { opacity:0.88; }

/* ══════════════════════════════
   SCROLL TO TOP
══════════════════════════════ */
#jm-scroll-top {
  position:fixed;
  bottom:28px;
  right:28px;
  width:44px;
  height:44px;
  background:#e07b2a;
  color:#fff;
  border:none;
  border-radius:50%;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.25);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.25s, transform 0.25s;
  z-index:9999;
}
#jm-scroll-top.visible {
  opacity:1;
  pointer-events:auto;
}
#jm-scroll-top:hover { transform:translateY(-3px); }

/* ══════════════════════════════
   FOOTER
══════════════════════════════ */
#jm footer {
  background:#1c1c1c;
  color:#888;
  text-align:center;
  padding:2.5rem 1rem;
  font-size:13px;
  line-height:2;
}
#jm footer .footer-logo {
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.4rem;
  font-weight:900;
  color:#fff;
  letter-spacing:0.05em;
  margin-bottom:4px;
}
#jm footer .footer-logo span { color:#e07b2a; }
#jm footer .footer-links { display:flex; justify-content:center; gap:1.5rem; flex-wrap:wrap; margin:8px 0; }
#jm footer .footer-links a {
  color:#aaa;
  text-decoration:none !important;
  font-size:13px;
  transition:color 0.2s;
}
#jm footer .footer-links a:hover { color:#e07b2a; }
#jm footer .footer-disc {
  font-size:11px;
  color:#555;
  max-width:600px;
  margin:12px auto 0;
  line-height:1.6;
}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media(max-width:768px){
  #jm .nav-links { display:none; flex-direction:column; position:absolute; top:56px; left:0; right:0; background:#1c1c1c; padding:1rem 2rem 1.5rem; gap:1rem; z-index:998; }
  #jm .nav-links.open { display:flex; }
  #jm .nav-links a { font-size:1rem; padding:6px 0; }
  #jm .nav-toggle { display:flex; }
  #jm .hero { grid-template-columns:1fr; }
  #jm .hero-photo { display:none; }
  #jm .hero-text { padding:32px 20px; }
  #jm .featured { grid-template-columns:1fr; }
  #jm .featured img { max-height:200px; min-height:unset; }
  #jm .tool {
    grid-template-columns:1fr;
    padding:20px;
    text-align:center;
  }
  #jm .tool-copy { order:2; }
  #jm .tool p { max-width:none; }
  #jm .tool-media {
    grid-column:auto;
    grid-row:auto;
    order:1;
    max-width:420px;
    margin:0 auto;
  }
  #jm .btn-white {
    order:3;
    justify-self:center;
  }
  #jm nav { padding:0 1rem; }
  #jm .section { padding:30px 16px 10px; }
  #jm .section-head h2 { font-size:24px; }
  #jm .card-note { font-size:13px; }
  #jm .grid { grid-template-columns:repeat(2, 1fr); gap:16px; }
}

/* Small phones - single column */
@media(max-width:380px){
  #jm .grid { grid-template-columns:1fr; gap:20px; }
  #jm .card-name { font-size:15px; }
  #jm .card-note { font-size:14px; }
  #jm .card-price { font-size:14px; }
}