/* =========================================================
   FLIGHTWATCH FRONTEND V2 (Clean, canonical — no patches)
   - Section API: .section--twocol, .section--full, .split__text, .split__art
   - Two-column uses CSS Grid (single source of truth)
   - Modal styles consolidated; inquiry modal scoped
   ========================================================= */

/* 0) TOKENS for Single Source of Truth in CSS (SSOT) */
:root{
  color-scheme: dark;                           /* Hints UA for dark-themed form controls */

  /* Header stack */
  --logo-top-gap: 18px;                         /* Used in #top { padding-top: var(--logo-top-gap) } */
  --seam: 98px;                                 
  --logo-block: 88px;                           /* Same calc as above; represents logo block height */
  --after-seam-gap: 72px;                       /* Same calc as above; extra gap below the “seam” line */
  --tp-nudge: 1px;                              /* Used in .top-toothpick { top: calc(var(--seam) + var(--tp-nudge)) } */
  --content-pad: clamp(20px, 8vw, 80px);        /* Used in .content { padding-inline: var(--content-pad) } */
  --toothpick-gap-bottom: 65px;                 /* Toothpick → content gap (below the top toothpick line) */
  
  /* Brand colors */
  --bg: #020308;                                /* Used in body background, .modal__dialog { background: var(--bg) } */
  --text: #a8a8a8;                              /* Used in body { color: var(--text) }, many text rules, modal text */
  --text-strong: #7ec8e3;                       /* Used in links, .site-footer and accent text */
  --h1: #958360;                                /* Used in h1 { color: var(--h1) } */
  --h2: var(--gold);                                /* Used in h2, focus rings (.thumbnail:focus-visible), pills, etc. */
  --h3: #bea986;                                /* Used in h3 { color: var(--h3) } */
  --brand: #f97800;                             /* Used in .brand text, pills, borders (#recent-news, etc.), .cta-button bg */
  --success: #5DDF3F;                           /* Used in focus outlines (e.g., abbr focus-visible), skip-link outline */
  --gold: #F7D644;                              /* was #FDD832 or similar */
  /* derived glow for hover effects */
  --gold-glow-33: rgba(247, 214, 68, .33); /* matches var(--gold) #F7D644 @ 33% */
  /* Font Weight SSOT for some headers*/
  --fw-light: 300;
  --fw-regular: 400;
  /* Split layout clamp sizes */
  --art-min: 260px;                             /* Used in .section--twocol .split__art { inline-size: clamp(...) } */
  --art-ideal: 32vw;                            /* Used in .section--twocol .split__art { inline-size: clamp(...) } */
  --art-max: 420px;                             /* Used in .section--twocol .split__art { inline-size: clamp(...) } */

  /* Breakpoint note: CSS vars cannot be used in @media. Keep literal 820px below. */
  --twocol-break: 820px;                        /* doc-only; not read by @media */

  /* Modal spacing */
  --modal-pad: 24px;                            /* Used in .modal { padding-top }, .modal__dialog { padding } */
  --modal-pad-inline: 16px;                     /* Used in .modal { padding-inline } */
  --modal-safe-bottom: 72px;                    /* Used in .modal { padding-bottom }, .modal__dialog bottom padding calc */

  /* Thumb / lightbox spacing */
  --thumb-top-gap: 50px;                        /* Used in .thumb-figure { margin-top: var(--thumb-top-gap) } */

  /* single source of truth for small vertical rhythm (used mostly on 'click to expand') */
  --flow-space: 6px; /* tweak here in the future */
}

