/*
 * GFX Hawker Final UI → WordPress bridge
 * Authority: design/locked-references/final-ui-2026-09-21/
 *
 * Blocksy remains the functional header/footer/navigation owner. This bridge
 * maps Blocksy's generated shell markup onto the locked Global UI without
 * changing page composition or duplicating page-specific CSS.
 */

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;
  margin:0;
  color:var(--gh-ink);
  background:var(--gh-white);
  font-family:var(--gh-body);
}

/* ---------- WordPress content canvas ---------- */

body.gfx-final-ui-wordpress .hero-section[data-type],
body.gfx-final-ui-wordpress .entry-header {
  display:none !important;
}

body.gfx-final-ui-wordpress #main-container,
body.gfx-final-ui-wordpress .site-main,
body.gfx-final-ui-wordpress .site-main > article,
body.gfx-final-ui-wordpress .entry-content {
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}

body.gfx-final-ui-wordpress .entry-content > * {
  margin-block-start:0;
  margin-block-end:0;
}

body.gfx-final-ui-wordpress .gfx-final-ui-root {
  width:100%;
  max-width:none;
  margin:0;
}

/*
 * Blocksy assigns its own heading color, while several locked Final UI dark
 * sections intentionally color the section and let headings inherit. Restore
 * inheritance only in those known dark contexts; explicit locked heading
 * utilities/classes elsewhere remain untouched.
 */
body.gfx-final-ui-wordpress .gfx-final-ui-root :is(
  .founder,
  .section-navy,
  .chapter.dark,
  .founder-led,
  .remote,
  .close,
  .bg-deep-navy,
  .bg-navy,
  [class~="text-white"]
) :where(h1,h2,h3,h4,h5,h6):not(
  .text-deep-navy,
  .text-gfx-crimson,
  .text-brand-crimson,
  [class*="text-[#"]
) {
  color:inherit;
}

/*
 * Global interaction compatibility for authored button variants that do not
 * use the generic .btn/.button class names covered by premium-refinement.css.
 */
body.gfx-final-ui-wordpress .gfx-final-ui-root :is(
  .btn-primary,.btn-secondary,.fit-actions a,.hero-actions a
) {
  transition:
    color 160ms cubic-bezier(.2,.7,.2,1),
    background-color 160ms cubic-bezier(.2,.7,.2,1),
    border-color 160ms cubic-bezier(.2,.7,.2,1),
    box-shadow 220ms cubic-bezier(.2,.7,.2,1),
    transform 220ms cubic-bezier(.2,.7,.2,1),
    opacity 160ms cubic-bezier(.2,.7,.2,1);
}
@media (hover:hover) and (pointer:fine) {
  body.gfx-final-ui-wordpress .gfx-final-ui-root :is(
    .btn-primary,.btn-secondary,.fit-actions a,.hero-actions a
  ):hover {
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(0,0,51,.14);
  }
}
body.gfx-final-ui-wordpress .gfx-final-ui-root :is(
  .btn-primary,.btn-secondary,.fit-actions a,.hero-actions a
):active {
  transform:translateY(0) scale(.985);
  box-shadow:none;
}

/*
 * Home/Global V2 was approved as a standalone HTML/CSS composition. Where its
 * component CSS intentionally leaves paragraph margins or one heading
 * line-height unspecified, the approved render uses browser defaults. Blocksy
 * resets those defaults, which changes section rhythm even though the locked
 * CSS is present. Restore only the missing browser baseline at low specificity
 * so explicit locked component rules continue to win unchanged.
 */
:where(body.gfx-final-ui-wordpress.gfx-page-home .gfx-final-ui-root) {
  line-height:normal;
}

:where(body.gfx-final-ui-wordpress.gfx-page-home .gfx-final-ui-root) p {
  margin-block-start:1em;
  margin-block-end:1em;
}

body.gfx-final-ui-wordpress.gfx-page-home :is(.audience-head h2, .support-row h2) {
  line-height:normal;
}


/* ---------- WP7 bounded user-review corrections — 2026-09-22 ---------- */
/*
 * These are deliberately isolated review corrections for sections the user
 * reopened after DDEV inspection. They do not change canonical copy/claims.
 * Promote them back into Final UI authority only after renewed visual approval.
 */

/* White-Label partnership map: both responsibility cards share one centerline. */
body.gfx-final-ui-wordpress .gfx-html2wp-view--desktop[data-gfx-page="white-label-development"] .wl-map-card--gfx {
  transform:none;
}

