/* Basic, readable defaults */
:root {
  /* Strict black and white palette */
  --bg: #ffffff;
  --panel: #ffffff;
  --text: #000000;
  --muted: #000000;
  --brand: #ffffff;
  --brand-ink: #000000;
  --accent: #000000;
  --border: #000000;
  /* Theme gradient defaults (used by header/footer) */
  /* Default site gradient (Cobra theme) */
  --theme-grad-start: #87CEEB; /* Sky Blue */
  --theme-grad-mid: #6FAAD1;   /* lighter midpoint */
  --theme-grad-end: #4A86C6;   /* lighter Ocean Blue */
  /* Layout */
  --header-space: 98px; /* adjust for slightly thicker header */
  --pill-height: 70px;  /* slightly increased pill thickness */
  /* Responsive pill sizing */
  --pill-max: clamp(560px, 78vw, 3000px);
  --pill-pad-y: clamp(8px, 1.2vw, 14px);
  --pill-pad-x: clamp(12px, 2vw, 24px);
  --pill-gap: clamp(8px, 1.5vw, 16px);
  /* Reveal overlap for curved section over hero */
  --reveal-radius: 35px;
  /* Extend hero below fold so curved cap never shows white seam */
  --reveal-overlap: calc(var(--reveal-radius) + 24px);
  /* Extra image bleed under hero for smooth curved reveal */
  --bleed-height: 96px;
  /* Fine-tune inner image scale for focus illustration (1 = no scale) */
  --focus-image-scale: 1; /* reset; no extra scaling */
  /* Vertical focal point of the hero image (0% = top, 100% = bottom) */
  --hero-focus-y: 100%;
  /* Vertical lift for hero content (negative moves up) */
  --hero-content-shift: -10vh;
  /* Responsive sizing for specs tiles/media */
  --specs-tile-min: 280px;
  --specs-tile-ideal: 42vw;
  --specs-tile-max: 1000px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
/* Smooth in-page anchor scrolling */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  font-family: "Sebino Soft", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
    Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Header */
.site-header {
  position: fixed; /* keep header visible at all times */
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: transparent;
  padding: clamp(8px, 1.5vw, 16px) 0; /* space around pill */
}
.site-header .container {
  display: block;
  max-width: 3000px;
  padding-left: clamp(12px, 4vw, 48px);
  padding-right: clamp(12px, 4vw, 48px);
}
.header-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pill-gap);
  height: var(--pill-height);
  padding: 0 var(--pill-pad-x); /* default horizontal padding */
  border: none; /* remove black border around header bar */
  background: linear-gradient(90deg, var(--theme-grad-start) 0%, var(--theme-grad-mid) 50%, var(--theme-grad-end) 100%);
  border-radius: 200px; /* full pill */
  max-width: var(--pill-max);
  width: 100%;
  margin: 0 auto;         /* center the pill */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); /* slightly stronger shadow around header bar */
}