/* 1) BASE + BACKGROUND (seam-proof) */
html{
  height:100%;
  background-color:#020308;            /* belt */
  color-scheme: dark;
  overflow-x: clip; /* ADD */
}
body{
  min-height:100%;
  margin:0;
  color:var(--text);
  font-family: Arial, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, sans-serif;
  line-height:1.6;

  background-color:#020308; /* base navy */
  background-image:
    linear-gradient(to bottom, rgba(2,3,8,0) 70%, #020308 100%),
    url("images/BGgradient.webp");
  background-repeat: no-repeat, repeat-x;
  background-position: top center, top center;
  background-size: 100% 820px, auto; /* adjust 420px if needed */
  overflow-x: clip; /* ADD */
}

h1 { color: var(--h1); font-size:2.25rem; line-height:1.1; margin:0 0 12px; }
h2 { color: var(--h2); font-size:1.5rem;  margin:16px 0 8px; }
h3 { color: var(--h3); font-size:1.1rem;  margin:12px 0 8px; }
p, li { color: var(--text); }
a { color: var(--text-strong); text-decoration:none; }
a:hover { text-decoration:underline; }
/* if a link wraps an ABBR, don't add a second underline */
a:has(abbr){ text-decoration:none; }
a:hover:has(abbr){ text-decoration:none; }
.brand { color: var(--brand); }
.brand:link, .brand:visited { color: var(--brand); }
.fw-light{ font-weight: var(--fw-light); }

/* === Inline-style removals: scoped replacements (index) === */
/* tiny helpers to finish de-inlining */
.text-gold   { color: var(--gold); }        /* gold */
.text-strong { color: var(--text-strong);}  /* brand blue text for non-<a> */
.tc          { text-align:center; }         /* center text */
.indent-1    { margin-left:1.5em; }         /* paragraph indent */
.italic      { font-style:italic; }
.block       { display:block; }

/* Executive Brief (summary line) */
#c2-imperative summary strong { color: var(--success); }
#c2-imperative summary span.summary-sub { font-size: .92em; color: #A8A8A8; }
#c2-imperative summary span.summary-cta { font-size: .80em; color: #A8A8A8; }

/* Headlines we intentionally want green instead of the default gold */
#history-kites h2,
#aerospace-market h2,
#frontier h2,
#strategy-summary h2,
#space-commerce-top h2,
#gov-space-programs h2,
#platform h2,
#valuation h3 { color: var(--success); }

/* Small utility for the pale grey “fine print” blocks you’re already using */
.fine-print { color:#A8A8A8; font-size:.9em; }

/* Valuation table header color accents */
.market-valuation-table th:nth-child(1),
.market-valuation-table td:nth-child(1) { color:#f97800; }          /* brand orange */
.market-valuation-table th:nth-child(2),
.market-valuation-table td:nth-child(2) { color: var(--gold); }     /* gold */
.market-valuation-table th:nth-child(3),
.market-valuation-table td:nth-child(3) { color:#f97800; }
.market-valuation-table th:nth-child(4),
.market-valuation-table td:nth-child(4) { color: var(--gold); }     /* gold */

/* Occasional green emphasis lines used in copy */
.text-success { color: var(--success); }

/* minimal, reusable utilities */
.mt { margin-top: var(--flow-space); }
.mb { margin-bottom: var(--flow-space); }
.my { margin-top: var(--flow-space); margin-bottom: var(--flow-space); }

/* Margins that were inline on a few elements */
.mtb-6 { margin: 6px 0; }
.mt-6 { margin-top: 6px; }
.mb-6 { margin-bottom: 6px; }
.mt-8 { margin-top: 8px; }
.mb-8 { margin-bottom: 8px; }
.mt-10 { margin-top: 10px; }
.mb-10 { margin-bottom: 10px; }
.mt-16 { margin-top: 16px; }

/* Highlight-sale (already in HTML as a class) */
.highlight-sale{
  display:block;
  font-size:0.72em;
  line-height:1.15;
  font-weight: var(--fw-light);
  color: var(--success);
}
.highlight-link:link,
.highlight-link:visited { color: var(--text-strong); } /* = #7ec8e3 */

/* 2) HERO SPACING CONTRACT — SSOT (collapse-proof, page-agnostic) */
#top > #main-content{
  /* Use padding so first-child margins can’t alter the seam offset */
  padding-top: calc(var(--seam) - var(--logo-block) + var(--after-seam-gap));
  margin-top: 0; /* guard */
}

/* Header stack */
#top {
  position: relative;
  padding-top: var(--logo-top-gap); /* NEW */
}
/* Uniform space below the top toothpick across pages */
#main-content{
  padding-top: var(--toothpick-gap-bottom);
}

.container { text-align:center; padding:0; }
.container > a[aria-label="Go to FlightWatch Home Page"]{ display:block; }
.page-index .container > a[aria-label="Go to FlightWatch Home Page"]{
  pointer-events:none; cursor:default;
}

.logo{ display:block; margin:0 auto 15px; max-width:100%; height:auto; }

/* Toothpick line */
.top-toothpick{
  position: absolute;
  top: calc(var(--seam) + var(--tp-nudge));
  left: 50%;
  transform: translateX(-50%);
  width: min(94vw, 943px);
  height: auto;
  margin: 0;
  z-index: 2;
  pointer-events: none;
}

.summary-toggle{ cursor:pointer; }
details .when-open{ display:none; }
details[open] .when-open{ display:inline; }
details[open] .when-closed{ display:none; }

/* Open-state color for all details/summary */
details > summary,
details > .summary-toggle { color: inherit; }

details[open] > summary,
details[open] > .summary-toggle {
  color: var(--success);
  font-weight: 600;
}

/* Executive Brief target/open emphasis */
#c2-imperative details[open] > summary,
#c2-imperative:target details > summary {
  color: var(--success);
  font-weight: 600;
}