/* Mobile App decision section: balance narrative and decision lanes vertically. */
body.gfx-final-ui-wordpress .gfx-html2wp-view--desktop[data-gfx-page="mobile-app-development"] .interface-grid {
  align-items:center;
}
body.gfx-final-ui-wordpress .gfx-html2wp-view--desktop[data-gfx-page="mobile-app-development"] :is(.interface-copy,.interface-decision) {
  align-self:center;
}

/* White-Label Multi-Workflow proof: replace the empty-grid feel with a bounded
 * systems map while preserving the existing section copy and evidence limits. */
@media (min-width:768px) {
  body.gfx-final-ui-wordpress .gfx-html2wp-view--desktop[data-gfx-page="white-label-development"] > section.flex.flex-col > .bg-deep-navy > div {
    grid-template-columns:minmax(0,.86fr) minmax(420px,1.14fr) !important;
    gap:clamp(48px,5vw,82px) !important;
    text-align:left;
  }
  body.gfx-final-ui-wordpress .gfx-html2wp-view--desktop[data-gfx-page="white-label-development"] > section.flex.flex-col > .bg-deep-navy > div > div {
    grid-column:1 !important;
    grid-column-start:auto !important;
    text-align:left !important;
  }
  body.gfx-final-ui-wordpress .gfx-html2wp-view--desktop[data-gfx-page="white-label-development"] > section.flex.flex-col > .bg-deep-navy > div::after {
    content:"";
    grid-column:2;
    grid-row:1;
    display:block;
    min-height:300px;
    border:1px solid rgba(255,255,255,.22);
    background:
      radial-gradient(circle at 18% 28%,#b31912 0 5px,transparent 6px),
      radial-gradient(circle at 49% 50%,#fff 0 5px,transparent 6px),
      radial-gradient(circle at 80% 30%,#b31912 0 5px,transparent 6px),
      radial-gradient(circle at 80% 72%,#fff 0 5px,transparent 6px),
      linear-gradient(90deg,transparent 17.8%,rgba(179,25,18,.78) 18%,rgba(179,25,18,.78) 18.15%,transparent 18.35%),
      linear-gradient(90deg,transparent 49.7%,rgba(255,255,255,.34) 49.9%,rgba(255,255,255,.34) 50.05%,transparent 50.25%),
      linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px),
      #000033;
    background-size:auto,auto,auto,auto,auto,auto,40px 40px,40px 40px,auto;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 24px 54px rgba(0,0,0,.16);
  }
}

body.gfx-final-ui-wordpress .gfx-html2wp-view--mobile[data-gfx-page="white-label-development"] .bg-navy.text-white {
  position:relative;
  background:
    radial-gradient(460px 240px at 80% 25%,rgba(179,25,18,.12),transparent 70%),
    #000033 !important;
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
}
body.gfx-final-ui-wordpress .gfx-html2wp-view--mobile[data-gfx-page="white-label-development"] .bg-navy.text-white .aspect-video {
  min-height:240px;
  border-radius:0 !important;
  border-color:rgba(255,255,255,.24) !important;
  background:
    linear-gradient(rgba(255,255,255,.065) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.065) 1px,transparent 1px),
    #000033 !important;
  background-size:36px 36px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}
body.gfx-final-ui-wordpress .gfx-html2wp-view--mobile[data-gfx-page="white-label-development"] .bg-navy.text-white .aspect-video::before {
  content:"";
  position:absolute;
  left:12%;
  right:12%;
  top:50%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.48) 12%,#b31912 50%,rgba(255,255,255,.48) 88%,transparent);
}
body.gfx-final-ui-wordpress .gfx-html2wp-view--mobile[data-gfx-page="white-label-development"] .bg-navy.text-white .aspect-video::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:13px;
  height:13px;
  margin:-6px 0 0 -6px;
  border:2px solid #fff;
  border-radius:50%;
  background:#000033;
  box-shadow:
    -94px -48px 0 -3px #b31912,
    94px -48px 0 -3px #b31912,
    -94px 48px 0 -3px #fff,
    94px 48px 0 -3px #fff;
}

/* Mobile footer: retain the locked one-column structure with clearer grouping. */
@media (max-width:640px) {
  body.gfx-final-ui-wordpress footer.ct-footer [data-row="top"] > .ct-container {
    padding-top:64px !important;
    padding-bottom:52px !important;
  }
  body.gfx-final-ui-wordpress footer.ct-footer [data-column="widget-area-1"] {
    padding-bottom:10px;
  }
  body.gfx-final-ui-wordpress footer.ct-footer [data-column="widget-area-2"],
  body.gfx-final-ui-wordpress footer.ct-footer [data-column="widget-area-3"] {
    margin-top:20px !important;
    padding-top:28px !important;
  }
  body.gfx-final-ui-wordpress footer.ct-footer .gh-final-footer-label {
    margin-bottom:12px;
  }
  body.gfx-final-ui-wordpress footer.ct-footer .menu li + li {
    margin-top:4px;
  }
  body.gfx-final-ui-wordpress footer.ct-footer .menu a {
    line-height:1.45;
  }
}

