/* ============================================================
   Workforce Integration Network — redesign v2
   Real brand colors + real photography, matched to WIN's
   existing identity: navy / amber / green, Syne + DM Sans.
   ============================================================ */

:root{
  --navy: #0F0F2D;
  --navy-soft: #23234A;
  --cream: #FBF8F3;
  --white: #FFFFFF;
  --amber: #FFB966;
  --amber-deep: #F5934D;
  --green: #193B1E;
  --green-bright: #2F8F46;
  --teal: #3FB6B0;
  --blue: #3E6FA6;
  --gold: #F2B705;
  --line: rgba(15,15,45,0.1);
  --line-light: rgba(255,255,255,0.16);
  --text-soft: #5B5B72;

  --font-display: "Syne", ui-sans-serif, sans-serif;
  --font-body: "DM Sans", -apple-system, sans-serif;

  --container: 1180px;
  --radius: 20px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  background: var(--white);
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--amber); color:var(--navy);
  padding:.75rem 1.25rem; z-index:999;
}
.skip-link:focus{ left:1rem; top:1rem; }

.section-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 2.5rem;
}

/* ---------- decorative confetti dots ---------- */
.dot{ position:absolute; border-radius:50%; display:block; }
.dot-teal{ background: var(--teal); }
.dot-gold{ background: var(--gold); }
.dot-green{ background: var(--green-bright); }
.dot-blue{ background: var(--blue); }
.dot-amber{ background: var(--amber); }

@keyframes floatY{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-14px); } }

/* ---------- eyebrow / headings ---------- */
.pill{
  display:inline-flex; align-items:center; gap:.6rem;
  background: var(--amber);
  color: var(--navy);
  font-weight:700;
  font-size:.9rem;
  padding: .55rem 1.3rem .55rem .6rem;
  border-radius: 100px;
  margin-bottom: 1.6rem;
}
.pill-arrow{
  width: 26px; height:26px; border-radius:50%;
  background: var(--navy); color: var(--amber);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.85rem;
}

.eyebrow{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--amber-deep);
  margin-bottom: 1rem;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.eyebrow::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--amber-deep); display:inline-block;
}

