/**
 * CORE MEMBER TEAM PAGE
 * =========================================================================
 * Styles for page-core-team.php only. Enqueued from functions.php behind the
 * same is_page_template() check, so nothing here reaches any other page.
 *
 * Figma: node 90:11620 "Core Team Members" (1440 x 4402). Every number below
 * is measured from the file - the derivation for each one is in
 * CORE-TEAM-PAGE.md at the project root. Change that doc if you change a value
 * here, or the next person has no way to tell a design value from a guess.
 *
 * Mobile-first: the base rules are the phone layout, and the Figma desktop
 * design lands in @media (min-width: 992px) - the same breakpoint the rest of
 * the theme treats as "desktop". There is no mobile frame in Figma, so the
 * small-screen rules are judgement calls against the desktop design, matching
 * how mobile-refinements.css is written.
 *
 * Prefix: every class is .a3-ct-*, so nothing here can collide with
 * service.css, which owns the .a3-* namespace on the other templates.
 */

.a3-core-team {
  /* Figma lays this page out on 68px gutters, giving 1304 of content at 1440.
   * That is narrower than the theme's shared 1320 container and wider than the
   * 1440/48 variant the capabilities section uses - it is its own grid. */
  --a3-ct-gutter: 20px;
  --a3-ct-gap: 20px;

  /* Design tokens, so the values live in one place rather than being repeated
   * down the file. */
  --a3-ct-ink: #030303;
  --a3-ct-muted: #27272a;
  --a3-ct-rule: #c9ccd1;
  --a3-ct-orange: #ff6900;
}

.a3-ct-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-left: var(--a3-ct-gutter);
  padding-right: var(--a3-ct-gutter);
}

/* =========================================================================
 * 1. HERO - Figma 90:11623 (1440 x 772)
 *
 * Three stacked layers under the copy:
 *   .a3-ct-hero        #FFFFFF fill + the 1px #C9CCD1 bottom rule
 *   ::before           the Corporate Office photo at 30% opacity, full bleed
 *   ::after            the horizontal #18181B gradient over it
 *   .a3-ct-hero__media the 840x574 team photo, bleeding off the right edge
 * ========================================================================= */

.a3-ct-hero {
  position: relative;
  isolation: isolate; /* keeps the two pseudo-layers out of the page's stacking context */
  overflow: hidden;

  background-color: #fff;
  border-bottom: 1px solid var(--a3-ct-rule);
  padding: 72px 0;
}

/* The background photo. Figma has it at opacity 0.30 as its own layer rather
 * than as a fill on the section, which is why this is a pseudo-element and not
 * a background-image on .a3-ct-hero - the gradient above has to sit between
 * the photo and the copy, and a single element cannot do that. */
.a3-ct-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;

  background-image: var(--a3-ct-hero-bg, none);
  background-size: cover;
  background-position: center;
  opacity: 0.3;
}

/* Figma 'Gradient': handles [[0,0.5],[1,0.5]] - a horizontal sweep, left to
 * right, NOT the vertical one this section reads as at a glance.
 * #18181B solid -> 90% at the midpoint -> 60% at the right edge. */
.a3-ct-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background-image: linear-gradient(
    to right,
    #18181b 0%,
    rgba(24, 24, 27, 0.9) 50%,
    rgba(24, 24, 27, 0.6) 100%
  );
}

/* On phones the photo sits above the copy as a normal block; the absolute
 * placement is desktop-only.
 *
 * z-index 0 puts it ABOVE the two pseudo-layers (both at -1). Figma's order is
 * backdrop -> gradient -> team photo, so the photo must not be dimmed by the
 * gradient. Leaving it at -1 let ::after win on document order (a ::after is
 * the element's last child) and the photo rendered washed out and grey. */
.a3-ct-hero__media {
  position: relative;
  z-index: 0;
  margin-bottom: 32px;
}

/* Above the photo, so the copy is never overlapped by it. */
.a3-ct-hero__inner {
  position: relative;
  z-index: 1;
}

.a3-ct-hero__media img {
  display: block;
  width: 100%;
  height: auto;
}

.a3-ct-hero__heading {
  margin: 0 0 20px;
  color: #fff;
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -1px;
}

