/*
 * GFX Hawker — Home Global V2 full-site contract
 * Sandbox authority: WP8-HOME-GLOBAL-FULL-SITE-ENFORCEMENT
 *
 * Purpose:
 * Make the user-approved Home + Global V2 system the final shared visual layer
 * for every non-Home Final UI page without replacing page-specific structure.
 *
 * Home itself is excluded from all content overrides so exact Home parity stays
 * owned by the locked Home/Global V2 source.
 */

body.gfx-final-ui-wordpress {
  --gh-navy: #000033;
  --gh-navy-deep: #000016;
  --gh-ink: #101116;
  --gh-muted: #62636c;
  --gh-red: #b31912;
  --gh-red-dark: #8f140e;
  --gh-rule: #dedee4;
  --gh-soft: #f4f3ef;
  --gh-paper: #fbfaf7;
  --gh-white: #fff;
  --gh-shell: 1320px;
  --gh-gutter: clamp(22px, 4vw, 56px);
  --gh-display: "Instrument Sans", "Inter", "Segoe UI", Arial, sans-serif;
  --gh-body: "Instrument Sans", "Inter", "Segoe UI", Arial, sans-serif;
  --gh-motion-fast: 180ms;
  --gh-motion-medium: 220ms;
}

.gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) {
  color: var(--gh-ink);
  background: var(--gh-white);
  font-family: var(--gh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/*
 * Historical page bundles used several names for the same brand roles.
 * Resolve those names back to Home's locked palette in one last-loaded layer.
 */
.gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) :where(
  .gfx-html2wp-view--desktop,
  .gfx-html2wp-view--mobile
) {
  --navy: var(--gh-navy) !important;
  --navy-2: var(--gh-navy-deep) !important;
  --navy2: var(--gh-navy-deep) !important;
  --navy3: var(--gh-navy-deep) !important;
  --navy-deep: var(--gh-navy-deep) !important;
  --red: var(--gh-red) !important;
  --crimson: var(--gh-red) !important;
  --crimson-dark: var(--gh-red-dark) !important;
  --ink: var(--gh-ink) !important;
  --muted: var(--gh-muted) !important;
  --line: var(--gh-rule) !important;
  --soft: var(--gh-soft) !important;
  --white: var(--gh-white) !important;
  --gutter: var(--gh-gutter) !important;
  --max: var(--gh-shell) !important;
}

/* ---------- Typography: one Home-owned family and role language ---------- */

.gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) :where(
  h1,h2,h3,h4,h5,h6,p,li,a,button,label,input,textarea,select,option,
  small,strong,em,blockquote,dt,dd,th,td
) {
  font-family: var(--gh-body) !important;
}

.gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) :where(h1,h2,h3) {
  font-family: var(--gh-display) !important;
  color: var(--gh-navy);
  text-wrap: balance;
}

.gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) h1 {
  font-size: clamp(54px, 5vw, 72px) !important;
  line-height: .96 !important;
  font-weight: 730 !important;
  letter-spacing: -.052em !important;
}

.gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) h2 {
  line-height: 1.01 !important;
  font-weight: 680 !important;
  letter-spacing: -.043em !important;
}

.gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) h3 {
  line-height: 1.12 !important;
  font-weight: 660 !important;
  letter-spacing: -.028em !important;
}

.gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) :where(
  .font-label-caps,.eyebrow,.section-kicker,.project-meta,.card-index,
  .microline,.system-topline,[class*="tracking-widest"][class*="uppercase"]
) {
  font-family: var(--gh-body) !important;
  font-weight: 800 !important;
  letter-spacing: .17em !important;
  text-transform: uppercase;
}

/* Home's crimson eyebrow language is a shared page-level role, not page decoration. */
.gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) :where(
  .eyebrow,.gh-wp3-eyebrow,.wf-hero-premium__eyebrow
) {
  color: var(--gh-red) !important;
}

/* Preserve icon glyph ownership instead of forcing the text family onto icons. */
.gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) :where(
  .material-symbols-outlined,.dashicons,[aria-hidden="true"] svg
) {
  font-family: inherit;
}

/* ---------- Home palette mapped onto common historical page utilities ---------- */

.gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) :where(
  .text-deep-navy,.text-primary,.text-brand-navy
) { color: var(--gh-navy) !important; }

.gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) :where(
  .text-gfx-crimson,.text-crimson,.text-brand-crimson
) { color: var(--gh-red) !important; }

.gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) :where(
  .bg-deep-navy,.bg-navy,.bg-brand-navy
) { background-color: var(--gh-navy) !important; }

.gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) :where(
  .bg-gfx-crimson,.bg-crimson,.bg-brand-crimson
) { background-color: var(--gh-red) !important; }

.gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) :where(
  .bg-surface-container-low,.bg-surface-container,.bg-brand-soft-neutral
) { background-color: var(--gh-soft) !important; }

.gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) :where(
  .border-outline-variant,.border-brand-border
) { border-color: var(--gh-rule) !important; }

/* ---------- Home shell/gutter rhythm without flattening page structure ---------- */

.gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) .px-margin-page {
  padding-left: var(--gh-gutter) !important;
  padding-right: var(--gh-gutter) !important;
}

.gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) [class~="max-w-[1320px]"] {
  max-width: var(--gh-shell) !important;
}

.gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) .py-section-padding-lg {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}

.gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) .py-section-padding-md {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

.gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) .py-section-padding-sm {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}

/*
 * Home shell alignment is global. These historical page bundles used inner
 * padding on their generic containers, producing 24–43px extra insets even
 * though the outer WordPress view was full width.
 */
.gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) :is(
  .gfx-html2wp-view--desktop[data-gfx-page="custom-software-development"] .container,
  .gfx-html2wp-view--mobile[data-gfx-page="custom-software-development"] .container,
  .gfx-html2wp-view--desktop[data-gfx-page="mobile-app-development"] .container,
  .gfx-html2wp-view--mobile[data-gfx-page="mobile-app-development"] .container,
  .gfx-html2wp-view--desktop[data-gfx-page="social-media-management"] .container,
  .gfx-html2wp-view--mobile[data-gfx-page="social-media-management"] .container,
  .gfx-html2wp-view--desktop[data-gfx-page="contact"] .container,
  .gfx-html2wp-view--mobile[data-gfx-page="contact"] .shell
) {
  width: min(var(--gh-shell), calc(100% - (var(--gh-gutter) * 2))) !important;
  max-width: var(--gh-shell) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---------- Text links: global underline rule for ordinary copy ---------- */

.gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) :where(p,li) a {
  color: inherit;
  text-decoration-line: underline !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: rgba(179,25,18,.58) !important;
  text-underline-offset: 3px !important;
  transition:
    color var(--gh-motion-fast) ease,
    text-decoration-color var(--gh-motion-fast) ease !important;
}

.gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) :where(p,li) a:hover {
  color: var(--gh-red) !important;
  text-decoration-color: currentColor !important;
}

/* ---------- Primary action: Home crimson button language ---------- */

/*
 * Canonical primary conversion links point to /contact/. Restrict this button
 * treatment to non-copy anchors so ordinary contextual links remain text links.
 */
.gfx-final-ui-root:not([data-gfx-final-ui-root="home"])
a[href="/contact/"]:not(p a):not(li a) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 48px !important;
  padding: 0 22px !important;
  border: 1px solid var(--gh-red) !important;
  border-radius: 2px !important;
  background: var(--gh-red) !important;
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: none !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 760 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  white-space: normal;
  transition:
    background-color var(--gh-motion-fast) ease,
    border-color var(--gh-motion-fast) ease,
    transform var(--gh-motion-fast) ease !important;
}

.gfx-final-ui-root:not([data-gfx-final-ui-root="home"])
a[href="/contact/"]:not(p a):not(li a):hover {
  background: var(--gh-red-dark) !important;
  border-color: var(--gh-red-dark) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

.gfx-final-ui-root:not([data-gfx-final-ui-root="home"])
a[href="/contact/"]:not(p a):not(li a):active {
  transform: translateY(0);
}

/* ---------- Secondary proof action: Home text-link language ---------- */

.gfx-final-ui-root:not([data-gfx-final-ui-root="home"])
a[href="/case-studies/"]:not(p a):not(li a) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: auto !important;
  padding: 0 0 4px !important;
  border: 0 !important;
  border-bottom: 1px solid currentColor !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--gh-ink) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 680 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition:
    color var(--gh-motion-fast) ease,
    border-color var(--gh-motion-fast) ease,
    transform var(--gh-motion-fast) ease !important;
}

