/* =========================================================
   Ontario Tech Defence | Site styles
   ---------------------------------------------------------
   - All colours, fonts and sizes live in the variables below.
   - Colours follow the Ontario Tech brand palette:
     Future Blue #003C71 and Simcoe Blue #0077CA (brand guide);
     orange #FF6E3B is matched to the Defence Lab logo.
   - Structure on every section:
     section_[name] > padding-global > container-large > padding-section-large
   - Breakpoint: 767px (mobile).
   ========================================================= */

:root {
  /* Colours */
  --color-navy: #003C71;          /* Future Blue */
  --color-navy-dark: #002A50;
  --color-navy-light: #0A4F8C;
  --color-orange: #FF6E3B;        /* matched to the Defence Lab logo; fills, borders, large text only */
  --color-orange-hover: #FF591F;  /* button hover and focus, deeper logo orange; black label 6.70:1 */
  --color-orange-dark: #D23700;   /* same hue, lightest shade with 4.5:1+ on white and bg-alt; small text */
  --color-orange-tint: #FFEFE5;
  --color-blue: #0077CA;          /* Simcoe Blue */
  --color-blue-dark: #005A9C;     /* Simcoe shade for small text on tints */
  --color-blue-tint: #E0EEF9;
  --color-text: #1a1a1a;
  --color-text-light: #5a6472;
  --color-text-on-dark: #D3E1EE;
  --color-text-footer: #C2D2E2;
  --color-text-footer-muted: #9DB6CF;
  --color-white: #ffffff;
  --color-bg-alt: #f4f6f8;
  --color-border: #e0e4e9;
  --color-border-dark: #1B4C7C;
  --color-placeholder: #fff176;

  /* Fonts */
  --font-body: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Font sizes */
  --size-h1: 2.6rem;
  --size-h1-page: 2.1rem;
  --size-h2: 1.8rem;
  --size-h3: 1.15rem;
  --size-text-large: 1.15rem;
  --size-text-regular: 1rem;
  --size-text-small: 0.9rem;
  --size-text-tiny: 0.78rem;
  --size-stat: clamp(2.6rem, 2rem + 2vw, 3.2rem);

  /* Spacing */
  --space-small: 1rem;
  --space-medium: 1.5rem;
  --space-large: 2.5rem;
  --space-section: 4rem;
  --space-hero: 6rem;
  --gutter: 1.5rem;

  /* Sizes */
  --container-large: 1180px;
  --container-small: 820px;
  --max-width-text: 720px;
  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-pill: 999px;
}

/* ---------- Tag styles ---------- */
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-text-regular);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-white);
}
h1 { margin-top: 0; margin-bottom: var(--space-small); font-size: var(--size-h1); line-height: 1.2; }
h2 { margin-top: 0; margin-bottom: 0.75rem; font-size: var(--size-h2); line-height: 1.25; }
h3 { margin-top: 0; margin-bottom: 0.6rem; font-size: var(--size-h3); line-height: 1.3; }
h4 { margin-top: 0; margin-bottom: 0.75rem; font-size: 0.95rem; line-height: 1.3; }
p { margin-top: 0; margin-bottom: var(--space-small); }
a { color: var(--color-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Global layout (Client-First pattern) ---------- */
.page-wrapper { overflow: hidden; }
.main-wrapper { display: block; }
.padding-global { padding-left: var(--gutter); padding-right: var(--gutter); }
.container-large { max-width: var(--container-large); margin-left: auto; margin-right: auto; }
.container-small { max-width: var(--container-small); margin-left: auto; margin-right: auto; }
.padding-section-large { padding-top: var(--space-section); padding-bottom: var(--space-section); }
.background-color-alt { background-color: var(--color-bg-alt); }

/* ---------- Utility classes ---------- */
.eyebrow {
  display: block;
  margin-bottom: 0.6rem;
  font-size: var(--size-text-tiny);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-orange-dark);
}
.text-intro { max-width: var(--max-width-text); margin-bottom: var(--space-large); color: var(--color-text-light); }
.text-intro.is-tight { margin-bottom: var(--space-medium); }
.text-placeholder { padding: 0 0.25rem; background-color: var(--color-placeholder); color: var(--color-text); }
.button-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; }