/* Figma holds "Future." in its own text node in #FF6900 directly under the
 * first line, so it needs to be a block rather than an inline run. */
.a3-ct-hero__highlight {
  display: block;
  color: var(--a3-ct-orange);
}

.a3-ct-hero__description {
  margin: 0 0 32px;
  max-width: 547px;

  color: #f9f9f9;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: normal;
}

/* Figma 90:11633: 236.3 x 56, fill #FF6900, cornerRadius 0.
 *
 * Square corners are deliberate here - the floating CTA elsewhere on the site
 * uses a 16px radius, and copying that would be wrong. */
.a3-ct-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 6.7px;

  min-height: 52px;
  padding: 0 24px;

  background: var(--a3-ct-orange);
  border-radius: 0;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 4px 6px rgba(0, 0, 0, 0.1);

  color: #fff;
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 22.5px;
  letter-spacing: normal;
  text-decoration: none;

  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;
}

.a3-ct-hero__cta:hover,
.a3-ct-hero__cta:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.12),
    0 8px 16px rgba(0, 0, 0, 0.12);
}

.a3-ct-hero__cta-arrow {
  flex: 0 0 auto;
  transition: transform 0.35s cubic-bezier(0.22, 0.85, 0.28, 1);
}

.a3-ct-hero__cta:hover .a3-ct-hero__cta-arrow {
  transform: translateX(4px);
}

/* =========================================================================
 * 2. PEOPLE GRIDS - shared skeleton
 *
 * Figma 90:11639 (Visionaries) and 90:11662 (Executive Leaders) share a
 * heading + description + grid structure, but almost every value differs
 * between them. The common parts live here; the differences are in section 3.
 * ========================================================================= */

.a3-ct-people {
  padding: 64px 0;
}

.a3-ct-people__heading {
  margin: 0 0 16px;

  color: var(--a3-ct-ink);
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.7px;
}

.a3-ct-people__description {
  margin: 0;

  color: var(--a3-ct-muted);
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: normal;
}

.a3-ct-people__header {
  margin-bottom: 40px;
}

.a3-ct-people__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px var(--a3-ct-gap);
}

/* ---- the card ---------------------------------------------------------- */

.a3-ct-member {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Figma 'Background+Border': a filled, bordered, 12px-radius frame with the
 * photo clipped inside it. The fill shows through wherever a photo has not
 * been uploaded yet, which is what makes an empty row look deliberate rather
 * than broken. */
.a3-ct-member__frame {
  overflow: hidden;
  border: 1px solid var(--a3-ct-rule);
  border-radius: 12px;
}

.a3-ct-member__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.a3-ct-member__content {
  /* Figma: 20px from the card's bottom edge to the name. */
  margin-top: 20px;
}

.a3-ct-member__name {
  margin: 0;
  color: var(--a3-ct-ink);
  font-family: Inter, sans-serif;
  font-weight: 500;
}

.a3-ct-member__role {
  /* Figma: 4px between the name and the role. */
  display: block;
  margin-top: 4px;
  color: var(--a3-ct-muted);
  font-family: Inter, sans-serif;
  font-weight: 500;
}

/* The card only becomes an <a> when a link was filled in on the backend, so
 * the hover state is scoped to that case - a plain card must not look
 * clickable. */
a.a3-ct-member .a3-ct-member__frame {
  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);
}

a.a3-ct-member:hover .a3-ct-member__frame,
a.a3-ct-member:focus-visible .a3-ct-member__frame {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.18);
}

a.a3-ct-member:hover .a3-ct-member__name {
  color: var(--a3-ct-orange);
}

/* =========================================================================
 * 3. THE TWO GRIDS, WHERE THEY DIFFER
 *
 * These two sections read as the same component but are not. Kept side by
 * side so the differences are visible rather than scattered.
 *
 *                     Visionaries          Executive Leaders
 *   section fill      #F8FAFC              #FFFFFF
 *   rules             top + bottom         none
 *   card              235.2 x 313.6 (3:4)  302 x 302 (1:1)
 *   card fill         #E4E4E7              #F1F5F9
 *   columns           5                    4
 *   name              20 / 28 / -0.5       19 / 28.5 / -0.475
 *   role              14 / 20 / 0          13 / 19.5 / +0.325 UPPERCASE
 * ========================================================================= */

