/**
 * HOME PAGE
 * =========================================================================
 * Figma: node 128:873 "Home Page" (1440 x 15922).
 *
 * Only the hero lives here. The other bands on this page are sections the
 * site already had - stats, trusted by, technical capabilities, the contact
 * form and the FAQ - and they render their existing markup, so service.css
 * styles them and nothing is repeated here.
 *
 * Loaded only on page-home.php, after service.css.
 */

.a3-home {
  --a3-hm-ink: #18181b;
  --a3-hm-body: #3f3f46;
  --a3-hm-muted: #52525b;
  --a3-hm-line: #e4e4e7;
  --a3-hm-brand: #ff6900;
}

/* =========================================================================
 * HERO - node 128:2021 (1440 x 747)
 * ========================================================================= */

/* 666, not the frame's 747.
 *
 * In Figma the Nav sits ON TOP of this band - both are at the same origin, so
 * the 747 includes the 81px the nav covers and the 239 to the pill is measured
 * from the page top, through the nav. Our header is a real element above the
 * hero, and it is also exactly 81 tall, so the band below it is 747 - 81 and
 * its top padding is 239 - 81. That puts the pill 239 from the top of the page
 * and the band's bottom edge at 747, which is what the design actually shows.
 * Adding the design's 239 below our header instead stacked the two and left
 * 80px of dead space above the pill. */
.a3-hm-hero {
  position: relative;
  min-height: 666px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden; /* Figma: the 836 container is clipped to the 747 section */
  background: #ffffff;
  /* No bottom border. The node dump reports
   *   stroke: ['#E4E4E7'] w=0.0 sides={'bottom': 1.0}
   * and I read the sides and ignored the w=0.0 - the stroke weight is zero, so
   * nothing is drawn, and the export confirms it: three full-width layers
   * (white, photo, gradient) and not one stroked. The only #E4E4E7 in the
   * whole file is the eyebrow pill's border. */
}

/* Figma: the photo is at 30% opacity on a LUMINOSITY blend - it is texture,
 * not a picture, which is why the band still reads as white. imageTransform
 * scales it 0.966 x 0.867 from the top-left rather than centring it. */
.a3-hm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--a3-hm-hero-bg);
  /* The SVG's use transform is matrix(0.000517 0 0 0.001028 -0.0174 0) on a
   * 2000 x 1122 source: 103.5% wide, 115.3% tall, anchored to the top and
   * nudged 1.7% left. cover from the top edge is that, within a pixel. */
  background-size: cover;
  background-position: center top;
  opacity: 0.3;
  mix-blend-mode: luminosity;
}

/* Figma: white -> 90% -> 70% bottom to top (handles [[0.5,1],[0.5,0]]), and
 * the whole gradient layer then sits at 91% - which the node dump does not
 * show but the SVG export does (fill-opacity="0.91" on the gradient rect).
 * The stops below are the design's alphas already multiplied by it: 1, 0.9
 * and 0.7 x 0.91. Without that the wash is ~9% too opaque and the photo
 * behind it disappears. */
.a3-hm-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.91) 0%,
    rgba(255, 255, 255, 0.819) 50%,
    rgba(255, 255, 255, 0.637) 100%
  );
}

/* Figma: 765.9 wide at y 239, vertical, 32px between blocks, centred. */
.a3-hm-hero__inner {
  position: relative;
  z-index: 1;
  width: min(100% - 48px, 766px);
  padding-top: 158px; /* 239 in the frame, less the 81 the nav overlays */
  padding-bottom: 125px; /* content ends 622 in the 747 frame */
  text-align: center;
}

/* The pill: 250 x 29, #FAFAFA on a 1px #E4E4E7 hairline, fully rounded, with
 * a soft double shadow and an 8px brand dot. Text is tiny - Inter 500 8/10.4,
 * tracking 0.2, uppercase - which is the design, not a slip. */
