/* ════════════════════════════════════════════════════════
   JET CONSTRUCTION — STYLESHEET
   Brand: Navy #0B1F3A  +  Orange #F37021
   Headings: Oswald   Body: Inter
   ════════════════════════════════════════════════════════ */

:root{
  --navy:      #0B1F3A;
  --navy-900:  #081627;
  --charcoal:  #2B2B2B;
  --orange:    #F37021;
  --orange-dk: #d65f15;
  --gray-bg:   #f4f6f9;
  --text:      #2B2B2B;   /* brand charcoal for body copy */
  --muted:     #6b7280;
  --border:    #e5e7eb;
  --white:     #ffffff;

  --font-head: 'Oswald', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --container: 1180px;
  --radius:    10px;
  --shadow:    0 10px 30px rgba(11,31,58,.10);
  --shadow-lg: 0 20px 50px rgba(11,31,58,.18);
  --header-h:  108px;
}

/* ── Reset / base ─────────────────────────────────────── */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  color:var(--text);
  line-height:1.6;
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-head); font-weight:600; line-height:1.1; color:var(--navy); }

.container{ width:90%; max-width:var(--container); margin-inline:auto; }

/* Offsets in-page anchors so the sticky header doesn't cover them */
section[id]{ scroll-margin-top:var(--header-h); }

/* ── Buttons ──────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-head); font-weight:500; font-size:.95rem;
  letter-spacing:.6px; text-transform:uppercase;
  padding:14px 30px; border-radius:6px; border:2px solid transparent;
  cursor:pointer; transition:transform .15s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn--orange{ background:var(--orange); color:var(--white); border-color:var(--orange); }
.btn--orange:hover{ background:var(--orange-dk); border-color:var(--orange-dk); transform:translateY(-2px); box-shadow:0 8px 20px rgba(243,112,33,.35); }
.btn--outline{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.55); }
.btn--outline:hover{ background:var(--white); color:var(--navy); border-color:var(--white); transform:translateY(-2px); }
.btn--block{ width:100%; }

/* ── Header / Nav ─────────────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--navy);
  box-shadow:0 2px 12px rgba(0,0,0,.18);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:var(--header-h); transition:height .25s ease; }
.nav-logo{ display:block; }
.nav-logo svg{ height:85px; width:auto; transition:height .25s ease; }   /* ~190px wide */

/* Compact header once the user scrolls — full-size logo at the top,
   less screen real estate while reading */
.site-header.scrolled .nav{ height:72px; }
.site-header.scrolled .nav-logo svg{ height:56px; }
@media (max-width:760px){
  .site-header.scrolled .nav-links{ top:72px; height:calc(100vh - 72px); }
}

