/* ===== Design Tokens ===== */
:root{
  --bg:#0b0b0b;
  --panel:#141414;
  --ink:#f2f2f2;
  --muted:#b9b9b9;
  --brand:#d0dd26;
  --accent:#262626;
  --gutter:5%;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Montserrat',sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}
.container{width:min(92%,1200px);margin-inline:auto}

/* ===== Topbar ===== */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  padding:16px 0; display:flex; align-items:center; justify-content:space-between;
  backdrop-filter:saturate(120%) blur(6px);
  background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.28));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand img{height:64px;width:auto}
.nav{display:flex;align-items:center;gap:1.25rem}
.nav-links{list-style:none;display:flex;gap:1.75rem}
.nav-links a{font-weight:600;color:var(--ink)} 
.nav-links a:hover{color:var(--brand)}
.menu-toggle{display:none;background:none;border:0;color:var(--ink);font-size:26px;cursor:pointer}

/* ===== Hero ===== */

/* ===== Hero ===== */
.hero{
  position: relative;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;

  /* gradient + image (two path options so it works locally and when deployed) */
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.55)),
    url('/assets/hero-bg.jpg'),
    url('../assets/hero-bg.jpg');

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* space so the fixed topbar doesn’t overlap */
  padding-top: 84px;
}



/* --- HERO: centering & responsive sizing --- */
.hero-content{
  /* remove the manual 50% centering */
  left: auto;
  transform: none;

  /* clean, consistent spacing across sizes */
  padding: clamp(5rem, 9vw, 9rem) 1.25rem 3rem;
  max-width: 1000px;
  margin: 0 auto;               /* centers the block */
  text-align: center;
  align-items: center;
}

/* Better wrapping for long words on small screens */
.hero-title{
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 4.2rem);
  line-height: 1.12;
  margin: 0 auto .85rem;
  text-wrap: balance;            /* nicer multi-line headings (supported browsers) */
  overflow-wrap: anywhere;       /* prevents edge clipping */
  word-break: normal;
}

/* Ensure green stays green even if something else overrides color */
.hero-title .highlight{
  color: var(--brand) !important;
}

.hero-tagline {
  color: var(--muted);
  font-size: 1.125rem;
  margin-bottom: 2.5rem; /* increased from 1.5rem */
  max-width: 640px;
  margin-inline: auto;
}


/* Slightly tighter on very small screens */
@media (max-width: 480px){
  .hero-content{ padding-top: 1rem; }
  .hero-title{ font-size: clamp(2.9rem, 8vw, 3.2rem); }
}

@media (max-width: 640px) {
  .hero-tagline {
    margin-bottom: 1rem;
  }
}


.btn{ display:inline-block; background:var(--brand); color:#0b0b0b; padding:.9rem 2rem; border-radius:30px; font-weight:800; font-size:1rem; transition:transform .2s, background .2s } .btn:hover{transform:translateY(-2px); background:#d7ff7e}

.btn:hover{transform:translateY(-2px); background:#d7ff7e}

/* ===== Section headers ===== */
.section-header{text-align:center;margin-bottom:2rem}
.eyebrow{color:var(--muted);text-transform:uppercase;letter-spacing:.15em;font-size:.78rem;font-weight:600;margin-bottom:.35rem}
.section-title{color:var(--brand);font-weight:800;font-size:clamp(1.8rem,1.2rem + 1.6vw,2.6rem)}

/* ===== About ===== */
.about-section{padding:6.5rem 0}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start;margin-top:1.25rem}
.about-photo{position:sticky;top:96px;align-self:start}
.about-photo img{
  width:100%;object-fit:contain;
  box-shadow:0 18px 44px rgba(0,0,0,.45),0 0 0 1px rgba(208,221,38,.12) inset;
  background:radial-gradient(120% 120% at 22% 12%, rgba(208,221,38,.10) 0%, transparent 55%);
}
.about-copy p{color:var(--muted);margin-bottom:1rem}
.about-closer{color:var(--ink);font-weight:700;margin-top:.5rem}
.pill-list{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0}
.pill-list li{
  list-style:none;background:var(--panel);border:1px solid var(--accent);
  color:var(--ink);padding:.5rem .85rem;border-radius:999px;font-size:.9rem;
  transition:border-color .2s, transform .2s
}
.pill-list li:hover{border-color:var(--brand);transform:translateY(-2px)}

/* ===== Expertise ===== */
.expertise-section{padding:6rem 0}
.expertise-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.75rem;margin-top:1.25rem}
.expertise-card{
  background:var(--panel); border:1px solid #1f1f1f; border-radius:12px; padding:1.75rem; text-align:center;
  transition:transform .25s, box-shadow .25s
}
.expertise-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.35)}
.expertise-card i{font-size:2.1rem;color:var(--brand);margin-bottom:.8rem}
.expertise-card h3{color:var(--brand);font-size:1.15rem;margin-bottom:.45rem;font-weight:800}
.expertise-card p{color:var(--muted);font-size:.95rem}

