/*
 * Internal Auditing Clone — Test Page Stylesheet
 * Hand-coded (no Elementor, no GSAP). Scoped under .iat-page to avoid
 * bleeding into the rest of the site, and to avoid site styles bleeding in.
 * Design tokens sourced from the live page's Elementor global kit + the
 * Figma file rXkYsvfFcXhSOHgb18Gys2 (node 1907:61232).
 */

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

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

  position: relative;
  font-family: "Public Sans", sans-serif;
  color: var(--iat-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). */
.iat-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;
}

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

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

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

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

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

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

.iat-page h1, .iat-page h2, .iat-page h3, .iat-page h4 {
  font-family: "Public Sans", sans-serif;
  color: var(--iat-text);
  font-weight: 700;
}

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

.iat-h2 {
  font-size: 42px;
  line-height: 1.15;
  font-weight: 700;
  margin-bottom: 20px;
}

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

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

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

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

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

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

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

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

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

/* ---------- Lead magnet CTA (.lm-cta-banner) — page-scope override ----------
   .iat-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. */
.iat-page section.lm-cta-banner {
  padding: 0 4vw;
}
@media (max-width: 900px) {
  .iat-page section.lm-cta-banner {
    padding: 56px 20px !important;
  }
}

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

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


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

.iat-hero-h1 {
  color: #fff !important;
  font-size: 100px;
  line-height: 1.1;
  font-weight: 600;
  margin: 0;
}

@media (max-width: 900px) {
  .iat-hero-h1 { font-size: 44px; }
}

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

.iat-h3 { font-size: 32px; line-height: 1.25; font-weight: 700; margin-bottom: 32px; max-width: 560px; }

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

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

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

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

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

.iat-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: 600;
  font-size: 18px;
  color: var(--iat-neutral-6);
}

.iat-tab.is-active .iat-tab-trigger { color: var(--iat-text); }

/* 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). */
.iat-tab-progress-track {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #EDECEA;
  z-index: 2;
}

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

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

.iat-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);
}

.iat-tab.is-active .iat-tab-panel {
  max-height: 120px;
  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);
}

.iat-tab-panel p { padding-bottom: 16px; font-size: 16px; color: var(--iat-text); }

.iat-transform-media {
  position: relative;
  aspect-ratio: 838 / 514;
  width: 100%;
}
.iat-transform-img {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
/* Real measured positions (% of the 838x514 live container) — plain
   background-image divs, no shadow/radius on the live source. */
.iat-transform-img--1 { left: 24.00%; top: 59.00%; width: 33.00%; height: 32.49%; z-index: 1; }
.iat-transform-img--2 { left: 43.00%; top: 0.00%;  width: 43.00%; height: 42.61%; z-index: 1; }
.iat-transform-img--3 { left: 52.00%; top: 44.00%; width: 43.00%; height: 30.93%; z-index: 2; }
.iat-transform-img--4 { left: 8.00%;  top: 32.00%; width: 35.00%; height: 28.40%; z-index: 2; }
.iat-transform-img--5 { left: 12.00%; top: 0.00%;  width: 38.00%; height: 32.49%; z-index: 3; }

@media (max-width: 900px) {
  .iat-transform-media { margin-top: 24px; }
}

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

.iat-page section.iat-challenges {
  background: var(--iat-neutral-9);
  padding: 60px 80px 160px;
  min-height: 90vh;
  display: flex;
  align-items: center;
}
.iat-challenges .iat-inner { width: 100%; }
@media (max-width: 900px) {
  .iat-page section.iat-challenges { padding: 56px 20px; min-height: 0; }
}
.iat-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%;
}
.iat-challenges-head h2 { flex: 0 1 auto; max-width: 640px; margin-bottom: 0; }
.iat-challenges-head p { font-size: 16px; max-width: 480px; flex: 0 1 auto; }

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

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

.iat-challenge-card {
  background: #fff;
  padding: 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.iat-challenge-card h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.iat-challenge-card p { font-size: 15px; }

.iat-check-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--iat-green);
  position: relative;
  margin-top: 2px;
}
.iat-check-icon::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 4px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

@media (max-width: 1100px) {
  .iat-challenges-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .iat-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. */

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

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

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

.iat-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;
}
.iat-audit-card:hover .iat-audit-card-inner {
  transform: translate(-10px, -10px);
  border-image: var(--iat-gradient-teal-green) 1;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);
  background-color: #fff;
}

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

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

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

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