/* give sections a safe scroll offset under the logo/toothpick */
section[id] { scroll-margin-top: calc(var(--logo-top-gap) + var(--toothpick-gap-bottom)); }

/* compact header notice */
.page-notice{
  margin:6px 0 0;
  padding:6px 10px;
  font-size:.9em;
  color:#a8a8a8;
  border:1px solid rgba(126,200,227,.18);
  background:rgba(126,200,227,.05);
  border-radius:4px;
}

#recent-news ul.custom-bullets li time{ display:inline-block; min-width:7.5ch; }

/* Minimal styling, add to styles.css */
/* Recent News callout — brand orange */
/* A) Orange outline + subtle blue wash (recommended) */
#recent-news{
  border:1px solid var(--brand);          /* orange outline */
  border-radius:8px;
  background: rgba(126,200,227,.06);      /* subtle blue wash */
  padding:12px 16px;
  margin-block:16px;
}

/* optional, if you want a faint wash later: */
/* #recent-news{ background: rgba(249,120,0,.06); } */

.recent-news li{
  margin:0 0 10px; line-height:1.5;
  padding-left:0;
}
.recent-news time{
  display:inline-block; min-width:8.2ch; /* YYYY-MM-DD */
  font-variant-numeric: tabular-nums; color:#A8A8A8;
  margin-right:.5ch;
}
.recent-news-note{ color:#A8A8A8; font-size:.9em; margin-top:.5rem; }

/* Asteroid mining block – mirrors #recent-news A-variant */
#asteroid-mining {
  border:1px solid var(--brand);
  border-radius:8px;
  background: rgba(126,200,227,.06);
  padding:12px 16px;
  margin-block:16px;
}
#asteroid-mining h2{ margin:0 0 8px; color: var(--brand); }
#asteroid-mining time{ font-variant-numeric: tabular-nums; color:#A8A8A8; }
#asteroid-mining .custom-bullets li{ margin-bottom:8px; }

.at-a-glance .content-columns{
  display:grid; gap:14px;
  grid-template-columns: 1fr;
}
@media (min-width: 820px){
  .at-a-glance .content-columns{ grid-template-columns: 1fr 1fr; }
}

/* Soft radial glow to blend decorative images into page navy */
.glow-wrap{
  --glow-inner:#0e2f6f;   /* adjust toward the image's lighter blue */
  --glow-outer:#010103;   /* site navy fallback */
  position: relative;
  display: inline-block;
  padding: 8px;
  border-radius: 16px;
  background:
    radial-gradient(120% 120% at 50% 45%,
      var(--glow-inner) 0%,
      rgba(14,47,111,0.6) 45%,
      rgba(1,1,3,0.6) 70%,
      var(--glow-outer) 100%);
}
.glow-wrap::before{
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: inherit;
  background: radial-gradient(closest-side, var(--glow-inner), transparent 70%);
  filter: blur(22px);
  opacity: 0.65;
  pointer-events: none;
}
.glow-wrap img{
  display: block;
  border-radius: 12px;
}

