/* =====================================================================
   FSDC Aerosolutions — About page layer
   =====================================================================
   Repairs and modernises the theme sections on /about/ without leaving the
   existing visual language:

     1. Product range      — replaces the broken 3-image / 4-label hover grid
     2. Watermark          — the 140px rotated heading escaped the viewport
     3. Expertise bars     — the wireframe aircraft sat on top of the labels
     4. Journey timeline   — an empty column left a screen-height gap
     5. Intro collage      — overlapping absolute images collapsed on mobile
     6. Responsive pass    — 390 / 768 / 1024 / 1440
   ===================================================================== */

.ab-eyebrow {
  font-family: ui-monospace, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #0f8fa1;
  margin: 0 0 12px;
}
.ab-h2 {
  text-transform: none;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: #081a2b;
  margin: 0 0 14px;
}
.ab-lede {
  color: #3d4f5c;
  font-size: 1.03rem;
  line-height: 1.72;
  max-width: 62ch;
  margin: 0;
}

/* ---------- 1. Product range ---------- */
.ab-products { background: #f5f9fb; }
.ab-products__head { max-width: 720px; margin: 0 0 40px; }
.ab-products__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 24px;
}
.ab-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e3eaef;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .34s cubic-bezier(.2, .7, .3, 1), box-shadow .34s ease, border-color .34s ease;
}
.ab-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 22px 48px rgba(8, 26, 43, .13);
  border-color: rgba(24, 190, 210, .5);
}
.ab-card:focus-visible { outline: 3px solid #18bed2; outline-offset: 3px; }
.ab-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #0b2337;
}
.ab-card__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  transition: transform .7s cubic-bezier(.2, .7, .3, 1);
}
.ab-card:hover .ab-card__media img { transform: scale(1.06); }
.ab-card__body { display: block; padding: 20px 22px 24px; }
.ab-card__tag {
  display: block;
  font-family: ui-monospace, Consolas, monospace;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6b8290;
  margin-bottom: 9px;
}
.ab-card__title {
  display: block;
  font-size: 1.14rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #081a2b;
  line-height: 1.25;
  margin-bottom: 10px;
}
.ab-card:hover .ab-card__title { color: #0d7f90; }
.ab-card__text { display: block; color: #4a5f6d; font-size: .93rem; line-height: 1.66; margin-bottom: 16px; }
.ab-card__go {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #0d7f90;
}
.ab-card__go i { transition: transform .3s ease; }
.ab-card:hover .ab-card__go i { transform: translateX(4px); }

/* ---------- 2. Rotated watermark containment ---------- */
/* The decorative 140px heading is absolutely positioned and rotated; without
   a clip it extends past the viewport edge and adds a horizontal scrollbar. */
.gt-team-section-2,
.gt-about-section,
.gt-feature-section-5 { overflow-x: clip; }
.gt-team-section-2 .gt-sub-title,
.gt-cta-section .gt-sub-title {
  pointer-events: none;
  max-width: 100vw;
}
@media (max-width: 2200px) {
  .gt-team-section-2 .gt-sub-title { display: none !important; }
}

/* ---------- 3. Expertise / skill bars ---------- */
/* The wireframe aircraft is decorative and was overlapping the labels and
   percentages, which made both hard to read. */
.gt-skill-feature-items,
.gt-about-content .gt-skill-feature-items { position: relative; z-index: 2; }
.gt-about-wrapper .gt-plane-shape,
.gt-feature-section-5 .gt-plane-shape,
.gt-skill-wrapper .gt-shape-img {
  z-index: 0;
  opacity: .28;
  pointer-events: none;
}
.gt-progress-value,
.gt-skill-feature .gt-progress-value {
  position: relative;
  z-index: 3;
  text-shadow: 0 1px 6px rgba(8, 26, 43, .55);
}
.gt-progress,
.gt-skill-feature .gt-progress { position: relative; z-index: 3; }

/* ---------- 4. Journey timeline gaps ---------- */
/* Rows whose only child is an empty column reserved a full screen of height. */
.gt-journey-wrapper .row > [class*="col-"]:empty,
.gt-feature-wrapper-5 .row > [class*="col-"]:empty,
.gt-feature-wrapper-5 .row > div:empty { display: none; }
.gt-feature-section-5 .gt-feature-wrapper-5 { min-height: 0; }

/* ---------- 4a. Hero banner sizing ----------
   The banner photograph is 1920x882 (2.18:1) but the hero section runs about
   1030px tall on desktop and 1270px on mobile. `background-size: cover` has to
   scale a 2.18:1 image to fill a 1.4:1 (desktop) or 0.31:1 (mobile) box, which
   blows it up to ~2240px / ~2770px wide and crops most of it away — the image
   reads as enormously zoomed.

   Instead the photograph is laid in at its natural aspect across the full
   width, and the brand navy fills whatever is left. The gradient scrim in 4b
   sits on top, so the join is invisible. */
/* The decorative line graphic is a 1365x936 PNG that the theme leaves in
   normal flow above 1919px, where it pushed the hero from 924px to 1860px
   tall. A taller box makes `cover` zoom the banner harder, which is what read
   as "the background image is huge" on large monitors. It is decoration, so
   it belongs out of flow at every width. */
.about-page .gt-hero-section .gt-line-shape {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  max-height: 100%;
  overflow: hidden;
  pointer-events: none;
  opacity: .5;
}
.about-page .gt-hero-section .gt-line-shape img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: cover;
}

.about-page .gt-hero-section {
  /* A scrim over the photograph. The scrim reaches solid navy before the foot
     of the section, so wherever the photo ends there is no visible seam. */
  background-image:
    linear-gradient(180deg,
      rgba(7, 22, 38, .55) 0%,
      rgba(7, 22, 38, .70) 38%,
      rgba(7, 22, 38, .93) 72%,
      #071626 92%),
    url('../img/home/hero-bg.webp') !important;
  background-size: cover, 100% auto;
  background-position: center center, center top;
  background-repeat: no-repeat, no-repeat;
  background-color: #071626;
}

/* With the hero back to its natural ~924px, the section aspect (1.56:1 at
   1440, 2.08:1 at 1920) is close enough to the banner's 2.18:1 that `cover`
   only scales it about 1.05x — so from large-tablet up the photograph can
   simply fill the box. Below that the section is far taller than it is wide
   and `cover` would have to zoom hard, so the natural-aspect rule above
   stands. */
@media (min-width: 992px) {
  .about-page .gt-hero-section { background-size: cover, cover; }
}

/* Beyond 1920px the source would be stretched past its native width by the
   browser. This variant is resampled offline (Lanczos + unsharp), which holds
   up better than a bilinear upscale, and it costs 112KB only on the displays
   that actually need it. */
@media (min-width: 1921px) {
  .about-page .gt-hero-section {
    background-image:
      linear-gradient(180deg,
        rgba(7, 22, 38, .55) 0%,
        rgba(7, 22, 38, .70) 38%,
        rgba(7, 22, 38, .93) 72%,
        #071626 92%),
      url('../img/home/hero-bg-2560.webp') !important;
  }
}

@media (max-width: 767px) {
  /* At phone width the photograph would be a 390x179 strip above a screen of
     flat colour. The gradient alone is cleaner. The banner URL is set in a
     style attribute on the element, so !important is required to replace it. */
  .about-page .gt-hero-section {
    background-image: linear-gradient(165deg, #071626 0%, #0b2337 55%, #0e3048 100%) !important;
    background-color: #071626;
  }
}

/* ---------- 4b. Legibility over the photographic hero ---------- */
/* The hero sits on a busy photograph. Body copy inherited a mid-grey that
   drops below an accessible contrast ratio over the lighter regions. */
.about-page .gt-hero-section p,
.about-page .gt-hero-section li {
  color: #e8f1f6;
  text-shadow: 0 1px 8px rgba(4, 14, 24, .75);
}
/* The scrim now lives in the background stack above (4a), so no overlay
   pseudo-element is needed here — a second one would double-darken. */
.about-page .gt-hero-section > * { position: relative; z-index: 1; }

/* ---------- 5. Intro collage ---------- */
.gt-about-image,
.gt-about-thumb { position: relative; }
.gt-about-image img,
.gt-about-thumb img { max-width: 100%; height: auto; }

/* ---------- 6. Responsive ---------- */
@media (max-width: 1199px) {
  .ab-products__grid { gap: 20px; }
}
@media (max-width: 991px) {
  .ab-products__head { margin-bottom: 30px; }
  /* Absolutely-positioned collage pieces stack instead of overlapping */
  .gt-about-section .gt-about-image [class*="shape"],
  .gt-about-section .gt-counter-box-items { position: static !important; margin-top: 16px; }
}
@media (max-width: 767px) {
  /* Justified text at phone width opens rivers of whitespace between words
     because there are so few words per line. Ragged-right reads better. */
  .about-page p,
  .about-page li { text-align: left !important; hyphens: none; }

  .ab-products { padding-top: 48px; padding-bottom: 52px; }
  .ab-products__grid { grid-template-columns: 1fr; gap: 18px; }
  .ab-card__media { aspect-ratio: 16 / 9; }
  .ab-card__body { padding: 17px 18px 20px; }
  .ab-lede { font-size: .98rem; }

  /* Decorative shapes are noise at phone width */
  .gt-flag-shape,
  .horse-shape,
  .gt-bg-shape,
  .gt-about-shape,
  .gt-line-shape,
  .gt-vector-shape { display: none !important; }

  /* Section padding on this theme is 120px top and bottom on mobile */
  .about-page .section-padding { padding-top: 52px; padding-bottom: 56px; }
}
@media (max-width: 479px) {
  .ab-h2 { font-size: 1.5rem; }
  .ab-card__title { font-size: 1.05rem; }
}

/* =====================================================================
   7. DESIGN ELEVATION
   ---------------------------------------------------------------------
   The stock theme sections are generic: flat cards, inconsistent rhythm,
   oversized decorative art and an unconstrained hero. This pass gives the
   page one type scale, one spacing rhythm and one card language, matching
   the flight-test-report look used on the event stories.
   ===================================================================== */

.about-page {
  --ab-navy: #071626;
  --ab-navy-2: #0b2337;
  --ab-cyan: #18bed2;
  --ab-cyan-soft: #8ce3ef;
  --ab-ink: #101d27;
  --ab-body: #3d4f5c;
  --ab-muted: #6b8290;
  --ab-line: #dfe8ee;
  --ab-paper-2: #f4f8fa;
  --ab-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --ab-shadow: 0 12px 32px rgba(7, 22, 38, .09);
  --ab-shadow-lg: 0 28px 64px rgba(7, 22, 38, .16);
}

/* ---------- 7.1 Vertical rhythm ---------- */
/* The theme ships 120px top and bottom on every section, which reads as
   drift rather than structure. */
.about-page .section-padding { padding-top: 88px; padding-bottom: 92px; }
.about-page .section-padding.pt-0 { padding-top: 0; }

/* ---------- 7.2 Hero ---------- */
.about-page .gt-hero-section {
  padding-top: 172px;
  padding-bottom: 76px;
  position: relative;
}
.about-page .gt-hero-section .row { margin-top: 0 !important; align-items: center; }

/* The product render was unconstrained -- 696x871 at tablet width, which
   pushed the hero to nearly 1500px tall. */
.about-page .gt-hero-image { display: flex; align-items: center; justify-content: center; }
.about-page .gt-hero-image img {
  width: 100%;
  height: auto;
  max-height: 540px;
  object-fit: contain;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .55));
}

.about-page .gt-hero-section .gt-sub-title,
.about-page .gt-hero-section .gt-section-title h6 {
  font-family: var(--ab-mono);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ab-cyan);
}
.about-page .gt-hero-section h1,
.about-page .gt-hero-section h2 {
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.035em;
  text-transform: none;
  color: #fff;
}
.about-page .gt-hero-section p {
  max-width: 56ch;
  font-size: 1.02rem;
  line-height: 1.72;
}

/* ---------- 7.3 Shared section header ---------- */
.about-page .gt-section-title h6 {
  font-family: var(--ab-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #0f8fa1;
  margin-bottom: 12px;
}
.about-page .gt-section-title h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  text-transform: none;
}
.about-page .gt-section-title.text-center { max-width: 720px; margin-inline: auto; }

/* ---------- 7.4 Body copy ---------- */
.about-page p { color: var(--ab-body); line-height: 1.74; }
.about-page .gt-text,
.about-page .gt-about-content p { font-size: 1.01rem; max-width: 64ch; }

/* ---------- 7.5 Skill bars ---------- */
.about-page .gt-progress-value {
  font-family: var(--ab-mono);
  font-size: .78rem;
  letter-spacing: .08em;
}
.about-page .gt-progress {
  height: 6px;
  border-radius: 999px;
  background: rgba(24, 190, 210, .14);
  overflow: hidden;
}
.about-page .gt-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ab-cyan), var(--ab-cyan-soft));
}

