/* =====================================================================
   JOVI Malaysia — Design System CSS (v2, static pages)
   Drop-in for static HTML pages such as /clay.html
   Single source of truth — no external CSS dependency except this file.
   Fonts are self-hosted from /fonts/ (already shipped with site).
   ===================================================================== */

/* ---------- Poppins (self-hosted) ---------- */
@font-face { font-family:'Poppins'; src:url('../../fonts/Poppins-Light.ttf') format('truetype');       font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../../fonts/Poppins-Regular.ttf') format('truetype');     font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../../fonts/Poppins-Italic.ttf') format('truetype');      font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../../fonts/Poppins-Medium.ttf') format('truetype');      font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../../fonts/Poppins-SemiBold.ttf') format('truetype');    font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../../fonts/Poppins-Bold.ttf') format('truetype');        font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../../fonts/Poppins-ExtraBold.ttf') format('truetype');   font-weight:800; font-style:normal; font-display:swap; }

:root {
  /* ---------- Brand colours ---------- */
  --jovi-yellow:#FFDC00;
  --jovi-red:#E60046;
  --jovi-red-hover:#C8003C;
  --jovi-play-blue:#00A6EC;
  --jovi-explore-red:#E60046;
  --jovi-craft-gray:#BFB8AF;
  --jovi-party-orange:#FF8200;
  --jovi-craft-bg:#D7D2CB;
  --jovi-white:#FFFFFF;
  --jovi-off-white:#FAF8F4;

  --ink-900:#181512;
  --ink-800:#2A2420;
  --ink-700:#3E3833;
  --ink-600:#5C554F;
  --ink-500:#847B73;
  --ink-400:#A8A098;
  --ink-300:#CDC7C0;
  --ink-200:#E6E1DB;
  --ink-100:#F2EEE8;

  --fg-1:var(--ink-900);
  --fg-2:var(--ink-700);
  --fg-3:var(--ink-500);

  --surface-base:var(--jovi-white);
  --surface-warm:var(--jovi-off-white);
  --surface-craft:var(--jovi-craft-bg);

  --border-1:var(--ink-200);
  --border-2:var(--ink-300);

  /* ---------- Radii ---------- */
  --radius-xs:6px; --radius-sm:10px; --radius-md:16px; --radius-lg:24px; --radius-xl:32px;
  --radius-pill:999px;

  /* ---------- Spacing (4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80) ---------- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px; --s-8:32px;
  --s-12:48px; --s-16:64px; --s-20:80px;

  /* ---------- Shadows ---------- */
  --shadow-sm:0 1px 2px rgba(24,21,18,.06);
  --shadow-md:0 4px 16px rgba(24,21,18,.08);
  --shadow-lg:0 12px 32px rgba(24,21,18,.12);

  /* ---------- Type ---------- */
  --font-sans:'Poppins','Helvetica Neue',Arial,sans-serif;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800;

  --dur-fast:120ms; --dur-base:220ms;
  --ease-snap:cubic-bezier(.2,.9,.2,1.2);
  --ease-out:cubic-bezier(.2,.7,.2,1);
}

/* =====================================================================
   RESET + BASE
   ===================================================================== */
*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.65;
  color:var(--fg-1);
  background:var(--surface-warm);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg { max-width:100%; display:block; }
button { font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }
a { color:inherit; text-decoration:none; }
a:hover { text-decoration:underline; }
input,textarea,select { font-family:inherit; font-size:16px; }

/* Visible focus ring on every interactive element */
:focus-visible {
  outline:3px solid var(--jovi-yellow);
  outline-offset:2px;
  border-radius:4px;
}

h1,h2,h3,h4,h5,h6 { margin:0; line-height:1.15; letter-spacing:-.02em; font-weight:var(--fw-bold); }
p { margin:0; text-wrap:pretty; }
ul,ol { margin:0; padding:0; }

/* =====================================================================
   LAYOUT PRIMITIVES
   ===================================================================== */
.container { max-width:1280px; margin:0 auto; padding:0 24px; }
.container-narrow { max-width:920px; margin:0 auto; padding:0 24px; }

.section { padding:80px 0; }
.section-sm { padding:48px 0; }
@media (max-width:768px) {
  .section { padding:56px 0; }
  .section-sm { padding:40px 0; }
}

.eyebrow {
  display:inline-block;
  font-size:12px; font-weight:var(--fw-bold);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--jovi-red);
}

/* =====================================================================
   BUTTONS — primary = red+yellow pill, ghost = white + 2px ink border
   ===================================================================== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 22px; border-radius:var(--radius-pill);
  font-weight:var(--fw-semibold); font-size:15px; line-height:1;
  border:2px solid transparent; white-space:nowrap;
  transition:transform var(--dur-base) var(--ease-snap), background var(--dur-base), border-color var(--dur-base);
  text-decoration:none;
}
.btn:hover { text-decoration:none; transform:translateY(-1px); }
.btn-primary { background:var(--jovi-red); color:var(--jovi-yellow); }
.btn-primary:hover { background:var(--jovi-red-hover); }
.btn-ghost { background:var(--jovi-white); color:var(--ink-900); border-color:var(--ink-900); }
.btn-ghost:hover { background:var(--ink-900); color:var(--jovi-yellow); }
.btn-yellow { background:var(--jovi-yellow); color:var(--jovi-red); border-color:var(--jovi-red); }
.btn-yellow:hover { background:#FFE93A; }
.btn-dark { background:var(--ink-900); color:var(--jovi-yellow); }
.btn-dark:hover { background:var(--ink-800); }
.btn-sm { padding:9px 16px; font-size:13px; }
.btn-lg { padding:18px 28px; font-size:17px; }

/* =====================================================================
   HEADER (static replica of existing SPA chrome)
   ===================================================================== */
.hdr { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--border-1); }
.hdr-strip { background:var(--ink-900); color:var(--jovi-yellow); font-size:12.5px; padding:8px 0; text-align:center; letter-spacing:.04em; }
.hdr-strip .dot { margin:0 12px; opacity:.4; }
.hdr-strip strong { color:var(--jovi-yellow); }
.hdr-row { display:flex; align-items:center; gap:24px; padding:14px 0; }
.hdr-logo { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.hdr-logo img { height:36px; width:auto; display:block; }
.hdr-logo-divider { display:inline-block; width:1px; height:30px; background:rgba(0,0,0,.12); }
.hdr-nav { display:flex; gap:6px; flex:1; justify-content:center; flex-wrap:wrap; }
.hdr-nav a { padding:8px 12px; border-radius:var(--radius-pill); font-weight:var(--fw-medium); font-size:14.5px; color:var(--fg-2); }
.hdr-nav a:hover { background:var(--ink-100); color:var(--fg-1); text-decoration:none; }
.hdr-nav a[aria-current="page"] { background:var(--jovi-yellow); color:var(--jovi-red); font-weight:var(--fw-semibold); }
.hdr-actions { display:flex; gap:6px; align-items:center; flex-shrink:0; }
.hdr-icon-btn {
  width:40px; height:40px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border-1); background:var(--surface-base);
  color:var(--ink-900); text-decoration:none;
}
.hdr-icon-btn:hover { border-color:var(--ink-900); }