/* Soft outward fade; no inner fill */
.glow-outline{
  display:block;
  border-radius:12px;                 /* helps avoid boxy corners */
  filter:
    drop-shadow(0 0 6px  color-mix(in oklab, var(--glow) 60%, transparent))
    drop-shadow(0 0 14px color-mix(in oklab, var(--glow) 40%, transparent))
    drop-shadow(0 0 28px color-mix(in oklab, var(--glow) 24%, transparent))
    drop-shadow(0 0 46px color-mix(in oklab, var(--glow) 12%, transparent));
  /* Fallback if color-mix isn't supported */
  --_g: rgba(14,47,111,0.5);
  -webkit-filter:
    drop-shadow(0 0 6px  var(--_g))
    drop-shadow(0 0 14px rgba(14,47,111,0.35))
    drop-shadow(0 0 28px rgba(14,47,111,0.20))
    drop-shadow(0 0 46px rgba(14,47,111,0.10));
}

/* 3) WIDTH LIMITER */
.content { 
  max-width:1100px;
  margin:0 auto;
  padding-inline: var(--content-pad);
  text-align:left;
  container-type: inline-size;   /* turn .content into a size container */
}

/* 4) SECTION API */
.section { margin-block: 40px; }
.section--full{ --_role: full; } /* marker only */

/* Ensure the first real content section never adds extra top gap */
#main-content > .section:first-of-type { margin-top: 0; }