/* Reduce left interior padding so logo sits closer to the edge */
.header-pill { padding-left: 10px; }
.brand {
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.2s ease;
}
.logo {
  height: 50px;  /* requested fixed height */
  width: auto;   /* natural aspect ratio */
  display: block;
}
.brand-text { line-height: 1;
  font-size: 1.5rem;
  font-weight: 700; /* bold weight within single family */
  font-family: "Sebino Soft", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-synthesis: none; /* prefer true bold from family */
  color: var(--text);
  margin: 0;
  padding: 0;
  transition: color 0.15s ease;
}
.nav a {
  color: var(--muted);
  text-decoration: none;
  margin-left: 1rem;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.nav a:hover { color: #ffffff; text-decoration: none; }

/* Simple dropdown in header nav */
.nav { position: relative; }
.nav .dropdown { position: relative; display: inline-block; }
.nav .dropdown > a { display: inline-flex; align-items: center; }
.nav .dropdown > a::after {
  content: "\25BE"; /* small caret */
  font-size: 0.7em; margin-left: 6px; line-height: 1;
}
.nav .dropdown::after {
  /* Hover bridge: keep dropdown open while moving cursor down */
  content: "";
  position: absolute;
  left: -8px; right: -8px; top: 100%;
  height: 14px; /* fills the gap between trigger and menu */
  z-index: 1; /* below the actual menu */
}
.nav .dropdown-menu {
  display: none;
  position: absolute; top: 100%; left: 0; margin-top: 10px; /* create a small visual gap */
  background: #ffffff; color: var(--text);
  min-width: 200px; padding: 6px; border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  z-index: 2; /* above the hover bridge */
}
.nav .dropdown:hover .dropdown-menu { display: block; }
.nav .dropdown-menu a {
  display: block; padding: 8px 10px; margin: 2px 0; border-radius: 8px;
  color: var(--muted); background: transparent;
}
.nav .dropdown-menu a:hover {
  color: #ffffff;
  background: linear-gradient(90deg, var(--theme-grad-start) 0%, var(--theme-grad-mid) 50%, var(--theme-grad-end) 100%);
}

/* Make the brand/home link turn white on hover */
.brand:hover,
.brand:hover .brand-text {
  color: #ffffff;
}

/* Hero */
.hero {
  min-height: 100svh; /* extend under header so image shows behind */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
  padding-top: calc(2rem + var(--header-space));
  /* Header is fixed; no negative offset needed */
  /* keep bottom tight; bleed handled by hero-bg extension */
  margin-top: 0;
  text-align: center;
  position: relative; /* allow absolute bg layering */
}
.hero h1 {
  font-size: clamp(1.8rem, 3vw + 1rem, 3rem);
  line-height: 1.15;
  margin: 0 0 0.5rem;
  font-weight: 400; /* unbold hero title */
}
.hero p { color: var(--muted); margin: 0 0 1.25rem; }

/* Hero background image as HTML element */
.hero-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: calc(-1 * var(--bleed-height)); /* extend image below hero to avoid seam */
  z-index: 0;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% var(--hero-focus-y);
  display: block; /* remove inline-image bottom gap that looks like a border */
}

/* Ensure hero content sits above the bg */
.hero > .container {
  position: relative;
  z-index: 1;
  transform: translateY(var(--hero-content-shift));
}

/* Removed extra ::after layer; hero-bg now extends below hero to eliminate seam */

.btn {
  display: inline-block;
  padding: 0.65rem 1rem;
  border-radius: 8px;
  border: none;
  color: var(--brand-ink);
  background: linear-gradient(90deg, var(--theme-grad-start) 0%, var(--theme-grad-mid) 50%, var(--theme-grad-end) 100%);
  cursor: pointer;
  font-weight: 400; /* unbold button text */
  transition: color 0.2s ease;
}
.btn:hover {
  background: linear-gradient(90deg, var(--theme-grad-start) 0%, var(--theme-grad-mid) 50%, var(--theme-grad-end) 100%);
  color: #ffffff;
}
.btn:active { transform: translateY(1px); }

/* Sections */
.section { padding: 2.5rem 0; }
.section h2 {
  margin: 0 0 0.75rem;
  font-size: 1.5rem;
}
.section p { color: var(--muted); }

/* Centered section helper */
.section--center { text-align: center; }

/* Widen containers inside About page team section to allow more columns */
.about-team-wide .container {
  /* Cap width so max 5 cards (5×220px + 4 gaps) fit per row */
  max-width: calc(1100px + 4rem + 2 * clamp(12px, 4vw, 48px));
  /* Match header bar side gutters */
  padding-left: clamp(12px, 4vw, 48px);
  padding-right: clamp(12px, 4vw, 48px);
}

/* Make Our Focus title match hero size */
#our-focus h2 {
  font-size: clamp(1.8rem, 3vw + 1rem, 3rem);
  line-height: 1.15;
  font-weight: 400; /* unbold Our Focus title */
}
/* Widen focus sections globally for better image presentation */
#our-focus .container { max-width: 1200px; }

