/*--------------------------------------------------
  Aero Show / Defence Expo experience page
  Scoped to .aero-show so nothing here leaks into
  the other pages that share illuminum.css.
  Theme is driven by tokens: body.light flips them.
---------------------------------------------------*/

.aero-show {
  --as-bg: #0f0f0f;
  --as-surface: #161616;
  --as-surface-2: #1d1d1d;
  --as-line: rgba(255, 255, 255, 0.12);
  --as-line-strong: rgba(255, 255, 255, 0.24);
  --as-text: #ffffff;
  --as-text-muted: #a0a0a0;
  --as-text-dim: #909090;
  --as-accent: #38bdf8;
  --as-accent-ink: #0b1620;
}

.aero-show.light {
  --as-bg: #ffffff;
  --as-surface: #f6f7f9;
  --as-surface-2: #eef1f5;
  --as-line: rgba(15, 23, 42, 0.12);
  --as-line-strong: rgba(15, 23, 42, 0.26);
  --as-text: #101418;
  --as-text-muted: #515b66;
  --as-text-dim: #5c6773;
  --as-accent: #0369a1;
  --as-accent-ink: #ffffff;
}

/*--------------------------------------------------
  01. Hero
---------------------------------------------------*/

/* The site pins .text-carousel with position:fixed and unpins it via JS
   that keys off a #banner_video this page doesn't have, so it stayed
   stuck on screen over every section below. The hero sits in normal
   flow instead and scrolls away like ordinary content. The exclusion
   blend still works, so the text keeps inverting against the banner. */
.aero-show .section_1 .text-div {
  position: static;
  width: auto;
  /* Top padding clears the fixed header; the logo sits at its left edge
     and the headline starts on the same x, so they collide without it. */
  padding: 84px 60px 30px;
}

.aero-show .section_1 h1 {
  /* Fluid scale: no breakpoint jumps, and never oversized on a big monitor */
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-top: 10px;
  margin-bottom: 0;
  font-family: Poppins-Medium;
}

.aero-show .section_1 span.hero_sub {
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.45;
  color: #d0d0d0;
  font-family: Poppins-Regular;
  display: block;
}

.aero-show .div--dark {
  height: 0;
}

.aero-show .section_1 .div--light {
  position: relative;
}

/* The source is only 1024x512. Stretched edge to edge it was upscaled
   ~1.9x on a large monitor, which is what made it look soft. Capping the
   width keeps it near native resolution, and capping the height stops it
   dominating the fold. */
.aero-show .section_1 .div--light {
  padding: 0 60px;
}

/* The source is 1024x512. Capping at exactly that width renders it 1:1 -
   no upscaling, so this is as sharp as the file allows - and with height
   auto the whole frame is shown rather than a crop. */
.aero-show .hero_banner {
  width: 100%;
  max-width: 1024px;
  height: auto;
  border-radius: 14px;
  display: block;
  margin: 0 auto;
}

/*--------------------------------------------------
  02. Intro statement
---------------------------------------------------*/

.aero-show .section_2 .reveal_type {
  font-size: clamp(25px, 3vw, 42px);
  color: var(--as-text);
  line-height: 1.45;
  letter-spacing: -0.01em;
  font-family: Poppins-Medium;
}

/* The inherited 110px/60px section padding was sized for 86px display type */
.aero-show .section_2 {
  padding: 64px 60px;
}

/* Fills the empty col-xl-4 the site's intro layout leaves on the left.
   Sticky so it tracks the statement as it reveals on scroll. */
.aero-show .as_intro_figure {
  margin: 0;
  max-width: 330px;
  position: sticky;
  top: 120px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--as-line);
}

.aero-show .as_intro_figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.aero-show .as_intro_figure figcaption {
  padding: 14px 16px;
  background-color: var(--as-surface);
  font-family: Poppins-Regular;
  font-size: 13px;
  line-height: 1.5;
  color: var(--as-text-muted);
}

/*--------------------------------------------------
  03. Generic section furniture
---------------------------------------------------*/

.aero-show .as_section {
  padding: 90px 60px;
  background-color: var(--as-bg);
  position: relative;
  z-index: 2;
}

.aero-show .as_section_head {
  max-width: 900px;
  margin-bottom: 52px;
}

.aero-show .as_kicker {
  display: block;
  font-family: Poppins-Medium;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--as-accent);
  margin-bottom: 16px;
}

.aero-show .as_section_head h2 {
  font-size: 52px;
  line-height: 1.12;
  font-family: Poppins-Medium;
  color: var(--as-text);
  margin-bottom: 18px;
}

.aero-show .as_section_head p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--as-text-muted);
  font-family: Poppins-Regular;
  margin-bottom: 0;
}

/*--------------------------------------------------
  04. Aero India 2027 call-out band
---------------------------------------------------*/

