:root{
  --brand-black:#0b0b0b;
  --brand-yellow:#ffd200;
  --text:#111;
  --muted:#666;
  --border:#e5e5e5;
  --bg:#fafafa;
}

/* Typography */
h1,h2,h3,.btn{ font-family: 'Comfortaa', sans-serif; }
body,p,li,label,select,input,textarea,button{ font-family: 'Lexend', sans-serif; }

/* Base */
body{ background: var(--bg); color: var(--text); }
a{ color:#0f172a; text-decoration:none; }
a:hover{ color:#b58900; }

/* Accent Underlines (like section headings) */
.section h2, h2.section-title{
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}
.section h2::after, h2.section-title::after{
  content:"";
  position:absolute;
  left:0; right:0; margin:auto;
  bottom:0; width:58px; height:3px;
  background: var(--brand-yellow);
  border-radius: 2px;
}

/* Cards & Panels */
.portfolio-card, .card, .panel{
  background:#fff;
  border:1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.portfolio-card h3, .card h3{
  position:relative;
  padding-left:12px;
}
.portfolio-card h3::before, .card h3::before{
  content:"";
  position:absolute; left:0; top:0.4em;
  width:6px; height:1.2em;
  background: var(--brand-yellow);
  border-radius:3px;
}

/* Forms */
input[type="text"], input[type="email"], input[type="number"], select, textarea{
  border:1px solid var(--border);
  border-radius: 10px;
  padding:10px 12px;
  background:#fff;
}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color: var(--brand-yellow);
  box-shadow: 0 0 0 3px rgba(255,210,0,0.25);
}
input[type="checkbox"]{
  accent-color: var(--brand-yellow);
}

/* Buttons */
.btn{ display:inline-block; padding:12px 18px; border-radius:999px; border:2px solid var(--brand-black); }
.btn-primary{ background: var(--brand-black); color:#fff; border-color: var(--brand-black); }
.btn-primary:hover{ background:#000; }
.btn-ghost{ background:transparent; color:var(--brand-black); }
.btn-ghost:hover{ background:rgba(0,0,0,0.06); }

/* Estimator result */
#estimateResult, .result-box{
  background:#fff;
  border:1px dashed var(--brand-yellow);
  padding:10px 14px;
  border-radius:12px;
  display:inline-block;
}

/* Keep existing nav/layout; only subtle polish */
nav a{ border-radius:12px; padding: 10px 12px; }
nav a:hover{ background: rgba(0,0,0,0.04); }
footer{ color:#888; }


/* Header/logo sizing to match other pages */
header{ background:#ffffff; text-align:center; padding:2rem 1rem; margin-bottom: 8px; }
header img{ max-width:300px; height:auto; display:inline-block; }

/* Section spacing parity */
.section{ padding: 2rem 1rem; max-width: 1200px; margin: 0 auto !important; }

/* Footer spacing */
footer{ padding: 2rem 1rem; }


/* Nav bar consistency */
nav {
  display: flex;
  justify-content: center;
  gap: 2rem;
  background: #f9f9f9;
  padding: 1rem;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
nav a {
  color: #111;
  text-decoration: none;
  font-weight: bold;
}
nav a:hover {
  color: var(--brand-yellow);
}


/* from index.html */
nav {
      display: flex;
      justify-content: center;
      gap: 2rem;
      background: #f9f9f9;
      padding: 1rem;
      border-top: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
    }

/* from index.html */
nav a {
      color: #111;
      text-decoration: none;
      font-weight: bold;
    }

/* from index.html */
nav a:hover {
      color: #FFD43B;
    }

/* ===== Runway5 global spacing normalization ===== */
header{ background:#ffffff; text-align:center; padding: 2rem 1rem !important; margin-bottom: 14px !important; }
header img{ max-width: 300px !important; height: auto !important; display:inline-block; }

/* Nav normalization (consistent across pages) */
body nav{ display:flex !important; justify-content:center !important; align-items:center !important; gap: 16px !important; padding: 10px 0 !important; }
body nav a{ padding: 10px 12px !important; margin: 0 6px !important; border-radius: 12px !important; }
body nav a:hover{ background: rgba(0,0,0,0.04) !important; }

/* Section container + footer parity */
.section{ padding: 2rem 1rem !important; max-width: 1200px !important; margin: 0 auto !important; }
footer{ padding: 2rem 1rem !important; }


/* Footer visual consistency */
footer{ text-align:center; background:#f5f5f5; }
footer .social-links{ display:inline-block; }


/* === Large Project Covers (16:9, up to 1920x1080) === */
.our-work .project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)) !important;
  gap: 1.5rem;
}

.our-work .project-card .project-media img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16/9 !important;
  object-fit: cover !important;
  display: block !important;
  max-height: 1080px !important;
}


/* === CIFF Page Embeds (YouTube + Instagram) === */
.video-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.video-grid .video.main iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  border: 0;
  display: block;
}
.video-grid .video.ig {
  display: grid;
  gap: 1rem;
}
.video-grid .video.ig iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1; /* square embeds for neat layout */
  border: 0;
  display: block;
}
@media (max-width: 900px) {
  .video-grid { grid-template-columns: 1fr; }
}


/* === CIFF Page: Improved Instagram Column === */
.video-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.video-grid .video.main iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9 !important;
  border: 0;
  display: block;
  border-radius: 14px;
}
.video-grid .ig-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.video-grid .ig-item iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16 !important; /* portrait-friendly tiles */
  border: 0;
  display: block;
  border-radius: 14px;
  overflow: hidden;
}
@media (max-width: 1100px) {
  .video-grid { grid-template-columns: 1fr; }
  .video-grid .ig-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .video-grid .ig-column { grid-template-columns: 1fr; }
}


