/*
 * Awards & Recognition page.
 *
 * Hero, trusted-by, contact-cta and faq reuse the SHARED .a3-hero /
 * .a3-trusted-by / .a3-contact-cta / .a3-faq classes from service.css,
 * which are also used by Home, Contact, Core Team, Guides, and every
 * service page. Where this page's own Figma frame (773:258) specifies
 * different type/color values than that shared component currently ships
 * with, the fix is scoped here to `.a3-awards-page` rather than edited in
 * service.css - so Awards matches its design exactly without silently
 * changing the hero/CTA/FAQ on every other page that reuses the same class.
 */

/* ---------- Hero overrides (Figma 773:264-267) ---------- */

/* The hero photo (corporate-office.jpg) is a corridor/kitchen shot with a
   floor across its bottom third. desktop-refinements.css forces a two-layer
   background-size of `cover, 104% 98.47%` (tuned for a DIFFERENT hero's
   crop, node 78:5773) plus `background-position: center center, center top`
   at (min-width:992px) with !important - same specificity class-count as a
   single `.a3-hero` override, so a plain `.a3-awards-page .a3-hero` rule for
   just background-position was actually still losing to it in the cascade
   and had no visible effect (verified: swapping the image out for a flat
   colour removed the artifact entirely, proving it's the image render, not
   a separate element). Re-stated here with an extra selector segment for
   unambiguously higher specificity, and re-asserting BOTH background-size
   and background-position together as single (non comma-separated) values,
   since this page's hero only ever renders one background image layer under
   `.a3-awards-page` - not the two-layer figure that other rule was tuned for. */
.a3-awards-page .a3-hero.a3-hero {
  background-size: cover !important;
  background-position: center 25% !important;
}

.a3-awards-page .a3-hero__heading {
  font-weight: 400;
  font-size: 72px;
  line-height: 91.2px;
  letter-spacing: -2px;
}

.a3-awards-page .a3-hero__description {
  font-size: 20px;
  line-height: 30px;
  color: #d0d4d4;
}

.a3-awards-page .a3-hero__actions .a3-btn {
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  letter-spacing: normal;
  padding: 13.5px 32px;
}

/* ---------- Trusted By overrides (Figma 773:953-964) ---------- */

.a3-awards-page .a3-trusted-by__heading {
  font-size: 56px;
  font-weight: 400;
  letter-spacing: -1.4px;
  text-transform: capitalize;
  color: #18181b;
}

.a3-awards-page .a3-trusted-by__cert-heading {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  letter-spacing: 1px;
}

/* ---------- Awards / Recognition carousel ----------
 * Coverflow-style Slick carousel matched to Figma node 773:320.
 *
 * The three card tiers in the design (center 380x460, adjacent 323x391,
 * far 266x322) are exact uniform scales of one another - 1 / 0.85 / 0.7 -
 * and every value inside them scales by the same factor (the year reads
 * 16 / 13.6 / 11.2px). So rather than restating each tier's dimensions,
 * every card is authored once at center size and the outer tiers are
 * transform: scale()d down.
 *
 * The design also lays the cards on UNIFORM 380px slots with a 48.5px gap,
 * then scales each one toward the middle of the row - which is why the
 * measured gaps look uneven (48.5px center-to-adjacent, 105.5px
 * adjacent-to-far). Reproducing that means anchoring each scale at the
 * edge facing the center: transform-origin right for slides before the
 * center, left for slides after it. awards.js tags those as .is-before /
 * .is-after. With a 380px card + 24px side margins the centered slide
 * lands at x=530..910 in a 1440 frame, exactly as in the file.
 */

.a3-awards {
  position: relative;
  overflow: hidden;
  padding: 128px 0 130px;
  background: #fafafa;
  border-top: 1px solid var(--a3-color-border, #e4e4e7);
}

.a3-awards__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 800px;
  height: 400px;
  transform: translate(-50%, -50%);
  background: rgba(255, 105, 0, 0.05);
  filter: blur(60px);
  border-radius: 50%;
  pointer-events: none;
}