/* ---------- 7.6 Box cards ---------- */
.about-page .gt-about-box-item {
  background: #fff;
  border: 1px solid var(--ab-line);
  border-radius: 16px;
  padding: 30px 26px;
  height: 100%;
  transition: transform .34s cubic-bezier(.2, .7, .3, 1), box-shadow .34s ease, border-color .34s ease;
}
.about-page .gt-about-box-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--ab-shadow-lg);
  border-color: rgba(24, 190, 210, .5);
}
.about-page .gt-about-box-item h3,
.about-page .gt-box-content h3 {
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--ab-navy);
  margin-bottom: 10px;
}
.about-page .gt-about-box-item p { font-size: .94rem; line-height: 1.66; }
.about-page .date-box {
  font-family: var(--ab-mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #0f8fa1;
}

/* ---------- 7.7 Vision / mission / values ---------- */
.about-page .gt-feature-item-3 {
  position: relative;
  background: #fff;
  border: 1px solid var(--ab-line);
  border-radius: 18px;
  padding: 34px 30px;
  height: 100%;
  overflow: hidden;
  transition: transform .34s cubic-bezier(.2, .7, .3, 1), box-shadow .34s ease, border-color .34s ease;
}
.about-page .gt-feature-item-3::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ab-cyan), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
.about-page .gt-feature-item-3:hover {
  transform: translateY(-7px);
  box-shadow: var(--ab-shadow-lg);
  border-color: rgba(24, 190, 210, .45);
}
.about-page .gt-feature-item-3:hover::before { transform: scaleX(1); }
/* `.gt-icon-item` is the wrapper holding the icon *and* the <h3>, so it must
   stay a layout row — sizing it like the badge stacks the heading on top of
   the paragraph. Only `.icon` is the badge. */
