/* ============================================================
   LUNARIAN — section styles (Mission / Tech / Field / Team / Contact)
   Loaded after styles.css
   ============================================================ */

/* shared section intro reused from styles.css (.section, .section-head) */

/* ---------------- CINEMATIC FULL-BLEED BANDS ---------------- */
.band{ position:relative; height:74vh; min-height:520px; max-height:860px; overflow:hidden;
  background:var(--bg); display:flex; align-items:flex-end; }
.band .band-media{ position:absolute; inset:0; }
.band .band-media img, .band .band-media video{ width:100%; height:100%; object-fit:cover;
  filter:grayscale(var(--footage-gray)) contrast(1.05) brightness(0.82); }
.band .band-scrim{ position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(0deg, var(--bg) 1%, transparent 50%),
    linear-gradient(180deg, var(--bg) 0%, transparent 22%),
    radial-gradient(120% 100% at 30% 60%, transparent 45%, oklch(0 0 0 / 0.4) 100%); }
.band .band-cap{ position:relative; z-index:2; padding:0 44px 60px; max-width:1100px; width:100%; }
.band .band-cap .b-eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.24em;
  text-transform:uppercase; color:var(--accent); display:block; margin-bottom:16px; }
.band .band-cap h3{ font-family:var(--font-display); font-weight:var(--display-weight);
  text-transform:uppercase; letter-spacing:var(--display-tracking); line-height:0.98;
  font-size:clamp(28px,4.4vw,60px); max-width:20ch; }
.band .band-cap p{ font-family:var(--font-mono); font-size:13.5px; line-height:1.7; color:var(--fg-dim);
  max-width:54ch; margin-top:18px; }
.band .bcorner{ position:absolute; width:42px; height:42px; z-index:3; }
.band .bcorner::before,.band .bcorner::after{ content:''; position:absolute; background:var(--accent-dim); }
.band .bcorner::before{ width:100%; height:1px; } .band .bcorner::after{ height:100%; width:1px; }
.band .bcorner.tl{ top:24px; left:24px; } .band .bcorner.br{ bottom:24px; right:24px; transform:scale(-1,-1); }
.band .b-readout{ position:absolute; top:26px; right:30px; z-index:3; text-align:right;
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.16em; color:var(--muted); line-height:1.9; text-transform:uppercase; }
.band .b-readout b{ color:var(--fg-dim); font-weight:500; }

/* section with darkened background image */
/* bright band variant — no darkening / fade (image at full power) */
.band.band--bright .band-media img, .band.band--bright .band-media video{
  filter:grayscale(var(--footage-gray)) contrast(1.04) brightness(1); }
.band.band--bright .band-scrim{ background:none; }
.band.band--bright .band-cap .b-eyebrow{ text-shadow:0 1px 14px rgba(0,0,0,0.85); }
.band.band--bright .band-cap h3{ text-shadow:0 2px 22px rgba(0,0,0,0.8), 0 1px 4px rgba(0,0,0,0.6); }
.band.band--bright .band-cap p{ text-shadow:0 1px 12px rgba(0,0,0,0.9); }

/* image-backed section: heading overlaid on a full-power banner image (uncropped) */
/* content below is pulled up to overlap the lower image — no dead space */
.section.has-bg{ overflow:hidden; }
.sec-banner{ position:relative; margin:0 -44px -118px; overflow:hidden; }
.sec-banner img{ display:block; width:100%; height:auto;
  filter:grayscale(var(--footage-gray)) contrast(1.05) brightness(1); }
.section.has-bg > :not(.sec-banner){ position:relative; z-index:2; }
.sec-banner .banner-scrim{ position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(0deg, var(--bg) 1%, transparent 42%),
    linear-gradient(90deg, oklch(0.155 0.004 250 / 0.55) 0%, transparent 58%); }