/* ---------- Locked Global header mapped onto Blocksy ---------- */

body.gfx-final-ui-wordpress #header {
  position:sticky !important;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.975);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(16,17,22,.11);
  box-shadow:none !important;
}

body.gfx-final-ui-wordpress #header [data-row="middle"] {
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

body.gfx-final-ui-wordpress #header [data-row="middle"] > .ct-container {
  width:min(var(--gh-shell),calc(100% - (var(--gh-gutter) * 2))) !important;
  max-width:var(--gh-shell) !important;
  min-height:86px !important;
  margin-inline:auto !important;
  padding-inline:0 !important;
}

/*
 * The WordPress custom-logo attachment remains in the database as historical
 * media state, but the locked Global UI brand is typographic. Hide only the
 * rendered image surface; Blocksy still owns the site-branding component.
 */
body.gfx-final-ui-wordpress #header .site-branding {
  display:grid !important;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:8px;
  min-width:max-content;
  font-family:var(--gh-display);
  line-height:1;
}

body.gfx-final-ui-wordpress #header .site-branding::before {
  content:"GFX";
  grid-column:1;
  grid-row:1 / 3;
  align-self:stretch;
  display:inline-flex;
  align-items:center;
  padding:0 9px;
  background:var(--gh-red);
  color:#fff;
  font-size:15px;
  font-weight:850;
  letter-spacing:-.035em;
}

body.gfx-final-ui-wordpress #header .site-logo-container {
  display:none !important;
}

body.gfx-final-ui-wordpress #header .site-title-container {
  grid-column:2;
  grid-row:1 / 3;
  display:grid !important;
  align-content:center;
  min-width:max-content;
}

body.gfx-final-ui-wordpress #header .site-title {
  display:block !important;
  margin:0 !important;
  line-height:1 !important;
}

body.gfx-final-ui-wordpress #header .site-title a {
  display:block;
  color:var(--gh-navy) !important;
  text-decoration:none !important;
  font-size:0 !important;
  line-height:1 !important;
}

body.gfx-final-ui-wordpress #header .site-title a::before {
  content:"HAWKER";
  display:block;
  color:var(--gh-navy);
  font-size:18px;
  line-height:1;
  font-weight:820;
  letter-spacing:-.045em;
}

body.gfx-final-ui-wordpress #header .site-title-container::after {
  content:"Founder-led technical development partner";
  display:block;
  margin-top:4px;
  color:#767780;
  font-size:8.5px;
  line-height:1.15;
  font-weight:720;
  letter-spacing:.09em;
  text-transform:uppercase;
  white-space:nowrap;
}

body.gfx-final-ui-wordpress #header [data-column="end"] [data-items="primary"] {
  align-items:center;
}

body.gfx-final-ui-wordpress #header .header-menu-1 > .menu {
  align-items:center;
  gap:27px;
}

body.gfx-final-ui-wordpress #header .menu > li {
  position:relative;
}

body.gfx-final-ui-wordpress #header .menu > li > .ct-menu-link {
  position:relative;
  min-height:auto !important;
  padding:13px 0 !important;
  color:#292a30 !important;
  text-decoration:none !important;
  font-size:13px !important;
  line-height:1.35 !important;
  font-weight:650 !important;
}

body.gfx-final-ui-wordpress #header .menu > li:not(.gh-nav-cta) > .ct-menu-link::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:7px;
  height:1px;
  background:var(--gh-red);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .18s ease;
}

body.gfx-final-ui-wordpress #header .menu > li:not(.gh-nav-cta) > .ct-menu-link:hover::after,
body.gfx-final-ui-wordpress #header .menu > li.current-menu-item:not(.gh-nav-cta) > .ct-menu-link::after,
body.gfx-final-ui-wordpress #header .menu > li.current-menu-ancestor:not(.gh-nav-cta) > .ct-menu-link::after {
  transform:scaleX(1);
}

body.gfx-final-ui-wordpress #header .menu .gh-nav-cta > .ct-menu-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px !important;
  padding:0 18px !important;
  border:1px solid var(--gh-red) !important;
  border-radius:2px !important;
  background:var(--gh-red) !important;
  color:#fff !important;
  font-size:13px !important;
  font-weight:760 !important;
  text-decoration:none !important;
}

body.gfx-final-ui-wordpress #header .menu .gh-nav-cta > .ct-menu-link:hover {
  background:var(--gh-red-dark) !important;
}

