/**
 * FIGMA DESKTOP REFINEMENTS
 * =========================================================================
 * Pixel corrections measured against the Figma file, applied section by
 * section. This file only ever *overrides* - the markup and the base rules
 * in service.css are left exactly as they are.
 *
 * Everything layout-related is wrapped in @media (min-width: 992px), so the
 * tablet/mobile rules in service.css (max-width: 991 / 767 / 575) are never
 * touched. Mobile has no Figma frame, so it stays as built.
 *
 * Loads after service.css (see functions.php), so equal-specificity
 * selectors win on source order - no !important needed.
 *
 * Figma: https://www.figma.com/design/fwT2ycRTILUc1gf2iaFruE/A3-logics-website
 */

/* =========================================================================
 * 1. TRUSTED BY GLOBAL LEADERS - node 78:5792 (1440 x 799)
 *
 * Measured vertical stack, top to bottom:
 *   137 pad | 61.6 h2 | 60 | 80 logos | 133 | 20 rule | 61 | 76 badge
 *   | 36 | 56 labels | 78 pad   = 799
 * ========================================================================= */

/* The shipped trust-sectionbg.jpg is a washed-out export - it averages ~15/255
 * away from the Figma render, so the peach glow and the world-map texture are
 * far too faint. This one is rebuilt from the Figma image fill using the node's
 * own crop transform and opacity chain (image at 40%, under an 18% white wash);
 * it matches the Figma render to 2.5/255. Applied at every width, since it is
 * an asset-quality fix rather than a layout change.
 *
 * Also drops the hard-coded staging domain that service.css points at, so the
 * background now resolves relative to the theme on any environment. */
/* .a3-trusted-by {
  background-image: url(figma-assets/trust-sectionbg.jpg);
} */

@media (min-width: 992px) {

  /* Figma 137 top / 78 bottom. Was 145/145, which made the section 888px tall. */
  .a3-trusted-by {
    padding: 137px 0 78px;
  }

  /* Figma: 56px, line-height 61.6 (110%), letter-spacing -1.4px.
   * -0.025em == -1.4px at 56px, and stays proportional as --h2 clamps down. */
  .a3-trusted-by__heading {
    margin-bottom: 60px;
    line-height: 1.1;
    letter-spacing: -0.025em;
  }

  /* 950 / 5 slides = 190px each; 4px side padding leaves 182px of content, so
   * every logo renders at its natural (= Figma) width. At 1024/20px the slide
   * only gave 165px, which squeezed Johnson & Johnson (181px) and
   * double:yolk (175px) down to 91% and 94%.
   * Bonus: slide centres land at 340/530/720/910/1100 against Figma's
   * 344.5/528/683/890.5/1091. */
  /* 950 was measured against the original five-logo set, whose marks were
   * narrow enough to sit inside a 190px slide with room to spare. The client
   * set is now 37 logos and 26 of them are wide wordmarks that run right up to
   * the slide wall: at 190px wide with 4px of padding a side, the gutter
   * between two of them collapsed to 8px and they read as one smear.
   *
   * Widened rather than capping the logo, because a width cap shrinks exactly
   * the logos that are already shortest - one wordmark renders 17px tall - and
   * would have made the size spread worse. 1160 still sits inside the 1232
   * container, keeps five logos in view, and leaves every mark at the size it
   * renders today. Slide 232, content 182, so the tightest gutter is 50px. */
  .a3-trusted-by__logos-wrap {
    max-width: 1160px;
    margin-bottom: 133px;
  }

  .a3-trusted-by__logo-slide {
    padding: 0 25px;
  }

  /* This line is NOT Inter. The text node's base style says Inter Regular 400,
   * but all 38 characters carry a character-level override in
   * styleOverrideTable -> Poppins / Poppins-Medium / w500 / 16px / ls 1.0 /
   * UPPER. Read the per-character styles, not the node style, or you get the
   * wrong family here.
   *
   * Poppins' uppercase advances are narrower than Inter's, which is why 1px
   * tracking is right: it renders the string at 372px, exactly the design's
   * ink width inside its 375px box. (With Inter, 1px measured 391px and would
   * have wrapped - that mismatch was the tell.)
   *
   * Poppins 500 is enqueued in functions.php; global.css loads Inter only. */
  .a3-trusted-by__cert-heading {
    margin-bottom: 61px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    /* Figma textAlignHorizontal=CENTER. No effect on desktop (single line in a
     * centred flex row), but without it a longer heading that wraps would go
     * left-aligned between the two rules. */
    text-align: center;
  }

  .a3-trusted-by__cert-heading::before,
  .a3-trusted-by__cert-heading::after {
    width: 51px;
  }

  /* Figma: badge box bottom 629 -> label line box top 665. */
  .a3-trusted-by__cert {
    gap: 36px;
  }

  /* scale-down rather than contain. Google Cloud is 207x32 natural but its box
   * is 224px wide, and contain *upscales* to fill it (224x34.6, 8% oversized).
   * scale-down never enlarges, so each badge lands at its natural size - which
   * is exactly the Figma size. The fixed 76px box still aligns the five labels. */
  .a3-trusted-by__cert img {
    margin-bottom: 0;
    object-fit: scale-down;
  }

  /* Two 28px lines. min-height 100 left 44px of dead space under every column
   * and was most of the section's extra height. 56 still centres the one-line
   * "SOC 2 Type II Compliant" against its neighbours, as Figma does. */
  .a3-trusted-by__details {
    min-height: 56px;
  }

  /* Figma: 14px, weight 500, line-height 28px (200%), letterSpacing 0.
   *
   * Both lines get the same treatment. In Figma each badge caption is a single
   * two-line text node at weight 500; the markup splits it across two ACF
   * fields (title + subtitle), so the second line needs the weight too - it was
   * rendering at 400 against the first line's 500.
   *
   * letter-spacing: normal cancels the -0.1px that the parent theme's
   * theme.json sets globally and every element inherits. */
  .a3-trusted-by__cert-title,
  .a3-trusted-by__cert-sub {
    font-weight: 500;
    line-height: 28px;
    letter-spacing: normal;
  }

  .a3-trusted-by__cert-sub {
    margin-top: 0;
  }
}

/* =========================================================================
 * 2. STATS BAR - node 79:5950 (1440 x 654)
 *
 * 2x2 bento grid, 24px gap, alternating wide/narrow:
 *   row 1  [ 626.7 "500+" ] [ 301.3 "21+" ]
 *   row 2  [ 301.3 "91%"  ] [ 626.7 "350+" ]
 * Vertical stack: 107 pad | 235 | 24 | 235 | 53 pad = 654
 *
 * All eight text nodes are Inter Bold 700 with no character-level overrides
 * (checked - that is what caught us out on the eyebrow in section 1).
 * ========================================================================= */

@media (min-width: 992px) {

  /* Figma 107 top / 53 bottom. Was 100/100 on a section that measured 742. */
  .a3-stats {
    padding: 107px 0 53px;
  }

  /* Container 982 -> row 976 -> col-lg-8 = 626.7 and col-lg-4 = 301.3, which
   * are exactly the Figma card widths. Was 1025, giving 655.3 / 315.7. */
  .a3-stats .container {
    max-width: 982px;
  }

  .a3-stats__item {
    /* .row.g-4 already spaces the rows via gutter margin-top. This extra
     * margin fed back through `height: 100%` and made every card 259px
     * instead of 235 - it was the whole 24px-per-row height overshoot. */
    margin-bottom: 0;
    border-radius: 32px;
    /* Figma primaryAxisAlignItems=MAX: the number/label block is pinned to the
     * bottom of the card, 40px above its edge - not vertically centred. */
    justify-content: flex-end;
  }

  /* Figma: 60px on the two narrow cards, 72px on the two wide ones.
   * Everything was 72px. Colour was #222 against the design's #18181B. */
  .a3-stats__number {
    font-size: 60px;
    color: #18181b;
    margin-bottom: 8px; /* Figma itemSpacing 8, was 12 */
  }

  .col-lg-8 .a3-stats__number {
    font-size: 72px;
  }

  /* Figma #52525B; was #71717A. Size/weight/line-height/tracking already match. */
  .a3-stats__label {
    color: #52525b;
  }

  /* On the orange card the caption is #FFEDD4, not plain white. */
  .a3-stats__item.is-orange .a3-stats__label {
    color: #ffedd4;
  }

  /* The "91%" card is the only one with a border, and its shadow is a light
   * #E4E4E7 rather than the dark one the other white cards use. */
  .a3-stats .row > div:nth-child(3) .a3-stats__item {
    border: 1px solid #e4e4e7;
    box-shadow:
      0 8px 10px -6px rgba(228, 228, 231, 0.5),
      0 20px 25px -5px rgba(228, 228, 231, 0.5);
  }

  /* Figma #F4F4F5; was #F8F8F8. background-color, not the shorthand - the
   * shorthand would wipe out the card4bg.svg graphic. */
  .a3-stats .row > div:nth-child(4) .a3-stats__item {
    background-color: #f4f4f5;
  }
}

/* =========================================================================
 * 3. COMPREHENSIVE TECHNICAL CAPABILITIES - node 79:6057 (1440 x 1364)
 *
 * 127 pad | header 285 | 80 | body 742.8 | 128 pad
 * Body is a 2-up grid: 434.7 tab card | 20 gap | 889.3 content column.
 * ========================================================================= */

@media (min-width: 992px) {

  /* Figma fill #FAFAFA (was #F8F8F8) + a 1px #E4E4E7 rule along the top edge
   * that the build did not have at all. */
  .a3-tech-capabilities {
    padding: 127px 0 128px;
    background: #fafafa;
    border-top: 1px solid #e4e4e7;
  }

  /* Figma lays this section out on 48px gutters, giving 1344 of content at
   * 1440 - not the theme's shared 1320 container (1290 of content). */
  .a3-tech-capabilities__inner {
    max-width: 1440px;
    padding-left: 48px;
    padding-right: 48px;
  }

  /* Figma: Inter *Medium 500*, letter-spacing -1.4px. Was 400 / -0.1px
   * (the -0.1px is the parent theme's global theme.json value). */
  .a3-tech-capabilities__heading {
    font-weight: 500;
    letter-spacing: -0.025em;
    margin-bottom: 24px; /* Figma itemSpacing 23.99, was 20 */
  }

  /* Figma: 768 wide, tracking 0. Inter Light 300 at 19/34.2 already matched,
   * but the 300 face was not being loaded - see functions.php. */
  .a3-tech-capabilities__description {
    max-width: 768px;
    letter-spacing: normal;
    margin-bottom: 80px; /* Figma itemSpacing 80, was 60 */
  }

  /* The header sits in a col-lg-7, which on a 1344 container leaves 764px -
   * 4px short of Figma's 768 description box, and that was enough to change
   * where lines 3 and 4 broke. Let the column fill and cap each block at its
   * own Figma width instead: heading frame 896, description 768. */
  .a3-tech-capabilities__inner > .row > .col-lg-7 {
    width: 100%;
  }

  .a3-tech-capabilities__heading {
    max-width: 896px;
  }

  /* Figma columns are 434.7 / 889.3 with a 20px gap = 32.3% / 66.2% of 1344.
   * The markup is col-lg-3 / col-lg-9 (25% / 75%), so override the widths
   * rather than touch the PHP. With a 20px gutter on 1344 of content this
   * lands on 434.7 and 889.4 exactly. */
  .a3-tech-capabilities__tabs {
    --bs-gutter-x: 20px;
  }

  .a3-tech-capabilities__tabs > .col-lg-3 {
    width: 33.3333%;
  }

  .a3-tech-capabilities__tabs > .col-lg-9 {
    width: 66.6667%;
  }

  /* Figma: radius 24, padding 24, and a much deeper shadow than the build's
   * 0 20px 50px rgba(0,0,0,.08). */
  .a3-tech-capabilities__tab-div {
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }

  /* Figma shows all eight tabs at once - the list is 596px tall inside a
   * 742.8 card. max-height 480 + overflow:auto turned that into a scroller.
   * The 1px rule on the right is the "Vertical Divider" rectangle. */
  .a3-tech-capabilities__tab-list {
    max-height: none;
    overflow: visible;
    padding: 50px 16px 50px 0;
    border-right: 1px solid #e4e4e7;
    /* The card centres its single flex child, so the list was sizing to its
     * content and sitting 35px in from the card padding. Figma has it FILL. */
    width: 100%;
  }

  /* Figma button: 20px/16px padding, 24px between the [n] and the label,
   * 30px line-height, 4px between buttons -> 71px tall. */
  .a3-tech-capabilities__tab-btn {
    gap: 24px;
    padding: 20px 16px;
    line-height: 30px;
    margin-bottom: 4px;
  }

  .a3-tech-capabilities__tab-btn.active {
    font-weight: 700; /* Figma: active label Bold, the rest Semi Bold 600 */
  }

  /* Figma spaces 8 buttons with 7 gaps; a trailing margin made the card 4px tall. */
  .a3-tech-capabilities__tab-btn:last-child {
    margin-bottom: 0;
  }

  /* 50% ignores the 20px flex gap, so the pair overflowed to 909 inside an
   * 889.3 track. calc(50% - 10px) gives Figma's 435 + 20 + 435.
   *
   * 452 is Figma's own fixed height for these two cards (layoutSizingVertical
   * =FIXED). With the 270 image above it that makes the right column 742,
   * matching the tab card beside it - which is how the design squares up. */
  /* panels_btm is a flex row holding .position-relative (the orange card) and
   * a bare <ul> (the bullet list). A `> div` selector missed the <ul>, so it
   * kept its content width and shrank the card - 274 instead of Figma's 435.
   *
   * min-width: 0 is the part that matters: a flex item will not shrink below
   * its content unless you allow it, which is what let the list push the card
   * down. Both sides now get the same fixed basis. */
  .a3-tech-capabilities__panels_btm > .position-relative,
  .a3-tech-capabilities__panels_btm > ul {
    flex: 0 0 calc(50% - 10px);
    width: calc(50% - 10px);
    max-width: calc(50% - 10px);
    min-width: 0;
  }



  .a3-tech-capabilities__panels_btm > .position-relative {
    min-height: 452px;
  }

  /* Figma's gap between the image and the two cards is 20; the markup uses
   * Bootstrap's pt-4 (24px) for it. The panel's own `gap: 20px` never applies
   * here - panels_btm has no grid-area, so it lands in the same implicit row
   * as the image - which is why this padding is the real spacer.
   * !important because .pt-4 is a Bootstrap utility and already !important. */
  .a3-tech-capabilities__panels_btm {
    padding-top: 20px !important;
  }

  .a3-tech-capabilities__panel:not(.has-media) .a3-tech-capabilities__panels_btm {
    padding-top: 0 !important;
  }

  /* Figma image card: 270 tall, radius 24, same deep shadow as the others. */
  .a3-tech-capabilities__panel > img {
    height: 270px;
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }

  /* Figma layers a "Gradient" rectangle over the photo - black at 50% along
   * the bottom edge fading to transparent at the top. Without it the photo
   * reads much lighter than the design. Done as a pseudo-element because the
   * image has no wrapper to hang an overlay on. */
  .a3-tech-capabilities__panel {
    position: relative;
  }

  /* .has-media only: the class is on the panel when the row actually has a tab
   * image. 130 published pages carry no image on any capability tab, and there
   * the scrim had nothing to sit on - it painted its 270px of black straight
   * down over the bullet card underneath. */
  .a3-tech-capabilities__panel.has-media::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 270px;
    border-radius: 24px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    pointer-events: none;
  }

  /* Figma orange card: radius 24, padding 32, drop shadow. */
  .a3-tech-capabilities__card {
    border-radius: 24px;
    padding: 32px;
    /* box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); */
  }

  .a3-tech-capabilities__card-icon {
    width: 40px;
    margin-bottom: 24px; /* Figma: icon box bottom 362 -> heading text 386 */
  }

  /* Figma: UPPERCASE, 22px/27.5, tracking 1.1. The build rendered it in
   * title case with the inherited -0.1px tracking. */
  .a3-tech-capabilities__card h3 {
    text-transform: uppercase;
    line-height: 27.5px;
    letter-spacing: 1.1px;
    margin-bottom: 15px; /* Figma itemSpacing 15.3, was 20 */
  }

  /* Figma: Inter Medium 500, 14/22.75, solid #FFF7ED - not white at 0.95. */
  .a3-tech-capabilities__card p {
    font-weight: 500;
    line-height: 22.75px;
    color: #fff7ed;
    opacity: 1;
  }

  /* Figma list card matches the other cards: radius 24, same shadow. */
  .a3-tech-capabilities__panel ul {
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }

  .a3-tech-capabilities__panel li {
    line-height: 22.75px; /* Figma 14/22.75 Medium, was 14/1.7 */
    font-weight: 500;
  }

  /* Figma bullet titles are 16/24 Bold; the build had them at 20px.
   *
   * Figma's item pitch is 97.4: title 24 + 3.4 + description 46 + 24 before
   * the next title. The build ran 89.5, so each bullet drifted ~8px further
   * out of register than the one above it. */
  .a3-tech-capabilities__panel li span {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 4px;
  }

  .a3-tech-capabilities__panel ul {
    padding: 32px; /* Figma card padding, was 35 */
  }

  .a3-tech-capabilities__panel li {
    margin-bottom: 24px; /* Figma gap to the next bullet, was 20 */
  }

  /* Figma holds the orange card's body copy in a 333.6-wide box inside the
   * card's 371 of content width, which is what sets its three line breaks. */
  .a3-tech-capabilities__card p {
    max-width: 333.6px;
  }
}

