/* Global variables and font settings */
:root {
  --background-dark: #0A0A0F;
  --card-bg: #111827;
  --gold-color: #C49A3A;
  --text-color: #E5E5E5;
  --heading-font: 'Orbitron', sans-serif;
  --body-font: 'Inter', sans-serif;
}

/* Reset */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--background-dark);
  font-family: var(--body-font);
  color: var(--text-color);
  line-height: 1.6;
}

/* Typography */
h1, h2, h3 {
  font-family: var(--heading-font);
  color: var(--gold-color);
  margin: 0;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}
p { margin: 0.7rem 0; }
a, a:visited {
  /* ensure normal anchor styling remains consistent */
}

/* Subsection headers for mission reports: h4 elements */
h4 {
  font-family: var(--heading-font);
  color: var(--gold-color);
  font-size: 1.1rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

a { color: var(--gold-color); text-decoration: none; transition: color 0.3s; }
a:hover { text-decoration: underline; color: var(--text-color); }

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  font-family: var(--heading-font);
  font-weight: 700;
  text-align: center;
  border: 1px solid var(--gold-color);
  text-decoration: none; /* remove underline from all buttons */
}
.btn.small { padding: 0.4rem 0.9rem; font-size: 0.9rem; }
.btn.gold { background: var(--gold-color); color: #000; border-color: var(--gold-color); }
.btn.gold:hover { background: #d9b25f; color: #000; }

/* Header and navigation */
header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem 1.5rem; background: #0E1724;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  position: sticky; top: 0; z-index: 1000;
}
.brand { display: flex; align-items: center; }
.brand-mark { height: 40px; width: auto; margin-right: 0.5rem; }
.brand-wordmark { font-family: var(--heading-font); color: var(--gold-color); font-size: 1.4rem; }
nav ul { list-style: none; display: flex; margin: 0; padding: 0; }
nav li { margin-left: 1.2rem; }
/* Navigation links: remove underline/borders for a cleaner look */
nav a {
  color: var(--text-color);
  font-weight: 500;
  padding-bottom: 2px;
  text-decoration: none;
  border-bottom: none;
}
nav a:hover,
nav a.active {
  color: var(--gold-color);
  /* No border on hover/active to prevent underline effect */
}

/* Hero */
.hero { position: relative; width: 100%; min-height: 80vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; margin-bottom: 2rem; }
.hero img.img-banner { position: absolute; top:0; left:0; width:100%; height:100%; object-fit: cover; transform: scale(1.1); z-index:-2; }
.hero .hero-overlay { position:absolute; inset:0; background: rgba(5,5,10,0.6); z-index:-1; }
.hero-content { font-family: "Orbitron"; position: relative; max-width: 800px; padding: 2rem; }
.hero-home .hero-logo { max-width: 200px; margin: 0 auto 1rem; }
.hero h1 { font-family: "Orbitron"; font-size: 2.5rem; margin-bottom: 1rem; }
.hero p { font-family: "Orbitron"; font-size: 1.1rem; margin-bottom: 2rem; }
.hero-slim { min-height: 50vh; align-items: flex-end; }
.hero-slim .hero-content { padding-bottom: 2rem; }
.hero-slim h1 { font-family: "Orbitron"; font-size: 2rem; }
.hero-slim p { font-family: "Orbitron"; font-size: 1rem; }

/*
 * Lauck's Island mission page hero colour adjustments
 * On this page we reduce the darkness of the overlay and zoom the image out slightly to show
 * more of its colour and context.  The `.hero-color` class is applied on the section element in
 * laucks.html to achieve this effect without impacting other pages.
 */
/*
 * Lauck's Island hero adjustments
 * Further lighten the overlay on the hero banner so more of the underlying image shows through.  We also
 * reduce the zoom factor slightly, revealing additional context around the subject.  These tweaks are
 * applied only when the `.hero-color` class is present on the hero section, leaving other pages
 * unaffected.  A lower alpha value on the overlay increases brightness and true colour.
 */
.hero-color .hero-overlay {
  /* Reduce opacity from 0.3 to 0.2 for a clearer view of the banner image */
  background: rgba(5, 5, 10, 0.2);
}
.hero-color img.img-cover {
}

/* Page hero */
.page-hero { padding: 4rem 1rem 2rem; text-align: center; }
.page-hero h1 { font-size: 2.5rem; }
.page-hero p { font-style: italic; color: var(--gold-color); }

/* Sections and grids */
.section { padding: 3rem 1.5rem; }
.section.narrow { max-width: 900px; margin: 0 auto; }
.tiles-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 2rem; }
.tiles-3 article { background: var(--card-bg); padding: 1rem; border-radius: 10px; border: 1px solid var(--gold-color); transition: transform .3s, box-shadow .3s; }
.tiles-3 article:hover { transform: translateY(-5px); box-shadow: 0 6px 12px rgba(0,0,0,.3); }

