/*
 * Other Industries Clone — Test Page Stylesheet
 * Hand-coded (no Elementor, no GSAP). Cloned from professional-services-
 * test, content/images/geometry swapped to post 7785's (/by-industry/
 * other-industries/) real data. Family's default shape: 3 Key Challenges
 * mockups, 3 Solutions cards, 2 Compliance charts, 4 Benefits cards.
 * Scoped under .oth-page.
 *
 * FIXED 2026-08-18 — this header and the .rkch-spacer rule below both
 * still named professional-services (post 7780 / page 15531), left over
 * from the sed-clone that created this file. The spacer rule therefore
 * matched the WRONG pages: it suppressed the header spacer on
 * professional-services (which has its own rule already) and never
 * suppressed it here, leaving a stray gap above this page's hero.
 */

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

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

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

/* Site-wide subtle tiled background pattern (from Figma "22" node),
   64x64px tile at 50% opacity, running the full height of the page.
   Confirmed via Figma that it sits behind every section — only visible
   on sections that don't have their own photo/color background. */
.oth-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;
}

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

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

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

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

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

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

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

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

.oth-h2 {
  font-size: 42px;
  line-height: 1.15;
  font-weight: 700;
}

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

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

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

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

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

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

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

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

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

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

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


.oth-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.oth-hero-eyebrow {
  color: #fff;
  font-size: 24px;
  font-weight: 600;
}

.oth-hero-h1 {
  color: #fff !important;
  font-size: 100px;
  line-height: 1.04;
  font-weight: 700;
  margin: 0;
}

.oth-hero-sub {
  color: #D1D5DB;
  font-size: 22px;
  line-height: 1.4;
  max-width: 860px;
}

@media (max-width: 900px) {
  .oth-hero-h1 { font-size: 56px; }
  .oth-hero-sub { font-size: 18px; }
}

/* ---------- Overview ---------- */

.oth-page section.oth-overview { text-align: center; padding-bottom: 0; }
.oth-overview .oth-h2 {
  margin-bottom: 20px;
  line-height: 52px;
  color: var(--oth-primary);
}
.oth-overview .oth-overview-copy {
  max-width: 1120px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 26px;
  color: var(--oth-primary);
}

/* ---------- Key Challenges (Mac-mockup frame) ---------- */

.oth-page section.oth-challenges {
  padding-top: 0;
  background-image: url("/wp-content/uploads/2025/07/image-196.png");
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
}

.oth-mac-frame {
  border: 5px solid var(--oth-text);
  border-radius: var(--oth-radius);
  overflow: hidden;
  background: #fff;
}

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

.oth-mac-head {
  background: var(--oth-neutral-9);
  border-bottom: 1px solid var(--oth-neutral-7);
  padding: 40px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.oth-mac-head .oth-h2 { flex-shrink: 0; }
.oth-mac-head p { max-width: 693px; font-size: 16px; }

.oth-mac-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  background: #F5FEFF;
  padding: 40px 32px;
}

.oth-mac-left h3 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 20px;
}

.oth-check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.oth-check-list li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.oth-check-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--oth-green);
  position: relative;
}
.oth-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);
}

/* FIXED 2026-08-17. Every value below is read from post 7785's real
   _elementor_data, not guessed. Back to the family's default THREE-mockup
   shape (unlike professional-services' 4-mockup deviation this was sed-
   cloned from).

   ANCHOR RESOLUTION: `_offset_orientation_h: end` means the panel is
   anchored by RIGHT, not left; `_offset_orientation_v: end` means BOTTOM.
     mockup 1 (fd2d6b5): left + top (no orientation flags at all)
     mockup 2 (11763ac): RIGHT + BOTTOM (both orientation flags = end)
     mockup 3 (5b1e156): RIGHT + top (only orientation_h = end)

   Container `.oth-mac-right` min-heights (447 / 477 / 596) are post 7785's
   own real container (8c3bfa5) values. */
.oth-mac-right {
  position: relative;
  min-height: 447px;
}
/* No box-shadow / border-radius here: verified across all 8 live pages that
   NOT ONE positioned panel carries any Elementor shadow or radius setting.
   These PNGs already have their own white card + soft shadow baked into the
   artwork, so adding a CSS shadow drew a SECOND, larger shadowed rectangle
   around the letterboxed empty space of the box. Removed 2026-08-18. */