.a3-hm-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 29px;
  margin: 0;
  padding: 0 16px;
  background: #fafafa;
  border: 1px solid var(--a3-hm-line);
  border-radius: 999px;
  box-shadow:
    0 1px 2px -1px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.1);
  font-size: 8px;
  font-weight: 500;
  line-height: 10.4px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: var(--a3-hm-muted);
}

.a3-hm-hero__dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--a3-hm-brand);
}

/* Figma: Inter 400, 48/48 (100%), tracking -1.4, #18181B, box 566 wide.
 *
 * The node carries textCase=TITLE, which Figma renders by capitalising every
 * word - including "of" and "the". That is not applied here: the heading is a
 * field, so the editor types the casing they want and it renders as typed. */
.a3-hm-hero__heading {
  max-width: 566px;
  margin: 32px auto 0; /* itemSpacing 32 */
  font-size: 48px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.029em; /* -1.4px at 48px */
  color: var(--a3-hm-ink);
}

/* Figma: Inter 400 20/33 (165%), #3F3F46.
 *
 * No max-width. The node is 670 wide because it HUGS its longest line, and
 * capping at that made the browser - which needs slightly more than Figma for
 * the same string - wrap it onto a third line and push the band 34px past
 * 747. The design's two lines come from an explicit newline in the copy, not
 * from the box, so the 766 column is the only constraint needed. (The same
 * mistake as the Resources heading in blog-article.css - a hugged Figma width
 * is a measurement, not a rule.) */
.a3-hm-hero__intro {
  margin: 40px auto 0; /* 32 itemSpacing + the Margin frame's 8 padding-top */
  font-size: 20px;
  font-weight: 400;
  line-height: 33px;
  letter-spacing: normal;
  color: var(--a3-hm-body);
}

.a3-hm-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 64px; /* 32 itemSpacing + the Margin frame's 32 padding-top */
}

/* Both buttons are 56 tall with 40px of side padding and a 14/20 semibold
 * label; the primary is brand orange, the secondary white on a hairline.
 * min-height/justify-content are restated because global.css floors every
 * button at 56 and centres it - harmless here, but only by luck. */
.a3-hm-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  min-height: 0;
  padding: 0 40px;
  border: 1px solid transparent;
  border-radius: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: normal;
  text-decoration: none;
  box-shadow:
    0 1px 2px -1px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.1);
  transition:
    background-color 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease;
}

.a3-hm-hero__btn--primary {
  background: var(--a3-hm-brand);
  color: #ffffff;
}

.a3-hm-hero__btn--primary:hover,
.a3-hm-hero__btn--primary:focus-visible {
  background: #e35f00;
  color: #ffffff;
}

.a3-hm-hero__btn--ghost {
  background: #ffffff;
  border-color: var(--a3-hm-line);
  color: var(--a3-hm-ink);
}

.a3-hm-hero__btn--ghost:hover,
.a3-hm-hero__btn--ghost:focus-visible {
  border-color: var(--a3-hm-ink);
  color: var(--a3-hm-ink);
}

/* =========================================================================
 * RESPONSIVE - no mobile frame in the file, so this is judgement, at the
 * breakpoints the rest of the theme uses.
 * ========================================================================= */

@media (max-width: 991.98px) {

  .a3-hm-hero {
    min-height: 0;
  }

  .a3-hm-hero__inner {
    padding-top: 96px;
    padding-bottom: 96px;
  }

  .a3-hm-hero__heading {
    font-size: 40px;
  }

  .a3-hm-hero__intro {
    font-size: 18px;
    line-height: 30px;
    margin-top: 32px;
  }

  .a3-hm-hero__actions {
    margin-top: 48px;
  }
}