body.gfx-final-ui-wordpress #header .sub-menu {
  border:1px solid #d8d8dd !important;
  border-radius:0 !important;
  background:#fff !important;
  box-shadow:0 24px 60px rgba(0,0,30,.11) !important;
}

body.gfx-final-ui-wordpress #header .sub-menu .ct-menu-link {
  color:#292a30 !important;
  font-size:13px !important;
  font-weight:550 !important;
}

body.gfx-final-ui-wordpress #header .sub-menu .ct-menu-link:hover {
  color:var(--gh-red) !important;
  background:#faf9f6 !important;
}

body.gfx-final-ui-wordpress #header a:focus-visible,
body.gfx-final-ui-wordpress #header button:focus-visible {
  outline:3px solid var(--gh-red) !important;
  outline-offset:4px;
}

/* Blocksy mobile trigger/off-canvas remain functional; only visual grammar changes. */
body.gfx-final-ui-wordpress #header .ct-header-trigger {
  width:42px;
  height:42px;
  min-width:42px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#18191f;
}

body.gfx-final-ui-wordpress #header .ct-header-trigger .ct-icon {
  width:22px;
  height:18px;
}

body.gfx-final-ui-wordpress #offcanvas {
  font-family:var(--gh-body);
}

body.gfx-final-ui-wordpress #offcanvas .ct-panel-inner {
  background:#fff;
}

body.gfx-final-ui-wordpress #offcanvas .mobile-menu .ct-menu-link {
  color:#18191f;
  font-size:15px;
  font-weight:580;
}

/* ---------- Locked Global footer mapped onto Blocksy ---------- */

body.gfx-final-ui-wordpress footer.ct-footer {
  position:relative;
  overflow:hidden;
  background:var(--gh-navy-deep) !important;
  color:#fff;
  font-family:var(--gh-body);
}

body.gfx-final-ui-wordpress footer.ct-footer::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.8),transparent 78%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.8),transparent 78%);
}

body.gfx-final-ui-wordpress footer.ct-footer [data-row] {
  position:relative;
  z-index:1;
  background:transparent !important;
  border:0 !important;
}

body.gfx-final-ui-wordpress footer.ct-footer [data-row] > .ct-container {
  width:min(var(--gh-shell),calc(100% - (var(--gh-gutter) * 2))) !important;
  max-width:var(--gh-shell) !important;
  margin-inline:auto !important;
  padding-inline:0 !important;
}

body.gfx-final-ui-wordpress footer.ct-footer [data-row="top"] > .ct-container {
  display:grid !important;
  grid-template-columns:1.35fr 1fr .45fr !important;
  gap:clamp(50px,7vw,100px) !important;
  padding-top:80px !important;
  padding-bottom:58px !important;
}

body.gfx-final-ui-wordpress footer.ct-footer [data-row="top"] [data-column] {
  width:auto !important;
  min-width:0;
  padding:0 !important;
  margin:0 !important;
}

body.gfx-final-ui-wordpress footer.ct-footer [data-column="widget-area-4"] {
  display:none !important;
}

body.gfx-final-ui-wordpress footer.ct-footer .ct-widget,
body.gfx-final-ui-wordpress footer.ct-footer .wp-block-group,
body.gfx-final-ui-wordpress footer.ct-footer p {
  margin:0;
  padding:0;
  max-width:none;
}

body.gfx-final-ui-wordpress footer.ct-footer .gh-final-footer-wordmark {
  margin:0 0 24px;
  font-family:var(--gh-display);
  font-size:clamp(42px,4vw,58px);
  line-height:.9;
  font-weight:780;
  letter-spacing:-.065em;
}

body.gfx-final-ui-wordpress footer.ct-footer .gh-final-footer-wordmark a {
  color:#fff !important;
  text-decoration:none !important;
}

body.gfx-final-ui-wordpress footer.ct-footer .gh-final-footer-wordmark strong {
  color:#e04a41;
  font-weight:780;
}

body.gfx-final-ui-wordpress footer.ct-footer .gh-final-footer-brand > p:last-child {
  max-width:540px;
  color:rgba(255,255,255,.65);
  font-size:14.5px;
  line-height:1.72;
}

body.gfx-final-ui-wordpress footer.ct-footer .gh-final-footer-links {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:11px;
}