.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-link{
  display:inline-block; font-family:var(--font-head); font-weight:500;
  text-transform:uppercase; letter-spacing:.8px; font-size:.92rem;
  color:rgba(255,255,255,.82); background:none; border:none; cursor:pointer;
  padding:10px 16px; border-radius:5px; transition:color .2s ease, background .2s ease;
}
.nav-link:hover{ color:#fff; }
.nav-link.active{ color:#fff; }
.nav-link.active::after{
  content:""; display:block; height:3px; width:22px; background:var(--orange);
  border-radius:2px; margin:5px auto 0;
}
.nav-quote{
  background:var(--orange); color:#fff !important; margin-left:10px;
  padding:11px 22px;
}
.nav-quote:hover{ background:var(--orange-dk); }
.nav-quote::after{ display:none !important; }

/* Hamburger */
.hamburger{
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:6px;
}
.hamburger span{ width:26px; height:3px; background:#fff; border-radius:2px; transition:.25s; }
.hamburger.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ── Hero ─────────────────────────────────────────────── */
.hero{
  position:relative;
  background:var(--navy);           /* base color while photos load */
  color:#fff;
  padding:108px 0 99px;   /* hero trimmed ~10% to offset taller header */
  overflow:hidden;
}
/* Rotating photo slides — crossfade between images in heroImages (script.js) */
.hero-slides{ position:absolute; inset:0; }
.hero-slide{
  position:absolute; inset:0;
  background-position:center 45%; background-size:cover; background-repeat:no-repeat;
  opacity:0; transition:opacity 1.5s ease-in-out;
}
.hero-slide.active{ opacity:1; }
/* Constant navy wash above the photos so the headline always stays readable */
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(8,22,39,.94) 0%, rgba(11,31,58,.82) 45%, rgba(11,31,58,.55) 100%);
}
.hero::after{ /* subtle blueprint grid texture */
  content:""; position:absolute; inset:0; opacity:.035; pointer-events:none;
  background-image:linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg,#fff 1px, transparent 1px);
  background-size:46px 46px;
}
.hero-inner{ position:relative; z-index:1; max-width:820px; }
.hero-eyebrow{
  font-family:var(--font-head); text-transform:uppercase; letter-spacing:3px;
  color:var(--orange); font-weight:500; font-size:.95rem; margin-bottom:18px;
}
.hero-title{ color:#fff; font-size:clamp(2.6rem, 6vw, 4.6rem); font-weight:700; }
.hero-title span{ color:var(--orange); }
.hero-sub{ font-size:clamp(1.05rem,2.2vw,1.3rem); color:rgba(255,255,255,.85); margin:24px 0 38px; max-width:640px; }
.hero-btns{ display:flex; gap:16px; flex-wrap:wrap; }

/* ── Section scaffolding ──────────────────────────────── */
.section{ padding:88px 0; }
.section--gray{ background:var(--gray-bg); }
.section-header{ text-align:center; max-width:680px; margin:0 auto 56px; }
.section-header h2{ font-size:clamp(1.9rem,4vw,2.7rem); }
.eyebrow{
  font-family:var(--font-head); text-transform:uppercase; letter-spacing:2.5px;
  color:var(--orange); font-weight:500; font-size:.9rem; margin-bottom:12px;
}
.section-lead{ color:var(--muted); margin-top:14px; font-size:1.05rem; }
.divider{ width:64px; height:4px; background:var(--orange); border-radius:2px; margin:22px auto 0; }

/* ── About ────────────────────────────────────────────── */
.about-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:center; }
.about-copy h2{ font-size:clamp(1.8rem,3.6vw,2.5rem); margin:6px 0 18px; }
.about-copy p{ color:var(--muted); margin-bottom:16px; font-size:1.04rem; }
.trust-list{ display:grid; grid-template-columns:1fr 1fr; gap:26px 28px; }
.trust-list li{ display:flex; gap:14px; }
.trust-icon{
  flex:0 0 46px; height:46px; border-radius:10px;
  background:rgba(243,112,33,.12); display:grid; place-items:center;
}
.trust-icon svg{ width:24px; height:24px; fill:none; stroke:var(--orange); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.trust-list strong{ display:block; font-family:var(--font-head); font-weight:600; color:var(--navy); font-size:1.08rem; margin-bottom:2px; }
.trust-list p{ color:var(--muted); font-size:.92rem; line-height:1.5; }

/* ── Services ─────────────────────────────────────────── */
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.service-card{
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius);
  padding:38px 30px; display:flex; flex-direction:column; text-align:left;
  box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.service-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }
.service-icon{
  width:64px; height:64px; border-radius:14px; margin-bottom:22px;
  background:var(--navy); display:grid; place-items:center;
}
.service-icon svg{ width:32px; height:32px; fill:none; stroke:var(--orange); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.service-card h3{ font-size:1.4rem; margin-bottom:12px; }
.service-card p{ color:var(--muted); margin-bottom:26px; flex-grow:1; }

/* ── Projects ─────────────────────────────────────────── */
.projects-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
}
.project-card{
  background:var(--white); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease;
  display:flex; flex-direction:column;
}
.project-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.project-media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.project-media img{
  width:100%; height:100%; object-fit:cover;       /* crops nicely + responsive */
  transition:transform .4s ease;
}
.project-card:hover .project-media img{ transform:scale(1.06); }
.project-badge{
  position:absolute; top:14px; left:14px;
  background:var(--orange); color:#fff;
  font-family:var(--font-head); text-transform:uppercase; letter-spacing:1px;
  font-size:.72rem; font-weight:500; padding:5px 12px; border-radius:20px;
}
.project-body{ padding:22px 22px 26px; }
.project-body h3{ font-size:1.22rem; margin-bottom:8px; }
.project-body p{ color:var(--muted); font-size:.95rem; }

/* Gallery cards are clickable + show a photo-count tag */
.project-card.is-gallery{ cursor:pointer; }
.project-card.is-gallery:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; }
.project-count{
  position:absolute; top:14px; right:14px;
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(8,16,28,.78); color:#fff;
  font-family:var(--font-head); font-size:.72rem; letter-spacing:.5px;
  padding:5px 10px; border-radius:20px;
}
.project-count::before{ content:"\2317"; font-size:.9rem; }   /* viewfinder glyph */

/* ════════════════════════════════════════════════════════
   PROJECT LIGHTBOX
   ════════════════════════════════════════════════════════ */
.lightbox{
  position:fixed; inset:0; z-index:1100;
  background:rgba(6,12,22,.9);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lb-img{
  max-width:min(1000px,92vw); max-height:86vh; width:auto; height:auto;
  border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.5);
  object-fit:contain; background:#0b0f16;
}
.lb-btn{
  position:absolute; border:none; cursor:pointer; color:#fff;
  background:rgba(255,255,255,.12); transition:background .2s ease;
  display:grid; place-items:center;
}
.lb-btn:hover{ background:var(--orange); }
.lb-close{ top:20px; right:22px; width:46px; height:46px; border-radius:50%; font-size:2rem; line-height:1; }
.lb-prev, .lb-next{ top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; font-size:2.4rem; line-height:1; }
.lb-prev{ left:24px; }
.lb-next{ right:24px; }
.lb-counter{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  color:#fff; font-family:var(--font-head); letter-spacing:1px;
  background:rgba(8,16,28,.7); padding:6px 14px; border-radius:20px; font-size:.85rem;
}
@media (max-width:520px){
  .lb-prev, .lb-next{ width:44px; height:44px; font-size:2rem; }
  .lb-prev{ left:10px; } .lb-next{ right:10px; }
  .lb-close{ top:12px; right:12px; }
}