@media (max-width: 767.98px) {

  .a3-hm-hero__inner {
    padding-top: 64px;
    padding-bottom: 72px;
  }

  .a3-hm-hero__heading {
    font-size: 32px;
    line-height: 1.1;
  }

  .a3-hm-hero__intro {
    font-size: 16px;
    line-height: 27px;
  }

  /* Full-width buttons rather than two half-width ones on a phone. */
  .a3-hm-hero__btn {
    width: 100%;
    padding: 0 24px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .a3-hm-hero__btn {
    transition: none;
  }
}

/* =========================================================================
 * WHY A3LOGICS - node 128:2169 (1440 x 1198.5)
 *
 * Section padding 96/120; an inner 1200 with another 48 either side, which
 * leaves 1104 of content - the same figure the two columns add up to
 * (504 + 96 + 504).
 * ========================================================================= */

.a3-hm-why {
  padding: 96px 120px;
  background: #ffffff;
}

.a3-hm-why__inner {
  width: min(100%, 1200px);
  margin-inline: auto;
  padding: 0 48px;
}

.a3-hm-why__header {
  max-width: 690px;
}

/* 122 x 25 chip, #FFF7ED on a 4px radius, text Inter 700 11/16.5 tracking
 * 1.65 uppercase in #F54900 - the deeper orange, not the brand #FF6900. */
.a3-hm-why__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  background: #fff7ed;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 16.5px;
  letter-spacing: 1.65px;
  text-transform: uppercase;
  color: #f54900;
}

/* Inter 500, 56/61.6 (110%), tracking -1.4. The 690 box is what gives the
 * design its three lines; the copy carries the breaks, so the width is a
 * maximum rather than the thing doing the wrapping. */
.a3-hm-why__heading {
  max-width: 690px;
  margin: 24px 0 0;
  font-size: 56px;
  font-weight: 500;
  line-height: 61.6px;
  letter-spacing: -0.025em;
  color: var(--a3-hm-ink);
}

/* Inter 400 17/27.63 (162.5%), #52525B, in a 606 column. */
.a3-hm-why__intro {
  max-width: 606px;
  margin: 24px 0 0;
  font-size: 17px;
  font-weight: 400;
  line-height: 27.63px;
  letter-spacing: normal;
  color: var(--a3-hm-muted);
}

/* 504 | 96 | 504, vertically centred against each other. */
.a3-hm-why__body {
  display: grid;
  grid-template-columns: 504px 504px;
  gap: 96px;
  align-items: center;
  margin-top: 64px; /* the inner container's itemSpacing */
}

.a3-hm-why__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 20px mark, 16px to the text, 32 between items. */
.a3-hm-why__item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 0 16px;
  align-items: start;
  font-size: 15px;
  font-weight: 500;
  line-height: 24.38px;
  letter-spacing: normal;
  color: var(--a3-hm-body);
}

.a3-hm-why__item + .a3-hm-why__item {
  margin-top: 32px;
}

/* Figma wraps the mark in a 2px top padding so it sits on the first line's
 * cap height rather than its ascender. */
.a3-hm-why__item svg {
  margin-top: 2px;
}

/* 504 x 600, 4px radius, and a deep drop shadow: 0 25px 50px -12px at 25%. */
.a3-hm-why__media {
  position: relative;
  height: 600px;
  border-radius: 4px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.a3-hm-why__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

/* The stat card: 192 x 124.6 white, sitting 32 in from the photo's left edge
 * and 30 up from its bottom (Figma: card at y 946 in a photo ending 1102.5). */
.a3-hm-why__stat {
  position: absolute;
  left: 32px;
  bottom: 31.9px;
  width: 192px;
  padding: 24px 28px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.a3-hm-why__stat-number {
  display: block;
  font-size: 36px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: normal;
  color: var(--a3-hm-ink);
}

.a3-hm-why__stat-label {
  display: block;
  margin-top: 7.6px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16.25px;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--a3-hm-body);
}

@media (max-width: 1199.98px) {

  .a3-hm-why {
    padding: 80px 48px;
  }

  .a3-hm-why__inner {
    padding: 0;
  }

  .a3-hm-why__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
  }

  .a3-hm-why__heading {
    font-size: 44px;
    line-height: 1.1;
  }
}