.cards-2, .cards-3, .cards-4, .partners-list { display: grid; gap: 2rem; }
.cards-2 { grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); }
.cards-3 { grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
.cards-4 { grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }
.partners-list { grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); }
@media (max-width:600px){ .cards-2, .cards-3, .cards-4, .partners-list, .tiles-3 { grid-template-columns: 1fr; } }

/* Flip cards (About page retains flips) */
.flip { perspective: 1000px; height: 350px; }
.flip.wide { height: 400px; }
.flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s; }
.flip:hover .flip-inner { transform: rotateY(180deg); }
.flip-front, .flip-back {
  position: absolute; width: 100%; height: 100%; backface-visibility: hidden;
  border-radius: 15px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--card-bg); color: var(--gold-color); padding: 1rem;
}
.flip-front img.contained { width: 100%; height: 100%; object-fit: cover; }
.flip-back { transform: rotateY(180deg); text-align: center; }
.flip-back.emphasis h3, .flip-back.emphasis p { font-size: 1.2rem; font-weight: 700; }

/* Generic cards (used on Services & Products) */
.card { background: var(--card-bg); border: 1px solid var(--gold-color); border-radius: 15px; overflow: hidden; display: flex; flex-direction: column; }
.card-img { width: 100%; height: 240px; object-fit: cover; }
.card-body { padding: 1rem 1.2rem; }
.card-body h3 { font-size: 1.4rem; margin-bottom: 0.6rem; }
.card-body p, .card-body li { color: var(--text-color); }
ul.bullets { margin-left: 1rem; }
ul.bullets li { margin: 0.35rem 0; }
.card .tiny-inline { height: 20px; width: 28px; object-fit: cover; margin-right: 6px; vertical-align: middle; }

/* Portfolio */
.portfolio-card { background: var(--card-bg); border-radius: 15px; overflow: hidden; transition: transform .4s, box-shadow .4s; border: 1px solid var(--gold-color); }
.portfolio-card:hover { transform: translateY(-10px) scale(1.05); box-shadow: 0 8px 16px rgba(0,0,0,.4); }
.portfolio-card img { width: 100%; height: 200px; object-fit: cover; }
.portfolio-card .content { padding: 1rem; }
.portfolio-card h3 { margin-bottom: 0.3rem; }

/* Partners */
.partner { text-align: center; background: var(--card-bg); padding: 1rem; border-radius: 15px; transition: transform .4s, box-shadow .4s; border: 1px solid var(--gold-color); }
.partner:hover { transform: translateY(-5px); box-shadow: 0 6px 12px rgba(0,0,0,.3); }
.partner img { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; margin-bottom: 1rem; }
.partner-name { font-family: var(--heading-font); color: var(--gold-color); font-size: 1.3rem; margin-bottom: 0.3rem;
  text-shadow: 0 0 5px var(--gold-color), 0 0 10px rgba(255,255,255,0.2); }