.hdr-burger { display:none; width:40px; height:40px; align-items:center; justify-content:center; border:1px solid var(--border-1); background:#fff; border-radius:10px; }
@media (max-width:980px) {
  .hdr-nav { display:none; }
  .hdr-burger { display:inline-flex; }
  .hdr-logo-divider, .hdr-logo .hdr-logo-jm { display:none; }
}

/* =====================================================================
   BREADCRUMB
   ===================================================================== */
.crumbs { padding:16px 0; font-size:13px; color:var(--fg-3); }
.crumbs a:hover { color:var(--ink-900); }
.crumbs span[aria-current="page"] { color:var(--ink-900); font-weight:var(--fw-semibold); }
.crumbs .sep { margin:0 8px; opacity:.5; }

/* =====================================================================
   HERO (clay — craft category, warm-gray ground)
   ===================================================================== */
.clay-hero { background:var(--jovi-craft-bg); border-bottom:4px solid var(--ink-900); position:relative; overflow:hidden; }
.clay-hero-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:center; padding:80px 0; }
.clay-hero-grid > div:first-child { padding-inline-start:clamp(0px, 1.5vw, 24px); }
.clay-hero h1 { font-size:clamp(40px,5.5vw,72px); font-weight:var(--fw-black); letter-spacing:-.03em; line-height:1; margin:20px 0 20px; color:var(--ink-900); }
.clay-hero .lede { font-size:19px; color:var(--ink-800); max-width:560px; line-height:1.55; font-weight:var(--fw-regular); }
.clay-hero .pills { display:flex; gap:8px; flex-wrap:wrap; margin-top:24px; }
.clay-hero .pill {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-pill);
  background:var(--jovi-white); color:var(--ink-900);
  font-size:13px; font-weight:var(--fw-semibold);
  border:2px solid var(--ink-900);
}
.clay-hero .ctas { display:flex; gap:12px; flex-wrap:wrap; margin-top:32px; }
.clay-hero-art {
  aspect-ratio:1/1; max-width:560px; justify-self:end; width:100%;
  background:var(--jovi-white);
  border:3px solid var(--ink-900);
  border-radius:var(--radius-xl);
  display:flex; align-items:center; justify-content:center;
  position:relative; padding:32px;
}
.clay-hero-art img { width:90%; height:90%; object-fit:contain; filter:drop-shadow(0 18px 36px rgba(0,0,0,.18)); }
.clay-hero-art .badge-stamp {
  position:absolute; top:-18px; right:-18px;
  width:120px; height:120px; border-radius:50%;
  background:var(--jovi-yellow); color:var(--jovi-red);
  border:3px solid var(--ink-900);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-weight:var(--fw-black); text-align:center; line-height:1.1;
  transform:rotate(-12deg);
  font-size:14px;
}
.clay-hero-art .badge-stamp strong { font-size:22px; display:block; }

@media (max-width:980px) {
  .clay-hero-grid { grid-template-columns:1fr; gap:32px; padding:56px 0; }
  .clay-hero-grid > div:first-child { padding-inline:8px; }
  .clay-hero-art { max-width:420px; margin:0 auto; justify-self:center; }
}

/* =====================================================================
   TRUST STRIP (yellow bg, six cells)
   ===================================================================== */
.trust-strip { background:var(--jovi-yellow); border-bottom:4px solid var(--jovi-red); }
.trust-grid {
  display:grid; grid-template-columns:repeat(6, 1fr);
  gap:16px; padding:32px 0;
}
.trust-cell {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center; color:var(--ink-900);
}
.trust-cell .ic {
  width:48px; height:48px; border-radius:50%;
  background:var(--ink-900); color:var(--jovi-yellow);
  display:flex; align-items:center; justify-content:center;
  font-weight:var(--fw-black); font-size:18px;
  border:2px solid var(--ink-900);
}
.trust-cell .lbl { font-size:13px; font-weight:var(--fw-semibold); line-height:1.25; }

@media (max-width:980px) { .trust-grid { grid-template-columns:repeat(3,1fr); gap:24px; } }
@media (max-width:520px) { .trust-grid { grid-template-columns:repeat(2,1fr); } }

/* =====================================================================
   SECTION HEADS
   ===================================================================== */
.section-head { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:36px; flex-wrap:wrap; }
.section-head h2 { font-size:clamp(28px,3.6vw,40px); font-weight:var(--fw-black); letter-spacing:-.02em; line-height:1.05; }
.section-head .sub { color:var(--fg-3); font-size:16px; margin-top:8px; max-width:640px; line-height:1.55; }

/* =====================================================================
   "WHAT IS AIR DRY CLAY" — explanatory block
   ===================================================================== */
.explainer { background:var(--surface-base); }
.explainer .grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.explainer h2 { font-size:clamp(28px,3.6vw,40px); font-weight:var(--fw-black); letter-spacing:-.02em; margin-bottom:20px; }
.explainer p { font-size:16.5px; line-height:1.7; color:var(--fg-2); margin-bottom:16px; }
.explainer p strong { color:var(--ink-900); }
.explainer .bm { font-style:italic; color:var(--fg-3); font-size:15px; padding-left:14px; border-left:3px solid var(--jovi-yellow); margin-top:24px; }
.explainer-art {
  background:var(--jovi-craft-bg);
  border-radius:var(--radius-lg);
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  padding:48px;
}
.explainer-art img { max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 16px 28px rgba(0,0,0,.15)); }
@media (max-width:880px) { .explainer .grid { grid-template-columns:1fr; gap:32px; } }

/* =====================================================================
   COMPARISON TABLE — air dry vs plastilina vs polymer
   ===================================================================== */