@media (max-width: 991.98px) {

  /* One column: at this width the checklist text is down to about 40
   * characters a line beside the photo, which reads as a column of fragments. */
  .a3-hm-why__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .a3-hm-why__media {
    height: 420px;
  }
}

@media (max-width: 767.98px) {

  .a3-hm-why {
    padding: 56px 16px;
  }

  .a3-hm-why__heading {
    font-size: 32px;
  }

  .a3-hm-why__intro,
  .a3-hm-why__item {
    font-size: 15px;
  }

  .a3-hm-why__media {
    height: 320px;
  }
}

/* =========================================================================
 * PROJECT SCOPING CTA - node 530:2 (1440 x 686.2)
 * ========================================================================= */

.a3-hm-scoping {
  position: relative;
  min-height: 686px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: #0e0e0e;
}

/* The background is BLURRED in the design - the export wraps it in
 * <g filter="filter0_f_530_2"> with feGaussianBlur stdDeviation 9.95, which is
 * a ~20px CSS blur. Inset -20 so the blur does not feather the band's edges
 * into the sections above and below. */
.a3-hm-scoping::before {
  content: "";
  position: absolute;
  inset: -20px;
  background-image: var(--a3-hm-scoping-bg);
  background-size: cover;
  background-position: center;
  filter: blur(20px);
}

/* One flat wash, nothing else. The node dump lists a "Gradient" rect after the
 * overlay and I inferred a left-to-right ramp for it; the export shows that
 * layer draws nothing at all - there is no <linearGradient> in the file. The
 * whole treatment is #0E0E0E at 31% over a blurred photo. */
.a3-hm-scoping::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(14, 14, 14, 0.31);
}

/* Figma: 364 x 582 at x=1000, y=103.16 in a 685.19 band - so 103 from the top
 * and hard against the right of the 1440 frame. */
/* Anchored to the container's right edge, not its left. Figma's x=1000 in a
 * 1440 frame is 76 from the right; expressed as a left offset it stays put as
 * the container narrows and the figure runs off the end (99px past it at
 * 1280, clipped by the section's overflow). From the right, the 76 gap holds
 * at every width. */
.a3-hm-scoping__figure {
  position: absolute;
  top: 103.16px;
  right: 76px;
  width: 364px;
  height: 582px;
  object-fit: cover;
  object-position: top center;
  z-index: 1;
  pointer-events: none;
}

/* Both the copy and the figure hang off a centred 1440 container rather than
 * the viewport. Figma's x=161 and x=1000 are positions inside the 1440 frame;
 * as raw offsets from the window edge they drift left of centre on anything
 * wider, which put the copy off the container and the figure in the middle of
 * the band. The background layers stay full-bleed - only the content is
 * constrained. */
.a3-hm-scoping__container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: min(100%, 1440px);
  min-height: 686px;
  margin-inline: auto;
}

/* Figma: the copy column is 768 wide at x=161 of the container. */
.a3-hm-scoping__inner {
  position: relative;
  z-index: 1;
  width: min(100% - 48px, 768px);
  margin-left: 161px;
  color: #ffffff;
}

/* Inter 500, 56/61.6, white - the same head size as Why A3Logics.
 *
 * 830, not the 768 copy column. Figma's Heading 2 frame is 830.1 and
 * deliberately overflows its 768 parent; 768 is the hugged width of the
 * longest line, and capping there made the browser - which needs a little
 * more than Figma for the same string - break "Are Tech Deficiencies Slowing"
 * early, turning the design's two lines into three. The line break is in the
 * copy; the width only has to stay out of its way. Third time this exact trap
 * has bitten (hero intro, Resources heading, here). */