.a3-awards__heading {
  max-width: 844px;
  margin: 0 auto 27px;
  font-size: 48px;
  font-weight: 500;
  line-height: 48px;
  letter-spacing: -1.2px;
  color: #18181b;
}

.a3-awards__description {
  max-width: 764px;
  margin: 0 auto 119px;
  color: #52525b;
  font-size: 16px;
  line-height: 26px;
}

.a3-awards__slider-outer {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  overflow: hidden;
}

.a3-awards__slider .slick-list {
  overflow: visible;
}

.a3-awards__slider .slick-track {
  display: flex;
  align-items: center;
}

.a3-awards__slider .slick-slide {
  opacity: 0.2;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

/* Authored at center-tier size; the outer tiers only change scale. */
.a3-awards__slider .a3-awards__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border: 1px solid var(--a3-color-border, #e4e4e7);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  width: 380px;
  min-height: 460px;
  margin: 0 24px;
  transform: scale(0.7);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Anchor each scale at the edge facing the centre of the row. */
.a3-awards__slider .slick-slide.is-before .a3-awards__card {
  transform-origin: right center;
}

.a3-awards__slider .slick-slide.is-after .a3-awards__card {
  transform-origin: left center;
}

.a3-awards__slider .slick-slide.is-adjacent {
  opacity: 0.6;
}

.a3-awards__slider .slick-slide.is-adjacent .a3-awards__card {
  transform: scale(0.85);
}

.a3-awards__slider .slick-slide.is-center {
  opacity: 1;
}

.a3-awards__slider .slick-slide.is-center .a3-awards__card {
  transform: scale(1);
  transform-origin: center;
  box-shadow:
    0 20px 25px -5px rgba(228, 228, 231, 0.5),
    0 8px 10px -6px rgba(228, 228, 231, 0.5);
}

/* Left-aligned in the design, unlike the rest of the card. */
.a3-awards__year {
  align-self: flex-start;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: #52525b;
}

/* Flexes to fill the space between the year and the caption, so badges of
   very different shapes (the 242x241 TIME frame vs the 240x77 FT bar) both
   sit centred without moving the caption off its baseline - which is where
   the design holds it on every card regardless of badge height. */
.a3-awards__badge {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 24px 0;
}

.a3-awards__badge img {
  max-width: 242px;
  max-height: 241px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.a3-awards__title,
.a3-awards__subtitle {
  font-size: 14px;
  font-weight: 400;
  line-height: 22.75px;
  color: #3f3f46;
  margin: 0;
}

/* ---------- Press / news mentions grid ---------- */

.a3-press {
  padding: 80px 24px;
  background: #fff;
  /* Divider between this section and .a3-benefits. #e4e4e7 is the divider
     tone the rest of the theme uses for exactly this (desktop-refinements
     .css puts it on .a3-contact-cta, csr.css on .a3-csr-people) rather than
     the #e7eaf0 used for card outlines. */
  border-bottom: 1px solid #e4e4e7;
}

.a3-press__heading {
  font-size: 56px;
  font-weight: 500;
  line-height: 58.8px;
  letter-spacing: -1px;
  color: #030303;
  margin-bottom: 48px;
  max-width: 640px;
}

.a3-press__card {
  position: relative;
  overflow: hidden;
  height: 100%;
  background: #fff;
  border: 1px solid #e7eaf0;
  border-radius: 24px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Optional per-card decorative background (Figma: only ThePrint/PTI have
   one - a faint 10% opacity photo with a white gradient fading it out
   toward the top, so the wordmark/headline stay fully legible). Content
   needs z-index since the bg/fade layers are absolutely positioned
   siblings, not a CSS background-image on the card itself. */
.a3-press__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.1;
}

.a3-press__bg-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* Text content only - NOT .a3-press__bg/.a3-press__bg-fade, which already
   set their own position:absolute above. A blanket `> *` here would match
   those too and, at equal specificity/later source order, win and flip
   them to position:relative - collapsing them to zero size (no content,
   no explicit dimensions) so the background image silently never painted. */
.a3-press__card--has-bg > .a3-press__outlet,
.a3-press__card--has-bg > .a3-press__headline,
.a3-press__card--has-bg > .a3-press__link {
  position: relative;
  z-index: 1;
}

/* Default outlet wordmark; each named outlet below overrides with its own
   Figma-specified font/color treatment rather than one generic style. */
.a3-press__outlet {
  font-size: 24px;
  font-weight: 700;
  color: #18181b;
}

/* Real uploaded logo, replacing the styled-text wordmark for this card. */
.a3-press__outlet-logo {
  max-width: 160px;
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.a3-press__outlet--business-standard {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 28px;
  color: #030303;
}

.a3-press__outlet--ani {
  font-family: var(--a3-font-base);
  font-weight: 700;
  font-size: 32px;
  color: #030303;
}

.a3-press__outlet--dailyhunt {
  font-family: var(--a3-font-base);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.65px;
  color: #030303;
  position: relative;
  padding-top: 24px;
}

/* The four-colour dot mark above the "dailyhunt" wordmark. */
.a3-press__outlet--dailyhunt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 12px;
  border-radius: 999px 999px 0 0;
  background: #ff9900;
  box-shadow:
    16px 0 0 0 #00cc66,
    0 16px 0 0 #3399ff,
    16px 16px 0 0 #ff3366;
}

.a3-press__outlet--theprint {
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 32px;
  color: #e64a19;
}

.a3-press__outlet--pti {
  display: inline-block;
  font-family: Menlo, monospace;
  font-weight: 700;
  font-size: 36px;
  letter-spacing: 3.6px;
  color: #ff0000;
  border: 2px dashed #ff0000;
  border-radius: 4px;
  padding: 8px 12px;
  backdrop-filter: blur(4px);
}

/* The headline (and the "View Full Story" link after it, on the one card
   that has one) sits at the BOTTOM of the card, with the outlet wordmark
   pinned to the top - so headlines of different lengths share a baseline
   across the row instead of each starting straight under its wordmark.
   `margin-top: auto` rather than the `flex-grow: 1` this used to carry:
   growing the headline box only pushed a following link down, leaving the
   headline text itself top-aligned inside the grown box. */
.a3-press__headline {
  font-size: 22px;
  line-height: 30.8px;
  letter-spacing: -0.5px;
  color: #676f7b;
  font-weight: 500;
  margin-top: auto;
}

/* Figma gives the one card with a "View Full Story" link (ThePrint, node
   773:453) a bigger, near-black headline instead of the plain grey used
   elsewhere - so a card reads as a real linked article rather than a
   quote. Weight is Inter Medium (500), same as the plain cards' headline -
   it's the larger size + near-black colour doing the "heavier" reading,
   not a bolder weight. Applies to whichever card has cta_text + a link,
   not hardcoded to a specific outlet. */
.a3-press__headline--linked {
  font-size: 24px;
  line-height: 31.2px;
  color: #030303;
  font-weight: 500;
}

.a3-press__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #030303;
  border-radius: var(--a3-radius-pill, 999px);
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  color: #030303;
  text-decoration: none;
  width: fit-content;
}

/* ---------- Benefits (Recognition -> Client Success) ---------- */

.a3-benefits {
  padding: 80px 24px;
  background: #f9fafb;
}

.a3-benefits__heading {
  font-size: 48px;
  font-weight: 400;
  line-height: 55.2px;
  letter-spacing: -1.2px;
  color: #030303;
}

.a3-benefits__description {
  color: #676f7b;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.5px;
}

.a3-benefits__card {
  height: 100%;
  background: #fff;
  border: 1px solid #e7eaf0;
  border-radius: 24px;
  padding: 48px 32px;
  text-align: center;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.a3-benefits__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  border-radius: var(--a3-radius-pill, 999px);
  background: #f9fafb;
  border: 1px solid #e7eaf0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--a3-color-orange, #ff6b1a);
}

.a3-benefits__icon img {
  max-width: 28px;
  max-height: 28px;
}

.a3-benefits__card-heading {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.5px;
  color: #030303;
  margin-bottom: 16px;
}

.a3-benefits__card-description {
  font-size: 16px;
  line-height: 1.6;
  color: #676f7b;
}

@media (max-width: 767px) {
  /* Coverflow tiers collapse to a single, full-width card per slide -
     awards.js switches Slick to slidesToShow:1/no centerMode at this
     breakpoint, so every slide should render at the same size here. */
  .a3-awards__slider .slick-slide,
  .a3-awards__slider .slick-slide.is-adjacent,
  .a3-awards__slider .slick-slide.is-center {
    opacity: 1;
  }

  /* The desktop rule sets .slick-list to overflow:visible on purpose, so
     the far-tier cards can bleed past the frame. At this breakpoint there
     is only ever one slide showing (slidesToShow:1) - without clipping
     back to hidden here, the neighbouring slides in the track are still
     un-clipped and visibly bleed in from the right/left of the single
     visible card. */
  .a3-awards__slider .slick-list {
    overflow: hidden;
  }

  /* Must match the .a3-awards__slider .a3-awards__card specificity used
     above, or the desktop width/margin/transform keep winning here and the
     card overflows the viewport. width:100% (not auto) because this is a
     block-level flex container - "auto" resolves to fill-available (the
     485px slide) rather than shrink-to-fit, so max-width never got a
     chance to cap it. */
  .a3-awards__slider .a3-awards__card,
  .a3-awards__slider .slick-slide.is-adjacent .a3-awards__card,
  .a3-awards__slider .slick-slide.is-center .a3-awards__card {
    width: 100%;
    max-width: 320px;
    min-height: 0;
    box-shadow: none;
    margin: 0 auto;
    transform: none;
  }

  /* Section chrome scales down from the desktop figures above. */
  .a3-awards {
    padding: 64px 0;
  }

  .a3-awards__heading {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -0.8px;
    margin-bottom: 16px;
  }

  .a3-awards__description {
    margin-bottom: 48px;
  }

  .a3-awards__badge img {
    max-width: 100%;
  }

  .a3-press__card {
    padding: 24px;
  }

  .a3-benefits__card {
    padding: 32px 24px;
  }
}

/* =========================================================================
 * Award badges in the repurposed "Awards Accolades" band.
 *
 * The base rule above caps logos at 160x40, which suits a wide press wordmark
 * (Business Standard, PTI) sitting above a headline. The client's award images
 * are near-square badges - Clutch, GoodFirms, Great Place to Work at roughly
 * 300x170 - and at a 40px cap they scaled down to about 71px wide, too small
 * to read.
 *
 * Raising only the HEIGHT cap fixes that without touching the press cards: a
 * wide wordmark is limited by the 160px width long before it reaches 88px
 * tall, so it renders exactly as it did. Only tall or square artwork changes.
 *
 * object-fit: contain keeps every badge's own aspect ratio - none of them are
 * cropped or stretched - and left alignment keeps them on the card's text
 * edge, matching the press cards above.
 * ========================================================================= */
.a3-press__outlet-logo {
  /* A DEFINITE height with width:auto is what removes the empty space.
     Previously both dimensions were auto under a 160x88 max box, so the box
     could end up wider than the artwork and object-fit: contain letterboxed
     the badge inside it - the logo sat left with dead space to its right, and
     the radius rounded the empty box edge instead of the picture.
     With one definite side the element takes the image's own ratio, so the box
     IS the badge: no letterboxing, and the radius lands on all four corners. */
  width: auto;
  height: 88px;
  max-width: 100%;
  max-height: none;
  border-radius: 8px;
}