/* ============ Lendi Staffing — shared design system ============ */
:root { --grain:.04; }
* { -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
body { background: #F5EFE6; color: #16302F; font-family: 'Mulish', sans-serif; }
::selection { background: #D98E5A; color: #fff; }

/* ---- atmosphere + grain ---- */
.atmos { position: relative; isolation: isolate; }
.atmos::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(1100px 600px at 12% -10%, rgba(27,86,88,.18), transparent 60%),
    radial-gradient(900px 700px at 105% 8%, rgba(217,142,90,.16), transparent 55%),
    radial-gradient(800px 800px at 50% 120%, rgba(15,61,62,.10), transparent 60%);
}
.grain::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- type helpers ---- */
.display-tight { letter-spacing: -0.03em; line-height: .98; }
.lead { line-height: 1.75; }
.eyebrow { letter-spacing: .28em; }

/* ---- entrance + reveal ---- */
@keyframes rise { from { opacity:0; transform: translateY(22px);} to { opacity:1; transform:none;} }
.rise { opacity:0; animation: rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.d1{animation-delay:.08s}.d2{animation-delay:.18s}.d3{animation-delay:.3s}.d4{animation-delay:.42s}.d5{animation-delay:.54s}.d6{animation-delay:.66s}
.reveal { opacity:0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }

/* ---- image treatment ---- */
.img-treat { position: relative; }
.img-treat::after { content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(10,44,45,.55), transparent 55%); mix-blend-mode: multiply; }

/* ---- links + buttons ---- */
.link-underline { background-image: linear-gradient(currentColor,currentColor); background-size:0% 1.5px; background-position:0 100%; background-repeat:no-repeat; transition: background-size .35s ease; }
.link-underline:hover { background-size:100% 1.5px; }
.btn-clay { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.btn-clay:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -16px rgba(185,110,62,.7); }
.btn-clay:active { transform: translateY(-1px); }
*:focus-visible { outline: 2px solid #D98E5A; outline-offset: 3px; border-radius: 4px; }

/* ---- tabs ---- */
.tab-btn[aria-selected="true"] { background:#0F3D3E; color:#F5EFE6; }
.ribbon { background: repeating-linear-gradient(45deg, rgba(245,239,230,0) 0 18px, rgba(245,239,230,.06) 18px 19px); }

/* ---- hero carousel / sliding banner ---- */
.slider { position: relative; }
.slides { display:flex; transition: transform .9s cubic-bezier(.7,0,.2,1); will-change: transform; }
.slide { min-width:100%; }
.dot { width:9px; height:9px; border-radius:9999px; background: rgba(22,48,47,.22); transition: all .4s ease; cursor:pointer; }
.dot.active { width:34px; background:#D98E5A; }
/* dark dots variant */
.dot-light { background: rgba(245,239,230,.3); }
.dot-light.active { background:#E7B189; }

/* slide-in caption per active slide */
.slide [data-anim] { opacity:0; transform: translateY(24px); }
.slide.is-active [data-anim] { opacity:1; transform:none; transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.slide.is-active [data-anim="1"]{transition-delay:.15s}
.slide.is-active [data-anim="2"]{transition-delay:.3s}
.slide.is-active [data-anim="3"]{transition-delay:.45s}

/* ---- marquee ---- */
.marquee { overflow:hidden; }
.marquee-track { display:inline-flex; white-space:nowrap; animation: scrollx 28s linear infinite; }
@keyframes scrollx { to { transform: translateX(-50%); } }

/* ---- bento ---- */
.bento { display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 205px; gap: 18px; }
.bento > * { transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease; }
.bento > *:hover { transform: translateY(-6px); }
@media (max-width: 860px){ .bento { grid-template-columns: repeat(2,1fr); grid-auto-rows: 170px; } .bento .col-span-2-d{grid-column:auto} }

/* ---- testimonial slider ---- */
.tslide { transition: opacity .6s ease; }

/* ---- count-up stat ---- */
.stat-num { font-variant-numeric: tabular-nums; }

/* ---- mobile nav ---- */
.menu-panel { transition: opacity .4s ease, transform .4s cubic-bezier(.2,.7,.2,1); }
.menu-closed { opacity:0; transform: translateY(-12px); pointer-events:none; }

@media (prefers-reduced-motion: reduce){
  .rise,.reveal,.slides,.marquee-track { animation:none !important; transition:none !important; opacity:1 !important; transform:none !important; }
}