/* ---------- Buttons (one base class + combo) ---------- */
.button {
  display: inline-block;
  padding: 0.85rem 1.75rem;
  border: 2px solid var(--color-orange);
  border-radius: var(--radius-small);
  background-color: var(--color-orange);
  color: var(--color-white);
  font-size: var(--size-text-regular);
  font-weight: 700;
  line-height: 1.4;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.button:hover,
.button:focus-visible { border-color: var(--color-orange-hover); background-color: var(--color-orange-hover); color: #000; box-shadow: 0 4px 12px rgba(0, 42, 80, 0.18); text-decoration: none; }
.button.is-secondary { border-color: var(--color-white); background-color: transparent; color: var(--color-white); }
.button.is-secondary:hover,
.button.is-secondary:focus-visible { border-color: var(--color-white); background-color: var(--color-white); color: var(--color-navy); }

/* ---------- Navbar (Component) ---------- */
.navbar_component { background-color: var(--color-navy); color: var(--color-white); }
.navbar_container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-large);
  margin-left: auto;
  margin-right: auto;
  padding: 1.1rem var(--gutter);
}
.navbar_logo { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.02em; color: var(--color-white); }
.navbar_logo:hover { text-decoration: none; }
.navbar_logo-image { display: block; width: auto; height: 44px; }
.navbar_menu { display: flex; flex-wrap: wrap; gap: 1.75rem; }
.navbar_link {
  padding-bottom: 0.25rem;
  border-bottom: 2px solid transparent;
  font-size: 0.95rem;
  font-weight: 600;
  color: #DCE6F0;
}
.navbar_link:hover { border-bottom-color: var(--color-orange); color: var(--color-white); text-decoration: none; }
/* w--current marks the link for the page you are on */
.navbar_link.w--current { border-bottom-color: var(--color-orange); color: var(--color-white); }

/* ---------- Home hero ---------- */
.section_hero {
  background-image: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-dark) 55%, var(--color-navy-light) 100%);
  color: var(--color-white);
}
.hero_content { padding-top: var(--space-hero); padding-bottom: var(--space-hero); }
.hero_heading { max-width: var(--max-width-text); margin-bottom: 1.1rem; font-size: var(--size-h1); }
.hero_text { max-width: 600px; margin-bottom: 1.9rem; font-size: var(--size-text-large); color: var(--color-text-on-dark); }

/* ---------- Inner page header ---------- */
.section_page-header {
  background-image: linear-gradient(120deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
  color: var(--color-white);
}
.page-header_content { padding-top: 3.75rem; padding-bottom: 3.75rem; }
.page-header_heading { margin-bottom: 0.6rem; font-size: var(--size-h1-page); }
.page-header_text { max-width: 680px; margin-bottom: 0; font-size: 1.05rem; color: var(--color-text-on-dark); }

/* ---------- Capabilities (CMS Collection: Capabilities) ---------- */
.capability_list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-medium);
}
.capability_list.is-compact { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.capability_item {
  position: relative;
  padding: 1.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  background-color: var(--color-white);
}
.capability_item:hover { box-shadow: 0 8px 24px rgba(0, 42, 80, 0.12); }
.capability_item.is-compact { padding: 1.4rem; }
.capability_content { position: relative; }
.capability_accent { width: 42px; height: 6px; margin-bottom: var(--space-small); border-radius: 3px; background-color: var(--color-orange); }
.capability_name { margin-bottom: 0.6rem; font-size: var(--size-h3); line-height: 1.3; }
.capability_name.is-compact { margin-bottom: 0; font-size: 1.05rem; }
.capability_description { margin-bottom: 0; font-size: 0.95rem; color: var(--color-text-light); }
.capability_link { display: inline-block; margin-top: 0.6rem; font-size: var(--size-text-small); font-weight: 600; }

/* ---------- DDIM (Home) ---------- */
.ddi_component {
  padding: var(--space-large);
  border: 1px solid var(--color-border);
  border-left: 6px solid var(--color-orange);
  border-radius: var(--radius-medium);
  background-color: var(--color-white);
}
.ddi_text { max-width: var(--max-width-text); color: var(--color-text-light); }
.ddi_cta-heading { margin-top: 0.5rem; margin-bottom: 0.9rem; font-size: 1.05rem; font-weight: 700; color: var(--color-navy); }

/* ---------- ACE facility spotlight (Home) ---------- */
.facility_layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 3rem; align-items: start; }
.facility_layout > * { grid-column: 1; }
.facility_layout > .button { justify-self: start; }
.facility_media { grid-column: 2; grid-row: 1 / span 5; align-self: center; margin: 0; }
.facility_media img { display: block; width: 100%; height: auto; border-radius: var(--radius-medium); }
@media (max-width: 991px) {
  .facility_layout { grid-template-columns: minmax(0, 1fr); }
  .facility_media { grid-column: 1; grid-row: auto; margin-bottom: var(--space-medium); }
}
.facility_list { max-width: var(--max-width-text); margin-top: 0; margin-bottom: var(--space-medium); padding-left: 1.25rem; color: var(--color-text-light); }
.facility_item { margin-bottom: 0.5rem; }