/* Forms */
form { display: flex; flex-direction: column; gap: 1rem; max-width: 600px; margin: 0 auto; }
form label { display: flex; flex-direction: column; font-size: 0.9rem; color: var(--gold-color); }
form input, form textarea { padding: 0.6rem; border-radius: 10px; border: none; background: #1E2A3A; color: var(--text-color); font-family: var(--body-font); }
form input::placeholder, form textarea::placeholder { color: #7C8697; }
form button[type="submit"] { align-self: center; padding: 0.8rem 1.5rem; background: var(--gold-color); color: #000; border: none; border-radius: 30px; cursor: pointer; font-family: var(--heading-font); font-size: 1rem; }
form button[type="submit"]:hover { background: #d9b25f; }

/* Banner contained images */
.banner-contained { padding: 0; }
.banner-contained img {
  display: block;
  width: 100%;
  /* Default height for large screens; on mobile this is overridden via media query */
  height: 350px;
  object-fit: cover;
}

/* Flex-style banners (used on Meshstorm mission) should allow the enclosed
   image to scale to the width of its container while maintaining aspect
   ratio.  Without this, images may overflow on narrow screens. */
.banner-flex img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Ensure banner-contained images scale responsively on narrow viewports.  On screens
   narrower than 600px, allow the height to adjust automatically and switch to
   object-fit: contain so the entire image is visible without cropping. */
@media (max-width: 600px) {
  .banner-contained img {
    height: auto;
    max-height: 100%;
    object-fit: contain;
  }
}
.banner-cover { display: flex; justify-content: center; align-items: center; height: 100%; }

/* Ensure images inside banner-cover scale responsively.  Without explicit sizing,
   images can overflow their container on narrow screens. */
.banner-cover img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Cookie banner */
.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: var(--card-bg); color: var(--text-color); padding: 1rem; box-shadow: 0 -2px 4px rgba(0,0,0,0.4); display: none; z-index: 1000; }
.cookie-banner .cookie-text { margin-bottom: 0.5rem; }
.cookie-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cookie-btn { padding: 0.5rem 1rem; border-radius: 30px; font-family: var(--heading-font); font-size: 0.9rem; cursor: pointer; }
.cookie-btn.primary { background: var(--gold-color); color: #000; border: none; }
.cookie-btn.secondary { background: #1E2A3A; color: var(--gold-color); border: 1px solid var(--gold-color); }
.cookie-btn.primary:hover { background: #d9b25f; }
.cookie-btn.secondary:hover { background: var(--gold-color); color: #000; }
.cookie-options.hidden { display: none; }
.cookie-options { margin-top: 0.5rem; }
.cookie-options h3 { margin-bottom: 0.5rem; }
.cookie-option { display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.3rem; }

/* Footer: center alignment and gold text */
footer {
  text-align: center;
  margin-top: 2rem;
}
footer p {
  color: var(--gold-color);
  margin: 1rem 0;
}

/* Subheaders inside cards */
.card-body h4 {
  font-family: var(--heading-font);
  color: var(--gold-color);
  font-size: 1.2rem;
  margin-top: 0.7rem;
  margin-bottom: 0.3rem;
}

/* Grid for tools and field features */
.tool-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}
.tool-item {
  text-align: center;
}
.tool-item p {
  font-size: 0.9rem;
  margin-top: 0.5rem;
  color: var(--text-color);
}
.tool-img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  margin: 0 auto 0.5rem;
  border-radius: 8px;
}

/* Tabs styling for service cards */
.tabs {
  margin-top: 1rem;
}
.tab-buttons {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.tab-buttons button {
  font-family: var(--heading-font);
  font-size: 0.9rem;
  color: var(--text-color);
  background: var(--card-bg);
  border: 1px solid var(--gold-color);
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.tab-buttons button:hover {
  background: var(--gold-color);
  color: #000;
}
.tab-buttons button.active {
  background: var(--gold-color);
  color: #000;
}
.tab-panel {
  display: none;
  margin-top: 1rem;
}
.tab-panel.active {
  display: block;
}
/* Larger images for tab panels */
.tool-img-large {
  width: 100%;
  height: auto;
  max-height: 240px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 0.8rem;
}
/* Center laser hero banner positioning */
.center-laser {
  object-position: center;
}

/* Partner card enhanced styling */
.partner-body {
  text-align: center;
}
.partner-role {
  font-size: 0.9rem;
  margin: 0.3rem 0;
  color: var(--text-color);
}
.partner-location {
  font-size: 0.85rem;
  color: var(--text-color);
  margin: 0.5rem 0;
}
.partner-skills {
  margin: 0.5rem 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.skill-badge {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  background: #1E2A3A;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--gold-color);
  color: var(--gold-color);
}
.partner-social {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
}
.partner-social .btn {
  margin-top: 0;
}

/* Partner biography list */
.partner ul {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 1rem 0;
}
.partner ul li {
  margin: 0.25rem 0;
  color: var(--text-color);
  font-size: 0.9rem;
}

/* Utility: horizontal gold line */
.gold-line {
  border: none;
  border-top: 1px solid var(--gold-color);
  margin: 1rem 0;
}

/* Special table styling for mastodon/mammoth comparison */
/* Mastodon comparison tables: improved readability and clear structure */
.mastodon-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  border: 1px solid #000;
}
.mastodon-table th {
  background: var(--gold-color);
  color: #000;
  padding: 0.45rem;
  font-family: var(--heading-font);
  font-weight: 600;
  border: 1px solid #000;
}
.mastodon-table td {
  border: 1px solid #000;
  padding: 0.45rem;
  background: #FFFFFF;
  color: #000;
  font-weight: bold;
}
/* Alternate row shading for readability */
.mastodon-table tbody tr:nth-child(even) td {
  background: #F5F5F5;
}
/* Highlight the first column (including header) of mastodon comparison tables with gold background and black text */
.mastodon-table thead th:first-child,
.mastodon-table tbody td:first-child {
  background: var(--gold-color);
  color: #000;
  font-family: var(--heading-font);
  font-weight: bold;
}

/* Responsive behaviour: wrap tables on small screens to prevent horizontal overflow.
   On viewports below 600px, treat the table as a block-level element and
   enable horizontal scrolling so that all columns remain accessible without
   breaking the layout.  We also prevent cell contents from wrapping which
   could distort the structure. */
@media (max-width: 600px) {
  .mastodon-table,
  .generic-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mastodon-table th,
  .mastodon-table td,
  .generic-table th,
  .generic-table td {
    white-space: nowrap;
  }
}

/* Special table styling for generic tables */
/* Generic Table tables: improved readability and clear structure */
.generic-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  border: 1px solid #000;
}
.generic-table th {
  background: var(--gold-color);
  color: #000;
  padding: 0.45rem;
  font-family: var(--heading-font);
  font-weight: 600;
  border: 1px solid #000;
}
.generic-table td {
  border: 1px solid #000;
  padding: 0.45rem;
  background: #FFFFFF;
  color: #000;
  font-weight: bold;
}
/* Alternate row shading for readability */
.generic-table tbody tr:nth-child(even) td {
  background: #F5F5F5;
}
/* Highlight the first column (including header) of mastodon comparison tables with gold background and black text */
.generic-table thead th:first-child,
.generic-table tbody td:first-child {
  background: var(--gold-color);
  color: #000;
  font-family: var(--heading-font);
  font-weight: bold;
}

/* Callout boxes for mission reports */
.callout {
  border-left: 4px solid var(--gold-color);
  background: #1E2A3A;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  margin: 1rem 0;
  color: var(--text-color);
}

/* --- Additions for galleries, charts, and timelines (non-breaking) --- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 0.8rem;
  margin-top: 1rem;
}
.gallery-grid img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--gold-color);
}
.figure {
  background: var(--card-bg);
  padding: 0.6rem;
  border-radius: 10px;
  border: 1px solid var(--gold-color);
  /* Provide breathing room above and below figures */
  margin: 1rem 0;
}
.figure figcaption {
  font-size: 0.85rem;
  color: var(--text-color);
  opacity: 0.85;
  margin-top: 0.35rem;
}
.chart-container {
  background: var(--card-bg);
  border: 1px solid var(--gold-color);
  border-radius: 12px;
  padding: 1rem;
  margin: 1rem 0;
}
.timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-top: 1rem;
}
.timeline .t-item {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--gold-color);
  border-radius: 10px;
  padding: 0.8rem 1rem 0.8rem 2.2rem;
}
.timeline .t-item::before {
  content: "";
  position: absolute;
  left: 0.9rem;
  top: 1rem;
  width: 10px;
  height: 10px;
  border: 2px solid var(--gold-color);
  border-radius: 50%;
  background: #000;
}
.timeline .who {
  font-family: var(--heading-font);
  color: var(--gold-color);
  font-size: 0.95rem;
}
.timeline .when {
  font-size: 0.85rem;
  opacity: 0.85;
}

/* Inline image helpers for mission sections */
.figure img { max-width: 100%; max-height: 100%; object-fit: cover; display: block; }
.img-inline { width: 600px; height: auto; border-radius: 10px; border: 1px solid var(--gold-color); margin: 0.6rem 0; }
.img-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 0.6rem; }
.img-contained {display: flex; justify-content: center; align-items: center; max-height: 100%; max-width: 100%; object-fit: contain; }

/* Ensure images inside .img-contained containers fill the width while maintaining
   aspect ratio.  Without this, inline styles on mission pages could force
   oversize dimensions on mobile screens. */
.img-contained img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/*
 * Basic stylesheet for the Lauck's Island mission report page.
 *
 * The only element we style here is the map container.  If additional
 * components are added to the page (e.g. text blocks, images, or buttons),
 * they can be styled below without interfering with the map loading logic.
 */

/* Ensure the map takes up a reasonable portion of the viewport.  Adjust the
 * height here to suit your layout.  The width is set to 100% so that it
 * expands to fill its container.
 */
#map {
  height: 600px;
  width: 100%;
  margin: 0 auto;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Simple typography for the heading.  This can be customized as needed. */
h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.8rem;
  margin: 0.5rem auto;
  text-align: center;
}

/* Map control tweaks for the Lauck's page */
.ais-opacity-control {
  background: #111827;
  color: #e5e5e5;
  border: 1px solid var(--gold-color);
  border-radius: 6px;
}
.ais-opacity-control input[type="range"] {
  width: 140px;
  accent-color: var(--gold-color);
}

.ais-ruler button {
  background:#111827;
  color:#e5e5e5;
  border: none;
  width: 32px; height: 32px;
  line-height: 32px;
  cursor: pointer;
}
.ais-ruler button:hover { background:#1E2A3A; }

.ais-elev {
  background:#111827;
  color:#e5e5e5;
  border: 1px solid var(--gold-color);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 12px;
}

/* -----------------------------------------------------------------------------
 * Additional utility classes and components
 *
 * To simplify future additions and keep the markup tidy, we define a set of
 * generic image and layout helpers here.  These classes provide consistent
 * sizing, borders, and responsive behaviour across pages.  Use them instead
 * of custom per‑element styles whenever possible.
 * ---------------------------------------------------------------------------*/

/* Generic responsive image.  Apply to <img> elements to ensure they scale
 * gracefully with their container while maintaining aspect ratio.  The border
 * and rounded corners mirror the look of other cards on the site. */
.img-responsive {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--gold-color);
  display: block;
}

/* -------------------------------------------------------------------------
 * Custom styles for new interactive features
 *
 * These additions support the D3 org chart on the About page and the
 * Mission Builder enhancements on the Services page.  We append them
 * here to avoid interfering with existing layout definitions.
 */

/* Chart controls to group nodes by type */
.chart-buttons {
  margin-top: 0.8rem;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.chart-buttons button {
  font-family: var(--heading-font);
  font-size: 0.85rem;
  padding: 0.45rem 0.9rem;
  background: var(--card-bg);
  border: 1px solid var(--gold-color);
  border-radius: 999px;
  color: var(--text-color);
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.chart-buttons button:hover,
.chart-buttons button.active {
  background: var(--gold-color);
  color: #000;
}

/* Popup overlay for org chart details */
.org-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2000;
  background: #111827;
  border: 1px solid var(--gold-color);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
}
.org-popup.hidden {
  display: none;
}
.org-popup .popup-close {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--gold-color);
  cursor: pointer;
}
.org-popup .popup-content {
  margin-top: 1.2rem;
  color: var(--text-color);
  font-size: 0.9rem;
}

/* Mission builder objectives section */
.mission-objectives {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.6rem;
  margin-bottom: 0.6rem;
}
.mission-objectives legend {
  font-family: var(--heading-font);
  color: var(--gold-color);
  margin-bottom: 0.4rem;
  font-size: 1rem;
}
.mission-objectives label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--text-color);
  line-height: 1.2;
}
.mission-objectives input[type="checkbox"] {
  accent-color: var(--gold-color);
}

