/* ============================================================
   JAWS — Just Add Water Solutions
   Brand: JAWS blue on clean neutrals (guided by EzLicence DS
   structure — type scale, spacing, card language — with the
   JAWS palette applied).
   ============================================================ */

:root {
  /* Brand */
  --blue-50:  #eef5fc;
  --blue-100: #d9e9f8;
  --blue-200: #b3d3f0;
  --blue-500: #4a8fd3;
  --blue-600: #3576bb;
  --blue-700: #2a5f99;
  --navy-800: #16283c;
  --navy-900: #0e1c2b;

  /* Neutrals (Untitled-UI-style) */
  --gray-25:  #fcfcfd;
  --gray-50:  #f9fafb;
  --gray-100: #f2f4f7;
  --gray-200: #e4e7ec;
  --gray-300: #d0d5dd;
  --gray-500: #667085;
  --gray-600: #475467;
  --gray-700: #344054;
  --gray-900: #101828;

  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 20px 40px -8px rgba(16, 24, 40, 0.18);

  --font: "Poppins", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Anchor links (nav, "Request a quote", etc.) land with the sticky header clear of the section's
   own heading, instead of the header covering the top of it */
section[id] { scroll-margin-top: 80px; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--gray-600);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

h1, h2, h3 {
  color: var(--gray-900);
  line-height: 1.15;
  margin: 0 0 0.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.75rem, 3vw, 2.4rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1rem; }

a { color: var(--blue-600); }

.container {
  width: min(1180px, calc(100% - 2.5rem));
  margin: 0 auto;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.7rem 1.35rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  font-family: inherit;
}

.btn svg { width: 18px; height: 18px; }

.btn-primary {
  background: var(--blue-600);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--blue-700);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(4px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.16); border-color: #fff; }

.btn-lg { padding: 0.9rem 1.7rem; font-size: 1rem; }

:focus-visible {
  outline: 3px solid var(--blue-200);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gray-100);
  transition: box-shadow 0.2s ease;
}

.header.scrolled { box-shadow: var(--shadow-md); }

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.8rem 0;
}

.brand img {
  height: 46px;
  width: auto;
  mix-blend-mode: multiply; /* hides the JPEG's white box on the white header */
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.nav a:not(.btn) {
  color: var(--gray-700);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: color 0.15s ease;
}
.nav a:not(.btn):hover { color: var(--blue-600); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle span {
  width: 24px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--gray-900);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  color: #fff;
  background: var(--navy-900);
}

/* hero-banner holds ONLY the photo + copy — the stats bar sits outside it (in normal flow) so the
   background image's box never has to stretch to cover the stats too (that mismatch was why the
   mobile crop showed almost nothing recognisable: a landscape photo forced to cover an extra-tall
   box gets cropped down to a thin vertical sliver). */
.hero-banner { position: relative; overflow: hidden; }

/* On wide screens the banner's natural height (just the copy's own height) makes a very short,
   wide "letterbox" box — object-fit:cover then crops most of a photo's height away to fill it,
   so trimming the SOURCE image barely changes what's visible. A taller floor here is what actually
   lets more of the photo (and its surroundings) show. */
@media (min-width: 761px) {
  .hero-banner { min-height: 660px; }
}

.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(10, 22, 34, 0.68) 0%, rgba(10, 22, 34, 0.46) 45%, rgba(10, 22, 34, 0.16) 100%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  padding: clamp(4.5rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem);
}

.hero-copy { max-width: 640px; }

.hero h1 { color: #fff; margin-bottom: 1.1rem; }

.hero-lead {
  font-size: 1.08rem;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 1.9rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blue-600);
  margin: 0 0 1rem;
}

.eyebrow-light { color: var(--blue-200); }

.hero-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  backdrop-filter: blur(8px);
}

.stat {
  background: rgba(14, 28, 43, 0.72);
  padding: 1.3rem 1.5rem;
}

.stat strong {
  display: block;
  font-size: 1.15rem;
  color: #fff;
  letter-spacing: -0.01em;
}

.stat span { font-size: 0.87rem; color: rgba(255, 255, 255, 0.72); }

/* ---------- Sections ---------- */
.section { padding: clamp(4rem, 8vw, 6.5rem) 0; }

.section-alt { background: var(--gray-50); }

.section-heading { max-width: 720px; margin-bottom: 3rem; }

.section-sub { font-size: 1.05rem; color: var(--gray-500); }

/* ---------- Services ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}

.service-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.service-media { aspect-ratio: 4 / 3; overflow: hidden; }

.service-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.service-card:hover .service-media img { transform: scale(1.05); }

.service-body { padding: 1.3rem 1.35rem 1.5rem; }
.service-body p { margin: 0; font-size: 0.93rem; }

/* ---------- Hire options ---------- */
.hire-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
}

.hire-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 2.2rem 2.2rem 2rem;
  box-shadow: var(--shadow-sm);
}

.hire-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--blue-50);
  color: var(--blue-600);
  margin-bottom: 1.2rem;
}

.hire-icon svg { width: 26px; height: 26px; }

.hire-card p { color: var(--gray-500); }

.check-list {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0;
  display: grid;
  gap: 0.65rem;
}

.check-list li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--gray-700);
  font-weight: 500;
  font-size: 0.95rem;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18rem;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blue-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233576bb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

/* ---------- Fleet ---------- */
.fleet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.fleet-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fleet-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.fleet-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }

.fleet-media img { width: 100%; height: 100%; object-fit: cover; }

.badge {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  background: var(--navy-900);
  color: #fff;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  box-shadow: var(--shadow-md);
}

.fleet-body { padding: 1.4rem 1.45rem 1.6rem; }
.fleet-body p { font-size: 0.93rem; }