/* ---------- Defence Lab page ---------- */
.defence-lab_heading { margin-top: var(--space-large); }
.defence-lab_heading.is-first { margin-top: 0; }
.defence-lab_closing { margin-top: var(--space-large); margin-bottom: 0; font-size: var(--size-text-large); font-weight: 700; color: var(--color-navy); }
.defence-lab_cta { margin-top: 1.5rem; }

/* ---------- News (CMS Collection: News) ---------- */
.news_list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-medium);
}
.news_list.is-two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.news_item { position: relative; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-medium); background-color: var(--color-white); }
.news_item:hover { box-shadow: 0 8px 24px rgba(0, 42, 80, 0.12); }
.news_item:focus-within { outline: 2px solid var(--color-blue); outline-offset: 2px; }
.news_image { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.news_body { padding: 1.1rem; }
.news_date { margin-bottom: 0.4rem; font-size: 0.82rem; color: var(--color-text-light); }
.news_title { margin-bottom: 0; font-size: 1.05rem; line-height: 1.3; }
.news_link { color: var(--color-navy); }
.news_link:hover { text-decoration: underline; }
.news_link:focus-visible { outline: none; }
/* Makes the whole card clickable through the title link */
.news_link::after { content: ""; position: absolute; inset: 0; }
.news_summary { margin-top: 0.5rem; margin-bottom: 0; font-size: 0.9rem; color: var(--color-text-light); }
.news_more { margin-top: var(--space-medium); }

/* ---------- Newsletter subscribe (News page) ---------- */
.subscribe_heading { margin-bottom: 0.5rem; font-size: 1.4rem; line-height: 1.3; }
.subscribe_text { max-width: var(--max-width-text); margin-bottom: 1.1rem; font-style: italic; color: var(--color-text-light); }

/* ---------- Training: stats bar ---------- */
.stats_component {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-medium);
  margin-bottom: 3rem;
  padding: 2.25rem;
  border-radius: var(--radius-medium);
  background-color: var(--color-navy);
  color: var(--color-white);
}
.stats_number { font-size: var(--size-stat); font-weight: 800; line-height: 1.1; color: var(--color-orange); }
.stats_label { margin-top: 0.25rem; font-size: var(--size-text-small); color: var(--color-text-on-dark); }