.oth-mac-mockup {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.oth-mac-mockup--1 { left: 40%; top:    0%; width: 55%; height: 190px; }
.oth-mac-mockup--2 { right: 8%; bottom: 17%; width: 74%; height: 124px; }
.oth-mac-mockup--3 { right: 62%; top:  14%; width: 37%; height: 205px; }

@media (max-width: 1024px) {
  .oth-mac-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .oth-mac-content { grid-template-columns: 1fr; }
  .oth-mac-right { min-height: 477px; margin-top: 24px; }
  .oth-mac-mockup--1 { left:  2%; top:   4%; width: 90%; height: 167px; }
  .oth-mac-mockup--2 { right: 2%; bottom: 3%; width: 100%; height: 94px; }
  .oth-mac-mockup--3 { right: 12%; top: 37%; width: 61%; height: 197px; background-size: cover; }
}
@media (max-width: 767px) {
  .oth-mac-right { min-height: 596px; }
  .oth-mac-mockup--1 { left:  2%; top:   4%; width: 94%; height: 175px; }
  .oth-mac-mockup--2 { right: 2%; bottom: 3%; width: 100%; height: 103px; }
  .oth-mac-mockup--3 { right: 7%; top: 36%; width: 66%; height: 242px; }
}

/* ---------- Solutions by Function ---------- */

.oth-solutions { background: #fff; }
.oth-solutions .oth-h2 { margin-bottom: 8px; }
.oth-solutions-intro { font-size: 20px; margin-bottom: 32px; }

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

.oth-solution-card {
  background: var(--oth-neutral-9);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.oth-solution-label {
  display: inline-block;
  align-self: flex-start;
  background: var(--oth-text);
  color: #fff;
  font-weight: 600;
  font-size: 24px;
  padding: 3px 8px;
}

.oth-solution-card p {
  font-weight: 600;
  font-size: 24px;
  line-height: 1.35;
  color: var(--oth-text);
}

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

/* ---------- Compliance & Regulatory Highlights ---------- */

.oth-compliance { background: #fff; }
.oth-compliance-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.oth-compliance-copy { max-width: 490px; }
.oth-compliance-copy .oth-h2 { margin-bottom: 20px; }
.oth-compliance-copy p { font-size: 20px; }

/* Same anchor-resolution method as .oth-mac-mockup above. Anchors:
   chart 1 (c9f1850) RIGHT+BOTTOM, chart 2 (da620fa) RIGHT+top. Container
   (c260e7f) min-heights (246 / 239 / 268) ARE real live values on this
   page, unlike the sibling pages where that wrapper had none. Chart 1's
   own real numbers push it slightly above the container's top edge at
   every breakpoint (a bleed, not a bug — container is overflow:visible);
   computed pairwise overlap between the two charts stays in the 12-20%
   corner-overlap range already confirmed safe elsewhere in this family. */
.oth-compliance-charts {
  position: relative;
  flex: 1 1 400px;
  min-height: 246px;
}
/* No box-shadow / border-radius here: verified across all 8 live pages that
   NOT ONE positioned panel carries any Elementor shadow or radius setting.
   These PNGs already have their own white card + soft shadow baked into the
   artwork, so adding a CSS shadow drew a SECOND, larger shadowed rectangle
   around the letterboxed empty space of the box. Removed 2026-08-18. */
.oth-compliance-chart {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.oth-compliance-chart--1 { right:  8%; bottom: 38%; width: 67%; height: 176px; background-size: cover; }
.oth-compliance-chart--2 { right: 46%; top:    45%; width: 67%; height: 146px; background-size: auto; }

@media (max-width: 1024px) {
  .oth-compliance-charts { width: 100%; min-height: 239px; }
  .oth-compliance-chart--1 { right: -2%; bottom: 36%; width: 100%; height: 139px; }
  .oth-compliance-chart--2 { right: 24%; top:    54%; width: 100%; height: 100px; background-size: cover; }
}
@media (max-width: 767px) {
  .oth-compliance-charts { min-height: 268px; }
  .oth-compliance-chart--1 { right: -2%; bottom: -5%; width: 100%; height: 140px; }
  .oth-compliance-chart--2 { right:  0%; top:    18%; width: 100%; height: 101px; }
}

/* ---------- Benefits ---------- */

.oth-benefits { background: var(--oth-mint-gradient); }
.oth-benefits .oth-h2 { margin-bottom: 48px; }

.oth-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.oth-benefit-card {
  background: #fff;
  border-radius: var(--oth-radius);
  overflow: hidden;
}

.oth-benefit-media {
  height: 191px;
  background: var(--oth-neutral-9);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--oth-neutral-7);
  padding: 24px;
}
.oth-benefit-media img { max-height: 100%; width: auto; object-fit: contain; }

.oth-benefit-body { padding: 24px; display: flex; flex-direction: column; gap: 15px; }
.oth-benefit-body h3 { font-size: 22px; font-weight: 600; color: #09101D; }

.oth-benefit-pill {
  align-self: flex-start;
  background: var(--oth-neutral-8);
  color: var(--oth-primary);
  font-weight: 700;
  font-size: 12px;
  padding: 3px 11px;
  border-radius: 9999px;
}

.oth-benefit-body p { font-size: 16px; font-weight: 500; }

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

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

.oth-related { background: #fff; }
.oth-cta {
  background: #fff;
  padding-top: 0 !important;
  padding-bottom: 96px !important;
  overflow-x: hidden;
  overflow-y: visible;
}
@media (max-width: 767px) {
  .oth-cta { padding-bottom: 56px !important; }
}

/* ---------- Lead magnet CTA (.lm-cta-banner) — page-scope override ----------
   .oth-page section{padding:96px 4vw} (0,1,1) otherwise beats the module's
   own .lm-cta-banner padding (0,1,0) — same bug already fixed once for
   .eet-page; ported here. */
.oth-page section.lm-cta-banner {
  padding: 0 4vw;
}
@media (max-width: 900px) {
  .oth-page section.lm-cta-banner {
    padding: 56px 20px !important;
  }
}

/* ---------- CTA section-8 on-scroll pattern layer ----------
   Vanilla-JS port of the live post 7691's .pattern-wrapper/.hrimgwrapperlft
   GSAP ScrollTrigger effect (this page excludes all site GSAP). Fixed
   dimensions from first paint — only `transform` is ever touched by JS,
   never width/height/margin, to avoid reflow. */
.oth-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%);
}