.spec-list {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--gray-100);
  display: grid;
  gap: 0.45rem;
}

.spec-list li {
  font-size: 0.88rem;
  color: var(--gray-700);
  position: relative;
  padding-left: 1.1rem;
}

.spec-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue-500);
}

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.about-copy .btn { margin-top: 1.6rem; }

.about-media img {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  width: 100%;
}

/* ---------- Industries ---------- */
.industries {
  background:
    linear-gradient(115deg, rgba(14, 28, 43, 0.96) 0%, rgba(22, 40, 60, 0.9) 100%),
    url("assets/img/subdivision-work.jpg") center / cover no-repeat;
  color: #fff;
}

.industries h2 { color: #fff; }

.industries-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.industries-sub { color: rgba(255, 255, 255, 0.75); margin: 0; }

.pill-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.pill-list li {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 0.65rem 1.15rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.93rem;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.pill-list li:hover { background: rgba(74, 143, 211, 0.25); border-color: var(--blue-500); }

/* Light-section variant (Where we work) — same pill shape, readable on a white background */
.pill-list-alt li {
  background: var(--blue-50);
  border-color: var(--blue-100);
  color: var(--blue-700);
  font-weight: 600;
}
.pill-list-alt li:hover { background: var(--blue-100); border-color: var(--blue-500); }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.contact-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: 1.4rem;
}

.contact-list li { display: flex; align-items: flex-start; gap: 1rem; }

.contact-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--blue-50);
  color: var(--blue-600);
}

.contact-icon svg { width: 20px; height: 20px; }

.contact-list strong {
  display: block;
  color: var(--gray-900);
  font-size: 0.9rem;
}

.contact-list a, .contact-list li span:not(.contact-icon) + div span {
  color: var(--gray-600);
  text-decoration: none;
}
.contact-list a:hover { color: var(--blue-600); }

.contact-form {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 1.1rem;
}

.contact-form h3 { margin-bottom: 0.2rem; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

.contact-form label {
  display: grid;
  gap: 0.4rem;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--gray-700);
}

.contact-form input,
.contact-form textarea {
  font: inherit;
  font-size: 0.95rem;
  color: var(--gray-900);
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  background: var(--gray-25);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 4px var(--blue-100);
}

.contact-form textarea { resize: vertical; }

/* Netlify spam honeypot: real visitors never see this field, bots that fill in every
   field on the page do, and Netlify silently discards the submission. */
.hp-field { position: absolute; left: -9999px; }

.form-status { margin: 0; font-size: 0.88rem; text-align: center; min-height: 1.2em; }
.form-status-ok { color: var(--blue-600); font-weight: 600; }
.form-status-error { color: #b91c1c; font-weight: 600; }

/* ---------- Footer ---------- */
.footer {
  background: var(--navy-900);
  color: rgba(255, 255, 255, 0.75);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 2.5rem;
  padding: 3.5rem 0 2.5rem;
}

.footer-logo {
  height: 72px;
  width: auto;
  mix-blend-mode: screen; /* hides the JPEG's black box on the dark footer */
  margin-bottom: 1rem;
}

.footer-brand p { font-size: 0.92rem; max-width: 320px; }

.footer-nav, .footer-contact { display: grid; gap: 0.6rem; align-content: start; }

.footer strong {
  color: #fff;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.4rem;
}

.footer a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 0.95rem;
}
.footer a:hover { color: #fff; }

.footer-contact span { font-size: 0.95rem; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.3rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.85rem;
}

.footer-bottom p { margin: 0; }

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .services-grid { grid-template-columns: 1fr 1fr; }
  .fleet-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .about-grid, .industries-inner, .contact-grid { grid-template-columns: 1fr; }
  .about-media { order: -1; }
}

@media (max-width: 760px) {
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--gray-200);
    box-shadow: var(--shadow-lg);
    padding: 0.5rem 1.25rem 1.25rem;
    display: none;
  }

  .nav.open { display: flex; }

  .nav a:not(.btn) { padding: 0.85rem 0.25rem; border-bottom: 1px solid var(--gray-100); }

  .nav-cta { margin-top: 1rem; justify-content: center; }

  .nav-toggle { display: flex; }

  .services-grid { grid-template-columns: 1fr; }
  .hire-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }

  /* Hero, mobile: a bottom-anchored wash instead of the desktop's left-heavy horizontal one —
     on a narrow screen the copy runs full-width, so a "dark on the left" gradient just darkens
     everything. This keeps a clean strip of the photo visible up top and darkens only where the
     text sits, and extra top padding gives that strip room to be seen. */
  .hero-media::after {
    background: linear-gradient(to top, rgba(10, 22, 34, 0.82) 0%, rgba(10, 22, 34, 0.6) 32%, rgba(10, 22, 34, 0.22) 58%, rgba(10, 22, 34, 0) 78%);
  }
  .hero-inner { padding: 7rem 0 2.25rem; }
  .hero-lead { font-size: 1rem; margin-bottom: 1.5rem; }

  /* Request a quote + phone number stay side by side on mobile (tighter padding/type so both fit) */
  .hero-actions { flex-wrap: nowrap; gap: 0.6rem; }
  .hero-actions .btn { flex: 1 1 0; padding: 0.75rem 0.6rem; font-size: 0.84rem; white-space: nowrap; }
  .hero-actions .btn svg { width: 15px; height: 15px; }

  /* Full-bleed on mobile (drop the .container side gutters) so each of the 3 columns gets more
     room and wraps to fewer lines, reducing the bar's overall height */
  .hero-stats { border-radius: 0; width: 100%; max-width: none; margin: 0; }
  .stat { padding: 0.9rem 0.5rem; }
  .stat strong { font-size: 0.95rem; }
  .stat span { font-size: 0.72rem; }

  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
}