.a3-ct-people--visionaries {
  background: #f8fafc;
  border-top: 1px solid var(--a3-ct-rule);
  border-bottom: 1px solid var(--a3-ct-rule);
}

.a3-ct-people--executives {
  background: #fff;
}

.a3-ct-member--visionary .a3-ct-member__frame {
  aspect-ratio: 235.2 / 313.6;
  background: #e4e4e7;
}

/* ---- Member card hover - both grids ------------------------------------
 *
 * Not in the Figma (it has no hover state), so this is an addition rather
 * than a measurement.
 *
 * The photo zooms inside the frame, which already has overflow:hidden and a
 * 12px radius - so the crop does the clipping and nothing spills. Hung off
 * the card rather than the image, so pointing anywhere on the tile including
 * the name reacts, and written for .a3-ct-member rather than a.a3-ct-member
 * so it works whether or not a link was filled in.
 * ---------------------------------------------------------------------- */

.a3-ct-member__photo {
  transition: transform 0.55s cubic-bezier(0.22, 0.85, 0.28, 1);
}

.a3-ct-member:hover .a3-ct-member__photo,
.a3-ct-member:focus-within .a3-ct-member__photo {
  transform: scale(1.06);
}

/* A touch of lift on the frame so the tile reads as one object rather than a
 * picture moving inside a static box. */
.a3-ct-member .a3-ct-member__frame {
  transition: box-shadow 0.4s cubic-bezier(0.22, 0.85, 0.28, 1);
}

.a3-ct-member:hover .a3-ct-member__frame,
.a3-ct-member:focus-within .a3-ct-member__frame {
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.28);
}

.a3-ct-member--executive .a3-ct-member__frame {
  aspect-ratio: 1 / 1;
  background: #f1f5f9;
}

.a3-ct-member--visionary .a3-ct-member__name {
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.45px;
}

.a3-ct-member--visionary .a3-ct-member__role {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: normal;
}

.a3-ct-member--executive .a3-ct-member__name {
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.425px;
}

/* The uppercase is a Figma textCase=UPPER, not typed-in capitals - so it stays
 * a CSS transform and the client can enter the role in normal sentence case. */
.a3-ct-member--executive .a3-ct-member__role {
  font-size: 13px;
  line-height: 19.5px;
  letter-spacing: 0.325px;
  text-transform: uppercase;
}

/* =========================================================================
 * 4. THOUGHT LEADERS / FEATURED IN - Figma 90:11698 (1440 x 867.4)
 *
 * Layers, bottom to top:
 *   .a3-ct-thought   #030303 fill
 *   ::before         background photo at 80%
 *   ::after          #030303 at 40%, plus the bottom-up gradient
 * ========================================================================= */

.a3-ct-thought {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  background-color: #030303;
  padding: 72px 20px;
  text-align: center;
}

.a3-ct-thought::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;

  background-image: var(--a3-ct-thought-bg, none);
  background-size: cover;
  background-position: center;
  opacity: 0.8;
}

/* Two Figma layers collapsed into one element: the 40% #030303 'Overlay' and
 * the 'Gradient' above it, whose handles [[0.5,1],[0.5,0]] run bottom to top -
 * solid at the bottom edge, clear by the midpoint. */
.a3-ct-thought::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background-color: rgba(3, 3, 3, 0.4);
  background-image: linear-gradient(to top, #030303 0%, rgba(3, 3, 3, 0) 50%);
}

.a3-ct-thought__inner {
  width: 100%;
  max-width: 1344px;
  margin: 0 auto;
}

.a3-ct-thought__heading {
  margin: 0;

  color: #fff;
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.8px;
}

/* Figma 'HorizontalBorder' - the rule the eyebrow and logos hang below. It is
 * inset 48px from each side of the 1440 frame, so it spans 1344 rather than
 * the full width. */