/* ---------- Training: program filter + list (CMS Collection: Programs) ---------- */
.programs_filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.75rem; margin-bottom: var(--space-small); }
.programs_filter-group { display: flex; flex-direction: column; gap: 0.4rem; }
.programs_filter-label {
  font-size: var(--size-text-tiny);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-navy);
}
.programs_filter-select {
  min-width: 260px;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background-color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--size-text-small);
  color: var(--color-navy);
}
.programs_count { margin-bottom: var(--space-small); font-size: 0.85rem; color: var(--color-text-light); }
.programs_row {
  display: grid;
  grid-template-columns: 2.2fr 1.6fr 1.2fr 2fr;
  gap: var(--space-small);
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-white);
  font-size: 0.92rem;
}
.programs_row.is-header {
  background-color: var(--color-bg-alt);
  font-size: var(--size-text-tiny);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-light);
}
.programs_tag {
  display: inline-block;
  margin: 0.15rem 0.25rem 0.15rem 0;
  padding: 0.1rem 0.55rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-orange-tint);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-navy);
}
.programs_tag.is-blue { background-color: var(--color-blue-tint); color: var(--color-blue-dark); }
.programs_empty { display: none; padding: var(--space-medium); text-align: center; color: var(--color-text-light); }
/* Used only by the program filter script to hide non-matching rows */
.is-hidden { display: none; }
/* Used only by the program filter script to show the "no matches" message */
.is-shown { display: block; }

/* ---------- Footer (Component) ---------- */
.footer_component { margin-top: var(--space-large); background-color: var(--color-navy-dark); color: var(--color-text-footer); }
.footer_content { padding-top: 3rem; padding-bottom: var(--space-medium); }
.footer_grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-border-dark);
}
.footer_heading { margin-top: 0; margin-bottom: 0.75rem; font-size: 0.95rem; font-weight: 700; line-height: 1.3; color: var(--color-white); }
.footer_logo { display: block; margin-bottom: 0.9rem; }
.footer_logo-image { display: block; width: 100%; max-width: 340px; height: auto; }
.footer_text { max-width: 340px; font-size: 0.88rem; }
.footer_link-list { display: flex; flex-direction: column; gap: 0.5rem; }
.footer_link { font-size: var(--size-text-small); color: var(--color-text-footer); }
.footer_link:hover { color: var(--color-white); }
.footer_address { font-style: normal; font-size: var(--size-text-small); line-height: 1.6; overflow-wrap: anywhere; }
.footer_land-ack { margin-top: var(--space-medium); margin-bottom: 0; font-size: 0.82rem; color: var(--color-text-footer-muted); }
.footer_bottom { margin-top: 1.25rem; margin-bottom: 0; font-size: 0.8rem; color: var(--color-text-footer-muted); }

/* ---------- Tablet (991px and below) ---------- */
@media (max-width: 991px) {
  .navbar_container { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .navbar_logo-image { height: 40px; }
}

/* ---------- Mobile (767px and below) ---------- */
@media (max-width: 767px) {
  .navbar_container { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .navbar_logo { align-self: stretch; }
  .navbar_logo-image { width: 100%; max-width: 300px; height: auto; }
  .navbar_menu { gap: var(--space-small); }
  .hero_heading { font-size: 2rem; }
  .footer_grid { grid-template-columns: 1fr; }
  .capability_list { grid-template-columns: 1fr; }
  .news_list.is-two-col { grid-template-columns: 1fr; }
  .programs_row { grid-template-columns: 1fr; gap: 0.25rem; }
  .programs_row.is-header { display: none; }
  /* Stacked cards: header row is hidden, so each value carries its own label */
  .programs_row { gap: 0.5rem; padding: 0.9rem; }
  .programs_row [data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.1rem;
    font-size: var(--size-text-tiny);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-light);
  }
  .programs_filter-group { width: 100%; }
  .programs_filter-select { min-width: 0; width: 100%; }
}

/* ---------- Motion (used by js/motion.js; nothing is hidden without the script) ---------- */
/* Timings live here and at the top of js/motion.js */
:root {
  --motion-reveal-duration: 0.95s;
  --motion-reveal-distance: 30px;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1); /* gentle ease-out */
  --motion-hc-fade: 0.8s;
  --motion-pulse-duration: 2s;
  --motion-header-duration: 0.35s;
}
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.stats_count { display: inline-block; font-variant-numeric: tabular-nums; }

