/* ==========================================================================
   /about_us — Company cluster "About us" page.
   Page-specific layout only. Reuses inner.css (.ihero, .grad-head, .body-copy,
   .two-col, .ipanel) + site.css tokens/buttons. No 2nd-level submenu on live.
   ========================================================================== */

/* ------------------------------------------------------------ 01 HERO */
/* Reuse the shared .ihero dark-art template but swap in the about-us art
   (mesh-left / red-glow-right) and lay out a centered title + intro + 4-up
   product-card grid instead of the video/copy split. */
.ihero--about {
  /* background art inherited from .ihero (shared canonical /img/hero-bg.png) */
  padding: 64px 0 96px;
}
.ihero--about .ihero-inner { position: relative; z-index: 1; }
.about-hero-title { margin: 40px 0 26px; }
.about-hero-intro {
  text-align: center;
  font-size: 20px;
  line-height: 1.55;
  font-weight: 400;
  color: #fff;
  max-width: 780px;
  margin: 0 auto 56px;
}

/* 4-up product-card grid.
   Each tile SVG is the ENTIRE card (276x434: rounded rect, illustration,
   title and body text baked in as vector paths) — exported that way from
   Tilda on v736. The card just renders the SVG full-size; the white
   variant shows at rest, the grey (#F0F4F8) variant fades in on hover
   (matches the v736 sbs hover animation). The HTML title/body duplicate
   the baked-in text, so they're visually hidden but kept for SEO/AT. */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.prod-card {
  position: relative;
  display: block;
  aspect-ratio: 276 / 434;
  text-decoration: none;
}
.prod-illus {
  position: absolute;
  inset: 0;
  display: block;
}
.prod-illus img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity .2s ease;
}
.prod-illus .prod-illus-hover { opacity: 0; }
.prod-card:hover .prod-illus-default { opacity: 0; }
.prod-card:hover .prod-illus-hover { opacity: 1; }
/* Screen-reader-only: text is baked into the tile SVGs */
.prod-card-title,
.prod-card-body {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------- 02 TIMELINE */
.timeline-sec { padding: 64px 0 72px; }
.timeline-img { width: 100%; height: auto; display: block; }
.timeline-img--desktop { display: block; }
.timeline-img--mobile { display: none; max-width: 420px; margin: 0 auto; }

/* --------------------------------------------- 03 A TRUSTED PARTNER */
.trusted-card { padding: 56px 64px; border-radius: 40px; }
.trusted-card .grad-head { margin-bottom: 26px; }
.trusted-card .body-copy { max-width: 1000px; }
.trusted-card a { color: #4a7fe0; text-decoration: none; }
.trusted-card a:hover { text-decoration: underline; }
.cert-row {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 34px;
}
.cert-row img { height: 62px; width: auto; display: block; }
.cert-row .cert-tcf { height: 62px; }
.cert-row .cert-badges { height: 62px; }
.cert-row .cert-illus { height: 46px; }

/* ------------------------------------------------------ 04 LOCATIONS */
.locations-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  max-width: 940px;
}
.location-card figure { margin: 0; }
.location-card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 18px;
  display: block;
}
.location-card figcaption {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-top: 18px;
}

/* -------------------------------------------------------- 05 CAREERS */
.careers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.careers-copy { padding: 44px 52px; }
.careers-copy .body-copy { font-size: 16px; }
.careers-copy .pill-btn { margin-top: 30px; }

/* team-photo mosaic — two staggered columns (same at all widths) */
.careers-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.mosaic-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.careers-mosaic img {
  width: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}
.mosaic-col--left img:nth-child(1) { height: 258px; }
.mosaic-col--left img:nth-child(2) { height: 116px; }
.mosaic-col--left img:nth-child(3) { height: 116px; }
.mosaic-col--right img:nth-child(1) { height: 150px; }
.mosaic-col--right img:nth-child(2) { height: 174px; }
.mosaic-col--right img:nth-child(3) { height: 166px; }

/* -------------------------------------------------- 06 SIDE PROJECTS */
.side-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 60px;
  align-items: start;
}
.side-photo {
  width: 100%;
  height: auto;
  border-radius: 18px;
  display: block;
}
.side-copy { padding-top: 8px; }
.hyranking-logo { width: 200px; height: auto; display: block; margin: 0 0 24px; }
.side-copy .body-copy { max-width: 460px; }
.side-copy a { color: var(--navy); font-weight: 700; text-decoration: none; }
.side-copy a:hover { text-decoration: underline; }

/* ==========================================================================
   Mobile
   ========================================================================== */
@media screen and (max-width: 900px) {
  .prod-grid { grid-template-columns: 1fr; gap: 24px; }
  .prod-card { width: 100%; max-width: 320px; margin: 0 auto; }
  .careers-grid { grid-template-columns: 1fr; gap: 32px; }
  .locations-grid { grid-template-columns: 1fr; gap: 32px; }
  .side-grid { grid-template-columns: 1fr; gap: 30px; }
  .side-photo { max-width: 320px; }
}

@media screen and (max-width: 640px) {
  .about-hero-title { margin-top: 24px; }
  .about-hero-intro { font-size: 16px; margin-bottom: 40px; }
  .timeline-img--desktop { display: none; }
  .timeline-img--mobile { display: block; }
  .trusted-card { padding: 34px 26px; }
  .careers-copy { padding: 32px 28px; }
  .cert-row { gap: 24px; }
  .cert-row img, .cert-row .cert-tcf, .cert-row .cert-badges { height: 50px; }
  .cert-row .cert-illus { height: 38px; }
}