/* ---------- Base / tokens (kept minimal & safe) ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html,body{min-height:100%}
img,svg,video,canvas{display:block;max-width:100%}
input,button,textarea,select{font:inherit}

:root{
  --primary-orange:#FF7A1A;
  --primary-orange-dark:#A34700;
  --dark-graphite:#2B2F33;
  --neutral-light:#F5F7FA;
  --neutral-mid:#E5E7EB;

  --space-16:1rem;  --space-24:1.5rem; --space-32:2rem; --space-48:3rem; --space-80:5rem;

  --anim-dur:.6s;
  --anim-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Layout helpers ---------- */
.container{ width:min(1200px,100% - calc(var(--space-32)*2)); margin-inline:auto; }
.section{ padding-block: var(--space-80); }
.link{ color:var(--dark-graphite); text-decoration:none }
.link:hover{ color:var(--primary-orange) }

/* ---------- Buttons ---------- */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  height:2.75rem; padding-inline:1.25rem; border-radius:999px;
  color:#fff; background:linear-gradient(90deg,var(--primary-orange),var(--primary-orange-dark));
  box-shadow:0 8px 20px rgba(0,0,0,.08); transition:box-shadow .2s ease, transform .08s ease;
}
.btn-primary:hover{ box-shadow:0 12px 28px rgba(0,0,0,.12) }
.btn-primary:active{ transform:translateY(1px) }

.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--neutral-mid); color:var(--dark-graphite); border-radius:999px;
  transition:background .2s ease; box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.btn-secondary:hover{ background:#d2d6db }

/* ---------- Cards ---------- */
.card{ background:#fff; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.06); transition:transform .2s ease, box-shadow .2s ease }
.card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.12) }
.badge{
  height:64px; width:64px; margin-bottom:1.25rem; display:flex; align-items:center; justify-content:center;
  color:#fff; border-radius:999px; background:linear-gradient(90deg,var(--primary-orange),var(--primary-orange-dark))
}
.icon{ height:32px; width:32px }
.card-title{ font-weight:800; font-size:1.125rem }
.card-desc{ margin-top:.25rem; color:#5b6470; font-size:.95rem }
.card-link{ display:inline-block; margin-top:1rem; font-weight:700; color:var(--primary-orange); text-decoration:none }
.card-link:hover{ color:#0EA5E9 }

/* ---------- Footer ---------- */
.site-footer{ background:#fff; border-top:1px solid var(--neutral-mid) }
.footer-row{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-24);
  padding-block: var(--space-48); flex-wrap:wrap;
}
.c-footer-brand img{ height:40px; width:auto }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity var(--anim-dur) var(--anim-ease), transform var(--anim-dur) var(--anim-ease) }
.reveal.is-visible{ opacity:1; transform:none }
.reveal.zoom-in{ transform:scale(.98) }

/* ---------- HERO slider ---------- */
.hero-slider{
  position:relative; overflow:hidden; border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.12);
  aspect-ratio:16/10; background:#0f172a0d;
}
.hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity .8s ease }
.hero-slide.is-active{ opacity:1 }
.hero-slide img{ width:100%; height:100%; object-fit:cover }
.hero-prev,.hero-next{
  position:absolute; top:50%; transform:translateY(-50%); height:40px; width:40px; border-radius:50%;
  display:grid; place-items:center; color:#fff; background:rgba(0,0,0,.4); border:0; cursor:pointer; transition:background .2s ease
}
.hero-prev:hover,.hero-next:hover{ background:rgba(0,0,0,.6) }
.hero-prev{ left:12px } .hero-next{ right:12px }
.hero-dots{ position:absolute; left:0; right:0; bottom:12px; display:flex; gap:8px; align-items:center; justify-content:center }
.hero-dots .dot{ width:10px; height:10px; border-radius:999px; background:rgba(255,255,255,.6); border:0; cursor:pointer }
.hero-dots .dot.active{ background:#fff }

/* ===== Showcasing Our Work — single-row marquee ===== */
.work-marquee { overflow: hidden; position: relative; padding-block: 24px; }
.work-marquee__track { display: flex; gap: 32px; flex-wrap: nowrap; will-change: transform; animation: workScroll 36s linear infinite; }
.work-card { flex: 0 0 auto; width: 520px; max-width: 90vw; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.10); }
.work-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes workScroll { from { transform: translateX(0);} to { transform: translateX(-50%);} }
@media (prefers-reduced-motion: reduce) { .work-marquee__track { animation: none; } }

