/*
Theme Name: COMSIS Landing
Version: 1.3.7
Description: Government contracting landing page (technology + logistics). Vertical compliance tab.
*/

:root{--navy:#0b2a4a;--blue:#123c73;--red:#be1e2d;--gold:#d4af37}
*{box-sizing:border-box}
img{max-width:100%;height:auto}
html,body{margin:0;font-family:Inter,Segoe UI,Roboto,Arial,Helvetica,sans-serif;background:#fff;color:#0e1116;line-height:1.45}
a{color:var(--blue);text-decoration:none} a:hover{text-decoration:underline}
.wrap{max-width:1280px;margin:0 auto;padding:0 20px}

/* Top bar (utility only) */
.topbar{background:var(--navy);color:#cfe1ff;font-size:14px}
.topbar .wrap3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:center;padding:10px 20px}
.topbar .left{display:none}
.topbar .mid{justify-self:center;text-align:center}
.topbar .mid span{margin:0 12px}
.topbar .right{justify-self:end;text-align:right}
.topbar strong{color:#fff}
.topbar a{color:#ffffff; text-decoration:none; font-weight:700} .topbar a:hover{text-decoration:underline}

/* Header */
header{background:#fff;border-bottom:1px solid #e6eef7;position:sticky;top:0;z-index:100}
.header-grid{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:10px;padding:14px 0}
.brand .brand-logo{height:72px;width:auto;display:block}
nav{display:flex;align-items:center;justify-content:flex-end;padding:0 0 14px 0}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:36px;flex-wrap:wrap}
nav ul li a{text-transform:uppercase;letter-spacing:.06em;font-weight:800}
nav .cta{background:var(--red);color:#fff;border:none;padding:12px 18px;border-radius:12px;font-weight:700;margin-left:36px}
nav .cta:hover{filter:brightness(.95);cursor:pointer}

/* Hero background (flag preserved) */
.hero{position:relative;isolation:isolate;min-height:64vh;color:#fff;display:flex;align-items:center;
background:
linear-gradient(180deg,rgba(11,42,74,.85),rgba(11,42,74,.85)),
image-set(url('assets/hero.webp') type('image/webp') 1x, url('assets/hero.jpg') type('image/jpeg') 1x) center/cover no-repeat}
.hero .wrap{padding:90px 20px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;background:rgba(255,255,255,.12);padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.2)}
.flag{width:18px;height:12px;background:linear-gradient(#cde,#abc);border:1px solid rgba(255,255,255,.6);border-radius:2px}
.hero h2{font-size:52px;line-height:1.08;margin:16px 0 12px;font-weight:800;text-shadow:0 2px 12px rgba(0,0,0,.25)}
.hero p{max-width:720px;font-size:18px;color:#e5eefc;margin:0 0 22px;text-shadow:0 1px 6px rgba(0,0,0,.2)}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:12px;padding:12px 16px;font-weight:700;border:2px solid transparent}
.btn.primary{background:var(--gold);color:#1a1f29;border-color:var(--gold)}
.btn.secondary{background:transparent;color:#fff;border-color:#ffffff55}
.badges{display:flex;gap:16px;flex-wrap:wrap;margin-top:22px}
.badge{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);padding:8px 10px;border-radius:10px;font-size:12px}

/* Sections */
.section{padding:72px 0}
.section h3{font-size:30px;margin:0 0 12px}
.lead{color:#415366;max-width:820px;margin:0 0 28px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.card{border:1px solid #e6eef7;border-radius:16px;padding:20px;background:#fff;box-shadow:0 1px 0 rgba(12,28,48,.06)}
.card h4{margin:4px 0 10px;font-size:18px;text-transform:uppercase;letter-spacing:.04em}
.card p{color:#4b5b6b;margin:0 0 12px}
.list{margin:0;padding-left:18px;color:#435466}

/* Contact cards (v13.9): improve typography + alignment */
.contact-card h4{font-size:14px;letter-spacing:.10em;text-transform:uppercase;margin:0 0 12px}
.contact-card .info-stack{display:grid;gap:10px;margin:0 0 14px}
.contact-card .info-line{display:flex;align-items:center;gap:10px;line-height:1.2}
.contact-card .icon{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;opacity:.75}
.contact-card a{color:#123c73;font-weight:700;text-decoration:none}
.contact-card a:hover{text-decoration:underline}
.contact-card .meta-label{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:#6b7f95}
.contact-card .meta-value{font-size:14px;font-weight:800;color:#1a2b3c}

/* Business identifiers list (UEI/CAGE/WAWF/IPP/SAM) */
.contact-card .meta-list{display:grid;gap:8px;margin:0}
.contact-card .meta-row{display:flex;align-items:baseline;gap:10px}
.contact-card .address-lines{color:#4b5b6b;line-height:1.55}
.contact-card .address-lines .company{font-weight:800;color:#1a2b3c;margin-bottom:4px}

/* Footer */
footer{background:#0a1726;color:#cfe1ff}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}
footer h5{color:#fff;margin:0 0 10px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a{color:#dbe9ff}
.copyright{background:linear-gradient(90deg,#081221,#0d2b51); color:#cfe1ff; padding:16px 0; text-align:center}

/* Modal (unchanged) */
.modal-backdrop{position:fixed; inset:0; background:rgba(10,23,38,.65); display:none; align-items:center; justify-content:center; z-index:10000}
.modal{background:#fff; border-radius:14px; padding:20px; max-width:680px; width:92%; box-shadow:0 20px 50px rgba(0,0,0,.35)}
.modal .grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.modal label{font-size:14px; color:#123c73; font-weight:600}
.modal input,.modal textarea,.modal select{width:100%; padding:10px; border:1px solid #cfd9e6; border-radius:10px}

/* Responsive */
@media (max-width: 960px){
  .grid3{grid-template-columns:1fr 1fr}
  .hero h2{font-size:clamp(30px,5.2vw,36px)}
  nav ul{justify-content:center}
}
@media (max-width: 640px){
  .header-grid{flex-direction:column; align-items:center; gap:8px}
  .brand .brand-logo{height:56px}
  nav{flex-direction:column; align-items:center; gap:10px; padding-bottom:8px}
  nav ul{gap:16px; justify-content:center}
  nav .cta{width:100%; max-width:340px; margin-left:0; text-align:center}
  .hero .wrap{padding:56px 16px}
  .badges{justify-content:center}
  .grid3,.grid2{grid-template-columns:1fr}
  .card{padding:18px}
}

/* ===== v13.1: right-align top ribbon on desktop, center on mobile ===== */
@media (min-width: 768px){
  .topbar .wrap3{display:flex;justify-content:flex-end;align-items:center;gap:18px}
  .topbar .left{display:none}
  .topbar .mid,.topbar .right{text-align:right;justify-self:auto}
}
@media (max-width: 767px){
  .topbar .wrap3{display:grid;grid-template-columns:1fr;justify-items:center;gap:6px}
  .topbar .mid,.topbar .right{text-align:center}
}

/* v13.2 compliance tab removed in v13.3 */
/* concern-tab hidden */ /* hide old button if any */
.compliance-tab{
  position:fixed;
  right:0;
  top:45%;
  transform:translateY(-50%);
  z-index:9999;
  background:#be1e2d;
  color:#fff;
  border:none;
  padding:10px 12px;
  border-radius:12px 0 0 12px;
  font-weight:800;
  letter-spacing:.06em;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.compliance-tab:hover{ filter:brightness(.95); cursor:pointer }
@media (max-width: 640px){
  .compliance-tab{ padding:8px 10px; font-size:12px; right:0; top:50%; }
}


/* v13.3: real US flag next to America-First */
.eyebrow .us-flag{ display:inline-block; vertical-align:-2px; margin-right:8px }


/* v13.5: slightly smaller US flag in eyebrow for better balance */
.eyebrow .us-flag{ width:15px; height:auto; }


/* ===== Agency marquee (text-only, legal-safe) ===== */

.agency-marquee .wrap{ overflow:hidden }
.marquee{ position:relative; white-space:nowrap; }
.marquee-track{
  list-style:none; display:flex; gap:18px; padding:0; margin:0;
  animation: marquee-scroll 28s linear infinite; will-change:transform;
}
.badge{
  display:inline-block; padding:10px 14px; border-radius:999px;
  background:#fff; border:1px solid #e6eef7; color:#123c73; font-weight:800; letter-spacing:.02em;
  box-shadow:0 1px 0 rgba(12,28,48,.06);
}
.agency-marquee .marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-note{ font-size:.9rem; color:#51657a; margin-top:10px }
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none; }
}
@media (max-width: 640px){
  
  .badge{ padding:8px 12px; }
}


/* ===== Agency marquee (tight, full-bleed, over hero ribbon) ===== */

.agency-marquee .wrap{ max-width:100%; padding:0; overflow:hidden }
.agency-marquee .marquee{ position:relative; white-space:nowrap; }
.agency-marquee .marquee-track{
  list-style:none; display:flex; gap:18px; padding:0 40px; margin:0;
  animation: marquee-scroll 24s linear infinite; will-change:transform;
}
.agency-marquee .badge{
  display:inline-block; padding:10px 14px; border-radius:999px;
  background:#fff; border:1px solid #e6eef7; color:#123c73; font-weight:800; letter-spacing:.02em;
  box-shadow:0 1px 0 rgba(12,28,48,.06);
}
.agency-marquee .marquee:hover .marquee-track{ animation-play-state:paused; }
/* continuous loop (duplicate items in markup) */
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .agency-marquee .marquee-track{ animation: none; }
}
@media (max-width: 640px){
  
  .agency-marquee .marquee-track{ gap:14px; padding:0 20px; }
  .agency-marquee .badge{ padding:8px 12px; }
}


/* === Refined spacing for marquee between ribbon and content === */
.agency-marquee{
  padding:16px 0 20px;
  background:transparent;
  margin-top:-20px;
}
.agency-marquee .wrap{
  max-width:100%;
  padding:0;
  overflow:hidden;
}
.agency-marquee .marquee-track{
  list-style:none;
  display:flex;
  gap:18px;
  padding:0 40px;
  margin:0;
  animation: marquee-scroll 24s linear infinite;
  will-change:transform;
}
.agency-marquee .badge{
  display:inline-block;
  padding:10px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid #e6eef7;
  color:#123c73;
  font-weight:800;
  letter-spacing:.02em;
  box-shadow:0 1px 0 rgba(12,28,48,.06);
}
.agency-marquee .marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .agency-marquee .marquee-track{ animation: none; }
}
@media (max-width: 640px){
  .agency-marquee{ padding:10px 0; margin-top:-10px; }
  .agency-marquee .marquee-track{ gap:14px; padding:0 20px; }
  .agency-marquee .badge{ padding:8px 12px; }
}


/* v13.7 Why COMSIS CEO layout */
.why-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:2.5rem;align-items:center}
@media (max-width: 900px){.why-grid{grid-template-columns:1fr;gap:1.75rem} .ceo-figure{justify-self:center}}
.why-card{background:#ffffff;border:1px solid rgba(0,0,0,.06);box-shadow:0 8px 30px rgba(0,0,0,.06);border-radius:18px;padding:24px}
.why-card .lead{margin-top:0}
.ceo-figure{margin:0;text-align:center}
.ceo-headshot{width:340px;max-width:100%;aspect-ratio:1/1;border-radius:50%;object-fit:cover;display:block;margin:0 auto;border:6px solid #f3f5f7;box-shadow:0 8px 30px rgba(0,0,0,.1)}
.ceo-figure figcaption{margin-top:.75rem;font-weight:600;opacity:.85}

/* v13.7.1 refinement: keep Why COMSIS tidy inside wrap and balance columns */
#differentiators{scroll-margin-top:90px}
#differentiators .wrap{max-width:1200px;margin:0 auto}
.why-grid{grid-template-columns:minmax(420px, 1.2fr) minmax(280px, 0.9fr);gap:2rem}
.why-card{max-width:820px;margin-left:auto;margin-right:auto}
.why-card .badge{margin-bottom:.5rem}
.ceo-headshot{width:300px}
@media (max-width: 1100px){.ceo-headshot{width:260px}}
@media (max-width: 900px){.why-card{max-width:100%}}

/* v13.7.2: enforce perfect circular headshot */
.ceo-figure{ --ceo-size: 320px; }
.ceo-figure .ceo-headshot{
  width: var(--ceo-size) !important;
  height: var(--ceo-size) !important;
  border-radius: 50% !important;
  object-fit: cover;
  display: block;
}
@media (max-width: 1100px){
  .ceo-figure{ --ceo-size: 280px; }
}
@media (max-width: 900px){
  .ceo-figure{ --ceo-size: 240px; }
}

/* v13.7.3: About text inside Why COMSIS card */
.why-card .about{margin:.75rem 0 0 0; line-height:1.5; color:#2b2f36}
.why-card .about + .about{margin-top:.5rem}

/* v13.8 spacing + mobile refinements */
.why-card p + p{ margin-top: .65rem; }
.why-card p + div{ margin-top: 1.25rem; } /* space between last paragraph and badges */
@media (max-width: 700px){
  .why-grid{ gap: 1.25rem; }
  .why-card{ padding: 18px; }
  .why-card .lead{ font-size: 1rem; }
  .badge{ display:inline-block; margin-bottom:.5rem; }
  .ceo-figure{ text-align:center; }
}


/* --- UX: ensure clickable elements show pointer cursor (Report a Concern modal) --- */
#reportConcernModal button,
#reportConcernModal input[type="submit"],
#reportConcernModal button[type="submit"],
#reportConcernModal .btn,
#reportConcernModal .submit,
#reportConcernModal a.button,
#reportConcernModal a,
#reportConcernModal .modal-close,
#reportConcernModal .close,
#reportConcernModal select,
#reportConcernModal .role-select,
#reportConcernModal .urgency-select{
  cursor: pointer !important;
}

/* Ensure hero badges keep dark-hero styling even though marquee defines .badge later */
.hero .badge{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;box-shadow:none}
.hero .badge a{color:inherit}


/* ===== Careers page ===== */
.careers-page .header-grid nav a[aria-current="page"]{color:var(--red)}
.careers-cta-link{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.careers-hero{min-height:auto;padding:28px 0 44px;background:
linear-gradient(180deg,rgba(7,24,44,.88),rgba(11,42,74,.88)),
radial-gradient(circle at top right, rgba(191,154,83,.28), transparent 28%),
image-set(url('assets/hero.webp') type('image/webp') 1x, url('assets/hero.jpg') type('image/jpeg') 1x) center/cover no-repeat}
.careers-hero-grid{display:grid;grid-template-columns:1.35fr .8fr;gap:24px;align-items:center;padding:72px 20px}
.careers-hero h1{font-size:clamp(34px,5vw,58px);line-height:1.06;margin:16px 0 14px;font-weight:800;text-shadow:0 2px 12px rgba(0,0,0,.25)}
.careers-hero p{max-width:760px;font-size:18px;color:#e5eefc}
.careers-highlight-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:26px;color:#fff;box-shadow:0 16px 40px rgba(7,24,44,.18);backdrop-filter:blur(8px)}
.careers-highlight-card .kicker,.section-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8da3bc;font-weight:800;margin:0 0 10px}
.careers-highlight-card h2{margin:0 0 12px;font-size:30px;line-height:1.12}
.careers-highlight-card p{color:#eef4ff;font-size:16px}
.careers-mini-list{color:#eef4ff}
.careers-intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:stretch}
.career-story-card{padding:28px}
.section-title-narrow{max-width:760px;margin-top:0}
.careers-principles-grid .card h3,.role-card h3,.linkedin-promo-grid h3,.talent-network-card h3{font-size:20px;text-transform:none;letter-spacing:0;margin:0 0 10px}
.section-head-flex{display:flex;justify-content:space-between;gap:18px;align-items:end;margin-bottom:22px}
.role-card{display:flex;flex-direction:column;gap:12px;min-height:100%}
.role-card p{margin:0}
.role-meta{display:flex;flex-wrap:wrap;gap:8px}
.role-meta span{display:inline-flex;padding:7px 10px;border-radius:999px;background:#eff5fb;border:1px solid #d8e5f3;color:#123c73;font-size:12px;font-weight:800}
.role-focus-list{margin-top:0;flex:1}
.role-apply-link{font-weight:800;color:#be1e2d;text-decoration:none}
.role-apply-link:hover{text-decoration:underline}
.roles-note-card{margin-top:20px;background:#fbfcfe}
.careers-dark-band{background:linear-gradient(90deg,#0b2747,#123c73);color:#fff}
.careers-dark-band .section-label-light{color:#d6e4ff}
.careers-path-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.careers-path-copy{max-width:620px;align-self:center}
.careers-path-copy h2{margin:0 0 14px;max-width:560px}
.careers-path-copy p{margin:0;max-width:540px;color:#eef4ff;line-height:1.7}
.career-pill-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.career-pill{display:flex;align-items:center;justify-content:center;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font-weight:800;text-align:center}
.talent-network-grid{align-items:start}
.talent-network-card{padding:24px}
.talent-fields-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.talent-field-box{padding:14px 16px;border-radius:14px;background:#f6f9fc;border:1px dashed #c5d4e6;font-weight:700;color:#224166}
.talent-field-box-wide{grid-column:1 / -1}
.talent-network-note{margin:16px 0 0;color:#5a6d80}
.linkedin-promo-card{padding:28px}
.linkedin-promo-grid{align-items:start}
.roles-linkedin-btn{color:#123c73;border-color:#d7e4f0;background:#fff;text-decoration:none}
@media (max-width: 960px){
  .careers-hero-grid,.careers-intro-grid,.careers-path-grid{grid-template-columns:1fr}
  .section-head-flex{align-items:start;flex-direction:column}
}
@media (max-width: 640px){
  .careers-hero-grid{padding:52px 16px}
  .career-pill-grid,.talent-fields-grid{grid-template-columns:1fr}
  .careers-highlight-card h2{font-size:24px}
}


.application-ready-grid{align-items:start}
.application-form-card{padding:24px}
.career-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field-group{display:flex;flex-direction:column;gap:8px}
.field-group label{font-weight:700;color:#123c73}
.field-group label span{color:var(--red)}
.field-group input,.field-group select,.field-group textarea{width:100%;border:1px solid #cfdae7;border-radius:14px;padding:14px 16px;font:inherit;background:#fff;color:#0b2440}
.field-group input[type="file"]{padding:12px;background:#f8fbff}
.field-group textarea{resize:vertical;min-height:140px}
.field-group small{color:#5d7288;font-size:12px;line-height:1.45}
.field-group-wide{grid-column:1 / -1}
.career-form-actions{margin-top:18px;display:flex;justify-content:flex-start}
.role-apply-link{display:inline-flex;align-items:center;justify-content:center;margin-top:10px;padding:12px 14px;border-radius:12px;background:#eef4fb;color:#123c73;font-weight:800;text-decoration:none}
.role-apply-link:hover{background:#e2edf9}
.visitor-process-card{padding:28px}
@media (max-width:860px){
  .career-form-grid{grid-template-columns:1fr}
  .field-group-wide{grid-column:auto}
}


.career-status-message{margin:18px 0;padding:14px 16px;border-radius:14px;font-weight:600;line-height:1.5}
.career-status-success{background:#edf8f0;border:1px solid #b9dfc1;color:#0f5c2f}
.career-status-warning{background:#fff7e8;border:1px solid #efd49a;color:#7a5200}
.career-status-error{background:#fff0f0;border:1px solid #efb3b3;color:#8a1f1f}


.careers-apply-note{margin-top:16px;font-weight:600;color:#0f2f5f;}


/* v13.22 landing page balance after CEO image removal */
#differentiators .wrap{
  max-width: 1100px;
}
#differentiators h3{
  text-align: center;
}
#differentiators .why-grid{
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}
#differentiators .why-card{
  width: 100%;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
#differentiators .why-card .lead,
#differentiators .why-card .about{
  max-width: 76ch;
}
#differentiators .why-card > div[aria-label="COMSIS differentiators"]{
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}
@media (max-width: 700px){
  #differentiators .why-card{
    padding: 20px;
  }
}