.compare-wrap { background:var(--surface-warm); }
.compare {
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:var(--surface-base);
  border:2px solid var(--ink-900);
  border-radius:var(--radius-lg);
  overflow:hidden;
  font-size:15px;
}
.compare th, .compare td {
  padding:18px 20px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--border-1);
  line-height:1.45;
}
.compare thead th {
  background:var(--ink-900);
  color:var(--jovi-yellow);
  font-weight:var(--fw-bold);
  font-size:14px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.compare thead th.highlight { background:var(--jovi-red); }
.compare tbody th {
  background:var(--surface-warm);
  font-weight:var(--fw-semibold);
  color:var(--ink-900);
  width:200px;
}
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom:0; }
.compare td.col-jovi { background:rgba(255,220,0,.12); font-weight:var(--fw-medium); color:var(--ink-900); }
.compare .yes { color:#0E7C3A; font-weight:var(--fw-bold); }
.compare .no  { color:var(--jovi-red); font-weight:var(--fw-bold); }

/* Mobile: collapse table to stacked cards */
@media (max-width:768px) {
  .compare, .compare thead, .compare tbody, .compare tr, .compare th, .compare td { display:block; }
  .compare { border-radius:var(--radius-lg); }
  .compare thead { display:none; }
  .compare tbody tr {
    border-bottom:2px solid var(--ink-900);
    padding:16px;
  }
  .compare tbody tr:last-child { border-bottom:0; }
  .compare tbody th { width:auto; background:transparent; padding:0 0 8px; font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--fg-3); }
  .compare tbody td { padding:6px 0; border:0; }
  .compare tbody td::before {
    content:attr(data-col) " · ";
    font-weight:var(--fw-bold); color:var(--ink-900);
    font-size:13px;
  }
  .compare tbody td.col-jovi::before { color:var(--jovi-red); }
}

/* =====================================================================
   PRODUCT GRID (6 cards)
   ===================================================================== */
.shop-wrap { background:var(--surface-base); }
.prod-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:980px) { .prod-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) { .prod-grid { grid-template-columns:1fr; } }

.prod {
  display:flex; flex-direction:column;
  background:var(--surface-base);
  border:2px solid var(--ink-200);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base);
}
.prod:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--ink-900); }
.prod-img {
  aspect-ratio:1/1;
  background:var(--jovi-craft-bg);
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.prod-img img { width:90%; height:90%; object-fit:contain; }
.prod-img.school-pack { background:var(--ink-900); }
.prod-img.school-pack img { width:60%; height:auto; filter:drop-shadow(0 8px 16px rgba(0,0,0,.4)); }
.prod-img.school-pack .school-label {
  position:absolute; bottom:24px; left:0; right:0;
  text-align:center;
  color:var(--jovi-yellow);
  font-weight:var(--fw-black);
  font-size:18px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.prod-tag {
  position:absolute; top:14px; left:14px;
  background:var(--ink-900); color:var(--jovi-yellow);
  font-size:11px; font-weight:var(--fw-bold);
  padding:5px 12px; border-radius:var(--radius-pill);
  letter-spacing:.06em; text-transform:uppercase;
}
.prod-tag.bestseller { background:var(--jovi-red); color:var(--jovi-yellow); }
.prod-tag.new        { background:var(--jovi-yellow); color:var(--jovi-red); border:1px solid var(--jovi-red); }
.prod-tag.value      { background:var(--ink-900); color:var(--jovi-yellow); }
.prod-tag.schools    { background:var(--jovi-yellow); color:var(--jovi-red); border:1px solid var(--jovi-red); }
.prod-body { padding:20px 22px 22px; display:flex; flex-direction:column; gap:8px; flex:1; }
.prod-cat { font-size:11px; font-weight:var(--fw-bold); color:var(--fg-3); letter-spacing:.12em; text-transform:uppercase; }
.prod-name { font-size:18px; font-weight:var(--fw-bold); line-height:1.25; color:var(--ink-900); }
.prod-meta { display:flex; gap:8px; flex-wrap:wrap; }
.prod-meta .chip { padding:3px 10px; background:var(--ink-100); border-radius:var(--radius-pill); font-size:11px; font-weight:var(--fw-semibold); color:var(--fg-2); }
.prod-foot { display:flex; justify-content:space-between; align-items:baseline; margin-top:auto; padding-top:12px; }
.prod-price { font-size:22px; font-weight:var(--fw-black); color:var(--jovi-red); }
.prod-price .from { font-size:12px; font-weight:var(--fw-semibold); color:var(--fg-3); margin-right:4px; }
.prod-cta { margin-top:12px; }

/* =====================================================================
   TESTIMONIALS / SOCIAL PROOF
   ===================================================================== */
.testimonial-wrap { background:var(--surface-warm); }
.testimonial-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.testimonial {
  background:var(--surface-base);
  border:2px solid var(--ink-200);
  border-radius:var(--radius-lg);
  padding:28px;
  display:flex; flex-direction:column; gap:14px;
}
.testimonial .stars { color:var(--jovi-red); font-size:18px; letter-spacing:.1em; }
.testimonial blockquote { margin:0; font-size:16px; line-height:1.6; color:var(--ink-800); }
.testimonial cite { font-style:normal; font-size:13px; color:var(--fg-3); font-weight:var(--fw-semibold); }
.testimonial cite strong { color:var(--ink-900); display:block; font-size:14px; font-weight:var(--fw-bold); margin-bottom:2px; }
@media (max-width:880px) { .testimonial-grid { grid-template-columns:1fr; } }

.school-logos {
  margin-top:48px;
  display:grid; grid-template-columns:repeat(5,1fr); gap:16px;
}
.school-logo-slot {
  aspect-ratio:3/2;
  background:var(--surface-base);
  border:2px dashed var(--border-2);
  border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color:var(--fg-3);
  font-weight:var(--fw-semibold); letter-spacing:.08em; text-transform:uppercase;
}
@media (max-width:880px) { .school-logos { grid-template-columns:repeat(2,1fr); } }

/* =====================================================================
   HOW-TO STEPS (6 numbered cards)
   ===================================================================== */
.howto-wrap { background:var(--ink-900); color:var(--jovi-yellow); }
.howto-wrap .section-head h2 { color:var(--jovi-yellow); }
.howto-wrap .section-head .sub { color:rgba(255,220,0,.7); }
.howto-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:880px) { .howto-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .howto-grid { grid-template-columns:1fr; } }
.howto {
  background:rgba(255,220,0,.06);
  border:2px solid rgba(255,220,0,.25);
  border-radius:var(--radius-lg);
  padding:28px;
  display:flex; flex-direction:column; gap:12px;
}
.howto .num {
  width:48px; height:48px; border-radius:50%;
  background:var(--jovi-yellow); color:var(--jovi-red);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:var(--fw-black);
  border:3px solid var(--jovi-yellow);
}
.howto h3 { font-size:20px; color:var(--jovi-yellow); font-weight:var(--fw-bold); }
.howto p { font-size:14.5px; line-height:1.6; color:rgba(255,220,0,.78); }

/* =====================================================================
   FAQ
   ===================================================================== */
.faq-wrap { background:var(--surface-base); }
.faq { display:flex; flex-direction:column; gap:10px; max-width:920px; margin:0 auto; }
.faq-item {
  background:var(--surface-warm);
  border:1.5px solid var(--border-1);
  border-radius:var(--radius-md);
  padding:20px 24px;
}
.faq-item[open] { border-color:var(--ink-900); }
.faq-item summary {
  font-size:17px; font-weight:var(--fw-bold); cursor:pointer;
  list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  color:var(--ink-900);
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after {
  content:"+"; font-size:28px; color:var(--jovi-red); font-weight:var(--fw-bold);
  transition:transform var(--dur-base);
  line-height:.7;
}
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-item p { margin-top:12px; color:var(--fg-2); font-size:15.5px; line-height:1.65; }
.faq-item p + p { margin-top:10px; }
.faq-item a { color:var(--jovi-red); text-decoration:underline; font-weight:var(--fw-semibold); }

/* =====================================================================
   B2B / SCHOOLS BAND (yellow)
   ===================================================================== */
.b2b-band { background:var(--jovi-yellow); border-top:4px solid var(--jovi-red); border-bottom:4px solid var(--jovi-red); }
.b2b-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:64px; align-items:center; padding:64px 0; }
.b2b-grid > div:first-child { padding-inline-start:clamp(0px, 1.5vw, 24px); }
.b2b-band h2 { font-size:clamp(28px,3.6vw,42px); font-weight:var(--fw-black); letter-spacing:-.02em; color:var(--ink-900); }
.b2b-band p { font-size:17px; color:var(--ink-800); margin-top:14px; max-width:560px; line-height:1.6; }
.b2b-band .ctas { display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }
.b2b-band .b2b-list { background:var(--ink-900); color:var(--jovi-yellow); border-radius:var(--radius-lg); padding:32px; }
.b2b-band .b2b-list h4 { color:var(--jovi-yellow); font-size:14px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:14px; font-weight:var(--fw-bold); }
.b2b-band .b2b-list ul { list-style:none; padding:0; display:flex; flex-direction:column; gap:10px; }
.b2b-band .b2b-list li { font-size:15px; line-height:1.5; padding-left:20px; position:relative; }
.b2b-band .b2b-list li::before { content:"✓"; position:absolute; left:0; color:var(--jovi-yellow); font-weight:var(--fw-bold); }
@media (max-width:880px) {
  .b2b-grid { grid-template-columns:1fr; gap:32px; padding:48px 0; }
  .b2b-grid > div:first-child { padding-inline:8px; }
}

/* =====================================================================
   RELATED BLOG CARDS
   ===================================================================== */
.related-wrap { background:var(--surface-warm); }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.related-card {
  background:var(--surface-base);
  border:2px solid var(--ink-200);
  border-radius:var(--radius-lg);
  padding:28px;
  display:flex; flex-direction:column; gap:14px;
  transition:transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base);
}
.related-card:hover { transform:translateY(-3px); border-color:var(--ink-900); box-shadow:var(--shadow-md); text-decoration:none; }
.related-card .tag {
  align-self:flex-start;
  font-size:11px; font-weight:var(--fw-bold); letter-spacing:.1em; text-transform:uppercase;
  color:var(--jovi-red);
  padding:4px 10px; background:rgba(230,0,70,.08); border-radius:var(--radius-pill);
}
.related-card h3 { font-size:20px; font-weight:var(--fw-bold); line-height:1.3; color:var(--ink-900); letter-spacing:-.01em; }
.related-card p { font-size:14.5px; color:var(--fg-2); line-height:1.55; flex:1; }
.related-card .more { color:var(--jovi-red); font-weight:var(--fw-bold); font-size:14px; }
@media (max-width:880px) { .related-grid { grid-template-columns:1fr; } }

