/* ======================================================
   SPARKSIDE – GLOBAL DESIGN SYSTEM
   Desktop + Tablet + Mobile
   ====================================================== */

/* ---------- Brand Tokens ---------- */
:root{
  --spark-pink:#F7799F;
  --spark-softpink:#F0ADE5;
  --spark-purple:#AC79F7;
  --spark-charcoal:#333333;
  --spark-white:#FFFFFF;

  --bg:#FFFFFF;
  --text:#333333;

  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:26px;

  --shadow-soft:0 10px 30px rgba(0,0,0,.08);
  --shadow-hover:0 14px 40px rgba(0,0,0,.12);

  --container-max:1180px;

  --pad-y:clamp(56px,7vw,110px);
  --pad-x:clamp(18px,3vw,34px);

  --h1:clamp(40px,4.6vw,64px);
  --h2:clamp(28px,3.2vw,40px);
  --h3:clamp(20px,2.3vw,26px);
  --body:16px;
  --lead:18px;
}

/* ---------- Base ---------- */
html{scroll-behavior:smooth;}
body{
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:var(--body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Typography ---------- */
h1,h2,h3,h4{
  color:var(--spark-charcoal);
  letter-spacing:-0.02em;
  line-height:1.15;
  margin:0 0 12px;
}
h1{font-size:var(--h1);}
h2{font-size:var(--h2);}
h3{font-size:var(--h3);}
p{margin:0 0 14px;}
.lead{font-size:var(--lead);color:rgba(51,51,51,.85);}

/* ---------- Layout ---------- */
.section-sparkside{padding:var(--pad-y) 0;}
.container-sparkside{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--pad-x);
}

/* ---------- Buttons ---------- */
.btn-sparkside{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 18px;
  border-radius:999px;
  font-weight:650;
  border:1px solid rgba(51,51,51,.12);
  transition:.18s ease;
}
.btn-primary{
  background:var(--spark-charcoal);
  color:#fff;
}
.btn-accent{
  background:linear-gradient(135deg,var(--spark-pink),var(--spark-purple));
  color:#fff;
  border:0;
}
.btn-sparkside:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-hover);
}

/* ---------- Cards ---------- */
.card-sparkside{
  background:rgba(255,255,255,.92);
  border-radius:var(--radius-lg);
  border:1px solid rgba(51,51,51,.1);
  box-shadow:var(--shadow-soft);
  padding:22px;
  transition:.18s ease;
}
.card-sparkside:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-hover);
}

/* ---------- Portfolio ---------- */
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:18px;
}
.portfolio-item{
  grid-column:span 4;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow-soft);
}

/* ---------- Team ---------- */
.team-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:18px;
}
.team-card{
  grid-column:span 6;
  border-radius:var(--radius-lg);
  padding:18px;
  background:#fff;
  box-shadow:var(--shadow-soft);
}
.team-photo{
  width:140px;
  height:140px;
  border-radius:20px;
  margin-bottom:12px;
  background:linear-gradient(135deg,var(--spark-pink),var(--spark-purple));
}

/* =========================
   TABLET (≤1024px)
   ========================= */
@media (max-width:1024px){
  :root{
    --h1:clamp(34px,4.4vw,52px);
    --h2:clamp(26px,3vw,36px);
    --pad-y:clamp(48px,6vw,90px);
  }
  .portfolio-item{grid-column:span 6;}
  .team-card{grid-column:span 12;}
}

/* =========================
   MOBILE (≤640px)
   ========================= */
@media (max-width:640px){
  :root{
    --h1:32px;
    --h2:24px;
    --h3:19px;
    --pad-y:56px;
  }

  .btn-sparkside{
    width:100%;
    padding:14px 18px;
  }

  .portfolio-item{grid-column:span 12;}

  .team-photo{
    width:110px;
    height:110px;
    margin:0 auto 10px;
  }

  input,textarea,select{
    font-size:16px !important;
  }
}

/* =========================
   SPARKSIDE – Jetpack Font Override
   ========================= */

/* Jetpack sets these to unset; we force our brand font */
:root{
  --font-headings: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  --font-base: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;

  /* also override Jetpack defaults */
  --font-headings-default: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  --font-base-default: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* make sure everything inherits it */
html, body{
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

h1,h2,h3,h4,h5,h6,
p,span,a,li,ul,ol,
button,input,textarea,select,label,
div,section,article,main{
  font-family: inherit !important;
}