/* Our Focus content layout */
.focus-content {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr; /* make images wider site-wide */
  gap: 1.5rem;
  align-items: center;
  margin-top: 1rem;
  text-align: left; /* override section center for content */
}
.rotator { text-align: left; display: block; }
#why-voxel .rotator { transition: opacity 220ms ease; position: relative; }
#why-voxel .rotator.is-fading { opacity: 0.15; }
#why-voxel .focus-content { align-items: center; }
#why-voxel .focus-copy { display: block; padding: 0.5rem; }
/* Rotator progress dots */
.rotator-dots { display: flex; flex-direction: row; gap: 8px; margin-top: 8px; justify-content: center; align-items: center; }
/* Simple, perfect-circle dots */
.rotator-dot {
  width: 12px; height: 12px; border-radius: 50%;
  display: inline-block; cursor: pointer;
  background: #9aa0a6; border: none;
  transition: transform 160ms ease, opacity 160ms ease;
  opacity: 0.8;
}
.rotator-dot::after { content: none !important; }
.rotator-dot:hover { transform: scale(1.1); }
.rotator-dot.is-active { opacity: 1; transform: scale(1.15); background: linear-gradient(90deg, var(--theme-grad-start) 0%, var(--theme-grad-mid) 50%, var(--theme-grad-end) 100%); }
.rotator-dot:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
/* Rotator controls + progress */
.rotator-controls { display: flex; align-items: center; gap: 10px; margin-top: 8px; justify-content: center; }
.rotator-btn { 
  appearance: none; border: 1px solid #9aa0a6; background: #fff; color: var(--text);
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color 160ms ease, color 160ms ease, transform 120ms ease;
}
.rotator-btn:hover { background: #f3f3f3; }
.rotator-btn:active { transform: scale(0.96); }
.rotator-progress { position: relative; flex: 1 1 240px; height: 4px; background: #e6e6e6; border-radius: 999px; overflow: hidden; }
.rotator-progress span { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: linear-gradient(90deg, var(--theme-grad-start) 0%, var(--theme-grad-mid) 50%, var(--theme-grad-end) 100%); border-radius: inherit; }
/* (bubbles version) No internal scroll viewport needed */
/* Give space after rotator so heading can reach under fixed header */
/* Reduce space below Why Voxel so next heading sits closer */
#why-voxel { padding-bottom: 10vh; }
/* Ensure anchor aligns cleanly below fixed header when scrolled-into-view */
#why-voxel-anchor { scroll-margin-top: var(--header-space); margin-top: 10vh; }

/* Ensure in-page anchors land below fixed header */
#our-focus,
#our-team,
#project-overview,
#sponsorship-opportunities,
#in-kind,
#support-our-mission { scroll-margin-top: var(--header-space); }
.focus-content + .focus-content { margin-top: 2rem; }
.focus-subtitle {
  margin: 2rem 0 0.75rem;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 400;
}

/* Full-width centered image under focus rows */
.focus-wide {
  margin-top: 2rem;
  border-radius: 16px;
  overflow: hidden;
}
.focus-wide img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

/* Two-column text block under focus-wide */
.focus-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
  margin-top: 2rem;
  text-align: left;
}
.focus-two-col h3 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 400;
}
.focus-two-col p { margin: 0; }
.focus-copy h3 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 400; /* keep consistent unbolded style */
}
.focus-inline-image {
  margin-top: 1rem;
  border-radius: 16px;
  overflow: hidden;
}
.focus-inline-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.focus-illustration {
  overflow: visible; /* allow inner card to enlarge beyond container */
  border-radius: 16px;
  aspect-ratio: 16 / 9; /* wider default across site */
}
.focus-illustration img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* revert: fill square while preserving cover */
  object-position: 50% 50%; /* centered */
  display: block;
  border-radius: inherit;   /* ensure visible rounded corners */
  /* no transform: keep native 1:1 box unaffected */
}

/* Home: make the first two focus images square and equal size */
.home #our-focus .container > .focus-content:nth-of-type(1),
.home #our-focus .container > .focus-content:nth-of-type(2) {
  grid-template-columns: 1fr 1fr; /* equal width columns for matching image sizes */
}
.home #our-focus .container > .focus-content:nth-of-type(1) .focus-illustration,
.home #our-focus .container > .focus-content:nth-of-type(2) .focus-illustration {
  aspect-ratio: 1 / 1; /* enforce 1:1 square */
}