body.gfx-final-ui-wordpress footer.ct-footer .gh-final-footer-label {
  margin-bottom:8px;
  color:rgba(255,255,255,.45);
  font-size:11px;
  line-height:1.4;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

body.gfx-final-ui-wordpress footer.ct-footer .gh-final-footer-links a {
  color:rgba(255,255,255,.84) !important;
  text-decoration:none !important;
  font-size:13.5px;
  line-height:1.5;
}

body.gfx-final-ui-wordpress footer.ct-footer .gh-final-footer-links a:hover {
  color:#fff !important;
  text-decoration:underline !important;
  text-underline-offset:4px;
}

body.gfx-final-ui-wordpress footer.ct-footer [data-row="middle"] > .ct-container {
  padding-top:18px !important;
  padding-bottom:0 !important;
  border-top:1px solid rgba(255,255,255,.1);
}

body.gfx-final-ui-wordpress footer.ct-footer .ct-footer-copyright {
  width:100%;
  margin:0;
  color:rgba(255,255,255,.52);
  text-align:center;
  font-size:11.5px;
  line-height:1.5;
}

body.gfx-final-ui-wordpress footer.ct-footer [data-row="bottom"] > .ct-container {
  padding-top:8px !important;
  padding-bottom:22px !important;
}

body.gfx-final-ui-wordpress footer.ct-footer .gh-final-footer-credit {
  margin:0 !important;
  color:rgba(255,255,255,.68);
  text-align:center;
  font-size:11.5px;
  line-height:1.5;
}

body.gfx-final-ui-wordpress footer.ct-footer a:focus-visible {
  outline:3px solid #fff !important;
  outline-offset:4px;
}

/* ---------- Responsive shell ---------- */

@media (max-width:1280px) {
  body.gfx-final-ui-wordpress { --gh-shell:1180px; --gh-gutter:34px; }
  body.gfx-final-ui-wordpress #header [data-row="middle"] > .ct-container {
    min-height:82px !important;
  }
  body.gfx-final-ui-wordpress #header .header-menu-1 > .menu { gap:22px; }
  body.gfx-final-ui-wordpress #header .site-title-container::after { font-size:8px; }
}

@media (max-width:1120px) {
  body.gfx-final-ui-wordpress { --gh-shell:1020px; --gh-gutter:30px; }
  body.gfx-final-ui-wordpress #header .site-title-container::after { display:none; }
  body.gfx-final-ui-wordpress #header .site-branding::before { padding-block:8px; }
  body.gfx-final-ui-wordpress #header .header-menu-1 > .menu { gap:18px; }
  body.gfx-final-ui-wordpress #header .menu > li > .ct-menu-link { font-size:12.5px !important; }
  body.gfx-final-ui-wordpress #header .menu .gh-nav-cta > .ct-menu-link { padding-inline:15px !important; }
}

@media (max-width:960px) {
  body.gfx-final-ui-wordpress { --gh-shell:860px; --gh-gutter:28px; }
  body.gfx-final-ui-wordpress #header [data-row="middle"] > .ct-container {
    min-height:72px !important;
  }
  body.gfx-final-ui-wordpress footer.ct-footer [data-row="top"] > .ct-container {
    grid-template-columns:1.2fr 1fr .5fr !important;
    gap:38px !important;
  }
}

@media (max-width:768px) {
  body.gfx-final-ui-wordpress { --gh-gutter:24px; }
  body.gfx-final-ui-wordpress footer.ct-footer [data-row="top"] > .ct-container {
    grid-template-columns:1fr 1fr !important;
  }
  body.gfx-final-ui-wordpress footer.ct-footer [data-column="widget-area-1"] {
    grid-column:1 / -1;
    padding-bottom:28px !important;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
}

@media (max-width:640px) {
  body.gfx-final-ui-wordpress { --gh-gutter:20px; }
  body.gfx-final-ui-wordpress #header [data-row="middle"] > .ct-container {
    min-height:66px !important;
  }
  body.gfx-final-ui-wordpress #header .site-title a::before { font-size:16px; }
  body.gfx-final-ui-wordpress #header .site-branding::before {
    padding-inline:8px;
    font-size:13px;
  }
  body.gfx-final-ui-wordpress footer.ct-footer [data-row="top"] > .ct-container {
    grid-template-columns:1fr !important;
    gap:0 !important;
    padding-top:58px !important;
    padding-bottom:38px !important;
  }
  body.gfx-final-ui-wordpress footer.ct-footer [data-column="widget-area-1"] {
    grid-column:auto;
  }
  body.gfx-final-ui-wordpress footer.ct-footer [data-column="widget-area-2"],
  body.gfx-final-ui-wordpress footer.ct-footer [data-column="widget-area-3"] {
    margin-top:12px !important;
    padding-top:24px !important;
    border-top:1px solid rgba(255,255,255,.1);
  }
  body.gfx-final-ui-wordpress footer.ct-footer .gh-final-footer-wordmark {
    font-size:43px;
  }
}

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