/* ── CTA banner ───────────────────────────────────────── */
.cta-banner{ background:var(--navy); color:#fff; padding:60px 0; }
.cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.cta-banner h2{ color:#fff; font-size:clamp(1.6rem,3vw,2.2rem); }
.cta-banner p{ color:rgba(255,255,255,.8); margin-top:6px; }

/* ── Footer ───────────────────────────────────────────── */
.site-footer{ background:var(--navy-900); color:rgba(255,255,255,.7); padding:64px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1.4fr; gap:44px; }
.footer-brand svg{ height:94px; width:auto; margin-bottom:18px; }
.footer-brand p{ max-width:340px; font-size:.95rem; }
.footer-col h4{ color:#fff; font-size:1rem; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:18px; }
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a, .footer-link-btn{
  color:rgba(255,255,255,.7); font-size:.95rem; background:none; border:none;
  cursor:pointer; padding:0; font-family:var(--font-body); text-align:left; transition:color .2s ease;
}
.footer-col a:hover, .footer-link-btn:hover{ color:var(--orange); }
.footer-contact li{ display:flex; flex-direction:column; gap:2px; }
.footer-contact span:first-child{ font-size:.74rem; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,.45); }
.footer-bottom{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.12); margin-top:48px; padding-top:24px;
  font-size:.85rem; color:rgba(255,255,255,.5);
}

/* ════════════════════════════════════════════════════════
   MODAL  (Get a Quote)
   ════════════════════════════════════════════════════════ */
.modal-overlay{
  position:fixed; inset:0; z-index:1000;
  background:rgba(8,16,28,.72); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
}
.modal-overlay.open{ opacity:1; visibility:visible; }
.modal{
  position:relative; background:var(--white); border-radius:14px;
  width:100%; max-width:480px; max-height:90vh; overflow-y:auto;
  padding:40px 38px 34px; box-shadow:var(--shadow-lg);
  transform:translateY(16px) scale(.98); transition:transform .25s ease;
  border-top:6px solid var(--orange);
}
.modal-overlay.open .modal{ transform:translateY(0) scale(1); }
.modal-close{
  position:absolute; top:14px; right:16px;
  width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  background:var(--gray-bg); color:var(--navy); font-size:1.6rem; line-height:1;
  display:grid; place-items:center; transition:background .2s ease, color .2s ease;
}
.modal-close:hover{ background:var(--orange); color:#fff; }
.modal-eyebrow{ font-family:var(--font-head); text-transform:uppercase; letter-spacing:2px; color:var(--orange); font-weight:500; font-size:.82rem; }
.modal-title{ font-size:2rem; margin:4px 0 10px; }
.modal-desc{ color:var(--muted); margin-bottom:26px; font-size:1rem; }
.modal-contact{ display:flex; flex-direction:column; gap:16px; margin-bottom:28px; }
.modal-contact li{ display:flex; align-items:center; gap:14px; }
.mc-icon{ flex:0 0 44px; height:44px; border-radius:10px; background:rgba(11,31,58,.06); display:grid; place-items:center; }
.mc-icon svg{ width:22px; height:22px; fill:none; stroke:var(--navy); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.mc-label{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:1px; color:var(--muted); }
.modal-contact strong, .modal-contact a{ font-size:1.05rem; color:var(--navy); font-weight:600; }
.modal-contact a:hover{ color:var(--orange); }

/* ════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .about-grid{ grid-template-columns:1fr; gap:40px; }
  .services-grid{ grid-template-columns:1fr 1fr; }
  .projects-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:36px; }
}

@media (max-width:760px){
  /* Mobile nav */
  .hamburger{ display:flex; }
  .nav-links{
    position:fixed; top:var(--header-h); right:0;
    width:min(78vw,320px); height:calc(100vh - var(--header-h));
    background:var(--navy-900); flex-direction:column; align-items:stretch;
    gap:4px; padding:22px; transform:translateX(105%);
    transition:transform .3s ease; box-shadow:-10px 0 40px rgba(0,0,0,.4);
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-link{ width:100%; padding:14px 16px; font-size:1rem; }
  .nav-link.active::after{ margin:5px 0 0; }
  .nav-quote{ margin:8px 0 0; text-align:center; }

  .hero{ padding:81px 0 72px; }
  .section{ padding:64px 0; }
  .services-grid{ grid-template-columns:1fr; }
  .projects-grid{ grid-template-columns:1fr; }
  .cta-inner{ flex-direction:column; text-align:center; }
}

@media (max-width:520px){
  .footer-grid{ grid-template-columns:1fr; }
  .modal{ padding:34px 24px 28px; }
  .modal-title{ font-size:1.7rem; }
  .btn{ padding:13px 24px; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}