/* =========================================================================
 * 3B. COMPREHENSIVE TECHNICAL CAPABILITIES - TAB MOTION
 *
 * Replaces the instant show/hide of the tab section with a real transition:
 * the outgoing panel fades and drifts out while the incoming one crosses in,
 * its three blocks (photo / orange card / bullet list) staggered a few frames
 * apart.
 *
 * Motion only - nothing here changes how the section *looks* once it has
 * settled. Same layout, same sizes, same colours as section 3 leaves them;
 * the only new declarations are opacity/transform/transition, all of which
 * resolve back to the design's own resting state.
 *
 * Direction-aware: picking a tab further down the list brings the new panel
 * up from below, picking one further up brings it down from above, so the
 * motion always agrees with where you clicked. tech-tabs.js supplies the
 * direction (data-a3-dir); everything else here is plain CSS and still works
 * if that file never loads.
 *
 * NOTE: unlike sections 1-3 this one is *not* desktop-only. Motion is not a
 * Figma measurement, so the tablet/mobile layouts get it too - see 3B.2 for
 * the small-screen variant, which has to use keyframes rather than
 * transitions because those panels are still display:none when hidden.
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * 3B.1 Desktop - the panels cross-fade
 *
 * Bootstrap swaps tab panes with display:none, which leaves nothing to
 * animate on the way *out* - the old panel is simply gone on the same frame
 * the new one appears. So on desktop the panels are stacked instead: the
 * active one stays in flow exactly where it always was, the other seven are
 * lifted out of flow on top of it and hidden with visibility. The outgoing
 * panel can then fade out while the incoming one fades in.
 *
 * Only the active panel is in flow, so the section keeps the height it has
 * always had - the seven parked panels contribute nothing to it. And
 * visibility:hidden keeps them out of the tab order and the accessibility
 * tree, exactly as display:none did.
 * ------------------------------------------------------------------------- */

@media (min-width: 992px) {

  .a3-tech-capabilities__panels {
    position: relative; /* the anchor for the parked panels below */

    /* Which way the panels travel. 1 = the new tab is further down the list
     * (content comes up from below), -1 = further up. tech-tabs.js flips the
     * attribute on show.bs.tab; the value below is the no-JS fallback. */
    --a3-dir: 1;
  }

  .a3-tech-capabilities__panels[data-a3-dir="up"] {
    --a3-dir: -1;
  }

  /* Beats .tab-content > .tab-pane { display: none } on source order - equal
   * specificity, and this file is enqueued after Bootstrap.
   *
   * display: block, deliberately - the same value Bootstrap gives the pane it
   * is showing. service.css also has `display: grid` + grid-template-areas on
   * .a3-tech-capabilities__panel, but Bootstrap's .tab-content > .active has
   * always won, so those rules have never actually run and the panel has
   * always laid out as block + flex. Turning them on here would rebuild the
   * panel into a different design; it also starts a runaway loop with the
   * Slick slider inside it, which writes its own measured width back onto its
   * track - a content-sized 1fr column then grows on every single tab click. */
  .a3-tech-capabilities__panels > .tab-pane {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    /* visibility is held until the fade has finished, so the panel stays
     * measurable for its whole exit. */
    transition:
      opacity 0.22s ease,
      visibility 0s linear 0.22s;
  }

  /* .active, not .show: Bootstrap moves .active on both panels in the same
   * tick (that is what makes the cross-fade possible) and only catches up
   * with .show once the transition has run. The extra class also lifts this
   * above Bootstrap's .fade:not(.show) { opacity: 0 }, which would otherwise
   * hold the incoming panel at zero for the whole transition. */
  .a3-tech-capabilities__panels > .tab-pane.active {
    /* Back in flow: the active panel is the one that gives the section its
     * height, exactly as before. z-index keeps the incoming panel above the
     * one still fading out, whichever order they sit in the markup. */
    position: relative;
    z-index: 1;
    visibility: visible;
    opacity: 1;
    transition:
      opacity 0.4s ease,
      visibility 0s;
  }

  /* The three blocks of a panel, staggered. The panel itself only fades -
   * all the travel lives here, so the movement never doubles up.
   *
   * This is the resting/incoming state: parked one step *behind* in the
   * direction of travel, waiting to come in. */
  .a3-tech-capabilities__panel > img,
  .a3-tech-capabilities__panel::before,
  .a3-tech-capabilities__panels_btm > * {
    opacity: 0;
    transform: translate3d(0, calc(var(--a3-dir) * 28px), 0);
    transition:
      opacity 0.22s ease,
      transform 0.22s ease;
  }

  /* .show without .active is the panel currently leaving - it drifts on in
   * the direction of travel rather than retreating the way the incoming one
   * arrives, so the two never cross over each other. Bootstrap drops .show
   * once the fade is done, at which point this silently reverts to the
   * resting state above (at opacity 0, so nothing is visible). */
  .a3-tech-capabilities__panel.show:not(.active) > img,
  .a3-tech-capabilities__panel.show:not(.active)::before,
  .a3-tech-capabilities__panel.show:not(.active) .a3-tech-capabilities__panels_btm > * {
    transform: translate3d(0, calc(var(--a3-dir) * -16px), 0);
  }

  .a3-tech-capabilities__panel.active > img,
  .a3-tech-capabilities__panel.active::before,
  .a3-tech-capabilities__panel.active .a3-tech-capabilities__panels_btm > * {
    opacity: 1;
    transform: none;
    /* Slower and eased-out on the way in, quick and linear-ish on the way
     * out (rule above) - the section should feel like it settles, not like
     * it bounces back and forth. */
    transition:
      opacity 0.5s ease,
      transform 0.55s cubic-bezier(0.22, 0.85, 0.28, 1);
  }

  /* 70ms apart, top to bottom: photo, then the orange card, then the bullet
   * list. Only the incoming panel is staggered - the outgoing one leaves in
   * one piece (no delays above), or the swap starts to feel slow. */
  .a3-tech-capabilities__panel.active > img,
  .a3-tech-capabilities__panel.active::before {
    transition-delay: 0.02s;
  }

  .a3-tech-capabilities__panel.active .a3-tech-capabilities__panels_btm > *:nth-child(1) {
    transition-delay: 0.1s;
  }

  .a3-tech-capabilities__panel.active .a3-tech-capabilities__panels_btm > *:nth-child(2) {
    transition-delay: 0.17s;
  }
}

/* -------------------------------------------------------------------------
 * 3B.2 Tablet / mobile - the same entrance, as an animation
 *
 * Below 992px the panels are left on Bootstrap's display:none swap: those
 * layouts are a single column, so stacking them would pad every short panel
 * out to the height of the longest one. A transition cannot run on an
 * element that was display:none a frame ago, so the entrance is a keyframe
 * animation instead - same shape, no exit half.
 * ------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

  /* Bootstrap's .fade holds the incoming panel at opacity 0 until it adds
   * .show ~150ms later, which would swallow the first third of the entrance
   * and then pop the rest in. The animation below owns the fade instead. */
  .a3-tech-capabilities__panels > .tab-pane.active {
    opacity: 1;
  }

  /* fill-mode backwards, not both: `backwards` covers the delay before each
   * block starts (without it they would all flash in at full opacity and then
   * animate), but leaves nothing applied once the animation has finished.
   * With `both` the finished animation keeps holding its end frame, Chrome
   * keeps the composited layer it rendered the movement on, and every line of
   * text inside stays on greyscale antialiasing instead of going back to
   * subpixel - a small but permanent change to how the copy looks. */
  .a3-tech-capabilities__panel.active > img,
  .a3-tech-capabilities__panel.active .a3-tech-capabilities__panels_btm > * {
    animation: a3-tab-rise 0.5s cubic-bezier(0.22, 0.85, 0.28, 1) backwards;
  }

  .a3-tech-capabilities__panel.active .a3-tech-capabilities__panels_btm > *:nth-child(1) {
    animation-delay: 0.08s;
  }

  .a3-tech-capabilities__panel.active .a3-tech-capabilities__panels_btm > *:nth-child(2) {
    animation-delay: 0.14s;
  }
}

@keyframes a3-tab-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* -------------------------------------------------------------------------
 * 3B.3 prefers-reduced-motion
 *
 * Durations and delays only - the transforms stay, since they are the resting
 * state each block animates out of. Zeroing the timings makes every one of
 * them resolve instantly, so the tabs go back to a plain swap.
 * ------------------------------------------------------------------------- */

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

  .a3-tech-capabilities__panels > .tab-pane,
  .a3-tech-capabilities__panel > img,
  .a3-tech-capabilities__panel::before,
  .a3-tech-capabilities__panels_btm > * {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
  }
}

/* =========================================================================
 * 4. TECHNOLOGY STACK header - node 79:7555
 *
 * Header block only (eyebrow / h2 / intro). The filters and card grid below
 * are outside this node, so nothing here touches them.
 *
 * Figma stack: eyebrow 16 | 15.6 | h2 55.2/line | 23.6 | paragraph 29.25/line
 * All three text nodes are plain Inter - no character-level overrides.
 * ========================================================================= */

@media (min-width: 992px) {

  /* Figma: Inter Semi Bold 600 (was 700), 12/16 (line box was 20.4),
   * tracking 2.4px (0.18em resolves to 2.16 at 12px). */
  .a3-tooling__eyebrow {
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 2.4px;
    margin-bottom: 15.6px; /* Figma itemSpacing 15.6, was 18 */
  }

  /* Figma's marker rectangle is 6x6, not 8x8. */
  .a3-tooling__eyebrow:before {
    width: 6px;
    height: 6px;
  }

  /* Figma: #18181B and -1.5px tracking. The build had #202124 and was
   * inheriting the parent theme's global -0.1px. Size/line-height/weight
   * (48 / 55.2 / 400) already matched. */
  .a3-tooling__heading {
    color: #18181b;
    letter-spacing: -1.5px;
    margin-bottom: 23.6px; /* Figma h2 bottom 142.6 -> paragraph top 166.2 */
  }

  /* Figma holds the intro in a 672 box; the build allowed 760, so it broke
   * lines later than the design. Tracking is 0, not the inherited -0.1px. */
  .a3-tooling__description {
    max-width: 672px;
    letter-spacing: normal;
  }
}

/* =========================================================================
 * 5. EXPLORE OUR SERVICES - node 81:9710 (1440 x 754.8)
 *
 * 112 pad | badge 30 | 16 | h2 52.8 | 56 | card row 175.5 | 24 | row 175.5
 * | 113 pad  = 754.8
 * Cards are 300 wide on a 324 pitch (24 gap), 4 up, centred -> 84px margins.
 * All text nodes are plain Inter - no character-level overrides.
 * ========================================================================= */

@media (min-width: 992px) {

  /* Figma 112 top / 113 bottom (was 120/120) and the rule is #E4E4E7, not #eee. */
  .a3-explore-services {
    padding: 112px 0 113px;
    border-bottom: solid 1px #e4e4e7;
  }

  /* 1302 container -> 1272 of content -> Bootstrap g-4 makes each col 324 and
   * each card 300, landing the row at x=84 exactly as Figma has it. The shared
   * 1320 container gave 1290 of content and 304.5 cards. */
  .a3-explore-services .container {
    max-width: 1302px;
  }

  /* Figma: Inter Bold 700 (was 600), 12/16 (line box was 20.4), tracking
   * 1.8px (was inheriting the theme's global -0.1px), #FF6900 (was #F54900).
   * Padding 15 horizontal / 6 vertical with an 8px gap - the build's 30/5/10
   * happened to total the same 217px width only because the tracking was
   * wrong in the opposite direction. */
  .a3-explore-services__header .a3-eyebrow {
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 1.8px;
    color: #ff6900;
    /* Figma reads 15px from the badge's outer edge, and its 1px stroke is
     * inset - so 14 here, which lands the pill at 217.2 exactly. */
    padding: 6px 14px;
    gap: 8px;
  }

  /* Figma: badge bottom 142 -> h2 top 158, and h2 bottom 210.8 -> cards 266.8. */
  .a3-explore-services__header {
    margin-bottom: 56px;
  }

  .a3-explore-services__heading {
    margin-top: 16px;
    line-height: 52.8px;
  }

  /* Figma card: 175.5 tall, border #E4E4E7 at 80%, and a soft resting shadow
   * the build did not have (it only had one on :hover).
   *
   * Content is not centred: Figma sets the icon 41 from the top, 20 to the
   * title, and 33 below it - which is 4px lower than centring would put it. */
  .a3-service-card {
    min-height: 175.5px;
    /* 41/33 are measured from the card's outer edge and the 1px border is
     * inset, so the padding is one less on each side: 40 + 56 tile + 20 +
     * 25.5 title + 32 + 2 border = 175.5. */
    padding: 40px 35px 32px;
    justify-content: flex-start;
    border-color: rgba(228, 228, 231, 0.8);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  }

  /* Figma puts the arrow 21 from the card's outer edge; the 1px inset border
   * means 20 here. */
  .a3-service-card__arrow {
    top: 20px;
    right: 20px;
  }

  /* Figma tile is 56x56 at radius 16 - the build had 48x48 at radius 8 - with
   * the same two-layer shadow the badge uses. */
  .a3-service-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    margin-bottom: 20px;
    box-shadow:
      0 1px 2px -1px rgba(0, 0, 0, 0.1),
      0 1px 3px rgba(0, 0, 0, 0.1);
  }

  /* Figma: 17px Bold, 25.5 line-height, -0.425 tracking. Was 14px/600/1.35. */
  .a3-service-card__title {
    font-size: 17px;
    font-weight: 700;
    line-height: 25.5px;
    letter-spacing: -0.425px;
  }
}