/* ===== Portfolio ===== */
.portfolio-section{padding:6rem 0}
.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.75rem;margin-top:1.25rem}
.portfolio-card{background:var(--panel);border:1px solid #1f1f1f;border-radius:12px;padding:1.75rem}
.portfolio-title{color:var(--brand);font-size:1.15rem;font-weight:800;margin-bottom:.45rem}
.portfolio-text{color:var(--muted);font-size:.98rem}

/* ===== Values ===== */
.values-section{padding:6rem 0}
.values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.75rem;margin-top:1.25rem}
.value{background:var(--panel);border:1px solid #1f1f1f;border-radius:12px;padding:1.75rem;text-align:center}
.value i{font-size:2rem;color:var(--brand);margin-bottom:.75rem}
.value h4{color:var(--brand);font-size:1.1rem;margin-bottom:.4rem;font-weight:800}
.value p{color:var(--muted);font-size:.95rem}

/* ===== Testimonials ===== */
.testimonials-section{padding:6rem 0}
.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.75rem;margin-top:1.25rem}
.testimonial{background:var(--panel);border-radius:12px;padding:1.75rem;border:1px solid #1f1f1f;color:var(--muted);font-style:italic}
.testimonial footer{margin-top:.8rem;font-size:.88rem;color:var(--brand);font-style:normal}

/* ===== CTA ===== */
.cta-section{padding:6rem 0;text-align:center;background:var(--panel);border-top:1px solid #1c1c1c}
.cta-section h2{color:var(--brand);font-size:clamp(1.8rem,2.1vw,2.4rem);margin-bottom:.75rem}
.cta-section p{color:var(--muted);max-width:640px;margin:.25rem auto 1.25rem}

/* ===== Footer ===== */
.contact-block{background:#0d0d0d;padding:3.5rem 0;color:var(--muted);text-align:center}
.contact-flex{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:2.5rem;margin-bottom:1.5rem}
.contact-logos{display:flex;gap:1.5rem;align-items:center;justify-content:center}
.contact-logos img{height:60px;width:auto}
.vertical-divider{width:1px;background:#6f8c0a}
.contact-col{max-width:360px;text-align:left}
.contact-col h5{color:var(--brand);font-size:1rem;font-weight:700;margin-bottom:.6rem;letter-spacing:.03em}
.contact-col p{font-size:.95rem;line-height:1.6}
.contact-col a{color:var(--ink);font-weight:600}
.copyright{text-align:center;font-size:.85rem;color:#a9a9a9;margin-top:1.25rem}

/* ===== Responsive ===== */
@media (max-width:980px){
  .about-grid{grid-template-columns:1fr}
  .about-photo{position:relative;top:0;max-width:560px;margin-inline:auto}
}
@media (max-width:860px){
  /* mobile menu panel */
  .nav-links{
    position:fixed; top:72px; right:var(--gutter); width:240px;
    background:#121212; border:1px solid #222; border-radius:12px; padding:1rem;
    display:flex; flex-direction:column; gap:.8rem;
    opacity:0; visibility:hidden; transform:translateX(16px); pointer-events:none;
    transition:opacity .22s, transform .22s, visibility 0s linear .22s;
  }
  .nav-links.show{opacity:1;visibility:visible;transform:translateX(0);pointer-events:auto;transition:opacity .22s, transform .22s}
  .nav-links li{text-align:right}
  .menu-toggle{display:inline-block}
}

@media (max-width: 640px) {
  .vertical-divider {
    display: none;
  }
}