.aero-show .as_band {
  background-color: var(--as-surface);
  border-top: 1px solid var(--as-line);
  border-bottom: 1px solid var(--as-line);
}

.aero-show .as_band_grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 60px;
  align-items: center;
}

.aero-show .as_band h2 {
  font-size: 48px;
  line-height: 1.12;
  font-family: Poppins-Medium;
  color: var(--as-text);
  margin-bottom: 22px;
}

.aero-show .as_band p {
  font-size: 18px;
  line-height: 1.75;
  color: var(--as-text-muted);
  font-family: Poppins-Regular;
}

.aero-show .as_quote {
  border-left: 3px solid var(--as-accent);
  padding: 4px 0 4px 22px;
  margin: 28px 0 0;
  font-size: 19px;
  line-height: 1.6;
  font-style: italic;
  color: var(--as-text);
  font-family: Poppins-Regular;
}

.aero-show .as_countdown {
  background-color: var(--as-bg);
  border: 1px solid var(--as-line);
  border-radius: 14px;
  padding: 36px;
}

.aero-show .as_countdown dl {
  margin: 0;
}

.aero-show .as_countdown div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--as-line);
}

.aero-show .as_countdown div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.aero-show .as_countdown dt {
  font-family: Poppins-Regular;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--as-text-dim);
  font-weight: 400;
}

.aero-show .as_countdown dd {
  margin: 0;
  font-family: Poppins-Medium;
  font-size: 18px;
  color: var(--as-text);
  text-align: right;
}

/*--------------------------------------------------
  05. Capability cards
---------------------------------------------------*/

.aero-show .as_cap_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.aero-show .as_cap {
  background-color: var(--as-surface);
  border: 1px solid var(--as-line);
  border-radius: 14px;
  padding: 30px 26px 32px;
  transition: transform 0.35s ease, border-color 0.35s ease,
    background-color 0.35s ease;
}

.aero-show .as_cap:hover {
  transform: translateY(-6px);
  border-color: var(--as-accent);
  background-color: var(--as-surface-2);
}

.aero-show .as_cap_num {
  display: block;
  font-family: Inter-Medium;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--as-accent);
  margin-bottom: 18px;
}

.aero-show .as_cap h3 {
  font-size: 21px;
  line-height: 1.3;
  font-family: Poppins-Medium;
  color: var(--as-text);
  margin-bottom: 12px;
}

.aero-show .as_cap p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--as-text-muted);
  font-family: Poppins-Regular;
  margin-bottom: 0;
}

/*--------------------------------------------------
  05b. Comparison table
---------------------------------------------------*/

/* Narrow screens scroll the table sideways rather than crushing
   three columns of prose into unreadable slivers. */
.aero-show .as_table_wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--as-line);
  border-radius: 14px;
  background-color: var(--as-bg);
}

.aero-show .as_table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-family: Poppins-Regular;
}

.aero-show .as_table th,
.aero-show .as_table td {
  text-align: left;
  vertical-align: top;
  padding: 18px 22px;
  font-size: 15px;
  line-height: 1.6;
  border-bottom: 1px solid var(--as-line);
}

.aero-show .as_table thead th {
  font-family: Poppins-Medium;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--as-text);
  background-color: var(--as-surface-2);
  white-space: nowrap;
}

.aero-show .as_table thead th:last-child {
  color: var(--as-accent);
}

.aero-show .as_table tbody th {
  font-family: Poppins-Medium;
  font-weight: 400;
  color: var(--as-text);
  width: 24%;
}

.aero-show .as_table tbody td {
  color: var(--as-text-muted);
}

.aero-show .as_table tbody td:last-child {
  color: var(--as-text);
}

.aero-show .as_table tbody tr:last-child th,
.aero-show .as_table tbody tr:last-child td {
  border-bottom: 0;
}

/*--------------------------------------------------
  06. Work: responsive card grid
---------------------------------------------------*/

.aero-show .section_7 {
  padding: 20px 0 90px;
  background-color: var(--as-bg);
  position: relative;
  z-index: 2;
}

.aero-show .section_7 .as_carousel_head {
  padding: 0 60px;
  margin-bottom: 40px;
}

/* auto-fit means the column count follows the available width instead of
   being pinned to a breakpoint, so it reflows on any screen. */
.aero-show .as_cardgrid {
  padding: 0 60px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 22px;
  /* stretch + margin-top:auto on the label lines the "Experiences
     delivered" divider up across cards whose blurbs differ in length */
  align-items: stretch;
}

.aero-show .as_card {
  display: flex;
  flex-direction: column;
  background-color: var(--as-surface);
  border: 1px solid var(--as-line);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.35s ease, border-color 0.35s ease;
}

.aero-show .as_card:hover {
  transform: translateY(-4px);
  border-color: var(--as-line-strong);
}

