/* ==========================================================================
   WDS Inc — shared stylesheet
   Structural pass: layout, type scale, components.
   Visual polish + animated-text treatment come in the next layout pass.
   ========================================================================== */

:root{
  --red:#c8102e;
  --red-dark:#9c0c23;
  --black:#101010;
  --ink:#1a1a1a;
  --gray-700:#4a4a4a;
  --gray-400:#8a8a8a;
  --gray-100:#f2f1ee;
  --white:#ffffff;
  --font-head:'Oswald', sans-serif;
  --font-body:'Inter', sans-serif;
  --container:1180px;
  --gap:2rem;
  --radius:6px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);color:var(--ink);background:var(--white);line-height:1.6;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
.container{max-width:var(--container);margin:0 auto;padding:0 1.5rem;}

h1,h2,h3,h4{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.03em;line-height:1.15;margin-bottom:.5rem;}
h1{font-size:clamp(2.2rem,5vw,3.6rem);}
h2{font-size:clamp(1.6rem,3.5vw,2.4rem);}
h3{font-size:1.15rem;}
.eyebrow{color:var(--red);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.8rem;margin-bottom:.5rem;display:block;}
.lede{color:var(--gray-700);max-width:60ch;}

.btn{display:inline-block;padding:.85rem 1.8rem;border-radius:var(--radius);font-weight:700;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.04em;font-size:.9rem;border:2px solid transparent;transition:transform .15s ease,opacity .15s ease;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--red);color:var(--white);}
.btn-outline{background:transparent;color:var(--white);border-color:var(--white);}
.btn-outline-dark{background:transparent;color:var(--ink);border-color:var(--ink);}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:var(--white);border-bottom:1px solid #eee;}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:84px;}
.logo{display:flex;align-items:center;gap:.6rem;font-family:var(--font-head);font-weight:700;}
.logo img{height:44px;width:auto;}
.nav{display:flex;align-items:center;gap:2.2rem;}
.nav a{font-family:var(--font-head);text-transform:uppercase;font-size:.85rem;letter-spacing:.05em;font-weight:600;}
.nav a.current,.nav a:hover{color:var(--red);}
.header-cta{display:flex;align-items:center;gap:1.2rem;}
.header-phone{font-weight:700;color:var(--red);}
.nav-toggle{display:none;background:none;border:none;font-size:1.6rem;cursor:pointer;}

@media (max-width:900px){
  .nav{position:fixed;inset:84px 0 0 0;background:var(--white);flex-direction:column;align-items:flex-start;padding:2rem 1.5rem;gap:1.5rem;transform:translateX(100%);transition:transform .25s ease;}
  .nav.open{transform:translateX(0);}
  .nav-toggle{display:block;}
  .header-phone{display:none;}
  /* Tighter to the text — was wrapping to two lines with too much
     padding around it on narrow screens. Same font-size, just less
     breathing room in the box. */
  .header-cta .btn{white-space:nowrap;padding:.5rem .9rem;}
}

/* ---------- hero ---------- */
.hero{position:relative;color:var(--white);background:var(--black);min-height:78vh;display:flex;align-items:center;overflow:hidden;}
.hero-media{position:absolute;inset:0;z-index:0;}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;opacity:.55;}
.hero-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,16,16,.55),rgba(16,16,16,.85));}
.hero-content{position:relative;z-index:1;max-width:720px;}
.hero-content p.lede{color:rgba(255,255,255,.8);margin:1.2rem 0 2rem;font-size:1.1rem;}
.hero-cta-row{display:flex;gap:1rem;flex-wrap:wrap;}
/* data-animate: hook point for the animated-text pass (word/line reveal).
   Deliberately no display rule here — it broke normal block stacking of
   short eyebrow+heading pairs. A future reveal script should apply
   inline-block to the individual word/char spans it generates inside
   these elements, not to the elements themselves. */

/* ---------- sitewide scroll-reveal ---------- */
/* Headings (eyebrow + h1/h2, tagged automatically by js/main.js)
   dissolve in sliding down from above. The body paragraph right after
   a heading fades in .5s later (transition-delay, not JS timing) so it
   reads as following the heading rather than arriving with it. */
.reveal-heading{opacity:0;transform:translateY(-22px);transition:opacity .6s ease,transform .6s ease;}
.reveal-heading.is-visible{opacity:1;transform:translateY(0);}
.reveal-body{opacity:0;transition:opacity .6s ease;transition-delay:.5s;}
.reveal-body.is-visible{opacity:1;}

/* Respect users who've asked for less motion. */
@media (prefers-reduced-motion: reduce){
  .reveal-heading,.reveal-body,.reveal-up,.badge-row .badge,.steps .step{
    transition-duration:.01ms !important;transform:none !important;
  }
}

/* Linear pill/bubble lists (badge-row) dissolve in left-to-right, one
   at a time, slower than the default reveal for a more deliberate feel. */