/* -------------------------------------------------------------------------
 * 4b. TECHNOLOGY STACK - horizontal position (node 79:7555)
 *
 * Figma puts this section's content 91px from its frame's left edge, but that
 * frame is nudged 5px right of every other section frame on the page, and 91
 * lines up with nothing else in the build: the page container puts content on
 * 75, and the Explore section's identical 4 x 300 grid sits on 84.
 *
 * Matching the design here made the section visibly step out of line with the
 * sections above and below it, so it stays on the shared page container.
 * ------------------------------------------------------------------------- */
/* =========================================================================
 * 6. PROVEN SUCCESS ACROSS EVERY INDUSTRY - node 85:11108 (1440 x 2051)
 *
 * 96 pad | header 222 | 64 | 3 rows of 536 | 62 pad
 * Each row: 608 image | 64 gap | 608 content, 64 padding top/bottom,
 * separated by a 1px #C9CCD1 rule.
 * ========================================================================= */

@media (min-width: 992px) {

  /* Figma 96 top / 62 bottom (was 120/120), on a white fill, closed by a 1px
   * #C9CCD1 rule along the bottom edge - the same colour as the rules between
   * the rows, so the last row reads as closed rather than trailing off into
   * the testimonials section below. */
  .a3-case-studies {
    padding: 96px 0 62px;
    background: #fff;
    border-bottom: 1px solid #c9ccd1;
  }

  /* Figma container is 1280 sitting at x=80; the shared 1320 gave 1290 at 75. */
  .a3-case-studies .container {
    max-width: 1310px;
  }

  /* Figma: 55.2 line-height and -1.5 tracking (was 57.6 and the inherited
   * -0.1px). The orange run on "Industry" already matched. */
  .a3-case-studies__heading {
    line-height: 55.2px;
    letter-spacing: -1.5px;
    margin-bottom: 15px;
  }

  /* The eyebrow reuses .a3-tooling__eyebrow, so the Technology Stack rules in
   * section 4 were reaching it: orange, 12px/600, 2.4 tracking and a 6x6
   * marker. Figma has this one as plain grey text with no marker at all -
   * Inter Medium 14/20, tracking 0.35, #4B5563. */
  .a3-case-studies .a3-tooling__eyebrow {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.35px;
    color: #4b5563;
    margin-bottom: 16px;
  }

  .a3-case-studies .a3-tooling__eyebrow:before {
    display: none;
  }

  /* Figma: 16/26 in a 766 box (was 16/28.8 capped at 720). */
  .a3-case-studies__description {
    line-height: 26px;
    max-width: 766px;
    margin-bottom: 64px;
  }

  /* Figma row: 64 padding top/bottom, 608 image + 64 gap + 608 content. */
  .a3-case-study-card {
    padding: 64px 0;
    gap: 64px;
  }

  /* service.css zeroes the last row's bottom padding, which pulled the final
   * case study to 86px above the section edge where Figma has 126 (the row's
   * own 64 plus the section's 62). Figma's last row keeps its padding - it
   * only drops the separator rule, which service.css already handles. */
  .a3-case-study-card:last-child {
    padding-bottom: 64px;
  }

  /* The card's flex children are Bootstrap .col-lg-6 wrappers, not the image
   * and content divs. At 50% each (637px) a 64px gap overflows the 1274 row
   * and wraps the content below the image, so the columns get explicit bases
   * and their gutter padding is removed - Figma's 64 is the whole gap. */
  .a3-case-study-card > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
  }

  .a3-case-study-card > [class*="col-"]:first-child {
    flex: 0 0 608px;
    width: 608px;
    max-width: 608px;
  }

  .a3-case-study-card > [class*="col-"]:last-child {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
  }

  .a3-case-study-card__image img {
    height: 380px;
  }

  /* Figma drew this card against a 22-character title. The real records
   * average 87 characters and run to 132, so at the node's 48/55.2 every card
   * gave the headline 4-7 lines - 221 to 386px of type above a 380px photo,
   * and no two cards the same height.
   *
   * 32/38 is the size at which the measured set settles: 30 of the 31 titles
   * fit inside three lines, so the clamp only ever bites on the longest one.
   * The clamp is visual - the full title stays in the DOM, so the link's
   * accessible name and the crawler both still see all of it. */
  .a3-case-study-card__link h3 {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -1px; /* -1.5 was tracking for 48px; this is the same ratio */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }

  /* Figma arrow is 40x40, not 35. */
  .a3-case-study-card__link svg {
    width: 40px;
    height: 40px;
  }

  /* --- end of the 992+ band ------------------------------------------- */
}

/* Tablet, 768-991. This band is owned by neither refinement file, so
 * service.css's base 48px still applied here and the headline ran to 5 lines.
 * The column is wider than the desktop one, so 40/48 clears three lines for 30
 * of the 31 measured titles. */
@media (min-width: 768px) and (max-width: 991.98px) {

  .a3-case-study-card__link h3 {
    font-size: 40px;
    line-height: 48px;
    letter-spacing: -1.2px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }
}

@media (min-width: 992px) {

  .a3-case-study-card__content p,
  .a3-case-study-card__impact {
    line-height: 26px;
  }

  /* Figma badge: 11px Medium, tracking 0.2 (was 13px Regular at 1px). */
  .a3-case-study-card__category {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2px;
  }

  /* Figma tag chips are 8px Medium - noticeably smaller than the badge. */
  .a3-case-study-card__tags span {
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 0.2px;
  }
}

/* =========================================================================
 * 7. TESTIMONIALS - node 82:10128 (1440 x 1060.6)
 *
 * 128 pad | header 87.6 | 64 | card row 652 | 128 pad
 * Three 426-wide cards in a bordered 1280 shell, split by 1px #E4E4E7 rules.
 * Quote is Inter Light 300 - the 300 face is loaded in functions.php.
 * ========================================================================= */

@media (min-width: 992px) {

  /* Figma 128 top/bottom (was 100) plus the 1px #E4E4E7 rule on the bottom
   * edge that the build did not have. */
  .a3-testimonials {
    padding: 128px 0;
    border-bottom: 1px solid #e4e4e7;
  }

  /* Figma container is 1280 at x=80; the shared 1320 gave 1290 at x=75. */
  .a3-testimonials .container {
    max-width: 1310px;
  }

  /* Figma 55.2 (was 55), and 64 between the header block and the cards
   * (was 60). */
  .a3-testimonials__heading {
    line-height: 55.2px;
    margin-bottom: 22px;
  }

  /* Figma card: 650 tall, divided by #E4E4E7 rules - the build used #EAEAEA. */
  .a3-testimonials__card {
    min-height: 650px;
    border-right-color: #e4e4e7;
  }

  /* Figma quote line-height is 24.38, not 24. */
  .a3-testimonials__quote {
    line-height: 24.38px;
  }
}

/* =========================================================================
 * 8. CONTACT FORM - node 108:2 (1440 x 1050)
 *
 * 60 pad | 929 row | 60 pad, on white, closed by a 1px #E4E4E7 rule.
 * Row: 516.8 copy column | 96 gap | 731 form card, inside 1344 of content.
 * ========================================================================= */

@media (min-width: 992px) {

  /* Figma 60 top/bottom (was 120) plus the 1px #E4E4E7 bottom rule. */
  .a3-contact-cta {
    padding: 60px 0;
    border-bottom: 1px solid #e4e4e7;
  }

  /* Figma lays this out on 48px gutters like the capabilities section:
   * 1344 of content, not the shared 1320 container's 1290. */
  .a3-contact-cta .container {
    max-width: 1440px;
    padding-left: 48px;
    padding-right: 48px;
  }

  /* Figma columns are 516.8 and 731 with a 96 gap - not the 50/50 the build
   * used. With a 96px gutter the row spans 1440, so the two columns are
   * (516.8+96)/1440 and (731+96)/1440. */
  .a3-contact-cta .row {
    --bs-gutter-x: 96px;
  }

  .a3-contact-cta .row > *:first-child {
    width: 42.5556%;
  }

  .a3-contact-cta .row > *:last-child {
    width: 57.4444%;
  }

  /* service.css adds padding-right: 40px here, which squeezed the copy column
   * to 476.8 against Figma's 516.8 and changed where the heading wrapped.
   * Figma's 96px column gap is the whole gap. */
  .a3-contact-cta__content {
    padding-right: 0;
  }

  /* Figma 55.2 line-height (was 55) and a 24 gap to the orange rule. */
  .a3-contact-cta__heading {
    line-height: 55.2px;
    margin-bottom: 24px;
  }

  /* Figma rule: 96 x 4 in #FF6900, 32 above the paragraph. */
  .a3-contact-cta__line {
    width: 96px;
    height: 4px;
    background: #ff6900;
    margin-bottom: 32px;
  }

  .a3-contact-cta__description {
    font-size: 18px;
    line-height: 29.25px;
    letter-spacing: normal;
  }

  /* Figma card holds 633 of content in 731, i.e. 49 padding all round. */
  .a3-contact-cta__form {
    padding: 49px;
  }

  /* Figma: Inter Bold 30/36. */
  .a3-contact-cta__form-heading {
    font-size: 30px;
    font-weight: 700;
    line-height: 36px;
  }
}

/* -------------------------------------------------------------------------
 * 8b. FAQ - drop the duplicate rule at the top
 *
 * service.css gives .a3-faq a 1px #EEEEEE top border, which lands directly on
 * the 1px #E4E4E7 bottom rule the contact section above it carries (Figma
 * node 108:2 specifies that one). Two lines stacked, in two different greys.
 * Figma has a single rule there, so the FAQ's is the one to go.
 * ------------------------------------------------------------------------- */

@media (min-width: 992px) {

  .a3-faq {
    border-top: 0;
  }
}

/* -------------------------------------------------------------------------
 * 8c. CONTACT FORM internals - node 108:14 / 108:18
 *
 * Card padding 48 (the 49 in the rel offsets includes the 1px inset border),
 * 40 from the heading to the form, then 32 between every row and between the
 * two columns. Inputs are 14 / 14.5 padding over a single 1px #D4D4D8 rule -
 * no box, no radius.
 * ------------------------------------------------------------------------- */

@media (min-width: 992px) {

  .a3-contact-cta__form {
    padding: 48px;
  }

  .a3-contact-cta__form-heading {
    margin-bottom: 40px;
  }

  /* 32 between the two fields on a row. NOT gutter-y: the markup is a
   * .row.g-4, and a y-gutter makes Bootstrap put margin-top:-32px on the row
   * and padding-top:32px on every column, which pushed row 2 twenty pixels
   * below Figma and grew the card from 929 to 977.6. Row rhythm needs to come
   * from the field wrappers instead. */
  .a3-contact-cta__form .row {
    --bs-gutter-x: 32px;
  }

  /* Figma input: 14 top / 14.5 bottom over a 1px #D4D4D8 bottom rule only. */
  .a3-contact-cta .form-control,
  .a3-contact-cta .form-select {
    padding: 14px 0 14.5px;
    border: 0;
    border-bottom: 1px solid #d4d4d8;
    border-radius: 0;
    font-size: 16px;
    line-height: 19px;
    color: #71717a;
  }

  .a3-contact-cta .form-control::placeholder {
    color: #71717a;
    opacity: 1;
  }

  /* Figma's textarea is the same underline, not a resizable box. */
  .a3-contact-cta textarea.form-control {
    resize: none;
  }
}

/* -------------------------------------------------------------------------
 * 8d. Contact form - divider above Submit, and the button itself
 *
 * Figma node 108:83 "HorizontalBorder": 633.2 wide at x=49, individual stroke
 * weights {top: 1} - so a 1px rule across the full content width, with the
 * button 33px below it. Ours was stopping about half way.
 *
 * Figma node 108:84 "Button": 162 x 60, left-aligned on the content edge
 * (ours measured 133.7 x 56).
 * ------------------------------------------------------------------------- */

@media (min-width: 992px) {

  /* The rule lives on .frm-btn-div, which was rendering 382.1 wide at x=33
   * instead of spanning the content. Its col-12 gutter padding is swapped for
   * margins so the border itself runs the full 633.2 from x=49, and the
   * padding drops to Figma's 33 between the rule and the button. The top
   * margin holds the button on y=820 while the rule lands on 787. */
  .a3-contact-cta__form .frm-btn-div {
    /* !important throughout: the element carries Bootstrap's .pt-5 and .mt-4
     * utilities, which are themselves !important and cannot be outranked. */
    width: calc(100% - 32px) !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    margin: 39.4px 16px 0 !important;
    padding: 33px 0 0 !important;
    border-top: 1px solid #e4e4e7;
  }

  .a3-contact-cta__form .wpcf7-submit,
  .a3-contact-cta__form input[type="submit"] {
    width: 162px;
    height: 60px;
    min-height: 60px;
    padding: 0;
    /* Figma DROP_SHADOW on node 108:84 - orange-tinted, not neutral:
     * rgba(249,115,22,.2), offset y 10, blur 20, no spread. */
    box-shadow: 0 10px 20px rgba(249, 115, 22, 0.2);
  }
}

/* -------------------------------------------------------------------------
 * 8e. Contact form - bottom-align the image with the form card
 *
 * Figma: the left column's image ends exactly on the container bottom, level
 * with the form card beside it (both 929 tall). The build left the column
 * content-sized, so the photo stopped short and the two columns ran ragged.
 *
 * The image lives in .a3-contact-cta__image-wrap (not __image, which is an
 * empty wrapper), and it is lazy-loaded - it reports 0 height until scrolled
 * into view, so measure it scrolled or it looks like it is not there.
 * ------------------------------------------------------------------------- */