/* Two-column sections (text left, art right) — GRID (canonical) */
.section--twocol > .content > .split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:24px;
  align-items:start;
}
.section--twocol .split__text{
  min-inline-size: 260px;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.section--twocol .split__art{
  text-align:center; 
  align-self:flex-start;
  inline-size: clamp(var(--art-min), var(--art-ideal), var(--art-max));
}
.section--twocol .split__art img{
  max-width:100%; height:auto; display:block; margin:0 auto;
}
/* prevent child overflow in grid */
.section--twocol .split__text,
.section--twocol .split__art{ min-width:0; }

/* Stack on small screens */
/* 1) Baseline: works everywhere */
@media (max-width: 820px){
  .section--twocol > .content > .split{ grid-template-columns: 1fr; }
  .section--twocol .split__text{ min-inline-size: 0; }
  .section--twocol .split__art{ max-width: min(92vw, 540px); margin-inline: auto; }
}

/* 2) Enable container queries for modern browsers 
.content{ container-type: inline-size; }   harmless where unsupported */

/* 3) Modern override: preferred when supported */
@container (max-width: 820px){
  .section--twocol > .content > .split{ grid-template-columns: 1fr; }
  .section--twocol .split__text{ min-inline-size: 0; }
  .section--twocol .split__art{ max-width: min(92vw, 540px); margin-inline: auto; }
}

/* 5) Thumb / Lightbox affordances */

.thumbnail {
  cursor: zoom-in;
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
  box-shadow:
    0 0 14px rgba(255, 255, 255, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.10);
  transition: 
    transform 160ms cubic-bezier(.2,.8,.2,1),
    box-shadow 160ms cubic-bezier(.2,.8,.2,1),
    filter 160ms cubic-bezier(.2,.8,.2,1);
}
.thumbnail:hover {
  filter: brightness(1.03);
  transform: scale(1.01);
  box-shadow: 0 0 20px var(--gold-glow-33);
}
.thumbnail:focus-visible{ outline:2px solid var(--h2); outline-offset:3px; }
.thumbnail:focus{ outline: none; }

.thumb-figure{ 
  display:inline-flex; 
  flex-direction:column; 
  align-items:center; 
  margin:0; 
  margin-top: var(--thumb-top-gap); 
}
.thumb-hint{ 
  margin-top:6px; 
  font-size:.95rem; 
  color:var(--text); 
  font-style:italic; 
  text-align:center;
}
.thumb-hint strong{ 
  display:block; 
  margin-bottom:6px;   /* space under Click to Expand */
}
.thumb-hint .news-chip-inline{
  display:inline-block;
  margin-top:0;
  margin-bottom:8px;   /* space below the pill */
}
.news-chip-inline:link,
.news-chip-inline:visited { color: currentColor; } /* inherits from parent text color */

.text-current{ color: currentColor; }

/* Decorative flow toothpicks */
.toothpick{
  display:block;
  max-width:100%;
  height:auto;
  margin:40px auto;
}

/* Skip links */
/* replace the current .skip-link rules */
.skip-link{
  position: fixed;      /* take it out of the flow AND out of scroll geometry */
  left: 8px;
  top: 8px;
  transform: translateY(-200%);  /* hidden by default without affecting layout width */
  transition: transform .2s ease;
  z-index: 1000;
}

.skip-link:focus{
  transform: translateY(0);      /* reveal on keyboard focus */
  outline: 2px solid var(--success);    /* keep your brand focus ring if desired */
}

/* ==============================
   Lists
   ============================== */
.custom-bullets{
  list-style:none;
  margin:0 0 20px 0;
  padding:0;
}
.custom-bullets li{
  margin:0 0 10px 0;
  padding-left:24px;
  line-height:1.45;
  background:url("images/bulletOrange.gif") no-repeat 0 0.42em;
  background-size:10px 10px;
  list-style-type:none;
}
.custom-bullets li.bullet-cta{
  background:none;
  padding-left:0;
  margin-top:6px;
}

ul.list-italic-gold{
  margin-left:1.5em;
  list-style:disc outside;
  color:var(--h2);
  font-style:italic;
}
ul.list-italic-gold li{
  color:var(--h2);
  font-style:italic;
  margin-bottom:.4em;
}
ul.list-italic-gold li::marker{
  color:var(--h2);
}

/* Boxed list (brand blue) — refined spacing */
.boxed-ul{
  border:1px solid #7ec8e3;
  border-radius:8px;
  padding:12px 18px 12px 28px; /* extra left room */
  margin:10px 0 18px;
  list-style-position:outside;
}
.boxed-ul li{
  margin:8px 0;
}

.sr-only{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; clip-path:inset(50%) !important;
  white-space:nowrap !important; border:0 !important;
}

/* TLD sales list */
.tld-sale-list{
  margin: 8px 0 16px 1.75em;
  padding: 0;
  list-style: decimal outside;
  font-variant-numeric: tabular-nums;
}
.tld-sale-list li{
  margin: 0 0 6px;
  line-height: 1.5;
}
.tld-sale-list li::marker{
  color: var(--h2);
  font-weight: 700;
}
@media (max-width: 480px){
  .tld-sale-list{ margin-left: 1.35em; }
}

/* ==============================
   ABBR (canonical, mobile-friendly)
   – Dotted cue, link-safe, JS tooltip support
   – Replace prior abbr rules with this block
   ============================== */

/* Base: fallback first (older engines) */
abbr[title],
abbr[data-abbr],
.abbr-ix abbr{
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  cursor: help;
}

/* Prefer modern dotted underline (no extra border) */
@supports (text-underline-offset: .15em){
  abbr[title],
  abbr[data-abbr],
  .abbr-ix abbr{
    border-bottom: 0;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: currentColor;
    text-underline-offset: .20em;
    text-decoration-thickness: .09em;
    text-decoration-skip-ink: auto;
    cursor: help;
  }
}

/* Keep the dotted cue visible when ABBR is inside a link:
   If a link contains an ABBR, remove the link's underline/border so only the ABBR shows dots. */
a:has(abbr){
  text-decoration: none !important;         /* kill link underlines */
  border-bottom: none !important;           /* kill solid borders like .highlight-link */
}

/* Subtle feedback on hover/focus (desktop & a11y) */
abbr[title]:hover,
abbr[title]:focus,
abbr[data-abbr]:hover,
abbr[data-abbr]:focus{
  outline: 2px solid transparent;          /* don’t shift layout */
  text-decoration-color: var(--h2);        /* gold accent */
  border-bottom-color: var(--h2);          /* fallback tint */
}

/* Keyboard focus ring when focusing the abbr */
abbr[title]:focus-visible,
abbr[data-abbr]:focus-visible{
  outline: 2px solid var(--success);
  outline-offset: 2px;
}

/* JS tooltip wrapper (tap/click target) */
.abbr-ix{
  position: relative;
  display: inline-block;
  z-index: 5; /* lift abbr + tooltip above headings */
}
.abbr-ix:focus{
  outline: 2px solid var(--success);
  outline-offset: 2px;
}
/* When open, tint the underline gold (recognizable “active” state) */
.abbr-ix[aria-expanded="true"] abbr{
  text-decoration-color: var(--h2);
  border-bottom-color: var(--h2); /* fallback */
}

/* Dim all ABBRs while a tooltip is open */
body.abbr-dimming abbr[title],
body.abbr-dimming abbr[data-abbr],
body.abbr-dimming .abbr-ix abbr{
  opacity: 0.35; /* adjust 0.25–0.5 to taste */
}

/* Keep the currently open ABBR at full strength */
body.abbr-dimming .abbr-ix[aria-expanded="true"] abbr{
  opacity: 1;
}

/* Tooltip bubble (inserted by JS) */
.abbr-tip{
  position: absolute;
  left: 0;                 /* align with abbr start */
  white-space: normal;     /* allow wrapping within max-width */
  pointer-events: none;    /* prevents weird hover states */
  top: calc(100% + 0.25em);  /* always just below the abbr */
  z-index: 30;               /* above surrounding text */
  display: none;
  max-width: 28ch;
  padding: .45em .55em;
  border-radius: .5em;
  border: 1px solid var(--gold);
  background: rgba(2, 3, 8, 0.85);
  color: #fff;
  font-size: .85em;
  line-height: 1.25;
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
  transform: translateY(2px);
}

/* Open / flip states (controlled by JS) */
.abbr-ix[aria-expanded="true"] .abbr-tip{ display: block; }
.abbr-ix.tip-top .abbr-tip{ top: auto; bottom: 1.6em; }

/* ==============================
   CTA
   ============================== */
.home-link-btn{
  display:inline-block;
  padding:6px 12px;
  border-radius:4px;
  border:1px solid rgba(126,200,227,.6);
  color:#7ec8e3;
  text-decoration:none;
}
.home-link-btn:hover{
  border-color:#7ec8e3;
  background:rgba(126,200,227,.06);
}
.home-link-btn:link,
.home-link-btn:visited { color: inherit; }

.home-link-btn--tight{
  padding-block:2px;
  padding-inline:10px;
  line-height:1.1;
  border-radius:6px;
}

.hr-blue{
  display:block;
  width:min(94vw, 943px);
  height:1px;
  margin:40px auto;
  background: url("images/blueToothpick.jpg") center / contain no-repeat;
}

.cta-section{
  margin-top:20px;
  padding:24px;
  text-align:center;
  border:1px solid rgba(126,200,227,.2);
  background:rgba(126,200,227,.05);
  border-radius:6px;
}
.cta-section h2{
  color: inherit;   /* allows #cta-title.text-gold to show your gold */
  margin:0 0 10px;
}
/* ensure gold wins when explicitly requested */
.cta-section h2.text-gold { color: var(--gold); }
.cta-section p{
  margin:0 0 16px;
}

.cta-button{
  background:#f97800;
  color:#010103;
  padding:12px 24px;
  border:0;
  border-radius:4px;
  font-weight:700;
  cursor:pointer;
}
.cta-button:hover{
  background:#e26900;
  color:#fff;
}

.highlight-link{
  color: var(--text-strong);
  border-bottom:1px solid;
  text-decoration:none;
}
/* when a highlight link contains ABBR, let the ABBR show dots, not the link */
.highlight-link:has(abbr){ border-bottom:0; }

/* Fallback for engines without :has() */
.highlight-link abbr{
  border-bottom: 1px dotted currentColor;
  text-decoration: underline dotted currentColor;
  text-underline-offset: .20em;
  text-decoration-thickness: .08em;
}

/* Footer */
.site-footer{
  text-align:center; color:var(--text-strong);
  padding:16px 0 0;
  border-top:0;
  background: var(--bg);
  /* background:#010103; */
}

.site-footer .my {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 12px; /* 6px vertical, 12px horizontal */
}

/* ==============================
   Lightbox overlay
   ============================== */
/* === LIGHTBOX (hardened) === */
.lightbox{
  position: fixed;
  inset: 0;                /* pins to viewport edges without vw/vh overflow */
  background: #000;
  display: none;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 2147483646;
  isolation: isolate;
  overscroll-behavior: contain;
  touch-action: none;
}
/* Modern height cap belongs on the image, not the overlay */
@supports (height: 100dvh){
  .lightbox img{ max-height: 92dvh; }
}

.lightbox img{
  display: block;
  max-width: 92vw;
  max-height: 92vh;
  background: #000;        /* kill subpixel fringes */
  border: 0;
  box-shadow: none;        /* remove glow “box” on some GPUs */
}

/* When LB is open (your JS should toggle .lb-open on <body>) */
.lb-open, .lb-open body{ overflow: hidden; }
.lb-open .lightbox{ display: flex; }

/* Absolute nuke for any accidental “fixed” UIs that try to sit on top */
.lb-open *:not(#lightbox){
  /* keep interactions under the overlay from bleeding through */
  pointer-events: none !important;
}

/* chip right after a thumb figure */
.thumb-figure + .news-chip{
  display:inline-block;
  margin-top:6px;
  padding:.35rem .6rem;
  border:1px solid var(--brand);
  border-radius:9999px;
  font-size:.9rem; font-weight:600;
  text-decoration:none; color:#f97800;
  background:rgba(126,200,227,.06);
}
.thumb-figure + .news-chip:hover,
.thumb-figure + .news-chip:focus{
  background:#f97800; color:#020308;
}

/* Inline news pill — refined spacing + touch target */
.thumb-hint .news-chip-inline{
  display:inline-block;
  margin-top:6px;        /* space above (from caption text) */
  margin-bottom:10px;    /* extra space below before next content */
  padding:.10rem .65rem; /* slightly roomier pill */
  border:1px solid var(--brand);
  border-radius:9999px;
  font-size:.9rem;
  font-weight:600;
  text-decoration:none;
  color:var(--gold);
  background:rgba(126,200,227,.06);
}
.thumb-hint .news-chip-inline:hover,
.thumb-hint .news-chip-inline:focus{
  background:var(--gold);
  color:#020308;
}

/* Left-align the top inline pill menu on the Space Commerce page */
.page-space-commerce nav.thumb-hint{
  text-align: left;
}

/* ==============================
   Modal (base + inquiry modal scope)
   ============================== */

/* Base modal (scroll-safe) */
.modal{
   position: fixed;
   inset: 0;
   display: none;
   align-items: center;
   justify-content: center;
   z-index: 9999;

  /* Allow viewport scrolling on small screens */
  padding: calc(var(--modal-pad) + env(safe-area-inset-top,0)) var(--modal-pad-inline)
           calc(var(--modal-safe-bottom) + env(safe-area-inset-bottom,0));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 100vh;
  height: 100dvh;
}
.modal[aria-hidden="false"] { display: flex; }

.modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.65); }