.a3-hm-scoping__heading {
  /* width: max-content - the heading hugs its longest line and is allowed to
   * overflow the 768 column, which is exactly what Figma's 830 frame does
   * inside its 768 parent. Any fixed cap (768, 830) put the browser's slightly
   * wider rendering of the same string over the edge and broke it onto a third
   * line. Reined back in below 1200, where overflowing would leave the page. */
  width: max-content;
  max-width: none;
  margin: 0;
  font-size: 56px;
  font-weight: 500;
  line-height: 61.6px;
  letter-spacing: -0.025em;
  color: #ffffff;
}

/* Inter 500 20/32.5 (162.5%), white. */
.a3-hm-scoping__intro {
  margin: 31px 0 0; /* heading box ends 284.2 -> paragraph 315.2 */
  max-width: 748px;
  font-size: 20px;
  font-weight: 500;
  line-height: 32.5px;
  letter-spacing: normal;
  color: #ffffff;
}

/* 434 x 64, #FF6900, 48px side padding, label Inter 700 18/28 with a 12px gap
 * to a 20px arrow. */
.a3-hm-scoping__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 64px;
  min-height: 0;
  margin-top: 48px; /* the Margin frame's padding-bottom */
  padding: 0 48px;
  background: var(--a3-hm-brand);
  border: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: normal;
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.22s ease;
}

.a3-hm-scoping__btn:hover,
.a3-hm-scoping__btn:focus-visible {
  background: #e35f00;
  color: #ffffff;
}

@media (max-width: 1199.98px) {

  .a3-hm-scoping__container {
    min-height: 0;
  }

  .a3-hm-scoping__inner {
    margin-left: 48px;
  }

  .a3-hm-scoping__heading {
    width: auto;
    max-width: 100%;
    font-size: 44px;
    line-height: 1.12;
  }
}

/* The figure is decorative and there is no room for it beside the copy once
 * the band narrows, so it goes rather than being squashed. */
@media (max-width: 1199.98px) {

  .a3-hm-scoping__figure {
    display: none;
  }
}

@media (max-width: 767.98px) {

  .a3-hm-scoping {
    min-height: 0;
    padding: 72px 0;
  }

  .a3-hm-scoping__inner {
    width: calc(100% - 32px);
    margin-inline: 16px;
  }

  .a3-hm-scoping__heading {
    font-size: 30px;
  }

  .a3-hm-scoping__intro {
    font-size: 17px;
    line-height: 28px;
  }

  .a3-hm-scoping__btn {
    width: 100%;
    padding: 0 24px;
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .a3-hm-scoping__btn {
    transition: none;
  }
}

/* =========================================================================
 * SECTION ALIGNMENT ON THE HOME PAGE
 *
 * The page inherits sections from three different templates and they do not
 * share a container: Resources & Insights is 1280 on 80px gutters (its own
 * Figma node), tooling and testimonials use Bootstrap's 1320, case studies
 * 1310, and the contact band runs full bleed. Side by side the content edges
 * visibly step in and out.
 *
 * Everything is pulled onto Bootstrap's 1320 here - the width most of this
 * page already uses. Scoped to .a3-home so the article and guide pages, where
 * Resources is measured at 1280 against node 101:19494, are untouched.
 * ========================================================================= */

.a3-home .a3-ba-resources__inner {
  width: min(100% - 24px, 1320px);
}

/* The rule between Resources and the contact band. */
.a3-home .a3-contact-cta {
  border-top: 1px solid var(--a3-hm-line);
}

/* Hero heading width
 *
 * The 566px cap above was sized for the previous, shorter headline. The
 * document's headline is longer, and at 48px its natural two-line split
 * ("Engineering Enterprise Readiness" / "With Every Solution") needs 719px on
 * the first line, so 566 forced a third line. The hero column is 766px wide,
 * so 740 keeps the text inside it and still centred.
 */
.a3-hm-hero__heading {
  max-width: 740px;
}