@media (min-width: 992px) {

  .a3-contact-cta .row > [class*="col-"] {
    align-self: stretch;
  }

  .a3-contact-cta .row > [class*="col-"]:first-child,
  .a3-contact-cta__content {
    display: flex;
    flex-direction: column;
  }

  .a3-contact-cta__content {
    flex: 1 1 auto;
    min-height: 0;
  }

  .a3-contact-cta__image-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .a3-contact-cta__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

/* -------------------------------------------------------------------------
 * 8f. Contact form - phone field placeholder position
 *
 * Figma (108:35): flag at the field's left edge, "+91" at 28, and the
 * "Contact Number*" placeholder starting at 89.8 from the field edge.
 * intl-tel-input writes padding-left:105px inline, which pushed the
 * placeholder ~15px past where the design puts it.
 * ------------------------------------------------------------------------- */

@media (min-width: 992px) {
  .iti__selected-country{
    padding-bottom: 10px;
  }
  .a3-contact-cta .iti input.form-control,
  .a3-contact-cta input#a3-phone-input {
    padding-left: 120px !important;
  }
}

/* =========================================================================
 * 9. SITE HEADER / NAV - node 78:5743 (1440 x 81)
 *
 * 1200 container at x=120 with 48px inner padding, so the logo starts on 168
 * and the row ends on 1272. Closed by a 1px #E4E4E7 rule along the bottom.
 * Menu items are Inter Medium 14/20 in #3F3F46.
 * ========================================================================= */

@media (min-width: 992px) {

  /* Figma has a 1px #E4E4E7 rule under the nav; the build had none. */
  .a3-site-header {
    border-bottom: 1px solid #e4e4e7;
  }

  /* Figma: 120 page padding + 48 container padding puts the logo on 168.
   * The build started it at 104. */
  .a3-site-header .container {
    max-width: 1200px;
    padding-left: 48px;
    padding-right: 48px;
  }

  /* Figma menu item: Inter Medium 14/20 in #3F3F46 (was 15/25.5 in #17181A). */
  .a3-site-header .navbar-nav > li > a,
  .a3-site-header .navbar-nav a {
    font-size: 14px;
    line-height: 20px;
    color: #3f3f46;
  }
}

/* =========================================================================
 * 10. HOVER MOTION - smooth out the lift on buttons and cards
 *
 * The hover states move elements with translateY, but the transitions they
 * inherit are short and use plain `ease`, so the lift reads as a snap rather
 * than a glide - most noticeable on the cards, which travel 6-8px.
 *
 * Longer duration on a decelerating curve, with transform and box-shadow
 * listed explicitly so a shorthand elsewhere cannot drop them. Colour keeps
 * its own quicker timing so buttons still feel responsive.
 * ========================================================================= */

.a3-btn,
button,
.wp-element-button,
input[type="submit"],
.a3-service-card,
.a3-stats__item,
.a3-tooling__card,
.a3-testimonials__card,
.a3-tech-capabilities__card-arrow,
.a3-fcta,
.a3-fcta-act,
.a3-case-study-card__link svg,
.a3-trusted-by__logo {
  transition:
    transform 0.4s cubic-bezier(0.22, 0.85, 0.28, 1),
    box-shadow 0.4s cubic-bezier(0.22, 0.85, 0.28, 1),
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    filter 0.22s ease,
    opacity 0.22s ease;
}