/* =====================================================================
   FOOTER (static replica)
   ===================================================================== */
.footer { background:var(--ink-900); color:rgba(255,220,0,.75); padding:64px 0 28px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px; }
.footer h5 { font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--jovi-yellow); font-weight:var(--fw-bold); margin-bottom:16px; }
.footer ul { list-style:none; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer ul a { color:rgba(255,220,0,.75); font-size:14px; }
.footer ul a:hover { color:var(--jovi-yellow); }
.footer-logo { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.footer-logo img { height:40px; width:auto; }
.footer-logo .div { display:inline-block; width:1px; height:30px; background:rgba(255,220,0,.25); }
.footer-blurb { font-size:14px; line-height:1.6; max-width:360px; color:rgba(255,220,0,.75); }
.footer .marketplace-row { display:flex; gap:8px; margin-top:18px; }
.footer .marketplace-row a { width:36px; height:36px; border-radius:50%; background:var(--jovi-yellow); display:inline-flex; align-items:center; justify-content:center; padding:6px; }
.footer .marketplace-row a img { max-width:100%; max-height:100%; }
.footer .legal { padding-top:24px; border-top:1px solid rgba(255,220,0,.15); font-size:12.5px; opacity:.7; display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; }
@media (max-width:880px) { .footer-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .footer-grid { grid-template-columns:1fr; } }

/* =====================================================================
   MOBILE MENU — CSS-only hamburger drawer (no JS required)
   Activated by hidden checkbox #jm-menu inside .hdr-row
   ===================================================================== */
.hdr-burger {
  display:none;
  width:40px; height:40px;
  align-items:center; justify-content:center;
  border:1px solid var(--border-1); background:#fff;
  border-radius:10px; color:var(--ink-900); cursor:pointer;
  flex-shrink:0;
}
.hdr-burger:hover { background:var(--ink-100); }
input#jm-menu { display:none; }

@media (max-width:980px) {
  .hdr-nav { display:none; }
  .hdr-burger { display:inline-flex; }
  .hdr-logo-divider, .hdr-logo-jm { display:none; }

  /* When checkbox is checked, slide in the mobile drawer */
  input#jm-menu:checked ~ .mm-drawer { transform:translateX(0); }
  input#jm-menu:checked ~ .mm-scrim { opacity:1; pointer-events:auto; }
}

.mm-scrim {
  position:fixed; inset:0;
  background:rgba(15,20,25,.55);
  backdrop-filter:blur(2px);
  opacity:0; pointer-events:none;
  transition:opacity var(--dur-base);
  z-index:99;
}
.mm-drawer {
  position:fixed; top:0; left:0; bottom:0;
  width:min(86vw, 360px);
  background:var(--surface-base);
  display:flex; flex-direction:column;
  transform:translateX(-100%);
  transition:transform .25s var(--ease-out);
  box-shadow:6px 0 40px rgba(0,0,0,.25);
  z-index:100;
}
.mm-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--border-1);
}
.mm-head img { height:34px; width:auto; }
.mm-close {
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px;
  border:1px solid var(--border-1); background:#fff;
  color:var(--ink-900); cursor:pointer;
  font-size:0;
}
.mm-close::after {
  content:""; width:18px; height:18px;
  background:linear-gradient(45deg, transparent 47%, currentColor 47%, currentColor 53%, transparent 53%),
             linear-gradient(-45deg, transparent 47%, currentColor 47%, currentColor 53%, transparent 53%);
}
.mm-nav { flex:1; overflow-y:auto; padding:8px 0; }
.mm-nav a {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 22px;
  font-size:17px; font-weight:var(--fw-semibold);
  color:var(--ink-900);
  border-bottom:1px solid var(--border-1);
  text-decoration:none;
}
.mm-nav a:hover { background:var(--ink-100); text-decoration:none; }
.mm-nav a[aria-current="page"] { background:var(--jovi-yellow); color:var(--jovi-red); }
.mm-nav a::after {
  content:"›"; color:var(--fg-3); font-size:22px; font-weight:var(--fw-regular);
}
.mm-foot { padding:20px 22px 24px; border-top:1px solid var(--border-1); display:flex; flex-direction:column; gap:10px; }
.mm-foot .lbl { font-size:11px; font-weight:var(--fw-bold); letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); }
.mm-foot a.mm-wa {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:12px;
  background:#25D366; color:#fff;
  font-weight:var(--fw-semibold); font-size:14px;
  text-decoration:none; justify-content:center;
}

