/* ==========================================================================
   Avans QA — Redesign design system (2026)
   Brand: navy #1B3A5B + steel gray + road-safety amber #F5A524
   Fonts: Sora (headings) / Inter (body)
   ========================================================================== */

:root {
  --brand-primary: #1B3A5B;
  --brand-primary-600: #16324f;
  --brand-dark: #0E2333;
  --brand-light: #F4F7FA;
  --brand-accent: #F5A524;
  --brand-accent-dark: #D68A10;
  --brand-gray: #5B6770;
  --ring: rgba(27, 58, 91, .12);
}

/* Prevent flash-of-unstyled while Tailwind CDN boots */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #223; background: #fff;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, .font-heading { font-family: 'Sora', 'Inter', sans-serif; letter-spacing: -0.02em; }

/* ---- Layout helper ---- */
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 768px){ .wrap { padding-inline: 2rem; } }

/* ---- Buttons ---- */
.btn { display:inline-flex; align-items:center; gap:.55rem; font-weight:600; font-family:'Sora',sans-serif;
  padding:.85rem 1.6rem; border-radius:.7rem; transition:.25s ease; cursor:pointer; border:2px solid transparent;
  font-size:.95rem; line-height:1; white-space:nowrap; }
.btn svg{ width:1.05em; height:1.05em; }
.btn-primary { background:var(--brand-accent); color:#1a1300; box-shadow:0 8px 24px -8px rgba(245,165,36,.6); }
.btn-primary:hover { background:var(--brand-accent-dark); transform:translateY(-2px); }
.btn-dark { background:var(--brand-primary); color:#fff; }
.btn-dark:hover { background:var(--brand-primary-600); transform:translateY(-2px); }
.btn-ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.btn-ghost:hover { background:rgba(255,255,255,.1); border-color:#fff; }
.btn-outline { background:transparent; color:var(--brand-primary); border-color:var(--ring); }
.btn-outline:hover { border-color:var(--brand-primary); background:var(--brand-light); }

/* ---- Section eyebrow / road-lane motif ---- */
.eyebrow { display:inline-flex; align-items:center; gap:.6rem; font-family:'Sora',sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; color:var(--brand-accent-dark); }
.eyebrow::before { content:""; width:34px; height:3px; border-radius:3px;
  background:repeating-linear-gradient(90deg,var(--brand-accent) 0 8px,transparent 8px 14px); }
.eyebrow.on-dark { color:var(--brand-accent); }

/* dashed "road" divider */
.lane { height:4px; width:100%; border-radius:4px;
  background:repeating-linear-gradient(90deg,#fff 0 24px,transparent 24px 44px); opacity:.5; }

/* ---- Header ---- */
.site-header { position:sticky; top:0; z-index:50; transition:.3s ease; }
.site-header .bar { background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(27,58,91,.08); transition:.3s ease; }
.site-header.scrolled .bar { box-shadow:0 10px 30px -18px rgba(14,35,51,.5); }
.topbar { background:var(--brand-dark); color:#cdd9e5; font-size:.82rem; }
.topbar a{ color:#e8eef4; } .topbar a:hover{ color:var(--brand-accent); }
.nav-link { position:relative; font-family:'Sora',sans-serif; font-weight:500; color:#1f3245; font-size:.94rem;
  padding:.35rem 0; transition:.2s; }
.nav-link:hover, .nav-link.active { color:var(--brand-primary); }
.nav-link::after { content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0; background:var(--brand-accent); transition:.25s; }
.nav-link:hover::after, .nav-link.active::after { width:100%; }

/* mobile drawer */
.drawer { position:fixed; inset:0 0 0 auto; width:min(84vw,360px); background:var(--brand-dark); color:#fff;
  transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1); z-index:70; padding:1.5rem;
  display:flex; flex-direction:column; gap:.25rem; overflow-y:auto; }
.drawer.open { transform:translateX(0); }
.drawer a.m-link { padding:.9rem .25rem; border-bottom:1px solid rgba(255,255,255,.08); font-family:'Sora',sans-serif;
  font-weight:500; font-size:1.05rem; color:#e8eef4; }
.drawer a.m-link:hover { color:var(--brand-accent); }
.scrim { position:fixed; inset:0; background:rgba(6,15,24,.55); opacity:0; visibility:hidden; transition:.3s; z-index:60; }
.scrim.open { opacity:1; visibility:visible; }

/* ---- Hero ---- */
.hero { position:relative; background:var(--brand-dark); color:#fff; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(14,35,51,.94) 0%, rgba(14,35,51,.72) 45%, rgba(14,35,51,.35) 100%); z-index:2; }
.hero-media { position:absolute; inset:0; z-index:1; background-size:cover; background-position:center;
  transform:scale(1.05); animation:heroZoom 18s ease-in-out infinite alternate; }
@keyframes heroZoom { to { transform:scale(1.14); } }

/* Rotating hero background slides (crossfade) */
.hero-slide { position:absolute; inset:0; z-index:1; background-size:cover; background-position:center;
  opacity:0; transform:scale(1.06); transition:opacity 1.6s ease;
  animation:heroZoom 22s ease-in-out infinite alternate; }
.hero-slide.active { opacity:1; }
.hero-slide-dots { position:absolute; z-index:4; left:50%; transform:translateX(-50%); bottom:1.5rem;
  display:flex; gap:.5rem; }
.hero-slide-dots button { width:28px; height:4px; border-radius:3px; background:rgba(255,255,255,.35);
  border:none; padding:0; cursor:pointer; transition:.3s; }
.hero-slide-dots button.active { background:var(--brand-accent); width:40px; }
.hero-copy-text { transition:opacity .35s ease, transform .35s ease; }
.hero-copy-text.swapping { opacity:0; transform:translateY(8px); }
.hero-grid { position:absolute; inset:0; z-index:2; opacity:.15;
  background-image:linear-gradient(rgba(255,255,255,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.4) 1px,transparent 1px);
  background-size:64px 64px; mask-image:linear-gradient(#000,transparent 75%); }

/* ---- Cards ---- */
.card { background:#fff; border:1px solid rgba(27,58,91,.08); border-radius:1.1rem; transition:.3s ease; overflow:hidden; }
.card:hover { transform:translateY(-6px); box-shadow:0 30px 50px -30px rgba(14,35,51,.45); border-color:rgba(245,165,36,.5); }

.svc-icon { width:56px; height:56px; border-radius:.9rem; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--brand-primary),#28527d); color:var(--brand-accent); flex:none; }
.svc-card:hover .svc-icon { background:linear-gradient(135deg,var(--brand-accent),var(--brand-accent-dark)); color:#fff; }

/* ---- Stat counters ---- */
.stat-num { font-family:'Sora',sans-serif; font-weight:800; line-height:1; }

/* ---- Projects gallery ---- */
.gal-item { position:relative; border-radius:1rem; overflow:hidden; aspect-ratio:1/1; background:#0e2333; cursor:pointer; }
.gal-item img { width:100%; height:100%; object-fit:cover; transition:.5s ease; }
.gal-item:hover img { transform:scale(1.08); }
.gal-item .cap { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.1rem; background:linear-gradient(to top,rgba(14,35,51,.9),transparent 60%);
  opacity:0; transition:.35s; }
.gal-item:hover .cap { opacity:1; }
.gal-item.hide { display:none; }
.filter-btn { font-family:'Sora',sans-serif; font-weight:500; font-size:.88rem; padding:.5rem 1.1rem; border-radius:2rem;
  border:1px solid rgba(27,58,91,.15); color:var(--brand-gray); transition:.2s; background:#fff; cursor:pointer; }
.filter-btn:hover { border-color:var(--brand-primary); color:var(--brand-primary); }
.filter-btn.active { background:var(--brand-primary); color:#fff; border-color:var(--brand-primary); }

/* lightbox */
.lb { position:fixed; inset:0; z-index:90; background:rgba(6,15,24,.9); display:none; align-items:center; justify-content:center; padding:1.5rem; }
.lb.open { display:flex; }
.lb img { max-width:92vw; max-height:88vh; border-radius:.6rem; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lb-close { position:absolute; top:1.2rem; right:1.4rem; color:#fff; font-size:2rem; cursor:pointer; line-height:1; }

/* ---- Marquee (trust bar) ---- */
.marquee { overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track { display:flex; gap:1.25rem; width:max-content; animation:marquee 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state:paused; }
@keyframes marquee { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } .marquee{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; } }

/* Logo-plate: text-based "logo" card used in trust bars */
.logo-plate { flex:none; display:flex; align-items:center; justify-content:center; gap:.6rem;
  height:74px; padding:0 1.6rem; border-radius:.85rem; background:#fff; white-space:nowrap;
  box-shadow:0 10px 26px -14px rgba(6,15,24,.5); border:1px solid rgba(255,255,255,.06); transition:.25s ease; }
.logo-plate:hover { transform:translateY(-3px); box-shadow:0 16px 34px -14px rgba(245,165,36,.35); }
.logo-plate .lp-badge { width:30px; height:30px; border-radius:.5rem; flex:none; display:grid; place-items:center;
  background:var(--brand-light); color:var(--brand-primary); font-family:'Sora',sans-serif; font-weight:800; font-size:.8rem; }
.logo-plate .lp-name { font-family:'Sora',sans-serif; font-weight:700; font-size:.92rem; color:var(--brand-dark); letter-spacing:-0.01em; }

/* Static (non-scrolling) client grid variant, used on About page */
.logo-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
@media (min-width:640px){ .logo-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px){ .logo-grid{ grid-template-columns:repeat(4,1fr); } }
.logo-grid .logo-plate { width:100%; height:auto; min-height:88px; padding:1rem .9rem; box-shadow:0 6px 18px -12px rgba(27,58,91,.25); border:1px solid rgba(27,58,91,.08); }
.logo-grid .logo-plate:hover { box-shadow:0 14px 28px -14px rgba(245,165,36,.3); border-color:rgba(245,165,36,.4); }
.logo-grid .logo-plate .lp-name { white-space:normal; text-align:center; font-size:.82rem; line-height:1.25; }
.logo-grid .logo-plate { flex-direction:column; text-align:center; }
.logo-grid .logo-plate .lp-badge { margin-bottom:.15rem; }

/* ---- Reveal on scroll ---- */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.4s}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none} .hero-media,.hero-slide{animation:none} .hero-copy-text{transition:none} }

/* ---- Process / steps ---- */
.step-line::before { content:""; position:absolute; top:34px; left:34px; bottom:0; width:2px;
  background:repeating-linear-gradient(var(--brand-accent) 0 8px,transparent 8px 16px); }
.step-num { width:68px; height:68px; border-radius:1rem; display:grid; place-items:center; flex:none;
  font-family:'Sora',sans-serif; font-weight:700; font-size:1.4rem; background:var(--brand-light); color:var(--brand-primary);
  border:2px solid rgba(27,58,91,.1); }

/* ---- Footer ---- */
.site-footer { background:var(--brand-dark); color:#aebccb; }
.site-footer a{ transition:.2s; } .site-footer a:hover{ color:var(--brand-accent); }
.foot-social { width:40px; height:40px; border-radius:.6rem; display:grid; place-items:center; background:rgba(255,255,255,.06); color:#cdd9e5; }
.foot-social:hover { background:var(--brand-accent); color:#1a1300 !important; }

/* ---- WhatsApp float ---- */
.wa-float { position:fixed; width:58px; height:58px; bottom:26px; right:26px; background:#25d366; color:#fff;
  border-radius:50%; display:grid; place-items:center; font-size:30px; box-shadow:0 12px 30px -8px rgba(37,211,102,.6);
  z-index:55; transition:.3s; }
.wa-float:hover { transform:scale(1.08); background:#1eb85a; color:#fff; }

/* ---- To-top ---- */
.to-top { position:fixed; right:26px; bottom:96px; width:46px; height:46px; border-radius:.7rem; background:var(--brand-primary);
  color:#fff; display:grid; place-items:center; z-index:55; opacity:0; visibility:hidden; transition:.3s; cursor:pointer; }
.to-top.show { opacity:1; visibility:visible; }

/* ---- Breadcrumb hero (inner pages) ---- */
.page-hero { position:relative; background:var(--brand-dark); color:#fff; overflow:hidden; }
.page-hero::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(14,35,51,.92),rgba(14,35,51,.6)); z-index:1; }
.page-hero .media { position:absolute; inset:0; background-size:cover; background-position:center; opacity:.5; }

/* ---- Forms ---- */
/* color is explicit (not inherited) because .field is sometimes placed inside dark sections
   (e.g. the hero lead-capture card) — without this, text/options render invisible white-on-white */
.field { width:100%; padding:.85rem 1rem; border:1px solid rgba(27,58,91,.18); border-radius:.7rem; background:#fff;
  color:#1f2937; font-family:'Inter',sans-serif; font-size:.95rem; transition:.2s; }
.field option { color:#1f2937; background:#fff; }
.field::placeholder { color:#94a3b8; }
.field:focus { outline:none; border-color:var(--brand-accent); box-shadow:0 0 0 4px rgba(245,165,36,.15); }

/* ---- Article prose ---- */
.prose-avans { color:#3a4653; font-size:1.05rem; line-height:1.8; }
.prose-avans h2 { font-family:'Sora',sans-serif; font-size:1.7rem; font-weight:700; color:var(--brand-primary);
  margin:2.4rem 0 1rem; padding-left:1rem; border-left:5px solid var(--brand-accent); }
.prose-avans h3 { font-family:'Sora',sans-serif; font-size:1.3rem; font-weight:700; color:var(--brand-dark); margin:1.8rem 0 .8rem; }
.prose-avans p { margin-bottom:1.4rem; }
.prose-avans a { color:var(--brand-primary); text-decoration:underline; text-underline-offset:3px; }
.prose-avans ul { margin:0 0 1.5rem; padding:0; list-style:none; }
.prose-avans ul li { position:relative; padding-left:1.75rem; margin-bottom:.6rem; }
.prose-avans ul li::before { content:"✓"; position:absolute; left:0; color:var(--brand-accent-dark); font-weight:700; }
.prose-avans ol { margin:0 0 1.5rem 1.2rem; }
.prose-avans ol li { margin-bottom:.6rem; }
.prose-avans img { border-radius:.8rem; margin:1.5rem 0; }
.prose-avans blockquote, .prose-avans .warning-box { border-left:4px solid var(--brand-accent); background:var(--brand-light);
  padding:1rem 1.25rem; border-radius:.5rem; margin:1.5rem 0; }
.prose-avans strong { color:var(--brand-dark); }

/* ---- FAQ accordion ---- */
.acc { border:1px solid rgba(27,58,91,.1); border-radius:.8rem; overflow:hidden; background:#fff; }
.acc + .acc { margin-top:.75rem; }
.acc-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; cursor:pointer;
  padding:1.1rem 1.3rem; font-family:'Sora',sans-serif; font-weight:600; color:var(--brand-dark); }
.acc-head .chev { transition:.3s; flex:none; color:var(--brand-accent-dark); }
.acc.open .acc-head .chev { transform:rotate(180deg); }
.acc-body { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.acc.open .acc-body { max-height:320px; }
.acc-body p { padding:0 1.3rem 1.2rem; color:var(--brand-gray); line-height:1.7; }

/* ---- Form status ---- */
.form-status { font-size:.9rem; margin-top:.25rem; min-height:1.2em; }
.form-status.ok { color:#137a3b; } .form-status.err { color:#c0392b; }

/* ==========================================================================
   Conversion & polish layer
   ========================================================================== */

/* Pulsing glow on key CTAs */
@keyframes ctaPulse {
  0%,100% { box-shadow:0 8px 24px -8px rgba(245,165,36,.55); }
  50%     { box-shadow:0 10px 38px -4px rgba(245,165,36,.9); }
}
.btn-pulse { animation:ctaPulse 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .btn-pulse{ animation:none; } }

/* Amber glow orb (decorative) */
.glow-orb { position:absolute; width:460px; height:460px; border-radius:50%; pointer-events:none; z-index:2;
  background:radial-gradient(circle, rgba(245,165,36,.25), transparent 65%); filter:blur(24px); }

/* Glassy lead-capture card */
.glass-card { background:rgba(255,255,255,.97); backdrop-filter:blur(8px); border-radius:1.25rem;
  box-shadow:0 45px 90px -35px rgba(6,15,24,.75), 0 0 0 1px rgba(255,255,255,.4); }

/* Assurance ticks */
.assure { display:inline-flex; align-items:center; gap:.5rem; font-size:.86rem; font-weight:500; }
.assure i { color:#22b573; flex:none; }
.assure.on-dark { color:#d8e2ec; }
.assure.on-light { color:#3d4b58; }

/* Animated amber top-edge on cards */
.card::before { content:""; position:absolute; top:0; left:0; right:100%; height:3px; z-index:1;
  background:linear-gradient(90deg,var(--brand-accent),var(--brand-accent-dark)); transition:right .4s ease; }
.card { position:relative; }
.card:hover::before { right:0; }

/* Thin hazard stripe (road-works flavour) */
.hazard { height:7px; background:repeating-linear-gradient(-45deg, var(--brand-accent) 0 16px, var(--brand-dark) 16px 32px); }

/* Big quote icon on testimonials */
.tq { position:absolute; top:1.2rem; right:1.4rem; font-size:3.2rem; line-height:1; color:rgba(245,165,36,.18);
  font-family:Georgia,serif; pointer-events:none; }

/* Sticky mobile action bar (call / WhatsApp / quote) */
.cta-bar { position:fixed; left:0; right:0; bottom:0; z-index:58; display:grid; grid-template-columns:1fr 1fr 1.35fr;
  background:var(--brand-dark); border-top:1px solid rgba(255,255,255,.1); box-shadow:0 -10px 30px rgba(6,15,24,.35); }
.cta-bar a { display:flex; align-items:center; justify-content:center; gap:.5rem; padding:.95rem .4rem;
  font-family:'Sora',sans-serif; font-weight:600; font-size:.88rem; color:#fff; line-height:1; }
.cta-bar a i { font-size:1.05rem; }
.cta-bar .wa { background:#1eb85a; }
.cta-bar .quote { background:var(--brand-accent); color:#1a1300; }
@media (min-width:1024px){ .cta-bar { display:none; } }
@media (max-width:1023.98px){
  .wa-float { display:none; }
  .to-top { bottom:78px; right:18px; }
  body { padding-bottom:52px; }
}