.sec-banner .bcorner{ position:absolute; width:42px; height:42px; z-index:3; }
.sec-banner .bcorner::before,.sec-banner .bcorner::after{ content:''; position:absolute; background:var(--accent-dim); }
.sec-banner .bcorner::before{ width:100%; height:1px; } .sec-banner .bcorner::after{ height:100%; width:1px; }
.sec-banner .bcorner.tl{ top:24px; left:44px; } .sec-banner .bcorner.br{ bottom:24px; right:44px; transform:scale(-1,-1); }
.sec-banner .b-readout{ position:absolute; top:26px; right:48px; z-index:3; text-align:right;
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.16em; color:var(--muted); line-height:1.9; text-transform:uppercase; }
.sec-banner .b-readout b{ color:var(--fg-dim); font-weight:500; }
.sec-head-overlay{ position:absolute; left:0; bottom:0; z-index:3; padding:0 44px 150px; width:100%;
  border-bottom:none; margin:0; display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:18px; }

/* progressive re-entry: push content up further; drop the bracket that collided with the Phase 2 card */
#system .sec-banner{ margin-bottom:-250px; }
#system .sec-head-overlay{ padding-bottom:292px; }
#system .sec-banner .bcorner.br{ display:none; }
.sec-head-overlay .idx{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.2em; color:var(--accent); }
.sec-head-overlay h2{ font-family:var(--font-display); font-weight:var(--display-weight);
  letter-spacing:var(--display-tracking); text-transform:uppercase; font-size:clamp(30px,4.6vw,60px);
  line-height:0.96; margin-top:14px; text-shadow:0 2px 26px rgba(0,0,0,0.7); }
.sec-head-overlay .rhs{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.16em;
  color:var(--fg-dim); text-align:right; line-height:1.9; text-transform:uppercase; text-shadow:0 1px 10px rgba(0,0,0,0.85); }
.sec-body-intro{ font-family:var(--font-mono); font-size:14px; line-height:1.8; color:var(--fg-dim);
  max-width:680px; margin-bottom:44px; }
.sec-body-intro b{ color:var(--fg); font-weight:500; }

/* ---------------- MISSION ---------------- */
.mission-statement{
  font-family:var(--font-display); font-weight:var(--display-weight);
  letter-spacing:var(--display-tracking); text-transform:uppercase;
  font-size:clamp(26px,3.4vw,46px); line-height:1.08; max-width:1080px;
  margin-bottom:18px;
}
.mission-statement .dim{ color:var(--faint); }
.mission-statement .amber{ color:var(--accent); }
.mission-sub{
  font-family:var(--font-mono); font-size:14px; line-height:1.8; color:var(--fg-dim);
  max-width:680px; margin-bottom:64px;
}
.mission-sub b{ color:var(--fg); font-weight:500; }

.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pillar{ position:relative; border:1px solid var(--line); padding:30px 28px 34px; background:var(--bg-1); }
.pillar .pn{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.2em; color:var(--accent); margin-bottom:42px; display:block; }
.pillar h3{ font-family:var(--font-display); font-weight:var(--display-weight); text-transform:uppercase;
  font-size:24px; line-height:1.05; margin-bottom:12px; }
.pillar p{ font-family:var(--font-mono); font-size:12.5px; line-height:1.7; color:var(--fg-dim); }