.a3-ct-thought__featured {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.a3-ct-thought__eyebrow {
  margin: 0;

  color: rgba(255, 255, 255, 0.75);
  font-family: Inter, sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.a3-ct-thought__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 32px;

  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

/* Width comes from the repeater's per-logo field, emitted as an inline style
 * on the <li>; 140px is the fallback when it has not been set.
 *
 * It has to be per-logo. The source files range from 733px to 1920px wide for
 * marks that are drawn at 66 and 181 in the design, so any shared max-width or
 * max-height renders the row wildly out of proportion - Johnson & Johnson came
 * out 718px against its intended 181. */
.a3-ct-thought__logo {
  width: var(--a3-ct-logo-w, 140px);
  max-width: 100%;
}

.a3-ct-thought__logo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;

  /* Figma renders this row knocked out in white, but the image fills it
   * exports are the full-colour brand marks - so the whitening is a layer
   * treatment in the file, not part of the asset.
   *
   * brightness(0) crushes every colour to black, invert(1) flips that to
   * white, and alpha is untouched throughout - so it works for any logo the
   * client uploads later without needing white versions of each one. */
  filter: brightness(0) invert(1);
}

/* =========================================================================
 * 5. DESKTOP - the Figma frame, exactly
 *
 * Everything above is the small-screen layout. From 992px up the measured
 * design takes over.
 * ========================================================================= */

@media (min-width: 992px) {

  .a3-core-team {
    /* Figma: 1440 frame - 1304 content = 68 each side. */
    --a3-ct-gutter: 68px;
    --a3-ct-gap: 32px;
  }

  /* ---- Hero ---------------------------------------------------------- */

  /* ------------------------------------------------------------------
   * The hero scales proportionally between 992 and 1440, then locks to the
   * Figma values above that.
   *
   * Every number here is the Figma measurement expressed as a fraction of the
   * 1440 frame (value / 1440 * 100vw), clamped so it can never exceed the
   * design value. So at >=1440 the section is pixel-exact, and below that the
   * whole composition shrinks together instead of coming apart.
   *
   * It has to work this way because the photo is pinned to the right edge. At
   * a fixed 840px its left edge lands at viewport-840, which is only correct
   * at 1440 - at a 1280 viewport (a 150% browser zoom on a 1920 screen) it
   * moved to 440 instead of the proportional 533, walking the people 93px
   * left into the headline. Browser zoom shrinks the layout viewport, so this
   * is the same bug as a small window and one fix covers both.
   * ------------------------------------------------------------------ */

  .a3-ct-hero {
    min-height: clamp(560px, 53.6111vw, 772px); /* 772 */
    padding: 0;
    display: flex;
    align-items: flex-start;
  }

  /* Figma 'image 77': 840 x 574 at rel(600, 203), i.e. pinned to the right
   * edge of the 1440 frame (600 + 840 = 1440).
   *
   * The offset is measured to the edge of a CENTRED 1440 box, not to the
   * viewport. Past 1440 the copy keeps centring inside .a3-ct-container's
   * 1440 max-width while a viewport-pinned photo kept travelling outward - on
   * a 2560 screen that left ~560px of dead gradient between the button and
   * the photo. max() keeps it flush to the viewport at or below 1440, where
   * the two are the same thing.
   *
   * So the whole hero composition centres as one 1440 unit, matching the rest
   * of the page, while the background layers stay full-bleed. */
  .a3-ct-hero__media {
    position: absolute;
    top: clamp(120px, 14.0972vw, 203px);   /* 203 */
    right: max(0px, calc((100% - 1440px) / 2));
    left: auto;
    width: clamp(420px, 58.3333vw, 840px); /* 840 */
    height: clamp(300px, 39.8611vw, 574px); /* 574 */
    margin: 0;
  }

  /* object-position: top, not the default centre.
   *
   * Figma's imageTransform on this fill is sy=0.876 with ty=0 - it shows the
   * top 87.6% of the photo, anchored to the top edge, and drops the bottom.
   * A centred cover crop takes the difference off BOTH edges instead, which
   * sliced the heads off the back row.
   *
   * The other photos on this page all have symmetric transforms (the members'
   * are ty=0.055/sy=0.891 and ty=0.167/sy=0.667, even top and bottom), so a
   * centred crop is correct for those and only this one needs anchoring. */
  .a3-ct-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  .a3-ct-hero__inner {
    /* Figma puts the first heading line's cap top at y=169. */
    padding-top: clamp(88px, 11.7361vw, 169px); /* 169 */
  }

  /* 636, not the 608.8 of Figma's 'Group 13728'. The heading text node inside
   * that group is 636 wide and deliberately overhangs it - capping the column
   * at the group width broke "Engineering the" onto two lines. The paragraph
   * keeps its own 547 below, so the narrower measure the design shows for the
   * body copy is unaffected.
   *
   * Scales with the heading, so "Engineering the" keeps setting on one line
   * all the way down - the measure and the type shrink by the same factor. */
  .a3-ct-hero__content {
    max-width: min(44.1667vw, 636px); /* 636 */
  }

  /* Figma: Inter Bold 85/85 (100%), letter-spacing -2. Both lines share the
   * same style; only the colour changes.
   *
   * line-height and letter-spacing are ratios rather than pixels so they track
   * the font-size as it scales: 85/85 = 1, and -2/85 = -0.02353em. */
  .a3-ct-hero__heading {
    font-size: clamp(46px, 5.9028vw, 85px); /* 85 */
    line-height: 1;
    letter-spacing: -0.02353em;
    /* 169 + 170 (two 85px lines) = 339, and the paragraph's first line sits at
     * 383 - so 44 of air between them. */
    margin-bottom: clamp(24px, 3.0556vw, 44px); /* 44 */
  }

  /* Figma: Inter Medium 19/30.4 (160%), #F9F9F9, held in a 547 box.
   *
   * The 16px floor binds below about a 1210px viewport - body copy stops
   * tracking the design there rather than shrinking into unreadability. */
  .a3-ct-hero__description {
    font-size: clamp(16px, 1.3194vw, 19px); /* 19 */
    line-height: 1.6;                       /* 30.4 / 19 */
    max-width: min(37.9861vw, 547px);       /* 547 */
    margin-bottom: clamp(28px, 2.9861vw, 43px); /* 43 */
  }

  /* Figma: 236.3 x 56 - 32px of padding each side with a 6.7px gap between
   * the label and the arrow adds up to exactly that. */
  .a3-ct-hero__cta {
    min-height: 56px;
    padding: 0 32px;
  }

  /* ---- People grids -------------------------------------------------- */

  .a3-ct-people__heading {
    /* Figma: Inter Regular 56/56, letter-spacing -1.2, #030303. */
    font-size: 56px;
    line-height: 56px;
    letter-spacing: -1.2px;
    /* Heading bottom 185 -> description top 212.5. */
    margin-bottom: 27.5px;
  }

  .a3-ct-people__description {
    /* Figma: Inter Regular 20/32 (160%), #27272A. */
    font-size: 20px;
    line-height: 32px;
  }

  /* Both sections put the grid 92.5px below the description block - the one
   * measurement the two do share. */
  .a3-ct-people__header {
    margin-bottom: 92.5px;
  }

  .a3-ct-people__grid--5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .a3-ct-people__grid--4 {
    grid-template-columns: repeat(4, 1fr);
    /* Figma: role bottom 774 -> next row's card top 838. */
    row-gap: 64px;
  }

  /* Figma 90:11639: 129 top and 129 bottom, description capped at 635.4.
   *
   * 128, not 129: Figma's rules are INSIDE strokes, so the 129 is measured
   * from the section's outer edge and already contains the 1px border. Paying
   * the full 129 as padding on top of a 1px border made the section 885.6
   * against the design's 883.6. Same correction as the service card in
   * desktop-refinements.css section 5. */
  .a3-ct-people--visionaries {
    padding: 128px 0;
  }

  .a3-ct-people--visionaries .a3-ct-people__description {
    max-width: 636px;
  }

  /* Figma 90:11662: 128 top and 128 bottom, description capped at 757.7. */
  .a3-ct-people--executives {
    padding: 128px 0;
  }

  .a3-ct-people--executives .a3-ct-people__description {
    max-width: 758px;
  }

  .a3-ct-member--visionary .a3-ct-member__name {
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.5px;
  }

  .a3-ct-member--executive .a3-ct-member__name {
    font-size: 19px;
    line-height: 28.5px;
    letter-spacing: -0.475px;
  }

  /* ---- Thought leaders ----------------------------------------------- */

  .a3-ct-thought {
    min-height: 867.4px;
    padding: 0 48px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .a3-ct-thought__inner {
    /* Figma: the heading's first line sits at y=397.4. */
    padding-top: 397px;
  }

  /* Figma: Inter Regular 72/79.2 (110%), letter-spacing -1.8, centred. */
  .a3-ct-thought__heading {
    font-size: 72px;
    line-height: 79.2px;
    letter-spacing: -1.8px;
  }

  /* Heading runs 397.4 -> 556; the rule lands on 574.4. */
  .a3-ct-thought__featured {
    margin-top: 18px;
    /* Figma: 48 between the rule and the "Featured In" eyebrow. */
    padding-top: 48px;
  }

  /* Eyebrow bottom 638.4 -> the logo row is centred on y=748, and the tallest
   * logo is 67 - so its top edge sits at 714.5. */
  /* Figma's five gaps measure 60 / 73 / 71 / 49 - optically balanced by eye
   * rather than set on a pitch, and the row sits ~45px left of the frame
   * centre. Averaging them to 63 and centring the row reads as deliberate,
   * where reproducing a 45px offset that was almost certainly a nudge does
   * not. */
  .a3-ct-thought__logos {
    margin-top: 76px;
    gap: 63px;
    justify-content: center;
  }
}

/* =========================================================================
 * 6. TABLET - 2 and 3 up
 *
 * Figma has no tablet frame. Rather than stretching the phone layout across
 * 900px, the grids step down through sensible column counts.
 * ========================================================================= */

@media (min-width: 576px) and (max-width: 991.98px) {

  .a3-core-team {
    --a3-ct-gutter: 32px;
    --a3-ct-gap: 24px;
  }

  .a3-ct-people__grid--5,
  .a3-ct-people__grid--4 {
    grid-template-columns: repeat(3, 1fr);
  }

  .a3-ct-hero__heading {
    font-size: 56px;
    letter-spacing: -1.4px;
  }

  .a3-ct-thought__heading {
    font-size: 48px;
    letter-spacing: -1.2px;
  }
}

@media (max-width: 575.98px) {

  /* Two up on a phone keeps the faces large enough to read while still
   * showing the grid as a grid. */
  .a3-ct-people__grid--5,
  .a3-ct-people__grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .a3-ct-hero__cta {
    width: 100%;
    justify-content: center;
  }
}

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

  .a3-ct-hero__cta,
  .a3-ct-hero__cta-arrow,
  a.a3-ct-member .a3-ct-member__frame,
  .a3-ct-member__photo {
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .a3-ct-hero__cta:hover,
  .a3-ct-hero__cta:hover .a3-ct-hero__cta-arrow,
  a.a3-ct-member:hover .a3-ct-member__frame,
  .a3-ct-member:hover .a3-ct-member__photo,
  .a3-ct-member:focus-within .a3-ct-member__photo {
    transform: none;
  }
}

/* =========================================================================
 * 7. PHONE SLIDERS - Our Visionaries, and the Featured In logo row
 *
 * core-team.js hands both to Slick below 768px and unslicks them above it, so
 * everything here is scoped to .slick-initialized rather than to a media
 * query. That way the rules can only ever apply when Slick is actually driving
 * the element - there is no window where the layout is half grid, half track.
 *
 * Not a Figma layout: there is no mobile frame in the file, so this is the
 * same judgement call the rest of the phone CSS is.
 * ========================================================================= */

/* Both containers are grid/flex on desktop. Slick builds its own track and
 * needs a plain block to do it in, or the slides are laid out twice. */
.a3-ct-people__grid.slick-initialized,
.a3-ct-thought__logos.slick-initialized {
  display: block;
}

/* ---- Our Visionaries ---------------------------------------------------- */

/* Slick sets the width of each slide; the gutter between them has to come from
 * padding, because a grid gap no longer applies once it is a track. */
.a3-ct-people__grid.slick-initialized .a3-ct-member {
  padding-right: 16px;
}

/* Slides are inline-block-ish in a track, so the frame needs its own height
 * back - the aspect-ratio still governs, this just stops it collapsing. */
.a3-ct-people__grid.slick-initialized .a3-ct-member__frame {
  width: 100%;
}

.a3-ct-people__grid.slick-initialized .slick-list {
  /* The hover shadow and the 12px radius both sit inside the frame, so the
   * track can clip tightly without cutting anything off. */
  overflow: hidden;
}

/* Dots match the testimonials slider in mobile-refinements.css, so the two
 * read as the same control rather than two different sliders. */
.a3-ct-people__grid.slick-initialized .slick-dots {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

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

  list-style: none;
}

.a3-ct-people__grid.slick-initialized .slick-dots li {
  width: auto;
  height: auto;
  margin: 0;
}

.a3-ct-people__grid.slick-initialized .slick-dots li button:before {
  display: none;
}

.a3-ct-people__grid.slick-initialized .slick-dots li button {
  display: block;
  width: 8px;
  height: 8px;
  padding: 0;
  min-height: 0;

  border: 0;
  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-ct-people__grid.slick-initialized .slick-dots li.slick-active button {
  width: 24px;
  background: var(--a3-ct-orange);
}

/* ---- Featured In logos -------------------------------------------------- */

/* Slick writes an inline width onto every slide, so the <li> can no longer
 * carry the logo's own width - it moves to the image, read from the same
 * --a3-ct-logo-w the template sets. Each mark keeps its Figma proportions and
 * sits centred in whatever slide width Slick hands it. */
.a3-ct-thought__logos.slick-initialized .a3-ct-thought__logo {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 12px;
}

.a3-ct-thought__logos.slick-initialized .a3-ct-thought__logo img {
  width: var(--a3-ct-logo-w, 140px);
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.a3-ct-thought__logos.slick-initialized .slick-track {
  display: flex;
  align-items: center;
}

/* Paragraph under the Thought Leaders heading.
 *
 * The client document for this page asks for a 5-6 line brief here, which the
 * original band had no field for. Sits between the heading and the
 * 'HorizontalBorder' rule, so the bottom margin is what keeps it off that rule.
 *
 * Colour is the heading's white dropped to 78% - the band is dark, and body
 * copy at full white next to a 32px heading flattens the hierarchy. */
.a3-ct-thought__description {
  max-width: 760px;
  margin: 18px auto 0;
  text-align: center;

  color: rgba(255, 255, 255, 0.78);
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
}

@media (max-width: 767px) {
  .a3-ct-thought__description {
    margin-top: 14px;
    font-size: 15px;
  }
}

/* ------------------------------------------------------------------------ *
 * Hero photo: span the section instead of standing at a fixed height.
 *
 * The Figma composition assumes the two-line "Engineering the / Future."
 * heading, and pins the photo at top:203 height:574. A longer real page title
 * ("Meet the Brilliant Minds Behind A3Logics" runs to four lines) makes the
 * copy column taller than 203+574, so the section grew past the photo and left
 * a grey band under it on the right.
 *
 * Anchoring the bottom as well lets the photo follow the section's height,
 * while min-height keeps the design's 574 as the floor - so a page whose copy
 * is short still renders the original composition, unchanged.
 * ------------------------------------------------------------------------ */
@media (min-width: 992px) {
  .a3-ct-hero__media {
    bottom: 0;
    height: auto;
    min-height: 300px;   /* floor for a hero with almost no copy */
  }
}

/* ------------------------------------------------------------------------ *
 * Bottom breathing room at >=992, where both sections set padding to 0.
 *
 * At that breakpoint .a3-ct-hero and .a3-ct-thought drop the 72px vertical
 * padding they carry on phones and rely on a min-height instead. That holds
 * only while the content is shorter than the min-height - with this page's
 * longer copy the hero CTA and the "Featured In" logo row both ended up flush
 * against the section's bottom edge.
 *
 * The hero's space goes on __inner rather than the section: the photo is
 * absolutely positioned with bottom:0, and offsets resolve against the
 * containing block's PADDING box, so padding on .a3-ct-hero would lift the
 * photo and reopen the grey band it was just closed on.
 * ------------------------------------------------------------------------ */
@media (min-width: 992px) {
  .a3-ct-hero__inner {
    padding-bottom: 72px;
  }

  .a3-ct-thought {
    padding-bottom: 72px;
  }
}