/*
 * Eleven30 Collective Website Stylesheet
 *
 * This stylesheet defines the global layout, responsive
 * navigation, section styling and typographic rules for the
 * Eleven30 Collective website. It was handcrafted to evoke a
 * premium, modern aesthetic suited for a boutique marketing
 * agency. The palette uses deep charcoal backgrounds with
 * vibrant green accents inspired by Eleven30’s original logo.
 */

/* Import web fonts from Google. Using multiple weights of
   Poppins for copy and Playfair Display for elegant headings.
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

/* Global resets */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Poppins', serif;
  background-color: #0d0d0d;
  color: #f5f5f5;
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  color: #9be64d;
  text-decoration: none;
  transition: color 0.3s ease;
}
a:hover {
  color: #c6ff7f;
}

/* Header and navigation */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  background-color: rgba(13, 13, 13, 0.95);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 1000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Logo styling: use the uploaded Eleven30 logo image instead of text */
.logo {
  display: block;
  width: 160px;
  height: 40px;
  background-image: url('../images/Eleven30+Logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center left;
  text-indent: -9999px; /* hide any text inside */
}

nav {
  display: flex;
  gap: 32px;
}

nav a {
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-size: 14px;
  color: #f5f5f5;
  position: relative;
}
nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #9be64d;
  transition: width 0.3s ease;
}
nav a:hover::after {
  width: 100%;
}

/* Hamburger menu for mobile */
.menu-toggle {
  display: none;
  flex-direction: column;
  width: 26px;
  height: 24px;
  justify-content: space-between;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  height: 3px;
  background-color: #f5f5f5;
  border-radius: 3px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Mobile nav overlay */
/* Mobile navigation overlay is hidden by default. It becomes
   visible only when the `.open` class is toggled by the
   JavaScript menu handler. */
.mobile-nav {
  position: fixed;
  top: 64px;
  left: 0;
  width: 100%;
  height: calc(100vh - 64px);
  background-color: #0d0d0d;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  z-index: 999;
}

/* When open, display the navigation */
.mobile-nav.open {
  display: flex;
}

.mobile-nav a {
  font-size: 20px;
  font-weight: 500;
}

/* Hero section */
/*
  The base hero styling uses a generous height and a default
  background image. When no background image is specified, the
  height can feel excessive on smaller screens. To accommodate
  pages with simpler hero banners (e.g. index, about, contact,
  booking and LinkedIn), we define a compact variation that
  reduces the height.
*/

.hero {
  height: 90vh;
  background: url('../images/dec0361c-e7e3-4c03-a2de-3959572fbca1.png') center/cover no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: none;
  width: 100%;
  margin: 0;
}

/* Compact hero for pages without a background image */
.hero-compact {
  /* Shorter height for simple heroes */
  height: 60vh;
}

/* Hero variation that features embedded media (e.g. slide decks) */
.hero-embed {
  height: auto;
  min-height: 70vh;
  padding: 140px 24px 96px;
  background: radial-gradient(circle at top right, rgba(155, 230, 77, 0.12), transparent 55%), #0d0d0d;
  align-items: flex-start;
}

.hero-embed::before {
  background: none;
}

.hero-embed .hero-content {
  text-align: left;
  max-width: 1100px;
  margin: 0 auto;
}

.hero-content--embed h1 {
  text-shadow: none;
}

.hero-embed-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(155, 230, 77, 0.25);
  margin-top: 32px;
}

.hero-embed-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  padding: 0 20px;
}

.hero-content h1 {
  font-family: 'Poppins', serif;
  font-size: 3rem;
  margin-bottom: 16px;
  color: #ffffff;
  text-shadow: 0 4px 10px rgba(0,0,0,0.6);
}

.hero-content p {
  font-size: 1.25rem;
  margin-bottom: 32px;
  color: #e0e0e0;
}

.btn {
  display: inline-block;
  background-color: #9be64d;
  color: #0d0d0d;
  padding: 12px 24px;
  border-radius: 32px;
  font-weight: 600;
  letter-spacing: 1px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.btn:hover {
  background-color: #c6ff7f;
  transform: translateY(-2px);
}

/* Section base styling */
section {
  padding: 80px 20px;
  max-width: 1100px;
  margin: 0 auto;
}

section h2 {
  font-family: 'Poppins', serif;
  font-size: 2.4rem;
  margin-bottom: 32px;
  color: #9be64d;
  text-align: center;
}

/* Services/Industries section */
.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px;
}
.service-card {
  background-color: #1a1a1a;
  border-radius: 12px;
  padding: 24px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.service-card h3 {
  font-size: 1.3rem;
  margin-bottom: 12px;
  color: #c6ff7f;
}
.service-card p {
  font-size: 0.95rem;
  color: #cccccc;
}

/* Highlight cards */
.highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
}
.highlight-card {
  background-color: #1a1a1a;
  border-radius: 12px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.highlight-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.highlight-card h3 {
  color: #c6ff7f;
  margin-bottom: 8px;
  font-size: 1.2rem;
}
.highlight-card p {
  font-size: 0.9rem;
  color: #d0d0d0;
  margin-bottom: 0;
}

/* Portfolio grid */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
}