/* === CIFF Page: Center Instagram Grid === */
.video-grid .ig-column {
  justify-content: center;
  align-items: start;
}
.video-grid .ig-column {
  margin: 0 auto !important;
}


/* === CIFF Page: Aligned & Centered Instagram Grid === */
.video-grid {
  justify-content: center;
}
.video-grid .ig-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 1rem;
  justify-content: center;
  max-width: 1100px !important; /* match main content width */
  margin: 0 auto !important;
}
.video-grid .ig-item iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16 !important;
  border-radius: 14px;
  display: block;
}
@media (max-width: 700px) {
  .video-grid .ig-column {
    grid-template-columns: 1fr;
  }
}


/* === CIFF Page: IG Hover Effects === */
.video-grid .ig-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.video-grid .ig-item:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  border-radius: 14px;
  overflow: hidden;
}


/* === CIFF Page: Full-width, Centered IG Grid matching YouTube width === */
.ciff-page .video-grid {
  display: grid !important;
  grid-template-columns: 1fr !important; /* stack: YouTube then IG grid */
  justify-items: center !important;
  gap: 1.25rem !important;
}
.video-grid .video.main {
  width: 100% !important;
  max-width: 1100px !important; /* match site content width */
}
.video-grid .ig-column {
  width: 100% !important;
  max-width: 1100px !important; /* match YouTube width */
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  justify-items: center !important;
}
.video-grid .ig-item {
  width: 100% !important;
}
.video-grid .ig-item iframe {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 9 / 16 !important;
  border: 0 !important;
  border-radius: 14px !important;
  display: block !important;
}
@media (max-width: 700px) {
  .video-grid .ig-column {
    grid-template-columns: 1fr !important;
  }
}