/* Modal dialog bottom padding */
.modal__dialog{
  position: relative;
  max-width: min(92vw, 700px);
  width: 100%;
  max-height: calc(100dvh - 48px);
  overflow: auto;
  background: var(--bg);
  color: var(--text);
  border:1px solid rgba(126,200,227,.2);
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
  padding: var(--modal-pad) 20px max(var(--modal-safe-bottom),
    calc(var(--modal-pad) + env(safe-area-inset-bottom,0)));
  scrollbar-gutter: stable both-edges;
  box-sizing: border-box;
}
.modal__close{
  position: absolute;
  top: 10px; right: 12px;
  background: transparent;
  border: 0;
  font-size: 28px; line-height: 1;
  color: #7ec8e3;
  cursor: pointer;
}

/* Inquiry modal specifics (scoped) */
#inquiry-modal h2{ margin:0 0 10px; color: var(--h2); }

#inquiry-modal .modal-notice{
  margin:8px 0 14px;
  padding:10px 12px;
  background:rgba(126,200,227,.06);
  border:1px solid rgba(126,200,227,.2);
  border-radius:6px;
  color:var(--text);
}

/* First row layout (Name / Role) */
#inquiry-modal .form-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px 16px;
  margin:6px 0 8px;
}
@media (max-width:600px){
  #inquiry-modal .form-row{ grid-template-columns:1fr; }
}