/*
 * Mission objectives select field styling.  When the mission builder uses a
 * multi‑select dropdown instead of checkboxes, this rule ensures the list
 * matches the site’s dark theme and gold accents.  The element uses the
 * id #mission-objectives (matching the services.html markup).  The height is
 * constrained via the size attribute; overflow is handled automatically by the
 * browser.  Options inside inherit the text colour and dark background.
 */
#mission-objectives {
  background: #1E2A3A;
  color: var(--text-color);
  border: none;
  border-radius: 8px;
  padding: 0.5rem;
  font-family: var(--body-font);
  font-size: 0.9rem;
}
#mission-objectives option {
  color: var(--text-color);
  background: var(--card-bg);
  padding: 0.2rem 0.5rem;
}

/* Generic image template with fixed height.  Useful when you need all images
 * in a gallery to align vertically. */
.image-template {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--gold-color);
  margin: 0.5rem 0;
}

/* ============== Responsive Image Utilities ============== */

/* 1) Always scale down to container width, keep natural ratio */
.img-fluid { width: 100%; height: auto; display: block; }

/* 2) Cover a box (hero/banner). Crops edges but fills the box cleanly */
.img-cover { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 3) Contain inside a box (never crop). May show letterboxing */
.img-contain { width: 100%; height: 100%; object-fit: contain; background: #0A0A0F; display: block; }

/* 4) Aspect-ratio helpers for consistent heights without magic numbers */
.ar-21x9  { aspect-ratio: 21 / 9;  }
.ar-16x9  { aspect-ratio: 16 / 9;  }
.ar-4x3   { aspect-ratio: 4 / 3;   }
.ar-1x1   { aspect-ratio: 1 / 1;   }

/* 5) Figure variants: cover vs contain */
.figure--cover   img { width: 100%; height: 100%; object-fit: cover; }
.figure--contain img { width: 100%; height: 100%; object-fit: contain; }

/* Give figures an easy way to set a max height that shrinks on phones */
.figure--tall   { max-height: 70vh; }
.figure--medium { max-height: 55vh; }
.figure--short  { max-height: 40vh; }
.figure--tall img,
.figure--medium img,
.figure--short img { height: 100%; }

/* 6) Banner container that uses aspect-ratio instead of fixed px height */
.banner-flex { position: relative; width: 100%; overflow: hidden; }
.banner-flex img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* Default: 16:9 on desktop, shorter on phones */
.banner-flex.ar-16x9 { aspect-ratio: 16 / 9; }
@media (max-width: 600px) {
  .banner-flex.ar-16x9 { aspect-ratio: 4 / 3; }  /* a little taller on small screens */
}

/* 7) “Contained banner” variant for infographics/text images (don’t crop) */
.banner-flex.contain img { object-fit: contain; background: #0A0A0F; }

/* 8) Optional focal point for cover crops */
.center-top    { object-position: 50% 10%; }
.center-center { object-position: 50% 50%; }
.center-bottom { object-position: 50% 90%; }


/* Mission builder form container.  Provides a consistent card look with
 * padding and border.  Inputs inside inherit text colour and subtle
 * backgrounds for readability. */
.mission-builder {
  background: var(--card-bg);
  border: 1px solid var(--gold-color);
  border-radius: 15px;
  padding: 1.5rem;
  margin: 1.5rem 0;
}
.mission-builder label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--gold-color);
}
.mission-builder input,
.mission-builder select {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border-radius: 8px;
  border: none;
  background: #1E2A3A;
  color: var(--text-color);
  font-family: var(--body-font);
}
.mission-builder-output {
  font-family: var(--heading-font);
  color: var(--gold-color);
  margin-top: 0.5rem;
  font-size: 1.2rem;
}

