/**
 * Practice-area pages.
 *
 * Every value here is read out of the Figma file (UB7FmaXxJY1PnhVnhHqlEJ,
 * frame 20:716) rather than eyeballed: auto-layout became flex, itemSpacing
 * became gap, the frame paddings became the container widths, and the corner
 * radii are the literal rectangleCornerRadii. The design is drawn at 1920, so
 * a 375px side padding is a 1170px content column and a 478px side padding is
 * a 964px one — both appear, and both are below.
 *
 * Mobile-first: base rules are the phone layout, every media query is
 * min-width and adds complexity going up, matching the theme's own 768/1280
 * breakpoints. The desktop numbers land at 1280.
 */

:root {
  --pa-blue: #1f3d47;
  --pa-orange: #ffab00;
  --pa-beige: #faf7f5;
  /* Rectangle 11: the FAQ accordion glyph tile, mint in the employers column
     and lavender in the job seekers one. */
  --pa-mint: #b1ffe0;
  --pa-lilac: #dab9ff;

  /* Frame 112/45/28: padding 0 375px in a 1920 frame. */
  --pa-wide: 1170px;
  /* Frame 74 (intro): padding 0 478px in a 1920 frame, and the text box
     inside it measures 958. */
  --pa-narrow: 958px;
  /* Frame 113: the page is a flex column with gap 100 and padding 100 0. */
  --pa-rhythm: 100px;
}

/* --------------------------------------------------------------- layout - */

.pa-page-w,
.pa-page-n {
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .pa-page-w, .pa-page-n { padding: 0 40px; }
}

@media (min-width: 1280px) {
  .pa-page-w { max-width: var(--pa-wide); padding: 0; }
  .pa-page-n { max-width: var(--pa-narrow); padding: 0; }
}

/* Section rhythm. Figma has a flat 100px gap between every section; that is
   too much air on a phone, so it scales rather than being reproduced.

   These are per-side paddings and two of them meet between any two sections,
   so the gap is double the value here. That is what made tablet the loosest
   breakpoint on the page: 70px a side is a 140px gap, against 100px at 1280
   and 96px on a phone. There is no tablet override now — the phone's 48px
   carries up to 1280, where half the rhythm gives the design's 100px. */

/* The hero has no top padding at any width: in the design the photo starts at
   y=111, flush against the bottom of the 112px header, and the section is
   exactly 573px tall (111 to 684) with the copy centred inside it. */
.pa-hero { padding: 0; }

.pa-intro,
.pa-services,
.pa-split,
.pa-testimonials,
.pa-tiles-section,
.pa-roles-section,
.pa-searches-section,
.pa-team-section,
.pa-faq-section,
.pa-jobs,
.pa-partner,
.pa-extra {
  padding: 48px 0;
}

@media (min-width: 1280px) {
  .pa-intro, .pa-services, .pa-split, .pa-testimonials, .pa-tiles-section,
  .pa-roles-section, .pa-searches-section, .pa-team-section, .pa-faq-section,
  .pa-jobs, .pa-partner, .pa-extra {
    padding: calc(var(--pa-rhythm) / 2) 0;
  }

  /* The hero is the one section with no bottom padding of its own, so the
     section after it has to carry the whole 100px rather than half. */
  .pa-hero + * { padding-top: var(--pa-rhythm); }
}

body.single-practice-area { background: var(--pa-beige); }

/* ----------------------------------------------------------- breadcrumb - */

/* Not in the Figma comp — added because the structured data was describing a
   trail the page never showed, and because a category page had no link back up
   to its own industry. Deliberately quiet: it sits in the gap between the
   header and the hero photo and should not compete with the H1.

   The hero has no top padding of its own, so the spacing below lives here. */
/* The top padding is doing more work than it looks like. The header sits over
   the top of the page rather than pushing it down, so the first 16px of this is
   spent clearing it — measured, the rule below the menu was landing 1px above
   the breadcrumb text on a phone and 4px on desktop. These numbers are set so
   the visible gap between that rule and the text is 16px and 24px. */
.pa-crumbs {
  padding: 32px 0 4px;
  font-size: 14px;
  line-height: 1.4;
}

@media (min-width: 1280px) {
  .pa-crumbs { padding: 44px 0 8px; }
}

.pa-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pa-crumbs__item {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* A CSS separator rather than a character in the markup, so it is not read out
   as "greater than" between every entry. */
.pa-crumbs__item + .pa-crumbs__item::before {
  content: "";
  width: 5px;
  height: 5px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .5;
  flex: none;
}

.pa-crumbs__item { color: var(--pa-blue); }

.pa-crumbs__link {
  color: inherit;
  text-decoration: none;
  opacity: .7;
}

.pa-crumbs__link:hover,
.pa-crumbs__link:focus-visible {
  opacity: 1;
  text-decoration: underline;
}

.pa-crumbs__current {
  font-weight: 500;
  opacity: 1;
}

.pa-hero img, .pa-split img, .pa-tile img, .pa-cta img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Section title: Figma 50px / 500 / lh 55, centred. */
.pa-section__title {
  font-size: clamp(1.75rem, 1.05rem + 2.9vw, 3.125rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--pa-blue);
  text-align: center;
  /* Figma sizes each heading's text box rather than the container, and that
     box width is what makes a heading wrap to two lines instead of running
     the full 1170. The 2026-08-12 pass widened every one of them — the
     services heading went 717 -> 965, testimonials 770 -> 939 — so the cap is
     now set per section below, and this is only the fallback. */
  max-width: 965px;
  margin: 0 auto 32px;
}

@media (min-width: 1280px) {
  /* Frame 65/45/28: heading sits 50px above its content. */
  .pa-section__title { margin-bottom: 50px; }

  /* One cap per section, each the width of that heading's text box in the
     design. They only differ by tens of pixels, but that is exactly the range
     that decides where a 50px heading breaks. */
  .pa-services .pa-section__title      { max-width: 965px; }
  .pa-testimonials .pa-section__title  { max-width: 939px; }
  .pa-tiles-section .pa-section__title { max-width: 984px; }
  .pa-roles-section .pa-section__title { max-width: 960px; }
  .pa-searches-section .pa-section__title { max-width: 964px; }
  .pa-team-section .pa-section__title { max-width: 940px; }
  .pa-faq-section .pa-section__title   { max-width: 867px; }
}

.pa-section__title--left { text-align: left; max-width: none; margin-left: 0; }

/* The theme sets no global focus style. */
.pa-btn:focus-visible, .pa-tile:focus-visible, .pa-faq__toggle:focus-visible,
.pa-showmore:focus-visible, .pa-jobs__title:focus-visible, .pa-jobs__apply:focus-visible,
.pa-services__link:focus-visible, .pa-crumbs__link:focus-visible,
.pa-partner__link:focus-visible,
.pa-intro__body a:focus-visible, .pa-split__text a:focus-visible,
.pa-services__body a:focus-visible, .pa-partner__body a:focus-visible,
.pa-extra__body a:focus-visible {
  outline: 3px solid var(--pa-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* -------------------------------------------- links inside body copy - */

/* The theme sets no link style for prose, so an <a> in a WYSIWYG field comes
   out as the browser's default bright blue with a default underline — which on
   this beige page reads as an unstyled document rather than as the design.
   Every prose block on the page is listed, not only the one that has a link
   today, so the next one written into a Google Doc lands styled.

   Underlined at rest on purpose: colour alone is the one thing that cannot
   carry "this is a link" for a reader who does not see the difference between
   #1f3d47 body text and a #1f3d47 link. */
.pa-intro__body a,
.pa-split__text a,
.pa-services__body a,
.pa-partner__body a,
.pa-extra__body a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color 0.15s ease;
}

/* -------------------------------------------------------------- buttons - */

/* Figma btn frame: 130x49, padding 16px 24px, radius 100px, gap 15px between.
   Text 12px / 700 / letter-spacing -0.24px. */
.pa-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
}

.pa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 49px;
  padding: 16px 24px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  line-height: 17px;
  letter-spacing: -0.24px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.1s ease;
}