.badge-row .badge{opacity:0;transform:translateX(-18px);transition:opacity .8s ease,transform .8s ease;}
.badge-row.is-visible .badge{opacity:1;transform:translateX(0);}
.badge-row.is-visible .badge:nth-child(1){transition-delay:0s;}
.badge-row.is-visible .badge:nth-child(2){transition-delay:.18s;}
.badge-row.is-visible .badge:nth-child(3){transition-delay:.36s;}
.badge-row.is-visible .badge:nth-child(4){transition-delay:.54s;}
.badge-row.is-visible .badge:nth-child(5){transition-delay:.72s;}
.badge-row.is-visible .badge:nth-child(6){transition-delay:.9s;}
.badge-row.is-visible .badge:nth-child(7){transition-delay:1.08s;}
.badge-row.is-visible .badge:nth-child(8){transition-delay:1.26s;}
/* Bubble hover — scoped to .is-visible so it doesn't fight the
   entrance transform mid-animation. */
.badge-row.is-visible .badge:hover{transform:scale(1.08);transition:transform .2s ease;}

/* Generic "dissolve up from below" utility (About page history photo). */
.reveal-up{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;}
.reveal-up.is-visible{opacity:1;transform:translateY(0);}

.page-hero{position:relative;overflow:hidden;background:var(--black);color:var(--white);padding:5rem 0 4rem;}
.page-hero p.lede{color:rgba(255,255,255,.75);}
.page-hero .container{position:relative;z-index:1;}
/* Optional background photo for page-hero sections (Services, Careers).
   Same dark-overlay treatment as the home hero so text stays readable. */
.page-hero-media{position:absolute;inset:0;z-index:0;}
.page-hero-media img{width:100%;height:100%;object-fit:cover;opacity:.55;}
.page-hero-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,16,16,.35),rgba(16,16,16,.75));}

/* ---------- trust bar ---------- */
.trust-bar{background:var(--gray-100);padding:1.6rem 0;}
.trust-bar .container{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;}
.trust-item{display:flex;align-items:baseline;gap:.5rem;font-family:var(--font-head);}
.trust-item strong{color:var(--red);font-size:1.6rem;}
.trust-item span{color:var(--gray-700);font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;}

/* ---------- generic sections ---------- */
section{padding:5rem 0;}
.section-head{max-width:680px;margin-bottom:3rem;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
/* .lede has its own max-width (60ch), narrower than most centered
   parents. text-align:center only centers inline text, not this
   block's own box, so without this it sits flush-left, visibly off-
   center under a wider heading. Centers the box itself wherever it's
   inside any .center-class ancestor. */
.center .lede{margin-left:auto;margin-right:auto;}
.bg-dark{background:var(--black);color:var(--white);}
.bg-dark .lede{color:rgba(255,255,255,.75);}
.bg-light{background:var(--gray-100);}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:center;}
@media (max-width:800px){.two-col{grid-template-columns:1fr;}}
.media-frame{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:#ddd;}
.media-frame img{width:100%;height:100%;object-fit:cover;}
.media-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#e2e0da;color:var(--gray-700);font-size:.85rem;text-align:center;padding:1rem;}

/* ---------- service grid ---------- */
/* Fixed 5 columns so all 5 service cards sit in a single row on desktop
   instead of wrapping into a lopsided 4+1. Reflows to fewer columns as
   the viewport narrows so cards don't get squeezed unreadably thin. */
.card-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.5rem;}
@media (max-width:1100px){.card-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:700px){.card-grid{grid-template-columns:1fr;}}
.service-card{background:var(--white);border:1px solid #eee;border-radius:var(--radius);padding:2rem 1.6rem;transition:box-shadow .2s ease,transform .2s ease;}
.service-card:hover{box-shadow:0 10px 30px rgba(0,0,0,.08);transform:translateY(-4px);}
.service-card .icon{width:44px;height:44px;border-radius:50%;background:var(--red);margin-bottom:1rem;}
.service-card h3{margin-bottom:.6rem;}
.service-card p{color:var(--gray-700);font-size:.92rem;}

.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
@media (max-width:800px){.pillars{grid-template-columns:1fr;}}
.pillar h3{color:var(--red);margin-bottom:.6rem;}
.pillar p{color:var(--gray-700);font-size:.92rem;}

/* ---------- process steps ---------- */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
@media (max-width:800px){.steps{grid-template-columns:1fr;}}
.step{position:relative;padding-left:5.5rem;min-height:4.5rem;display:flex;flex-direction:column;justify-content:center;}
.step::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:50%;transform:translateY(-50%);width:4.5rem;height:4.5rem;border-radius:50%;background:var(--red);color:var(--white);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:1.75rem;}

/* Staggered entrance: .steps carries data-animate (one observed target),
   CSS handles the per-item stagger via nth-child so each numbered step
   animates in, in order. */
