/* ==========================================================================
   Aemers LLC - main stylesheet
   Single stylesheet for the whole site. No frameworks, no build step.

   Contents
   01. Brand tokens
   02. Base and reset
   03. Typography
   04. Layout helpers
   05. Header and navigation
   06. Buttons and links
   07. Hero
   08. Components (eyebrow, cards, tracks, chips, notes, lists, FAQ, tables)
   09. Call-to-action band
   10. Footer
   11. Utilities
   12. Responsive rules
   13. Accessibility and motion preferences

   Brand reference: Brand Guideline of Aemers LLC.
   Purple #7443FF is the primary brand color. Headings use Barlow,
   body copy uses Red Hat Display. Both fonts load from Google Fonts.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Brand tokens
   Change a value here and it updates everywhere on the site.
   -------------------------------------------------------------------------- */
:root {
  /* Brand colors from the brand guideline */
  --purple: #7443FF;
  --yellow: #FFCD50;
  --green: #D5FF9B;
  --ink: #232323;

  /* Derived tones. Used for hover states, borders and quiet surfaces only. */
  --purple-deep: #5726D9;
  --purple-tint: #F3EFFF;
  --surface: #F7F6FB;
  --line: #E4E0F2;
  --muted: #56525F;
  --paper: #FFFFFF;

  /* Typography */
  --font-display: "Barlow", "Arial Narrow", Arial, sans-serif;
  --font-body: "Red Hat Display", "Segoe UI", Arial, sans-serif;

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;

  /* Shape */
  --radius: 14px;
  --radius-sm: 8px;
  --maxw: 1120px;
}

/* --------------------------------------------------------------------------
   02. Base and reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;      /* 17px base for comfortable long-form reading */
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--space-4) 0;
}

/* --------------------------------------------------------------------------
   03. Typography
   Barlow for H1 and H2 (per brand guideline), Red Hat Display for body.
   Barlow is also used for eyebrows, labels and navigation for consistency.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
  color: var(--ink);
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); margin-top: 0; }
h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
h4 { font-size: 1.05rem; font-weight: 600; }

p { margin: 0 0 var(--space-2); }

.lead {
  font-size: clamp(1.1rem, 2.1vw, 1.3rem);
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
}

.small { font-size: 0.9rem; }

strong { font-weight: 700; }

/* Eyebrow label. Sits above a heading and names the section or track. */
.eyebrow {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--purple);
  margin: 0 0 var(--space-1);
  display: block;
}

.eyebrow--ink { color: var(--muted); }

/* --------------------------------------------------------------------------
   04. Layout helpers
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.section { padding-block: var(--space-6); }
.section--tight { padding-block: var(--space-5); }
.section--surface { background: var(--surface); }
.section--tint { background: var(--purple-tint); }

.section-head { max-width: 68ch; margin-bottom: var(--space-4); }

/* Simple responsive grids */
.grid { display: grid; gap: var(--space-3); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Article measure for long text pages such as policies */
.prose { max-width: 72ch; }
.prose h2 { margin-top: var(--space-5); }
.prose h3 { margin-top: var(--space-4); }
.prose ul, .prose ol { padding-left: 1.15rem; margin-bottom: var(--space-2); }
.prose li { margin-bottom: 0.4rem; }

/* --------------------------------------------------------------------------
   05. Header and navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 72px;
}

.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.brand__mark { width: auto; height: 34px; flex: 0 0 auto; }
/*.brand__word {*/
/*  font-family: var(--font-display);*/
/*  font-weight: 700;*/
/*  font-size: 1.4rem;*/
/*  letter-spacing: -0.02em;*/
/*  color: var(--ink);*/
/*}*/
.brand__word{
    display: none;
}

.nav { display: flex; align-items: center; gap: var(--space-3); }

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}

.nav__link:hover { color: var(--purple); }
.nav__link[aria-current="page"] { color: var(--purple); border-bottom-color: var(--purple); }

/* Mobile toggle. Hidden on desktop, shown under 900px. */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.45rem;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle__bars { display: inline-block; width: 18px; height: 2px; background: var(--ink); position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink); }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }

/* --------------------------------------------------------------------------
   06. Buttons and links
   -------------------------------------------------------------------------- */