.about-page .gt-feature-item-3 .gt-icon-item {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.about-page .gt-feature-item-3 .icon {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(24, 190, 210, .12);
  color: var(--ab-cyan);
  font-size: 1.45rem;
  margin: 0;
}
.about-page .gt-feature-item-3 .gt-icon-item h3 {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--ab-navy);
  margin: 0;
}
/* The theme centres this copy, which fights the left-aligned title row. */
.about-page .gt-feature-item-3 p {
  font-size: .96rem;
  line-height: 1.7;
  margin-bottom: 0;
  text-align: left;
}

/* ---------- 7.8 Capability band (dark) ---------- */
.about-page .gt-feature-section-5 { background-color: var(--ab-navy); }
.about-page .gt-feature-section-5 h2,
.about-page .gt-feature-section-5 h3 { text-transform: none; letter-spacing: -.02em; }
.about-page .gt-feature-section-5 h3 { font-size: 1.08rem; font-weight: 700; }
.about-page .gt-feature-section-5 p { color: #a8c6d6; font-size: .97rem; }
.about-page .gt-feature-section-5 .gt-feature-item,
.about-page .gt-feature-section-5 .gt-feature-box-items {
  border: 1px solid rgba(140, 227, 239, .18);
  border-radius: 16px;
  padding: 26px 24px;
  background: rgba(255, 255, 255, .03);
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.about-page .gt-feature-section-5 .gt-feature-item:hover,
.about-page .gt-feature-section-5 .gt-feature-box-items:hover {
  background: rgba(24, 190, 210, .08);
  border-color: rgba(24, 190, 210, .45);
  transform: translateY(-4px);
}

/* ---------- 7.9 Journey timeline ---------- */
.about-page .new-journey-section { background: var(--ab-paper-2); }
.about-page .milestone-card,
.about-page .journey-card {
  border-radius: 16px;
  border: 1px solid var(--ab-line);
  box-shadow: var(--ab-shadow);
  transition: transform .34s cubic-bezier(.2, .7, .3, 1), box-shadow .34s ease;
}
.about-page .milestone-card:hover,
.about-page .journey-card:hover { transform: translateY(-5px); box-shadow: var(--ab-shadow-lg); }
.about-page .card-title { text-transform: none; letter-spacing: -.02em; font-weight: 800; }
.about-page .month-tag,
.about-page .year-badge { font-family: var(--ab-mono); letter-spacing: .12em; text-transform: uppercase; }

/* ---------- 7.10 Buttons ---------- */
.about-page .gt-theme-btn { border-radius: 999px; overflow: hidden; }

/* ---------- 7.11 Decorative restraint ---------- */
/* Oversized theme ornaments compete with the content at every breakpoint. */
.about-page .gt-left-shape,
.about-page .gt-right-shape,
.about-page .gt-right-top-shape,
.about-page .gt-bg-shape,
.about-page .particles-overlay { opacity: .35; pointer-events: none; }

/* ---------- 7.12 Responsive ---------- */
@media (max-width: 1199px) {
  .about-page .gt-hero-image img { max-height: 430px; }
}
@media (max-width: 991px) {
  .about-page .section-padding { padding-top: 64px; padding-bottom: 68px; }
  .about-page .gt-hero-section { padding-top: 140px; padding-bottom: 56px; }
  .about-page .gt-hero-image img { max-height: 360px; }
  .about-page .gt-hero-section .row { row-gap: 28px; }
}
@media (max-width: 767px) {
  .about-page .section-padding { padding-top: 52px; padding-bottom: 56px; }
  .about-page .gt-hero-section { padding-top: 118px; padding-bottom: 44px; }
  .about-page .gt-hero-image img { max-height: 280px; }
  .about-page .gt-feature-item-3 { padding: 26px 22px; }
  .about-page .gt-about-box-item { padding: 24px 20px; }
  .about-page .gt-left-shape,
  .about-page .gt-right-shape,
  .about-page .gt-right-top-shape,
  .about-page .gt-bg-shape { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .about-page .gt-feature-item-3,
  .about-page .gt-about-box-item,
  .about-page .milestone-card,
  .about-page .ab-card { transition: none !important; }
  .about-page .gt-feature-item-3:hover,
  .about-page .gt-about-box-item:hover,
  .about-page .milestone-card:hover,
  .about-page .ab-card:hover { transform: none !important; }
}


/* ---------- 7.13 3D canvas backdrop ---------- */
/* The wireframe aircraft is rendered into a full-bleed <canvas>. Without an
   explicit stacking order it paints over the expertise bars and their labels. */
.about-page #bg-3d-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: .5;
  pointer-events: none;
}
.about-page #feature-3d-section { position: relative; }
.about-page #feature-3d-section > .container { position: relative; z-index: 2; }

/* ---------- 7.14 Animated cloud divider ----------
   Two problems with the theme's treatment:
     1. The shape sits in normal flow, so it landed where the content ended
        and left the hero's padding-bottom showing as a navy strip beneath it.
     2. It is hidden below 1400px, so most screens got no transition at all.
   Pinning it to the foot of the hero puts the pattern at the blue edge, where
   it blends the navy into the section below at every width. */
.about-page .gt-hero-section .gt-line-shape-animation {
  display: block !important;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;            /* -1px hides sub-pixel seams on fractional zoom */
  height: clamp(34px, 5.2vw, 99px);
  background-size: auto 100%;
  background-repeat: repeat-x;
  z-index: 12;
  pointer-events: none;
}

/* Keep hero content clear of the divider it now sits behind. */
.about-page .gt-hero-section { padding-bottom: clamp(62px, 8vw, 130px); }