.gfx-final-ui-root:not([data-gfx-final-ui-root="home"])
a[href="/case-studies/"]:not(p a):not(li a):hover {
  color: var(--gh-red) !important;
  transform: translateX(2px);
}

/* Contact form submission is also a primary conversion control. */
.gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) :where(
  button[type="submit"],
  .submit-btn
) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 48px !important;
  padding: 0 22px !important;
  border: 1px solid var(--gh-red) !important;
  border-radius: 2px !important;
  background: var(--gh-red) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 760 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  transition:
    background-color var(--gh-motion-fast) ease,
    border-color var(--gh-motion-fast) ease,
    transform var(--gh-motion-fast) ease !important;
}

@media (hover:hover) and (pointer:fine) {
  .gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) :where(
    button[type="submit"],
    .submit-btn
  ):hover {
    background: var(--gh-red-dark) !important;
    border-color: var(--gh-red-dark) !important;
    transform: translateY(-1px);
  }
}

/* ---------- Shared interaction language ---------- */

.gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) :where(a,button,input,textarea,select) {
  transition-duration: var(--gh-motion-fast);
  transition-timing-function: ease;
}

.gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) :where(a,button,input,textarea,select):focus-visible {
  outline: 3px solid var(--gh-red) !important;
  outline-offset: 4px !important;
}

.gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) :where(button,[role="button"]):active {
  transform: translateY(0);
}

/* ---------- Form language ---------- */

.gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) :where(input,textarea,select) {
  border-radius: 2px !important;
  border-color: var(--gh-rule);
  background: #fff;
  color: var(--gh-ink);
  font-family: var(--gh-body) !important;
}

.gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) :where(input,textarea,select):focus {
  border-color: var(--gh-red) !important;
  box-shadow: 0 0 0 2px rgba(179,25,18,.12) !important;
}

.gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) label {
  color: var(--gh-ink);
  font-weight: 650;
}

/* ---------- Shared shape discipline ---------- */

.gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) :where(
  a[href="/contact/"],button,input,textarea,select
) {
  border-radius: 2px !important;
}

.gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) img {
  border-radius: min(4px, var(--gfx-media-radius, 4px));
}

/* ---------- Mobile: same Home system, independently composed ---------- */

@media (max-width: 1280px) {
  body.gfx-final-ui-wordpress {
    --gh-shell: 1180px;
    --gh-gutter: 34px;
  }
}

@media (max-width: 1120px) {
  body.gfx-final-ui-wordpress {
    --gh-shell: 1020px;
    --gh-gutter: 30px;
  }
}

@media (max-width: 960px) {
  body.gfx-final-ui-wordpress {
    --gh-shell: 860px;
    --gh-gutter: 28px;
  }
}

@media (max-width: 768px) {
  body.gfx-final-ui-wordpress { --gh-gutter: 24px; }

  /*
   * Production mobile must use the actual viewport. Several historical mobile
   * review artifacts intentionally centered a fixed 414/430px canvas above
   * their design-review width; that behavior is not valid site behavior.
   */
  .gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) > .gfx-html2wp-view--mobile {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) .gfx-html2wp-view--mobile .review-canvas {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-shadow: none !important;
  }

  /*
   * Workflow's approved mobile composition uses direct full-width sections
   * with no inner wrapper. Keep the section backgrounds full-bleed while
   * applying Home's mobile content gutter to the section content.
   */
  .gfx-final-ui-root[data-gfx-final-ui-root="workflow-automation"]
  .gfx-html2wp-view--mobile > section {
    padding-left: var(--gh-gutter) !important;
    padding-right: var(--gh-gutter) !important;
  }

  .gfx-final-ui-root[data-gfx-final-ui-root="workflow-automation"]
  .gfx-html2wp-view--mobile > section:first-child > .font-label-caps:first-child {
    color: var(--gh-red) !important;
  }

  /*
   * White-Label's V3 prototype used a square placeholder for TinyHelperTools.
   * The verified production proof is landscape; adapt the media frame to the
   * real asset so mobile does not ship a large empty square above the image.
   */
  .gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
  .gfx-html2wp-view--mobile div:has(> img[data-gfx-approved-media="media:home:tinyhelpertools"]) {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    padding: 10px !important;
    display: block !important;
  }

  .gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
  .gfx-html2wp-view--mobile img[data-gfx-approved-media="media:home:tinyhelpertools"] {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: left top !important;
    margin: 0 !important;
  }

  .gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) h1 {
    font-size: clamp(42px, 7.2vw, 50px) !important;
    line-height: .98 !important;
  }

  .gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) .py-section-padding-lg {
    padding-top: 76px !important;
    padding-bottom: 76px !important;
  }

  .gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) .py-section-padding-md {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  .gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) .py-section-padding-sm {
    padding-top: 46px !important;
    padding-bottom: 46px !important;
  }
}

