:root{--page-title-display:none;}/* Start custom CSS *//* ================================
   TARGA NZ – HOMEPAGE CSS
   Mobile-first, minimal, theme-friendly
   ================================ */

/* Base */
:root{
  --brand:#e41e26;
  --ink:#0b0b0b;
  --muted:#6b6b6b;
  --border:#e9e9e9;
  --bg:#ffffff;
  --radius:14px;
  --shadow:0 8px 28px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
}
*{box-sizing:border-box}
img{max-width:100%;height:auto;display:block}

/* Generic containers + typography */
.container{max-width:1200px;margin:0 auto;padding:0 1rem}
h1,h2,h3{color:var(--ink);line-height:1.15;margin:.2rem 0 .6rem}
h1{font-size:clamp(1.8rem,3.8vw,2.6rem);font-weight:800}
h2{font-size:clamp(1.4rem,2.8vw,2rem);font-weight:800}
h3{font-size:clamp(1.05rem,2vw,1.2rem);font-weight:800}
p{color:var(--ink);opacity:.95;margin:.6rem 0}
.muted{color:var(--muted)}

/* Buttons */
.btn-primary,.btn-secondary{
  display:inline-block;text-decoration:none;font-weight:800;
  padding:.9rem 1.15rem;border-radius:12px;transition:.15s ease;
}
.btn-primary{background:var(--brand);color:#fff;border:1px solid var(--brand);box-shadow:0 8px 24px rgba(228,30,38,.25)}
.btn-primary:hover{opacity:.95;transform:translateY(-1px)}
.btn-secondary{background:#fff;color:var(--ink);border:2px solid var(--ink)}
.btn-secondary:hover{background:#f6f6f6}

/* ============ HERO ============ */
.hero{position:relative;background:#000;color:#fff;overflow:hidden}
.hero-slider{position:relative;height:min(70vh,640px);isolation:isolate}
.hero-slider img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  animation:slideShow 24s infinite; /* simple crossfade of 3 images */
}
.hero-slider img:nth-child(1){animation-delay:0s}
.hero-slider img:nth-child(2){animation-delay:8s}
.hero-slider img:nth-child(3){animation-delay:16s}
@keyframes slideShow{
  0%,6%{opacity:0}
  8%,30%{opacity:1}
  35%,100%{opacity:0}
}
.hero::after{ /* readable text overlay */
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.55));
}
.hero-content{
  position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end
}
.hero-content>div,.hero .hero-content{width:100%}
.hero .hero-content{padding:1.4rem}
.hero .hero-content h1{color:#fff;margin-bottom:.4rem}
.hero .hero-content p{color:#fff;opacity:.95;max-width:720px}
.hero-buttons{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.6rem}

/* ============ ABOUT ============ */
.about-targa{background:#fff;padding:2.2rem 0}
.about-targa .container p{max-width:900px}

/* ============ WHY JOIN ============ */
.why-join{background:#fafafa;padding:2.2rem 0}
.grid-three{display:grid;gap:1rem}
.card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow)
}
.card img{aspect-ratio:16/9;object-fit:cover}
.card h3{padding:0 1rem;margin:.9rem 0 .2rem}
.card p{padding:0 1rem 1rem;color:#222}
.cta-center{text-align:center;margin-top:1rem}

/* ============ VIDEO ============ */
.video-highlight{background:#fff;padding:1.4rem 0}
.video-container{border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.video-container iframe{display:block;aspect-ratio:16/9;width:100%;height:auto}

/* ============ EXPERIENCE ============ */
.experience{background:#fff;padding:2.2rem 0}
.grid-two{display:grid;gap:1rem}
.exp-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow)
}
.exp-card img{aspect-ratio:16/9;object-fit:cover}
.exp-card h3{padding:0 1rem;margin:.9rem 0 .2rem}
.exp-card p{padding:0 1rem 1.1rem}

/* ============ FINAL CTA ============ */
.cta-final{background:#111;color:#fff;text-align:center;padding:2.4rem 0}
.cta-final h2,.cta-final p{color:#fff}
.cta-final p{max-width:760px;margin:0 auto 1rem}

/* ============ RESPONSIVE UPGRADES ============ */
@media (min-width: 700px){
  .hero .hero-content{padding:2rem}
  .grid-two{grid-template-columns:repeat(2,1fr)}
}
@media (min-width: 980px){
  .grid-three{grid-template-columns:repeat(3,1fr)}
  .hero .hero-content{padding:2.4rem}
  .hero-buttons .btn-primary{padding:1rem 1.25rem}
}

/* Helpful utilities if you need them */
.hidden{display:none !important}
.center{text-align:center}/* End custom CSS */