.section-title{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin-bottom: 1.2rem;
}
.section-title-light{ color: var(--white); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family: var(--font-body);
  font-weight:700;
  font-size: .95rem;
  padding: 1rem 1.8rem;
  border-radius: 100px;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), background-color .25s ease, box-shadow .25s ease;
  white-space:nowrap;
}
.btn-amber{ background: var(--amber); color: var(--navy); }
.btn-amber:hover{ background: var(--amber-deep); transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(245,147,77,.6); }
.btn-green{ background: var(--green); color: var(--white); }
.btn-green:hover{ background: #0f2913; transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(15,20,15,.4); }
.btn-small{ padding:.7rem 1.4rem; font-size:.85rem; }

.text-link{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:700; font-size:.95rem; color:var(--amber);
  margin-top: 1.6rem;
  transition: gap .25s ease;
}
.text-link:hover{ gap:.7rem; }

/* ---------- nav ---------- */
.nav{
  position: sticky; top:0; z-index:100;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner{
  max-width: var(--container);
  margin:0 auto;
  padding: .9rem 2.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.logo img{ height: 42px; width:auto; }

.nav-links{ display:flex; align-items:center; gap:2.2rem; }
.nav-links a{
  font-size:.92rem; font-weight:700; color: var(--navy);
  transition: color .2s ease;
}
.nav-links a:hover{ color: var(--amber-deep); }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:.4rem; }
.nav-toggle span{ width:22px; height:2px; background:var(--navy); }
.nav-mobile{
  display:none; flex-direction:column; gap:1rem;
  padding: 0 2.5rem 1.5rem;
}
.nav-mobile a{ font-weight:700; font-size:1rem; padding:.4rem 0; color:var(--navy); }

/* ---------- hero ---------- */
.hero{
  background: var(--cream);
  position:relative;
  overflow:hidden;
  padding-top: 3.5rem;
}
.hero .dot-teal.float-a{ width:16px; height:16px; top:14%; left:6%; animation: floatY 5s ease-in-out infinite; }
.hero .dot-gold.float-b{ width:22px; height:22px; top:64%; left:2%; animation: floatY 6s ease-in-out infinite 1s; }
.hero .dot-green.float-c{ width:14px; height:14px; top:22%; left:46%; animation: floatY 4.5s ease-in-out infinite .5s; }

.hero-inner{
  position:relative;
  max-width: var(--container);
  margin:0 auto;
  padding: 3.5rem 2.5rem 4rem;
  display:grid;
  grid-template-columns: 1fr .95fr;
  gap: 2rem;
  align-items:center;
}
.hero-title{
  font-family: var(--font-display);
  font-weight:800;
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1.06;
  letter-spacing:-0.01em;
  color: var(--navy);
  max-width: 13ch;
}
.hero-title em{ font-style:normal; color: var(--amber-deep); }
.hero-sub{
  margin-top: 1.5rem;
  font-size: 1.08rem;
  max-width: 46ch;
  color: var(--text-soft);
}
.hero-actions{ margin-top: 2.2rem; display:flex; gap:1rem; flex-wrap:wrap; }

.hero-graphic{ position:relative; display:flex; justify-content:center; }
.hero-blob{
  position:absolute;
  width: 420px; height:420px;
  top:5%; left:50%; transform:translateX(-50%);
  background: radial-gradient(circle at 35% 30%, var(--amber) 0%, var(--amber) 55%, transparent 75%);
  border-radius: 46% 54% 60% 40% / 50% 45% 55% 50%;
  opacity:.9;
  z-index:0;
}
.hero-photo{ position:relative; z-index:1; max-width:420px; width:100%; filter: drop-shadow(0 30px 40px rgba(15,15,45,.18)); }

.float-card{
  position:absolute; z-index:2;
  background: var(--white);
  border-radius: 16px;
  padding: .9rem 1.2rem;
  box-shadow: 0 18px 36px -14px rgba(15,15,45,.25);
  display:flex; flex-direction:column; gap:.15rem;
  font-size:.78rem;
  font-weight:600;
  color: var(--text-soft);
  max-width:150px;
}
.float-card-num{ font-family:var(--font-display); font-weight:800; font-size:1.3rem; color:var(--navy); }
.float-card-a{ top:8%; right:0%; }
.float-card-b{ bottom:10%; left:-4%; }

.stats-bar{
  position:relative;
  border-top: 1px solid var(--line);
  max-width: var(--container);
  margin:0 auto;
  padding: 2.2rem 2.5rem 2.6rem;
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:1.5rem;
}
.stat{ display:flex; flex-direction:column; gap:.3rem; }
.stat-number{
  font-family: var(--font-display);
  font-weight:800;
  font-size: 2.4rem;
  color: var(--navy);
}
.stat-label{
  font-size:.86rem;
  color: var(--text-soft);
  max-width:22ch;
}

/* ---------- about ---------- */
.about{
  background: var(--navy);
  padding: 6.5rem 0;
  clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 100%);
  margin-top: -3rem;
}
.about-grid{
  padding-top: 3rem;
  display:grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 4rem;
  align-items:center;
}
.about-photo-wrap{ position:relative; }
.about-photo{
  width:100%; max-width:380px;
  aspect-ratio: 4/5;
  object-fit:cover;
  border-radius: 200px 200px 24px 24px;
  border: 6px solid rgba(255,255,255,.08);
}
.about-dot-a{ width:26px; height:26px; top:-14px; right:12%; }
.about-dot-b{ width:16px; height:16px; bottom:8%; left:-10px; }
.about-copy p{ color: rgba(255,255,255,.72); }
.about-lead{ font-size:1.2rem; font-weight:700; color: var(--white) !important; margin-bottom:1rem; }
.pull-quote{
  font-family: var(--font-display);
  font-weight:700;
  font-size:1.2rem;
  color: var(--amber);
  border-left: 3px solid var(--amber);
  padding-left:1.3rem;
  margin: 1.4rem 0 0;
}

/* ---------- services ---------- */
.services{ background: var(--white); padding: 7rem 0; }
.services-head{ max-width:640px; margin-bottom:3.5rem; }
.services-sub{ color:var(--text-soft); font-size:1.05rem; max-width:52ch; }
.services-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.service-card{
  background: var(--cream);
  border-radius: var(--radius);
  padding: 2.2rem 1.8rem 2rem;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.service-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 22px 36px -18px rgba(15,15,45,.22);
}
.service-icon{
  width:56px; height:56px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.4rem;
}
.service-icon svg{ width:26px; height:26px; }
.icon-teal{ background: rgba(63,182,176,.15); color: var(--teal); }
.icon-blue{ background: rgba(62,111,166,.15); color: var(--blue); }
.icon-amber{ background: rgba(255,185,102,.25); color: var(--amber-deep); }
.icon-green{ background: rgba(47,143,70,.15); color: var(--green-bright); }
.icon-gold{ background: rgba(242,183,5,.18); color: #b8860b; }
.icon-navy{ background: rgba(15,15,45,.1); color: var(--navy); }

.service-card h3{
  font-family: var(--font-display);
  font-weight:700;
  font-size:1.2rem;
  color: var(--navy);
  margin-bottom:.7rem;
  line-height:1.25;
}
.service-card p{ font-size:.95rem; color: var(--text-soft); }

/* ---------- process ---------- */
.process{ background: var(--cream); padding: 7rem 0; }
.process-grid{ display:grid; grid-template-columns: 1.3fr .7fr; gap:4rem; align-items:center; }
.process-steps{ margin-top:2.5rem; display:flex; flex-direction:column; gap: 0; }
.process-step{
  display:grid; grid-template-columns: 64px 1fr; gap:1.5rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--line);
  position:relative;
}
.process-step:last-of-type{ border-bottom: 1px solid var(--line); }
.step-num{
  font-family: var(--font-display);
  font-weight:800;
  font-size:1.05rem;
  width:52px; height:52px; border-radius:50%;
  background: var(--navy);
  color: var(--amber);
  display:flex; align-items:center; justify-content:center;
}
.process-step h3{
  font-family: var(--font-display);
  font-weight:700;
  font-size:1.25rem;
  color: var(--navy);
  margin-bottom:.5rem;
}
.process-step p{ color: var(--text-soft); font-size:.98rem; max-width:44ch; }
.process-cta{
  margin-top: 2.5rem;
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
}
.process-cta p{ font-family:var(--font-display); font-size:1.3rem; font-weight:700; color:var(--navy); }

.process-photo-wrap{ position:relative; display:flex; justify-content:center; }
.process-photo{
  width:100%; max-width:240px;
  border-radius:50%;
  aspect-ratio: 1/1;
  object-fit:cover;
  border: 6px solid var(--white);
  box-shadow: 0 20px 40px -16px rgba(15,15,45,.25);
}
.process-dot-a{ width:20px; height:20px; top:-6px; left:10%; }

/* ---------- faq ---------- */
.faqs{ background: var(--white); padding: 7rem 0; }
.faq-grid{ display:grid; grid-template-columns: .8fr 1.2fr; gap:4rem; align-items:center; }
.faq-photo{ width:100%; max-width:420px; margin:0 auto; }
.faq-list{ display:flex; flex-direction:column; margin-top:1.5rem; }
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:none; border:0; cursor:pointer; text-align:left;
  padding: 1.4rem 0;
  font-family: var(--font-body);
  font-weight:700;
  font-size:1.02rem;
  color: var(--navy);
}
.faq-icon{
  flex-shrink:0;
  width:32px; height:32px;
  border-radius:50%;
  background: var(--cream);
  color: var(--navy);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
  transition: transform .3s ease, background-color .3s ease, color .3s ease;
}
.faq-item.is-open .faq-icon{ transform: rotate(45deg); background:var(--amber); color:var(--navy); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .4s cubic-bezier(.2,.8,.2,1); }
.faq-a p{ padding: 0 0 1.5rem; color: var(--text-soft); font-size:.98rem; max-width:60ch; }
.faq-item.is-open .faq-a{ max-height: 260px; }