/* Hide drawer entirely on desktop (purely defensive) */
@media (min-width:981px) {
  .mm-drawer, .mm-scrim { display:none; }
}

/* =====================================================================
   MARKETPLACE FLOATING WIDGET — always-on-top Shopee / Lazada / TikTok
   Fixed bottom-right (bottom-centre on small mobile). No JS required.
   ===================================================================== */
.mp-float {
  position:fixed; bottom:20px; right:20px;
  display:flex; flex-direction:column; gap:8px;
  z-index:90;
}
.mp-float a {
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 16px 11px 12px;
  border-radius:var(--radius-pill);
  font-weight:var(--fw-bold); font-size:13.5px;
  text-decoration:none;
  box-shadow:0 8px 24px rgba(24,21,18,.18), 0 2px 4px rgba(24,21,18,.10);
  border:2px solid var(--ink-900);
  white-space:nowrap;
  transition:transform var(--dur-base) var(--ease-out);
}
.mp-float a:hover { transform:translateX(-3px); text-decoration:none; }
.mp-float a img { width:22px; height:22px; object-fit:contain; }
.mp-float a.shopee  { background:#fff;    color:#EE4D2D; }
.mp-float a.lazada  { background:#0F156D; color:#fff; }
.mp-float a.tiktok  { background:#000;    color:#fff; }
.mp-float a.whatsapp{ background:#25D366; color:#fff; }
@media (max-width:520px) {
  .mp-float {
    bottom:auto; top:auto;
    left:50%; right:auto; bottom:14px;
    transform:translateX(-50%);
    flex-direction:row; gap:6px;
    padding:8px;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(8px);
    border-radius:var(--radius-pill);
    box-shadow:0 8px 24px rgba(24,21,18,.2);
    border:1.5px solid var(--ink-200);
  }
  .mp-float a {
    padding:8px 12px 8px 10px;
    font-size:12px;
    box-shadow:none;
    border-width:1.5px;
  }
  .mp-float a:hover { transform:none; }
  .mp-float a img { width:18px; height:18px; }
}

/* =====================================================================
   PDP COLOUR SWATCHES (replaces thumbnails on multi-colour products)
   ===================================================================== */
.pdp-swatches {
  margin-top:18px;
  display:flex; gap:14px; flex-wrap:wrap;
}
.pdp-swatch {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  text-decoration:none; color:inherit;
}
.pdp-swatch .dot {
  width:46px; height:46px; border-radius:50%;
  border:2px solid var(--ink-900);
  box-shadow:inset 0 0 0 2px #fff;
  transition:transform var(--dur-base) var(--ease-snap), box-shadow var(--dur-base);
}
.pdp-swatch:hover .dot { transform:translateY(-2px); }
.pdp-swatch.active .dot {
  box-shadow:inset 0 0 0 2px #fff, 0 0 0 3px var(--jovi-red);
}
.pdp-swatch .lbl {
  font-size:12px; font-weight:var(--fw-semibold); color:var(--fg-2);
  white-space:nowrap;
}
.pdp-swatch.active .lbl { color:var(--ink-900); font-weight:var(--fw-bold); }

/* Spec row showing multiple colours inline */
.spec-colours { display:flex; gap:14px; flex-wrap:wrap; }
.spec-colours .item { display:inline-flex; align-items:center; gap:6px; font-size:14px; }
.spec-colours .swatch {
  width:14px; height:14px; border-radius:50%;
  border:1px solid var(--border-2);
  display:inline-block;
}
.pdp { background:var(--surface-base); padding:32px 0 64px; }
.pdp-grid {
  display:grid; grid-template-columns:1.05fr 1fr;
  gap:56px; align-items:start;
}
.pdp-gallery { position:sticky; top:88px; align-self:start; }
.pdp-mainimg {
  background:var(--jovi-craft-bg);
  border-radius:var(--radius-lg);
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  padding:48px;
  border:2px solid var(--ink-900);
}
.pdp-mainimg img { max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 18px 36px rgba(0,0,0,.16)); }
.pdp-thumbs {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:10px; margin-top:14px;
}
.pdp-thumb {
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:1/1;
  background:var(--surface-base);
  border:1.5px solid var(--border-1);
  border-radius:var(--radius-md);
  padding:8px;
  text-decoration:none;
  transition:border-color var(--dur-base);
}
.pdp-thumb:hover { border-color:var(--ink-900); }
.pdp-thumb.active { border-color:var(--jovi-red); border-width:2.5px; }
.pdp-thumb img { width:100%; height:100%; object-fit:contain; }

.pdp-info { padding-top:8px; }
.pdp-cat {
  font-size:11px; font-weight:var(--fw-bold);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--jovi-red);
}
.pdp h1 {
  font-size:clamp(28px, 4vw, 44px);
  font-weight:var(--fw-black);
  letter-spacing:-.02em; line-height:1.1;
  margin:12px 0 12px;
}
.pdp-tagline {
  font-size:17px; color:var(--fg-2); line-height:1.55;
  margin-bottom:20px;
}

/* Weight selector (clay only) */
.pdp-weights {
  display:flex; gap:8px; flex-wrap:wrap;
  margin-bottom:18px;
}
.pdp-weight {
  flex:1; min-width:120px;
  padding:14px 16px;
  background:var(--surface-base);
  border:2px solid var(--border-2);
  border-radius:var(--radius-md);
  cursor:pointer;
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  transition:border-color var(--dur-base), background var(--dur-base);
  font-family:inherit;
  text-align:left;
}
.pdp-weight:hover { border-color:var(--ink-900); }
.pdp-weight.active {
  border-color:var(--jovi-red);
  background:rgba(230,0,70,.04);
}
.pdp-weight .w-label { font-size:14px; font-weight:var(--fw-bold); color:var(--ink-900); }
.pdp-weight .w-price { font-size:13px; font-weight:var(--fw-semibold); color:var(--fg-3); }
.pdp-weight.active .w-price { color:var(--jovi-red); }

/* Price + stock + age pill */
.pdp-price-row { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:6px; }
.pdp-price {
  font-size:38px; font-weight:var(--fw-black);
  color:var(--jovi-red); letter-spacing:-.02em; line-height:1;
}
.pdp-stock {
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:var(--fw-semibold);
  color:#0E7C3A;
}
.pdp-stock::before {
  content:""; width:8px; height:8px; border-radius:50%;
  background:#0E7C3A;
}
.pdp-meta { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; margin-bottom:20px; }
.pdp-meta .chip {
  padding:5px 12px; background:var(--ink-100);
  border-radius:var(--radius-pill);
  font-size:12px; font-weight:var(--fw-semibold); color:var(--fg-2);
}

/* Trust bullets */
.pdp-trust { list-style:none; padding:0; margin:0 0 24px; display:flex; flex-direction:column; gap:10px; }
.pdp-trust li {
  display:flex; align-items:center; gap:10px;
  font-size:14.5px; color:var(--fg-2);
}
.pdp-trust li::before {
  content:"✓"; flex-shrink:0;
  width:22px; height:22px; border-radius:50%;
  background:var(--jovi-yellow); color:var(--jovi-red);
  display:flex; align-items:center; justify-content:center;
  font-weight:var(--fw-bold); font-size:13px;
}

/* Order card — WhatsApp + marketplace buttons */
.pdp-order {
  margin-top:16px;
  padding:24px;
  background:var(--surface-warm);
  border:2px solid var(--ink-900);
  border-radius:var(--radius-lg);
}
.pdp-order .order-label {
  font-size:11px; font-weight:var(--fw-bold);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--fg-3);
  margin-bottom:12px;
  display:block;
}
.pdp-order .order-cta {
  width:100%; justify-content:center;
  padding:16px 22px; font-size:16px;
  background:#25D366; color:#fff;
  border-color:#25D366;
}
.pdp-order .order-cta:hover { background:#1FAA52; }
.pdp-order .order-sep {
  display:flex; align-items:center; gap:12px;
  margin:14px 0;
  font-size:11px; font-weight:var(--fw-bold);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--fg-3);
}
.pdp-order .order-sep::before,
.pdp-order .order-sep::after {
  content:""; flex:1; height:1px; background:var(--border-1);
}
.pdp-order .mp-buttons { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.pdp-order .mp-buttons a {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 12px;
  border-radius:var(--radius-pill);
  border:2px solid var(--ink-900);
  font-size:13px; font-weight:var(--fw-bold);
  text-decoration:none;
  background:#fff; color:var(--ink-900);
  transition:transform var(--dur-base);
}
.pdp-order .mp-buttons a:hover { transform:translateY(-1px); text-decoration:none; }
.pdp-order .mp-buttons a img { width:18px; height:18px; }
.pdp-order .mp-buttons a.shopee { background:#fff; color:#EE4D2D; }
.pdp-order .mp-buttons a.lazada { background:#0F156D; color:#fff; }
.pdp-order .mp-buttons a.tiktok { background:#000; color:#fff; }

.pdp-school-cta {
  margin-top:14px;
  padding:14px 18px;
  background:var(--jovi-yellow);
  border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:13.5px; font-weight:var(--fw-semibold); color:var(--ink-900);
  flex-wrap:wrap;
}
.pdp-school-cta a { color:var(--jovi-red); font-weight:var(--fw-bold); text-decoration:underline; }

/* Spec table */
.spec-table { width:100%; border-collapse:collapse; margin-top:16px; }
.spec-table th, .spec-table td {
  padding:14px 16px;
  text-align:left;
  border-bottom:1px solid var(--border-1);
  font-size:14.5px;
  vertical-align:top;
}
.spec-table th {
  font-weight:var(--fw-semibold);
  color:var(--fg-3);
  width:40%;
  background:var(--surface-warm);
}
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom:0; }

/* About / how-to section on PDP */
.pdp-about p {
  font-size:16px; line-height:1.7; color:var(--fg-2);
  margin-bottom:14px;
}
.pdp-about p strong { color:var(--ink-900); }

/* You may also like */
.you-may { background:var(--surface-warm); padding:64px 0; }

@media (max-width:980px) {
  .pdp-grid { grid-template-columns:1fr; gap:32px; }
  .pdp-gallery { position:static; }
  .pdp-mainimg { padding:32px; }
  .pdp-weights { gap:6px; }
  .pdp-weight { min-width:90px; padding:12px; }
  .pdp h1 { font-size:28px; }
  .pdp-price { font-size:32px; }
}
@media (max-width:520px) {
  .pdp-order .mp-buttons { grid-template-columns:1fr; }
  .pdp-order .mp-buttons a { padding:12px; }
  /* Push content above the floating widget on small mobile */
  body { padding-bottom:64px; }
}

/* =====================================================================
   GENERIC BANNER (dark ink) — used on About / Schools / Stockists / etc.
   ===================================================================== */
.banner { background:var(--ink-900); color:var(--jovi-yellow); padding:64px 0; }
.banner .eyebrow { color:var(--jovi-yellow); font-size:12px; text-transform:uppercase; letter-spacing:.12em; font-weight:var(--fw-bold); opacity:.7; margin-bottom:14px; display:inline-block; }
.banner h1 { font-size:clamp(36px,5vw,56px); font-weight:var(--fw-black); letter-spacing:-.02em; line-height:1.05; color:var(--jovi-yellow); }
.banner p { font-size:17px; opacity:.85; max-width:640px; margin-top:14px; line-height:1.55; }
.banner a { color:var(--jovi-yellow); text-decoration:underline; }

/* =====================================================================
   YELLOW HERO (Home / About) — 2-col, image right
   ===================================================================== */
.hero-wrap { background:var(--jovi-yellow); position:relative; overflow:hidden; border-bottom:4px solid var(--jovi-red); }
.hero-grid { display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center; padding:80px 0; }
.hero-eyebrow {
  display:inline-block;
  background:var(--jovi-red); color:var(--jovi-yellow);
  padding:8px 14px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:var(--fw-bold);
  letter-spacing:.08em; text-transform:uppercase;
}
.hero h1 { font-size:clamp(40px,5.5vw,72px); font-weight:var(--fw-black); letter-spacing:-.03em; line-height:1; margin:22px 0 20px; color:var(--ink-900); }
.hero p { font-size:19px; color:var(--ink-800); max-width:560px; line-height:1.55; }
.hero-ctas { margin-top:28px; display:flex; gap:12px; flex-wrap:wrap; }
.hero-art-simple {
  aspect-ratio:1/1; max-width:520px; width:100%; justify-self:end;
  background:var(--surface-base);
  border:3px solid var(--ink-900);
  border-radius:var(--radius-xl);
  display:flex; align-items:center; justify-content:center;
  padding:48px;
}
.hero-art-simple img { width:90%; height:90%; object-fit:contain; filter:drop-shadow(0 18px 36px rgba(0,0,0,.18)); }
@media (max-width:980px) {
  .hero-grid { grid-template-columns:1fr; gap:32px; padding:56px 0; }
  .hero-art-simple { max-width:420px; margin:0 auto; justify-self:center; }
}

/* =====================================================================
   LIGHT TRUST STRIP (dark on yellow) — Home variant
   ===================================================================== */
.trust-dark { background:var(--ink-900); color:var(--jovi-yellow); padding:20px 0; }
.trust-dark .inner { display:flex; gap:32px; flex-wrap:wrap; align-items:center; justify-content:center; }
.trust-dark .item { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:var(--fw-medium); }
.trust-dark .dot { width:6px; height:6px; border-radius:50%; background:var(--jovi-yellow); opacity:.4; }

/* =====================================================================
   FIND-YOUR-FIT category cards (4-col, image-led)
   ===================================================================== */
.fit-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.fit-card {
  padding:24px 22px 22px; border-radius:var(--radius-lg);
  border:2px solid var(--ink-900);
  position:relative; overflow:hidden;
  transition:transform var(--dur-base) var(--ease-snap), box-shadow var(--dur-base);
  display:flex; flex-direction:column; min-height:360px;
  text-decoration:none; color:inherit;
}
.fit-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); text-decoration:none; }
.fit-card .num { font-size:11px; font-weight:var(--fw-bold); letter-spacing:.12em; text-transform:uppercase; opacity:.8; margin-bottom:8px; }
.fit-card .art {
  position:relative; flex:1; min-height:150px;
  display:flex; align-items:center; justify-content:center;
  margin:8px 0 16px;
}
.fit-card .art .blob {
  position:absolute; width:70%; aspect-ratio:1/1;
  border-radius:50% 60% 40% 50% / 50% 40% 60% 50%;
  left:15%; top:10%;
}
.fit-card .art img { position:relative; max-width:90%; max-height:150px; object-fit:contain; z-index:1; filter:drop-shadow(0 8px 20px rgba(0,0,0,.18)); }
.fit-card h3 { font-size:28px; font-weight:var(--fw-black); letter-spacing:-.02em; line-height:1; margin-bottom:6px; }
.fit-card p { font-size:13px; line-height:1.4; opacity:.9; max-width:75%; }
.fit-card .arrow {
  position:absolute; bottom:18px; right:18px;
  width:40px; height:40px; border-radius:50%;
  background:var(--ink-900); color:var(--jovi-yellow);
  display:flex; align-items:center; justify-content:center; font-weight:var(--fw-bold);
}
@media (max-width:980px) { .fit-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .fit-grid { grid-template-columns:1fr; } }

/* =====================================================================
   WHY-STRIP (dark stats)
   ===================================================================== */
.why-strip { background:var(--ink-900); color:#fff; padding:64px 0; }
.why-eyebrow { font-size:11px; font-weight:var(--fw-bold); letter-spacing:.25em; text-transform:uppercase; color:var(--jovi-yellow); margin-bottom:28px; }
.why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:40px; }
.why-cred { border-left:3px solid var(--jovi-yellow); padding-left:18px; }
.why-cred .num { font-size:44px; font-weight:var(--fw-black); color:var(--jovi-yellow); line-height:1; margin-bottom:10px; letter-spacing:-.02em; }
.why-cred .lbl { font-size:14px; color:rgba(255,255,255,.85); line-height:1.45; }
@media (max-width:980px) { .why-grid { grid-template-columns:repeat(2,1fr); gap:28px; } }
@media (max-width:520px) { .why-grid { grid-template-columns:1fr; } }

/* =====================================================================
   3-CARD SCHOOL/CREDENTIAL GRID
   ===================================================================== */
.three-card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.three-card {
  padding:28px; background:var(--surface-base);
  border:2px solid var(--ink-900); border-radius:var(--radius-lg);
}
.three-card .num { font-size:48px; font-weight:var(--fw-black); color:var(--jovi-red); line-height:1; letter-spacing:-.02em; }
.three-card h4 { font-size:20px; font-weight:var(--fw-bold); margin:10px 0 6px; }
.three-card p { font-size:14.5px; color:var(--fg-2); line-height:1.55; }
@media (max-width:880px) { .three-card-grid { grid-template-columns:1fr; } }

/* =====================================================================
   YELLOW CTA CARD (in-page big yellow callout)
   ===================================================================== */
.cta-card {
  padding:48px 36px; background:var(--jovi-yellow);
  border-radius:var(--radius-lg); border:2px solid var(--jovi-red);
  margin-top:48px;
}
.cta-card .label { display:inline-block; font-size:11px; font-weight:var(--fw-bold); letter-spacing:.25em; text-transform:uppercase; color:var(--jovi-red); margin-bottom:12px; }
.cta-card h2 { font-size:30px; letter-spacing:-.02em; margin-bottom:12px; color:var(--ink-900); font-weight:var(--fw-black); }
.cta-card p { font-size:16px; color:var(--ink-900); max-width:620px; margin-bottom:20px; line-height:1.55; }
.cta-card .ctas { display:flex; gap:10px; flex-wrap:wrap; }

/* =====================================================================
   FILTER BAR (Shop)
   ===================================================================== */
.filter-bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:28px; }
.filter-pill {
  padding:8px 16px; border-radius:var(--radius-pill);
  border:1.5px solid var(--border-2);
  font-size:13.5px; font-weight:var(--fw-medium);
  background:transparent; color:var(--fg-1);
  transition:all var(--dur-base);
  text-decoration:none;
}
.filter-pill:hover { border-color:var(--ink-900); text-decoration:none; }
.filter-pill.active { background:var(--ink-900); color:var(--jovi-yellow); border-color:var(--ink-900); }
.filter-bar .spacer { flex:1; }

/* =====================================================================
   BLOG GRID (2-col)
   ===================================================================== */
.blog-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.blog-card {
  display:block; padding:28px;
  border-radius:var(--radius-lg);
  background:var(--surface-base);
  border:2px solid var(--ink-200);
  transition:transform var(--dur-base), box-shadow var(--dur-base), border-color var(--dur-base);
  text-decoration:none; color:inherit;
}
.blog-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--ink-900); text-decoration:none; }
.blog-card .meta { font-size:12px; color:var(--fg-3); display:flex; gap:12px; text-transform:uppercase; letter-spacing:.06em; font-weight:var(--fw-semibold); flex-wrap:wrap; }
.blog-card .meta .tag { color:var(--jovi-red); }
.blog-card h2 { font-size:22px; font-weight:var(--fw-black); margin:14px 0 10px; line-height:1.2; letter-spacing:-.01em; color:var(--ink-900); }
.blog-card p { font-size:15px; line-height:1.5; color:var(--fg-2); }
.blog-card .more { margin-top:18px; color:var(--jovi-red); font-weight:var(--fw-bold); font-size:14px; display:block; }
@media (max-width:880px) { .blog-grid { grid-template-columns:1fr; } }