/* ---------------- TECHNOLOGY ---------------- */
.tech-grid{ display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.tech-cell{ position:relative; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:40px 38px 46px; transition:background 0.4s var(--ease); }
.tech-cell:hover{ background:var(--bg-1); }
.tech-cell .tnum{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.2em; color:var(--muted); }
.tech-cell h3{ font-family:var(--font-display); font-weight:var(--display-weight); text-transform:uppercase;
  font-size:23px; line-height:1.08; margin:14px 0 14px; max-width:18ch; }
.tech-cell p{ font-family:var(--font-mono); font-size:13px; line-height:1.75; color:var(--fg-dim); max-width:46ch; }
.tech-cell .patent{ position:absolute; top:40px; right:38px; font-family:var(--font-mono);
  font-size:9.5px; letter-spacing:0.16em; color:var(--accent); border:1px solid var(--accent-dim); padding:4px 8px; }

/* ---------------- FIELD ---------------- */
.field-wrap{ display:grid; grid-template-columns:1.15fr 1fr; gap:0; border:1px solid var(--line); }
.field-media{ position:relative; border-right:1px solid var(--line); min-height:440px; }
.field-media image-slot{ display:block; width:100%; height:100%; min-height:440px; }
.field-media .field-video{ display:block; width:100%; height:100%; min-height:440px; object-fit:cover;
  filter:grayscale(var(--footage-gray)) contrast(1.04) brightness(0.95); background:var(--bg-2); }
.field-media .media-tag{ position:absolute; top:16px; left:16px; z-index:2; font-family:var(--font-mono);
  font-size:9.5px; letter-spacing:0.16em; color:var(--fg-dim); background:oklch(0.155 0.004 250 / 0.8);
  border:1px solid var(--line); padding:6px 10px; text-transform:uppercase; }
.field-media .mcorner{ position:absolute; width:18px; height:18px; z-index:2; }
.field-media .mcorner::before,.field-media .mcorner::after{ content:''; position:absolute; background:var(--accent); }
.field-media .mcorner::before{ width:100%; height:1px; } .field-media .mcorner::after{ height:100%; width:1px; }
.field-media .mcorner.tl{ top:10px; left:10px; } .field-media .mcorner.br{ bottom:10px; right:10px; transform:scale(-1,-1); }

.field-body{ padding:40px 40px 36px; display:flex; flex-direction:column; }
.field-body .stride-tag{ display:inline-flex; align-self:flex-start; gap:8px; align-items:center;
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.18em; color:var(--accent);
  border:1px solid var(--accent-dim); padding:6px 11px; margin-bottom:24px; text-transform:uppercase; }
.field-body p{ font-family:var(--font-mono); font-size:13.5px; line-height:1.8; color:var(--fg-dim); margin-bottom:30px; }
.field-body p b{ color:var(--fg); font-weight:500; }
.field-specs{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); margin-top:auto; border:1px solid var(--line); }
.field-specs .spec{ background:var(--bg); padding:16px 18px; }
.field-specs .spec .k{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.16em; color:var(--muted); text-transform:uppercase; }
.field-specs .spec .val{ font-family:var(--font-mono); font-size:14px; color:var(--fg); margin-top:5px; }

/* ---------------- TEAM ---------------- */
.team-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.member{ position:relative; }
.member .photo{ position:relative; aspect-ratio:1/1; overflow:hidden; border:1px solid var(--line);
  background:var(--bg-2); }
.member .photo img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.04) brightness(0.92);
  transition:filter 0.5s var(--ease), transform 0.7s var(--ease); }
.member:hover .photo img{ filter:grayscale(0.15) contrast(1) brightness(1); transform:scale(1.03); }
.member .photo .pc{ position:absolute; width:14px; height:14px; z-index:2; }
.member .photo .pc::before,.member .photo .pc::after{ content:''; position:absolute; background:var(--accent); }
.member .photo .pc::before{ width:100%; height:1px; } .member .photo .pc::after{ height:100%; width:1px; }
.member .photo .pc.tl{ top:9px; left:9px; } .member .photo .pc.br{ bottom:9px; right:9px; transform:scale(-1,-1); }
.member .photo .ident{ position:absolute; bottom:10px; left:10px; z-index:2; font-family:var(--font-mono);
  font-size:9px; letter-spacing:0.14em; color:var(--fg-dim); background:oklch(0.155 0.004 250 / 0.7); padding:3px 7px; }
.member .name{ font-family:var(--font-display); font-weight:var(--display-weight); text-transform:uppercase;
  font-size:18px; margin-top:16px; }
.member .role{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.14em; color:var(--accent);
  text-transform:uppercase; margin-top:6px; }
