/*
 * Risk Management Clone — Test Page Stylesheet
 * Cloned from internal-auditing-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 .rmt-page to avoid bleeding into the
 * rest of the site, and to avoid site styles bleeding in.
 *
 * Content is real, extracted from /capabilities/risk-management/ (post
 * 7580) via _elementor_data + live computed-style measurement — not
 * invented. Design tokens are shared with internal-auditing-test since
 * both draw on the same site-wide Elementor global kit.
 *
 * CONTENT-DRIVEN DIFFERENCES FROM THE INTERNAL-AUDITING CLONE (do not
 * "fix" these to match iat- — they are real, verified per-page facts):
 *   - Overview media collage: 4 images, not 5 (rk-right-container-wrapper
 *     has 4 children on this page).
 *   - Audit-Features-equivalent cards: 6 cards, not 5, and NONE carry the
 *     "70% Time Reduction"-style stat badge (confirmed absent live).
 *   - Mac-frame mockup: 3 images + a 3-item bullet list, not 4 images +
 *     5 items (the list itself is real — Word-paste <ul><li> markup buried
 *     inside the live page's own "hidden ancestor: false" text-editor,
 *     found only by grep on the raw editor HTML, not by reading rendered
 *     textContent, which collapses it to a single run-on paragraph).
 *   - Success Portfolio: still the navy #1E2E4C band (confirmed via
 *     computed backgroundColor, same token as --rmt-text), but NO wave
 *     background image and NO gradient stat bars — all 5 cards are the
 *     plain variant. The wave-pattern classes are kept in this file for
 *     parity with the shared component family but are not applied here.
 */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ---------- "See the power of connected risk" 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). */