/* Anyone who has asked the OS for less motion gets the colour change only. */
@media (prefers-reduced-motion: reduce) {
  .a3-btn,
  button,
  .wp-element-button,
  input[type="submit"],
  .a3-service-card,
  .a3-stats__item,
  .a3-tooling__card,
  .a3-testimonials__card,
  .a3-fcta,
  .a3-fcta-act {
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .a3-btn:hover,
  button:hover,
  .a3-service-card:hover,
  .a3-stats__item:hover,
  .a3-fcta:hover {
    transform: none;
  }
}

/* -------------------------------------------------------------------------
 * 8g. Contact form - textarea and file row (Figma 108:46 - 108:54)
 *
 * Figma: the textarea underline sits at y=414, then an 8px margin and a 12px
 * padding put "Attach PDF/Doc File" at y=434 - 20px of air. Its row is 49
 * tall (12/12 padding) over the same 1px #D4D4D8 rule as every other field,
 * with the upload glyph in #FF6900. Both placeholders are #71717A.
 * ------------------------------------------------------------------------- */

@media (min-width: 992px) {

  /* Compact: one line of placeholder with the rule just beneath it, matching
   * the other fields rather than the tall box Figma's frame implies. */
  .a3-contact-cta textarea.form-control {
    /* !important: global.css sets `textarea { min-height: 150px }` and
     * service.css adds its own, so a plain height never applies. */
    min-height: 0 !important;
    height: 70px !important;
    padding: 14px 0 14.5px;
    resize: none;
    overflow: hidden;
  }

  .a3-contact-cta .a3-file-upload {
    margin-top: 8px;
    padding: 12px 0;
    border-bottom: 1px solid #d4d4d8;
  }

  .a3-contact-cta .a3-file-upload,
  .a3-contact-cta .a3-file-upload label,
  .a3-contact-cta .a3-file-upload input {
    font-size: 16px;
    line-height: 24px;
    color: #71717a;
  }

  /* Figma draws the upload glyph in the brand orange, not grey. */
  .a3-contact-cta .a3-file-upload svg,
  .a3-contact-cta .a3-file-upload svg path {
    stroke: #ff6900;
    color: #ff6900;
  }
}

/* -------------------------------------------------------------------------
 * 11. FAQ - heading and question colour
 *
 * Figma uses #030303 here, the same near-black as the contact section's
 * heading, rather than the theme's #18181B default.
 * ------------------------------------------------------------------------- */

@media (min-width: 992px) {

  .a3-faq__heading,
  .a3-faq__accordion .accordion-button,
  .a3-faq__accordion .accordion-button:not(.collapsed) {
    color: #030303;
  }
}

/* =========================================================================
 * 12. HERO - node 78:5773 (1440 x 890)
 *
 * Figma: the section is 890 tall on a #18181B fill, with the Corporate Office
 * photo stretched across the whole frame. The build ran 820 with no fill
 * behind the image, so any strip the background did not cover showed as a
 * black band against the section below.
 * ========================================================================= */

@media (min-width: 992px) {

  .a3-hero {
    /* ---- top gap: a REQUESTED DEPARTURE from the node ----
     * Node 78:5773 puts the content container at y=192 in an 890 section, and
     * the build reproduced that faithfully - 150px of padding either side of a
     * vertically centred block measured 184.8 above the eyebrow. The client
     * asked twice for it to be tighter, so this is 111/114 on a content-height
     * band (745 rather than 890). It is not a correction; the old value was
     * right for this node.
     *
     * Do NOT "fix" this back by reading the design. Node 84:1718 - the one the
     * client pointed at as the reference - has since been read and is byte for
     * byte the same band as 78:5773: 1440x890 with its content container at
     * y=192. Both nodes say 192; the client asked for less. Reverting means
     * `align-items: center; min-height: 890px; padding: 150px 10px`.
     *
     * Worth recording because it was nearly got wrong: the nav does NOT
     * overlay this band. Only the Home page frame does that (its first Section
     * is 1440x747 at y=0, which is why .a3-hm-hero carries 239-81=158). Every
     * other cached frame starts below the nav - Blog Category at y=75, Core
     * Team at y=80, Contact at y=107 - so a y read off those sections is
     * already the visible gap and must not have 81 subtracted from it.
     *
     * !important answers service.css:5, `padding: 150px 10px !important`. */
    align-items: flex-start;
    min-height: 0;
    padding: 111px 10px 114px !important;
    /* Figma's own fill, so if the photo ever falls short the gap is the
     * design's near-black rather than a raw black seam. */
    background-color: #18181b;
    background-repeat: no-repeat, no-repeat;
  }

  /*
   * The 104% x 98.47% crop below belongs to ONE photo and must not leak.
   *
   * Figma's imageTransform for node 78:5773 is scaleX 0.9615 / scaleY 1.0155
   * with ty 0, so corporate-office.webp renders 1440/0.9615 = 1497.7 wide by
   * 890/1.0155 = 876.4 tall, anchored to the top. That leaves the ~13.6px
   * #18181B strip along the bottom that the design actually shows - `cover`
   * was filling it in.
   *
   * It used to be set on a bare `.a3-hero`, which applied those two numbers to
   * every hero on the site regardless of what photo was in it. Because the
   * axes scale by different amounts it is a NON-UNIFORM stretch: a 1440x797
   * document photo came out 1482 x 670, i.e. 2.21:1 against a natural 1.81:1 -
   * a 22% horizontal stretch, and people in the picture visibly widened.
   *
   * Four pages had already each written their own `background-size: cover`
   * override to escape it (careers.css, awards.css, our-journey.css, csr.css).
   * Scoping it to the page it was measured from fixes the ~200 imported service
   * pages at once and makes those four workarounds redundant, though they are
   * harmless and stay put.
   *
   * Every other hero keeps `background-size: cover !important` from
   * service.css:12, which is what a photo-behind-text band wants.
   *
   * !important: service.css:12 declares background-size: cover !important.
   */
  .page-id-734 .a3-hero {
    background-size: cover, 104% 98.47% !important;
    background-position: center center, center top !important;
  }
}

/* -------------------------------------------------------------------------
 * 5b. EXPLORE OUR SERVICES - centre a partial last row
 *
 * With 10 services the last row holds 2 cards, and Figma centres them under
 * the 4-up grid rather than leaving them flush left.
 *
 * justify-content only affects a flex line that has spare space, so the full
 * 4-card rows are untouched - they already fill the track. Only the short
 * last line moves.
 * ------------------------------------------------------------------------- */

@media (min-width: 992px) {

  .a3-explore-services .row {
    justify-content: center;
  }
}

/* -------------------------------------------------------------------------
 * 5c. EXPLORE OUR SERVICES - hover moves the icon and arrow only
 *
 * service.css lifts the whole card 8px on hover. In this section the movement
 * should sit on the two glyphs instead, so the grid stays still and only the
 * card you are pointing at reacts.
 *
 * Scoped to .a3-service-card, so every other card on the page keeps its lift.
 * ------------------------------------------------------------------------- */

@media (min-width: 992px) {

  /* Card itself stops moving. The resting shadow from section 5 stays; the
   * hover shadow is dropped with it so nothing "pops". */
  .a3-service-card:hover,
  .a3-service-card:focus-within {
    transform: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  }

  .a3-service-card__icon {
    transition:
      transform 0.35s cubic-bezier(0.22, 0.85, 0.28, 1),
      box-shadow 0.35s cubic-bezier(0.22, 0.85, 0.28, 1);
  }

  .a3-service-card:hover .a3-service-card__icon,
  .a3-service-card:focus-within .a3-service-card__icon {
    transform: translateY(-6px) scale(1.06);
    box-shadow:
      0 6px 12px -4px rgba(0, 0, 0, 0.12),
      0 2px 6px rgba(0, 0, 0, 0.08);
  }

  /* The arrow already travels on hover in service.css; give it the same
   * easing as the icon so the two read as one gesture. */
  .a3-service-card__arrow {
    transition:
      transform 0.35s cubic-bezier(0.22, 0.85, 0.28, 1),
      color 0.22s ease;
  }

  .a3-service-card:hover .a3-service-card__arrow,
  .a3-service-card:focus-within .a3-service-card__arrow {
    transform: translate(4px, -4px);
    color: var(--primary, #ff6900);
  }
}

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

  .a3-service-card:hover .a3-service-card__icon,
  .a3-service-card:hover .a3-service-card__arrow {
    transform: none;
  }
}

/* -------------------------------------------------------------------------
 * 6b. CASE-STUDY BADGES - interactive affordance
 *
 * case-study-filters.js makes the category badge and the tag chips behave as
 * links into the listing's filter bar, but they still rendered with the
 * default cursor and no hover state, so nothing told you they were clickable.
 *
 * Not inside a media query: they are clickable at every width.
 * ------------------------------------------------------------------------- */

.a3-case-study-card__category[data-a3-filter],
.a3-case-study-card__tags span[data-a3-filter] {
  cursor: pointer;
  user-select: none;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

/* Category badge is orange-on-white with an orange border - fill it on hover. */
.a3-case-study-card__category[data-a3-filter]:hover,
.a3-case-study-card__category[data-a3-filter]:focus-visible {
  background-color: var(--primary, #ff6900);
  border-color: var(--primary, #ff6900);
  color: #fff;
}

/* Chips are grey-bordered - bring them up to the brand colour. */
.a3-case-study-card__tags span[data-a3-filter]:hover,
.a3-case-study-card__tags span[data-a3-filter]:focus-visible {
  border-color: var(--primary, #ff6900);
  color: var(--primary, #ff6900);
}

/* role="link" + tabindex mean these are keyboard-reachable, so give focus a
 * visible ring rather than relying on the hover colour alone. */
.a3-case-study-card__category[data-a3-filter]:focus-visible,
.a3-case-study-card__tags span[data-a3-filter]:focus-visible {
  outline: 2px solid var(--primary, #ff6900);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * 7b. TESTIMONIALS - portraits desaturate until hovered
 *
 * The photos sit greyscale in the resting state and come up to full colour
 * on the card you are pointing at. service.css already transitions `0.4s`
 * on the image (all properties), so filter rides that same timing and the
 * existing 1.05 scale still applies alongside it.
 *
 * Hover is on the card, not the image, so the whole tile is the target -
 * and :focus-within covers keyboard users reaching the LinkedIn link.
 *
 * Not inside a media query: this reads the same at every width.
 * ------------------------------------------------------------------------- */

.a3-testimonials__image img {
  filter: grayscale(100%);
}

.a3-testimonials__card:hover .a3-testimonials__image img,
.a3-testimonials__card:focus-within .a3-testimonials__image img {
  filter: grayscale(0);
}

@media (prefers-reduced-motion: reduce) {
  .a3-testimonials__image img {
    transition: filter 0.2s ease;
  }
}

*
 * FIGMA DESKTOP REFINEMENTS
 * =========================================================================
 * Pixel corrections measured against the Figma file, applied section by
 * section. This file only ever *overrides* - the markup and the base rules
 * in service.css are left exactly as they are.
 *
 * Everything layout-related is wrapped in @media (min-width: 992px), so the
 * tablet/mobile rules in service.css (max-width: 991 / 767 / 575) are never
 * touched. Mobile has no Figma frame, so it stays as built.
 *
 * Loads after service.css (see functions.php), so equal-specificity
 * selectors win on source order - no !important needed.
 *
 * Figma: https://www.figma.com/design/fwT2ycRTILUc1gf2iaFruE/A3-logics-website
 */

/* =========================================================================
 * 1. TRUSTED BY GLOBAL LEADERS - node 78:5792 (1440 x 799)
 *
 * Measured vertical stack, top to bottom:
 *   137 pad | 61.6 h2 | 60 | 80 logos | 133 | 20 rule | 61 | 76 badge
 *   | 36 | 56 labels | 78 pad   = 799
 * ========================================================================= */

/* The shipped trust-sectionbg.jpg is a washed-out export - it averages ~15/255
 * away from the Figma render, so the peach glow and the world-map texture are
 * far too faint. This one is rebuilt from the Figma image fill using the node's
 * own crop transform and opacity chain (image at 40%, under an 18% white wash);
 * it matches the Figma render to 2.5/255. Applied at every width, since it is
 * an asset-quality fix rather than a layout change.
 *
 * Also drops the hard-coded staging domain that service.css points at, so the
 * background now resolves relative to the theme on any environment. */
/* .a3-trusted-by {
  background-image: url(figma-assets/trust-sectionbg.jpg);
} */

@media (min-width: 992px) {

  /* Figma 137 top / 78 bottom. Was 145/145, which made the section 888px tall. */
  .a3-trusted-by {
    padding: 137px 0 78px;
  }

  /* Figma: 56px, line-height 61.6 (110%), letter-spacing -1.4px.
   * -0.025em == -1.4px at 56px, and stays proportional as --h2 clamps down. */
  .a3-trusted-by__heading {
    margin-bottom: 60px;
    line-height: 1.1;
    letter-spacing: -0.025em;
  }

  /* 950 / 5 slides = 190px each; 4px side padding leaves 182px of content, so
   * every logo renders at its natural (= Figma) width. At 1024/20px the slide
   * only gave 165px, which squeezed Johnson & Johnson (181px) and
   * double:yolk (175px) down to 91% and 94%.
   * Bonus: slide centres land at 340/530/720/910/1100 against Figma's
   * 344.5/528/683/890.5/1091. */
  /* 950 was measured against the original five-logo set, whose marks were
   * narrow enough to sit inside a 190px slide with room to spare. The client
   * set is now 37 logos and 26 of them are wide wordmarks that run right up to
   * the slide wall: at 190px wide with 4px of padding a side, the gutter
   * between two of them collapsed to 8px and they read as one smear.
   *
   * Widened rather than capping the logo, because a width cap shrinks exactly
   * the logos that are already shortest - one wordmark renders 17px tall - and
   * would have made the size spread worse. 1160 still sits inside the 1232
   * container, keeps five logos in view, and leaves every mark at the size it
   * renders today. Slide 232, content 182, so the tightest gutter is 50px. */
  .a3-trusted-by__logos-wrap {
    max-width: 1160px;
    margin-bottom: 133px;
  }

  .a3-trusted-by__logo-slide {
    padding: 0 25px;
  }

  /* This line is NOT Inter. The text node's base style says Inter Regular 400,
   * but all 38 characters carry a character-level override in
   * styleOverrideTable -> Poppins / Poppins-Medium / w500 / 16px / ls 1.0 /
   * UPPER. Read the per-character styles, not the node style, or you get the
   * wrong family here.
   *
   * Poppins' uppercase advances are narrower than Inter's, which is why 1px
   * tracking is right: it renders the string at 372px, exactly the design's
   * ink width inside its 375px box. (With Inter, 1px measured 391px and would
   * have wrapped - that mismatch was the tell.)
   *
   * Poppins 500 is enqueued in functions.php; global.css loads Inter only. */
  .a3-trusted-by__cert-heading {
    margin-bottom: 61px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    /* Figma textAlignHorizontal=CENTER. No effect on desktop (single line in a
     * centred flex row), but without it a longer heading that wraps would go
     * left-aligned between the two rules. */
    text-align: center;
  }

  .a3-trusted-by__cert-heading::before,
  .a3-trusted-by__cert-heading::after {
    width: 51px;
  }

  /* Figma: badge box bottom 629 -> label line box top 665. */
  .a3-trusted-by__cert {
    gap: 36px;
  }

  /* scale-down rather than contain. Google Cloud is 207x32 natural but its box
   * is 224px wide, and contain *upscales* to fill it (224x34.6, 8% oversized).
   * scale-down never enlarges, so each badge lands at its natural size - which
   * is exactly the Figma size. The fixed 76px box still aligns the five labels. */
  .a3-trusted-by__cert img {
    margin-bottom: 0;
    object-fit: scale-down;
  }

  /* Two 28px lines. min-height 100 left 44px of dead space under every column
   * and was most of the section's extra height. 56 still centres the one-line
   * "SOC 2 Type II Compliant" against its neighbours, as Figma does. */
  .a3-trusted-by__details {
    min-height: 56px;
  }

  /* Figma: 14px, weight 500, line-height 28px (200%), letterSpacing 0.
   *
   * Both lines get the same treatment. In Figma each badge caption is a single
   * two-line text node at weight 500; the markup splits it across two ACF
   * fields (title + subtitle), so the second line needs the weight too - it was
   * rendering at 400 against the first line's 500.
   *
   * letter-spacing: normal cancels the -0.1px that the parent theme's
   * theme.json sets globally and every element inherits. */
  .a3-trusted-by__cert-title,
  .a3-trusted-by__cert-sub {
    font-weight: 500;
    line-height: 28px;
    letter-spacing: normal;
  }

  .a3-trusted-by__cert-sub {
    margin-top: 0;
  }
}

/* =========================================================================
 * 2. STATS BAR - node 79:5950 (1440 x 654)
 *
 * 2x2 bento grid, 24px gap, alternating wide/narrow:
 *   row 1  [ 626.7 "500+" ] [ 301.3 "21+" ]
 *   row 2  [ 301.3 "91%"  ] [ 626.7 "350+" ]
 * Vertical stack: 107 pad | 235 | 24 | 235 | 53 pad = 654
 *
 * All eight text nodes are Inter Bold 700 with no character-level overrides
 * (checked - that is what caught us out on the eyebrow in section 1).
 * ========================================================================= */

@media (min-width: 992px) {

  /* Figma 107 top / 53 bottom. Was 100/100 on a section that measured 742. */
  .a3-stats {
    padding: 107px 0 53px;
  }

  /* Container 982 -> row 976 -> col-lg-8 = 626.7 and col-lg-4 = 301.3, which
   * are exactly the Figma card widths. Was 1025, giving 655.3 / 315.7. */
  .a3-stats .container {
    max-width: 982px;
  }

  .a3-stats__item {
    /* .row.g-4 already spaces the rows via gutter margin-top. This extra
     * margin fed back through `height: 100%` and made every card 259px
     * instead of 235 - it was the whole 24px-per-row height overshoot. */
    margin-bottom: 0;
    border-radius: 32px;
    /* Figma primaryAxisAlignItems=MAX: the number/label block is pinned to the
     * bottom of the card, 40px above its edge - not vertically centred. */
    justify-content: flex-end;
  }

  /* Figma: 60px on the two narrow cards, 72px on the two wide ones.
   * Everything was 72px. Colour was #222 against the design's #18181B. */
  .a3-stats__number {
    font-size: 60px;
    color: #18181b;
    margin-bottom: 8px; /* Figma itemSpacing 8, was 12 */
  }

  .col-lg-8 .a3-stats__number {
    font-size: 72px;
  }

  /* Figma #52525B; was #71717A. Size/weight/line-height/tracking already match. */
  .a3-stats__label {
    color: #52525b;
  }

  /* On the orange card the caption is #FFEDD4, not plain white. */
  .a3-stats__item.is-orange .a3-stats__label {
    color: #ffedd4;
  }

  /* The "91%" card is the only one with a border, and its shadow is a light
   * #E4E4E7 rather than the dark one the other white cards use. */
  .a3-stats .row > div:nth-child(3) .a3-stats__item {
    border: 1px solid #e4e4e7;
    box-shadow:
      0 8px 10px -6px rgba(228, 228, 231, 0.5),
      0 20px 25px -5px rgba(228, 228, 231, 0.5);
  }

  /* Figma #F4F4F5; was #F8F8F8. background-color, not the shorthand - the
   * shorthand would wipe out the card4bg.svg graphic. */
  .a3-stats .row > div:nth-child(4) .a3-stats__item {
    background-color: #f4f4f5;
  }
}

/* =========================================================================
 * 3. COMPREHENSIVE TECHNICAL CAPABILITIES - node 79:6057 (1440 x 1364)
 *
 * 127 pad | header 285 | 80 | body 742.8 | 128 pad
 * Body is a 2-up grid: 434.7 tab card | 20 gap | 889.3 content column.
 * ========================================================================= */

@media (min-width: 992px) {

  /* Figma fill #FAFAFA (was #F8F8F8) + a 1px #E4E4E7 rule along the top edge
   * that the build did not have at all. */
  .a3-tech-capabilities {
    padding: 127px 0 128px;
    background: #fafafa;
    border-top: 1px solid #e4e4e7;
  }

  /* Figma lays this section out on 48px gutters, giving 1344 of content at
   * 1440 - not the theme's shared 1320 container (1290 of content). */
  .a3-tech-capabilities__inner {
    max-width: 1440px;
    padding-left: 48px;
    padding-right: 48px;
  }

  /* Figma: Inter *Medium 500*, letter-spacing -1.4px. Was 400 / -0.1px
   * (the -0.1px is the parent theme's global theme.json value). */
  .a3-tech-capabilities__heading {
    font-weight: 500;
    letter-spacing: -0.025em;
    margin-bottom: 24px; /* Figma itemSpacing 23.99, was 20 */
  }

  /* Figma: 768 wide, tracking 0. Inter Light 300 at 19/34.2 already matched,
   * but the 300 face was not being loaded - see functions.php. */
  .a3-tech-capabilities__description {
    max-width: 768px;
    letter-spacing: normal;
    margin-bottom: 80px; /* Figma itemSpacing 80, was 60 */
  }

  /* The header sits in a col-lg-7, which on a 1344 container leaves 764px -
   * 4px short of Figma's 768 description box, and that was enough to change
   * where lines 3 and 4 broke. Let the column fill and cap each block at its
   * own Figma width instead: heading frame 896, description 768. */
  .a3-tech-capabilities__inner > .row > .col-lg-7 {
    width: 100%;
  }

  .a3-tech-capabilities__heading {
    max-width: 896px;
  }

  /* Figma columns are 434.7 / 889.3 with a 20px gap = 32.3% / 66.2% of 1344.
   * The markup is col-lg-3 / col-lg-9 (25% / 75%), so override the widths
   * rather than touch the PHP. With a 20px gutter on 1344 of content this
   * lands on 434.7 and 889.4 exactly. */
  .a3-tech-capabilities__tabs {
    --bs-gutter-x: 20px;
  }

  .a3-tech-capabilities__tabs > .col-lg-3 {
    width: 33.3333%;
  }

  .a3-tech-capabilities__tabs > .col-lg-9 {
    width: 66.6667%;
  }

  /* Figma: radius 24, padding 24, and a much deeper shadow than the build's
   * 0 20px 50px rgba(0,0,0,.08). */
  .a3-tech-capabilities__tab-div {
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }

  /* Figma shows all eight tabs at once - the list is 596px tall inside a
   * 742.8 card. max-height 480 + overflow:auto turned that into a scroller.
   * The 1px rule on the right is the "Vertical Divider" rectangle. */
  .a3-tech-capabilities__tab-list {
    max-height: none;
    overflow: visible;
    padding: 50px 16px 50px 0;
    border-right: 1px solid #e4e4e7;
    /* The card centres its single flex child, so the list was sizing to its
     * content and sitting 35px in from the card padding. Figma has it FILL. */
    width: 100%;
  }

  /* Figma button: 20px/16px padding, 24px between the [n] and the label,
   * 30px line-height, 4px between buttons -> 71px tall. */
  .a3-tech-capabilities__tab-btn {
    gap: 24px;
    padding: 20px 16px;
    line-height: 30px;
    margin-bottom: 4px;
  }

  .a3-tech-capabilities__tab-btn.active {
    font-weight: 700; /* Figma: active label Bold, the rest Semi Bold 600 */
  }

  /* Figma spaces 8 buttons with 7 gaps; a trailing margin made the card 4px tall. */
  .a3-tech-capabilities__tab-btn:last-child {
    margin-bottom: 0;
  }

  /* 50% ignores the 20px flex gap, so the pair overflowed to 909 inside an
   * 889.3 track. calc(50% - 10px) gives Figma's 435 + 20 + 435.
   *
   * 452 is Figma's own fixed height for these two cards (layoutSizingVertical
   * =FIXED). With the 270 image above it that makes the right column 742,
   * matching the tab card beside it - which is how the design squares up. */
  /* panels_btm is a flex row holding .position-relative (the orange card) and
   * a bare <ul> (the bullet list). A `> div` selector missed the <ul>, so it
   * kept its content width and shrank the card - 274 instead of Figma's 435.
   *
   * min-width: 0 is the part that matters: a flex item will not shrink below
   * its content unless you allow it, which is what let the list push the card
   * down. Both sides now get the same fixed basis. */
  .a3-tech-capabilities__panels_btm > .position-relative,
  .a3-tech-capabilities__panels_btm > ul {
    flex: 0 0 calc(50% - 10px);
    width: calc(50% - 10px);
    max-width: calc(50% - 10px);
    min-width: 0;
  }

  .a3-tech-capabilities__panels_btm > .position-relative {
    min-height: 452px;
  }

  /* Figma's gap between the image and the two cards is 20; the markup uses
   * Bootstrap's pt-4 (24px) for it. The panel's own `gap: 20px` never applies
   * here - panels_btm has no grid-area, so it lands in the same implicit row
   * as the image - which is why this padding is the real spacer.
   * !important because .pt-4 is a Bootstrap utility and already !important. */
  .a3-tech-capabilities__panels_btm {
    padding-top: 20px !important;
  }

  .a3-tech-capabilities__panel:not(.has-media) .a3-tech-capabilities__panels_btm {
    padding-top: 0 !important;
  }

  /* Figma image card: 270 tall, radius 24, same deep shadow as the others. */
  .a3-tech-capabilities__panel > img {
    height: 270px;
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }

  /* Figma layers a "Gradient" rectangle over the photo - black at 50% along
   * the bottom edge fading to transparent at the top. Without it the photo
   * reads much lighter than the design. Done as a pseudo-element because the
   * image has no wrapper to hang an overlay on. */
  .a3-tech-capabilities__panel {
    position: relative;
  }

  /* .has-media only: the class is on the panel when the row actually has a tab
   * image. 130 published pages carry no image on any capability tab, and there
   * the scrim had nothing to sit on - it painted its 270px of black straight
   * down over the bullet card underneath. */
  .a3-tech-capabilities__panel.has-media::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 270px;
    border-radius: 24px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    pointer-events: none;
  }

  /* Figma orange card: radius 24, padding 32, drop shadow. */
  .a3-tech-capabilities__card {
    border-radius: 24px;
    padding: 32px;
    /* box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); */
  }

  .a3-tech-capabilities__card-icon {
    width: 40px;
    margin-bottom: 24px; /* Figma: icon box bottom 362 -> heading text 386 */
  }

  /* Figma: UPPERCASE, 22px/27.5, tracking 1.1. The build rendered it in
   * title case with the inherited -0.1px tracking. */
  .a3-tech-capabilities__card h3 {
    text-transform: uppercase;
    line-height: 27.5px;
    letter-spacing: 1.1px;
    margin-bottom: 15px; /* Figma itemSpacing 15.3, was 20 */
  }

  /* Figma: Inter Medium 500, 14/22.75, solid #FFF7ED - not white at 0.95. */
  .a3-tech-capabilities__card p {
    font-weight: 500;
    line-height: 22.75px;
    color: #fff7ed;
    opacity: 1;
  }

  /* Figma list card matches the other cards: radius 24, same shadow. */
  .a3-tech-capabilities__panel ul {
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }

  .a3-tech-capabilities__panel li {
    line-height: 22.75px; /* Figma 14/22.75 Medium, was 14/1.7 */
    font-weight: 500;
  }

  /* Figma bullet titles are 16/24 Bold; the build had them at 20px.
   *
   * Figma's item pitch is 97.4: title 24 + 3.4 + description 46 + 24 before
   * the next title. The build ran 89.5, so each bullet drifted ~8px further
   * out of register than the one above it. */
  .a3-tech-capabilities__panel li span {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 4px;
  }

  .a3-tech-capabilities__panel ul {
    padding: 32px; /* Figma card padding, was 35 */
  }

  .a3-tech-capabilities__panel li {
    margin-bottom: 24px; /* Figma gap to the next bullet, was 20 */
  }

  /* Figma holds the orange card's body copy in a 333.6-wide box inside the
   * card's 371 of content width, which is what sets its three line breaks. */
  .a3-tech-capabilities__card p {
    max-width: 333.6px;
  }
}

/* =========================================================================
 * 3B. COMPREHENSIVE TECHNICAL CAPABILITIES - TAB MOTION
 *
 * Replaces the instant show/hide of the tab section with a real transition:
 * the outgoing panel fades and drifts out while the incoming one crosses in,
 * its three blocks (photo / orange card / bullet list) staggered a few frames
 * apart.
 *
 * Motion only - nothing here changes how the section *looks* once it has
 * settled. Same layout, same sizes, same colours as section 3 leaves them;
 * the only new declarations are opacity/transform/transition, all of which
 * resolve back to the design's own resting state.
 *
 * Direction-aware: picking a tab further down the list brings the new panel
 * up from below, picking one further up brings it down from above, so the
 * motion always agrees with where you clicked. tech-tabs.js supplies the
 * direction (data-a3-dir); everything else here is plain CSS and still works
 * if that file never loads.
 *
 * NOTE: unlike sections 1-3 this one is *not* desktop-only. Motion is not a
 * Figma measurement, so the tablet/mobile layouts get it too - see 3B.2 for
 * the small-screen variant, which has to use keyframes rather than
 * transitions because those panels are still display:none when hidden.
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * 3B.1 Desktop - the panels cross-fade
 *
 * Bootstrap swaps tab panes with display:none, which leaves nothing to
 * animate on the way *out* - the old panel is simply gone on the same frame
 * the new one appears. So on desktop the panels are stacked instead: the
 * active one stays in flow exactly where it always was, the other seven are
 * lifted out of flow on top of it and hidden with visibility. The outgoing
 * panel can then fade out while the incoming one fades in.
 *
 * Only the active panel is in flow, so the section keeps the height it has
 * always had - the seven parked panels contribute nothing to it. And
 * visibility:hidden keeps them out of the tab order and the accessibility
 * tree, exactly as display:none did.
 * ------------------------------------------------------------------------- */

@media (min-width: 992px) {

  .a3-tech-capabilities__panels {
    position: relative; /* the anchor for the parked panels below */

    /* Which way the panels travel. 1 = the new tab is further down the list
     * (content comes up from below), -1 = further up. tech-tabs.js flips the
     * attribute on show.bs.tab; the value below is the no-JS fallback. */
    --a3-dir: 1;
  }

  .a3-tech-capabilities__panels[data-a3-dir="up"] {
    --a3-dir: -1;
  }

  /* Beats .tab-content > .tab-pane { display: none } on source order - equal
   * specificity, and this file is enqueued after Bootstrap.
   *
   * display: block, deliberately - the same value Bootstrap gives the pane it
   * is showing. service.css also has `display: grid` + grid-template-areas on
   * .a3-tech-capabilities__panel, but Bootstrap's .tab-content > .active has
   * always won, so those rules have never actually run and the panel has
   * always laid out as block + flex. Turning them on here would rebuild the
   * panel into a different design; it also starts a runaway loop with the
   * Slick slider inside it, which writes its own measured width back onto its
   * track - a content-sized 1fr column then grows on every single tab click. */
  .a3-tech-capabilities__panels > .tab-pane {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    /* visibility is held until the fade has finished, so the panel stays
     * measurable for its whole exit. */
    transition:
      opacity 0.22s ease,
      visibility 0s linear 0.22s;
  }

  /* .active, not .show: Bootstrap moves .active on both panels in the same
   * tick (that is what makes the cross-fade possible) and only catches up
   * with .show once the transition has run. The extra class also lifts this
   * above Bootstrap's .fade:not(.show) { opacity: 0 }, which would otherwise
   * hold the incoming panel at zero for the whole transition. */
  .a3-tech-capabilities__panels > .tab-pane.active {
    /* Back in flow: the active panel is the one that gives the section its
     * height, exactly as before. z-index keeps the incoming panel above the
     * one still fading out, whichever order they sit in the markup. */
    position: relative;
    z-index: 1;
    visibility: visible;
    opacity: 1;
    transition:
      opacity 0.4s ease,
      visibility 0s;
  }

  /* The three blocks of a panel, staggered. The panel itself only fades -
   * all the travel lives here, so the movement never doubles up.
   *
   * This is the resting/incoming state: parked one step *behind* in the
   * direction of travel, waiting to come in. */
  .a3-tech-capabilities__panel > img,
  .a3-tech-capabilities__panel::before,
  .a3-tech-capabilities__panels_btm > * {
    opacity: 0;
    transform: translate3d(0, calc(var(--a3-dir) * 28px), 0);
    transition:
      opacity 0.22s ease,
      transform 0.22s ease;
  }

  /* .show without .active is the panel currently leaving - it drifts on in
   * the direction of travel rather than retreating the way the incoming one
   * arrives, so the two never cross over each other. Bootstrap drops .show
   * once the fade is done, at which point this silently reverts to the
   * resting state above (at opacity 0, so nothing is visible). */
  .a3-tech-capabilities__panel.show:not(.active) > img,
  .a3-tech-capabilities__panel.show:not(.active)::before,
  .a3-tech-capabilities__panel.show:not(.active) .a3-tech-capabilities__panels_btm > * {
    transform: translate3d(0, calc(var(--a3-dir) * -16px), 0);
  }

  .a3-tech-capabilities__panel.active > img,
  .a3-tech-capabilities__panel.active::before,
  .a3-tech-capabilities__panel.active .a3-tech-capabilities__panels_btm > * {
    opacity: 1;
    transform: none;
    /* Slower and eased-out on the way in, quick and linear-ish on the way
     * out (rule above) - the section should feel like it settles, not like
     * it bounces back and forth. */
    transition:
      opacity 0.5s ease,
      transform 0.55s cubic-bezier(0.22, 0.85, 0.28, 1);
  }

  /* 70ms apart, top to bottom: photo, then the orange card, then the bullet
   * list. Only the incoming panel is staggered - the outgoing one leaves in
   * one piece (no delays above), or the swap starts to feel slow. */
  .a3-tech-capabilities__panel.active > img,
  .a3-tech-capabilities__panel.active::before {
    transition-delay: 0.02s;
  }

  .a3-tech-capabilities__panel.active .a3-tech-capabilities__panels_btm > *:nth-child(1) {
    transition-delay: 0.1s;
  }

  .a3-tech-capabilities__panel.active .a3-tech-capabilities__panels_btm > *:nth-child(2) {
    transition-delay: 0.17s;
  }
}

/* -------------------------------------------------------------------------
 * 3B.2 Tablet / mobile - the same entrance, as an animation
 *
 * Below 992px the panels are left on Bootstrap's display:none swap: those
 * layouts are a single column, so stacking them would pad every short panel
 * out to the height of the longest one. A transition cannot run on an
 * element that was display:none a frame ago, so the entrance is a keyframe
 * animation instead - same shape, no exit half.
 * ------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

  /* Bootstrap's .fade holds the incoming panel at opacity 0 until it adds
   * .show ~150ms later, which would swallow the first third of the entrance
   * and then pop the rest in. The animation below owns the fade instead. */
  .a3-tech-capabilities__panels > .tab-pane.active {
    opacity: 1;
  }

  /* fill-mode backwards, not both: `backwards` covers the delay before each
   * block starts (without it they would all flash in at full opacity and then
   * animate), but leaves nothing applied once the animation has finished.
   * With `both` the finished animation keeps holding its end frame, Chrome
   * keeps the composited layer it rendered the movement on, and every line of
   * text inside stays on greyscale antialiasing instead of going back to
   * subpixel - a small but permanent change to how the copy looks. */
  .a3-tech-capabilities__panel.active > img,
  .a3-tech-capabilities__panel.active .a3-tech-capabilities__panels_btm > * {
    animation: a3-tab-rise 0.5s cubic-bezier(0.22, 0.85, 0.28, 1) backwards;
  }

  .a3-tech-capabilities__panel.active .a3-tech-capabilities__panels_btm > *:nth-child(1) {
    animation-delay: 0.08s;
  }

  .a3-tech-capabilities__panel.active .a3-tech-capabilities__panels_btm > *:nth-child(2) {
    animation-delay: 0.14s;
  }
}

@keyframes a3-tab-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* -------------------------------------------------------------------------
 * 3B.3 prefers-reduced-motion
 *
 * Durations and delays only - the transforms stay, since they are the resting
 * state each block animates out of. Zeroing the timings makes every one of
 * them resolve instantly, so the tabs go back to a plain swap.
 * ------------------------------------------------------------------------- */

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

  .a3-tech-capabilities__panels > .tab-pane,
  .a3-tech-capabilities__panel > img,
  .a3-tech-capabilities__panel::before,
  .a3-tech-capabilities__panels_btm > * {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
  }
}

/* =========================================================================
 * 4. TECHNOLOGY STACK header - node 79:7555
 *
 * Header block only (eyebrow / h2 / intro). The filters and card grid below
 * are outside this node, so nothing here touches them.
 *
 * Figma stack: eyebrow 16 | 15.6 | h2 55.2/line | 23.6 | paragraph 29.25/line
 * All three text nodes are plain Inter - no character-level overrides.
 * ========================================================================= */

@media (min-width: 992px) {

  /* Figma: Inter Semi Bold 600 (was 700), 12/16 (line box was 20.4),
   * tracking 2.4px (0.18em resolves to 2.16 at 12px). */
  .a3-tooling__eyebrow {
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 2.4px;
    margin-bottom: 15.6px; /* Figma itemSpacing 15.6, was 18 */
  }

  /* Figma's marker rectangle is 6x6, not 8x8. */
  .a3-tooling__eyebrow:before {
    width: 6px;
    height: 6px;
  }

  /* Figma: #18181B and -1.5px tracking. The build had #202124 and was
   * inheriting the parent theme's global -0.1px. Size/line-height/weight
   * (48 / 55.2 / 400) already matched. */
  .a3-tooling__heading {
    color: #18181b;
    letter-spacing: -1.5px;
    margin-bottom: 23.6px; /* Figma h2 bottom 142.6 -> paragraph top 166.2 */
  }

  /* Figma holds the intro in a 672 box; the build allowed 760, so it broke
   * lines later than the design. Tracking is 0, not the inherited -0.1px. */
  .a3-tooling__description {
    max-width: 672px;
    letter-spacing: normal;
  }
}

/* =========================================================================
 * 5. EXPLORE OUR SERVICES - node 81:9710 (1440 x 754.8)
 *
 * 112 pad | badge 30 | 16 | h2 52.8 | 56 | card row 175.5 | 24 | row 175.5
 * | 113 pad  = 754.8
 * Cards are 300 wide on a 324 pitch (24 gap), 4 up, centred -> 84px margins.
 * All text nodes are plain Inter - no character-level overrides.
 * ========================================================================= */

@media (min-width: 992px) {

  /* Figma 112 top / 113 bottom (was 120/120) and the rule is #E4E4E7, not #eee. */
  .a3-explore-services {
    padding: 112px 0 113px;
    border-bottom: solid 1px #e4e4e7;
  }

  /* 1302 container -> 1272 of content -> Bootstrap g-4 makes each col 324 and
   * each card 300, landing the row at x=84 exactly as Figma has it. The shared
   * 1320 container gave 1290 of content and 304.5 cards. */
  .a3-explore-services .container {
    max-width: 1302px;
  }

  /* Figma: Inter Bold 700 (was 600), 12/16 (line box was 20.4), tracking
   * 1.8px (was inheriting the theme's global -0.1px), #FF6900 (was #F54900).
   * Padding 15 horizontal / 6 vertical with an 8px gap - the build's 30/5/10
   * happened to total the same 217px width only because the tracking was
   * wrong in the opposite direction. */
  .a3-explore-services__header .a3-eyebrow {
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 1.8px;
    color: #ff6900;
    /* Figma reads 15px from the badge's outer edge, and its 1px stroke is
     * inset - so 14 here, which lands the pill at 217.2 exactly. */
    padding: 6px 14px;
    gap: 8px;
  }

  /* Figma: badge bottom 142 -> h2 top 158, and h2 bottom 210.8 -> cards 266.8. */
  .a3-explore-services__header {
    margin-bottom: 56px;
  }

  .a3-explore-services__heading {
    margin-top: 16px;
    line-height: 52.8px;
  }

  /* Figma card: 175.5 tall, border #E4E4E7 at 80%, and a soft resting shadow
   * the build did not have (it only had one on :hover).
   *
   * Content is not centred: Figma sets the icon 41 from the top, 20 to the
   * title, and 33 below it - which is 4px lower than centring would put it. */
  .a3-service-card {
    min-height: 175.5px;
    /* 41/33 are measured from the card's outer edge and the 1px border is
     * inset, so the padding is one less on each side: 40 + 56 tile + 20 +
     * 25.5 title + 32 + 2 border = 175.5. */
    padding: 40px 35px 32px;
    justify-content: flex-start;
    border-color: rgba(228, 228, 231, 0.8);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  }

  /* Figma puts the arrow 21 from the card's outer edge; the 1px inset border
   * means 20 here. */
  .a3-service-card__arrow {
    top: 20px;
    right: 20px;
  }

  /* Figma tile is 56x56 at radius 16 - the build had 48x48 at radius 8 - with
   * the same two-layer shadow the badge uses. */
  .a3-service-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    margin-bottom: 20px;
    box-shadow:
      0 1px 2px -1px rgba(0, 0, 0, 0.1),
      0 1px 3px rgba(0, 0, 0, 0.1);
  }

  /* Figma: 17px Bold, 25.5 line-height, -0.425 tracking. Was 14px/600/1.35. */
  .a3-service-card__title {
    font-size: 17px;
    font-weight: 700;
    line-height: 25.5px;
    letter-spacing: -0.425px;
  }
}

/* -------------------------------------------------------------------------
 * 4b. TECHNOLOGY STACK - horizontal position (node 79:7555)
 *
 * Figma puts this section's content 91px from its frame's left edge, but that
 * frame is nudged 5px right of every other section frame on the page, and 91
 * lines up with nothing else in the build: the page container puts content on
 * 75, and the Explore section's identical 4 x 300 grid sits on 84.
 *
 * Matching the design here made the section visibly step out of line with the
 * sections above and below it, so it stays on the shared page container.
 * ------------------------------------------------------------------------- */
/* =========================================================================
 * 6. PROVEN SUCCESS ACROSS EVERY INDUSTRY - node 85:11108 (1440 x 2051)
 *
 * 96 pad | header 222 | 64 | 3 rows of 536 | 62 pad
 * Each row: 608 image | 64 gap | 608 content, 64 padding top/bottom,
 * separated by a 1px #C9CCD1 rule.
 * ========================================================================= */

@media (min-width: 992px) {

  /* Figma 96 top / 62 bottom (was 120/120), on a white fill, closed by a 1px
   * #C9CCD1 rule along the bottom edge - the same colour as the rules between
   * the rows, so the last row reads as closed rather than trailing off into
   * the testimonials section below. */
  .a3-case-studies {
    padding: 96px 0 62px;
    background: #fff;
    border-bottom: 1px solid #c9ccd1;
  }

  /* Figma container is 1280 sitting at x=80; the shared 1320 gave 1290 at 75. */
  .a3-case-studies .container {
    max-width: 1310px;
  }

  /* Figma: 55.2 line-height and -1.5 tracking (was 57.6 and the inherited
   * -0.1px). The orange run on "Industry" already matched. */
  .a3-case-studies__heading {
    line-height: 55.2px;
    letter-spacing: -1.5px;
    margin-bottom: 15px;
  }

  /* The eyebrow reuses .a3-tooling__eyebrow, so the Technology Stack rules in
   * section 4 were reaching it: orange, 12px/600, 2.4 tracking and a 6x6
   * marker. Figma has this one as plain grey text with no marker at all -
   * Inter Medium 14/20, tracking 0.35, #4B5563. */
  .a3-case-studies .a3-tooling__eyebrow {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.35px;
    color: #4b5563;
    margin-bottom: 16px;
  }

  .a3-case-studies .a3-tooling__eyebrow:before {
    display: none;
  }

  /* Figma: 16/26 in a 766 box (was 16/28.8 capped at 720). */
  .a3-case-studies__description {
    line-height: 26px;
    max-width: 766px;
    margin-bottom: 64px;
  }

  /* Figma row: 64 padding top/bottom, 608 image + 64 gap + 608 content. */
  .a3-case-study-card {
    padding: 64px 0;
    gap: 64px;
  }

  /* service.css zeroes the last row's bottom padding, which pulled the final
   * case study to 86px above the section edge where Figma has 126 (the row's
   * own 64 plus the section's 62). Figma's last row keeps its padding - it
   * only drops the separator rule, which service.css already handles. */
  .a3-case-study-card:last-child {
    padding-bottom: 64px;
  }

  /* The card's flex children are Bootstrap .col-lg-6 wrappers, not the image
   * and content divs. At 50% each (637px) a 64px gap overflows the 1274 row
   * and wraps the content below the image, so the columns get explicit bases
   * and their gutter padding is removed - Figma's 64 is the whole gap. */
  .a3-case-study-card > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
  }

  .a3-case-study-card > [class*="col-"]:first-child {
    flex: 0 0 608px;
    width: 608px;
    max-width: 608px;
  }

  .a3-case-study-card > [class*="col-"]:last-child {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
  }

  .a3-case-study-card__image img {
    height: 380px;
  }

  /* Figma drew this card against a 22-character title. The real records
   * average 87 characters and run to 132, so at the node's 48/55.2 every card
   * gave the headline 4-7 lines - 221 to 386px of type above a 380px photo,
   * and no two cards the same height.
   *
   * 32/38 is the size at which the measured set settles: 30 of the 31 titles
   * fit inside three lines, so the clamp only ever bites on the longest one.
   * The clamp is visual - the full title stays in the DOM, so the link's
   * accessible name and the crawler both still see all of it. */
  .a3-case-study-card__link h3 {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -1px; /* -1.5 was tracking for 48px; this is the same ratio */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }

  /* Figma arrow is 40x40, not 35. */
  .a3-case-study-card__link svg {
    width: 40px;
    height: 40px;
  }

  /* --- end of the 992+ band ------------------------------------------- */
}

/* Tablet, 768-991. This band is owned by neither refinement file, so
 * service.css's base 48px still applied here and the headline ran to 5 lines.
 * The column is wider than the desktop one, so 40/48 clears three lines for 30
 * of the 31 measured titles. */
@media (min-width: 768px) and (max-width: 991.98px) {

  .a3-case-study-card__link h3 {
    font-size: 40px;
    line-height: 48px;
    letter-spacing: -1.2px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }
}

@media (min-width: 992px) {

  .a3-case-study-card__content p,
  .a3-case-study-card__impact {
    line-height: 26px;
  }

  /* Figma badge: 11px Medium, tracking 0.2 (was 13px Regular at 1px). */
  .a3-case-study-card__category {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2px;
  }

  /* Figma tag chips are 8px Medium - noticeably smaller than the badge. */
  .a3-case-study-card__tags span {
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 0.2px;
  }
}

/* =========================================================================
 * 7. TESTIMONIALS - node 82:10128 (1440 x 1060.6)
 *
 * 128 pad | header 87.6 | 64 | card row 652 | 128 pad
 * Three 426-wide cards in a bordered 1280 shell, split by 1px #E4E4E7 rules.
 * Quote is Inter Light 300 - the 300 face is loaded in functions.php.
 * ========================================================================= */

@media (min-width: 992px) {

  /* Figma 128 top/bottom (was 100) plus the 1px #E4E4E7 rule on the bottom
   * edge that the build did not have. */
  .a3-testimonials {
    padding: 128px 0;
    border-bottom: 1px solid #e4e4e7;
  }

  /* Figma container is 1280 at x=80; the shared 1320 gave 1290 at x=75. */
  .a3-testimonials .container {
    max-width: 1310px;
  }

  /* Figma 55.2 (was 55), and 64 between the header block and the cards
   * (was 60). */
  .a3-testimonials__heading {
    line-height: 55.2px;
    margin-bottom: 22px;
  }

  /* Figma card: 650 tall, divided by #E4E4E7 rules - the build used #EAEAEA. */
  .a3-testimonials__card {
    min-height: 650px;
    border-right-color: #e4e4e7;
  }

  /* Figma quote line-height is 24.38, not 24. */
  .a3-testimonials__quote {
    line-height: 24.38px;
  }
}

/* =========================================================================
 * 8. CONTACT FORM - node 108:2 (1440 x 1050)
 *
 * 60 pad | 929 row | 60 pad, on white, closed by a 1px #E4E4E7 rule.
 * Row: 516.8 copy column | 96 gap | 731 form card, inside 1344 of content.
 * ========================================================================= */

@media (min-width: 992px) {

  /* Figma 60 top/bottom (was 120) plus the 1px #E4E4E7 bottom rule. */
  .a3-contact-cta {
    padding: 60px 0;
    border-bottom: 1px solid #e4e4e7;
  }

  /* Figma lays this out on 48px gutters like the capabilities section:
   * 1344 of content, not the shared 1320 container's 1290. */
  .a3-contact-cta .container {
    max-width: 1440px;
    padding-left: 48px;
    padding-right: 48px;
  }

  /* Figma columns are 516.8 and 731 with a 96 gap - not the 50/50 the build
   * used. With a 96px gutter the row spans 1440, so the two columns are
   * (516.8+96)/1440 and (731+96)/1440. */
  .a3-contact-cta .row {
    --bs-gutter-x: 96px;
  }

  .a3-contact-cta .row > *:first-child {
    width: 42.5556%;
  }

  .a3-contact-cta .row > *:last-child {
    width: 57.4444%;
  }

  /* service.css adds padding-right: 40px here, which squeezed the copy column
   * to 476.8 against Figma's 516.8 and changed where the heading wrapped.
   * Figma's 96px column gap is the whole gap. */
  .a3-contact-cta__content {
    padding-right: 0;
  }

  /* Figma 55.2 line-height (was 55) and a 24 gap to the orange rule. */
  .a3-contact-cta__heading {
    line-height: 55.2px;
    margin-bottom: 24px;
  }

  /* Figma rule: 96 x 4 in #FF6900, 32 above the paragraph. */
  .a3-contact-cta__line {
    width: 96px;
    height: 4px;
    background: #ff6900;
    margin-bottom: 32px;
  }

  .a3-contact-cta__description {
    font-size: 18px;
    line-height: 29.25px;
    letter-spacing: normal;
  }

  /* Figma card holds 633 of content in 731, i.e. 49 padding all round. */
  .a3-contact-cta__form {
    padding: 49px;
  }

  /* Figma: Inter Bold 30/36. */
  .a3-contact-cta__form-heading {
    font-size: 30px;
    font-weight: 700;
    line-height: 36px;
  }
}

/* -------------------------------------------------------------------------
 * 8b. FAQ - drop the duplicate rule at the top
 *
 * service.css gives .a3-faq a 1px #EEEEEE top border, which lands directly on
 * the 1px #E4E4E7 bottom rule the contact section above it carries (Figma
 * node 108:2 specifies that one). Two lines stacked, in two different greys.
 * Figma has a single rule there, so the FAQ's is the one to go.
 * ------------------------------------------------------------------------- */

@media (min-width: 992px) {

  .a3-faq {
    border-top: 0;
  }
}

/* -------------------------------------------------------------------------
 * 8c. CONTACT FORM internals - node 108:14 / 108:18
 *
 * Card padding 48 (the 49 in the rel offsets includes the 1px inset border),
 * 40 from the heading to the form, then 32 between every row and between the
 * two columns. Inputs are 14 / 14.5 padding over a single 1px #D4D4D8 rule -
 * no box, no radius.
 * ------------------------------------------------------------------------- */

@media (min-width: 992px) {

  .a3-contact-cta__form {
    padding: 48px;
  }

  .a3-contact-cta__form-heading {
    margin-bottom: 40px;
  }

  /* 32 between the two fields on a row. NOT gutter-y: the markup is a
   * .row.g-4, and a y-gutter makes Bootstrap put margin-top:-32px on the row
   * and padding-top:32px on every column, which pushed row 2 twenty pixels
   * below Figma and grew the card from 929 to 977.6. Row rhythm needs to come
   * from the field wrappers instead. */
  .a3-contact-cta__form .row {
    --bs-gutter-x: 32px;
  }

  /* Figma input: 14 top / 14.5 bottom over a 1px #D4D4D8 bottom rule only. */
  .a3-contact-cta .form-control,
  .a3-contact-cta .form-select {
    padding: 14px 0 14.5px;
    border: 0;
    border-bottom: 1px solid #d4d4d8;
    border-radius: 0;
    font-size: 16px;
    line-height: 19px;
    color: #71717a;
  }

  .a3-contact-cta .form-control::placeholder {
    color: #71717a;
    opacity: 1;
  }

  /* Figma's textarea is the same underline, not a resizable box. */
  .a3-contact-cta textarea.form-control {
    resize: none;
  }
}

/* -------------------------------------------------------------------------
 * 8d. Contact form - divider above Submit, and the button itself
 *
 * Figma node 108:83 "HorizontalBorder": 633.2 wide at x=49, individual stroke
 * weights {top: 1} - so a 1px rule across the full content width, with the
 * button 33px below it. Ours was stopping about half way.
 *
 * Figma node 108:84 "Button": 162 x 60, left-aligned on the content edge
 * (ours measured 133.7 x 56).
 * ------------------------------------------------------------------------- */

@media (min-width: 992px) {

  /* The rule lives on .frm-btn-div, which was rendering 382.1 wide at x=33
   * instead of spanning the content. Its col-12 gutter padding is swapped for
   * margins so the border itself runs the full 633.2 from x=49, and the
   * padding drops to Figma's 33 between the rule and the button. The top
   * margin holds the button on y=820 while the rule lands on 787. */
  .a3-contact-cta__form .frm-btn-div {
    /* !important throughout: the element carries Bootstrap's .pt-5 and .mt-4
     * utilities, which are themselves !important and cannot be outranked. */
    width: calc(100% - 32px) !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    margin: 39.4px 16px 0 !important;
    padding: 33px 0 0 !important;
    border-top: 1px solid #e4e4e7;
  }

  .a3-contact-cta__form .wpcf7-submit,
  .a3-contact-cta__form input[type="submit"] {
    width: 162px;
    height: 60px;
    min-height: 60px;
    padding: 0;
    /* Figma DROP_SHADOW on node 108:84 - orange-tinted, not neutral:
     * rgba(249,115,22,.2), offset y 10, blur 20, no spread. */
    box-shadow: 0 10px 20px rgba(249, 115, 22, 0.2);
  }
}

/* -------------------------------------------------------------------------
 * 8e. Contact form - bottom-align the image with the form card
 *
 * Figma: the left column's image ends exactly on the container bottom, level
 * with the form card beside it (both 929 tall). The build left the column
 * content-sized, so the photo stopped short and the two columns ran ragged.
 *
 * The image lives in .a3-contact-cta__image-wrap (not __image, which is an
 * empty wrapper), and it is lazy-loaded - it reports 0 height until scrolled
 * into view, so measure it scrolled or it looks like it is not there.
 * ------------------------------------------------------------------------- */

@media (min-width: 992px) {

  .a3-contact-cta .row > [class*="col-"] {
    align-self: stretch;
  }

  .a3-contact-cta .row > [class*="col-"]:first-child,
  .a3-contact-cta__content {
    display: flex;
    flex-direction: column;
  }

  .a3-contact-cta__content {
    flex: 1 1 auto;
    min-height: 0;
  }

  .a3-contact-cta__image-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .a3-contact-cta__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

/* -------------------------------------------------------------------------
 * 8f. Contact form - phone field placeholder position
 *
 * Figma (108:35): flag at the field's left edge, "+91" at 28, and the
 * "Contact Number*" placeholder starting at 89.8 from the field edge.
 * intl-tel-input writes padding-left:105px inline, which pushed the
 * placeholder ~15px past where the design puts it.
 * ------------------------------------------------------------------------- */

@media (min-width: 992px) {
  .iti__selected-country{
    padding-bottom: 10px;
  }
  .a3-contact-cta .iti input.form-control,
  .a3-contact-cta input#a3-phone-input {
    padding-left: 120px !important;
  }
}

/* =========================================================================
 * 9. SITE HEADER / NAV - node 78:5743 (1440 x 81)
 *
 * 1200 container at x=120 with 48px inner padding, so the logo starts on 168
 * and the row ends on 1272. Closed by a 1px #E4E4E7 rule along the bottom.
 * Menu items are Inter Medium 14/20 in #3F3F46.
 * ========================================================================= */

@media (min-width: 992px) {

  /* Figma has a 1px #E4E4E7 rule under the nav; the build had none. */
  .a3-site-header {
    border-bottom: 1px solid #e4e4e7;
  }

  /* Figma: 120 page padding + 48 container padding puts the logo on 168.
   * The build started it at 104. */
  .a3-site-header .container {
    max-width: 1200px;
    padding-left: 48px;
    padding-right: 48px;
  }

  /* Figma menu item: Inter Medium 14/20 in #3F3F46 (was 15/25.5 in #17181A). */
  .a3-site-header .navbar-nav > li > a,
  .a3-site-header .navbar-nav a {
    font-size: 14px;
    line-height: 20px;
    color: #3f3f46;
  }
}

/* =========================================================================
 * 10. HOVER MOTION - smooth out the lift on buttons and cards
 *
 * The hover states move elements with translateY, but the transitions they
 * inherit are short and use plain `ease`, so the lift reads as a snap rather
 * than a glide - most noticeable on the cards, which travel 6-8px.
 *
 * Longer duration on a decelerating curve, with transform and box-shadow
 * listed explicitly so a shorthand elsewhere cannot drop them. Colour keeps
 * its own quicker timing so buttons still feel responsive.
 * ========================================================================= */

.a3-btn,
button,
.wp-element-button,
input[type="submit"],
.a3-service-card,
.a3-stats__item,
.a3-tooling__card,
.a3-testimonials__card,
.a3-tech-capabilities__card-arrow,
.a3-fcta,
.a3-fcta-act,
.a3-case-study-card__link svg,
.a3-trusted-by__logo {
  transition:
    transform 0.4s cubic-bezier(0.22, 0.85, 0.28, 1),
    box-shadow 0.4s cubic-bezier(0.22, 0.85, 0.28, 1),
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    filter 0.22s ease,
    opacity 0.22s ease;
}

/* Anyone who has asked the OS for less motion gets the colour change only. */
@media (prefers-reduced-motion: reduce) {
  .a3-btn,
  button,
  .wp-element-button,
  input[type="submit"],
  .a3-service-card,
  .a3-stats__item,
  .a3-tooling__card,
  .a3-testimonials__card,
  .a3-fcta,
  .a3-fcta-act {
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .a3-btn:hover,
  button:hover,
  .a3-service-card:hover,
  .a3-stats__item:hover,
  .a3-fcta:hover {
    transform: none;
  }
}

/* -------------------------------------------------------------------------
 * 8g. Contact form - textarea and file row (Figma 108:46 - 108:54)
 *
 * Figma: the textarea underline sits at y=414, then an 8px margin and a 12px
 * padding put "Attach PDF/Doc File" at y=434 - 20px of air. Its row is 49
 * tall (12/12 padding) over the same 1px #D4D4D8 rule as every other field,
 * with the upload glyph in #FF6900. Both placeholders are #71717A.
 * ------------------------------------------------------------------------- */

@media (min-width: 992px) {

  /* Compact: one line of placeholder with the rule just beneath it, matching
   * the other fields rather than the tall box Figma's frame implies. */
  .a3-contact-cta textarea.form-control {
    /* !important: global.css sets `textarea { min-height: 150px }` and
     * service.css adds its own, so a plain height never applies. */
    min-height: 0 !important;
    height: 70px !important;
    padding: 14px 0 14.5px;
    resize: none;
    overflow: hidden;
  }

  .a3-contact-cta .a3-file-upload {
    margin-top: 8px;
    padding: 12px 0;
    border-bottom: 1px solid #d4d4d8;
  }

  .a3-contact-cta .a3-file-upload,
  .a3-contact-cta .a3-file-upload label,
  .a3-contact-cta .a3-file-upload input {
    font-size: 16px;
    line-height: 24px;
    color: #71717a;
  }

  /* Figma draws the upload glyph in the brand orange, not grey. */
  .a3-contact-cta .a3-file-upload svg,
  .a3-contact-cta .a3-file-upload svg path {
    stroke: #ff6900;
    color: #ff6900;
  }
}

/* -------------------------------------------------------------------------
 * 11. FAQ - heading and question colour
 *
 * Figma uses #030303 here, the same near-black as the contact section's
 * heading, rather than the theme's #18181B default.
 * ------------------------------------------------------------------------- */

@media (min-width: 992px) {

  .a3-faq__heading,
  .a3-faq__accordion .accordion-button,
  .a3-faq__accordion .accordion-button:not(.collapsed) {
    color: #030303;
  }
}


/* -------------------------------------------------------------------------
 * 5c. EXPLORE OUR SERVICES - hover moves the icon and arrow only
 *
 * service.css lifts the whole card 8px on hover. In this section the movement
 * should sit on the two glyphs instead, so the grid stays still and only the
 * card you are pointing at reacts.
 *
 * Scoped to .a3-service-card, so every other card on the page keeps its lift.
 * ------------------------------------------------------------------------- */

@media (min-width: 992px) {

  /* Card itself stops moving. The resting shadow from section 5 stays; the
   * hover shadow is dropped with it so nothing "pops". */
  .a3-service-card:hover,
  .a3-service-card:focus-within {
    transform: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  }

  .a3-service-card__icon {
    transition:
      transform 0.35s cubic-bezier(0.22, 0.85, 0.28, 1),
      box-shadow 0.35s cubic-bezier(0.22, 0.85, 0.28, 1);
  }

  .a3-service-card:hover .a3-service-card__icon,
  .a3-service-card:focus-within .a3-service-card__icon {
    transform: translateY(-6px) scale(1.06);
    box-shadow:
      0 6px 12px -4px rgba(0, 0, 0, 0.12),
      0 2px 6px rgba(0, 0, 0, 0.08);
  }

  /* The arrow already travels on hover in service.css; give it the same
   * easing as the icon so the two read as one gesture. */
  .a3-service-card__arrow {
    transition:
      transform 0.35s cubic-bezier(0.22, 0.85, 0.28, 1),
      color 0.22s ease;
  }

  .a3-service-card:hover .a3-service-card__arrow,
  .a3-service-card:focus-within .a3-service-card__arrow {
    transform: translate(4px, -4px);
    color: var(--primary, #ff6900);
  }
}

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

  .a3-service-card:hover .a3-service-card__icon,
  .a3-service-card:hover .a3-service-card__arrow {
    transform: none;
  }
}

/* -------------------------------------------------------------------------
 * 6b. CASE-STUDY BADGES - interactive affordance
 *
 * case-study-filters.js makes the category badge and the tag chips behave as
 * links into the listing's filter bar, but they still rendered with the
 * default cursor and no hover state, so nothing told you they were clickable.
 *
 * Not inside a media query: they are clickable at every width.
 * ------------------------------------------------------------------------- */

.a3-case-study-card__category[data-a3-filter],
.a3-case-study-card__tags span[data-a3-filter] {
  cursor: pointer;
  user-select: none;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

/* Category badge is orange-on-white with an orange border - fill it on hover. */
.a3-case-study-card__category[data-a3-filter]:hover,
.a3-case-study-card__category[data-a3-filter]:focus-visible {
  background-color: var(--primary, #ff6900);
  border-color: var(--primary, #ff6900);
  color: #fff;
}

/* Chips are grey-bordered - bring them up to the brand colour. */
.a3-case-study-card__tags span[data-a3-filter]:hover,
.a3-case-study-card__tags span[data-a3-filter]:focus-visible {
  border-color: var(--primary, #ff6900);
  color: var(--primary, #ff6900);
}

/* role="link" + tabindex mean these are keyboard-reachable, so give focus a
 * visible ring rather than relying on the hover colour alone. */
.a3-case-study-card__category[data-a3-filter]:focus-visible,
.a3-case-study-card__tags span[data-a3-filter]:focus-visible {
  outline: 2px solid var(--primary, #ff6900);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * 7b. TESTIMONIALS - portraits desaturate until hovered
 *
 * The photos sit greyscale in the resting state and come up to full colour
 * on the card you are pointing at. service.css already transitions `0.4s`
 * on the image (all properties), so filter rides that same timing and the
 * existing 1.05 scale still applies alongside it.
 *
 * Hover is on the card, not the image, so the whole tile is the target -
 * and :focus-within covers keyboard users reaching the LinkedIn link.
 *
 * Not inside a media query: this reads the same at every width.
 * ------------------------------------------------------------------------- */

.a3-testimonials__image img {
  filter: grayscale(100%);
}

.a3-testimonials__card:hover .a3-testimonials__image img,
.a3-testimonials__card:focus-within .a3-testimonials__image img {
  filter: grayscale(0);
}

@media (prefers-reduced-motion: reduce) {
  .a3-testimonials__image img {
    transition: filter 0.2s ease;
  }
}


/* =========================================================================
 * 3D. CAPABILITIES - tab swap with no animation
 *
 * Overrides the 3B motion so switching tabs just changes the content. The
 * stacking from 3B stays (it is what keeps only the active panel in flow and
 * the rest out of the tab order); only the timing is removed, so every
 * opacity/transform resolves on the same frame instead of easing.
 *
 * Same approach 3B.3 already uses for prefers-reduced-motion - applied to
 * everyone here rather than only to people who asked the OS for less motion.
 *
 * Placed after 3B so it wins on source order.
 * ========================================================================= */

.a3-tech-capabilities__panels > .tab-pane,
.a3-tech-capabilities__panel > img,
.a3-tech-capabilities__panel::before,
.a3-tech-capabilities__panels_btm > * {
  transition: none !important;
  animation: none !important;
  transition-delay: 0s !important;
  animation-delay: 0s !important;
}

/* The active panel's blocks sit at their resting values immediately - no
 * fade-in, no travel. */
.a3-tech-capabilities__panel.active > img,
.a3-tech-capabilities__panel.active::before,
.a3-tech-capabilities__panel.active .a3-tech-capabilities__panels_btm > * {
  opacity: 1 !important;
  transform: none !important;
}

/* -------------------------------------------------------------------------
 * 13. WHO WE ARE - body copy
 *
 * The paragraphs render at 24px / 43.2 / weight 500 in pure black, which
 * reads as a lead-in rather than body text and sits well apart from every
 * other section on the page. Brought in line with the body style used
 * elsewhere (16 / 28 / 400 / #52525B), as in the "Why Choose A3logics"
 * section.
 * ------------------------------------------------------------------------- */

@media (min-width: 992px) {

  .a3-who-we-are p,
  .a3-who-we-are__description {
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: normal;
    color: #52525b;
  }

  /* The "Portfolio" link is hard-coded at 24px/600 in service.css, so once the
   * body copy came down to 16 it was left standing twice the height of the
   * text it follows. Same 16px as the paragraphs; the semibold weight and the
   * underline stay, since those are what mark it as a link. 24px above it
   * gives the same separation the paragraphs have between them. */
  .a3-who-we-are__link {
    font-size: 16px;
    line-height: 28px;
    margin-top: 24px !important;
  }
}

/* =========================================================================
 * 14. TESTIMONIALS - cards with no photo
 *
 * Section 8 pins the card to the Figma height of 650, which is the quote plus
 * the author line plus a square portrait. The imported pages have no portrait -
 * the documents supply only the quote and who said it - and the quote is
 * flex:1, so it stretched into the space the photo would have filled and left
 * the name stranded at the bottom of a tall empty card.
 *
 * The quote's own 240 minimum is dropped with it - that minimum exists to hold
 * the quote area square above a portrait, and on its own it just moved the gap
 * from below the name to above it. The border and the divider still give the
 * card its shape.
 *
 * Applies only when BOTH the portrait and the LinkedIn link are absent; a card
 * with either one keeps the full 650 exactly as before.
 * ========================================================================= */

@media (min-width: 992px) {

  .a3-testimonials__card--compact {
    min-height: 0;
  }

  .a3-testimonials__card--compact .a3-testimonials__quote {
    min-height: 0;
  }

  /* With the portrait gone the author line ends up flush against the card's
   * bottom edge. The quote's own 42px of padding is the measure the card is
   * built on, so the same figure goes underneath the name. */
  .a3-testimonials__card--compact .a3-testimonials__info {
    padding-bottom: 42px;
  }

  /* Without the fixed 650 the cards are only as tall as their own quote, and a
   * three-line quote next to a two-line one left the row ragged. Slick sizes
   * each slide independently, so the track is made a flex row and the slides
   * stretch - the card is already height:100%, so every card in view matches
   * the tallest. Cards that kept the 650 are all equal already, so this leaves
   * them exactly as they were. */
  .a3-testimonials-slider .slick-track {
    display: flex;
  }

  .a3-testimonials-slider .slick-slide {
    height: auto;
  }

  .a3-testimonials-slider .slick-slide > div {
    height: 100%;
  }
}

/* =========================================================================
 * 15. TESTIMONIALS - navigation dots
 *
 * service.css hides the dot row outright above 1024. That was right when every
 * page carried exactly three testimonials and the slider could not move; the
 * imported pages carry six, so the row scrolls with no indication that it does.
 *
 * The dots are asked for in service.js only when the count exceeds what is on
 * screen at that breakpoint, so where the slider still cannot move slick emits
 * no dot row at all and there is nothing here to reveal.
 * ========================================================================= */

@media (min-width: 1024px) {

  .a3-testimonials-slider .slick-dots {
    display: flex !important;
  }
}

/* The same pager the tooling slider on this page uses, and the people grid on
 * the Core Team page: an 8px #d4d4d8 dot that grows into a 24px orange pill
 * when active. Repeated here rather than shared because service.css scopes it
 * to .a3_tool_slider and that file stays untouched. */
.a3-testimonials-slider .slick-dots {
  position: static;
  align-items: center;
  justify-content: center;
  gap: 8px;

  width: 100%;
  height: auto;
  margin: 28px 0 0;
  padding: 0;

  list-style: none;
}

.a3-testimonials-slider .slick-dots li {
  width: auto;
  height: auto;
  margin: 0;
}

.a3-testimonials-slider .slick-dots li button:before {
  display: none;
}

.a3-testimonials-slider .slick-dots li button {
  display: block;
  width: 8px;
  height: 8px;
  min-height: 0;
  padding: 0;

  border: 0;
  /* !important: global.css gives every button a radius and a min-height. */
  border-radius: 999px !important;
  background: #d4d4d8;

  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  overflow: hidden;
  cursor: pointer;

  transition:
    width 0.3s cubic-bezier(0.22, 0.85, 0.28, 1),
    background-color 0.3s ease;
}

.a3-testimonials-slider .slick-dots li.slick-active button {
  width: 24px;
  background: var(--primary, #ff6900);
}

.a3-testimonials-slider .slick-dots li button:hover,
.a3-testimonials-slider .slick-dots li button:focus-visible {
  background: var(--primary, #ff6900);
}

@media (prefers-reduced-motion: reduce) {
  .a3-testimonials-slider .slick-dots li button {
    transition: none;
  }
}