/* ============================================================
   SKYLINE CORE — canonical design system v1
   Extracted from weddings.html. COLOUR-AGNOSTIC: every colour
   reads from per-page --sk-* variables. Load this BEFORE each
   page's inline <style> so page-specific rules win on conflict.
   ============================================================ */

/* ---- Typography: section header trio ---- */
.sk-eyebrow{
  font-size:0.74rem; font-weight:700; letter-spacing:0.2em;
  text-transform:uppercase;
  background:var(--sk-grad-eyebrow); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent;
  display:block; text-align:center; margin-bottom:16px;
}
.sk-section-title{
  font-family:'DM Sans',sans-serif; font-weight:800;
  font-size:clamp(2rem,4vw,3rem); letter-spacing:-0.04em;
  line-height:1.08; text-align:center; margin-bottom:16px;
}
.sk-section-sub{
  font-size:1rem; color:rgba(255,255,255,0.58);
  text-align:center; max-width:560px; margin:0 auto; line-height:1.7;
}
/* gradient headline span — re-declare background-clip after any
   shorthand override (background shorthand silently resets it) */
.sk-grad{
  background:var(--sk-grad-primary); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent;
}

/* ---- Section rhythm (fluid: ~100px desktop -> ~56px mobile) ---- */
.sk-section{ padding:clamp(56px,9vw,100px) 20px; position:relative; }

/* ---- Buttons ---- */
.sk-btn-primary{
  background:var(--sk-grad-cta); color:var(--sk-ink,#06080F);
  padding:16px 36px; border-radius:10px;
  font-family:'DM Sans',sans-serif; font-weight:700; font-size:1rem;
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; border:none; cursor:pointer;
  box-shadow:0 6px 24px rgba(0,0,0,0.28);
  transition:transform .2s, box-shadow .2s, opacity .2s;
}
.sk-btn-primary:hover{ transform:translateY(-2px); }
.sk-btn-secondary{
  background:rgba(255,255,255,0.06); color:#fff;
  padding:16px 32px; border-radius:10px;
  font-family:'DM Sans',sans-serif; font-weight:600; font-size:1rem;
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; border:1px solid rgba(255,255,255,0.15);
  transition:all .2s;
}
@media(max-width:768px){
  .sk-btn-primary,.sk-btn-secondary{ width:100%; justify-content:center; }
}

/* ---- Card shell ---- */
.sk-card{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:20px; padding:32px 28px;
  transition:border-color .3s, transform .3s;
}

/* ---- Scroll reveal ----
   Hiding is scoped to html.sk-js (added by a tiny inline head
   script) so content stays visible if JS is disabled. */
html.sk-js .sk-reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .65s cubic-bezier(0.22,1,0.36,1),
             transform .65s cubic-bezier(0.22,1,0.36,1);
}
html.sk-js .sk-reveal.visible{ opacity:1; transform:translateY(0); }
.sk-reveal-delay-1{ transition-delay:.1s; }
.sk-reveal-delay-2{ transition-delay:.2s; }
.sk-reveal-delay-3{ transition-delay:.3s; }
.sk-reveal-delay-4{ transition-delay:.4s; }

/* ---- Shimmer (hero titles ONLY — used sparingly) ---- */
@keyframes skShimmer{ 0%{background-position:200% center;} 100%{background-position:-200% center;} }
.sk-shimmer{ background-size:250% auto; animation:skShimmer 3.5s linear infinite; }

/* ---- Reduced-motion floor ---- */
@media(prefers-reduced-motion:reduce){
  html.sk-js .sk-reveal{ opacity:1; transform:none; transition:none; }
  .sk-shimmer{ animation:none; }
}

/* ============================================================
   PRICING — package card (extended: + system-size table)
   Lifted from house-sale/weddings pkg-card, colour-agnostic.
   ============================================================ */