/* =====================================================================
   CONTACT GRID (form + info)
   ===================================================================== */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.field label { font-size:12px; font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:.08em; color:var(--fg-3); }
.field input, .field select, .field textarea {
  padding:12px 14px; border-radius:var(--radius-md);
  border:1.5px solid var(--border-2); background:#fff;
  font-family:inherit; font-size:15px;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--jovi-red); outline:none; }
.field textarea { min-height:120px; resize:vertical; }
.contact-info { background:var(--ink-900); color:var(--jovi-yellow); padding:32px; border-radius:var(--radius-lg); }
.contact-info h3 { font-size:24px; font-weight:var(--fw-black); margin-bottom:18px; color:var(--jovi-yellow); }
.contact-info .row { padding:14px 0; border-bottom:1px solid rgba(255,220,0,.15); }
.contact-info .row:last-child { border:0; }
.contact-info .lbl { font-size:11px; text-transform:uppercase; letter-spacing:.1em; opacity:.6; font-weight:var(--fw-bold); }
.contact-info .val { font-size:16px; font-weight:var(--fw-semibold); margin-top:4px; }
.contact-info .val a { color:var(--jovi-yellow); text-decoration:underline; }
.contact-marketplace { display:flex; gap:10px; margin-top:14px; }
.contact-marketplace a { width:40px; height:40px; border-radius:50%; background:#fff; display:inline-flex; align-items:center; justify-content:center; padding:6px; }
.contact-marketplace a img { max-width:100%; max-height:100%; }
@media (max-width:880px) { .contact-grid { grid-template-columns:1fr; } }

/* =====================================================================
   REVIEW / IG GRID (#JoviCreates)
   ===================================================================== */
.ig-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.ig-card { background:#fff; border:1.5px solid var(--border-1); border-radius:var(--radius-md); overflow:hidden; display:flex; flex-direction:column; }
.ig-head { display:flex; align-items:center; gap:10px; padding:12px 14px; }
.ig-avatar { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:var(--fw-black); flex-shrink:0; background:var(--jovi-red); color:var(--jovi-yellow); }
.ig-meta { flex:1; min-width:0; }
.ig-handle { font-size:13px; font-weight:var(--fw-bold); color:var(--ink-900); }
.ig-handle .stars { color:var(--jovi-red); margin-left:6px; font-size:12px; letter-spacing:.05em; }
.ig-city { font-size:11px; color:var(--fg-3); }
.ig-photo {
  aspect-ratio:1/1; position:relative;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.ig-photo .blob { position:absolute; width:80%; aspect-ratio:1/1; border-radius:50% 40% 50% 60%; left:10%; top:10%; background:rgba(255,255,255,.5); }
.ig-photo img { position:relative; max-width:75%; max-height:75%; object-fit:contain; z-index:1; filter:drop-shadow(0 8px 20px rgba(0,0,0,.2)); }
.ig-caption { padding:10px 14px 8px; font-size:12.5px; line-height:1.4; color:var(--fg-2); }
.ig-tag { padding:0 14px 12px; font-size:11px; color:var(--fg-3); font-family:ui-monospace,'SF Mono',Menlo,monospace; }
@media (max-width:980px) { .ig-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .ig-grid { grid-template-columns:1fr; } }

/* =====================================================================
   NEWSLETTER STRIP
   ===================================================================== */
.newsletter { background:var(--ink-900); color:#fff; padding:64px 0; }
.newsletter-inner { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.newsletter h2 { font-size:32px; font-weight:var(--fw-black); color:var(--jovi-yellow); letter-spacing:-.02em; }
.newsletter p { color:rgba(255,255,255,.7); margin-top:8px; }
.newsletter form { display:flex; gap:8px; }
.newsletter input { flex:1; padding:14px 18px; border-radius:var(--radius-pill); border:0; background:#fff; color:var(--ink-900); }
@media (max-width:880px) { .newsletter-inner { grid-template-columns:1fr; } }