.portfolio-item {
  background-color: #1a1a1a;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.portfolio-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.portfolio-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.portfolio-item .portfolio-content {
  padding: 20px;
}
.portfolio-item h3 {
  font-size: 1.4rem;
  color: #c6ff7f;
  margin-bottom: 10px;
}
.portfolio-item p {
  font-size: 0.9rem;
  color: #cccccc;
}

/* Deep-dive portfolio detail pages */
.portfolio-detail {
  padding: 96px 24px 120px;
  background: linear-gradient(180deg, rgba(12, 12, 12, 0.95), rgba(12, 12, 12, 0.6));
  max-width: none;
  margin: 0;
}

.portfolio-detail-inner {
  max-width: 900px;
  margin: 0 auto;
  background: rgba(26, 26, 26, 0.85);
  border-radius: 16px;
  padding: 56px 48px;
  border: 1px solid rgba(155, 230, 77, 0.15);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

.portfolio-detail-inner h2 {
  font-size: 2.2rem;
  margin-bottom: 24px;
  color: #c6ff7f;
}

.portfolio-detail-inner p {
  margin-bottom: 24px;
  font-size: 1rem;
  color: #e0e0e0;
}

.portfolio-detail-inner ul {
  margin: 0 0 32px 20px;
  padding: 0;
  display: grid;
  gap: 12px;
  list-style: disc;
}

.portfolio-detail-inner li {
  font-size: 0.95rem;
  color: #d0d0d0;
}

.portfolio-detail-inner .btn {
  margin-top: 8px;
}

.portfolio-detail-links {
  padding: 96px 24px;
  background: #0f0f0f;
  text-align: center;
  max-width: none;
  margin: 0;
}

.portfolio-detail-links h2 {
  font-size: 2.4rem;
  margin-bottom: 16px;
}

.portfolio-detail-links p {
  max-width: 680px;
  margin: 0 auto 48px;
  color: #d8d8d8;
}

.portfolio-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
}

.portfolio-detail-card {
  display: block;
  padding: 32px 28px;
  border-radius: 16px;
  background: rgba(26, 26, 26, 0.9);
  border: 1px solid rgba(155, 230, 77, 0.18);
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.portfolio-detail-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.45);
  border-color: rgba(155, 230, 77, 0.35);
}

.portfolio-detail-card span {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #9be64d;
  margin-bottom: 12px;
}

.portfolio-detail-card h3 {
  font-size: 1.5rem;
  margin-bottom: 12px;
  color: #ffffff;
}

.portfolio-detail-card p {
  color: #cfcfcf;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Lightbox overlay to display full-size portfolio images */
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.lightbox.open {
  display: flex;
}
.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
}

/* Contact form styling */
.contact-container {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
}
.contact-info {
  flex: 1 1 300px;
}
.contact-form {
  flex: 1 1 300px;
  background-color: #1a1a1a;
  padding: 32px;
  border-radius: 12px;
}
.contact-form label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 16px;
  border: none;
  border-radius: 6px;
  background-color: #2c2c2c;
  color: #f5f5f5;
}
.contact-form button {
  background-color: #9be64d;
  color: #0d0d0d;
  padding: 12px 24px;
  border: none;
  border-radius: 32px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.contact-form button:hover {
  background-color: #c6ff7f;
  transform: translateY(-2px);
}

/* Footer */
footer {
  background-color: #0d0d0d;
  padding: 40px 20px;
  text-align: center;
  font-size: 0.85rem;
  color: #777;
}

/* Responsive behaviour */
@media (max-width: 768px) {
  nav {
    display: none;
  }
  .menu-toggle {
    display: flex;
  }
  /*
    Do not force the mobile nav to show in the media query. The
    `.open` class controls visibility to allow the hamburger
    button to toggle it properly. */
  .hero-content h1 {
    font-size: 2.2rem;
  }
  .hero-content p {
    font-size: 1rem;
  }
  .hero-embed {
    padding: 120px 16px 72px;
  }
  .hero-embed-wrapper {
    padding-top: 75%;
  }
  .portfolio-detail-inner {
    padding: 40px 28px;
  }
  .portfolio-detail-inner ul {
    margin-left: 16px;
  }
  section {
    padding: 60px 16px;
  }
}

@media (max-width: 480px) {
  .hero-embed {
    padding-top: 110px;
  }
  .hero-embed-wrapper {
    padding-top: 90%;
  }
  .portfolio-detail-inner {
    padding: 32px 24px;
  }
  .portfolio-detail-inner h2 {
    font-size: 1.8rem;
  }
}