.aero-show .as_case_video {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: #000;
  flex: 0 0 auto;
}

.aero-show .as_case_video .video-poster {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

.aero-show .as_case_video .plyr {
  height: 100%;
}

.aero-show .as_card_body {
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.aero-show .as_case_event {
  display: block;
  font-family: Poppins-Medium;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--as-accent);
  margin-bottom: 7px;
}

.aero-show .as_card_body h3 {
  font-family: Poppins-Medium;
  font-size: 26px;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--as-text);
  margin: 0 0 3px;
}

.aero-show .as_case_city {
  display: block;
  font-family: Poppins-Regular;
  font-size: 13px;
  color: var(--as-text-dim);
  margin-bottom: 15px;
}

.aero-show .as_case_desc {
  font-family: Poppins-Regular;
  font-size: 14px;
  line-height: 1.65;
  color: var(--as-text-muted);
  margin-bottom: 18px;
}

.aero-show .as_case_label {
  font-family: Poppins-Medium;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--as-text);
  margin-bottom: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--as-line);
  margin-top: auto;
}

.aero-show .as_case_list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.aero-show .as_case_list li {
  position: relative;
  padding-left: 15px;
  font-family: Poppins-Regular;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--as-text-muted);
  margin-bottom: 4px;
}

.aero-show .as_case_list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--as-accent);
}

@media (prefers-reduced-motion: reduce) {
  .aero-show .as_card {
    transition: none;
  }

  .aero-show .as_card:hover {
    transform: none;
  }
}

/*--------------------------------------------------
  07. Fabrication gallery
---------------------------------------------------*/

/* Owl lays the slides out; the grid rules it replaced are gone. */
.aero-show .as_gallery .owl-stage {
  display: flex;
}

.aero-show .as_gallery .owl-item figure {
  height: 100%;
}

.aero-show .as_gallery .owl-dots {
  text-align: center;
  margin-top: 22px;
}

.aero-show .as_gallery .owl-dot span {
  display: block;
  width: 7px;
  height: 7px;
  margin: 0 5px;
  border-radius: 50%;
  background-color: var(--as-line-strong);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.aero-show .as_gallery .owl-dot.active span {
  background-color: var(--as-accent);
  transform: scale(1.35);
}

.aero-show .as_gallery figure {
  position: relative;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--as-surface);
}

.aero-show .as_gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.aero-show .as_gallery figure:hover img {
  transform: scale(1.06);
}

.aero-show .as_gallery figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 34px 18px 16px;
  font-family: Poppins-Regular;
  font-size: 14px;
  line-height: 1.4;
  color: #fff;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
}

.aero-show .as_gallery figure:hover figcaption {
  opacity: 1;
}

/*--------------------------------------------------
  08. FAQ accordion (native <details>, no JS)
---------------------------------------------------*/

/* Single column: an expanding item in a two-column grid shoves its
   neighbour around. Capped width keeps the answer line length readable,
   centred so the block sits under a centred heading. */
.aero-show .as_faq {
  max-width: 940px;
  margin: 0 auto;
}

/* The two Q&A sections centre their heading block; the answers themselves
   stay left-aligned, since centred body copy is hard to read. */
.aero-show #about-aero-india .as_section_head,
.aero-show #faq .as_section_head {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.aero-show #about-aero-india .as_source {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.aero-show .as_faq_item {
  border-top: 1px solid var(--as-line);
}

.aero-show .as_faq_item:last-child {
  border-bottom: 1px solid var(--as-line);
}

.aero-show .as_faq_item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
}

/* Hide the default disclosure triangle in every engine */
.aero-show .as_faq_item summary::-webkit-details-marker {
  display: none;
}

.aero-show .as_faq_item summary::marker {
  content: "";
}

.aero-show .as_faq_item summary h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.35;
  font-family: Poppins-Medium;
  color: var(--as-text);
  transition: color 0.25s ease;
}

.aero-show .as_faq_item[open] summary h3,
.aero-show .as_faq_item summary:hover h3 {
  color: var(--as-accent);
}

/* Plus sign built from two bars; the vertical one rotates away on open */
.aero-show .as_faq_icon {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 3px;
}

.aero-show .as_faq_icon::before,
.aero-show .as_faq_icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--as-text-muted);
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.aero-show .as_faq_icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.aero-show .as_faq_item[open] .as_faq_icon::before,
.aero-show .as_faq_item[open] .as_faq_icon::after {
  background-color: var(--as-accent);
}

.aero-show .as_faq_item[open] .as_faq_icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.aero-show .as_faq_answer {
  padding: 0 56px 26px 0;
}

.aero-show .as_faq_answer p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--as-text-muted);
  font-family: Poppins-Regular;
}

