/* ==========================================================================
   Pattern: about  (/about-us/, Figma frame 559:2, 1920 x 10699)
   --------------------------------------------------------------------------
   Every number here is read off a layer of frame 559:2 with get_design_context
   / get_metadata. Nothing is rounded or eyeballed. The frame is 1920 wide at
   0,0, so a Figma y is the page y, and each section carries its exact Figma
   height; the negative margins reproduce the overlapping panels Figma draws
   (the white Boxes-Copies panel runs under the Why and Products bands, the
   video sits over the Award-Winning band, and so on).

   Sections own their coordinate space: a child's left/top is its Figma
   coordinate minus the section's Figma top.

   Type, colour, radius and image geometry live in the base rules so they are
   shared with the mobile layout; the fixed pixel geometry lives in
   @media(min-width:1201px) and is released again in @media(max-width:1200px),
   the way site.css handles its own 1920 artboard rules. There are no mobile
   frames in Figma.

   Owned by the "about" pattern only (docs/figma-exact-worklist.json).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base: colour, type, backgrounds, radii  (all viewports)
   -------------------------------------------------------------------------- */

.evo-tpl-page-about-us main section[class^="ab-"] { position: relative; }

.evo-tpl-page-about-us main section[class^="ab-"] h1,
.evo-tpl-page-about-us main section[class^="ab-"] h2,
.evo-tpl-page-about-us main section[class^="ab-"] h3,
.evo-tpl-page-about-us main section[class^="ab-"] p { margin: 0; }