/* Workflow diagram styles.  This horizontal (or wrapping) set of cards
 * illustrates a process flow.  Each step is clickable and highlights on
 * hover/active. */
.workflow-diagram {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 1rem;
  margin: 1rem 0;
}
.workflow-step {
  flex: 1 1 200px;
  background: var(--card-bg);
  border: 1px solid var(--gold-color);
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  position: relative;
  cursor: pointer;
  transition: transform 0.3s;
}
.workflow-step:hover {
  transform: translateY(-4px);
}
.workflow-step.active {
  background: var(--gold-color);
  color: #000;
}
.workflow-description {
  margin-top: 1rem;
  background: #1E2A3A;
  border: 1px solid var(--gold-color);
  border-radius: 8px;
  padding: 1rem;
  display: none;
}
.workflow-description.active {
  display: block;
}

/* Accordion component for case studies.  Each header toggles its panel.
 * Panels are hidden by default until activated by JavaScript. */
.accordion {
  margin-top: 1rem;
}
.accordion-item {
  margin-bottom: 0.5rem;
  border: 1px solid var(--gold-color);
  border-radius: 10px;
  overflow: hidden;
}
.accordion-header {
  width: 100%;
  background: var(--card-bg);
  color: var(--gold-color);
  font-family: var(--heading-font);
  padding: 0.75rem 1rem;
  text-align: left;
  cursor: pointer;
  border: none;
}
.accordion-header:hover {
  background: #1E2A3A;
}
.accordion-panel {
  display: none;
  background: var(--card-bg);
  padding: 1rem;
}
.accordion-panel.active {
  display: block;
}
.accordion-panel img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  object-fit: cover;
}