/* Form error visuals */
.form-error { color: #d93025; font-size: 0.95rem; margin: 6px 0 0; }

/* Toggle this from JS: input.classList.add('is-invalid') / remove on valid */
input.is-invalid, textarea.is-invalid, select.is-invalid {
  border-color: #d93025 !important;
  box-shadow: 0 0 0 2px rgba(217,48,37,0.35);
  outline: none;
}

/* Optional positive state */
input.is-valid, textarea.is-valid, select.is-valid {
  border-color: #5DDF3F !important;
  box-shadow: 0 0 0 2px rgba(93,223,63,0.25);
}

/* Labels (orange, legacy look) */
#inquiry-modal label{
  display:block;
  margin:10px 0 6px;
  color:#f97800;
  font-weight:600;
}

/* Inputs & textarea */
#inquiry-modal input[type="text"],
#inquiry-modal input[type="email"],
#inquiry-modal input[type="tel"],
#inquiry-modal textarea,
#inquiry-modal select{
  width:100%;
  box-sizing:border-box;
  padding:10px 12px;
  border:1px solid rgba(126,200,227,.25);
  border-radius:6px;
  background:#020308;
  color: var(--text);
}
#inquiry-modal textarea{ resize:vertical; min-height:110px; }

/* Focus styles */
#inquiry-modal input:focus,
#inquiry-modal textarea:focus,
#inquiry-modal select:focus{
  outline:none;
  border-color:#7ec8e3;
  box-shadow:0 0 0 3px rgba(126,200,227,.15);
}