.evo-tpl-page-about-us .ab-blue { color: #2ca9e3; }

/* ---- hero 559:3 ---------------------------------------------------------- */
.evo-tpl-page-about-us .ab-hero { background: #3a4a55; color: #fff; }
.evo-tpl-page-about-us .ab-hero-ov { background: rgba(0, 0, 0, 0.15); }   /* 559:5 */
.evo-tpl-page-about-us .ab-hero-panel { background: #fff; border-radius: 28px; } /* 559:15 */
.evo-tpl-page-about-us .ab-eyebrow {                                       /* 559:8 */
  font-family: var(--font-display); font-weight: 400; font-size: 20px;
  line-height: 25px; color: #fff;
}
.evo-tpl-page-about-us .ab-h1 {                                            /* 559:7 */
  font-family: var(--font-display); font-weight: 700; font-size: 75px;
  line-height: 89px; letter-spacing: -1.5px; color: #fff;
}

/* ---- intro 559:30 -------------------------------------------------------- */
.evo-tpl-page-about-us .ab-intro-h {                                       /* 559:32 */
  font-family: var(--font-display); font-weight: 700; font-size: 60px;
  line-height: 71px; letter-spacing: -1.8px; color: #27272d;
}
/* The 48px Book run inside 559:32. Figma gives that run leading 71, the same
   as the 60px runs beside it, but a 48px inline box with 71px leading is
   TALLER below the baseline than the 60px one, so Chrome grows the first line
   box to 74/75 and pushes line 2 down 3.5px that Figma never draws. The run is
   therefore an inline-block with zero leading: it cannot grow the line box,
   the baseline is unchanged, and the line advance comes from the 60px runs,
   which is exactly what the frame shows. The width is the em dash's own
   advance at 48px/-1.44 tracking, so the glyph occupies the slot Figma draws
   the dash in and the words after it start where Figma starts them. */
.evo-tpl-page-about-us .ab-intro-dash {
  font-weight: 400; font-size: 48px; line-height: 0; letter-spacing: -1.44px;
}
.evo-tpl-page-about-us .ab-intro-lead {                                    /* first line of 559:33 */
  font-family: var(--font-display); font-weight: 300; font-size: 24px;
  line-height: 26px; color: #27272d;
}
.evo-tpl-page-about-us .ab-intro-body {                                    /* body of 559:33 */
  font-family: var(--font-display); font-weight: 300; font-size: 20px;
  line-height: 26px; color: #27272d;
}
.evo-tpl-page-about-us .ab-intro-body strong { font-weight: 700; }
.evo-tpl-page-about-us .ab-intro-btn {                                     /* 559:35 */
  display: block; background: #2ca9e3; border-radius: 60px; text-decoration: none;
}
.evo-tpl-page-about-us .ab-intro-btn span {                                /* 559:36 */
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: 20px; line-height: 25px; color: #fff; text-align: center;
}

/* ---- proud member of 559:47 --------------------------------------------- */
.evo-tpl-page-about-us .ab-member-h {                                      /* 559:48 */
  font-family: var(--font-display); font-weight: 700; font-size: 26px;
  line-height: 33px; color: #000;
}
.evo-tpl-page-about-us .ab-member-pill {                                   /* 559:51 and siblings */
  border: 2px solid #b7b7b7; border-radius: 100px;
}
.evo-tpl-page-about-us .ab-member-pill img { mix-blend-mode: luminosity; }
/* 559:58 carries 70% opacity in Figma; it is baked into member-4.png, so no
   CSS opacity here or it would be applied twice. */

/* ---- award-winning 559:67 ------------------------------------------------ */
.evo-tpl-page-about-us .ab-solutions { background: #002b54; border-radius: 28px; color: #fff; }
.evo-tpl-page-about-us .ab-solutions-h {                                   /* 559:87 */
  font-family: var(--font-display); font-weight: 700; font-size: 48px;
  line-height: 56px; letter-spacing: -1.44px; color: #fff; text-align: center;
}
.evo-tpl-page-about-us .ab-solutions-sub {                                 /* 559:88 */
  font-family: var(--font-display); font-weight: 300; font-size: 20px;
  line-height: 30px; color: #fff; text-align: center;
}
.evo-tpl-page-about-us .ab-scard { background: #02315e; border-radius: 20px; }
.evo-tpl-page-about-us .ab-sc-t {                                          /* 559:71, 75, 80, 84 */
  font-family: var(--font-display); font-weight: 500; font-size: 24px;
  line-height: 36px; letter-spacing: -0.48px; color: #fff;
}

/* ---- video 559:89 -------------------------------------------------------- */
.evo-tpl-page-about-us .ab-video { background: #243541; overflow: hidden; }
.evo-tpl-page-about-us .ab-video-shadow {                                  /* 559:93, rotated 180 in Figma */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 100%);
}
.evo-tpl-page-about-us .ab-video-play { cursor: pointer; }

/* ---- boxes-copies 559:127 ------------------------------------------------ */
.evo-tpl-page-about-us .ab-driven { background: #fff; border-radius: 28px; }
/* 559:143 sets leading to AUTO, not to a number. Figma's auto leading for
   Circular Std is 1.268em (61px at 48px); Chrome's own "normal" is 1.2em
   (58px), so the value has to be written out or the second line lands 5px
   high, which is what the frame export shows. Figma also centres the two
   lines in the 110px box (the node is a flex column with justify-center and
   the text block is 122 tall), so the build centres them the same way. */
.evo-tpl-page-about-us .ab-driven-h {                                      /* 559:143 */
  font-family: var(--font-display); font-weight: 700; font-size: 48px;
  line-height: 61px; letter-spacing: -1.44px; color: #27272d; text-align: center;
}
.evo-tpl-page-about-us .ab-dcard { border-radius: 28px; }
.evo-tpl-page-about-us .ab-dcard1 { background: #f1f1f1; }                 /* 559:130 */
.evo-tpl-page-about-us .ab-dcard2 { background: #002b54; }                 /* 559:140 */
.evo-tpl-page-about-us .ab-driven-h3a {                                    /* 559:133 */
  font-family: var(--font-display); font-weight: 500; font-size: 32px;
  line-height: 56px; letter-spacing: -0.96px; color: #27272d; white-space: nowrap;
}
.evo-tpl-page-about-us .ab-driven-h3b {                                    /* 559:137 */
  font-family: var(--font-display); font-weight: 500; font-size: 30px;
  line-height: 36px; letter-spacing: -0.9px; color: #27272d;
}
.evo-tpl-page-about-us .ab-driven-p {                                      /* 559:134, 559:138 */
  font-family: var(--font-display); font-weight: 300; font-size: 20px;
  line-height: 26px; color: #27272d;
}

/* ---- why 559:176 --------------------------------------------------------- */
.evo-tpl-page-about-us .ab-why { background: #002b54; border-radius: 28px; color: #fff; overflow: hidden; }
.evo-tpl-page-about-us .ab-why-h {                                         /* 559:208 */
  font-family: var(--font-display); font-weight: 700; font-size: 45px;
  line-height: 85px; letter-spacing: -0.9px; color: #fff; white-space: nowrap;
}
.evo-tpl-page-about-us .ab-why-sub {                                       /* 559:207 */
  font-family: var(--font-display); font-weight: 300; font-size: 20px;
  line-height: 30px; letter-spacing: -0.4px; color: #fff;
}
.evo-tpl-page-about-us .ab-why-btn {                                       /* 559:211 */
  display: block; background: transparent; border: 1.5px solid #fff;
  border-radius: 60px; text-decoration: none;
}
.evo-tpl-page-about-us .ab-why-btn span {                                  /* 559:212 */
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: 20px; line-height: 25px; color: #fff; text-align: center;
}
.evo-tpl-page-about-us .ab-wcard { background: #02315e; border-radius: 30px; }
.evo-tpl-page-about-us .ab-wcard5 { border-radius: 28px; }                 /* 559:203 is 28, the other four are 30 */
.evo-tpl-page-about-us .ab-wc-t {                                          /* 559:181 and siblings */
  font-family: var(--font-display); font-weight: 500; font-size: 30px;
  line-height: 32px; letter-spacing: -0.6px; color: #fff;
}
.evo-tpl-page-about-us .ab-wc-p {                                          /* 559:182 and siblings */
  font-family: var(--font-display); font-weight: 300; font-size: 17px;
  line-height: 22px; color: #fff;
}
.evo-tpl-page-about-us .ab-why-prev {                                      /* 559:213 */
  border: 1px solid #fff; border-radius: 29px; opacity: 0.5; background: transparent;
}

/* ---- products 559:159 ---------------------------------------------------- */
.evo-tpl-page-about-us .ab-awards { background: #f4f4f4; }
.evo-tpl-page-about-us .ab-awards-h {                                      /* 559:175 */
  font-family: var(--font-display); font-weight: 700; font-size: 50px;
  line-height: 58px; letter-spacing: -1px; color: #27272d; text-align: center;
}
.evo-tpl-page-about-us .ab-acard { background: #fff; border-radius: 30px; }

/* ---- text-01 559:216 ----------------------------------------------------- */
.evo-tpl-page-about-us .ab-leaders { background: #002b54; border-radius: 28px; color: #fff; }
/* 559:219 also sets leading to AUTO: 1.268em is 57px at 45px, where Chrome's
   own "normal" is 54. With 54 the second line sat 3px high against the frame. */
.evo-tpl-page-about-us .ab-leaders-h {                                     /* 559:219 */
  font-family: var(--font-display); font-weight: 700; font-size: 45px;
  line-height: 57px; letter-spacing: -0.9px; color: #fff; text-align: center;
}
.evo-tpl-page-about-us .ab-leaders-p {                                     /* 559:218 */
  font-family: var(--font-display); font-weight: 300; font-size: 24px;
  line-height: 33px; letter-spacing: -0.48px; color: #fff; text-align: center;
}

/* ---- about band 559:145 -------------------------------------------------- */
.evo-tpl-page-about-us .ab-largest { background: #f4f4f4; }
.evo-tpl-page-about-us .ab-largest-eyebrow {                               /* 559:148 */
  font-family: var(--font-display); font-weight: 500; font-size: 18px;
  line-height: 23px; letter-spacing: -0.54px; color: #27272d;
}
.evo-tpl-page-about-us .ab-largest-h {                                     /* 559:147 */
  font-family: var(--font-display); font-weight: 700; font-size: 45px;
  line-height: 47px; letter-spacing: -1.35px; color: #27272d; text-align: center;
}
.evo-tpl-page-about-us .ab-largest-photo { border-radius: 28px; overflow: hidden; }
.evo-tpl-page-about-us .ab-largest-h3 {                                    /* 559:155, 559:157 */
  font-family: var(--font-display); font-weight: 500; font-size: 30px;
  line-height: 36px; letter-spacing: -0.9px; color: #27272d;
}
.evo-tpl-page-about-us .ab-largest-p {                                     /* 559:154, 559:158 */
  font-family: var(--font-display); font-weight: 300; font-size: 20px;
  line-height: 26px; color: #27272d;
}

/* --------------------------------------------------------------------------
   Desktop: the 1920 artboard, exact Figma geometry
   -------------------------------------------------------------------------- */
@media (min-width: 1201px) {

  /* ---- hero 559:3, band 0..684 (the white panel takes over at 684) ------- */
  .evo-tpl-page-about-us .ab-hero { height: 684px; overflow: visible; }
  .evo-tpl-page-about-us .ab-hero-img { position: absolute; left: 0; top: 0; width: 1920px; height: 747px; display: block; }
  .evo-tpl-page-about-us .ab-hero-ov { position: absolute; left: 0; top: 0; width: 1920px; height: 747px; }
  .evo-tpl-page-about-us .ab-hero-panel { position: absolute; left: 0; top: 684px; width: 1920px; height: 915px; }
  .evo-tpl-page-about-us .ab-eyebrow { position: absolute; left: 217px; top: 397px; width: 192px; height: 25px; }
  .evo-tpl-page-about-us .ab-h1 { position: absolute; left: 217px; top: 424px; width: 509px; height: 89px; }

  /* ---- quote bar 559:16 (shared component) sits at 684..804 -------------- */

  /* ---- intro 559:30, band 804..1515 ------------------------------------- */
  .evo-tpl-page-about-us .ab-intro { height: 711px; }
  .evo-tpl-page-about-us .ab-intro-logo { position: absolute; left: 202px; top: 149px; width: 249px; height: 75px; display: block; }
  /* 559:32 reserves room for the wordmark with 23 leading spaces in its 48px
     Book run; 23 of those spaces measure 242.89px at that size and tracking,
     so the same first-line indent puts the dash exactly where Figma draws it. */
  .evo-tpl-page-about-us .ab-intro-h { position: absolute; left: 202px; top: 156px; width: 648px; height: 155px;
    text-indent: 242.89px; box-sizing: border-box; padding-top: 9.5px; }
  /* text-indent is inherited and would be applied a second time inside the
     inline-block, so it is reset here. */
  .evo-tpl-page-about-us .ab-intro-dash { display: inline-block; width: 49.56px; text-align: center; text-indent: 0; }
  .evo-tpl-page-about-us .ab-intro-copy { position: absolute; left: 202px; top: 320px; width: 641px; height: 181px; }
  .evo-tpl-page-about-us .ab-intro-lead { height: 26px; }
  /* 559:33 carries one blank 26px line between the lead and the body. The
     Light face reports a content box of 1.45em, so its half-leading inside a
     26px line is negative and Chrome lands the body 2px above where the frame
     draws it; the border-box padding puts the glyphs back on the frame's
     lines and leaves the 641x130 box exactly where it was. */
  .evo-tpl-page-about-us .ab-intro-copy .ab-intro-body { margin-top: 26px; height: 130px;
    box-sizing: border-box; padding-top: 2px; }
  .evo-tpl-page-about-us .ab-intro-btn { position: absolute; left: 200px; top: 535px; width: 193px; height: 70px; }
  .evo-tpl-page-about-us .ab-intro-btn span { position: absolute; left: 46px; top: 22px; width: 102px; height: 25px; }
  .evo-tpl-page-about-us .ab-collage { position: absolute; left: 940px; top: 203px; width: 771px; height: 354px; display: block; }

  /* ---- proud member of 559:47, band 1515..1825 -------------------------- */
  .evo-tpl-page-about-us .ab-member { height: 310px; }
  .evo-tpl-page-about-us .ab-member-h { position: absolute; left: 843px; top: 0; width: 237px; height: 33px; }
  .evo-tpl-page-about-us .ab-member-pill { position: absolute; top: 62px; width: 288px; height: 95px; }
  .evo-tpl-page-about-us .ab-mp1 { left: 200px; }
  .evo-tpl-page-about-us .ab-mp2 { left: 508px; }
  .evo-tpl-page-about-us .ab-mp3 { left: 816px; }
  .evo-tpl-page-about-us .ab-mp4 { left: 1124px; }
  .evo-tpl-page-about-us .ab-mp5 { left: 1432px; }
  /* the pill's 2px border is outside its padding box, so each offset is the
     Figma coordinate minus the pill's own left/top minus that 2px */
  .evo-tpl-page-about-us .ab-member-pill img { position: absolute; display: block; }
  .evo-tpl-page-about-us .ab-mp1 img { left: 83px; top: 20px; width: 117px; height: 46px; }   /* 559:52 page 285,1599 */
  .evo-tpl-page-about-us .ab-mp2 img { left: 92px; top: 20px; width: 101px; height: 50px; }   /* 559:55 page 602,1599 */
  .evo-tpl-page-about-us .ab-mp3 img { left: 64px; top: 20px; width: 156px; height: 51px; }   /* 559:61 page 882,1599 */
  .evo-tpl-page-about-us .ab-mp4 img { left: 40px; top: 23px; width: 204px; height: 46px; }   /* 559:58 page 1166,1602 */
  .evo-tpl-page-about-us .ab-mp5 img { left: 90px; top: 22px; width: 105px; height: 48px; }   /* 559:64 page 1524,1601 */

  /* ---- award-winning 559:67, band 1825..2600, video overlaps its last 71 - */
  .evo-tpl-page-about-us .ab-solutions { height: 775px; margin-bottom: -71px; }
  .evo-tpl-page-about-us .ab-solutions-h { position: absolute; left: 426px; top: 146px; width: 1067px; height: 112px; }
  .evo-tpl-page-about-us .ab-solutions-sub { position: absolute; left: 704px; top: 291px; width: 535px; height: 30px; }
  .evo-tpl-page-about-us .ab-scard { position: absolute; top: 375px; height: 154px; }
  .evo-tpl-page-about-us .ab-sc1 { left: 200px; width: 354px; }
  .evo-tpl-page-about-us .ab-sc2 { left: 590px; width: 355px; }
  .evo-tpl-page-about-us .ab-sc3 { left: 980px; width: 355px; }
  .evo-tpl-page-about-us .ab-sc4 { left: 1370px; width: 354px; }
  .evo-tpl-page-about-us .ab-sc-t { position: absolute; top: 41px; }
  .evo-tpl-page-about-us .ab-sc1 .ab-sc-t { left: 111px; width: 239px; height: 68px; }        /* 559:71 */
  .evo-tpl-page-about-us .ab-sc2 .ab-sc-t { left: 131px; height: 72px; white-space: nowrap; } /* 559:75 */
  .evo-tpl-page-about-us .ab-sc3 .ab-sc-t { left: 123px; height: 72px; white-space: nowrap; } /* 559:80 */
  .evo-tpl-page-about-us .ab-sc4 .ab-sc-t { left: 137px; height: 72px; white-space: nowrap; } /* 559:84 */
  .evo-tpl-page-about-us .ab-sc-ic { position: absolute; display: block; }
  .evo-tpl-page-about-us .ab-sc1 .ab-sc-ic { left: 48px; top: 59px; width: 39px; height: 39px; }      /* 559:72 */
  .evo-tpl-page-about-us .ab-sc2 .ab-ic2a { left: 55px; top: 57px; width: 31px; height: 31px; }       /* 559:76 */
  .evo-tpl-page-about-us .ab-sc2 .ab-ic2b { left: 89px; top: 56px; width: 23px; height: 32px; }       /* 559:77 */
  .evo-tpl-page-about-us .ab-sc3 .ab-sc-ic { left: 62px; top: 62px; width: 30px; height: 25px; }      /* 559:81 */
  .evo-tpl-page-about-us .ab-sc4 .ab-sc-ic { left: 82px; top: 61px; width: 29px; height: 26px; }      /* 559:86 */

  /* ---- video 559:89, band 2529..3401 ------------------------------------ */
  .evo-tpl-page-about-us .ab-video { height: 872px; }
  .evo-tpl-page-about-us .ab-video-img { position: absolute; left: 0; top: 0; width: 1920px; height: 872px; display: block; }
  .evo-tpl-page-about-us .ab-video-shadow { position: absolute; left: 0; top: 0; width: 1920px; height: 87.958px; }
  .evo-tpl-page-about-us .ab-video-play { position: absolute; left: 914px; top: 400px; width: 91.706px; height: 72.728px; display: block; }

  /* ---- boxes-copies 559:127, band 3381..5686 (over the video's last 20) -- */
  .evo-tpl-page-about-us .ab-driven { height: 2305px; margin-top: -20px; }
  .evo-tpl-page-about-us .ab-driven-logo { position: absolute; left: 480px; top: 142px; width: 249px; height: 75px; display: block; }
  /* 559:143 reserves room for the wordmark with 26 leading spaces in its own
     48px Bold run (270.83px at that size and tracking). For centred text a
     first-line indent of exactly that width reproduces both the Figma line
     break and the position of the first line. */
  .evo-tpl-page-about-us .ab-driven-h { position: absolute; left: 444px; top: 167px; width: 1032px; height: 110px;
    text-indent: 270.83px; display: flex; flex-direction: column; justify-content: center;
    box-sizing: border-box; padding-top: 3px; }
  .evo-tpl-page-about-us .ab-dcard { position: absolute; top: 373px; width: 740px; height: 419px; }
  .evo-tpl-page-about-us .ab-dcard1 { left: 200px; }
  .evo-tpl-page-about-us .ab-dcard2 { left: 980px; }
  .evo-tpl-page-about-us .ab-dcard1 img { position: absolute; left: 94px; top: 23px; width: 552px; height: 373px; display: block; }   /* 559:131 */
  .evo-tpl-page-about-us .ab-dcard2 img { position: absolute; left: 50px; top: 67px; width: 639px; height: 285px; display: block; }  /* 559:141 */
  .evo-tpl-page-about-us .ab-driven-h3a { position: absolute; left: 228px; top: 828px; height: 56px; }
  .evo-tpl-page-about-us .ab-driven-pa { position: absolute; left: 228px; top: 890px; width: 663px; height: 158px; }
  .evo-tpl-page-about-us .ab-driven-h3b { position: absolute; left: 1016px; top: 840px; width: 687px; height: 72px; }
  .evo-tpl-page-about-us .ab-driven-pb { position: absolute; left: 1016px; top: 942px; width: 667px; height: 110px; }

  /* ---- why 559:176, band 4600..5383, drawn over the white panel ---------
     Figma paints Why ABOVE Products, so the navy panel covers the grey band's
     first 50px and its own r28 bottom corners show the grey behind them. */
  .evo-tpl-page-about-us .ab-why { height: 783px; margin-top: -1086px; z-index: 2; }
  .evo-tpl-page-about-us .ab-why-h { position: absolute; left: 200px; top: 109px; width: 457px; height: 85px; }
  .evo-tpl-page-about-us .ab-why-logo { position: absolute; left: 664px; top: 101px; width: 249px; height: 75px; display: block; }
  .evo-tpl-page-about-us .ab-why-sub { position: absolute; left: 200px; top: 194px; width: 716px; height: 30px; }
  .evo-tpl-page-about-us .ab-why-btn { position: absolute; left: 1500px; top: 132px; width: 220px; height: 70px; }
  /* the button's 1.5px border sits outside its padding box, so the label's
     offsets are the Figma coordinates minus the button's left/top minus 1.5 */
  .evo-tpl-page-about-us .ab-why-btn span { position: absolute; left: 57.5px; top: 20.5px; width: 102px; height: 25px; }
  .evo-tpl-page-about-us .ab-wcard { position: absolute; top: 306px; width: 350px; height: 342px; }
  .evo-tpl-page-about-us .ab-wcard1 { left: 194px; }
  .evo-tpl-page-about-us .ab-wcard2 { left: 584px; }
  .evo-tpl-page-about-us .ab-wcard3 { left: 974px; top: 308px; }
  .evo-tpl-page-about-us .ab-wcard4 { left: 1364px; }
  .evo-tpl-page-about-us .ab-wcard5 { left: 1754px; }
  .evo-tpl-page-about-us .ab-wc-ic { position: absolute; display: block; }
  .evo-tpl-page-about-us .ab-wcard1 .ab-wc-ic { left: 42px; top: 66px; width: 40px; height: 34px; }        /* 559:184 */
  .evo-tpl-page-about-us .ab-wcard2 .ab-wc-ic { left: 39px; top: 67px; width: 33px; height: 33px; }        /* 559:190 */
  .evo-tpl-page-about-us .ab-wcard3 .ab-wc-ic { left: 39px; top: 63px; width: 29px; height: 35px; }        /* 559:195 */
  .evo-tpl-page-about-us .ab-wcard4 .ab-wc-ic { left: 39px; top: 63px; width: 37px; height: 37px; }        /* 559:201 */
  .evo-tpl-page-about-us .ab-wcard5 .ab-wc-ic { left: 38.74px; top: 69px; width: 30.939px; height: 31px; } /* 559:206 */
  .evo-tpl-page-about-us .ab-wc-t { position: absolute; }
  .evo-tpl-page-about-us .ab-wcard1 .ab-wc-t { left: 39.886px; top: 134px; width: 252.279px; height: 64px; }  /* 559:181 */
  .evo-tpl-page-about-us .ab-wcard2 .ab-wc-t { left: 37px; top: 132px; width: 247px; height: 92px; }          /* 559:187 */
  .evo-tpl-page-about-us .ab-wcard3 .ab-wc-t { left: 37px; top: 132px; width: 281px; height: 92px; }          /* 559:193 */
  .evo-tpl-page-about-us .ab-wcard4 .ab-wc-t { left: 37px; top: 132px; width: 281px; height: 92px; }          /* 559:198 */
  .evo-tpl-page-about-us .ab-wcard5 .ab-wc-t { left: 37px; top: 132px; width: 247px; height: 92px; }          /* 559:204 */
  .evo-tpl-page-about-us .ab-wc-p { position: absolute; }
  .evo-tpl-page-about-us .ab-wcard1 .ab-wc-p { left: 39.886px; top: 216px; width: 281.197px; height: 61px; }  /* 559:182 */
  .evo-tpl-page-about-us .ab-wcard2 .ab-wc-p { left: 36.74px; top: 216px; width: 281.354px; height: 106px; }  /* 559:188 */
  .evo-tpl-page-about-us .ab-wcard3 .ab-wc-p { left: 37px; top: 216px; width: 281px; height: 106px; }         /* 559:194 */
  .evo-tpl-page-about-us .ab-wcard4 .ab-wc-p { left: 36.74px; top: 216px; width: 281.354px; height: 106px; }  /* 559:199 */
  .evo-tpl-page-about-us .ab-wcard5 .ab-wc-p { left: 36.74px; top: 216px; width: 281.354px; height: 106px; }  /* 559:205 */
  .evo-tpl-page-about-us .ab-why-prev { position: absolute; left: 96px; top: 436px; width: 58px; height: 58px; }
  .evo-tpl-page-about-us .ab-why-prev img { position: absolute; left: 21px; top: 22px; width: 14px; height: 12px; display: block; } /* 1px border outside the padding box */

  /* ---- products 559:159, band 5333..6405, over the Why band's last 50 --- */
  .evo-tpl-page-about-us .ab-awards { height: 1072px; margin-top: -50px; }
  .evo-tpl-page-about-us .ab-awards-h { position: absolute; left: 567px; top: 229px; width: 786px; height: 116px; }
  .evo-tpl-page-about-us .ab-acard { position: absolute; top: 416px; width: 480px; height: 421px; }
  .evo-tpl-page-about-us .ab-acard1 { left: 200px; }
  .evo-tpl-page-about-us .ab-acard2 { left: 720px; }
  .evo-tpl-page-about-us .ab-acard3 { left: 1240px; }
  .evo-tpl-page-about-us .ab-acard img { position: absolute; display: block; }
  .evo-tpl-page-about-us .ab-acard1 .ab-ac-badge-a { left: 177.17px; top: 35px; width: 189.833px; height: 118.397px; } /* 559:173 */
  .evo-tpl-page-about-us .ab-acard1 .ab-ac-badge-b { left: 114px; top: 35px; width: 86.979px; height: 118.397px; }     /* 559:174 */
  .evo-tpl-page-about-us .ab-acard1 .ab-ac-prod { left: 83px; top: 151px; width: 312.563px; height: 228px; }           /* 559:171 */
  .evo-tpl-page-about-us .ab-acard2 .ab-ac-badge { left: 118px; top: 40px; width: 244px; height: 113px; }              /* 559:168 */
  .evo-tpl-page-about-us .ab-acard2 .ab-ac-prod { left: 86px; top: 161px; width: 308px; height: 209px; }               /* 559:167 */
  .evo-tpl-page-about-us .ab-acard3 .ab-ac-badge { left: 79px; top: 51px; width: 323px; height: 64px; }                /* 559:163 */
  .evo-tpl-page-about-us .ab-acard3 .ab-ac-prod { left: 92px; top: 137px; width: 297px; height: 245px; }               /* 559:164 */

  /* ---- text-01 559:216, band 6363..7096, over the products band's last 42
     Figma paints Text-01 above the About band too, so the navy panel covers
     the grey band's first 45px and shows its own r28 bottom corners. */
  .evo-tpl-page-about-us .ab-leaders { height: 733px; margin-top: -42px; z-index: 2; }
  .evo-tpl-page-about-us .ab-leaders-h { position: absolute; left: 479px; top: 125px; width: 975px; height: 108px; }
  .evo-tpl-page-about-us .ab-leaders-badges { position: absolute; left: 286px; top: 277px; width: 1348px; height: 179px; display: block; }
  .evo-tpl-page-about-us .ab-leaders-p { position: absolute; left: 321px; top: 500px; width: 1277px; height: 100px; }

  /* ---- about band 559:145, 7051..8527, over the text-01 band's last 45 --- */
  .evo-tpl-page-about-us .ab-largest { height: 1476px; margin-top: -45px; }
  .evo-tpl-page-about-us .ab-largest-eyebrow { position: absolute; left: 851px; top: 228px; width: 217px; height: 23px; }
  .evo-tpl-page-about-us .ab-largest-h { position: absolute; left: 579px; top: 272px; width: 761px; height: 47px; }
  .evo-tpl-page-about-us .ab-largest-photo { position: absolute; top: 394px; width: 481px; height: 459px; }
  .evo-tpl-page-about-us .ab-lp1 { left: 200px; }
  .evo-tpl-page-about-us .ab-lp2 { left: 719px; }
  .evo-tpl-page-about-us .ab-lp3 { left: 1239px; }
  .evo-tpl-page-about-us .ab-largest-photo img { display: block; width: 481px; height: 459px; }
  /* 559:155 is one auto-wrapped run in a 710 box, but Figma breaks it after
     "heat" and after "engineered" where Chrome fits one more word on line 1.
     The frame is the law, so the markup carries those two breaks as .ab-fbr. */
  .evo-tpl-page-about-us .ab-largest-h3a { position: absolute; left: 232px; top: 946px; width: 710px; height: 107px; }
  .evo-tpl-page-about-us .ab-largest-pa { position: absolute; left: 232px; top: 1085px; width: 710px; height: 156px; }
  .evo-tpl-page-about-us .ab-largest-h3b { position: absolute; left: 1010px; top: 946px; width: 710px; height: 72px; }
  .evo-tpl-page-about-us .ab-largest-pb { position: absolute; left: 1010px; top: 1058px; width: 667px; height: 177px; }

  /* ---- shared reviews / logos / footer: placed where frame 559:2 draws them
     (reviews heading 559:281 at y8679, logos head 559:284 at y9269, footer
     559:298 at y9514). Only this page's placement is set here; the
     components' own internals belong to specs/components-pool.json. ------- */
  .evo-tpl-page-about-us .reviews { margin-top: -14px; }
  .evo-tpl-page-about-us .logos { margin-top: -15px; padding-bottom: 66px; }

  /* Figma draws the first baseline of these nodes lower than the CSS
     half-leading puts it (measured against the frame export, 559:87 +2,
     559:71/75/80/84 +2, 559:175 +3, 559:147 +3, 559:219 +7). border-box
     padding moves the glyphs onto the Figma baseline and leaves every box
     exactly the size the frame gives it. */
  .evo-tpl-page-about-us .ab-solutions-h,
  .evo-tpl-page-about-us .ab-sc-t { box-sizing: border-box; padding-top: 2px; }
  .evo-tpl-page-about-us .ab-awards-h,
  .evo-tpl-page-about-us .ab-largest-h { box-sizing: border-box; padding-top: 3px; }
  .evo-tpl-page-about-us .ab-leaders-h { box-sizing: border-box; padding-top: 2.5px; }
  .evo-tpl-page-about-us .ab-driven-h3a,
  .evo-tpl-page-about-us .ab-driven-h3b,
  .evo-tpl-page-about-us .ab-driven-p,
  .evo-tpl-page-about-us .ab-wc-t,
  .evo-tpl-page-about-us .ab-wc-p,
  .evo-tpl-page-about-us .ab-largest-h3,
  .evo-tpl-page-about-us .ab-largest-p { box-sizing: border-box; padding-top: 1px; }
  .evo-tpl-page-about-us .ab-member-h { box-sizing: border-box; padding-top: 2px; }
  .evo-tpl-page-about-us .ab-solutions-sub,
  .evo-tpl-page-about-us .ab-why-h,
  .evo-tpl-page-about-us .ab-largest-eyebrow { box-sizing: border-box; padding-top: 1px; }
}

/* The shared trusted-by row is wider than the artboard (its last pill ends at
   2006), which gives every page that carries it a horizontal scrollbar at
   1920. Frame 559:2 clips it at the frame edge, so this page clips it too.
   The same rule belongs in site.css for every page: docs/fleet-issues/about.md. */
.evo-tpl-page-about-us .logos { overflow: hidden; }

/* --------------------------------------------------------------------------
   Mobile / tablet: release the artboard geometry, keep the reading order
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {

  .evo-tpl-page-about-us main section[class^="ab-"] {
    height: auto; margin: 0; padding: 56px 20px; overflow: hidden;
  }
  .evo-tpl-page-about-us main section[class^="ab-"] > *,
  .evo-tpl-page-about-us main section[class^="ab-"] .ab-sc-t,
  .evo-tpl-page-about-us main section[class^="ab-"] .ab-sc-ic,
  .evo-tpl-page-about-us main section[class^="ab-"] .ab-wc-t,
  .evo-tpl-page-about-us main section[class^="ab-"] .ab-wc-p,
  .evo-tpl-page-about-us main section[class^="ab-"] .ab-wc-ic,
  .evo-tpl-page-about-us main section[class^="ab-"] .ab-member-pill img,
  .evo-tpl-page-about-us main section[class^="ab-"] .ab-dcard img,
  .evo-tpl-page-about-us main section[class^="ab-"] .ab-acard img,
  .evo-tpl-page-about-us main section[class^="ab-"] .ab-intro-btn span,
  .evo-tpl-page-about-us main section[class^="ab-"] .ab-why-btn span {
    position: static; left: auto; top: auto; width: auto; height: auto;
    max-width: 100%; text-indent: 0; white-space: normal;
  }
  .evo-tpl-page-about-us main section[class^="ab-"] img { max-width: 100%; height: auto; }
  /* .ab-fbr only exists to reproduce a line break the frame draws at 1920.
     Below the artboard the copy has to reflow, so the break is dropped. */
  .evo-tpl-page-about-us .ab-fbr { display: none; }

  /* The release rules above are deliberately broad, so every rule below that
     has to survive them carries the same section prefix. Without it the plain
     .evo-tpl-page-about-us .ab-* form loses the cascade and the hero photo,
     the video still and the play button fall back into the text flow. */
  .evo-tpl-page-about-us main section[class^="ab-"].ab-hero { min-height: 420px; padding: 150px 20px 48px; }
  .evo-tpl-page-about-us main section[class^="ab-"] .ab-hero-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    object-fit: cover; max-width: none; }
  .evo-tpl-page-about-us main section[class^="ab-"] .ab-hero-ov { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
  .evo-tpl-page-about-us .ab-hero-panel { display: none; }
  .evo-tpl-page-about-us main section[class^="ab-"] .ab-eyebrow,
  .evo-tpl-page-about-us main section[class^="ab-"] .ab-h1 { position: relative; }
  .evo-tpl-page-about-us .ab-h1 { font-size: 42px; line-height: 48px; letter-spacing: -1px; }

  .evo-tpl-page-about-us .ab-intro-h { font-size: 32px; line-height: 38px; letter-spacing: -0.8px; margin: 18px 0 14px; }
  .evo-tpl-page-about-us .ab-intro-dash { font-size: 28px; line-height: 38px; letter-spacing: -0.7px; }
  .evo-tpl-page-about-us .ab-intro-lead { font-size: 20px; line-height: 26px; margin-bottom: 14px; }
  .evo-tpl-page-about-us .ab-intro-body { font-size: 17px; line-height: 26px; margin: 0 0 22px; }
  .evo-tpl-page-about-us main section[class^="ab-"] .ab-intro-btn { width: 193px; height: 58px; }
  .evo-tpl-page-about-us .ab-intro-btn span { line-height: 58px; }
  .evo-tpl-page-about-us .ab-collage { margin-top: 24px; }

  .evo-tpl-page-about-us .ab-member { text-align: center; }
  .evo-tpl-page-about-us main section[class^="ab-"] .ab-member-pill {
    display: inline-flex; align-items: center; justify-content: center;
    width: 220px; height: 80px; margin: 8px 6px; vertical-align: middle;
  }

  .evo-tpl-page-about-us .ab-solutions-h { font-size: 30px; line-height: 38px; letter-spacing: -0.6px; }
  .evo-tpl-page-about-us .ab-solutions-sub { margin: 14px 0 26px; font-size: 17px; }
  .evo-tpl-page-about-us .ab-scard { display: flex; align-items: center; gap: 18px; padding: 24px; margin-bottom: 16px; }
  .evo-tpl-page-about-us .ab-sc-t { font-size: 19px; line-height: 26px; }
  .evo-tpl-page-about-us main section[class^="ab-"] .ab-sc-ic { flex: 0 0 auto; width: 34px; }

  .evo-tpl-page-about-us main section[class^="ab-"].ab-video { min-height: 320px; padding: 0; }
  .evo-tpl-page-about-us main section[class^="ab-"] .ab-video-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    object-fit: cover; max-width: none; }
  .evo-tpl-page-about-us main section[class^="ab-"] .ab-video-shadow { position: absolute; left: 0; top: 0; width: 100%; height: 88px; }
  .evo-tpl-page-about-us main section[class^="ab-"] .ab-video-play { position: absolute; left: 50%; top: 50%; width: 72px; height: 57px;
    margin: -28px 0 0 -36px; }

  .evo-tpl-page-about-us .ab-driven-logo { margin-bottom: 10px; }
  .evo-tpl-page-about-us .ab-driven-h { font-size: 28px; line-height: 36px; letter-spacing: -0.5px; text-align: left; }
  .evo-tpl-page-about-us .ab-dcard { padding: 24px; margin: 20px 0; }
  .evo-tpl-page-about-us .ab-driven-h3a,
  .evo-tpl-page-about-us .ab-driven-h3b { font-size: 22px; line-height: 30px; margin: 18px 0 10px; white-space: normal; }
  .evo-tpl-page-about-us .ab-driven-p { font-size: 17px; line-height: 26px; }

  .evo-tpl-page-about-us .ab-why-h { font-size: 30px; line-height: 40px; white-space: normal; }
  .evo-tpl-page-about-us .ab-why-logo { margin: 6px 0 14px; }
  .evo-tpl-page-about-us .ab-why-sub { margin-bottom: 24px; font-size: 17px; }
  .evo-tpl-page-about-us main section[class^="ab-"] .ab-why-btn { width: 220px; height: 58px; margin-bottom: 26px; }
  .evo-tpl-page-about-us .ab-why-btn span { line-height: 58px; }
  .evo-tpl-page-about-us .ab-wcard { padding: 28px 24px; margin-bottom: 16px; }
  .evo-tpl-page-about-us .ab-wc-t { font-size: 22px; line-height: 28px; margin: 14px 0 10px; }
  .evo-tpl-page-about-us .ab-wc-p { font-size: 15px; line-height: 22px; }
  .evo-tpl-page-about-us .ab-why-prev { display: none; }

  .evo-tpl-page-about-us .ab-awards-h { font-size: 28px; line-height: 36px; letter-spacing: -0.5px; }
  .evo-tpl-page-about-us .ab-acard { padding: 24px; margin: 18px 0; text-align: center; }

  .evo-tpl-page-about-us .ab-leaders-h { font-size: 28px; line-height: 36px; }
  .evo-tpl-page-about-us .ab-leaders-badges { margin: 22px 0; }
  .evo-tpl-page-about-us .ab-leaders-p { font-size: 17px; line-height: 26px; text-align: left; }

  .evo-tpl-page-about-us .ab-largest-eyebrow { display: block; margin-bottom: 8px; }
  .evo-tpl-page-about-us .ab-largest-h { font-size: 28px; line-height: 36px; text-align: left; letter-spacing: -0.5px; }
  .evo-tpl-page-about-us .ab-largest-photo { margin: 16px 0; }
  .evo-tpl-page-about-us .ab-largest-photo img { width: 100%; height: auto; }
  .evo-tpl-page-about-us .ab-largest-h3 { font-size: 22px; line-height: 30px; margin: 20px 0 10px; }
  .evo-tpl-page-about-us .ab-largest-p { font-size: 17px; line-height: 26px; }
}