/* About: make the two top images square and equal width */
.about #our-focus .focus-content,
.about #why-voxel .focus-content {
  grid-template-columns: 1fr 1fr; /* equal width columns */
}
.about #our-focus .focus-illustration,
.about #why-voxel .focus-illustration {
  aspect-ratio: 1 / 1; /* enforce 1:1 square */
}

@media (max-width: 800px) {
  .focus-content { grid-template-columns: 1fr; }
  /* height inherits from aspect-ratio; no override needed */
  .focus-two-col { grid-template-columns: 1fr; }
  .hero > .container { transform: translateY(-6vh); }
}

/* Our Focus section overlay with rounded reveal over hero */
#our-focus {
  background: #ffffff; /* solid panel over hero */
  position: relative;
  z-index: 1; /* ensure it layers over the hero */
  border-top-left-radius: var(--reveal-radius);
  border-top-right-radius: var(--reveal-radius);
  overflow: hidden; /* ensure content respects rounding */
  margin-top: 0; /* do not overlap initial viewport */
}

/* Removed bleed overlay to avoid transparent/clear effect */

/* Grid */
.grid {
  display: grid;
  gap: 1rem;
  /* Fixed card width; number of columns auto-fits per screen size */
  grid-template-columns: repeat(auto-fit, minmax(220px, 220px));
  justify-content: center; /* center leftover space without stretching cards */
}

.card {
  border: none; /* remove border */
  background: #ffffff;
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); /* subtle tile shadow */
}
.card h3 { margin: 0 0 0.25rem; }
.card p { margin: 0; color: var(--muted); }
/* Team card image area with enforced 3:1 aspect ratio */
.card .card-image {
  width: 85%; /* make image a bit smaller while preserving ratio */
  aspect-ratio: 1 / 1; /* square 1:1 ratio */
  border-radius: 8px;
  overflow: hidden;
  margin: 0.25rem auto 0.5rem; /* center within card */
}
.card .card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  background: linear-gradient(90deg, var(--theme-grad-start) 0%, var(--theme-grad-mid) 50%, var(--theme-grad-end) 100%);
  margin-top: 2rem;
}
.site-footer .container {
  padding: 1rem;
  text-align: center;
}

/* Project Overview (feature cards) */
.features-grid {
  display: grid;
  /* Use 6 columns so we can center row 2 cards between row 1 gaps */
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}
/* Wide layout placement: 3 across, then 2 centered under the gaps */
.features-grid .feature-card:nth-child(1) { grid-column: 1 / span 2; }
.features-grid .feature-card:nth-child(2) { grid-column: 3 / span 2; }
.features-grid .feature-card:nth-child(3) { grid-column: 5 / span 2; }
.features-grid .feature-card:nth-child(4) { grid-column: 2 / span 2; }
.features-grid .feature-card:nth-child(5) { grid-column: 4 / span 2; }
@media (max-width: 900px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .features-grid .feature-card { grid-column: auto !important; }
}
@media (max-width: 600px) { .features-grid { grid-template-columns: 1fr; } }
.feature-card {
  /* reuses .card look; add subtle top accent */
  position: relative;
  padding-top: 1.25rem;
}
.feature-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--theme-grad-start) 0%, var(--theme-grad-mid) 50%, var(--theme-grad-end) 100%);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.feature-number {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center; justify-content: center;
  color: #ffffff;
  font-weight: 700;
  background: linear-gradient(90deg, var(--theme-grad-start) 0%, var(--theme-grad-mid) 50%, var(--theme-grad-end) 100%);
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
  margin-bottom: 0.5rem;
}
.feature-card h3 { margin: 0 0 0.25rem; font-size: 1.1rem; font-weight: 400; }
.feature-card p { margin: 0; color: var(--muted); }