/* Slide the answer in on open where the browser supports it */
@supports (interpolate-size: allow-keywords) {
  .aero-show .as_faq_item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.35s ease, content-visibility 0.35s allow-discrete;
  }

  .aero-show .as_faq_item[open]::details-content {
    block-size: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aero-show .as_faq_item summary h3,
  .aero-show .as_faq_icon::before,
  .aero-show .as_faq_icon::after,
  .aero-show .as_faq_item::details-content {
    transition: none;
  }
}

.aero-show .as_source {
  margin: 30px 0 0;
  font-family: Poppins-Regular;
  font-size: 13px;
  line-height: 1.6;
  color: var(--as-text-dim);
}

.aero-show .as_source a {
  color: var(--as-accent);
  text-decoration: underline;
}

/*--------------------------------------------------
  09. Closing CTA
---------------------------------------------------*/

.aero-show .as_cta {
  text-align: center;
  border-top: 1px solid var(--as-line);
}

.aero-show .as_cta h2 {
  font-size: 56px;
  line-height: 1.1;
  font-family: Poppins-Medium;
  color: var(--as-text);
  max-width: 900px;
  margin: 0 auto 22px;
}

.aero-show .as_cta p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--as-text-muted);
  font-family: Poppins-Regular;
  max-width: 620px;
  margin: 0 auto 36px;
}

.aero-show .as_btn_row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.aero-show .as_btn {
  display: inline-block;
  font-family: Poppins-Medium;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 16px 34px;
  border-radius: 999px;
  border: 1px solid var(--as-accent);
  background-color: var(--as-accent);
  color: var(--as-accent-ink);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.aero-show .as_btn:hover {
  transform: translateY(-3px);
  opacity: 0.9;
  text-decoration: none;
  color: var(--as-accent-ink);
}

.aero-show .as_btn.as_btn_ghost {
  background-color: transparent;
  color: var(--as-text);
  border-color: var(--as-line-strong);
}

.aero-show .as_btn.as_btn_ghost:hover {
  border-color: var(--as-accent);
  color: var(--as-text);
}

/* Keyboard focus must stay visible on both themes */
.aero-show a:focus-visible,
.aero-show button:focus-visible {
  outline: 2px solid var(--as-accent);
  outline-offset: 3px;
}

/*--------------------------------------------------
  10. Responsive
---------------------------------------------------*/

@media (max-width: 1399px) {
  .aero-show .as_cap_grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1199px) {
  .aero-show .as_intro_figure {
    position: static;
    max-width: 420px;
    margin: 0 0 34px;
  }

  .aero-show .as_band_grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .aero-show .as_section_head h2,
  .aero-show .as_band h2 {
    font-size: 40px;
  }

  .aero-show .as_cta h2 {
    font-size: 42px;
  }
}

@media (max-width: 991px) {
  .aero-show .as_cap_grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .aero-show .section_1 .text-div {
    padding: 26px 24px 20px;
  }

  .aero-show .section_1 .div--light {
    padding: 0 24px;
  }

  .aero-show .section_2 {
    padding: 44px 24px;
  }

  .aero-show .section_7 .as_carousel_head,
  .aero-show .as_cardgrid {
    padding: 0 24px;
  }

  .aero-show .as_cardgrid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .aero-show .as_card_body {
    padding: 20px 20px 22px;
  }

  .aero-show .as_card_body h3 {
    font-size: 22px;
  }

  .aero-show .as_case_list {
    grid-template-columns: 1fr;
  }

  .aero-show .as_faq_item summary {
    padding: 18px 0;
    gap: 14px;
  }

  .aero-show .as_faq_item summary h3 {
    font-size: 17px;
  }

  .aero-show .as_faq_answer {
    padding: 0 30px 20px 0;
  }

  .aero-show .as_section {
    padding: 60px 24px;
  }

  .aero-show .as_section_head h2,
  .aero-show .as_band h2,
  .aero-show .as_cta h2 {
    font-size: 30px;
  }

  .aero-show .as_section_head {
    margin-bottom: 34px;
  }

  .aero-show .as_countdown {
    padding: 24px;
  }

  /* Touch devices have no hover, so captions must always show */
  .aero-show .as_gallery figcaption {
    opacity: 1;
    font-size: 12px;
    padding: 26px 12px 12px;
  }

  .aero-show .as_btn {
    width: 100%;
  }
}

@media (max-width: 479px) {
  .aero-show .as_cap_grid {
    grid-template-columns: 1fr;
  }
}

/* Respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  .aero-show .as_cap,
  .aero-show .as_gallery img,
  .aero-show .as_btn,
  .aero-show .as_gallery figcaption {
    transition: none;
  }

  .aero-show .as_cap:hover,
  .aero-show .as_btn:hover,
  .aero-show .as_gallery figure:hover img {
    transform: none;
  }
}