.member .bio{ font-family:var(--font-mono); font-size:11.5px; line-height:1.65; color:var(--muted); margin-top:12px; }
.member .edu{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.04em; color:var(--faint); margin-top:10px; }

/* ---------------- CONTACT / FOOTER ---------------- */
.contact{ position:relative; z-index:2; padding:90px 42px 0; background:var(--bg); text-align:center; overflow:hidden; }
.contact .contact-bg{ position:absolute; inset:0; z-index:0; }
.contact .contact-bg img{ width:100%; height:100%; object-fit:cover;
  filter:grayscale(var(--footage-gray)) contrast(1.04) brightness(1); opacity:1; }
.contact .contact-bg::after{ content:''; position:absolute; inset:0;
  background:radial-gradient(110% 95% at 50% 38%, oklch(0.155 0.004 250 / 0.2), oklch(0.155 0.004 250 / 0.78) 88%),
             linear-gradient(0deg, var(--bg) 2%, transparent 40%); }
.contact > *{ position:relative; z-index:1; }
.contact .eyebrow{ display:block; margin-bottom:26px; }
.contact h2{ font-family:var(--font-display); font-weight:var(--display-weight); text-transform:uppercase;
  letter-spacing:var(--display-tracking); font-size:clamp(34px,6vw,80px); line-height:0.94; margin-bottom:26px;
  text-shadow:0 2px 30px rgba(0,0,0,0.7); }
.contact p{ font-family:var(--font-mono); font-size:14px; line-height:1.8; color:var(--fg-dim);
  max-width:560px; margin:0 auto 40px; text-shadow:0 1px 16px rgba(0,0,0,0.85); }
.contact .eyebrow{ text-shadow:0 1px 14px rgba(0,0,0,0.85); }
.contact .cta-row{ justify-content:center; }

.footer{ position:relative; z-index:2; background:var(--bg); margin-top:80px;
  border-top:1px solid var(--line); padding:40px 42px 56px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px; }
.footer .f-brand{ display:flex; align-items:center; gap:13px; }
.footer .f-brand img.mark-img{ height:26px; }
.footer .f-meta{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.14em; color:var(--muted);
  line-height:1.8; text-transform:uppercase; }
.footer .f-links{ display:flex; gap:26px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; }
.footer .f-links a{ color:var(--fg-dim); text-decoration:none; transition:color 0.25s; }
.footer .f-links a:hover{ color:var(--accent); }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 920px){
  .pillars{ grid-template-columns:1fr; }
  .tech-grid{ grid-template-columns:1fr; }
  .field-wrap{ grid-template-columns:1fr; }
  .field-media{ border-right:none; border-bottom:1px solid var(--line); }
  .team-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
  .contact, .footer{ padding-left:20px; padding-right:20px; }
  .team-grid{ grid-template-columns:1fr; }
  .field-specs{ grid-template-columns:1fr; }

  /* banners: crop to hold vertical real estate, but stop content overlapping the heading */
  .sec-banner img{ height:54vh; min-height:360px; max-height:520px; object-fit:cover; object-position:center; }
  .sec-banner{ margin:0 -20px 22px; }
  .sec-head-overlay{ padding:0 20px 30px; }
  #system .sec-banner{ margin:0 -20px 22px; }
  #system .sec-head-overlay{ padding:0 20px 30px; }
  /* hide the L-shaped corner brackets on the banner images */
  .sec-banner .bcorner{ display:none; }

  /* Mojave video: show the whole frame, just shrunk down */
  .field-media{ min-height:0; }
  .field-media .field-video{ min-height:0; height:auto; object-fit:contain; background:var(--bg); }

  /* fade the bright band image so the heading reads cleanly */
  .band.band--bright .band-media img{ filter:grayscale(1) brightness(0.42); }
  .band.band--bright .band-scrim{ display:block;
    background:
      linear-gradient(0deg, var(--bg) 4%, transparent 62%),
      linear-gradient(180deg, var(--bg) 0%, transparent 30%); }
}