/* =========================================================
   SERVICE PAGES (Events / Stalls / Activations / Merchandise)
   ========================================================= */

/* ---------- HERO ---------- */
.sp-hero{
  background:var(--orange);
  color:#fff;
  padding:72px 0;
  position:relative;
  overflow:hidden;
}
.sp-hero::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(circle at 20% 0%, rgba(255,255,255,.14), transparent 55%),
             radial-gradient(circle at 90% 100%, rgba(0,0,0,.18), transparent 60%);
  pointer-events:none;
}
.sp-hero .container{
  position:relative;z-index:1;
  max-width:1200px;
  padding:0 32px;
  text-align:center;
}
.crumbs{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.72rem;
  color:rgba(255,255,255,.75);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:18px;
  padding:6px 16px;
  border-radius:99px;
  background:rgba(0,0,0,.15);
}
.crumbs a{color:rgba(255,255,255,.75);transition:color .25s}
.crumbs a:hover{color:#fff}
.crumbs b{color:#fff;font-weight:600}
.crumbs span{color:rgba(255,255,255,.5)}

.sp-hero h1{
  font-family:"Trebuchet MS","Lucida Grande",Tahoma,sans-serif;
  font-size:clamp(2.2rem, 5vw, 3.6rem);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:#fff;
  margin-bottom:14px;
}
.sp-hero h1 span{
  color:#0e0e10;
  font-style:italic;
}
.sp-hero p{
  font-size:clamp(.92rem, 1.3vw, 1.02rem);
  line-height:1.7;
  color:rgba(255,255,255,.92);
  max-width:600px;
  margin:0 auto;
  text-transform: capitalize;
}

/* ---------- EYEBROW ---------- */
.sp-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:14px;
}
.sp-eyebrow::before{
  content:"";
  width:34px;height:2px;
  background:var(--orange);
}
.sp-cta .sp-eyebrow{color:var(--orange);justify-content:center}
.sp-cta .sp-eyebrow::before{background:var(--orange)}

/* ---------- HEADINGS ---------- */
.sp-intro h2,
.sp-head h2,
.sp-cta h2{
  font-family:"Trebuchet MS","Lucida Grande",Tahoma,sans-serif;
  font-size:clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:16px;
}
.sp-intro h2 .accent,
.sp-head h2 .accent,
.sp-cta h2 .accent{color:var(--orange)}

/* =========================================================
   2. INTRO
   ========================================================= */
.sp-intro{
  padding:80px 0;
  background:var(--white);
}
.sp-intro .container{
  max-width:1300px;
  padding:0 32px;
  margin:0 auto;
}
.sp-intro-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}
.sp-intro-text p{
  color:#55515a;
  font-size:.96rem;
  line-height:1.75;
  margin-bottom:16px;
  max-width:520px;
}
.sp-intro-text .btn{margin-top:14px}
.sp-intro-img{
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(40,20,5,.14);
  aspect-ratio:4/3;
}
.sp-intro-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* =========================================================
   3. OFFER (features)
   ========================================================= */
.sp-offer{
  padding:80px 0;
  background:#f8f8f8;
}
.sp-offer .container{
  max-width:1300px;
  padding:0 32px;
  margin:0 auto;
}
.sp-head{
  max-width:640px;
  margin:0 auto 50px;
  text-align:center;
}
.sp-head .sp-eyebrow{justify-content:center}

.sp-offer-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:22px;
}
.sp-offer-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:30px 24px 28px;
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.sp-offer-card:hover{
  transform:translateY(-6px);
  border-color:var(--orange);
  box-shadow:0 20px 44px rgba(242,83,27,.15);
}
.sp-offer-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:14px;
  background:rgba(242,83,27,.1);
  color:var(--orange);
  margin-bottom:18px;
  transition:background .3s, color .3s;
}
.sp-offer-card:hover .sp-offer-icon{
  background:var(--orange);
  color:#fff;
}
.sp-offer-icon svg{width:24px;height:24px}

.sp-offer-card h3{
  font-family:"Trebuchet MS","Lucida Grande",Tahoma,sans-serif;
  font-size:1.02rem;
  font-weight:700;
  color:var(--ink);
  margin-bottom:8px;
  letter-spacing:-.01em;
}
.sp-offer-card p{
  font-size:.82rem;
  color:var(--muted);
  line-height:1.6;
}

/* =========================================================
   4. TYPES (image grid)
   ========================================================= */
.sp-types{
  padding:80px 0;
  background:var(--white);
}
.sp-types .container{
  max-width:1300px;
  padding:0 32px;
  margin:0 auto;
}
.sp-types-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
.sp-type{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  aspect-ratio:4/3;
  cursor:pointer;
  background:#f0f0f0;
}
.sp-type img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .7s ease;
}
.sp-type:hover img{transform:scale(1.08)}

.sp-type::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.75), transparent 55%);
  pointer-events:none;
  transition:opacity .35s;
}
.sp-type:hover::after{opacity:.85}

.sp-type-info{
  position:absolute;
  left:22px;bottom:22px;
  right:22px;
  z-index:2;
  color:#fff;
}
.sp-type-info h3{
  font-family:"Trebuchet MS","Lucida Grande",Tahoma,sans-serif;
  font-size:1.1rem;
  font-weight:700;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:#fff;
  transition:color .3s;
}
.sp-type:hover .sp-type-info h3{color:var(--orange)}