.steps .step{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease;}
.steps.is-visible .step{opacity:1;transform:translateY(0);}
.steps.is-visible .step:nth-child(1){transition-delay:0s;}
.steps.is-visible .step:nth-child(2){transition-delay:.15s;}
.steps.is-visible .step:nth-child(3){transition-delay:.3s;}

/* ---------- team ---------- */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;}
.team-card .media-frame{aspect-ratio:1/1;margin-bottom:1rem;}
.team-card .media-frame img{transition:transform .35s ease;}
.team-card .media-frame:hover img{transform:scale(1.08);}
.team-card h3{font-size:1rem;}
.team-card span{color:var(--red);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;}

/* ---------- badges (reputation) ---------- */
.badge-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.5rem;}
.badge{border:1px solid #ddd;border-radius:20px;padding:.5rem 1rem;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--gray-700);}
/* Dark-gray text on a light border reads fine on white, but was
   nearly illegible on .bg-dark sections (Safety & Vetting, Our
   Projects) — same fix pattern as .bg-dark .lede. */
.bg-dark .badge{color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.3);}

/* ---------- careers / job board ---------- */
.job-list{display:flex;flex-direction:column;gap:1rem;}
.job-card{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;border:1px solid #eee;border-radius:var(--radius);padding:1.4rem 1.6rem;transition:box-shadow .2s ease,transform .2s ease;}
.job-card-link{display:block;color:inherit;}
.job-card-link:hover .job-card{box-shadow:0 10px 30px rgba(0,0,0,.08);transform:translateY(-2px);border-color:#ddd;}
.job-card h3{font-size:1.05rem;text-transform:none;letter-spacing:0;}
.job-meta{color:var(--gray-700);font-size:.85rem;margin-top:.3rem;}
.job-card .btn{padding:.6rem 1.3rem;font-size:.8rem;}
.empty-state{border:2px dashed #ddd;border-radius:var(--radius);padding:3rem 1.5rem;text-align:center;color:var(--gray-700);}
.empty-state strong{display:block;color:var(--ink);margin-bottom:.4rem;font-family:var(--font-head);text-transform:uppercase;}

/* ---------- job detail page ---------- */
.job-detail-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;}
.job-detail h2{font-size:1.3rem;margin:2rem 0 .9rem;}
.job-detail h2:first-child{margin-top:0;}
.job-detail p{color:var(--gray-700);margin-bottom:1rem;line-height:1.7;}
.job-detail ul{margin:0 0 1.5rem 0;}
.job-detail li{padding-left:1.3rem;position:relative;margin-bottom:.55rem;color:var(--gray-700);font-size:.95rem;line-height:1.5;}
.job-detail li::before{content:'\203A';position:absolute;left:0;top:0;color:var(--red);font-weight:700;}
.job-detail-cta{display:flex;justify-content:center;padding:2.5rem 0 0;}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--gap);}
@media (max-width:800px){.contact-grid{grid-template-columns:1fr;}}
.contact-form{display:flex;flex-direction:column;gap:1rem;}
.contact-form input,.contact-form textarea,.contact-form select{width:100%;border:1px solid #ddd;border-radius:var(--radius);padding:.85rem 1rem;font-family:inherit;font-size:.95rem;}
.contact-form label{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--gray-700);margin-bottom:.3rem;display:block;}
.contact-info-list{display:flex;flex-direction:column;gap:1.2rem;}
.contact-info-item{display:flex;gap:.9rem;align-items:flex-start;}
.contact-info-item .dot{width:34px;height:34px;border-radius:50%;background:var(--red);flex-shrink:0;}
.map-frame{margin-top:2rem;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;background:#e2e0da;}

/* ---------- CTA band ---------- */
/* Red as an accent color, not a full-section background — white bg,
   red heading, red-outlined button. */
/* Light gray, not white — the section above (Committed to Customer
   Satisfaction) is already white, and two white sections back to back
   read as one big awkward gap with nothing to mark the seam. */
.cta-band{background:var(--gray-100);color:var(--ink);text-align:center;}
.cta-band h2{color:var(--red);margin-bottom:1rem;}
.cta-band .lede{color:var(--gray-700);margin:0 auto 2rem;}
.cta-band .btn-outline{color:var(--red);border-color:var(--red);}

/* ---------- footer ---------- */
.site-footer{background:var(--black);color:rgba(255,255,255,.8);padding:4rem 0 2rem;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem;}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr;}}
.footer-grid h4{color:var(--white);font-size:.9rem;margin-bottom:1rem;}
.footer-grid ul li{margin-bottom:.6rem;font-size:.9rem;}
.footer-grid ul li a:hover{color:var(--red);}
.footer-logo{height:38px;margin-bottom:1rem;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:1.5rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.8rem;color:rgba(255,255,255,.5);}
.back-to-top{width:40px;height:40px;border-radius:50%;background:var(--red);color:var(--white);display:flex;align-items:center;justify-content:center;}