/* ---------- Stats ---------- */
.stat{ border:1px solid rgba(255,255,255,.2); padding:2rem; border-radius:16px; background:rgba(255,255,255,.08) }
.stat-num{
  font-size:3.75rem; font-weight:900;
  background:linear-gradient(90deg,var(--primary-orange),#facc15); -webkit-background-clip:text; background-clip:text; color:transparent
}
.stat-label{ margin-top:.5rem; font-size:1.125rem; font-weight:600; color:#e5e7eb }

/* ---------- Header & brand sizing ---------- */
#site-header .c-brand img{ height:48px; width:auto; object-fit:contain }
@media (min-width:1024px){ #site-header .c-brand img{ height:56px } }

/* === CIEPL — Safety & Quality section (scoped) === */
#quality-safety .qs-title{
  text-align:center;
  margin-bottom: var(--space-16);
}
#quality-safety .qs-lead{
  text-align:center;
  max-width: 72ch;
  margin: 0 auto var(--space-40);
  color: color-mix(in srgb, var(--dark-graphite) 75%, white);
}
#quality-safety .qs-grid{
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--space-32);
  margin-bottom: var(--space-32);
}
@media (max-width: 900px){
  #quality-safety .qs-grid{ grid-template-columns: 1fr; }
}
#quality-safety .qs-card{ padding: var(--space-24) var(--space-24); }
#quality-safety .qs-card__head{
  display:flex; align-items:center; gap: var(--space-16);
  margin-bottom: var(--space-16);
}
#quality-safety .qs-icon{
  height: 40px; width: 40px; border-radius: 999px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, var(--primary-orange), var(--primary-orange-dark));
  color:#fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.07);
}
#quality-safety .qs-icon svg{ display:block; }
#quality-safety .qs-list{ display:grid; gap: var(--space-12); padding-left: 0; list-style: none; }
#quality-safety .qs-bullet{
  display:inline-block; width: .55rem; height: .55rem; border-radius: 50%;
  margin-right: .6rem; background: var(--primary-orange);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-orange) 20%, transparent);
}

/* --- Certifications/Badges consistency (kept subtle) --- */
#quality-safety .qs-badges{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:center; margin-top: var(--space-24); }
#quality-safety .qs-chip{
  --chip-bg: #EEF3F7; --chip-fg: #2B2F33;
  display:inline-flex; align-items:center; justify-content:center;
  min-height: 38px; padding: 0 16px; border-radius: 999px;
  background: var(--chip-bg); color: var(--chip-fg);
  font-weight: 600; letter-spacing: .01em; border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 14px rgba(0,0,0,.06); white-space: nowrap; line-height: 1;
}
#quality-safety .qs-chip:hover{ background:#E6EDF5; }
#quality-safety .qs-chip--primary{ background:linear-gradient(90deg,var(--primary-orange),var(--primary-orange-dark))!important; color:#fff!important; border:0!important; }

/* (Optional) Fallback text color if color-mix is unsupported */
@supports not (color: color-mix(in srgb, black 50%, white)) {
  #quality-safety .qs-lead { color: #4a4f55; }
}
/* ===== Safety & Quality — consistency tweaks ===== */
#quality-safety .qs-title{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--dark-graphite);
  /* match other big section titles */
  font-size: clamp(2rem, 1.2rem + 2vw, 3rem);
  line-height: 1.15;
  margin: 0 0 var(--space-24);
}

#quality-safety .qs-lead{
  text-align:center;
  max-width: 72ch;
  margin: 0 auto var(--space-32);
  color: color-mix(in srgb, var(--dark-graphite) 75%, white);
}

/* unified chip look (one highlighted + neutrals) */
#quality-safety .qs-badges{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top: var(--space-24);
}
#quality-safety .qs-chip{
  --chip-bg:#EEF3F7; --chip-fg:#2B2F33;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:38px; padding:0 16px; border-radius:999px;
  background:var(--chip-bg); color:var(--chip-fg);
  font-weight:600; letter-spacing:.01em; line-height:1;
  border:1px solid rgba(0,0,0,.06); box-shadow:0 6px 14px rgba(0,0,0,.06);
  white-space:nowrap;
}
#quality-safety .qs-chip:hover{ background:#E6EDF5; }
#quality-safety .qs-chip--primary{
  background:linear-gradient(90deg, var(--primary-orange), var(--primary-orange-dark));
  color:#fff; border:0; box-shadow:0 10px 18px rgba(0,0,0,.08);
}