/*
 * Compliance Monitoring Clone — Test Page Stylesheet
 * Cloned from risk-management-test (same structure, same shared engine:
 * auto-rotating accordion, sticky+fade numbered cards, swipeable hover
 * cards, mac-frame mockup, navy Success Portfolio). Hand-coded (no
 * Elementor, no GSAP). Scoped under .aat-page to avoid bleeding into the
 * rest of the site, and to avoid site styles bleeding in.
 *
 * Content is real, extracted from /capabilities/compliance-monitoring/
 * (post 7627) via _elementor_data + live computed-style measurement — not
 * invented. Design tokens are shared with internal-auditing-test and
 * risk-management-test since all three draw on the same site-wide
 * Elementor global kit.
 *
 * MEASURED PER-PAGE DIFFERENCES FROM THE RISK-MANAGEMENT CLONE this file
 * was copied from. Every one of these was read off the LIVE page, not
 * assumed — the standing lesson from that build is that a prefix-rename
 * clone transfers *behaviour* correctly but every hardcoded *value* has to
 * be re-verified. Do NOT "fix" these back toward rmt-:
 *   - Overview media collage: SIX images (rmt had 4, iat 5), in a 776x484
 *     container (rmt's was 838x514).
 *   - Mac-frame mockup: FIVE panels (rmt had 3, iat 4), cluster 633x440.
 *   - Mac-frame mobile: the toolbar STAYS VISIBLE below 767px here. rmt
 *     carries hide_mobile on its .browser-top-img and therefore needed a
 *     border-top placeholder to close the card; this page must NOT have
 *     one.
 *   - Mac-frame mobile cluster GROWS 440 -> 500px. rmt shrinks 440 -> 367.
 *   - Sections 3 and 4 of the live page are a DESKTOP/TABLET vs MOBILE
 *     responsive pair, not the dead-code pair rmt had — both carry real
 *     content and neither may simply be dropped.
 *   - The SVG icon-gradient id is aatIconGradient and the CSS below
 *     references #aatIconGradient. On rmt these had drifted apart (SVG
 *     said rmt-, CSS still said #iatIconGradient from the original iat
 *     clone), silently killing the icon hover gradient on a live page.
 *     Keep the two in sync if this file is ever cloned again.
 */

body.page-id-15521 .rkch-spacer, body.page-id-8218 .rkch-spacer { display: none !important; height: 0 !important; }

.aat-page {
  --aat-primary: #233963;
  --aat-text: #1E2E4C;
  --aat-white: #FFFFFF;
  --aat-neutral-9: #F4F6F9;
  --aat-neutral-8: #EBEEF2;
  --aat-neutral-7: #DADEE3;
  --aat-neutral-6: #A5ABB3;
  --aat-green: #2ECC71;
  --aat-gradient-teal-green: linear-gradient(90deg, #6AC2B7 0%, #8AD6C0 50%, #8ADBBB 75%, #86DCAF 87.5%, #84DDA5 93.75%, #95E091 96.88%, #9FDD5F 100%);
  --aat-gradient-primary-darker: linear-gradient(90deg, #47B0A3 0%, #4FB799 30.43%, #4CC86F 77.4%, #84BA4C 100%);
  --aat-mint-gradient: linear-gradient(28deg, #E3FFCC 0%, #D0FFF1 100%);
  --aat-card-shadow: 0 10px 35px 0 rgba(35, 57, 99, 0.12);
  --aat-radius: 24px;

  position: relative;
  font-family: "Public Sans", sans-serif;
  color: var(--aat-text);
  background: #F6F9FB;
}

/* Site-wide subtle tiled background pattern, 64x64px tile at 50% opacity,
   running the full height of the page (same asset/mechanism as the
   financial-services clone — confirmed present in this page's Figma too). */
.aat-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/global-pattern.png");
  background-repeat: repeat;
  background-size: 64px 64px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.aat-page * { box-sizing: border-box; }

.aat-page img { max-width: 100%; height: auto; display: block; }

.aat-page section {
  padding: 96px 4vw;
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .aat-page section { padding: 56px 20px; }
}

.aat-inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ---------- Typography ---------- */

/* --aat-primary (#233963), NOT --aat-text (#1E2E4C). Verified by walking
   every visible heading on the live page: all 20+ on-light headings compute
   to rgb(35,57,99); only the ones on the navy bands are white. The
   risk-management clone this file came from uses --aat-text here, which is a
   different shade — exactly the "a colour that just inherits" trap that page
   already got caught by once on its challenge-card titles. */
.aat-page h1, .aat-page h2, .aat-page h3, .aat-page h4 {
  font-family: "Public Sans", sans-serif;
  color: var(--aat-primary);
  font-weight: 700;
}

.aat-page p { margin: 0; line-height: 1.55; }

.aat-page .aat-h2 {
  font-size: 42px;
  line-height: 52px;           /* live measured 52px, not 1.15 (=48px) */
  font-weight: 700;
  margin-bottom: 20px;
}

@media (max-width: 767px) {
  .aat-h2 { font-size: 28px; line-height: 1.25; }
}

/* Two-column header row used by most sections: heading left, copy right */
.aat-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
}

.aat-head-row p { color: var(--aat-text); font-size: 16px; max-width: 529px; }

@media (max-width: 900px) {
  .aat-head-row { flex-direction: column; gap: 16px; }
  .aat-head-row p { max-width: 100%; }
}

/* ---------- Buttons ---------- */

.aat-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
}

.aat-btn--outline {
  background: var(--aat-white);
  border: 2px solid var(--aat-primary);
  color: var(--aat-primary);
}

.aat-btn--outline:hover { background: var(--aat-primary); color: var(--aat-white); }

.aat-btn--small {
  padding: 8px 12px;
  font-size: 14px;
  border: 2px solid #6AC2B7;
  background: transparent;
  color: var(--aat-text);
}

/* ---------- Lead magnet CTA (.lm-cta-banner) — page-scope override ----------
   .aat-page section{padding:96px 4vw} otherwise beats the module's own
   .lm-cta-banner padding on specificity — same fix already needed on
   .eet-page and .fst-page, applied proactively here from the start.
   Not actually used on THIS page (see section-8-lead-magnet.php — no lead
   magnet exists for compliance-monitoring, so the real static banner is rendered
   directly instead of via lead_magnet_render()) — kept for parity with the
   other clone stylesheets in case a lead magnet is added here later. */
.aat-page section.lm-cta-banner {
  padding: 0 4vw;
}
@media (max-width: 900px) {
  .aat-page section.lm-cta-banner {
    padding: 56px 20px !important;
  }
}

/* ---------- "Ensure compliance at scale with confidence." statement banner ----------
   Real live section: plain mint (#D2FFEC) two-column band, heading left /
   copy right, no button. Matches the live page's own measured padding
   (55px 80px 51px desktop, backdrop-filter:blur(2px) — kept as a harmless
   progressive enhancement) and column split (~37% / ~44% of the row). */
.aat-page section.aat-statement {
  background: #D2FFEC;
  padding: 55px 80px 51px;
  backdrop-filter: blur(2px);
}
.aat-statement-grid {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}
.aat-statement-heading {
  margin: 0;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--aat-primary);
  max-width: 480px;
  flex: 0 1 auto;
}
.aat-statement-text {
  font-size: 16px;
  line-height: 1.55;
  color: var(--aat-text);
  max-width: 560px;
  flex: 0 1 auto;
}