/* Fixed header: the outer .navbar_component keeps the full height in the page flow */
html.js-nav { scroll-padding-top: var(--nav-offset, 0px); }
html.js-nav .navbar_bar { position: fixed; top: 0; right: 0; left: 0; z-index: 100; background-color: var(--color-navy); }
.navbar_component.is-scrolled .navbar_bar { box-shadow: 0 4px 16px rgba(0, 42, 80, 0.35); }
.navbar_component.is-scrolled .navbar_container { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.navbar_component.is-scrolled .navbar_logo-image { height: 34px; }
.navbar_component.no-transition,
.navbar_component.no-transition * { transition: none !important; }

/* Scroll reveal */
html.js-motion .reveal { opacity: 0; transform: translateY(var(--motion-reveal-distance)); }
html.js-motion .reveal.is-revealed { opacity: 1; transform: none; transition: opacity var(--motion-reveal-duration) var(--motion-ease), transform var(--motion-reveal-duration) var(--motion-ease); }

@media (prefers-reduced-motion: no-preference) {
  .navbar_bar { transition: box-shadow var(--motion-header-duration) ease; }
  .navbar_container { transition: padding var(--motion-header-duration) ease, gap var(--motion-header-duration) ease; }
  .navbar_logo-image { transition: height var(--motion-header-duration) ease, max-width var(--motion-header-duration) ease; }
}

@media (max-width: 991px) {
  .navbar_component.is-scrolled .navbar_container { gap: 0.4rem; }
  .navbar_component.is-scrolled .navbar_logo-image { height: 31px; }
}

@media (max-width: 767px) {
  .navbar_component.is-scrolled .navbar_logo-image { height: auto; max-width: 230px; }
  .navbar_component.is-scrolled .navbar_menu { gap: 0.35rem 1rem; }
}

/* ---------- Menu button (991px and below; added by js/motion.js) ---------- */
.navbar_toggle { display: none; }
@media (max-width: 991px) {
  html.js-menu .navbar_container { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem; }
  html.js-menu .navbar_logo { flex: 1 1 0; min-width: 0; align-self: auto; }
  html.js-menu .navbar_logo-image { width: 100%; max-width: 380px; height: auto; }
  html.js-menu .navbar_toggle {
    display: flex; flex: 0 0 auto; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.4); border-radius: var(--radius-small);
    background-color: transparent; color: var(--color-white); cursor: pointer;
  }
  html.js-menu .navbar_toggle:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; }
  .navbar_toggle-icon,
  .navbar_toggle-icon::before,
  .navbar_toggle-icon::after { display: block; width: 20px; height: 2px; border-radius: 1px; background-color: currentColor; }
  .navbar_toggle-icon { position: relative; }
  .navbar_toggle-icon::before,
  .navbar_toggle-icon::after { content: ""; position: absolute; left: 0; }
  .navbar_toggle-icon::before { top: -6px; }
  .navbar_toggle-icon::after { top: 6px; }
  /* Open: the bars become an X */
  .navbar_component.is-open .navbar_toggle-icon { background-color: transparent; }
  .navbar_component.is-open .navbar_toggle-icon::before { top: 0; transform: rotate(45deg); }
  .navbar_component.is-open .navbar_toggle-icon::after { top: 0; transform: rotate(-45deg); }
  /* Panel: hidden (and out of the tab order) until opened; drops over the page inside the fixed bar */
  html.js-menu .navbar_menu { display: none; flex-basis: 100%; flex-direction: column; gap: 0; padding: 0.5rem 0 0.75rem; }
  html.js-menu .navbar_component.is-open .navbar_menu { display: flex; }
  html.js-menu .navbar_link { padding: 0.8rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font-size: 1rem; }
  html.js-menu .navbar_link.w--current { border-bottom-color: var(--color-orange); }
  html.js-menu .navbar_component.is-scrolled .navbar_menu { gap: 0; }
  html.js-menu .navbar_component.is-scrolled .navbar_logo-image { height: auto; max-width: 300px; }
}
@media (max-width: 767px) {
  html.js-menu .navbar_logo-image { max-width: 280px; }
  html.js-menu .navbar_component.is-scrolled .navbar_logo-image { max-width: 230px; }
}
@media (max-width: 991px) and (prefers-reduced-motion: no-preference) {
  @keyframes menu-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  html.js-menu .navbar_component.is-open .navbar_menu { animation: menu-drop 0.2s ease-out; }
  .navbar_toggle-icon::before, .navbar_toggle-icon::after { transition: transform 0.2s ease, top 0.2s ease; }
}