/* === Scoped CIFF styles (prevent affecting other project pages) === */
.ciff-page .video-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  gap: 1.25rem !important;
}
.ciff-page .video-grid .video.main {
  width: 100% !important;
  max-width: 1100px !important;
}
.ciff-page .video-grid .ig-column {
  width: 100% !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  justify-items: center !important;
}
.ciff-page .video-grid .ig-item {
  width: 100% !important;
}
.ciff-page .video-grid .ig-item iframe {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 9 / 16 !important;
  border: 0 !important;
  border-radius: 14px !important;
  display: block !important;
}
@media (max-width: 700px) {
  .ciff-page .video-grid .ig-column { grid-template-columns: 1fr !important; }
}
.ciff-page .video-grid .ig-item { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.ciff-page .video-grid .ig-item:hover { transform: scale(1.03); box-shadow: 0 8px 20px rgba(0,0,0,0.15); border-radius: 14px; overflow: hidden; }


/* === Baseline video-grid (restored for non-CIFF pages) === */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  align-items: start;
}
.video-grid .video iframe {
  width: 100%;
  height: auto;
  border: 0;
  display: block;
}


/* === Summer Skirmish page layout (restored, centered, and neat) === */
.skirmish-page .video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  max-width: 1100px !important;
  margin: 0 auto !important;
  align-items: start;
}
.skirmish-page .video-grid .video.main {
  grid-column: 1 / -1 !important; /* span full width */
}
.skirmish-page .video-grid .video iframe {
  width: 100%;
  height: auto;
  border: 0;
  display: block;
  aspect-ratio: 16 / 9 !important;
  border-radius: 14px;
}
/* Allow vertical clip to be taller but maintain rounded corners */
.skirmish-page .video-grid .video.vertical iframe {
  aspect-ratio: 9 / 16 !important;
}
@media (max-width: 700px) {
  .skirmish-page .video-grid { grid-template-columns: 1fr; }
}


/* === Summer Skirmish: Emphasized secondary video + short beside === */
.skirmish-page .video-grid {
  grid-template-columns: 2fr 1fr !important; /* wider left column */
}
.skirmish-page .video-grid .video.side16x9 iframe {
  aspect-ratio: 16 / 9 !important;
}
.skirmish-page .video-grid .video.vertical iframe {
  aspect-ratio: 9 / 16 !important;
}
@media (max-width: 900px) {
  .skirmish-page .video-grid { grid-template-columns: 1fr !important; }
}


/* === Mobile-only fixes for HOME (2025-09-24) === */
@media (max-width: 900px) {
  html, body { overflow-x: hidden; }

  /* Prevent cover photos from being cut off: avoid fixed heights and ensure full image is visible */
  #home .cover, #home .hero, #home [class*="cover"], #home [class*="hero"],
  .home .cover, .home .hero, .home [class*="cover"], .home [class*="hero"],
  [data-page="home"] .cover, [data-page="home"] .hero,
  #home-hero, #home-cover, .homepage-hero {
    background-size: contain !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    min-height: auto !important;
    height: auto !important;
    padding-top: 72px; /* provides breathing room below nav if overlapping */
  }

  /* If cover photos are <img>, keep proportion and scale to device width */
  #home img.cover, #home img.hero, .home img.cover, .home img.hero,
  .homepage-hero img, .cover img, .hero img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block;
  }

  /* Avoid forced 100vh sections that cause crop on mobile browsers */
  #home section, #home .section, .home section, .home .section,
  #home [class*="vh"], .home [class*="vh"], #home .full-viewport, .home .full-viewport {
    min-height: auto !important;
    height: auto !important;
  }

  /* Nav: keep compact on phones so it doesn't dominate when users zoom */
  nav, header {
    padding: 10px 14px !important;
  }
  nav .logo img, header .logo img { max-height: 44px !important; height: auto !important; }
  nav a { font-size: 0.95rem !important; padding: 8px 6px !important; white-space: nowrap; }
  nav .nav-links { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }

  /* Media embeds fill width safely */
  .video, .video-wrapper, .yt, .vimeo, .embed { max-width: 100% !important; }
  .video iframe, .video-wrapper iframe, .yt iframe, .vimeo iframe, .embed iframe {
    width: 100% !important; height: auto !important; aspect-ratio: 16/9; display: block; border: 0; border-radius: 12px;
  }
}