.pa-btn--orange { background: var(--pa-orange); color: #fff; }
.pa-btn--blue   { background: var(--pa-blue);   color: #fff; }
.pa-btn--white  { background: #fff;             color: var(--pa-blue); }

/* ----------------------------------------------------------------- hero - */

/* The photo carries a 300px bottom-LEFT radius (not the top corners) and runs
   to the right edge of the viewport.
   
   There is an orange rectangle behind it in the Figma file, and I built it as
   a hard-edged shadow — but that layer is marked visible:false. It is switched
   off in the design and must not render. */
.pa-hero { position: relative; overflow: hidden; }

/* The quarter-circle motif from the Equiliem mark, sitting over the bottom
   right of the hero photo. Exported from the design rather than redrawn. */
.pa-hero__inner::after {
  content: '';
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 137px;
  height: 212px;
  background: url('../images/motif-hero.svg') no-repeat center / contain;
  pointer-events: none;
}

@media (min-width: 1280px) {
  .pa-hero__inner { position: relative; }
  .pa-hero__inner::after { display: block; right: calc((100vw - var(--pa-wide)) / -2); }
}

.pa-hero__inner {
  display: grid;
  gap: 32px;
  padding-top: 32px;
}

.pa-hero__copy { display: flex; flex-direction: column; gap: 30px; }

/* The copy *column* runs 374->1045, but the text box inside it is 574 wide.
   Without this the H1 sets 62px wider than the design and wraps differently. */
@media (min-width: 768px) {
  .pa-hero__copy { max-width: 574px; }
}

.pa-hero__title {
  font-size: clamp(2rem, 1rem + 4.2vw, 3.4375rem);
  font-weight: 700;
  line-height: 1.09;
  color: var(--pa-blue);
  margin: 0;
}

.pa-hero__media { position: relative; }

.pa-hero__image {
  position: relative;
  width: 100%;
  aspect-ratio: 875 / 573;
  object-fit: cover;
  border-radius: 0 0 0 150px;
}

/* No height override: at the corrected column ratio the photo lands at 875
   wide, and its natural 1400x917 aspect puts it at exactly the 573px the
   design specifies. */

@media (min-width: 768px) {
  .pa-hero__inner {
    /* Not 574/875. The copy box is 574 wide but the photo *starts* at x=1045
       in a 1920 frame — 670px into the 1170 container — and runs to the
       viewport edge. So the split inside the container is 670/500, and the
       500 plus the 375 bleed makes the photo its true 875. Getting this wrong
       made the photo both too wide and, at its natural aspect, too tall. */
    grid-template-columns: minmax(0, 670fr) minmax(0, 500fr);
    align-items: stretch;
    /* No gap: the photo begins exactly where the copy column ends (x=1045 =
       375 + 670). The visual breathing room comes from the copy's own
       max-width, not from a gap. A 60px gap here moved the photo 26px right
       and took 26px off its width. */
    gap: 0;
    padding-top: 0;
    min-height: 440px;
  }
  .pa-hero__copy { justify-content: center; }
  .pa-hero__media { display: flex; }
  .pa-hero__image { border-radius: 0 0 0 300px; }
}

@media (min-width: 1280px) {
  /* The photo runs past the container to the viewport edge — in the design it
     is 875 wide starting at x=1045 in a 1920 frame, i.e. 375 beyond the 1545
     content edge.
     
     The column still bleeds to the edge at any width, but the image inside it
     is capped at its design size and right-aligned. Without the cap the photo
     grows with the viewport while the container stays at 1170: at 2385 it
     rendered 1115x730 against a design of 875x573. */
  .pa-hero__inner { min-height: 573px; align-items: center; }

  .pa-hero__media {
    margin-right: calc((100vw - var(--pa-wide)) / -2);
    display: flex;
    justify-content: flex-end;
  }

  /* .pa-hero .pa-hero__image, not .pa-hero__image: the shared
     `.pa-hero img { max-width: 100% }` rule above is (0,1,1) and would
     otherwise win, which is exactly why the first attempt at this cap did
     nothing. */
  .pa-hero .pa-hero__image { max-width: 875px; }
}

/* ---------------------------------------------------------------- intro - */

/* Frame 74: gap 20px, text 24 / 400 / lh 35 in a 964px column. */
.pa-intro__body p {
  font-size: clamp(1rem, 0.9rem + 0.55vw, 1.5rem);
  line-height: 1.46;
  color: var(--pa-blue);
  margin: 0 0 20px;
}

.pa-intro__body p:last-of-type { margin-bottom: 0; }

.pa-showmore {
  appearance: none;
  background: none;
  border: 0;
  padding: 12px 0;
  min-height: 44px;
  margin-top: 8px;
  font: inherit;
  font-size: 1rem;
  color: var(--pa-blue);
  text-decoration: underline;
  cursor: pointer;
}

/* ------------------------------------------------------------- services - */

/* Frame 111: three 390px columns, each padding 20px 50px, inner gap 30px.
   Only the middle column carries the 1px rules, which is what draws the two
   dividers rather than a border on every column. */
/* Frame 156: cards 370 wide, 30 apart. The coloured bar under each one is a
   separate 16px rectangle sitting *below* the card, not inside it, so it is a
   pseudo-element pushed past the card's bottom edge — which is why the grid
   carries 16px of bottom padding to make room for it. */
.pa-services__grid {
  display: grid;
  /* The row gap carries the 16px bar plus the 30px the design puts between
     cards, so a stacked card's bar does not run into the card below it. */
  row-gap: 46px;
  column-gap: 30px;
  padding-bottom: 16px;
}

.pa-services__col {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Frame 66: the copy and the link are pushed apart, so the links line up
     across cards whose copy runs to different lengths. */
  justify-content: space-between;
  gap: 40px;
  /* Frame 69: rectangleCornerRadii [20, 200, 0, 0]. The 200 is over half the
     card's width, so it scales down on a phone where the card is narrower
     than the design's 370 and the full bite would eat the heading. */
  border-radius: 20px 110px 0 0;
  padding: 40px 30px;
}

.pa-services__col::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 16px;
  border-radius: 0 20px 20px 20px;
}

/* Figma tints each card by position, and the two-block artboard is not simply
   the three-block one with the last card deleted — its first card is the
   greener grey and its bar is the darker blue. Both are reproduced as drawn. */
.pa-services--3 .pa-services__col:nth-child(1) { background: #eff2f7; }
.pa-services--3 .pa-services__col:nth-child(2) { background: #f9f2e1; }
.pa-services--3 .pa-services__col:nth-child(3) { background: #f0f2f0; }

.pa-services--3 .pa-services__col:nth-child(1)::after { background: #3f444c; }
.pa-services--3 .pa-services__col:nth-child(2)::after { background: var(--pa-orange); }
.pa-services--3 .pa-services__col:nth-child(3)::after { background: var(--pa-blue); }

.pa-services--2 .pa-services__col:nth-child(1) { background: #f0f2f0; }
.pa-services--2 .pa-services__col:nth-child(2) { background: #f9f2e1; }

.pa-services--2 .pa-services__col:nth-child(1)::after { background: var(--pa-blue); }
.pa-services--2 .pa-services__col:nth-child(2)::after { background: var(--pa-orange); }

.pa-services__title {
  font-size: 23px;
  font-weight: 600;
  line-height: 33px;
  color: var(--pa-blue);
  margin: 0;
}

.pa-services__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 23px;
  color: var(--pa-blue);
  margin: 0;
}

/* Frame 158: title and body 20px apart. */
.pa-services__body { display: flex; flex-direction: column; gap: 20px; }

/* Frame 157: label and arrow 10px apart, vertically centred. */
.pa-services__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 23px;
  color: var(--pa-blue);
  text-decoration: none;
}

.pa-services__arrow {
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--pa-orange);
}

@media (min-width: 768px) {
  .pa-services__grid { grid-template-columns: repeat(2, 1fr); }

  /* Three cards in a two-column grid leave the third alone on its own row with
     a card-sized hole beside it. It runs the full width instead — the tablet
     range is too narrow for three columns, where each card's copy would be
     down to about 150px. */
  .pa-services--3 .pa-services__col:nth-child(3) { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .pa-services--3 .pa-services__grid { grid-template-columns: repeat(3, 1fr); }
  .pa-services--3 .pa-services__col:nth-child(3) { grid-column: auto; }
}

@media (min-width: 1280px) {
  /* Frame 69: padding 60 60 60 30 — the copy sits nearer the left edge than
     the right, which is what keeps it clear of the corner cut. */
  .pa-services__col {
    border-radius: 20px 200px 0 0;
    padding: 60px 60px 60px 30px;
  }

  /* Practice Area 1: with two blocks the heading moves out of the centre and
     into a 375px column beside the cards — 375 + 25 + 770 across the 1170.

     Top-aligned, not centred. The cards are tall and rarely the same height as
     each other, so a vertically centred heading floats at a different point on
     every page and lines up with nothing. Against the top edge it shares a line
     with the first card's own title. */
  .pa-services--2 .pa-services__layout {
    display: grid;
    grid-template-columns: 375px 1fr;
    gap: 25px;
    align-items: start;
  }

  .pa-services--2 .pa-section__title {
    text-align: left;
    max-width: none;
    margin: 0;
  }

  /* Wider than the 30px the design puts between three cards, so the space
     between the two cards reads as the same interval as the space between the
     heading and the first card. The structural gap there is 25px, but the
     heading is ragged and rarely fills its 375px column, so what the eye
     measures is the distance from the last glyph — about 47px on the longest
     of these headings. Two blocks only; the three-card row keeps 30px, where
     the heading sits above the row and there is no such comparison to make. */
  .pa-services--2 .pa-services__grid { column-gap: 48px; }
}

/* --------------------------------------------- split: compliance / about - */

.pa-split__inner { display: grid; gap: 32px; }

/* Hidden on phones. Stacked, the photo becomes a 350px-tall block sitting
   between two runs of copy, and it carries nothing the copy does not say. */
.pa-split__media { order: 2; display: none; }
.pa-split__copy  { order: 1; display: flex; flex-direction: column; gap: 24px; }

.pa-split__image { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* Compliance body is 18 / 400 / lh 26 in the design. */
.pa-split__text p {
  font-size: 18px;
  line-height: 26px;
  color: var(--pa-blue);
  margin: 0 0 16px;
}

.pa-split__text p:last-child { margin-bottom: 0; }
.pa-split .pa-section__title { text-align: left; max-width: none; margin: 0; }

/* 1024, not 768. The design's 570/98/502 split assumes the 1170 container; at
   768 the same ratio leaves the copy a 268px column with a 98px gutter beside
   it, so the heading breaks over four lines against a photo twice its width.
   Stacked — the phone treatment — is better until there is room for both. */
@media (min-width: 1024px) {
  /* Frame 9 and Frame 75: the photo is 570 wide and the copy 502, not an even
     split, and the photo runs the full height of the section rather than
     sitting at a fixed aspect ratio. 570 + 98 + 502 fills the 1170 container.
     The copy centres against it. */
  /* Centre, not stretch. Stretch made the photo as tall as whatever the copy
     ran to — 876px on Behavioral Health against the design's 549 — and a
     2000x1125 photograph in a 570x876 box keeps only the middle 37% of its
     width, which is how a counselling session became a cushion and a hand.
     The aspect-ratio below is what makes the photo the deliberate block the
     1280 rule already claimed it was. */
  .pa-split__inner {
    grid-template-columns: minmax(0, 570fr) minmax(0, 502fr);
    align-items: start;
    gap: 98px;
  }
  /* Frame 9: 570 x 549. Its height comes from its own width now, so it is the
     same crop on every page whatever the copy does. */
  .pa-split__media { order: 1; position: relative; display: block; aspect-ratio: 570 / 549; }
  .pa-split__copy  { order: 2; }
  .pa-split--reverse .pa-split__inner {
    grid-template-columns: minmax(0, 502fr) minmax(0, 570fr);
  }
  .pa-split--reverse .pa-split__media { order: 2; }
  .pa-split--reverse .pa-split__copy  { order: 1; }

  /* Out of flow so it fills its container. Left in flow its own intrinsic
     height sets the row, which stretched both split sections to 1600px — the
     aspect-ratio on the container above is what gives it something definite to
     fill without letting the copy decide the height.
     Selected via the parent because the shared `.pa-split img { height: auto }`
     reset is (0,1,1) and beats a bare `.pa-split__image`. */
  .pa-split__media .pa-split__image {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }
}

@media (min-width: 1280px) {
  /* Frame 9 is 549 tall and Frame 75 is 550: the photo is a deliberate block,
     not something sized by however long the copy beside it happens to run. */
  .pa-split__inner { min-height: 550px; }
}

/* ---------------------------------------------------------- testimonials - */

/* Frame 14: the sub-line sits 20px under the heading, and the quote grid 50px
   under that. Tightening the heading's own margin is what makes the pair read
   as one block rather than three evenly spaced lines. */
.pa-testimonials:has(.pa-testimonials__sub) .pa-section__title { margin-bottom: 20px; }

.pa-testimonials__sub {
  text-align: center;
  font-size: 1rem;
  line-height: 23px;
  color: var(--pa-blue);
  margin: 0 0 40px;
}

@media (min-width: 1280px) {
  .pa-testimonials__sub { margin-bottom: 50px; }
}

.pa-testimonials__grid { display: grid; gap: 40px; }

.pa-testimonial { margin: 0; text-align: center; position: relative; }

/* Group 14: five 23x22 stars 3.6px apart, 20px above the quote. */
.pa-stars { display: inline-flex; gap: 3.6px; margin-bottom: 20px; }

.pa-star {
  width: 23px;
  height: 22px;
  background: var(--pa-orange);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* 12 / 400 in the design. That works in a 526px column on a desktop comp and
   is unreadable on a phone, where it lands well under everything around it —
   so the design value applies from the two-column breakpoint up, and small
   screens get 15px. There is no mobile comp for this section to defer to. */
.pa-testimonial__quote,
.pa-testimonial__author {
  font-size: 15px;
  line-height: 21px;
}

/* 1280, not 768. The 12px is only legible because the design gives it a 526px
   column, and that column does not exist until 1280 — at 768 the two-up grid
   is about 314px wide, where 12px reads as fine print against 15px copy in
   every other section. */
@media (min-width: 1280px) {
  .pa-testimonial__quote,
  .pa-testimonial__author {
    font-size: 12px;
    line-height: 17px;
  }
}

.pa-testimonial__quote {
  /* The theme italicises blockquote; none of the design's quotes are italic. */
  font-style: normal;
  font-weight: 400;
  color: var(--pa-blue);
  margin: 0 0 14px;
  quotes: none;
}

.pa-testimonial__author {
  /* Size and line-height come from the shared rule above so the responsive
     step applies to the byline too. */
  font-weight: 700;
  /* As with the quote: the theme italicises figcaption, the design does not. */
  font-style: normal;
  color: var(--pa-blue);
}

@media (min-width: 768px) {
  .pa-testimonials__grid { grid-template-columns: repeat(2, 1fr); gap: 48px 60px; }
}

@media (min-width: 1280px) {
  /* Frame 15/16: two 526px quotes with 91px between them, rows 50px apart —
     narrower than half the container, which is what keeps the quotes from
     running the full width. */
  .pa-testimonials__grid {
    grid-template-columns: repeat(2, 526px);
    /* start, not center: the pair is left-aligned in the 1170 container in the
       design (375 and 992), leaving the slack on the right. */
    justify-content: start;
    gap: 50px 91px;
  }

  /* A 1px rule down the middle of the gap, matching the design's ::after
     rectangle. Drawn on the right-hand quote so it never trails a lone one on
     an odd-numbered final row. */
  .pa-testimonial:nth-child(even)::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 4px;
    left: -46px;
    width: 1px;
    background: var(--pa-blue);
  }
}

/* -------------------------------------------------------------- CTA band - */

/* Rectangle 21: the photo, full-bleed, 433px tall, radius 300px 0 0 0.
   Rectangle 23: the orange panel, 875 wide, radius 0 0 300px 0, sitting on it.
   Below 768px the photo is dropped entirely — Frame 63, the one mobile
   artboard in the file, shows the orange panel alone. */
/* The second CTA is the last thing on the page, and in the design it butts
   straight onto the footer: Frame 161's bottom is y=9680 and footer.footer
   starts at y=9678. The margin below is only ever there to separate the band
   from a following section, and the last one has none — leaving it produced a
   strip of page background between the photo and the dark footer. */
.pa-cta:last-child { margin-bottom: 0; }

.pa-cta {
  position: relative;
  display: grid;
  /* Full-bleed. The theme applies a 20px side padding to sections, which was
     taking 40px out of the grid's available width and leaving the orange
     panel 18px narrower than the design's 875. */
  padding: 0;
  min-height: 320px;
  margin: 48px 0;
}

.pa-cta__panel {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  background: var(--pa-orange);
  border-radius: 0 0 150px 0;
  padding: 56px 20px;
}

.pa-cta__panel-inner {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  max-width: var(--pa-wide);
  margin: 0 auto;
}

.pa-cta__heading {
  font-size: clamp(1.75rem, 1.05rem + 2.9vw, 3.125rem);
  font-weight: 500;
  line-height: 1.1;
  color: #fff;
  margin: 0;
}

.pa-cta__media { display: none; }

@media (min-width: 768px) {
  .pa-cta {
    grid-template-columns: minmax(0, 875fr) minmax(0, 1045fr);
    /* Fixed, not min: the photo spans the full width, so its natural aspect
       would otherwise drive the row to 840px against a spec of 436. */
    height: 436px;
    /* No margin override: the band's neighbours dropped their 70px tablet
       padding, so a 70px margin here would leave the CTA the one section still
       sitting in a 118px gap. The base 48px matches them. */
  }

  .pa-cta__media img { height: 100%; object-fit: cover; }

  /* Both children occupy row 1 so the orange panel sits ON the photo.
     Without an explicit grid-row the panel is auto-placed into row 2 and the
     band renders as a 900px stack instead of a 433px overlay. */
  .pa-cta__media { grid-column: 1 / -1; grid-row: 1; }

  .pa-cta__panel {
    grid-column: 1;
    grid-row: 1;
    border-radius: 0 0 300px 0;
    padding: 60px 40px;
  }

  .pa-cta__panel-inner {
    /* 414 is the heading's own box. The offset from the panel's right edge is
       margin, not padding — padding was subtracting from the 414. */
    max-width: 414px;
    margin: 0 60px 0 auto;
  }

  .pa-cta__media {
    display: block;
    border-radius: 300px 0 0 0;
    overflow: hidden;
  }

  .pa-cta__image { width: 100%; height: 100%; object-fit: cover; }
}

@media (min-width: 1280px) {
  /* Half the rhythm, not all of it. Every neighbouring section already
     contributes 50px of its own padding, so a full 100px margin here produced
     a 150px gap above and below both CTA bands against the design's 100. */
  .pa-cta { margin: calc(var(--pa-rhythm) / 2) 0; grid-template-columns: minmax(0, 1fr); }

  /* The panel bleeds to the left edge of the window and stops 500px inside the
     1170 container — 875 at the design width. Anchored to the container, not
     to a share of the viewport: as a proportional grid column it reached
     1087px on a 2385px window, the same unbounded-growth bug the hero photo
     had. 50% here is 50% of the section, which excludes the scrollbar. */
  .pa-cta__panel {
    justify-self: start;
    width: calc(50% + 500px - (var(--pa-wide) / 2));
  }

  /* The heading's left edge has to land on the page's left margin (381 against
     a 375 container) — that is what ties the band to the rest of the page.
     The panel's 40px padding already supplies half the 80px inset, so this is
     40, not 80. */
  .pa-cta__panel-inner { margin-right: 40px; }
}

/* --------------------------------------------------------- category tiles - */

/* Frame 119: a 372x186 pair — a 186px orange label square beside a 186px
   photo square whose top-right corner is cut 100px. Three pairs per row,
   30px apart. */
/* One column on phones, not two.

   The label cannot get smaller: 24px is what puts white on #ffab00 (2.1:1) over
   WCAG's 3:1 large-text bar instead of under the 4.5:1 normal-text one, which
   was confirmed with the client. So the label needs width instead. Two columns
   leave it a 129px box at 390 and 114px at 360, while 34 of the 68 category
   names contain a single word that sets wider than that — "Semiconductor" alone
   is 180px. Two-up could only render those by breaking mid-word.

   One column gives the label the full 310px and every name fits on one line.
   Two columns come back at 560, the width where the box (214px) finally clears
   the longest word.

   minmax(0, …) throughout: a grid item's automatic minimum size is its content,
   so a bare 1fr lets an unbreakable label widen its own track — which is what
   pushed a tile 31px past the grid and had `overflow: hidden` slice the word. */
.pa-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

@media (min-width: 560px) {
  .pa-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pa-tile {
  display: grid;
  /* Also minmax(0, …): the tile is a grid in its own right, so capping only the
     outer .pa-tiles track leaves the body free to overflow the tile instead. */
  grid-template-columns: minmax(0, 1fr);
  text-decoration: none;
  overflow: hidden;
}

.pa-tile:hover { text-decoration: none; }

.pa-tile__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 15px;
  padding: 20px;
  /* 140 is a shape for a squarish two-up tile. One column, it is a full-width
     band holding one line and a chevron, and the forced height reads as a hole
     in the page — so let it size to content until the grid goes two-up. */
  min-height: 0;
  background: var(--pa-orange);
}

@media (min-width: 560px) {
  .pa-tile__body { min-height: 140px; }
}

.pa-tile:first-child .pa-tile__body { background: var(--pa-blue); }

/* 23px in the design. Raised to 24px so white on #ffab00 (about 2.1:1) clears
   the 3:1 large-text bar instead of failing the 4.5:1 normal-text one.
   Confirmed with the client 2026-08-06. */
.pa-tile__label {
  font-size: 24px;
  font-weight: 500;
  line-height: 25px;
  color: #fff;
}

/* The chevron is a square rotated 45 degrees, so it paints outside its own
   layout box: a side-s square turned 45 degrees has a bounding box of s x root
   2, which overhangs by s(root 2 - 1)/2 on every side — 5.8px at 28. Transforms
   do not affect layout, so the box stayed on the tile's 12px padding while the
   point of the V sat 5.8px to the left of it, under a label that did not move.
   Measured, not guessed: label left 387, arrow left 381.2.

   The margin puts the layout box back by exactly that overhang, which lands the
   V's left point on the label's left edge. Written off the size rather than as
   a bare 5.8px so that changing the arrow does not silently break the
   alignment again. */
.pa-tile__arrow {
  --pa-arrow-size: 28px;
  width: var(--pa-arrow-size);
  height: var(--pa-arrow-size);
  /* (sqrt(2) - 1) / 2 */
  margin-left: calc(var(--pa-arrow-size) * 0.20711);
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  flex: 0 0 auto;
}

.pa-tile__media { display: none; }

@media (min-width: 1024px) {
  .pa-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
}

/* The photo only appears at 1280, not 768.

   The design pairs a 186px label square with a 186px photo square, so the tile
   it was drawn for is 372px wide — which only exists once the container hits
   its 1170 max and each of three tiles is 370. Starting the pair at 768 put a
   186px square into a 104px grid track: the body kept its width, overran the
   track by 81px, and the photo painted straight over the label, which is why
   "Nurse Practitioner" ended mid-word underneath the picture.

   Below 1280 the tile is the label alone at full width, the same treatment as
   the phone, and the label gets room instead of being covered. */
@media (min-width: 1280px) {
  /* 216/154, not the design's twin 186px squares.
   *
   * The comp was drawn against v4 category names; v5's are longer. Twin squares
   * leave the label a 146px box, and 14 of the 68 names hold a single word
   * wider than that — "Semiconductor" is 180.1px, "Manufacturing" 178.9 and
   * "Transportation" 178.8, measured in the page at 24px/500. Fitting 180 inside
   * a 186px square would need 3px of padding, so the square cannot hold them.
   *
   * The label also cannot shrink: 24px is what puts white on #ffab00 (2.1:1)
   * over WCAG's 3:1 large-text bar. So the box gets the width instead — 216,
   * which at 20 and 12 of padding leaves the label 184px of content and clears
   * "Semiconductor" by 3.9px. The photo keeps 154 of the 370px tile.
   *
   * The left padding is 20 rather than 12 because that is what Frame 97 draws
   * (`paddingLeft: 20`, label at x=5268 in a body at 5248) and because 20 is
   * what every width below 1280 already used — the label used to jump 8px left
   * at the widest breakpoint alone. Moved on Zack's instruction 2026-08-27; the
   * track grew by the same 8 so the longest name kept its clearance rather than
   * paying for the indent.
   *
   * The two sides are deliberately unequal. The right edge is a hard boundary
   * against the photograph, not whitespace the eye measures against anything,
   * so widening it would cost the picture 8px for nothing.
   *
   * This is a deliberate, revertible deviation from the comp — the alternative
   * was 14 tiles breaking a word mid-syllable. Restoring the twin squares is
   * one line here, and the right call if the client would rather shorten those
   * 14 names. */
  .pa-tile { grid-template-columns: minmax(0, 216px) minmax(0, 1fr); }

  /* No aspect-ratio: with min-height it would force the body back to 186 wide
     and overrun its 216px track. min-height alone sets the row. */
  .pa-tile__body { min-height: 186px; padding: 20px 12px 20px 20px; }

  /* Backstop only — nothing reaches it at the current names. Kept so a longer
     name added later breaks visibly instead of being cut off by
     `overflow: hidden`. */
  .pa-tile__label { overflow-wrap: break-word; }

  /* overflow:hidden is what keeps the hover scale inside the cut corner. The
     cut scales with the photo: 100px on the design's 186 is 83 on 154. */
  .pa-tile__media {
    display: block;
    overflow: hidden;
    border-radius: 0 83px 0 0;
    position: relative;
  }

  /* Taken out of flow, the same pattern as .pa-split__media. The photo used to
     be bounded by `aspect-ratio: 1`; without it, `height: 100%` had no definite
     height to resolve against — the media box is sized by the row and the row
     by its contents — and the circular reference resolved to 1500px, making
     every tile 1500 tall. Absolute against a stretched grid item has a definite
     box to fill, so the row goes back to being set by the body's min-height.

     Selected via the parent, exactly as .pa-split__media .pa-split__image is
     and for the same reason: the shared `.pa-tile img { height: auto }` reset
     is (0,1,1) and beats a bare `.pa-tile__image` (0,1,0). With that reset
     winning, the absolutely positioned photo took its intrinsic height instead
     of filling the box — the tile measured a correct 186 while the image inside
     it was still 1500 and merely hidden by `overflow: hidden`. */
  .pa-tile__media .pa-tile__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
}

/* ---------------------------------------------------------------- roles - */

/* Frame 44: three 369px columns 30px apart, each padding 0 30px. Every row is
   60px tall — padding 17px 0 on 26px line-height — with a 1px rule under it. */
/* Stacked, the three lists are one list — the card belongs to the whole block,
   not to each column. Three separate cards with three corner cuts and a gap
   between them reads as three unrelated things, when the split into columns is
   only ever a way of using the width. */
.pa-roles {
  display: grid;
  gap: 0;
  padding: 20px 0;
  background: #fff;
  border-radius: 0 0 100px 0;
}

.pa-roles__col {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Frame 32: a 56px row — 26px of content with 15px above and below — inset
   30px from the left and 20px from the right. */
.pa-roles__item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 20px 15px 30px;
}

.pa-roles__tick {
  flex: none;
  width: 26px;
  height: 26px;
  color: var(--pa-orange);
}

.pa-roles__label {
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  color: var(--pa-blue);
}

@media (min-width: 768px) {
  /* Side by side, the card moves back onto each column — Frame 43: white,
     20px of padding top and bottom, corner cut out of the bottom right. */
  .pa-roles {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 0;
    background: none;
    border-radius: 0;
  }

  /* Each card ends where its own list ends. The design's three columns hold
     4 / 4 / 3 roles and so happen to be the same height, but a page with an
     uneven split stretches the short column into a panel of empty white. */
  .pa-roles__col {
    align-self: start;
    padding: 20px 0;
    background: #fff;
    border-radius: 0 0 100px 0;
  }
}

/* ---------------------------------------------------- completed searches - */

.pa-searches { display: grid; gap: 20px; }

.pa-search-card {
  position: relative;
  background: var(--pa-blue);
  color: #fff;
  /* Figma: title sits 100px below the card top and 70px in from its left,
     which is what clears the 93px-tall motif. My 70/44 put the first letter
     underneath it. */
  /* The corner cut is a real bite out of the card, so `overflow: hidden` clips
     any text that runs into it. One column, the design's 200px radius eats the
     bottom-right corner in to x=150 of a 350px card, and at 40px of bottom
     padding the last few lines were sliced off mid-word.

     The copy has to end before the curve starts. With a text edge at x=320 and
     the last line P above the card bottom, the card's own right edge at that
     height is (W - R) + sqrt(R² - (R - P)²) — so R=120 with P=64 puts the edge
     at 336px and clears the text by 16px. Both values go back to the design's
     at 768 up, where two columns are wide enough that 200/70 already clears. */
  padding: 100px 30px 64px;
  overflow: hidden;
  border-radius: 0 0 120px 0;
}

/* The brand motif, exported from the design as SVG and inlined — my earlier
   radial-gradient was an approximation of the wrong shape. These are
   quarter-circles, not dots. */
.pa-search-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 61px;
  height: 93px;
  background: url('../images/motif-card.svg') no-repeat top left / contain;
}

.pa-search-card__title {
  font-size: 25px;
  font-weight: 700;
  line-height: 36px;
  color: #fff;
  margin: 0 0 12px;
}

.pa-search-card__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 23px;
  color: #fff;
  margin: 0;
}

@media (min-width: 768px) {
  .pa-searches { grid-template-columns: repeat(2, 1fr); gap: 30px; }

  .pa-search-card { padding: 100px 70px 70px; }

  /* Each card's cut faces the page centre; the dot block sits in the opposite
     outer corner. Neutralised above, at one column, where there is no centre
     for it to face. */
  /* 200px in the design, mirrored so each cut faces the page centre. */
  .pa-searches .pa-search-card:nth-child(odd)  { border-radius: 0 0 200px 0; }
  .pa-searches .pa-search-card:nth-child(even) { border-radius: 0 0 0 200px; }

  /* The motif mirrors with the cut: left card top-left, right card top-right. */
  .pa-searches .pa-search-card:nth-child(even)::before {
    left: auto;
    right: 0;
    transform: scaleX(-1);
  }
}

/* ------------------------------------------------------------------ FAQ - */

/* Frame 28 carries border-radius: 1500px 1500px 0 0 — a very shallow arch
   across the full width, which is what visually closes the page before the
   final CTA. It only reads as an arch when it is wider than it is tall, so it
   is applied from 1024 up. */
.pa-faq-section { background: var(--pa-beige); }

@media (min-width: 1024px) {
  .pa-faq-section {
    border-radius: 1500px 1500px 0 0;
    /* Frame 28 has no top padding: the heading sits on the apex of the arch,
       and the 100px rhythm above it comes half from the previous section's
       bottom padding and half from this margin. */
    padding-top: 0;
    margin-top: calc(var(--pa-rhythm) / 2);
  }
}

.pa-faq-cols { display: grid; gap: 40px; }

.pa-faq-col__label {
  font-size: 16px;
  font-weight: 800;
  line-height: 23px;
  color: var(--pa-orange);
  margin: 0 0 20px;
}

/* Frame 18/19: one white 12px-radius card per question, 20px padding all
   round, holding the question row and — when open — the answer below it. A
   closed card is 20 + 24 + 20 = 64px tall. Cards are 10px apart.
   The card is the item rather than the button so that an open question and
   its answer read as a single surface instead of two stacked ones. */
.pa-faq-item {
  background: #fff;
  border-radius: 12px;
}

.pa-faq-item + .pa-faq-item { margin-top: 10px; }
.pa-faq-item__heading { margin: 0; }

.pa-faq__toggle {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: transparent;
  border: 0;
  border-radius: inherit;
  padding: 20px;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
  color: var(--pa-blue);
  text-align: left;
  cursor: pointer;
}

/* Rectangle 11: a 24px rounded square, not a grey circle — and it is two-tone
   by column, mint for employers and lavender for job seekers. */
.pa-faq__glyph {
  position: relative;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--pa-mint);
}

.pa-faq-col--seek .pa-faq__glyph { background: var(--pa-lilac); }

.pa-faq__glyph::before,
.pa-faq__glyph::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 2px;
  background: var(--pa-blue);
  transform: translate(-50%, -50%);
}

.pa-faq__glyph::after { transform: translate(-50%, -50%) rotate(90deg); }
.pa-faq__toggle[aria-expanded="true"] .pa-faq__glyph::after { display: none; }

/* No background of its own — it sits inside the item's card. The 20px gap
   below the question is the toggle's own bottom padding. */
.pa-faq__panel { padding: 0 20px 20px; }

.pa-faq__answer p {
  font-size: 14px;
  line-height: 20px;
  color: var(--pa-blue);
  margin: 0 0 12px;
}

.pa-faq__answer p:last-child { margin-bottom: 0; }

@media (min-width: 768px) {
  /* start, not stretch: the design's two columns have different numbers of
     questions and do not run to a matched height. */
  .pa-faq-cols { grid-template-columns: repeat(2, 1fr); gap: 30px; align-items: start; }
}

/* ----------------------------------------------------------------- jobs - */

.pa-jobs__head { display: grid; gap: 16px; margin-bottom: 24px; }
.pa-jobs__list { list-style: none; margin: 0; padding: 0; }

.pa-jobs__row {
  display: grid;
  gap: 8px;
  padding: 20px 0;
  border-bottom: 1px solid var(--pa-blue);
}

.pa-jobs__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  color: var(--pa-blue);
  text-decoration: none;
}

.pa-jobs__location { font-size: 14px; font-weight: 300; color: var(--pa-blue); }

.pa-jobs__apply {
  justify-self: start;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.24px;
  color: var(--pa-orange);
  text-decoration: none;
}

.pa-jobs__all { justify-self: start; }

@media (min-width: 768px) {
  .pa-jobs__head { grid-template-columns: 1fr auto; align-items: center; }
  .pa-jobs__all { justify-self: end; }
  .pa-jobs__row { grid-template-columns: 1fr 180px 120px; align-items: center; gap: 24px; }
  .pa-jobs__apply { justify-self: end; }
}

/* ---------------------------------------------------------------- hover - */

/*
 * The design specifies no hover states — no component variants, no prototype
 * interactions — so these follow the convention the theme already uses:
 * links go orange, buttons invert to the other brand colour.
 *
 * All of it sits behind `hover: hover` so a touch device never latches a
 * hover state after a tap, and nothing here moves layout: only colour,
 * transform and shadow, so hovering a tile cannot reflow the grid.
 *
 * Buttons swap colour rather than fading opacity. A fade lowers contrast
 * exactly when the user is about to act, and every swap below lands on a pair
 * that passes AA:
 *   white on blue    11.56:1
 *   blue on orange    6.10:1
 *   blue on white    11.56:1
 */

@media (hover: hover) and (pointer: fine) {

  /* Buttons ---------------------------------------------------------- */
  .pa-btn--orange:hover,
  .pa-btn--orange:focus-visible {
    background: var(--pa-blue);
    color: #fff;
  }

  /* Not white-on-orange, which is 1.9:1. Blue on orange is 6.1:1. */
  .pa-btn--blue:hover,
  .pa-btn--blue:focus-visible {
    background: var(--pa-orange);
    color: var(--pa-blue);
  }

  /* Except inside the CTA band, where the panel is that same orange — so
     "Search jobs" swapped to exactly its own background and disappeared. It
     goes white there instead, which is the mirror of what "Hire talent" beside
     it already does, and stays legible on orange at 11.56:1. */
  .pa-cta__panel .pa-btn--blue:hover,
  .pa-cta__panel .pa-btn--blue:focus-visible {
    background: #fff;
    color: var(--pa-blue);
  }

  .pa-btn--white:hover,
  .pa-btn--white:focus-visible {
    background: var(--pa-blue);
    color: #fff;
  }

  .pa-btn:active { transform: translateY(1px); }

  /* Category tiles --------------------------------------------------- */
  /* The whole tile is one link, so the whole tile responds: the photo
     pushes in slightly, the arrow travels the way it points, and the
     colour block deepens. */
  .pa-tile__image {
    transition: transform 0.35s cubic-bezier(0.2, 0.6, 0.2, 1);
  }

  .pa-tile:hover .pa-tile__image,
  .pa-tile:focus-visible .pa-tile__image {
    transform: scale(1.05);
  }

  .pa-tile__body { transition: background-color 0.2s ease; }
  .pa-tile:hover .pa-tile__body { background: #f0a000; }
  .pa-tile:first-child:hover .pa-tile__body { background: #162c33; }

  .pa-tile__arrow { transition: transform 0.25s ease; }
  .pa-tile:hover .pa-tile__arrow,
  .pa-tile:focus-visible .pa-tile__arrow {
    /* The chevron already points down-right; move it that way. */
    transform: rotate(45deg) translate(4px, 4px);
  }

  /* FAQ -------------------------------------------------------------- */
  /* The whole card tints, not just the button, now that the card is the item
     and the button inside it is transparent. */
  .pa-faq-item { transition: background-color 0.15s ease; }
  .pa-faq-item:has(.pa-faq__toggle:hover) { background: #fffdf8; }
  .pa-faq__glyph { transition: background-color 0.15s ease; }
  .pa-faq__toggle:hover .pa-faq__glyph { background: var(--pa-orange); }
  .pa-faq__toggle:hover .pa-faq__glyph::before,
  .pa-faq__toggle:hover .pa-faq__glyph::after { background: #fff; }

  /* Service cards ---------------------------------------------------- */
  /* The arrow travels the way it points, and the label picks up the
     underline it does not carry at rest. */
  .pa-services__arrow { transition: transform 0.25s ease; }
  .pa-services__link:hover .pa-services__arrow,
  .pa-services__link:focus-visible .pa-services__arrow {
    transform: translateX(4px);
  }

  .pa-services__link:hover .pa-services__link-label {
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  /* Body-copy links --------------------------------------------------- */
  .pa-intro__body a:hover,
  .pa-split__text a:hover,
  .pa-services__body a:hover,
  .pa-partner__body a:hover {
    color: var(--pa-orange);
    text-decoration-thickness: 2px;
  }

  /* Show more -------------------------------------------------------- */
  .pa-showmore { transition: color 0.15s ease; }
  .pa-showmore:hover { color: var(--pa-orange); text-decoration-thickness: 2px; }

  /* Jobs ------------------------------------------------------------- */
  .pa-jobs__title { transition: color 0.15s ease; }
  .pa-jobs__title:hover { color: var(--pa-orange); text-decoration: underline; }
  .pa-jobs__apply { transition: color 0.15s ease; }
  .pa-jobs__apply:hover { color: var(--pa-blue); text-decoration: underline; }
  .pa-jobs__row { transition: background-color 0.15s ease; }
  .pa-jobs__row:hover { background: rgba(31, 61, 71, 0.03); }
}

/* ------------------------------------------------------- reduced motion - */

@media (prefers-reduced-motion: reduce) {
  /* Colour still changes — that is the affordance — but nothing moves. */
  .pa-btn,
  .pa-tile__image,
  .pa-tile__body,
  .pa-tile__arrow,
  .pa-faq__toggle,
  .pa-faq__glyph,
  .pa-showmore,
  .pa-jobs__title,
  .pa-jobs__apply,
  .pa-jobs__row,
  .pa-services__arrow,
  .pa-intro__body a,
  .pa-split__text a,
  .pa-services__body a,
  .pa-partner__body a {
    transition: none;
  }

  .pa-tile:hover .pa-tile__image,
  .pa-tile:hover .pa-tile__arrow,
  .pa-services__link:hover .pa-services__arrow,
  .pa-btn:active {
    transform: none;
  }
}

/* ------------------------------------------------------ partner handoff - */

/* Digital Infrastructure only. The section is the page, so it is centred and
   set in the intro's measure rather than the full 1170 — 958px is the same
   column the intro uses, and it keeps the two paragraphs at a readable line
   length instead of running them edge to edge.

   Type sizes match .pa-intro__body deliberately. This is the page's body
   copy; there is no other. */

.pa-partner__body p,
.pa-partner__lead {
  font-size: clamp(1rem, 0.9rem + 0.55vw, 1.5rem);
  line-height: 1.46;
  color: var(--pa-blue);
  margin: 0 0 20px;
}

.pa-partner__lead {
  margin: 32px 0 0;
  text-align: center;
}

.pa-partner__body p:last-of-type { margin-bottom: 0; }

/* The paragraph under the mark. It needs the mark's own bottom margin, which
   the logo link does not carry — the link's 12px padding is a hit target, not
   spacing. */
.pa-partner__body--after { margin-top: 24px; }

/* The logo is the page's only call to action, so it is given the room a
   button would get. 44px is the minimum target; the mark's own height at
   these widths clears it, and the padding guarantees it if the client ever
   swaps in a squatter file. */
.pa-partner__link {
  display: block;
  width: fit-content;
  margin: 24px auto 0;
  padding: 12px;
  min-height: 44px;
  border-radius: 4px;
  transition: opacity 0.2s ease;
}

.pa-partner__link:hover { opacity: 0.75; }

.pa-partner__logo {
  display: block;
  width: 240px;
  max-width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .pa-partner__logo { width: 300px; }
}

/* The labelled button under the mark. The mark says which brand; this says
   what happens when you click it. Same destination, so the two read as one
   call to action rather than a choice. */
.pa-partner__cta {
  margin: 20px 0 0;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .pa-partner__link { transition: none; }
}

/* -------------------------------------------------------- visually hidden - */

/* The theme declares .screen-reader-text with an empty rule block, so anything
   using it stays on screen. This is the working one. */
.pa-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- extra - */

/* A prose block under a heading of its own, between the services and
   Compliance. It borrows the intro's type rather than inventing any: the
   client asked for prose rather than a designed component, and body copy that
   set itself apart from the body copy above it would read as the component he
   did not want. The heading is left-aligned because it is a section of the
   page's argument rather than a band title over centred content. */
.pa-extra .pa-section__title {
  text-align: left;
  max-width: none;
  margin: 0 0 24px;
  font-size: clamp(1.5rem, 1.05rem + 1.6vw, 2.25rem);
}

.pa-extra__body p {
  font-size: clamp(1rem, 0.9rem + 0.55vw, 1.5rem);
  line-height: 1.46;
  color: var(--pa-blue);
  margin: 0 0 20px;
}

.pa-extra__body p:last-of-type { margin-bottom: 0; }

/* --------------------------------------------------- credential card - */

/* Directly under the heading: the heading asks why you should trust Equiliem
   with these roles and this answers it, before the body copy elaborates. It
   used to sit after the copy, where it had nothing to attach to and read as a
   stray mark at the bottom of a long column — a rule above it grouped it no
   better, it only drew a line around the problem.

   The corner-cut is the services cards' shape (0 20px 20px 20px), so the card
   reads as part of this design rather than a new object introduced for one
   credential. */
.pa-credential {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border-radius: 0 20px 20px 20px;
  padding: 16px 22px 16px 18px;
  align-self: start;
}

.pa-credential__mark {
  display: block;
  width: 64px;
  height: auto;
  flex: none;
}

.pa-credential__label {
  margin: 0;
  font-size: 15px;
  line-height: 20px;
  color: var(--pa-blue);
}

.pa-credential__label strong { display: block; font-weight: 600; }
.pa-credential__label span   { opacity: 0.72; }

@media (min-width: 992px) {
  .pa-credential__mark { width: 72px; }
  .pa-credential__label { font-size: 16px; line-height: 22px; }
}

/* ------------------------------------------------------------------ team - */

/* 40/60 rather than the 32/50 every other section's heading takes. Circular
   portraits have no bounding box, so the same gap reads tighter here than it
   does under a heading sitting above a card or a block of text. */
.pa-team-section .pa-section__title { margin-bottom: 40px; }

@media (min-width: 1280px) {
  .pa-team-section .pa-section__title { margin-bottom: 60px; }
}

/* "Meet the {area} staffing team". Approved 2026-08-25.

   The rows are elements, not wrapping. At most four to a row and the rows
   balanced against each other — 5 is 3+2, 7 is 4+3 — which wrapping cannot
   produce: it fills each row to capacity and makes 5 into 4+1, leaving one
   portrait alone under a row of four. th_pa_team_rows() decides the split and
   the template emits a .pa-team__row for each.

   Below 1024 those rows go display:contents and their people flow back into
   one wrapping list, so a phone gets an even two-up and a tablet a three-up
   rather than a desktop split crushed into half the width. */

.pa-team {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 34px 24px;
}

.pa-team__row { display: contents; }

.pa-team__m {
  flex: 0 0 calc(50% - 12px);
  max-width: 200px;
  text-align: center;
}

/* The white ring, then a hairline of the page's blue at 14%. Two shadows
   rather than a border: a border would sit inside the circle and eat 5px of
   the photograph. */
.pa-team__ring {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(31, 61, 71, 0.14);
}

.pa-team__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pa-team__name {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--pa-blue);
  margin: 18px 0 0;
  text-wrap: balance;
}

.pa-team__title {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(31, 61, 71, 0.72);
  margin: 4px 0 0;
  text-wrap: balance;
}

@media (min-width: 600px) {
  .pa-team { gap: 34px 40px; }
  .pa-team__m { flex: 0 0 calc(33.333% - 27px); }
}

@media (min-width: 1024px) {
  /* align-items, not justify-content: the wrapper is a column at this width,
     so it is align-items that centres each row across the page. */
  .pa-team {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 40px;
  }

  .pa-team__row { display: flex; justify-content: center; gap: 40px; }
  .pa-team__m { flex: 0 0 200px; }
}

/* ---------------------------------------------------------------------------
   "Related Practice Areas" — the tile strip at the foot of a blog post.

   The tiles and their grid are the hub pages', untouched. The only thing that
   needed solving was width. A blog post's body column is 618px, and three tiles
   across that would be 196px each — the tile is drawn at ~370 and splits
   `216px body + 1fr media`, so at 196 the body eats everything and the
   photograph disappears.

   The strip therefore spans the whole article area rather than the text column.
   The theme wraps the post and its sidebar in .inner-article__content-wrapper:
   max-width 1150px, padding 40px, so its content box is 1070px, and the post
   body already begins at that box's left edge. Widening the section to the box
   width — and no repositioning, because the left edge is already right — puts
   the strip across post and sidebar together.

   Expressed against the wrapper's own numbers rather than the sidebar's, so a
   sidebar that changes width does not move this. It does depend on that
   wrapper staying 1150/40; if the blog layout is ever reworked, this is the
   line to revisit. `main.blog-article-page` carries overflow-x: hidden, which
   is the backstop if it is ever wrong.

   Two earlier attempts are worth not repeating. Stacking the tiles one per row
   fixed the starved photograph by abandoning the three-column design. A
   viewport full-bleed (`margin-inline: calc(50% - 50vw)`) assumes the parent is
   centred on the page; this one is not — the article sits left of a sidebar —
   so the strip slid 234px off the left edge and was clipped.
   --------------------------------------------------------------------------- */

.pa-related {
  margin: 48px 0 8px;
  padding-top: 32px;
  border-top: 1px solid #d8d8d8;
  box-sizing: border-box;
}

/* Only widen where there is something to widen into. The sidebar sits beside
   the post from 1024 up; below that the layout is a single column, the post
   body is already the full content width, and widening would leave the strip
   ending 25px short of the text above it. 1024 is also where .pa-tiles goes to
   three columns, so the two changes arrive together. */
@media (min-width: 1024px) {
  .pa-related {
    /* min() so this still holds between 1024 and the wrapper's 1150 max-width,
       where the wrapper is simply as wide as the viewport allows. */
    width: calc(min(1150px, 100vw) - 80px);
    max-width: calc(100vw - 40px);
  }
}

.pa-related__title {
  font-size: 24px;
  line-height: 1.25;
  margin: 0 0 20px;
}

/* The blog's article styles set their own colour on descendants, which turned
   the tile labels navy — invisible on the dark first tile, and readable on the
   orange ones only by accident. Restated at a specificity the article cannot
   beat. */
.pa-related .pa-tile .pa-tile__label { color: #fff; }