/* ---------- testimonials ---------- */
.testimonials{ background: var(--cream); padding:7rem 0; }
.testimonials-head{ max-width:640px; margin-bottom:3.5rem; }
.testimonials-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.4rem; }
.testimonial-card{
  background: var(--white);
  border-radius: var(--radius);
  padding: 2.2rem 1.9rem 2rem;
  display:flex; flex-direction:column; gap:1.1rem;
  box-shadow: 0 12px 28px -20px rgba(15,15,45,.3);
}
.avatar{
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:.85rem;
  color:var(--white);
}
.avatar-teal{ background: var(--teal); }
.avatar-amber{ background: var(--amber-deep); }
.avatar-green{ background: var(--green-bright); }
.quote-mark{ font-family:var(--font-display); font-size:2.2rem; color:var(--amber); line-height:.6; display:block; }
.testimonial-card p{ font-size:1rem; color:var(--text-soft); flex:1; }
.testimonial-card cite{ font-family:var(--font-body); font-style:normal; font-weight:700; font-size:.8rem; color:var(--navy); text-transform:uppercase; letter-spacing:.04em; }

/* ---------- cta band ---------- */
.cta-band{
  position:relative;
  background: var(--green);
  color: var(--white);
  padding: 4.5rem 2.5rem;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:2rem;
  max-width: var(--container);
  margin: 0 auto;
  border-radius: 28px;
  overflow:hidden;
}
.cta-band h2{
  font-family: var(--font-display);
  font-weight:800;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
}
.cta-dot-a{ width:70px; height:70px; top:-24px; right:12%; opacity:.5; }
.cta-dot-b{ width:34px; height:34px; bottom:-10px; right:28%; opacity:.6; }