/* Make Project Overview title match VOXEL SPONSORSHIP PROPOSAL */
#project-overview h2 {
  font-size: clamp(1.8rem, 3vw + 1rem, 3rem);
  line-height: 1.15;
  font-weight: 400;
}

/* (removed reveal-on-scroll animation) */

/* Sponsorship tiers */
.tiers-section h2 {
  font-size: clamp(1.8rem, 3vw + 1rem, 3rem);
  line-height: 1.15;
  font-weight: 400;
}
.tiers-grid {
  display: grid;
  /* Show all four cards on one line on wide screens */
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
  text-align: left; /* override section center */
}
@media (max-width: 1000px) { .tiers-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tiers-grid { grid-template-columns: 1fr; } }
.tier-card {
  position: relative;
  border-radius: 16px; /* more rounded corners */
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
  padding: 1.25rem;
  text-align: left; /* ensure contents are left-aligned */
  /* Gradient outline around the whole tile */
  border: 8px solid transparent; /* thicker outline */
  /* Use background-clip technique so rounded corners are respected */
  background: 
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(90deg, var(--theme-grad-start) 0%, var(--theme-grad-mid) 50%, var(--theme-grad-end) 100%) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  cursor: pointer; /* button-like */
  transition: transform 180ms ease, box-shadow 180ms ease;
  will-change: transform, box-shadow;
  transform-origin: center center;
  display: block; /* anchor behaves like block card */
  text-decoration: none; /* remove underline on link */
  color: inherit; /* use site colors */
}
/* Remove previous top-only accent bar in favor of full outline */
.tier-card::before { content: none; }
.tier-card:hover {
  transform: scale(1.03);
  box-shadow: 0 14px 34px rgba(0,0,0,0.14);
  z-index: 1;
}
.tier-card:active {
  transform: scale(0.995);
}
.tier-title {
  margin: 0.25rem 0 0.25rem;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
}
.tier-price { margin: 0 0 0.75rem; color: var(--muted); }
.tier-list { list-style: none; padding: 0; margin: 0; }
.tier-list li { padding: 10px 0; border-top: 1px solid rgba(0,0,0,0.08); }
.tier-list li:first-child { border-top: none; }
.tier-list .is-included { color: var(--text); }
.tier-list .is-excluded { color: #9aa0a6; opacity: 0.6; }
.tiers-note {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(0,0,0,0.04);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.95rem;
}
/* Slightly widen the container just for tiers */
.tiers-section .container { max-width: 1600px; }

/* In‑Kind Contributions */
.inkind-section h2 {
  font-size: clamp(1.8rem, 3vw + 1rem, 3rem);
  line-height: 1.15;
  font-weight: 400;
  text-align: center;
}
.inkind-section .container { max-width: 1400px; text-align: left; }
.inkind-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.25rem;
}
@media (max-width: 1100px) { .inkind-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .inkind-grid { grid-template-columns: 1fr; } }
.inkind-card {
  border-radius: 14px;
  padding: 1rem 1.25rem;
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
  border: 3px solid transparent;
  background: 
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(90deg, var(--theme-grad-start) 0%, var(--theme-grad-mid) 50%, var(--theme-grad-end) 100%) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.inkind-card h3 { margin: 0.25rem 0 0.5rem; font-size: 1.15rem; font-weight: 600; }
.inkind-list { list-style: none; margin: 0; padding: 0; }
.inkind-list li { position: relative; padding: 10px 0 10px 26px; border-top: 1px solid rgba(0,0,0,0.06); }
.inkind-list li:first-child { border-top: none; }
.inkind-list li::before {
  content: "";
  position: absolute;
  left: 4px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: linear-gradient(90deg, var(--theme-grad-start) 0%, var(--theme-grad-mid) 50%, var(--theme-grad-end) 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* Support Our Mission CTA */
.support-cta {
  padding: 80px 32px; /* taller section with a bit more side padding */
  /* Add left/right margins by constraining width and centering */
  width: calc(100% - 64px); /* 32px margin on both sides */
  margin: 24px auto 0;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(90deg, var(--theme-grad-start) 0%, var(--theme-grad-mid) 50%, var(--theme-grad-end) 100%);
  box-shadow: 0 16px 40px rgba(0,0,0,0.16);
}
.support-cta .container {
  max-width: 1200px;
  text-align: center;
}
.support-cta h2 {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: 1px;
  margin: 0 0 12px;
  color: #ffffff;
}
.support-cta p.lede {
  margin: 0 auto 28px;
  max-width: 900px;
  color: #ffffff;
}
.support-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0 auto 28px;
  max-width: 900px;
}
@media (max-width: 800px) { .support-stats { grid-template-columns: 1fr; } }
.support-stat { color: #ffffff; }
.support-stat strong { display: block; font-size: 1.75rem; }
.support-stat span { display: block; opacity: 0.95; }
.donate-btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  background: #ffffff;
  color: #2b2b2b;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.15);
  transition: transform 160ms ease, box-shadow 160ms ease, color 160ms ease, background-color 160ms ease;
}
.donate-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(0,0,0,0.22); }
.donate-btn:active { transform: translateY(0); box-shadow: 0 8px 16px rgba(0,0,0,0.18); }
.support-note { margin-top: 16px; color: #ffffff; opacity: 0.95; }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1rem; text-align: left; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card {
  border-radius: 14px;
  padding: 1rem 1.25rem;
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
  border: 3px solid transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(90deg, var(--theme-grad-start) 0%, var(--theme-grad-mid) 50%, var(--theme-grad-end) 100%) border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.contact-form .form-row { display: grid; gap: 6px; margin-bottom: 12px; }
.contact-form label { font-weight: 600; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.15);
  font: inherit;
}
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-color: #000; box-shadow: 0 0 0 2px rgba(0,0,0,0.06); }
.contact-form .form-actions { margin-top: 8px; }

/* Vehicles page */
.drone-titles { font-weight: 600; }

/* Page theme variants (drone pages) */
body.theme-gray {
  --theme-grad-start: #8EC5FC; /* light blue */
  --theme-grad-mid: #A0A7F6;   /* periwinkle */
  --theme-grad-end: #B19CD9;   /* soft purple */
}
body.theme-cobra {
  /* Cobra page: Sky Blue (left) -> Ocean Blue (right) */
  --theme-grad-start: #87CEEB; /* Sky Blue */
  --theme-grad-mid: #6FAAD1;   /* lighter midpoint blend */
  --theme-grad-end: #4A86C6;   /* even lighter Ocean Blue */
}
body.theme-pixy {
  --theme-grad-start: #84FAB0; /* mint */
  --theme-grad-mid: #8FD3F4;   /* aqua */
  --theme-grad-end: #74B9FF;   /* sky */
}
body.theme-ins {
  --theme-grad-start: #A18CD1; /* lavender */
  --theme-grad-mid: #FBC2EB;   /* blush */
  --theme-grad-end: #F48FB1;   /* rose */
}

/* Clickable vehicle image buttons with tier-like effect */
.focus-illustration .vehicle-card {
  display: block;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  border: none;           /* no outline around images */
  background: none;       /* remove gradient border effect */
  box-shadow: 0 8px 22px rgba(0,0,0,0.08); /* match tiers' base shadow */
  position: relative;     /* enable z-index on hover */
  transform-origin: center center;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.focus-illustration .vehicle-card:hover {
  /* match sponsorship tier enlarge behavior */
  transform: scale(1.03);
  box-shadow: 0 14px 34px rgba(0,0,0,0.14);
  z-index: 1;
}
.focus-illustration .vehicle-card:active { transform: scale(0.995); }
.focus-illustration .vehicle-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 180ms ease;
}
/* no inner image zoom; enlarge the whole card like tiers */

/* Technical Specifications (Cobra) */
.specs-section h2 {
  font-size: clamp(2rem, 4vw + 1rem, 3.5rem);
  line-height: 1.15;
  font-weight: 400;
  text-align: center; /* center the title */
}
.specs-section .container { max-width: 2100px; }
.specs-section { scroll-margin-top: var(--header-space); }
.specs-layout {
  display: grid;
  grid-template-columns: 1fr 1fr; /* widen left column to 50% */
  gap: 1.5rem;
  align-items: start;
  margin-top: 1rem;
}
@media (max-width: 900px) {
  .specs-layout { grid-template-columns: 1fr; }
  /* On small screens, stack left and right and reset explicit placement */
  .specs-grid, .specs-media { grid-column: 1; grid-row: auto; }
}
.specs-media {
  position: sticky;
  top: var(--header-space); /* stick below fixed header while scrolling */
  border-radius: 16px;
  overflow: hidden;
  border: none;           /* remove outline */
  background: none;       /* remove gradient border */
  box-shadow: none;       /* remove shadow */
  grid-column: 2;         /* ensure media sits in the right column */
  aspect-ratio: 1 / 1;    /* make right media a square */
  width: 100%;            /* fill its column so it matches tile width */
  justify-self: center;   /* align to same axis as left stack */
  margin: 0;              /* align top with first left tile */
}
.specs-media img { display:block; width:100%; height:100%; object-fit:cover; }

.specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* default multi-column */
  gap: 1rem;
  grid-column: 1;         /* ensure specs tiles sit in the left column */
  align-items: start;
}
/* Scrolling overview (top) uses centered single-column stack */
#specs .specs-grid {
  grid-template-columns: 1fr;
  justify-items: center;  /* center items on same vertical axis */
}
/* Ensure left and right columns share row 1 on wide screens */
@media (min-width: 901px) {
  .specs-media { grid-row: 1; }
  .specs-grid { grid-row: 1; }
}
/* Make specs tiles and the right media scale with screen size */
#specs .spec-image-tile,
#specs .spec-card,
#specs .specs-media {
  width: min(100%, clamp(var(--specs-tile-min), var(--specs-tile-ideal), var(--specs-tile-max)));
}
/* Default spec cards (used by Full Technical Specifications) */
.spec-card {
  border-radius: 14px;
  border: 3px solid transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(90deg, var(--theme-grad-start) 0%, var(--theme-grad-mid) 50%, var(--theme-grad-end) 100%) border-box;
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
  padding: 12px 14px;
  width: 100%;
}
.spec-card h3 { margin: 4px 0 6px; font-size: 1.2rem; font-weight: 600; }
.spec-value { margin: 0; color: var(--text); font-size: 1.1rem; }
.spec-list { margin: 0; padding: 0; list-style: none; }
.spec-list li { padding: 10px 0; border-top: 1px solid rgba(0,0,0,0.06); font-size: 1.05rem; }
.spec-list li:first-child { border-top: none; }
/* Scrolling overview spec cards (top section) */
#specs .spec-card {
  border: none;           /* remove outline */
  background: #ffffff;    /* plain tile background */
  box-shadow: none;       /* remove shadow */
  /* left-align text, center content vertically */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  aspect-ratio: 7/ 4;    /* slightly shorter height than square */
}
#specs .spec-card h3 { margin: 6px 0 8px; font-size: 2.6rem; font-weight: 400; }
#specs .spec-value { font-size: 1.4rem; }
#specs .spec-list li { font-size: 1.3rem; padding: 12px 0; }

/* Full Technical Specifications: enforce equal tile sizes */
#full-specs .specs-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-rows: var(--full-spec-card-h, 260px);
  align-items: stretch; /* stretch items to row height */
}
#full-specs .spec-card {
  height: 100%;
  overflow: auto; /* ensure content remains accessible if taller */
}

/* Interleaved 1:1 image tiles inside specs grid */
.spec-image-tile {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
  width: 100%;
  aspect-ratio: 1 / 1; /* mobile/default: square tile */
  align-self: start; /* avoid row stretching changing its height */
  max-width: none;        /* fill column width */
  margin: 0;              /* remove default figure margins for alignment */
}
.spec-image-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Ensure videos inside image tiles behave like images */
.spec-image-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Keep image tiles square across breakpoints; no stretching */