a { color: var(--purple); text-underline-offset: 3px; }
a:hover { color: var(--purple-deep); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.85rem 1.35rem;
  border-radius: 999px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn--primary { background: var(--purple); color: #fff; }
.btn--primary:hover { background: var(--purple-deep); color: #fff; }

.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { border-color: var(--purple); color: var(--purple); }

.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { color: var(--purple); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

/* Plain text link that ends a card */
.arrow-link {
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  margin-top: auto;
  padding-top: var(--space-2);
}
.arrow-link::after { content: " \203A"; font-weight: 700; }

/* --------------------------------------------------------------------------
   07. Hero
   -------------------------------------------------------------------------- */
.hero {
  padding-block: var(--space-6) var(--space-5);
  background:
    linear-gradient(180deg, var(--purple-tint) 0%, #fff 78%);
  border-bottom: 1px solid var(--line);
}

.hero__inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-5); align-items: start; }
.hero h1 { max-width: 16ch; }
.hero .lead { margin-bottom: var(--space-3); }

/* Compact hero used on interior pages */
.page-hero { padding-block: var(--space-5) var(--space-4); border-bottom: 1px solid var(--line); background: var(--surface); }
.page-hero h1 { max-width: 20ch; }

/* Facts panel beside the hero */
.facts { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: var(--space-3); }
.facts dl { margin: 0; }
.facts dt {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: var(--space-2);
}
.facts dt:first-child { margin-top: 0; }
.facts dd { margin: 0.15rem 0 0; font-size: 0.98rem; }

/* --------------------------------------------------------------------------
   08. Components
   -------------------------------------------------------------------------- */

/* Card */
.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  height: 100%;
}
.card h3 { margin-bottom: 0.4rem; }
.card p { color: var(--muted); font-size: 0.98rem; }
.card--flat { background: transparent; }

/* Signature element: the flight path.
   A dashed vertical rule with a small triangle at the top, drawn from the
   paper plane in the Aemers logo mark. Used only on the two audience tracks
   and on phase lists so that it keeps its meaning. */
.track { position: relative; padding-left: var(--space-4); }
.track::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 1.9rem;
  bottom: 0.4rem;
  border-left: 2px dashed var(--purple);
  opacity: 0.45;
}
.track::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 12px solid var(--purple);
}

/* Numbered phase list. Order carries real meaning here, so the numbers stay. */
.phases { list-style: none; margin: 0; padding: 0; counter-reset: phase; }
.phases li {
  counter-increment: phase;
  position: relative;
  padding-left: 2.6rem;
  padding-bottom: var(--space-3);
  border-left: 2px dashed var(--line);
  margin-left: 0.9rem;
}
.phases li:last-child { border-left-color: transparent; padding-bottom: 0; }
.phases li::before {
  content: counter(phase);
  position: absolute;
  left: -0.95rem;
  top: 0;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--purple);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  display: grid;
  place-items: center;
}
.phases h3 { margin-bottom: 0.25rem; }

/* Chip: a short status or format label */
.chip {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: var(--green);
  color: var(--ink);
  margin-bottom: 0.7rem;
}
.chip--purple { background: var(--purple); color: #fff; }
.chip--yellow { background: var(--yellow); color: var(--ink); }
.chip--quiet { background: var(--surface); color: var(--muted); border: 1px solid var(--line); }
/* Inside a card the flex layout would stretch the chip, so keep it to its own width. */
.card > .chip { align-self: flex-start; }

/* Note box for conditions, limits and honest disclosures */
.note {
  border-left: 4px solid var(--yellow);
  background: var(--surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--space-2) var(--space-3);
  margin: var(--space-3) 0;
}
.note p:last-child { margin-bottom: 0; }
.note--purple { border-left-color: var(--purple); }

/* Check list and cross list */
.list-check, .list-cross { list-style: none; margin: 0 0 var(--space-2); padding: 0; }
.list-check li, .list-cross li { position: relative; padding-left: 1.7rem; margin-bottom: 0.55rem; }
.list-check li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55rem;
  width: 10px; height: 10px;
  border-radius: 2px;
  background: var(--purple);
}
.list-cross li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6rem;
  width: 12px; height: 2px;
  background: var(--muted);
}

/* Definition rows used on the status and directory pages */
.rows { border-top: 1px solid var(--line); }
.row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
  align-items: start;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}
.row__title { font-family: var(--font-display); font-weight: 600; }
.row p { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.95rem; }
.row__status {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
}
.row__status--hold { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.row__status--closed { background: var(--ink); border-color: var(--ink); color: #fff; }

/* FAQ built on native details and summary. No JavaScript needed. */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: var(--space-2) 0; }
.faq summary {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--purple); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin-top: 0.7rem; color: var(--muted); }

/* Breadcrumb */
.breadcrumb { font-size: 0.85rem; color: var(--muted); padding-top: var(--space-3); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.breadcrumb li::after { content: "/"; margin-left: 0.4rem; color: var(--line); }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { text-decoration: none; }

/* Contact blocks */
.contact-card { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3); background: #fff; }
.contact-card address { font-style: normal; color: var(--muted); }

/* Table, used sparingly for comparisons */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--font-display); font-weight: 600; background: var(--surface); }

/* --------------------------------------------------------------------------
   09. Call-to-action band
   -------------------------------------------------------------------------- */