/* =========================================================
   5. PROCESS
   ========================================================= */
.sp-process{
  padding:80px 0;
  background:#0e0e10;
  color:#fff;
}
.sp-process .container{
  max-width:1300px;
  padding:0 32px;
  margin:0 auto;
}
.sp-process .sp-head h2{color:#fff}
.sp-process .sp-head .sp-eyebrow{color:var(--orange)}
.sp-steps{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:22px;
}
.sp-step{
  position:relative;
  padding:32px 24px 28px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  transition:border-color .3s, transform .3s, background .3s;
}
.sp-step:hover{
  border-color:rgba(242,83,27,.5);
  background:rgba(242,83,27,.08);
  transform:translateY(-4px);
}
.sp-step-num{
  display:block;
  font-family:"Lora",Georgia,serif;
  font-size:3rem;
  font-weight:500;
  line-height:1;
  color:transparent;
  -webkit-text-stroke:1.5px var(--orange);
  margin-bottom:16px;
}
.sp-step h3{
  font-family:"Trebuchet MS","Lucida Grande",Tahoma,sans-serif;
  font-size:1.05rem;
  font-weight:700;
  color:#fff;
  margin-bottom:8px;
  letter-spacing:-.01em;
}
.sp-step p{
  font-size:.82rem;
  color:#b9b5bc;
  line-height:1.6;
}

/* =========================================================
   6. CTA
   ========================================================= */
.sp-cta{
  padding:80px 0;
  background:var(--black);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.sp-cta::before{
  content:"";
  position:absolute;
  right:-160px;top:-160px;
  width:520px;height:520px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(242,83,27,.4),transparent 65%);
  pointer-events:none;
}
.sp-cta .container{
  position:relative;z-index:1;
  max-width:900px;
  padding:0 32px;
  margin:0 auto;
  text-align:center;
}
.sp-cta h2{color:#fff;margin-bottom:14px}
.sp-cta p{
  font-size:.96rem;
  color:#c9c5cc;
  max-width:520px;
  margin:0 auto 28px;
  line-height:1.7;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:1100px){
  .sp-offer-grid{grid-template-columns:repeat(2, 1fr)}
  .sp-steps{grid-template-columns:repeat(2, 1fr)}
  .sp-types-grid{grid-template-columns:repeat(2, 1fr)}
}

@media(max-width:900px){
  .sp-intro-grid{grid-template-columns:1fr;gap:36px}
  .sp-intro-img{max-width:600px;margin:0 auto;width:100%}
}

/* =========================================================
   MOBILE — 700px
   ========================================================= */
@media(max-width:700px){
  .sp-hero{padding:52px 0}
  .sp-hero .container{padding:0 20px}
  .sp-hero h1{font-size:1.85rem}
  .sp-hero p{font-size:.86rem}

  .sp-intro,
  .sp-offer,
  .sp-types,
  .sp-process,
  .sp-cta{padding:56px 0}
  .sp-intro .container,
  .sp-offer .container,
  .sp-types .container,
  .sp-process .container,
  .sp-cta .container{padding:0 20px}

  .sp-intro h2,
  .sp-head h2,
  .sp-cta h2{font-size:1.4rem}

  .sp-intro-text p{font-size:.88rem;line-height:1.65}

  .sp-offer-grid{grid-template-columns:1fr;gap:16px}
  .sp-offer-card{padding:24px 20px 22px}

  .sp-types-grid{grid-template-columns:1fr;gap:16px}

  /* ═══ OUR PROCESS — 4 in one line, small font ═══ */
  .sp-steps{
    grid-template-columns:repeat(4, 1fr);
    gap:0;
    border-top:1px solid rgba(255,255,255,.12);
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .sp-step{
    padding:16px 6px 18px;
    border:none;
    border-right:1px solid rgba(255,255,255,.12);
    border-radius:0;
    background:transparent;
    text-align:center;
    transition:none;
  }
  .sp-step:last-child{border-right:none}
  .sp-step:hover{
    transform:none;
    background:transparent;
    border-color:rgba(255,255,255,.12);
  }
  .sp-step-num{
    font-size:1.1rem;
    -webkit-text-stroke:1px var(--orange);
    margin-bottom:6px;
    display:block;
  }
  .sp-step h3{
    font-size:.62rem;
    letter-spacing:.02em;
    margin-bottom:4px;
    line-height:1.2;
  }
  .sp-step p{
    font-size:.5rem;
    line-height:1.35;
    color:#8d8991;
    margin:0;
  }

  .sp-head{margin-bottom:34px}
}

/* =========================================================
   EXTRA SMALL — 400px
   ========================================================= */
@media(max-width:400px){
  .sp-hero h1{font-size:1.55rem}
  .sp-offer-card h3{font-size:.94rem}
  .sp-type-info h3{font-size:.92rem}

  /* process — even smaller */
  .sp-step{padding:14px 4px 16px}
  .sp-step-num{font-size:.95rem;margin-bottom:4px}
  .sp-step h3{font-size:.55rem;margin-bottom:3px}
  .sp-step p{font-size:.44rem;line-height:1.3}
}