/* Honeycomb (moved from inline <style> in index.html so the CSP can use style-src 'self') */
.honeycomb_component{--hw:132px;--hg:6px;--cg:28px;--ht:1.75rem;--hh:calc(var(--hw)*.8660254);--hdx:calc((var(--hh) + var(--hg))*.8660254);--hdy:calc((var(--hh) + var(--hg))/2);
  max-width:860px;margin:0 auto;font-family:var(--font-body,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif)}
/* Desktop and tablet: all nine hexes sit on one shared hex grid, left to right
   Energy (trio) | Autonomous (arch) | Human Factors (mirrored trio), with a --cg gap between clusters so paired hexes are the closest points without touching. */
.honeycomb_graphic{position:relative;width:calc(var(--hdx)*6 + var(--hw) + var(--cg)*2);height:calc(var(--ht) + var(--hh)*2 + var(--hg));max-width:100%;margin:0 auto}
.honeycomb_cluster{position:absolute;margin:0;padding:0;list-style:none}
.honeycomb_cluster.is-c2{left:0;top:var(--ht)}
.honeycomb_cluster.is-c1{left:calc(var(--hdx)*2 + var(--cg));top:calc(var(--ht) + var(--hdy))}
.honeycomb_cluster.is-c3{left:calc(var(--hdx)*5 + var(--cg)*2);top:var(--ht)}
.honeycomb_cluster.is-trio{width:calc(var(--hdx) + var(--hw));height:calc(var(--hh)*2 + var(--hg))}
.honeycomb_cluster.is-arch{width:calc(var(--hdx)*2 + var(--hw));height:calc(var(--hh) + var(--hdy))}
.honeycomb_cluster-heading{position:absolute;display:flex;align-items:flex-end;box-sizing:border-box;z-index:1;margin:0;color:var(--color-navy,#003C71);font-size:.95rem;font-weight:700;line-height:1.2;letter-spacing:.005em;text-wrap:balance}
/* Headings share the band above the inner hexes */
.honeycomb_cluster.is-c2 .honeycomb_cluster-heading{left:calc(var(--hw) + 8px);top:calc(var(--ht)*-1);width:calc(var(--hdx)*3 - var(--hw) + var(--cg) - 20px);height:calc(var(--ht) + var(--hdy) - 8px)}
.honeycomb_cluster.is-c1 .honeycomb_cluster-heading{left:calc(var(--hdx) - 6px);top:calc((var(--ht) + var(--hdy))*-1);width:calc(var(--hw) + 12px);height:calc(var(--ht) + var(--hdy) - 8px);justify-content:center;text-align:center}
.honeycomb_cluster.is-c3 .honeycomb_cluster-heading{right:calc(var(--hw) + 8px);top:calc(var(--ht)*-1);width:calc(var(--hdx)*3 - var(--hw) + var(--cg) - 20px);height:calc(var(--ht) + var(--hdy) - 8px);justify-content:flex-end;text-align:right}
.honeycomb_hexes{margin:0;padding:0;list-style:none}
.honeycomb_item{position:absolute;width:var(--hw);height:var(--hh);margin:0}
.honeycomb_item:focus-within{z-index:2}
.is-trio .honeycomb_item.is-a{left:0;top:0}
.is-trio .honeycomb_item.is-b{left:var(--hdx);top:var(--hdy)}
.is-trio .honeycomb_item.is-c{left:0;top:calc(var(--hh) + var(--hg))}
.is-trio.is-mirror .honeycomb_item.is-a,.is-trio.is-mirror .honeycomb_item.is-c{left:auto;right:0}
.is-trio.is-mirror .honeycomb_item.is-b{left:auto;right:var(--hdx)}
/* Arch: Cybersecurity on top, Autonomous Systems lower left (faces Batteries), Arctic lower right (faces Simulation) */
.is-arch .honeycomb_item.is-a{left:var(--hdx);top:0}
.is-arch .honeycomb_item.is-b{left:0;top:var(--hdy)}
.is-arch .honeycomb_item.is-c{left:calc(var(--hdx)*2);top:var(--hdy)}
.honeycomb_link{position:absolute;inset:0;display:block;pointer-events:none;color:var(--color-white,#fff);text-decoration:none;outline:none}
.honeycomb_shape{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.honeycomb_hex{pointer-events:visiblePainted;fill:var(--color-navy-light,#0A4F8C);transition:fill .2s ease}
.is-c1 .honeycomb_hex{fill:var(--color-navy,#003C71)}
.honeycomb_ring{fill:none;stroke:var(--color-orange,#FF6E3B);stroke-width:3px;vector-effect:non-scaling-stroke;opacity:0;pointer-events:none}
.honeycomb_label{position:absolute;top:11%;bottom:11%;left:10%;right:10%;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:600;line-height:1.2;text-align:center;text-wrap:balance;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .honeycomb_component.is-animated .honeycomb_item,.honeycomb_component.is-animated .honeycomb_cluster-heading{opacity:0;transform:translateY(12px);transition:opacity var(--motion-hc-fade,.8s) var(--motion-ease,ease-out),transform var(--motion-hc-fade,.8s) var(--motion-ease,ease-out)}
  .honeycomb_component.is-animated .honeycomb_cluster.is-visible .honeycomb_item,.honeycomb_component.is-animated .honeycomb_cluster.is-visible .honeycomb_cluster-heading{opacity:1;transform:none}
  /* After the sequence: pulse the two linked pairs once (Batteries + Autonomous Systems, then Arctic + Simulation) */
  @keyframes honeycomb-pulse{0%{opacity:0}30%{opacity:1}70%{opacity:1}100%{opacity:0}}
  .honeycomb_component.is-linked-a .is-c2 .honeycomb_item.is-b .honeycomb_ring,.honeycomb_component.is-linked-a .is-c1 .honeycomb_item.is-b .honeycomb_ring{animation:honeycomb-pulse var(--motion-pulse-duration,2s) ease-in-out 1}
  .honeycomb_component.is-linked-b .is-c1 .honeycomb_item.is-c .honeycomb_ring,.honeycomb_component.is-linked-b .is-c3 .honeycomb_item.is-b .honeycomb_ring{animation:honeycomb-pulse var(--motion-pulse-duration,2s) ease-in-out 1}
}
@media (forced-colors:active){
  .honeycomb_cluster .honeycomb_hex{fill:Canvas;stroke:CanvasText;stroke-width:1.5px;vector-effect:non-scaling-stroke}
  .honeycomb_link{color:CanvasText}
  .honeycomb_ring{stroke:Highlight}
}
@media (max-width:991px){
  .honeycomb_component{--hw:116px;--cg:20px;max-width:720px}
  .honeycomb_label{font-size:.75rem;left:9%;right:9%}
  .honeycomb_cluster-heading{font-size:.9rem}
}
/* Mobile: one column, Energy then Autonomous then Human Factors; each cluster becomes a trio with its heading centred above it */
@media (max-width:767px){
  .honeycomb_component{max-width:340px}
  .honeycomb_graphic{display:flex;flex-direction:column;align-items:center;gap:1rem;width:auto;height:auto}
  .honeycomb_cluster.is-c1,.honeycomb_cluster.is-c2,.honeycomb_cluster.is-c3{position:relative;left:auto;top:auto;margin-top:2.75rem}
  .honeycomb_cluster.is-arch{width:calc(var(--hdx) + var(--hw));height:calc(var(--hh)*2 + var(--hg))}
  .is-arch .honeycomb_item.is-a{left:0;top:0}
  .is-arch .honeycomb_item.is-b{left:var(--hdx);top:var(--hdy)}
  .is-arch .honeycomb_item.is-c{left:0;top:calc(var(--hh) + var(--hg))}
  .honeycomb_cluster.is-c1 .honeycomb_cluster-heading,.honeycomb_cluster.is-c2 .honeycomb_cluster-heading,.honeycomb_cluster.is-c3 .honeycomb_cluster-heading{left:-1rem;right:-1rem;top:-2.6rem;width:auto;height:2.3rem;justify-content:center;text-align:center}
}