.cta-band { background: var(--purple); color: #fff; }
.cta-band h2, .cta-band .eyebrow { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, 0.88); max-width: 60ch; }
.cta-band .btn--outline { border-color: rgba(255,255,255,0.7); color: #fff; }
.cta-band .btn--outline:hover { border-color: #fff; color: var(--yellow); }

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: #fff; padding-block: var(--space-5) var(--space-3); }
.site-footer h2, .site-footer h3 { color: #fff; }
.site-footer a { color: rgba(255,255,255,0.82); text-decoration: none; }
.site-footer a:hover { color: var(--yellow); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-4); }
.footer-col h3 {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: var(--space-2);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.45rem; font-size: 0.95rem; }
.footer-about p { color: rgba(255,255,255,0.75); font-size: 0.95rem; }
.footer-bottom {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.18);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
}
.footer-disclaimer { max-width: 78ch; font-size: 0.85rem; color: rgba(255,255,255,0.7); margin-top: var(--space-3); }

/* --------------------------------------------------------------------------
   11. Utilities
   -------------------------------------------------------------------------- */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-3 { margin-top: var(--space-3); }
.center { text-align: center; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   12. Responsive rules
   Tested layout widths: 375px, 768px, 1280px.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: var(--space-3);
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .nav .btn { margin-top: var(--space-2); }
  .site-header__inner { position: relative; }
  .hero__inner { grid-template-columns: 1fr; gap: var(--space-4); }
}

@media (max-width: 768px) {
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .section { padding-block: var(--space-5); }
}

@media (max-width: 480px) {
  body { font-size: 1rem; }
  .container { padding-inline: var(--space-2); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .row { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   13. Accessibility and motion preferences
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--purple);
  color: #fff;
  padding: 0.7rem 1rem;
  z-index: 100;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Print: keep policy pages readable on paper */
@media print {
  .site-header, .site-footer, .cta-band, .nav-toggle { display: none; }
  body { font-size: 11pt; color: #000; }
}

/*Aemers Custom CSS*/

@media (max-width: 1024px) {
  
.aemers-mbl-1{
    grid-template-columns: repeat(1, 1fr) !important;
}
}




/**/
 .note{
    background:#111318;color:#c9cbe0;font-size:13px;padding:10px 40px;
    font-family:monospace;
  }

  /* ---------- Manager card ---------- */
  section.manager{padding:72px 0;}
  .manager-grid{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:56px;
    align-items:center;
  }
  .manager-eyebrow{
    color:var(--purple);font-weight:700;font-size:13px;letter-spacing:.02em;margin-bottom:10px;
  }
  .manager h2{
    font-size:34px;font-weight:800;line-height:1.15;margin:0 0 16px;letter-spacing:-.01em;
  }
  .manager p.lead{color:var(--gray);font-size:16.5px;max-width:46ch;margin:0;}

  .card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:20px;
    padding:32px;
  }
  .card-top{display:flex;gap:18px;align-items:center;margin-bottom:22px;}
  .avatar{
    width:64px;height:64px;border-radius:50%;
    background:linear-gradient(135deg,var(--purple),#9b7bff);
    color:#fff;display:flex;align-items:center;justify-content:center;
    font-size:22px;font-weight:800;flex-shrink:0;
  }
  .card-top h3{margin:0 0 3px;font-size:19px;font-weight:800;}
  .card-top .role{color:var(--gray);font-size:14px;}
  .divider{height:1px;background:var(--line);margin:20px 0;}
  .contact-row{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
  }
  .contact-label{font-size:12.5px;color:var(--gray);margin-bottom:4px;}
  .contact-value{font-size:19px;font-weight:800;letter-spacing:.01em;}
  .call-btn{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--purple);color:#fff;text-decoration:none;
    padding:11px 22px;border-radius:999px;font-weight:700;font-size:14.5px;
    white-space:nowrap;
  }
  .call-btn svg{width:15px;height:15px;fill:#fff;}
  .card-foot{margin-top:18px;font-size:13px;color:var(--gray);}

  /* ---------- Video section ---------- */
  section.video{background:var(--panel); padding-bottom:30px;}
  .video-inner{max-width:820px;margin:0 auto;text-align:center;}
  .video-eyebrow{color:var(--purple);font-weight:700;font-size:13px;margin-bottom:10px;}
  .video h2{font-size:30px;font-weight:800;margin:0 0 12px;letter-spacing:-.01em;}
  .video p.lead{color:var(--gray);font-size:16px;margin:0 0 32px;}
  .video-frame{
    position:relative;padding-top:56.25%;border-radius:16px;overflow:hidden;
    background:#000;box-shadow:0 18px 40px rgba(25,26,35,.15);
  }
  .video-frame iframe{
    position:absolute;inset:0;width:100%;height:100%;border:0;
  }
  .video-caption{
    margin-top:16px;font-size:13.5px;color:var(--gray);text-align:left;
    display:flex;justify-content:space-between;
  }

  @media (max-width:760px){
    .manager-grid{grid-template-columns:1fr;}
  }