/* Fieldset + radios */
#inquiry-modal fieldset{ border:0; margin:10px 0 4px; padding:0; }
#inquiry-modal legend{ color:var(--text-strong); font-weight:600; margin-bottom:6px; }
#inquiry-modal .radio-button-container{ display:flex; flex-wrap:wrap; gap:14px 18px; }
#inquiry-modal .radio-label{ display:inline-flex; align-items:center; gap:6px; color:var(--text); }

/* Custom radio control */
#inquiry-modal .radio-label input[type="radio"]{
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px;
  height: 18px;
  margin: 0 8px 0 0;
  border: 2px solid #a8a8a8;
  border-radius: 50%;
  background: transparent;
  position: relative;
  cursor: pointer;
  vertical-align: -2px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
#inquiry-modal .radio-label input[type="radio"]:hover{ border-color: #7ec8e3; }
#inquiry-modal .radio-label input[type="radio"]:focus{ outline: 2px solid var(--gold); outline-offset: 2px; }
#inquiry-modal .radio-label input[type="radio"]:checked{ border-color: var(--gold); }
#inquiry-modal .radio-label input[type="radio"]:checked::after{
  content:"";
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:8px; height:8px; border-radius:50%;
  background:#f97800;
}

/* Helpers */
#inquiry-modal #submitBtn{ margin-top:14px; margin-bottom:8px; }
#inquiry-modal .phone-format-help{
  display:none; font-size:.85em; margin-top:6px; color:#a8a8a8;
}

.news-cta { margin: 8px 0 18px; }
.news-pill{
  display:inline-block; padding:.5rem .9rem; border:1px solid var(--gold);
  color:var(--gold); text-decoration:none; border-radius:9999px; font-weight:600;
}
.news-pill:hover,.news-pill:focus{ background:var(--gold); color:#0a0a0a; }