.rmt-page section.rmt-statement {
  background: #D2FFEC;
  padding: 55px 80px 51px;
  backdrop-filter: blur(2px);
}
.rmt-statement-grid {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}
.rmt-statement-heading {
  margin: 0;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--rmt-primary);
  max-width: 480px;
  flex: 0 1 auto;
}
.rmt-statement-text {
  font-size: 16px;
  line-height: 1.55;
  color: var(--rmt-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 --rmt-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. */
.rmt-link {
  color: var(--rmt-primary);
  font-weight: 600;
  text-decoration: none;
  padding-bottom: 1px;
  background-image: linear-gradient(var(--rmt-primary), var(--rmt-primary));
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 100%;
  transition: color 0.25s ease, background-size 0.25s ease;
}
.rmt-link:hover,
.rmt-link:focus-visible {
  color: var(--rmt-text);
  background-size: 100% 3px;
}
.rmt-link:focus-visible {
  outline: 2px solid var(--rmt-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. */
.rmt-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;
}
.rmt-link--head:hover,
.rmt-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. .rmt-portfolio-intro sets its own color
   with !important, so the color here needs it too in order to apply to the
   nested anchor. */
.rmt-link--onnavy,
.rmt-portfolio-intro .rmt-link--onnavy {
  color: #fff !important;
  background-image: linear-gradient(#fff, #fff);
}
.rmt-link--onnavy:hover,
.rmt-link--onnavy:focus-visible,
.rmt-portfolio-intro .rmt-link--onnavy:hover {
  color: #fff !important;
}
.rmt-link--onnavy:focus-visible { outline-color: #fff; }
@media (max-width: 900px) {
  .rmt-page section.rmt-statement { padding: 40px 20px; }
  .rmt-statement-grid { flex-direction: column; align-items: flex-start; gap: 16px; }
  .rmt-statement-heading { font-size: 30px; max-width: 100%; }
  .rmt-statement-text { max-width: 100%; }
}

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

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


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

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

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

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

.rmt-h3 { font-size: 32px; line-height: 1.25; font-weight: 700; margin-bottom: 32px; 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. */
.rmt-transform-copy .rmt-h3 { margin-bottom: 14px; }
/* `.rmt-page p` (0,2,0) sets margin:0 on every paragraph, so a bare
   `.rmt-transform-lede` (0,1,0) loses and the gap collapses to 0 — the tag
   qualifier here is load-bearing, not noise. */
.rmt-page p.rmt-transform-lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--rmt-text);
  max-width: 560px;
  margin-bottom: 32px;
}

@media (max-width: 767px) {
  /* .rmt-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 `.rmt-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 .rmt-h2 uses on mobile), so this states it explicitly rather
     than inheriting it by accident from a plugin stylesheet. */
  .rmt-page .rmt-h3 { font-size: 28px; }
  .rmt-page p.rmt-transform-lede { font-size: 16px; margin-bottom: 24px; }
}

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

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

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

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

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

.rmt-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(--rmt-neutral-6);
}

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

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

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

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

.rmt-tab.is-active .rmt-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);
}

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

/* 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. */
.rmt-tab-bullets {
  list-style: disc;
  margin: 0;
  padding: 0 0 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rmt-tab-bullets li { font-size: 15px; line-height: 1.5; color: var(--rmt-text); }

.rmt-transform-media {
  position: relative;
  aspect-ratio: 838 / 514;
  width: 100%;
}
.rmt-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. */
/* 4 images on this page, not 5 — measured live via getBoundingClientRect
   against the real 838x596 .rk-right-container-wrapper reference frame. */
.rmt-transform-img--1 { left: 0.00%;  top: 0.00%;  width: 67.00%; height: 33.05%; z-index: 1; }
.rmt-transform-img--2 { left: 25.00%; top: 27.00%; width: 69.00%; height: 31.88%; z-index: 2; }
.rmt-transform-img--3 { left: 49.00%; top: 55.19%; width: 51.00%; height: 45.81%; z-index: 3; }
.rmt-transform-img--4 { left: 4.00%;  top: 51.91%; width: 47.00%; height: 38.09%; z-index: 2; }

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

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

.rmt-page section.rmt-challenges {
  background: var(--rmt-neutral-9);
  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 `.rmt-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. */
.rmt-challenges .rmt-inner { width: 100%; max-width: none; }
@media (max-width: 900px) {
  .rmt-page section.rmt-challenges { padding: 56px 20px; min-height: 0; }
}
.rmt-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%;
}
.rmt-challenges-head h2 { flex: 0 1 auto; max-width: 640px; margin-bottom: 0; }
.rmt-challenges-head p { font-size: 16px; max-width: 480px; flex: 0 1 auto; }

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

.rmt-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. */
.rmt-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 (--rmt-text
   #1E2E4C instead of --rmt-primary #233963). */
.rmt-challenge-card h3 { font-size: 20px; font-weight: 700; color: var(--rmt-primary); margin-bottom: 8px; }
.rmt-challenge-card p { font-size: 16px; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* FIXED min-height, NOT aspect-ratio. Measured on live: the cluster is
   633x440 at a 1536px viewport but 445x440 at 1100px — 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, which
   is what made the whole composition collapse). Height drops to 367px below
   the 767px breakpoint; see the mobile block. No align-self — the row's
   align-items:stretch is what makes the sibling list column match this
   height, which is where the "empty space" fix actually comes from. */
.rmt-mockup-cluster {
  position: relative;
  flex: 1 1 50%;
  min-height: 440px;
}

/* NOT the same treatment as internal-auditing's mockup panels: confirmed
   live via getComputedStyle that this page's 3 real panels are
   background-size:contain, border-radius:0, box-shadow:none — `cover` was
   cropping the images (the "images are cutted" report), and the borrowed
   radius/shadow don't exist on the source. */
.rmt-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;
}
.rmt-mockup-panel.is-visible { opacity: 1; transform: translateY(0); }

/* 3 images on this page, not 4.
   THESE PERCENTAGES ARE RELATIVE TO THE CLUSTER, NOT THE FRAME. The first
   build measured them against the whole .screen-content-mock and got values
   that all sat inside the right-hand half (22-99%), which rendered three
   small, tidy, non-overlapping thumbnails — nothing like the real design.
   Measured properly against the cluster, the panels deliberately OVERFLOW
   it: panel 1 is 150% of the cluster's width starting at -58%, so it spills
   left across the list column and reads as one layered collage. The frame's
   own overflow:hidden clips the spill at the card edge, exactly as live. */
.rmt-mockup-panel--1 { left: -58%; top: 70.55%; width: 150%; height: 25.45%; transition-delay: 0ms; }
.rmt-mockup-panel--2 { left: -11%; top: 47.00%; width: 105%; height: 28.64%; transition-delay: 300ms; }
.rmt-mockup-panel--3 { left:  28%; top:  0.00%; width:  72%; height: 47.27%; transition-delay: 600ms; }

/* Tablet — live has its own Elementor tablet values here (measured at 820px:
   cluster still 440px tall, but the panels sit higher and shorter because
   the cluster is only ~333px wide at this width). */
@media (max-width: 1024px) {
  .rmt-mockup-panel--1 { top: 63.55%; height: 20.45%; }
  .rmt-mockup-panel--2 { left: 0;      top: 39.00%; width: 102%;    height: 16.82%; }
  .rmt-mockup-panel--3 { left: 23.05%; top:  0.00%; width: 76.95%;  height: 40.45%; }
}

/* Mobile — 767px, matching live's own breakpoint exactly (verified: at 820px
   the toolbar is still visible and the columns are still side by side; at
   760px the toolbar is gone and they have stacked). The previous 900px guess
   put the switch in the wrong place. */
@media (max-width: 767px) {
  .rmt-mac-head { flex-direction: column; gap: 12px; }
  .rmt-mac-head p { max-width: 100%; }
  .rmt-mac-content { flex-direction: column; align-items: stretch; }
  .rmt-plain-list { flex: none; padding: 20px; }

  /* The mac browser chrome is hidden on mobile on the live page
     (`hide_mobile` on .browser-top-img) — the card becomes a plain panel. */
  .rmt-mac-toolbar { display: none; }

  /* PLACEHOLDER, pending an iPhone/iPad top-bar asset from the user.
     .rmt-mac-frame declares `border-width: 0 4px 4px 4px` because on desktop
     the toolbar image *is* the top edge. With it hidden here the card was
     left open at the top, so close the box with a matching 4px edge. Once a
     real mobile device frame lands, drop this and render that image instead
     (same slot as .rmt-mac-toolbar, just a different breakpoint). */
  .rmt-mac-frame { border-top-width: 4px; }

  /* Cluster height drops 440 -> 367 and the panels re-flow to near-full
     width with no left spill (measured identical at 760px and 390px). */
  .rmt-mockup-cluster { width: 100%; min-height: 367px; flex: none; }
  .rmt-mockup-panel--1 { left: 0;   top: 67.66%; width: 100%; height: 22.34%; }
  .rmt-mockup-panel--2 { left: 2%;  top: 45.00%; width:  98%; height: 23.98%; }
  .rmt-mockup-panel--3 { left: 25%; top:  0.00%; width:  75%; height: 58.58%; }
}

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

.rmt-page section.rmt-portfolio {
  background-color: var(--rmt-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 .rmt-challenges above, same root cause. */
.rmt-portfolio .rmt-inner { width: 100%; max-width: none; }
@media (max-width: 900px) {
  .rmt-page section.rmt-portfolio { padding: 56px 20px; min-height: 0; }
}

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

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

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

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

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

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

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

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