/* ---------- footer ---------- */
footer{ background: var(--navy); color: var(--white); padding: 5.5rem 0 0; margin-top: 4rem; }
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr .8fr .8fr .8fr;
  gap: 2.5rem;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid var(--line-light);
}
.footer-word{
  font-family: var(--font-display);
  font-weight:800;
  font-size: 1.9rem;
  line-height:1.15;
}
.footer-tag{ margin-top:1rem; color: rgba(255,255,255,.6); font-size:.95rem; }
.footer-label{ font-family:var(--font-body); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--amber); margin-bottom:1rem; }
.footer-col{ display:flex; flex-direction:column; gap:.7rem; font-size:.95rem; }
.footer-col a{ color: rgba(255,255,255,.78); transition: color .2s ease; }
.footer-col a:hover{ color: var(--amber); }
.footer-social{ display:flex; flex-direction:column; gap:.7rem; }
.footer-bottom{
  max-width: var(--container);
  margin:0 auto;
  padding: 1.6rem 2.5rem 2rem;
  font-size:.8rem;
  color: rgba(255,255,255,.4);
}

/* ---------- reveal animation ---------- */
[data-reveal]{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
}
[data-reveal].in-view{ opacity:1; transform:none; }
.services-grid .service-card,
.testimonials-grid .testimonial-card{
  opacity:0; transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
}
.services-grid.in-view .service-card,
.testimonials-grid.in-view .testimonial-card{ opacity:1; transform:none; }
.service-card:nth-child(1),.testimonial-card:nth-child(1){ transition-delay:.05s; }
.service-card:nth-child(2),.testimonial-card:nth-child(2){ transition-delay:.15s; }
.service-card:nth-child(3),.testimonial-card:nth-child(3){ transition-delay:.25s; }
.service-card:nth-child(4){ transition-delay:.35s; }
.service-card:nth-child(5){ transition-delay:.45s; }
.service-card:nth-child(6){ transition-delay:.55s; }

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-graphic{ order:-1; max-width:420px; margin:0 auto; padding-top:2rem; overflow:hidden; }
  .about-grid, .faq-grid, .process-grid{ grid-template-columns:1fr; gap:2.5rem; }
  .process-photo-wrap{ order:-1; }
  .faq-photo-wrap{ order:-1; }
  .services-grid, .testimonials-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; row-gap:2.5rem; }
  .float-card{ display:none; }
}
@media (max-width: 720px){
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-mobile.is-open{ display:flex; }
  .stats-bar{ grid-template-columns:1fr; gap:1.6rem; }
  .services-grid, .testimonials-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .cta-band{ flex-direction:column; align-items:flex-start; border-radius:20px; }
  .section-inner{ padding:0 1.4rem; }
  .about, .services, .process, .faqs, .testimonials{ padding: 4.5rem 0; }
  .about{ clip-path:none; margin-top:0; }
}