@media (max-width: 640px) {
  body.gfx-final-ui-wordpress { --gh-gutter: 20px; }

  .gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) h1 {
    font-size: clamp(40px, 10.4vw, 46px) !important;
    line-height: .96 !important;
    letter-spacing: -.046em !important;
  }

  .gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) h2 {
    line-height: 1.03 !important;
    letter-spacing: -.038em !important;
  }

  .gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) .px-margin-page,
  .gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) .px-5 {
    padding-left: var(--gh-gutter) !important;
    padding-right: var(--gh-gutter) !important;
  }

  .gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) a[href="/contact/"]:not(p a):not(li a) {
    min-height: 44px !important;
    padding: 0 18px !important;
    width: max-content !important;
    max-width: 100% !important;
  }

  .gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) .py-section-padding-lg {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  .gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) .py-section-padding-md {
    padding-top: 54px !important;
    padding-bottom: 54px !important;
  }

  .gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) .py-section-padding-sm {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

@media (max-width: 430px) {
  body.gfx-final-ui-wordpress { --gh-gutter: 19px; }

  .gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) h1 {
    font-size: clamp(40px, 10.2vw, 44px) !important;
  }
}

@media (max-width: 390px) {
  body.gfx-final-ui-wordpress { --gh-gutter: 18px; }
}

@media (max-width: 360px) {
  body.gfx-final-ui-wordpress { --gh-gutter: 16px; }
}

@media (hover: none) {
  .gfx-final-ui-root:not([data-gfx-final-ui-root="home"])
  a[href="/contact/"]:not(p a):not(li a):hover,
  .gfx-final-ui-root:not([data-gfx-final-ui-root="home"])
  a[href="/case-studies/"]:not(p a):not(li a):hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

  .gfx-final-ui-root:not([data-gfx-final-ui-root="home"]),
  .gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) *,
  .gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) *::before,
  .gfx-final-ui-root:not([data-gfx-final-ui-root="home"]) *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}

/* WP8 user-directed White-Label proof refinement — 2026-09-23
 *
 * Premium here means restraint: real proof, strong typography, clean spacing,
 * correct image geometry and no invented visual noise.
 */
.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"] {
  --wl-proof-dark: #000033;
  --wl-proof-soft: #f7f7f5;
  --wl-proof-line: rgba(255,255,255,.16);
  --wl-proof-shadow: 0 18px 54px rgba(0,0,24,.12);
}

/* Remove decorative pseudo-elements from the three proof moments. */
.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
[data-gfx-final-ui-active] > section:nth-of-type(3) > div::before,
.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
[data-gfx-final-ui-active] > section:nth-of-type(3) > div::after,
.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
[data-gfx-final-ui-active] > section:nth-of-type(3) > div > div::before,
.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
[data-gfx-final-ui-active] > section:nth-of-type(3) > div > div::after {
  content: none !important;
  display: none !important;
}

/* 1) Dubai Sticker Printing / Media Print UAE
 * Simple editorial copy + real proof image.
 */