.sk-pkg-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:24px; max-width:900px; margin:48px auto 0;
}
.sk-pkg-card{
  background:rgba(20,25,35,0.7); border:1px solid rgba(255,255,255,0.07);
  border-radius:20px; padding:28px 24px 32px;
  display:flex; flex-direction:column; text-align:left; position:relative;
  transition:transform .3s, box-shadow .3s, border-color .3s;
}
.sk-pkg-card:hover{ transform:translateY(-5px); box-shadow:0 20px 50px rgba(0,0,0,0.4); }
.sk-pkg-card.featured{ border-color:var(--sk-primary); }
.sk-pkg-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--sk-grad-cta); color:var(--sk-ink,#06080F);
  padding:5px 16px; border-radius:100px; font-size:0.65rem; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; white-space:nowrap;
}
.sk-pkg-tier{
  font-size:0.65rem; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--sk-primary); margin-bottom:8px;
}
.sk-pkg-name{
  font-family:'DM Sans',sans-serif; font-size:1.2rem; font-weight:800;
  letter-spacing:-0.02em; color:#fff; margin-bottom:6px;
}
.sk-pkg-price{
  font-family:'DM Sans',sans-serif; font-size:2.4rem; font-weight:800;
  letter-spacing:-0.04em; color:var(--sk-primary); line-height:1.05; margin-bottom:4px;
}
.sk-pkg-price-note{ font-size:0.78rem; color:rgba(255,255,255,0.4); line-height:1.45; margin-bottom:18px; }
.sk-pkg-divider{ height:1px; background:rgba(255,255,255,0.08); margin-bottom:18px; }
.sk-pkg-features{ list-style:none; display:flex; flex-direction:column; gap:9px; flex:1; margin-bottom:20px; }
.sk-pkg-features li{ font-size:0.82rem; color:rgba(255,255,255,0.7); display:flex; align-items:flex-start; gap:8px; line-height:1.45; }
.sk-pkg-features li::before{ content:'\2713'; color:var(--sk-primary); font-weight:700; flex-shrink:0; }
.sk-pkg-sizes{ background:rgba(255,255,255,0.03); border-radius:12px; padding:14px 16px; margin-bottom:20px; }
.sk-pkg-sizes-label{ font-size:0.62rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.4); margin-bottom:8px; }
.sk-pkg-size-row{ display:flex; justify-content:space-between; align-items:center; font-size:0.82rem; color:rgba(255,255,255,0.55); padding:3px 0; }
.sk-pkg-size-row.active{ color:rgba(255,255,255,0.9); font-weight:600; }
.sk-pkg-size-val{ font-weight:700; color:var(--sk-primary); }
.sk-pkg-size-meta{ opacity:0.45; font-weight:400; }
.sk-pkg-size-custom{ color:rgba(255,255,255,0.4) !important; }
.sk-pkg-cta{
  display:block; text-align:center; margin-top:auto; padding:14px 16px;
  border-radius:10px; font-family:'DM Sans',sans-serif; font-weight:700;
  font-size:0.9rem; cursor:pointer; text-decoration:none; transition:all .2s;
  background:rgba(255,255,255,0.06); border:1px solid var(--sk-primary); color:var(--sk-primary);
}
.sk-pkg-card.featured .sk-pkg-cta{ background:var(--sk-grad-cta); color:var(--sk-ink,#06080F); border:none; }
.sk-pkg-cta:hover{ transform:translateY(-1px); opacity:0.92; }

/* ============================================================
   STEPS — numbered dots on a connecting line ("how it works")
   ============================================================ */
.sk-steps-grid{
  display:grid; grid-template-columns:repeat(var(--sk-steps,3),1fr);
  max-width:900px; margin:48px auto 0; position:relative;
}
.sk-steps-grid::before{
  content:''; position:absolute; top:27px; left:16%; right:16%; height:2px;
  background:linear-gradient(to right,transparent,rgba(255,255,255,0.08) 12%,rgba(255,255,255,0.18) 50%,rgba(255,255,255,0.08) 88%,transparent);
  z-index:0;
}
.sk-step{ text-align:center; padding:0 12px; position:relative; z-index:1; }
.sk-step-dot{
  width:54px; height:54px; border-radius:50%;
  background:var(--sk-bg-step,#0A0E17); border:2px solid var(--sk-primary);
  display:flex; align-items:center; justify-content:center; margin:0 auto 20px;
  font-family:'DM Sans',sans-serif; font-weight:800; font-size:1.25rem; color:var(--sk-primary);
}
.sk-step-title{ font-family:'DM Sans',sans-serif; font-size:1rem; font-weight:700; color:#fff; margin-bottom:8px; }
.sk-step-desc{ font-size:0.82rem; color:rgba(255,255,255,0.5); line-height:1.6; }
@media(max-width:680px){
  .sk-steps-grid{ grid-template-columns:1fr; gap:28px; }
  .sk-steps-grid::before{ display:none; }
}