@media (max-width:390px) {
  body.gfx-final-ui-wordpress { --gh-gutter:18px; }
  body.gfx-final-ui-wordpress #header .site-branding::before { padding-inline:7px; }
}

@media (max-width:360px) {
  body.gfx-final-ui-wordpress { --gh-gutter:16px; }
  body.gfx-final-ui-wordpress #header .site-title a::before { font-size:15px; }
}

@media (prefers-reduced-motion:reduce) {
  body.gfx-final-ui-wordpress #header .menu > li > .ct-menu-link::after {
    transition:none;
  }
}

/* WP7 mobile footer review correction — keep last so shell reset rules cannot override it. */
@media (max-width:640px) {
  body.gfx-final-ui-wordpress footer.ct-footer [data-row="top"] > .ct-container {
    padding-top:64px !important;
    padding-bottom:52px !important;
  }
  body.gfx-final-ui-wordpress footer.ct-footer .gh-final-footer-links {
    margin-top:28px !important;
    padding-top:28px !important;
    border-top:1px solid rgba(255,255,255,.12);
  }
  body.gfx-final-ui-wordpress footer.ct-footer .gh-final-footer-label {
    margin-bottom:12px !important;
  }
  body.gfx-final-ui-wordpress footer.ct-footer .gh-final-footer-links a {
    line-height:1.5 !important;
  }
}

/* WP7 mobile production corrections — user review 2026-09-22. */
@media (max-width:767px) {
  /* The Workflow source carried a 390px prototype-phone canvas. In the real
   * WordPress site the active mobile composition must occupy the viewport;
   * its authored internal gutters remain responsible for content spacing. */
  body.gfx-final-ui-wordpress .gfx-html2wp-view--mobile[data-gfx-page="workflow-automation"] {
    width:100% !important;
    max-width:none !important;
    margin-inline:0 !important;
  }

  /* Global Blocksy off-canvas mapped to the approved GFX Hawker visual system. */
  body.gfx-final-ui-wordpress #offcanvas {
    width:100vw !important;
    max-width:100vw !important;
    background:rgba(0,0,17,.38);
  }
  body.gfx-final-ui-wordpress #offcanvas .ct-panel-inner {
    width:100% !important;
    max-width:100% !important;
    min-height:100dvh;
    padding:0 !important;
    background:
      linear-gradient(180deg,rgba(0,0,51,.025),transparent 180px),
      #fff !important;
    box-shadow:none !important;
  }
  body.gfx-final-ui-wordpress #offcanvas .ct-panel-content {
    width:min(100%,560px);
    margin-inline:auto;
    padding:90px max(22px,var(--gh-gutter)) 42px !important;
  }
  body.gfx-final-ui-wordpress #offcanvas .ct-toggle-close {
    top:20px !important;
    right:max(20px,var(--gh-gutter)) !important;
    width:44px !important;
    height:44px !important;
    border:1px solid #d8d8dd !important;
    border-radius:0 !important;
    background:#fff !important;
    color:var(--gh-navy) !important;
    position:absolute !important;
    overflow:hidden;
    transition:
      border-color 160ms cubic-bezier(.2,.7,.2,1),
      background-color 160ms cubic-bezier(.2,.7,.2,1),
      transform 180ms cubic-bezier(.2,.7,.2,1);
  }
  /* Blocksy's close SVG can disappear in the isolated Final UI shell.
     Draw the approved neutral close glyph ourselves so the control is never
     an empty bordered square. */
  body.gfx-final-ui-wordpress #offcanvas .ct-toggle-close .ct-icon {
    opacity:0 !important;
  }
  body.gfx-final-ui-wordpress #offcanvas .ct-toggle-close::before,
  body.gfx-final-ui-wordpress #offcanvas .ct-toggle-close::after {
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:18px;
    height:1.5px;
    background:var(--gh-navy);
    transform-origin:center;
    pointer-events:none;
  }
  body.gfx-final-ui-wordpress #offcanvas .ct-toggle-close::before {
    transform:translate(-50%,-50%) rotate(45deg);
  }
  body.gfx-final-ui-wordpress #offcanvas .ct-toggle-close::after {
    transform:translate(-50%,-50%) rotate(-45deg);
  }
  @media (hover:hover) and (pointer:fine) {
    body.gfx-final-ui-wordpress #offcanvas .ct-toggle-close:hover {
      border-color:var(--gh-navy) !important;
      background:#f8f8f9 !important;
      transform:translateY(-1px);
    }
  }
  body.gfx-final-ui-wordpress #offcanvas .mobile-menu {
    width:100%;
    border-top:1px solid var(--gh-rule);
  }
  body.gfx-final-ui-wordpress #offcanvas .mobile-menu > ul {
    width:100%;
    margin:0 !important;
    padding:0 !important;
  }
  body.gfx-final-ui-wordpress #offcanvas .mobile-menu li {
    width:100%;
    margin:0 !important;
  }
  body.gfx-final-ui-wordpress #offcanvas .mobile-menu > ul > li {
    border-bottom:1px solid var(--gh-rule);
  }
  body.gfx-final-ui-wordpress #offcanvas .mobile-menu .ct-menu-link {
    min-height:58px;
    padding:16px 0 !important;
    color:var(--gh-navy) !important;
    font-size:18px !important;
    line-height:1.25 !important;
    font-weight:690 !important;
    letter-spacing:-.018em;
    text-decoration:none !important;
  }
  body.gfx-final-ui-wordpress #offcanvas .mobile-menu .sub-menu {
    margin:0 0 14px !important;
    padding:0 0 4px 14px !important;
    border-left:2px solid rgba(179,25,18,.34);
    background:transparent !important;
    box-shadow:none !important;
  }
  body.gfx-final-ui-wordpress #offcanvas .mobile-menu .sub-menu .ct-menu-link {
    min-height:46px;
    padding:11px 0 !important;
    color:#50525a !important;
    font-size:14px !important;
    line-height:1.35 !important;
    font-weight:560 !important;
    letter-spacing:0;
  }
  body.gfx-final-ui-wordpress #offcanvas .mobile-menu .child-indicator {
    color:var(--gh-red) !important;
  }
  body.gfx-final-ui-wordpress #offcanvas .mobile-menu .gh-nav-cta {
    margin-top:22px !important;
    border:0 !important;
  }
  body.gfx-final-ui-wordpress #offcanvas .mobile-menu .gh-nav-cta > .ct-menu-link {
    min-height:52px;
    justify-content:center;
    padding:15px 18px !important;
    border:1px solid var(--gh-red) !important;
    background:var(--gh-red) !important;
    color:#fff !important;
    font-size:15px !important;
    font-weight:760 !important;
    text-align:center;
  }
  body.gfx-final-ui-wordpress #offcanvas .mobile-menu a:focus-visible,
  body.gfx-final-ui-wordpress #offcanvas button:focus-visible {
    outline:3px solid var(--gh-red) !important;
    outline-offset:4px;
  }
}