.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--desktop[data-gfx-page="white-label-development"]
> section:nth-of-type(3) > div:nth-child(1) {
  display: grid !important;
  grid-template-columns: minmax(300px,.8fr) minmax(0,1.2fr) !important;
  gap: clamp(44px,5vw,78px) !important;
  align-items: center !important;
  padding-top: clamp(72px,7vw,104px) !important;
  padding-bottom: clamp(72px,7vw,104px) !important;
  background: var(--wl-proof-dark) !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--desktop[data-gfx-page="white-label-development"]
> section:nth-of-type(3) > div:nth-child(1) > div:first-child {
  width: 100% !important;
  max-width: 540px !important;
  margin: 0 !important;
  align-items: flex-start !important;
  text-align: left !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--desktop[data-gfx-page="white-label-development"]
> section:nth-of-type(3) > div:nth-child(1) > div:first-child p {
  max-width: 540px !important;
  color: rgba(255,255,255,.76) !important;
  line-height: 1.62 !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--desktop[data-gfx-page="white-label-development"]
> section:nth-of-type(3) > div:nth-child(1) > div:nth-child(2) {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--wl-proof-line) !important;
  border-radius: 3px !important;
  background: #fff !important;
  box-shadow: 0 22px 64px rgba(0,0,0,.18) !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
img[data-gfx-approved-media="media:home:dubai-sticker-printing"] {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center top !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
}

/* 2) TinyHelperTools / Growth OS
 * Intrinsic screenshot geometry. No fixed-height frame and no fake chrome.
 */
.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--desktop[data-gfx-page="white-label-development"]
> section:nth-of-type(3) > div:nth-child(2) {
  padding-top: clamp(72px,7vw,104px) !important;
  padding-bottom: clamp(72px,7vw,104px) !important;
  background: var(--wl-proof-soft) !important;
  border-bottom: 1px solid var(--gh-rule) !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--desktop[data-gfx-page="white-label-development"]
> section:nth-of-type(3) > div:nth-child(2) > div {
  grid-template-columns: minmax(300px,.78fr) minmax(0,1.22fr) !important;
  gap: clamp(44px,5vw,78px) !important;
  align-items: center !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--desktop[data-gfx-page="white-label-development"]
> section:nth-of-type(3) > div:nth-child(2) > div > div:first-child,
.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--desktop[data-gfx-page="white-label-development"]
> section:nth-of-type(3) > div:nth-child(2) > div > div:nth-child(2) {
  grid-column: auto !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--desktop[data-gfx-page="white-label-development"]
> section:nth-of-type(3) > div:nth-child(2) > div > div:first-child {
  padding-right: 0 !important;
  max-width: 540px !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--desktop[data-gfx-page="white-label-development"]
> section:nth-of-type(3) > div:nth-child(2) > div > div:nth-child(2) {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--gh-rule) !important;
  border-radius: 3px !important;
  background: #fff !important;
  box-shadow: var(--wl-proof-shadow) !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
img[data-gfx-approved-media="media:home:tinyhelpertools"] {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center top !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #fff !important;
}

/* 3) Multi-Workflow Systems
 * Deliberately editorial. No invented diagram, no decorative network map.
 */
.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--desktop[data-gfx-page="white-label-development"]
> section:nth-of-type(3) > div:nth-child(3) {
  min-height: 0 !important;
  padding-top: clamp(76px,7vw,108px) !important;
  padding-bottom: clamp(76px,7vw,108px) !important;
  overflow: visible !important;
  background: var(--wl-proof-dark) !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--desktop[data-gfx-page="white-label-development"]
> section:nth-of-type(3) > div:nth-child(3) > div {
  display: block !important;
  width: min(100%,1320px) !important;
  margin-inline: auto !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--desktop[data-gfx-page="white-label-development"]
> section:nth-of-type(3) > div:nth-child(3) > div > div {
  width: min(760px,100%) !important;
  max-width: 760px !important;
  margin: 0 !important;
  padding-left: clamp(24px,3vw,40px) !important;
  border-left: 2px solid var(--gh-red) !important;
  text-align: left !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--desktop[data-gfx-page="white-label-development"]
> section:nth-of-type(3) > div:nth-child(3) p {
  max-width: 720px !important;
  color: rgba(255,255,255,.76) !important;
  line-height: 1.65 !important;
}

/* Tablet: stack proof copy and media cleanly. */
@media (max-width: 1080px) {
  .gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
  .gfx-html2wp-view--desktop[data-gfx-page="white-label-development"]
  > section:nth-of-type(3) > div:nth-child(1) {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  .gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
  .gfx-html2wp-view--desktop[data-gfx-page="white-label-development"]
  > section:nth-of-type(3) > div:nth-child(2) > div {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }
}

/* Mobile gets the same content with small-screen composition, not shrunk desktop. */
.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--mobile[data-gfx-page="white-label-development"]
> section:nth-of-type(3) > div:nth-child(1),
.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--mobile[data-gfx-page="white-label-development"]
> section:nth-of-type(3) > div:nth-child(3) {
  padding: 54px var(--gh-gutter) 58px !important;
  background: var(--wl-proof-dark) !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--mobile[data-gfx-page="white-label-development"]
> section:nth-of-type(3) > div:nth-child(2) {
  padding: 54px var(--gh-gutter) 58px !important;
  background: var(--wl-proof-soft) !important;
  border-bottom: 1px solid var(--gh-rule) !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--mobile[data-gfx-page="white-label-development"]
> section:nth-of-type(3) > div:nth-child(1) > div:nth-child(2),
.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--mobile[data-gfx-page="white-label-development"]
> section:nth-of-type(3) > div:nth-child(2) > div:nth-child(2) {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 3px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--mobile[data-gfx-page="white-label-development"]
> section:nth-of-type(3) > div:nth-child(1) > div:nth-child(2) {
  border: 1px solid rgba(255,255,255,.18) !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--mobile[data-gfx-page="white-label-development"]
> section:nth-of-type(3) > div:nth-child(2) > div:nth-child(2) {
  border: 1px solid var(--gh-rule) !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--mobile[data-gfx-page="white-label-development"]
> section:nth-of-type(3) > div:nth-child(3) > div:first-child {
  margin-bottom: 0 !important;
  padding-left: 20px !important;
  border-left: 2px solid var(--gh-red) !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--mobile[data-gfx-page="white-label-development"]
> section:nth-of-type(3) > div:nth-child(3) > div:nth-child(2) {
  display: none !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--mobile[data-gfx-page="white-label-development"]
> section:nth-of-type(3) h3 {
  line-height: 1.02 !important;
  letter-spacing: -.035em !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--mobile[data-gfx-page="white-label-development"]
> section:nth-of-type(3) > div:nth-child(1) p,
.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--mobile[data-gfx-page="white-label-development"]
> section:nth-of-type(3) > div:nth-child(3) p {
  color: rgba(255,255,255,.76) !important;
  line-height: 1.62 !important;
}

@media (max-width: 360px) {
  .gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
  .gfx-html2wp-view--mobile[data-gfx-page="white-label-development"]
  > section:nth-of-type(3) > div {
    padding-top: 48px !important;
    padding-bottom: 50px !important;
  }
}

/* Win over the restored mobile prototype's fixed-height cover rules at the
 * active White-Label mobile scope. Real proof media must keep its geometry. */
.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--mobile[data-gfx-page="white-label-development"][data-gfx-final-ui-active]
img[data-gfx-approved-media="media:home:dubai-sticker-printing"],
.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--mobile[data-gfx-page="white-label-development"][data-gfx-final-ui-active]
img[data-gfx-approved-media="media:home:tinyhelpertools"] {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center top !important;
}



/* WP8 White-Label proof crop + ownership-font correction — 2026-09-24
 *
 * User review: the two real project screenshots were still visually too wide,
 * and the six agency-ownership points retained legacy White-Label typography.
 * Crop media without geometric distortion and force those point roles onto the
 * Home Global body stack.
 */

/* Desktop proof frames: narrower, deliberately cropped project evidence. */
.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--desktop[data-gfx-page="white-label-development"]
> section:nth-of-type(3) > div:nth-child(1) {
  grid-template-columns: minmax(320px,.92fr) minmax(420px,1.08fr) !important;
  gap: clamp(40px,4.5vw,68px) !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--desktop[data-gfx-page="white-label-development"]
> section:nth-of-type(3) > div:nth-child(1) > div:nth-child(2) {
  width: min(100%,580px) !important;
  max-width: 580px !important;
  aspect-ratio: 2 / 1 !important;
  justify-self: end !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--desktop[data-gfx-page="white-label-development"]
> section:nth-of-type(3) > div:nth-child(2) > div {
  grid-template-columns: minmax(320px,.92fr) minmax(420px,1.08fr) !important;
  gap: clamp(40px,4.5vw,68px) !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--desktop[data-gfx-page="white-label-development"]
> section:nth-of-type(3) > div:nth-child(2) > div > div:nth-child(2) {
  width: min(100%,580px) !important;
  max-width: 580px !important;
  aspect-ratio: 2 / 1 !important;
  justify-self: end !important;
}

/* Real proof screenshots fill a crop frame; cover crops, it does not stretch. */
.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
img[data-gfx-approved-media="media:home:dubai-sticker-printing"],
.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
img[data-gfx-approved-media="media:home:tinyhelpertools"] {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: cover !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
img[data-gfx-approved-media="media:home:dubai-sticker-printing"] {
  object-position: center 46% !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
img[data-gfx-approved-media="media:home:tinyhelpertools"] {
  object-position: center bottom !important;
}

/* Mobile proof frames get the same deliberate crop at useful visual scale. */
.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--mobile[data-gfx-page="white-label-development"][data-gfx-final-ui-active]
> section:nth-of-type(3) > div:nth-child(1) > div:nth-child(2),
.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--mobile[data-gfx-page="white-label-development"][data-gfx-final-ui-active]
> section:nth-of-type(3) > div:nth-child(2) > div:nth-child(2) {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2 / 1 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--mobile[data-gfx-page="white-label-development"][data-gfx-final-ui-active]
img[data-gfx-approved-media="media:home:dubai-sticker-printing"],
.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--mobile[data-gfx-page="white-label-development"][data-gfx-final-ui-active]
img[data-gfx-approved-media="media:home:tinyhelpertools"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--mobile[data-gfx-page="white-label-development"][data-gfx-final-ui-active]
img[data-gfx-approved-media="media:home:dubai-sticker-printing"] {
  object-position: center 46% !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--mobile[data-gfx-page="white-label-development"][data-gfx-final-ui-active]
img[data-gfx-approved-media="media:home:tinyhelpertools"] {
  object-position: center bottom !important;
}

/* Desktop six ownership points: override legacy page font role. */
.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--desktop[data-gfx-page="white-label-development"][data-gfx-final-ui-active]
> section:nth-of-type(4) h3 + div > div {
  font-family: var(--gh-body) !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
}

/* Mobile six ownership points use a <ul>; keep the same Home Global role. */
.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--mobile[data-gfx-page="white-label-development"][data-gfx-final-ui-active]
> section:nth-of-type(4) ul > li {
  font-family: var(--gh-body) !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
}

@media (max-width: 1080px) and (min-width: 769px) {
  .gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
  .gfx-html2wp-view--desktop[data-gfx-page="white-label-development"]
  > section:nth-of-type(3) > div:nth-child(1),
  .gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
  .gfx-html2wp-view--desktop[data-gfx-page="white-label-development"]
  > section:nth-of-type(3) > div:nth-child(2) > div {
    grid-template-columns: 1fr !important;
  }

  .gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
  .gfx-html2wp-view--desktop[data-gfx-page="white-label-development"]
  > section:nth-of-type(3) > div:nth-child(1) > div:nth-child(2),
  .gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
  .gfx-html2wp-view--desktop[data-gfx-page="white-label-development"]
  > section:nth-of-type(3) > div:nth-child(2) > div > div:nth-child(2) {
    justify-self: start !important;
  }
}


/* TinyHelperTools needs a wider crop to remove obsolete screenshot chrome. */
.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--desktop[data-gfx-page="white-label-development"]
> section:nth-of-type(3) > div:nth-child(2) > div > div:nth-child(2),
.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--mobile[data-gfx-page="white-label-development"][data-gfx-final-ui-active]
> section:nth-of-type(3) > div:nth-child(2) > div:nth-child(2) {
  aspect-ratio: 9 / 4 !important;
}


/* TinyHelperTools proof uses a wider crop to remove obsolete top-strip UI. */
.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--desktop[data-gfx-page="white-label-development"]
> section:nth-of-type(3) > div:nth-child(2) > div > div:nth-child(2),
.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--mobile[data-gfx-page="white-label-development"][data-gfx-final-ui-active]
> section:nth-of-type(3) > div:nth-child(2) > div:nth-child(2) {
  aspect-ratio: 12 / 5 !important;
}


/* WP8 White-Label Dubai proof boxed-layout correction — 2026-09-24
 *
 * User review: the Dubai / Media Print proof was still full-bleed while the
 * rest of the page uses contained premium compositions. Make the actual dark
 * proof block a centered responsive panel; preserve copy and the verified 2:1
 * crop exactly.
 */
.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--desktop[data-gfx-page="white-label-development"][data-gfx-final-ui-active]
> section:nth-of-type(3) {
  background: var(--wl-proof-soft) !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--desktop[data-gfx-page="white-label-development"][data-gfx-final-ui-active]
> section:nth-of-type(3) > div:nth-child(1) {
  width: min(calc(100% - (2 * var(--gh-gutter))),1320px) !important;
  max-width: 1320px !important;
  margin: clamp(48px,5vw,72px) auto !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 52px rgba(0,0,24,.10) !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--mobile[data-gfx-page="white-label-development"][data-gfx-final-ui-active]
> section:nth-of-type(3) {
  background: var(--wl-proof-soft) !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--mobile[data-gfx-page="white-label-development"][data-gfx-final-ui-active]
> section:nth-of-type(3) > div:nth-child(1) {
  width: calc(100% - (2 * var(--gh-gutter))) !important;
  max-width: none !important;
  margin: 34px auto 0 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  box-shadow: 0 14px 36px rgba(0,0,24,.10) !important;
}

@media (max-width: 360px) {
  .gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
  .gfx-html2wp-view--mobile[data-gfx-page="white-label-development"][data-gfx-final-ui-active]
  > section:nth-of-type(3) > div:nth-child(1) {
    margin-top: 28px !important;
  }
}


/* WP8 White-Label Dubai full-bleed background + inner-box correction — 2026-09-24
 *
 * Correct interpretation of the user's boxed-layout request:
 * keep the navy section background full-width; box only the content composition.
 * Do not crop the section background itself.
 */
.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--desktop[data-gfx-page="white-label-development"][data-gfx-final-ui-active]
> section:nth-of-type(3) > div:nth-child(1) {
  --wl-dsp-box-edge: max(var(--gh-gutter), calc((100% - 1240px) / 2));
  position: relative !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-top: clamp(84px,7vw,108px) !important;
  padding-bottom: clamp(84px,7vw,108px) !important;
  padding-left: calc(var(--wl-dsp-box-edge) + clamp(36px,3.4vw,52px)) !important;
  padding-right: calc(var(--wl-dsp-box-edge) + clamp(36px,3.4vw,52px)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: var(--wl-proof-dark) !important;
  box-shadow: none !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--desktop[data-gfx-page="white-label-development"][data-gfx-final-ui-active]
> section:nth-of-type(3) > div:nth-child(1)::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 0 !important;
  top: clamp(36px,3.5vw,50px) !important;
  bottom: clamp(36px,3.5vw,50px) !important;
  left: var(--wl-dsp-box-edge) !important;
  right: var(--wl-dsp-box-edge) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 4px !important;
  background: rgba(255,255,255,.018) !important;
  box-shadow: 0 18px 52px rgba(0,0,20,.16) !important;
  pointer-events: none !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--desktop[data-gfx-page="white-label-development"][data-gfx-final-ui-active]
> section:nth-of-type(3) > div:nth-child(1) > div {
  position: relative !important;
  z-index: 1 !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--mobile[data-gfx-page="white-label-development"][data-gfx-final-ui-active]
> section:nth-of-type(3) > div:nth-child(1) {
  --wl-dsp-box-edge: var(--gh-gutter);
  position: relative !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 58px calc(2 * var(--gh-gutter)) 62px !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: var(--wl-proof-dark) !important;
  box-shadow: none !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--mobile[data-gfx-page="white-label-development"][data-gfx-final-ui-active]
> section:nth-of-type(3) > div:nth-child(1)::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 0 !important;
  top: 28px !important;
  bottom: 28px !important;
  left: var(--wl-dsp-box-edge) !important;
  right: var(--wl-dsp-box-edge) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 4px !important;
  background: rgba(255,255,255,.018) !important;
  box-shadow: 0 12px 30px rgba(0,0,20,.14) !important;
  pointer-events: none !important;
}

.gfx-final-ui-root[data-gfx-final-ui-root="white-label-development"]
.gfx-html2wp-view--mobile[data-gfx-page="white-label-development"][data-gfx-final-ui-active]
> section:nth-of-type(3) > div:nth-child(1) > div {
  position: relative !important;
  z-index: 1 !important;
}