/* Inline body link. Same mechanic as the homepage clone's .home-faq-link
   (navy, semibold, underline drawn as a background gradient so it can
   thicken on hover) — but a SOLID --aat-primary underline rather than the
   brand teal->green gradient, because the only place this link appears is on
   the mint #D2FFEC statement banner, where the gradient's light end
   (#9FDD5F) all but disappears. Don't "restore" the gradient here without
   re-checking contrast against that background. */
.aat-link {
  color: var(--aat-primary);
  font-weight: 600;
  text-decoration: none;
  padding-bottom: 1px;
  background-image: linear-gradient(var(--aat-primary), var(--aat-primary));
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 100%;
  transition: color 0.25s ease, background-size 0.25s ease;
}
.aat-link:hover,
.aat-link:focus-visible {
  color: var(--aat-text);
  background-size: 100% 3px;
}
.aat-link:focus-visible {
  outline: 2px solid var(--aat-primary);
  outline-offset: 2px;
}

/* --head: the anchor sits INSIDE an <h2>. Inherit everything typographic from
   the heading (font-size/weight/color/line-height) so the linked product name
   reads as part of the heading rather than a differently-sized run of text,
   and thin the underline proportionally — a 2px rule under 42px type reads as
   a box, not an underline. */
.aat-link--head {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  opacity: 0.98;
}
.aat-link--head:hover,
.aat-link--head:focus-visible {
  color: inherit;
  background-size: 100% 2px;
}

/* --onnavy: the navy #1E2E4C bands (sections 3 and 7). The default navy-on-
   light treatment is invisible there. .aat-portfolio-intro sets its own color
   with !important, so the color here needs it too in order to apply to the
   nested anchor. */
.aat-link--onnavy,
.aat-portfolio-intro .aat-link--onnavy {
  color: #fff !important;
  background-image: linear-gradient(#fff, #fff);
}
.aat-link--onnavy:hover,
.aat-link--onnavy:focus-visible,
.aat-portfolio-intro .aat-link--onnavy:hover {
  color: #fff !important;
}
.aat-link--onnavy:focus-visible { outline-color: #fff; }
@media (max-width: 900px) {
  .aat-page section.aat-statement { padding: 40px 20px; }
  .aat-statement-grid { flex-direction: column; align-items: flex-start; gap: 16px; }
  .aat-statement-heading { font-size: 30px; max-width: 100%; }
  .aat-statement-text { max-width: 100%; }
}

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

.aat-hero {
  position: relative;
  min-height: 100vh;
  padding: 0 4vw !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}


.aat-hero-inner { position: relative; z-index: 1; }

/* .aat-page qualifier is load-bearing: the base `.aat-page h1..h4` rule sets
   font-weight:700 at (0,1,1) and beats a bare .aat-hero-h1 (0,1,0), so the
   600 below silently computed to 700. Live is 100px/600 with a 104px
   line-height. */
.aat-page .aat-hero-h1 {
  color: #fff !important;
  font-size: 100px;
  line-height: 104px;
  font-weight: 600;
  margin: 0;
}

/* Live's own breakpoint sizes: 100px desktop / 68px tablet / 40px mobile, with
   line-height 104px desktop and 43px mobile (no tablet line-height is set on
   live, so tablet inherits 104px — reproduced faithfully).
   The .aat-page qualifier is REQUIRED on all of these: the base rule above is
   (0,2,0), so a bare `.aat-hero-h1` (0,1,0) inside a media query loses to it
   and the 100px carried straight down to mobile, overflowing a 390px viewport
   by 61px each side. Raising a base rule's specificity orphans every lower-
   specificity override of it — sweep the media queries when you do that. */
@media (max-width: 1024px) {
  .aat-page .aat-hero-h1 { font-size: 68px; }
}
@media (max-width: 767px) {
  .aat-page .aat-hero-h1 { font-size: 40px; line-height: 43px; }
}

/* ---------- Transform / Overview (accordion + collage) ---------- */

/* 24px/400 measured live — NOT the risk-management clone's 32px/700. This is
   an intro sub-headline on this page, not a section title. */
/* Live: 32px/700, line-height 41px. The compliance-monitoring clone this came
   from had 24px/400 — that page's equivalent is a sub-headline, this one is a
   section title. */
.aat-page .aat-h3 { font-size: 32px; line-height: 41px; font-weight: 700; margin-bottom: 24px; max-width: 560px; }

/* Supporting line under the (now short) section-1 headline. The heading's own
   32px bottom margin moves down here so the two read as one block. */
.aat-transform-copy .aat-h3 { margin-bottom: 14px; }
/* `.aat-page p` (0,2,0) sets margin:0 on every paragraph, so a bare
   `.aat-transform-lede` (0,1,0) loses and the gap collapses to 0 — the tag
   qualifier here is load-bearing, not noise. */
.aat-page p.aat-transform-lede {
  /* Live: 24px/400 — this paragraph is the section's lede and is deliberately
     larger than ordinary body copy. */
  font-size: 24px;
  line-height: 1.45;
  color: var(--aat-text);
  max-width: 560px;
  margin-bottom: 32px;
}

@media (max-width: 767px) {
  /* .aat-page qualifier is load-bearing: the Elementor global kit ships
     `.elementor-kit-6 h2 { font-size: 28px }` at this same breakpoint, and
     (0,1,1) beats a bare `.aat-h3` (0,1,0) — a plain rule here computes to
     28px no matter what value it declares. 28px is also the value we want
     (it's what .aat-h2 uses on mobile), so this states it explicitly rather
     than inheriting it by accident from a plugin stylesheet. */
  .aat-page .aat-h3 { font-size: 28px; }
  .aat-page p.aat-transform-lede { font-size: 16px; margin-bottom: 24px; }
}

.aat-page section.aat-transform {
  background: #fff;
  padding: 88px 0 88px 50px;
}
.aat-transform .aat-inner {
  max-width: none;
  margin: 0;
}
.aat-transform-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

@media (max-width: 900px) {
  .aat-page section.aat-transform { padding: 56px 20px; }
}

@media (max-width: 900px) {
  .aat-transform-grid { grid-template-columns: 1fr; }
}

/* Shared tabs component (reused by Overview + Audit Type We Support) */
.aat-tabs { display: flex; flex-direction: column; }

.aat-tab {
  position: relative;
  border-width: 1px 0;
  border-style: solid;
  border-color: #BDC4D1;
  padding-top: 12px;
}

.aat-tab-trigger {
  all: unset;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 8px 0 20px;
  cursor: pointer;
  font-family: "Public Sans", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--aat-primary);
}

.aat-tab.is-active .aat-tab-trigger { color: var(--aat-primary); }

/* Progress "status bar" — only ever shown on the active tab, painted
   directly over the tab's own top border (which is never actually
   hidden by CSS — the 2px opaque bar just visually occludes the thinner
   1px border underneath it, matching the live page's own treatment). */
.aat-tab-progress-track {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #EDECEA;
  z-index: 2;
}

.aat-tab.is-active .aat-tab-progress-track { display: block; }

.aat-tab-progress-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--aat-primary);
  transition: width linear;
}