.iat-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;
}
.iat-audit-badge span { font-size: 14px; font-weight: 600; line-height: 16px; color: var(--iat-primary); }

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

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

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

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

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

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

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

.iat-fade-card {
  background: var(--iat-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;
}

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

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

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

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

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

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

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

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

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

.iat-mac-content {
  background: #FFFBF5;
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.iat-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(--iat-text);
}

.iat-mockup-cluster {
  position: relative;
  flex: 1 1 50%;
  aspect-ratio: 633 / 440;
  align-self: center;
}

/* FIXED 2026-08-18 — three corrections, all read from live post 7123's own
   _elementor_data for these four containers:
     - `background-size` was `cover`; live is `contain` on all four panels.
       `cover` was cropping the edges of each mockup.
     - added the real mobile overrides: panels 1, 3 and 4 are `initial`
       (CSS `auto`, i.e. natural size) below 767px; panel 2 inherits.
     - removed a fabricated `box-shadow` + `border-radius: 4px`. Live has
       NO shadow or radius setting on any of its 36 positioned panels. That
       shadow was invented in financial-test and copied into every page
       carrying this mac-frame component; these PNGs already have their own
       card + soft shadow baked into the artwork, so the CSS drew a second
       one. (It was less obvious here than on the by-industry pages only
       because `cover` left no letterboxed gap for it to outline.)
   The fade-in-on-view transition below is NOT from Elementor's data — it's
   the hand-ported equivalent of Elementor's scroll-entrance effect and is
   intentional; leave it. */
.iat-mockup-panel {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.iat-mockup-panel.is-visible { opacity: 1; transform: translateY(0); }

.iat-mockup-panel--1 { left: -3%; top: 78.9%; width: 94.9%; height: 17%; transition-delay: 0ms; }
.iat-mockup-panel--2 { left: 12.9%; top: 30.9%; width: 76.9%; height: 27%; transition-delay: 800ms; }
.iat-mockup-panel--3 { left: 43%; top: 54.8%; width: 34%; height: 30.2%; transition-delay: 200ms; }
.iat-mockup-panel--4 { left: 28%; top: 0; width: 72%; height: 32%; transition-delay: 400ms; }

@media (max-width: 767px) {
  .iat-mockup-panel--1,
  .iat-mockup-panel--3,
  .iat-mockup-panel--4 { background-size: auto; }
}

@media (max-width: 900px) {
  .iat-mac-head { flex-direction: column; gap: 12px; }
  .iat-mac-head p { max-width: 100%; }
  .iat-mac-content { flex-direction: column; align-items: stretch; }
  .iat-plain-list { flex: none; padding: 20px; }
  .iat-mockup-cluster { min-height: 260px; flex: none; }
}

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

.iat-page section.iat-portfolio {
  background-color: var(--iat-text);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 60px 80px;
  min-height: 90vh;
  display: flex;
  align-items: center;
}
.iat-portfolio .iat-inner { width: 100%; }
@media (max-width: 900px) {
  .iat-page section.iat-portfolio { padding: 56px 20px; min-height: 0; }
}

.iat-portfolio .iat-portfolio-heading { color: #fff; }
.iat-portfolio-intro { color: rgba(255, 255, 255, 0.75) !important; }

.iat-portfolio-row {
  display: grid;
  gap: 24px;
  margin-top: 32px;
}
.iat-portfolio-row--wide { grid-template-columns: repeat(2, 1fr); }
.iat-portfolio-row--narrow { grid-template-columns: repeat(3, 1fr); }

.iat-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);
}
.iat-portfolio-card h3 { font-size: 20px; font-weight: 700; color: var(--iat-primary); margin-bottom: 8px; }
.iat-portfolio-card p { font-size: 15px; }

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

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

@media (max-width: 1100px) {
  .iat-portfolio-row--wide, .iat-portfolio-row--narrow { grid-template-columns: 1fr; }
}

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

.iat-page section.iat-related {
  background: #fff;
  padding: 100px 80px 51px;
}
.iat-page section.iat-cta {
  background: #fff;
  padding: 0 4vw !important;
  overflow-x: hidden;
  overflow-y: visible;
}
@media (max-width: 900px) {
  .iat-page section.iat-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. */
.iat-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%);
}

/* ---------- Inline body link ----------------------------------------------
   Same treatment as the sibling clones' inline links (primary, 700,
   underlined). Added 2026-08-13 with the SEO internal link in the Challenges
   intro; this page had no inline-link style before. */
.iat-link {
  color: var(--iat-primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.iat-link:hover, .iat-link:focus-visible { text-decoration-thickness: 2px; }