/* Grid layout for multiple charts.  Allows charts to sit side by side on
 * larger screens and stack on small screens. */
.chart-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Actions for portfolio cards (share & download).  Buttons are spaced evenly and scale on mobile. */
.card-actions {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.card-actions .btn {
  flex: 1 1 auto;
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
}

/* Generic container for D3 org charts.  Sets dimensions and styling so charts integrate seamlessly on dark background. */
.org-chart {
  width: 100%;
  height: 400px;
  background: var(--card-bg);
  border: 1px solid var(--gold-color);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

/* Calendar embed styling */
.calendar-wrapper {
  margin-top: 1rem;
  border: 1px solid var(--gold-color);
  border-radius: 10px;
  overflow: hidden;
}
.calendar-frame {
  width: 100%;
  height: 600px;
  border: none;
}

/* Topography control.  Provides a nested menu for map tools on the
 * Lauck’s Island mission page.  Buttons within use the site’s gold and
 * dark palettes and respond on hover. */
.topo-control {
  background: #111827;
  color: #e5e5e5;
  border: 1px solid var(--gold-color);
  border-radius: 6px;
  padding: 0.5rem;
}
.topo-control button {
  display: block;
  width: 100%;
  background: var(--card-bg);
  color: var(--gold-color);
  border: 1px solid var(--gold-color);
  border-radius: 6px;
  padding: 0.3rem 0.5rem;
  margin-bottom: 0.4rem;
  cursor: pointer;
  font-family: var(--heading-font);
  font-size: 0.8rem;
  transition: background 0.3s, color 0.3s;
}
.topo-control button:hover {
  background: var(--gold-color);
  color: #000;
}

/* Do not hide the default Leaflet scale control; we toggle it via JS by
   adding or removing the control from the map.  The Leaflet library
   positions it in the lower left by default. */
.leaflet-control-scale {
  /* intentionally left visible; toggled via JS */
}

/* Nested menu for topography tools; hidden by default */
.topo-control .topo-menu {
  background: #1E2A3A;
  border: 1px solid var(--gold-color);
  border-radius: 6px;
  padding: 0.5rem;
  margin-top: 0.25rem;
}
.topo-control .topo-menu.hidden {
  display: none;
}
.topo-control label {
  display: block;
  font-size: 0.8rem;
  margin-bottom: 0.3rem;
  cursor: pointer;
}
.topo-control input {
  margin-right: 0.4rem;
}

/* Responsive grid for grouped cards (e.g., LiDAR analysis and portfolio) */
.cards-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* =========================
   ATHENA • MOBILE NAV v2
   ========================= */

/* Guardrails */
html, body { max-width: 100%; overflow-x: hidden; }
body.nav-open { overflow: hidden; }

/* Header spacing at small widths */
@media (max-width: 900px) {
  header { position: sticky; top: 0; z-index: 1002;
           display: flex; align-items: center; gap: .75rem;
           padding: .75rem 1rem; background: #0E1724; }
  .brand-mark { height: 32px; }
  .brand-wordmark { font-size: 1.15rem; }
}

/* ===== Menu Toggle (hamburger → X) ===== */
.nav-toggle {
  display: none;
  align-items: center; gap: .5rem;
  border: 1px solid var(--gold-color);
  background: rgba(255,255,255,0.02);
  color: var(--gold-color);
  border-radius: 999px;
  padding: .45rem .75rem;
  font-family: var(--heading-font);
  font-weight: 700;
  line-height: 1;
}
@media (max-width: 900px) { .nav-toggle { display: inline-flex; margin-left: auto; } }

.nav-toggle .bars { position: relative; width: 18px; height: 12px; display: inline-block; }
.nav-toggle .bars::before,
.nav-toggle .bars::after,
.nav-toggle .bars span {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: var(--gold-color); border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease, top .25s ease;
}
.nav-toggle .bars::before { top: 0; }
.nav-toggle .bars span    { top: 5px; }
.nav-toggle .bars::after  { top: 10px; }

body.nav-open .nav-toggle .bars::before { top: 5px; transform: rotate(45deg); }
body.nav-open .nav-toggle .bars span    { opacity: 0; }
body.nav-open .nav-toggle .bars::after  { top: 5px; transform: rotate(-45deg); }

/* ===== Drawer & Overlay ===== */
@media (max-width: 900px) {
  /* Turn your existing nav into a right-side drawer */
  nav#primary-nav {
    position: fixed; top: 0; right: 0;
    width: min(78vw, 360px); height: 100vh;
    background: #0E1724;
    box-shadow: -6px 0 18px rgba(0,0,0,.35);
    padding: 1rem 1.25rem 2rem;
    transform: translateX(100%);
    transition: transform .28s ease-out;
    display: flex; flex-direction: column; justify-content: flex-start;
    z-index: 1001;
  }
  body.nav-open nav#primary-nav { transform: translateX(0); }

  /* Vertical list and comfy tap targets */
  nav#primary-nav ul { display: flex; flex-direction: column; gap: .25rem; margin-top: .5rem; }
  nav#primary-nav li { list-style: none; }
  nav#primary-nav a  {
    display: block; padding: .7rem 0;
    font-size: 1.15rem; text-decoration: none;
  }
}

/* Background dim when menu is open */
.nav-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.38);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
  z-index: 1000;
}
body.nav-open .nav-overlay { opacity: 1; pointer-events: auto; }

/* ===== Content sizing tighten for phones (keeps hero/text from "falling off") ===== */
@media (max-width: 600px) {
  .page-hero { padding: 3rem 1rem 1.25rem; }
  .hero h1 { font-size: 1.65rem; }
  .hero p  { font-size: .98rem; }
  .banner-contained img { height: auto; max-height: 260px; }

  .card-img, .portfolio-card img { height: 160px; object-fit: cover; }
  .tiles-3 article, .card { padding: .85rem; }
}