@media (max-width:390px) {
  body.gfx-final-ui-wordpress #offcanvas .ct-panel-content {
    padding-inline:18px !important;
  }
  body.gfx-final-ui-wordpress #offcanvas .mobile-menu .ct-menu-link {
    font-size:17px !important;
  }
}

/* Keep page-composition breathing room independent from the tighter shell gutter. */
@media (max-width:767px) {
  body.gfx-final-ui-wordpress .gfx-html2wp-view--mobile {
    --gfx-gutter:clamp(20px,5vw,24px) !important;
    --gutter:clamp(20px,5vw,24px) !important;
    --page:clamp(20px,5vw,24px) !important;
  }
  body.gfx-final-ui-wordpress .wp2-standalone .gh-wp2-router {
    --wp2-gutter:clamp(20px,5vw,24px) !important;
  }
  body.gfx-final-ui-wordpress .wp3-standalone .gh-wp3-dev {
    --d3-gutter:clamp(20px,5vw,24px) !important;
  }
}

/* Global, JS-enhanced section reveal. Content is visible by default; the
 * class is added only for below-fold sections after runtime initialization. */
body.gfx-final-ui-wordpress .gfx-final-ui-root .gfx-refine-reveal {
  opacity:.001;
  transform:translateY(14px);
  transition:
    opacity 480ms cubic-bezier(.2,.7,.2,1),
    transform 560ms cubic-bezier(.2,.7,.2,1);
  will-change:opacity,transform;
}
body.gfx-final-ui-wordpress .gfx-final-ui-root .gfx-refine-reveal.is-gfx-refined-visible {
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion:reduce) {
  body.gfx-final-ui-wordpress .gfx-final-ui-root .gfx-refine-reveal {
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* White-Label proof band: authored text-white heading must beat Blocksy's
 * explicit global heading color inside the Deep Navy evidence moment. */
body.gfx-final-ui-wordpress
.gfx-html2wp-view--desktop[data-gfx-page="white-label-development"]
.bg-deep-navy :is(h1,h2,h3,h4,h5,h6).text-white {
  color:#fff !important;
}

/* Social calendar outcome is an authored Deep Navy card; Blocksy must not
 * recolor its heading back to the global dark heading token. */
body.gfx-final-ui-wordpress
.gfx-html2wp-view--desktop[data-gfx-page="social-media-management"]
.calendar-outcome :is(h1,h2,h3,h4,h5,h6) {
  color:#fff !important;
}

/* Case Studies architecture center lane is authored Navy + white. */
body.gfx-final-ui-wordpress
.gfx-html2wp-view--desktop[data-gfx-page="case-studies"]
.arch-col.center :is(h1,h2,h3,h4,h5,h6) {
  color:#fff !important;
}

/* WP7 user-review correction: the WP2 platform relationship must become a
 * real mobile stack instead of retaining the desktop 3-column diagram. */
@media (max-width:767px) {
  body.gfx-final-ui-wordpress .wp2-standalone .gh-wp2-router .gh-wp2-platform-visual {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:auto !important;
    gap:12px !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }
  body.gfx-final-ui-wordpress .wp2-standalone .gh-wp2-router .gh-wp2-platform-core {
    grid-column:1 !important;
    grid-row:auto !important;
    order:-1 !important;
    width:100% !important;
    min-width:100% !important;
    max-width:none !important;
    margin-inline:0 !important;
    justify-self:stretch !important;
    box-sizing:border-box !important;
    min-height:72px !important;
    padding:16px 18px !important;
  }
  body.gfx-final-ui-wordpress .wp2-standalone .gh-wp2-router .gh-wp2-platform-cap,
  body.gfx-final-ui-wordpress .wp2-standalone .gh-wp2-router .gh-wp2-platform-cap--a,
  body.gfx-final-ui-wordpress .wp2-standalone .gh-wp2-router .gh-wp2-platform-cap--b,
  body.gfx-final-ui-wordpress .wp2-standalone .gh-wp2-router .gh-wp2-platform-cap--c,
  body.gfx-final-ui-wordpress .wp2-standalone .gh-wp2-router .gh-wp2-platform-cap--d {
    grid-column:1 !important;
    grid-row:auto !important;
    width:100% !important;
    min-width:100% !important;
    max-width:none !important;
    margin-inline:0 !important;
    justify-self:stretch !important;
    box-sizing:border-box !important;
    min-height:0 !important;
    padding:18px 18px 18px 24px !important;
  }
  body.gfx-final-ui-wordpress .wp2-standalone .gh-wp2-router .gh-wp2-platform-cap::before {
    left:8px !important;
    right:auto !important;
    top:50% !important;
  }

  /* WP3 Related Buying Tasks is independently composed for a phone viewport:
   * tighter section rhythm, full-width task cards and no desktop connector. */
  body.gfx-final-ui-wordpress .wp3-standalone .gh-wp3-dev .gh-wp3-relation {
    padding:56px 0 62px !important;
  }
  body.gfx-final-ui-wordpress .wp3-standalone .gh-wp3-dev .gh-wp3-relation h2 {
    max-width:320px !important;
    font-size:32px !important;
    line-height:1.08 !important;
    letter-spacing:-.035em !important;
  }
  body.gfx-final-ui-wordpress .wp3-standalone .gh-wp3-dev .gh-wp3-relation-panels {
    display:block !important;
    margin-top:26px !important;
  }
  body.gfx-final-ui-wordpress .wp3-standalone .gh-wp3-dev .gh-wp3-relation-panels::before,
  body.gfx-final-ui-wordpress .wp3-standalone .gh-wp3-dev .gh-wp3-relation-panels::after {
    content:none !important;
    display:none !important;
  }
  body.gfx-final-ui-wordpress .wp3-standalone .gh-wp3-dev .gh-wp3-task-panel,
  body.gfx-final-ui-wordpress .wp3-standalone .gh-wp3-dev .gh-wp3-task-panel--seo {
    min-height:0 !important;
    margin:0 !important;
    padding:22px 20px 24px !important;
    background:#fff !important;
  }
  body.gfx-final-ui-wordpress .wp3-standalone .gh-wp3-dev .gh-wp3-task-panel--seo {
    margin-top:18px !important;
  }
  body.gfx-final-ui-wordpress .wp3-standalone .gh-wp3-dev .gh-wp3-task-icon {
    position:static !important;
    width:40px !important;
    height:40px !important;
    margin:0 0 14px !important;
  }
  body.gfx-final-ui-wordpress .wp3-standalone .gh-wp3-dev .gh-wp3-task-panel h3 {
    margin:0 0 10px !important;
    padding:0 !important;
    font-size:24px !important;
    line-height:1.15 !important;
  }
  body.gfx-final-ui-wordpress .wp3-standalone .gh-wp3-dev .gh-wp3-task-panel p {
    font-size:16px !important;
    line-height:1.58 !important;
  }
}