.aat-tab-panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.aat-tab.is-active .aat-tab-panel {
  /* 148px, not internal-auditing's 120px: this page's real accordion copy is
     3 short bullet lines per panel, not 1 sentence — 120px clipped the third
     line. */
  max-height: 148px;
  opacity: 1;
  transition: max-height 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.aat-tab-panel p { padding-bottom: 16px; font-size: 14px; font-weight: 300; line-height: 26px; color: var(--aat-primary); }

/* Real content for this page's accordion panels is 3 short bullet lines
   (Word-paste "- " dash lines in the source), not one sentence — rendered
   as a proper list rather than reproducing the literal dash prefixes. */
.aat-tab-bullets {
  list-style: disc;
  margin: 0;
  padding: 0 0 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.aat-tab-bullets li { font-size: 15px; line-height: 1.5; color: var(--aat-text); }

.aat-transform-media {
  position: relative;
  width: 100%;
  /* Live .rk-right-container-wrapper min-height: 566 desktop / 477 tablet /
     626 mobile (it GROWS on mobile). */
  min-height: 566px;
}
.aat-transform-img {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* FOUR panels, read from post-8218's `_offset_orientation_h/v` + the matching
   `_offset_*` values, cross-checked against uploads/elementor/css/post-8218.css.
   Heights stay px (live uses per-panel min_height, not ratios).

   CORRECTED 2026-08-17. An earlier note here said the offset model could not
   be translated and had to be measured instead. That was half right: the
   DESKTOP values below were genuinely measured and are correct, but the
   tablet and mobile blocks had been produced by translating offsets WITHOUT
   resolving the orientation flags, and both were badly wrong — on a 390px
   phone panel 4 sat almost entirely on top of panel 3, leaving only a ~70px
   sliver of it visible. Exactly the "one image stacked on another" symptom.

   The offset model IS reliable, provided the anchor is resolved first:
     `_offset_orientation_h: end`  -> anchor by RIGHT, value `_offset_x_end`
     `_offset_orientation_v: end`  -> anchor by BOTTOM, value `_offset_y_end`
     flag absent                   -> anchor by LEFT / TOP, value `_offset_x` / `_offset_y`
   Resolved per panel here, and CONSTANT across breakpoints (the orientation
   flags have no per-device variants), which is why each panel below keeps the
   same pair of anchor properties in every block:
     P1 left+top   P2 RIGHT+top   P3 left+BOTTOM   P4 RIGHT+BOTTOM
   A value omitted in a breakpoint block is omitted because live leaves that
   device field empty and genuinely inherits — do not "complete" them.

   No z-index anywhere on live, so the panels layer by DOM order (1..4); the
   previous 1/3/2/4 was invented. Verified after the fix: zero vertical
   overlap between any two panels at 390px. */
.aat-transform-img--1 { left:   0%; top:     0%; width: 100%; height: 197px; }
.aat-transform-img--2 { right: 45%; top:    34%; width:  36%; height: 183px; }
.aat-transform-img--3 { left:   4%; bottom:  2%; width:  67%; height: 153px; }
.aat-transform-img--4 { right:  0%; bottom: 28%; width:  43%; height: 191px; }

@media (max-width: 1024px) {
  .aat-transform-media { min-height: 477px; }
  .aat-transform-img--1 {                          width: 90%; height: 190px; }
  .aat-transform-img--2 { right: 24%; top:    35%; width: 35%; height: 160px; }
  .aat-transform-img--3 { left:  -2%; bottom:  0%; width: 64%; height: 160px; }
  .aat-transform-img--4 { right: 10%; bottom:  0%; width: 31%; height: 154px; }
}
@media (max-width: 767px) {
  .aat-transform-media { min-height: 626px; }
  .aat-transform-img--1 {                          height:  86px; }
  .aat-transform-img--2 { right: 10%; top:    18%; width: 66%; height: 131px; }
  .aat-transform-img--3 {             bottom: 10%; width: 91%; height: 100px; }
  .aat-transform-img--4 {             bottom: 28%; width: 75%; height: 170px; }
}

/* ---------- Common Audit Challenges ---------- */

.aat-page section.aat-challenges {
  background: #F2F5F7;
  padding: 60px 80px 160px;
  min-height: 90vh;
  display: flex;
  align-items: center;
}
/* max-width: none is load-bearing, not decorative — `width: 100%` alone is
   still capped by the base `.aat-inner { max-width: 1280px }`, which
   silently clamped every card in this grid to a narrower box than the real
   page (measured 411px cards here vs 434px live). This section, like
   Success Portfolio below, is genuinely edge-to-edge on the live page (no
   centered max-width box at all — content is exactly viewport minus the
   section's own 80px/side padding), matching the pattern already documented
   for internal-auditing's Challenges/Portfolio sections. */
.aat-challenges .aat-inner { width: 100%; max-width: none; }
@media (max-width: 900px) {
  .aat-page section.aat-challenges { padding: 56px 20px; min-height: 0; }
}
.aat-challenges-head {
  max-width: none;
  margin-bottom: 48px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
}
.aat-challenges-head h2 { flex: 0 1 auto; max-width: 640px; margin-bottom: 0; }
.aat-challenges-head p { font-size: 16px; max-width: 480px; flex: 0 1 auto; }

@media (max-width: 900px) {
  .aat-challenges-head { flex-direction: column; gap: 16px; }
  .aat-challenges-head h2 { max-width: 100%; margin-bottom: 0; }
  .aat-challenges-head p { max-width: 100%; }
}

.aat-challenges-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* NOT a copy of internal-auditing's card: confirmed live via DOM inspection
   that this page's icon-list items are text-only — no
   .elementor-icon-list-icon span at all, not even an empty/hidden one — so
   the green check-circle internal-auditing carries does not exist here.
   Simple padded block, no flex/icon layout. */
.aat-challenge-card {
  background: #fff;
  padding: 24px;
}

/* Color/size/weight measured directly off the live page (rgb(35,57,99) /
   20px / 700) — the internal-auditing clone's 18px/600 with no explicit
   color was silently falling through to the wrong shade (--aat-text
   #1E2E4C instead of --aat-primary #233963). */
.aat-challenge-card h3 { font-size: 20px; font-weight: 700; color: var(--aat-primary); margin-bottom: 8px; }
.aat-challenge-card p { font-size: 16px; }

@media (max-width: 1100px) {
  .aat-challenges-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .aat-challenges-grid { grid-template-columns: 1fr; }
}

/* ---------- Audit Features (swipeable hover cards) ----------
   Hover mechanic ported from the live page's .mcard/.ccard/.general-bgstyle
   (confirmed identical selectors/engine to inc/cta-banner/assets/cta-banner.css's
   .ictab-outer/.ictab-card): gradient border-image reveal + 10px lift,
   border reserved at full width from first paint (transparent) so hover
   never changes box size/causes reflow — see cta-banner-component memory
   for why. Icon fill/scale-on-hover is a NEW effect this component
   doesn't have elsewhere. */

.aat-page section.aat-features {
  background: #fff;
  padding: 60px 60px 160px;
  min-height: 90vh;
}
.aat-features .aat-inner { max-width: 1536px; }
.aat-features-intro { font-size: 16px; margin-bottom: 32px; }

.aat-features-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}

.aat-audit-card {
  flex: 0 0 355px;
  box-sizing: border-box;
  border-top: 16px solid transparent;
  border-left: 16px solid transparent;
}
.aat-audit-card:hover {
  border-image: var(--aat-gradient-teal-green) 1;
}

.aat-audit-card-inner {
  box-sizing: border-box;
  height: 100%;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-right: 4px solid transparent;
  border-bottom: 4px solid transparent;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-image 0.3s ease;
}
.aat-audit-card:hover .aat-audit-card-inner {
  transform: translate(-10px, -10px);
  border-image: var(--aat-gradient-teal-green) 1;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);
  background-color: #fff;
}

.aat-audit-card-inner--pink { background-color: #FFF5F5; }
.aat-audit-card-inner--lavender { background-color: #F7F9FF; }
.aat-audit-card-inner--mint { background-color: #F7FFF7; }
.aat-audit-card-inner--lilac { background-color: #FEFAFF; }

.aat-audit-icon svg { display: block; transition: transform 0.8s ease; }
.aat-audit-icon .aat-icon-fill { fill: var(--aat-primary); transition: fill 0.5s ease; }
.aat-audit-icon .aat-icon-stroke { fill: none; stroke: var(--aat-primary); transition: stroke 0.5s ease; }

.aat-audit-card:hover .aat-audit-icon svg { transform: scale(0.9); }
.aat-audit-card:hover .aat-audit-icon .aat-icon-fill { fill: url(#aatIconGradient); }
.aat-audit-card:hover .aat-audit-icon .aat-icon-stroke { stroke: url(#aatIconGradient); }

.aat-audit-card-inner h3 { font-size: 24px; font-weight: 600; line-height: 30px; color: var(--aat-primary); }
.aat-audit-card-inner p { font-size: 16px; font-weight: 400; color: var(--aat-text); flex-grow: 1; }

.aat-audit-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 0.8px solid #000;
  border-radius: 9999px;
  padding: 6px 14px;
}
.aat-audit-badge span { font-size: 14px; font-weight: 600; line-height: 16px; color: var(--aat-primary); }

@media (max-width: 900px) {
  .aat-page section.aat-features { padding: 56px 20px; min-height: 0; }
  .aat-audit-card { flex: 0 0 85vw; }
}

/* ---------- Audit Function (sticky heading + scroll-fade cards) ---------- */

.aat-audit-function { background: var(--aat-text); }

.aat-audit-function-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.aat-audit-function-sticky { position: sticky; top: 120px; }

.aat-audit-function-sticky .aat-audit-function-heading {
  color: #fff;
  font-size: 42px;
  font-weight: 600;
}

.aat-audit-function-cards { display: flex; flex-direction: column; gap: 24px; }

.aat-fade-card {
  background: var(--aat-neutral-9);
  padding: 25px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.aat-fade-card.is-visible { opacity: 1; transform: translateY(0); }

.aat-fade-card-num {
  display: block;
  font-size: 64px;
  font-weight: 800;
  color: var(--aat-neutral-6);
  line-height: 1;
  margin-bottom: 8px;
}

.aat-fade-card h3 { font-size: 20px; font-weight: 700; color: var(--aat-primary); margin-bottom: 8px; }
.aat-fade-card p { font-size: 14px; color: #6D7580; line-height: 20px; }

.aat-page section.aat-audit-types { padding: 10px !important; }
@media (max-width: 900px) {
  .aat-page section.aat-audit-types { padding: 20px !important; }
}

@media (max-width: 900px) {
  .aat-audit-function-grid { grid-template-columns: 1fr; }
  .aat-audit-function-sticky { position: static; margin-bottom: 24px; }
  .aat-fade-card { opacity: 1; transform: none; }
}

/* ---------- Audit Types We Support (Mac-frame variant) ---------- */

.aat-mac-frame {
  border-width: 0 4px 4px 4px;
  border-style: solid;
  border-color: #000;
  border-radius: var(--aat-radius);
  overflow: hidden;
  background: #fff;
}

.aat-mac-toolbar img { width: 100%; display: block; }

.aat-mac-head {
  background: var(--aat-neutral-9);
  padding: 22px 32px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.aat-mac-head h2 { font-weight: 600; color: var(--aat-primary); }
.aat-mac-head p { font-size: 16px; max-width: 400px; }

.aat-mac-content {
  background: #FFFBF5;
  display: flex;
  /* stretch, not flex-start: live's list column measures the SAME 440px
     height as the image cluster next to it (confirmed via
     getBoundingClientRect on both), because the row's cross-axis stretches
     both children to match the taller one. flex-start left the 3-item list
     at its own short content height (170px) with nothing filling the
     remaining ~270px beside the image cluster — the "so much empty space"
     report. The whitespace doesn't disappear with this fix; it moves to
     where live actually puts it, inside the bottom of the (now full-height)
     list column, which is what the real page looks like. */
  align-items: stretch;
  gap: 0;
}

.aat-plain-list {
  list-style: disc;
  padding: 30px 0 50px 30px;
  margin: 0;
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 16px;
  color: var(--aat-text);
}

/* FIXED min-height, NOT aspect-ratio. Measured on live: the cluster is
   633x440 at a 1536px viewport and 333x440 at 820px — the width tracks the
   column while the height stays pinned at 440px, which an aspect-ratio can
   never reproduce (it would shrink the height as the column narrows, and
   that is what collapsed the whole composition on the previous clone).
   Height GROWS to 500px below the 767px breakpoint on this page; see the
   mobile block. No align-self — the row's align-items:stretch is what makes
   the sibling list column match this height. */
.aat-mockup-cluster {
  position: relative;
  flex: 1 1 50%;
  min-height: 440px;
}

/* Confirmed live via getComputedStyle on all 5 of this page's real panels:
   background-size:contain, border-radius:0, box-shadow:none. Do not
   reintroduce `cover` (it crops these mockups — the "images are cutted"
   report on the previous clone) or the borrowed radius/shadow. */
.aat-mockup-panel {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  box-shadow: none;
  border-radius: 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.aat-mockup-panel.is-visible { opacity: 1; transform: translateY(0); }

/* FIVE panels on this page (risk-management had 3, internal-auditing 4).
   THESE PERCENTAGES ARE RELATIVE TO THE CLUSTER, NOT THE FRAME — measured
   with getBoundingClientRect() against the cluster's own rect at a 1536px
   viewport (cluster 633x440). Measuring against the whole
   .screen-content-mock is what produced a wrong, too-tidy mockup on the
   previous clone; the panels are MEANT to overflow the cluster (negative
   tops, >100% widths) and layer into one collage, with the frame's own
   overflow:hidden clipping the spill at the card edge. */
.aat-mockup-panel--1 { left:  2%; top: 65.91%; width: 100%; height: 34.09%; transition-delay:    0ms; }
.aat-mockup-panel--2 { left: 53%; top: 37.00%; width:  52%; height: 50.91%; transition-delay:  150ms; }
.aat-mockup-panel--3 { left:  0%; top: -5.00%; width:  54%; height: 44.32%; transition-delay:  300ms; }
.aat-mockup-panel--4 { left: 49%; top: -4.00%; width:  59%; height: 55.68%; transition-delay:  450ms; }
.aat-mockup-panel--5 { left: -4%; top: 34.00%; width:  71%; height: 37.05%; transition-delay:  600ms; }

/* Tablet — live carries its own Elementor tablet values (measured at 820px:
   cluster 333x440, so it stays 440 tall while the width collapses). */
@media (max-width: 1024px) {
  .aat-mockup-panel--1 { left:  2.00%; top: 65.91%; width:  90.18%; height: 34.09%; }
  .aat-mockup-panel--2 { left: 48.00%; top: -2.00%; width:  63.00%; height: 37.73%; }
  .aat-mockup-panel--3 { left:  4.00%; top: 18.00%; width:  85.00%; height: 47.73%; }
  .aat-mockup-panel--4 { left:  3.13%; top: -2.00%; width:  59.00%; height: 32.05%; }
  .aat-mockup-panel--5 { left: -2.00%; top: 46.00%; width: 100.00%; height: 37.05%; }
}

/* Mobile — 767px, bisected on the LIVE page rather than inherited: at 820px
   the columns are still side by side, at 760px they have stacked.
   TWO DELIBERATE DIFFERENCES FROM THE RISK-MANAGEMENT CLONE — both measured,
   do not "fix" them to match that page:
   1. The mac toolbar STAYS VISIBLE here. risk-management carries `hide_mobile`
      on its .browser-top-img and so needed a border-top placeholder to close
      the card; this page's toolbar is `display: block` at both 760px and
      390px, so the image is still the frame's top edge and NO border-top
      placeholder belongs here.
   2. The cluster GROWS to 500px rather than shrinking — risk-management drops
      440 -> 367, this page goes 440 -> 500 (confirmed `min-height: 500px` at
      both 760px and 390px), because the stacked panels need more vertical
      room. Straight proof that per-page values never transfer. */
@media (max-width: 767px) {
  .aat-mac-head { flex-direction: column; gap: 12px; }
  .aat-mac-head p { max-width: 100%; }
  .aat-mac-content { flex-direction: column; align-items: stretch; }
  .aat-plain-list { flex: none; padding: 20px; }

  .aat-mockup-cluster { width: 100%; min-height: 500px; flex: none; }

  /* Panel 1 is a FIXED 500px wide here, not a percentage — measured 500px at
     both a 715px and a 346px cluster, so it deliberately overflows on a
     phone and is clipped by the frame. Panel 4 is RIGHT-anchored at a
     constant 126px (its computed `right` held at 126px across both widths
     while `left` swung from +124px to -5px). */
  .aat-mockup-panel--1 { left:  2%;  top: 74.40%; width: 500px; height: 25.60%; }
  .aat-mockup-panel--2 { left: 49%;  top: -2.00%; width:  62%;  height: 34.60%; }
  .aat-mockup-panel--3 { left: -11%; top: 22.00%; width: 100%;  height: 42.00%; }
  .aat-mockup-panel--4 { left: auto; right: 126px; top: 2.00%; width: 65%; height: 28.20%; }
  .aat-mockup-panel--5 { left: -2%;  top: 50.00%; width: 100%;  height: 34.00%; }
}

/* ---------- Success Portfolio ---------- */

.aat-page section.aat-portfolio {
  background-color: var(--aat-text);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 60px 80px;
  min-height: 90vh;
  display: flex;
  align-items: center;
}
/* Same max-width: none fix as .aat-challenges above, same root cause. */
.aat-portfolio .aat-inner { width: 100%; max-width: none; }
@media (max-width: 900px) {
  .aat-page section.aat-portfolio { padding: 56px 20px; min-height: 0; }
}

.aat-portfolio .aat-portfolio-heading { color: #fff; }
.aat-head-row p.aat-portfolio-intro { color: #EDECEA !important; font-size: 14px; line-height: 20px; }

.aat-portfolio-row {
  display: grid;
  gap: 24px;
  margin-top: 32px;
}
.aat-portfolio-row--wide { grid-template-columns: repeat(2, 1fr); }
.aat-portfolio-row--narrow { grid-template-columns: repeat(3, 1fr); }
/* This page's second row is FOUR plain cards, not risk-management's three —
   the --narrow variant above is kept for parity with the shared component
   family but is unused here. */
.aat-portfolio-row--narrow-4 { grid-template-columns: repeat(4, 1fr); }

.aat-portfolio-card {
  background: #fff;
  border-radius: 8px;
  padding: 25px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.aat-portfolio-card h3 { font-size: 20px; font-weight: 700; color: var(--aat-primary); margin-bottom: 8px; }
.aat-portfolio-card p { font-size: 14px; }

.aat-portfolio-stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--aat-text);
  margin-top: 20px;
  margin-bottom: 8px;
}
.aat-portfolio-stat-pct { color: var(--aat-green); font-weight: 400; }

.aat-portfolio-bar {
  height: 8px;
  border-radius: 9999px;
  background: var(--aat-neutral-8);
  overflow: hidden;
}
.aat-portfolio-bar-fill {
  height: 100%;
  border-radius: 9999px;
  background: var(--aat-gradient-teal-green);
}

@media (max-width: 1200px) {
  .aat-portfolio-row--narrow-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1100px) {
  .aat-portfolio-row--wide, .aat-portfolio-row--narrow { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .aat-portfolio-row--narrow-4 { grid-template-columns: 1fr; }
}

/* ---------- Related posts / CTA section wrappers ---------- */

.aat-page section.aat-related {
  background: #fff;
  padding: 100px 80px 51px;
}
.aat-page section.aat-cta {
  background: #fff;
  padding: 0 4vw !important;
  overflow-x: hidden;
  overflow-y: visible;
}
@media (max-width: 900px) {
  .aat-page section.aat-related { padding: 56px 20px; }
}

/* ---------- CTA on-scroll pattern layer ----------
   Same vanilla-JS-driven horizontal parallax ported for the
   financial-services clone (.fst-cta-pattern) — this page's own
   "Scale with Confidence" section uses the identical live image (697)
   and .pattern-wrapper/pattern-hero-scroll.js mechanic. */
.aat-cta-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 170%;
  height: 100%;
  background-image: url("/wp-content/uploads/2025/07/54a768dcea5da5e17c5698fa431189da72b85889-scaled-1.png");
  background-repeat: no-repeat;
  background-position: 0% 0%;
  background-size: cover;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  transform: translateX(0%);
}

/* ---------- "Why It Matters to You?" cards ----------------------------------
   Every static value below is measured off live (.rk1-maincard /
   .rk1-innercard / .rk1-img-container / the bordered label box). The card is a
   normal flex column exactly as live builds it — the content panel is inset
   from the card by the card's own 10px padding, which is why it reads as
   narrower than the card.

   ADDED (requested): on hover the image scales harder and the content panel
   lifts by 20px, while the one-line description expands to full text.
   The card keeps a FIXED height with overflow visible (live does the same —
   its panel already overhangs the card bottom by 64px), so the panel can move
   and grow without the 3-column grid reflowing. */

/* Live's grid measures 453.6px x3 + 2x20px gap = 1400.8px, i.e. wider than the
   shared 1280px .aat-inner. Release the clamp for this section only — and note
   `width:100%` alone would NOT do it, since max-width always wins. */
.aat-why .aat-inner { width: 100%; max-width: none; }
/* Bottom padding is deliberately generous: the panel overhangs the fixed-height
   card by ~64px at rest and grows further on hover, so the section has to
   absorb that without colliding with the next band. */
.aat-page section.aat-why { padding: 96px 60px 190px; }

/* `.aat-page section.aat-why` is (0,2,1) and outranks the generic mobile
   fallback `.aat-page section {padding:56px 20px}` (0,1,1), so without this
   block the 60px sides and 190px bottom survived down to 320px — only 270px
   of usable width on a 390px phone. Live's own heading section drops to 20px
   padding at <=767px (post-8218.css), and its cards section drops its side
   padding to 0; 20px matched here since this build merges the two into one
   section. The big bottom padding is only there to clear the panel overhang
   below the fixed-height card, and the touch block further down releases that
   fixed height entirely, so it is not needed on mobile. */
@media (max-width: 767px) {
  .aat-page section.aat-why { padding: 40px 20px 56px; }
}

.aat-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.aat-why-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  height: 436px;
  padding: 10px;
  background: #fff;
  border-radius: 0;
  overflow: visible;                          /* live: visible, panel overhangs */
  box-shadow: 0 1px 3px 0 rgba(35, 57, 99, 0.3);
}
.aat-why-card:focus-visible { outline: 2px solid var(--aat-primary); outline-offset: 3px; }

/* Fixed 304x186 and CENTRED — not full-bleed. align-items:center on the card
   is what centres it (live offset is exactly (454-304)/2 = 75px). */
.aat-why-media {
  flex: 0 0 auto;
  width: 304px;
  max-width: 100%;
  height: 186px;
  padding: 10px;
  overflow: hidden;
}
.aat-why-img {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50% 0%;
  transform-origin: 50% 30%;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

/* Content panel: full width of the card's content box (card 454 - 2x10 = 434,
   matching live), 284px tall, 8px radius, and live's TWO shadows. */
.aat-why-panel {
  width: 100%;
  /* flex: 0 0 auto is LOAD-BEARING. As a flex item in a column container with a
     constrained (436px) height, the panel defaults to flex-shrink:1 and gets
     squeezed to the space left over after the image — which pins it at exactly
     its min-height and makes the expanding description overflow the panel's
     bottom edge instead of growing it. flex-shrink:0 lets it size to content. */
  flex: 0 0 auto;
  min-height: 284px;
  padding: 16px 16px 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 -10px 52.8px 0 rgba(0, 0, 0, 0.18),
              0 35px 90px 0 rgba(35, 57, 99, 0.14);
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.45s ease,
              padding-bottom 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

/* Accent bar lives on this wrapper, not the heading: 8px solid #6BC3B8. */
.aat-why-label-box {
  border-left: 8px solid #6BC3B8;
  padding: 10px;
}
.aat-page .aat-why-label {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 31px;
  text-transform: uppercase;
  color: var(--aat-primary);
}

.aat-page p.aat-why-head {
  font-size: 28px;
  font-weight: 400;
  line-height: 42px;
  color: var(--aat-text);
  margin: 28px 0;
}

/* Clamped to ONE line at rest exactly as live (.rk1-ellipsis-text).
   max-height is what animates — -webkit-line-clamp is not animatable, so it
   only supplies the ellipsis and is released on hover. */
.aat-page p.aat-why-desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--aat-text);
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  max-height: 1.2em;
  transition: max-height 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- hover / focus ---- */
.aat-why-card:hover .aat-why-img,
.aat-why-card:focus-within .aat-why-img {
  transform: scale(1.18);
}
/* Extra bottom padding on hover so the revealed description has breathing room
   instead of sitting flush against the panel edge. */
.aat-why-card:hover .aat-why-panel,
.aat-why-card:focus-within .aat-why-panel {
  transform: translateY(-20px);
  padding-bottom: 32px;
  box-shadow: 0 -14px 60px 0 rgba(0, 0, 0, 0.22),
              0 40px 100px 0 rgba(35, 57, 99, 0.18);
}
.aat-why-card:hover p.aat-why-desc,
.aat-why-card:focus-within p.aat-why-desc {
  -webkit-line-clamp: 8;
  max-height: 9.6em;
}

/* Touch has no hover, so a clamped description would be permanently
   unreadable — the trap that hid internal-auditing's card copy on mobile.
   The grid must collapse here too, not just the card internals. */
@media (hover: none), (max-width: 767px) {
  .aat-why-grid { grid-template-columns: 1fr; }
  .aat-why-card { height: auto; }
  .aat-why-panel { min-height: 0; transform: none; }
  .aat-page p.aat-why-desc { -webkit-line-clamp: unset; max-height: none; overflow: visible; }
  .aat-page p.aat-why-head { font-size: 22px; line-height: 32px; margin: 20px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .aat-why-img, .aat-why-panel, .aat-page p.aat-why-desc { transition: none; }
}

@media (max-width: 1100px) and (min-width: 768px) {
  .aat-why-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Two-column band needs a row-gap sized to the panel's OVERHANG, and the
   default 20px is nowhere near enough. The card is a fixed 436px box whose
   content runs 10 + 186 (media) + 20 (gap) + panel, so the panel hangs below
   the card's bottom edge by design (overflow is visible — that IS the look).
   With 3 cards the desktop 3-column layout is a single row, so nothing sits
   underneath and the bug is invisible there; at 2 columns there IS a second
   row, and measured in-browser the row-1 panels sat 48-90px ON TOP of the
   row-2 card.

   The overhang is CONTENT-dependent, not a constant: it is 68px at 900-1100px
   but 110px at 768-820px, because the 28px/42px headline wraps to more lines
   in a ~364px column. A gap sized to the 68px case (80px was tried first)
   still overlapped by ~31px at 768px. Two changes together fix it:
     1. drop the headline to the same 22px/32px the mobile block already uses
        — at this column width 28px/42px is oversized anyway, and it cuts the
        wrap variance that drives the overhang;
     2. row-gap 130px, i.e. clear of the measured 110px worst case.
   Both are scoped to (hover: hover): on touch the block further up already
   releases the fixed height (cards go auto-height, description unclamped), so
   there is no overhang there and the large gap would be dead whitespace.
   RE-MEASURE IN A BROWSER if this card's copy ever changes — the safe gap is
   a function of the tallest rendered panel, not a fixed design token. */
@media (max-width: 1100px) and (min-width: 768px) and (hover: hover) {
  .aat-why-grid { row-gap: 130px; }
  .aat-page p.aat-why-head { font-size: 22px; line-height: 32px; margin: 20px 0; }
}

/* ---------- Sub Roles (navy band, 4 icon cards) ----------------------------
   All measured live: section #1E2E4C with 60px 60px 0 padding; 4-column grid
   at 20px gap; card 330x157, 10px padding, 8px radius, NO shadow, flex column
   CENTRED on both axes with a 20px gap; icon 28x28; label 20px/600 with a
   24px line-height, centred. */
/* Live is `60px 60px 0` — zero bottom padding, which leaves the cards butting
   straight into the mint band below. Deliberately diverging from live here on
   the user's request to give the row breathing room. */
.aat-page section.aat-subroles {
  background: #1E2E4C;
  padding: 60px 60px 60px;
}
.aat-subroles-head { margin-bottom: 40px; }
.aat-page .aat-subroles-heading { color: #fff; margin-bottom: 12px; }
.aat-page p.aat-subroles-intro { color: #fff; font-size: 16px; line-height: 26px; }

.aat-subroles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.aat-subrole-card {
  background: #fff;
  min-height: 157px;
  padding: 10px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;      /* live centres the icon and the label */
  justify-content: center;
  gap: 20px;
  text-align: center;
}
/* 65px navy circle badge with a 28px white icon inside — measured live
   (.elementor-icon: background #233963, padding 16px, border-radius 50%). */
.aat-subrole-badge {
  flex: 0 0 auto;
  width: 65px;
  height: 65px;
  padding: 16px;
  border-radius: 50%;
  background: var(--aat-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.aat-subrole-icon { width: 28px; height: 28px; display: block; }
.aat-page .aat-subrole-card h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;         /* live is 600, not 700 */
  line-height: 24px;
  color: var(--aat-primary);
  text-align: center;
}

@media (max-width: 1024px) {
  .aat-page section.aat-subroles { padding: 56px 20px; }
  .aat-subroles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) { .aat-subroles-grid { grid-template-columns: 1fr; } }

/* ---------- Mid-page mint CTA bar ---------- */
/* Percentage padding, not the measured px pair. Live declares this bar as
   `4% 5%` (post-8218.css) and never overrides it per-breakpoint, because
   percentages already scale — 61px/76px is merely what 4%/5% resolves to at
   ~1520px, and being fixed it survived down to 320px, leaving 238px of usable
   width on a 390px phone. Restoring the percentage reproduces live at every
   width and needs no media query. */
.aat-page section.aat-unlock {
  background: #D2FFEC;
  padding: 4% 5%;
}
.aat-unlock-grid {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.aat-page .aat-unlock-heading {
  margin: 0 0 8px;
  font-size: 40px;             /* live 40px/700, line-height 46px */
  font-weight: 700;
  line-height: 46px;
  color: var(--aat-primary);
}
.aat-page p.aat-unlock-text { font-size: 16px; color: var(--aat-text); }
.aat-unlock-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 14px 26px;
  background: #fff;
  color: var(--aat-primary);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 0;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.aat-unlock-btn:hover, .aat-unlock-btn:focus-visible {
  background: var(--aat-primary);
  color: #fff;
}

@media (max-width: 900px) {
  .aat-unlock-grid { flex-direction: column; align-items: flex-start; gap: 20px; }
  .aat-unlock-heading { font-size: 28px; }
}

/* ---------- "Built for Your Role" split ---------- */
.aat-page section.aat-role { background: #fff; padding: 50px; }
/* Live heading here is 40px/700/49px — NOT the 42px .aat-h2 used elsewhere. */
.aat-page .aat-role-copy .aat-h2 { font-size: 40px; line-height: 49px; }
.aat-role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.aat-role-copy p { font-size: 16px; margin-bottom: 24px; max-width: 520px; }
/* Unlinked on live — its Elementor link setting is empty. Rendered as a
   non-interactive span, so it must not look clickable-but-dead. */
/* Live uses the background-clip:text trick: background-color #233963 with
   -webkit-text-fill-color:transparent, so the navy paints only the GLYPHS and
   the button body stays transparent behind a 1.6px brand-gradient border.
   Reading the computed backgroundColor/color alone reports "navy fill, white
   text" and is exactly backwards — check background-clip before trusting it.
   Written plainly here (navy text, transparent body) rather than reproducing
   the clip hack; visually identical and far easier to maintain.
   Unlinked on live (href is null), so this stays a span. */
.aat-role-btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 26px;
  background: transparent;
  color: var(--aat-primary);
  border: 1.6px solid transparent;
  border-image: var(--aat-gradient-primary-darker) 1;
  border-radius: 2px;
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
}
.aat-role-media {
  min-height: 380px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Stack breakpoint is 1024px, matching live's own (this was 900px, which left
   the columns side by side across 901-1024px where live has already gone to a
   single column), and the copy column takes live's 15% vertical padding.

   DELIBERATE DIVERGENCE AT <=767px: live post-8218 has NO mobile override for
   this section, so the original Elementor page really did keep `padding:50px`
   on a phone — 100px of a 390px screen, leaving 290px. That is reproduced
   faithfully everywhere else, but here it is dropped to 20px to match the
   sibling by-role page (/by-role/executive-oversight/, whose own Elementor
   data DOES specify `0 20px` at <=767px for the identical component). The two
   pages now share this template, and a 26%-of-viewport gutter on one of them
   is a bug worth diverging from the source for. Revert to 50px if exact
   parity with the old Elementor rendering is ever required. */
@media (max-width: 1024px) {
  .aat-role-grid { grid-template-columns: 1fr; gap: 28px; }
  .aat-role-copy { padding: 15% 0; }
  .aat-role-media { min-height: 240px; }
}
@media (max-width: 767px) {
  .aat-page section.aat-role { padding: 0 20px; }
  .aat-role-copy { padding: 18% 0 2%; }
  .aat-role-media { min-height: 231px; }
}