/* Dead-rule sweep 2026-07-28: removed 17 rules whose selectors matched
   nothing across all 177 URLs in the sitemaps, checked three ways -- raw
   HTML, exact class-token text search, and rendered DOM (which is what
   caught the particles canvas rule as a FALSE positive: that canvas is
   built by JS and never appears in the served HTML). Kept h2-h6.post-text:
   the base .post-text rule is live, so those are a matched set that would
   apply the moment a heading gets that class. */

.blog-t{
	font-size:20px;
}

.post-text{
	font-size: 20px;
	color:black;
	}

h2.post-text{
	font-size: 24px;
}

h3.post-text{
	font-size: 24px;
}

h4.post-text{
	font-size: 24px;
}

h5.post-text{
	font-size: 24px;
}

h6.post-text{
	font-size: 24px;
}

.wpb_wrapper .ut-service-icon-box-content>:last-child {
   font-size: 15px;
}

.sp-easy-accordion > .sp-ea-single > .sp-collapse > .ea-body p:first-of-type {

  font-size: 18px;
}

/* Link */
.sp-easy-accordion .ea-header a{
	color:#ffffff !important;
	transform:translatex(0px) translatey(0px);
}

/* Font Icon */
.sp-easy-accordion .ea-header i{
	color:#ffffff !important;
}

/* Column inner */
.hentry .wpb_row:nth-child(19) .vc_column-inner{
	background-color:#ffffff;
	
}

/* Link */
.sp-easy-accordion .ea-header a{
	background-color:#000000;
	
}

/* Import clean Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

@media (max-width: 767px){

  /* 3. Make embedded iframes (scheduler, maps, video) responsive */
  .wpb_text_column iframe,
  .wpb_raw_html iframe,
  .vc_column-inner iframe{
    max-width: 100% !important;
    width: 100% !important;
  }

  /* 4. Belt-and-suspenders: prevent any rogue child from causing horizontal scroll */
  body, .ut-page-wrapper{ overflow-x: hidden; }
}

/* Cap reading width on the intro paragraph */
.page-id-4997 .wpb_text_column p{ max-width: 720px; margin-left:auto; margin-right:auto; }

/* Form: card + modern inputs */
.page-id-4997 #form_contact-form{
  background:#0f0f12; border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:32px; max-width:760px; margin:0 auto;
}
.page-id-4997 #form_contact-form input[type=text],
.page-id-4997 #form_contact-form input[type=email],
.page-id-4997 #form_contact-form input[type=tel],
.page-id-4997 #form_contact-form textarea{
  background:transparent !important; color:#fff !important;
  border:1px solid rgba(255,255,255,.18) !important; border-radius:8px !important;
  padding:14px 16px !important; box-shadow:none !important;
}
.page-id-4997 #form_contact-form input:focus,
.page-id-4997 #form_contact-form textarea:focus{
  border-color:#f5a623 !important; box-shadow:0 0 0 2px rgba(245,166,35,.35) !important;
}
.page-id-4997 .frm_required{ color:#f5a623 !important; }
.page-id-4997 #form_contact-form .frm_button_submit,
.page-id-4997 #form_contact-form button[type=submit]{
  background:#f5a623 !important; color:#111 !important; border:none !important;
  border-radius:999px !important; padding:14px 28px !important; font-weight:700 !important;
}

/* Accent under H1 */
.page-id-4997 h1{ display:inline-block; padding-bottom:14px; border-bottom:4px solid #f5a623; }

/* Soften section dividers */
.page-id-4997 .vc_sep_line{ border-color: rgba(255,255,255,.08) !important; }

/* Make H3s legible on dark sections of the contact page */
.page-id-4997 h3,
.page-id-4997 h3 span{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* === Pure Code Digital — Flip box section polish === */

/* 1. Softer card front: thin border, balanced shadow */
.oxilab-flip-box-1 {
  border: 1px solid #e5e5e5 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}

/* 2. Lift + deeper shadow on hover (before the flip triggers) */
.oxilab-flip-box-style:hover .oxilab-flip-box-1 {
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-2px);
}

/* 3. Small corner hint icon so users know cards are interactive */
.oxilab-flip-box-1 {
  position: relative;
}
.oxilab-flip-box-1::after {
  content: "↻";
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 16px;
  color: #bbb;
  opacity: 0.7;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.oxilab-flip-box-style:hover .oxilab-flip-box-1::after {
  opacity: 1;
  transform: rotate(180deg);
  color: #888;
}

/* 4. Section heading above the flip-box grid */
.oxi-addons-flipbox-template-style2 {
  position: relative;
  padding-top: 80px !important;
}
.oxi-addons-flipbox-template-style2::before {
  content: "What We Do";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 36px;
  font-weight: 700;
  color: #111;
  letter-spacing: 0.5px;
}

/* === Pure Code Digital — Site-wide polish === */

/* A. Normalize H2 section headings — larger, consistent weight */
.vc_section h2,
.vc_row h2 {
  font-size: 32px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2px;
  line-height: 1.25;
}

/* B. Unify all orange CTAs — same color, same rounded shape, same hover */
a.vc_btn3,
.vc_btn3-style-flat,
a[class*="ut-button"][style*="orange"],
.btn-primary,
input[type="submit"] {
  background-color: #ff8500 !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 16px 36px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
  box-shadow: 0 4px 14px rgba(255, 133, 0, 0.25);
}
a.vc_btn3:hover,
.vc_btn3-style-flat:hover,
.btn-primary:hover,
input[type="submit"]:hover {
  background-color: #ff9a2e !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(255, 133, 0, 0.35) !important;
}

/* C. Tighten oversized empty space between sections */
.vc_section {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}
.vc_row + .vc_row {
  margin-top: 0 !important;
}

/* F. Footer breathing room and link polish */
.site-footer,
footer {
  padding: 40px 0 24px !important;
}
footer a {
  color: rgba(255,255,255,0.75) !important;
  transition: color 0.2s ease;
}
footer a:hover {
  color: #ff8500 !important;
}

/* G. Hide the loose decorative particle dots when they're floating outside a section */
canvas[class*="particle"],
.particles-js-canvas-el {
  opacity: 0.5;
}

/* ============================================
   POST: What is WordPress (postid-10006)
   ============================================ */

body.postid-10006 .pcd-post-h1 {
  font-size: 42px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  color: #111 !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.5px;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}
@media (max-width: 768px) {
  body.postid-10006 .pcd-post-h1 {
    font-size: 30px !important;
    line-height: 1.25 !important;
  }
}

body.postid-10006 .pcd-updated-badge {
  display: inline-block;
  font-size: 13px;
  color: #666;
  background: #f5f5f5;
  padding: 6px 14px;
  border-radius: 999px;
  margin: 0 0 28px !important;
  border-left: 3px solid #ff8500;
}
body.postid-10006 .pcd-updated-badge strong { color: #ff8500; }

body.postid-10006 .pcd-tldr {
  background: #fff7ee;
  border: 1px solid #ffd9a8;
  border-left: 5px solid #ff8500;
  border-radius: 10px;
  padding: 22px 28px;
  margin: 0 0 36px;
  box-shadow: 0 2px 8px rgba(255, 133, 0, 0.06);
}
body.postid-10006 .pcd-tldr h4 {
  margin: 0 0 10px !important;
  font-size: 14px !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #ff8500 !important;
  font-weight: 700 !important;
}
body.postid-10006 .pcd-tldr p {
  margin: 0 !important;
  font-size: 16px;
  line-height: 1.65;
  color: #333;
}

body.postid-10006 .entry-content h2,
body.postid-10006 article h2,
body.postid-10006 main h2 {
  font-size: 30px !important;
  margin: 48px 0 18px !important;
  padding-bottom: 10px;
  border-bottom: 2px solid #f1f1f1;
  font-weight: 700 !important;
  color: #111 !important;
}

body.postid-10006 .entry-content h3,
body.postid-10006 article h3,
body.postid-10006 main h3 {
  font-size: 22px !important;
  margin: 30px 0 12px !important;
  font-weight: 700 !important;
  color: #222 !important;
}

body.postid-10006 .entry-content p,
body.postid-10006 article p,
body.postid-10006 main p {
  font-size: 17px;
  line-height: 1.75;
  color: #2a2a2a;
  margin: 0 0 18px;
}

body.postid-10006 .entry-content a,
body.postid-10006 article a {
  color: #ff8500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
body.postid-10006 .entry-content a:hover {
  color: #e57500;
  text-decoration-thickness: 2px;
}

body.postid-10006 .pcd-cta-box {
  background: linear-gradient(135deg, #ff8500 0%, #ff9d33 100%);
  color: #fff;
  border-radius: 14px;
  padding: 36px 40px;
  margin: 50px 0;
  text-align: center;
  box-shadow: 0 12px 32px rgba(255, 133, 0, 0.25);
}
body.postid-10006 .pcd-cta-box h3 {
  color: #fff !important;
  font-size: 26px !important;
  margin: 0 0 12px !important;
  border: none !important;
}
body.postid-10006 .pcd-cta-box p {
  color: #fff !important;
  font-size: 17px;
  margin: 0 0 20px;
  line-height: 1.6;
}
body.postid-10006 .pcd-cta-btn {
  display: inline-block;
  background: #111 !important;
  color: #fff !important;
  padding: 14px 32px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none !important;
  transition: all 0.25s ease;
  margin-top: 6px;
}
body.postid-10006 .pcd-cta-btn:hover {
  background: #fff !important;
  color: #ff8500 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

body.postid-10006 .pcd-faq {
  background: #fafafa;
  border-radius: 12px;
  padding: 12px 28px;
  margin: 0 0 40px;
  border: 1px solid #eee;
}
body.postid-10006 .pcd-faq h3 {
  font-size: 18px !important;
  margin: 22px 0 8px !important;
  color: #111 !important;
  padding-left: 28px;
  position: relative;
}
body.postid-10006 .pcd-faq h3::before {
  content: "Q";
  position: absolute;
  left: 0;
  top: 0;
  color: #ff8500;
  font-weight: 800;
  font-size: 18px;
}
body.postid-10006 .pcd-faq p {
  margin: 0 0 18px 28px !important;
  color: #444;
  font-size: 16px;
  position: relative;
}
body.postid-10006 .pcd-faq p::before {
  content: "A";
  position: absolute;
  left: -28px;
  top: 0;
  color: #888;
  font-weight: 800;
  font-size: 16px;
}

body.postid-10006 .pcd-contact-card {
  background: #111;
  color: #fff;
  border-radius: 12px;
  padding: 24px 28px;
  margin: 40px 0 0;
  text-align: center;
}
body.postid-10006 .pcd-contact-card p {
  color: #fff !important;
  margin: 0 0 6px !important;
}
body.postid-10006 .pcd-contact-card a {
  color: #ff8500 !important;
  font-weight: 600;
}
body.postid-10006 .pcd-contact-card a:hover { color: #fff !important; }

body.postid-10006 .entry-content ul {
  margin: 0 0 24px;
  padding-left: 24px;
}
body.postid-10006 .entry-content ul li {
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 8px;
  color: #2a2a2a;
}

/* Service card headings & links - legible on dark bg (stable selectors) */
.vc_col-has-fill .vc_column-inner h2,
.vc_col-has-fill .vc_column-inner h2 a,
.vc_col-has-fill .vc_column-inner h2 span{
  color: #d4af37 !important;
}
.vc_col-has-fill .vc_column-inner .wpb_text_column a,
.vc_col-has-fill .vc_column-inner p a{
  color: #e8c45a !important; text-decoration: underline !important;
}

/* ===== Client Portal relocation - added 2026-07-27 ===== */

/* 1. Homepage: remove the 520px Client Portal closing band */
/* NB: WPBakery regenerates ut-row IDs on every render, so an ID-based
   selector will not hold. The :has() rule below is what does the work. */
body.home .vc_row:has(a[href*="portal.purecodedigital"]) { display: none !important; }
body.home .bklyn-btn-holder a[href*="portal.purecodedigital"] { display: none !important; }

/* 2. Header: Client Login as a small utility link */
#navigation #menu-main > li > a[href*="portal.purecodedigital"],
#navigation #menu-main > li > a[href*="portal.purecodedigital"] * {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  color: rgba(255,255,255,.5) !important;
  background: none !important;
  transition: color .2s ease !important;
}
#navigation #menu-main > li > a[href*="portal.purecodedigital"]:hover,
#navigation #menu-main > li > a[href*="portal.purecodedigital"]:hover * { color: #ffae1a !important; }
#navigation #menu-main > li:has(> a[href*="portal.purecodedigital"]) {
  border-left: 1px solid rgba(255,255,255,.18) !important;
  margin-left: 12px !important;
  padding-left: 6px !important;
}

/* 3. Mobile drawer: same link, muted, divided off */
#ut-mobile-menu > li > a[href*="portal.purecodedigital"],
#ut-mobile-menu > li > a[href*="portal.purecodedigital"] * {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.5) !important;
}
#ut-mobile-menu > li:has(> a[href*="portal.purecodedigital"]) {
  border-top: 1px solid rgba(255,255,255,.12) !important;
  margin-top: 10px !important;
  padding-top: 10px !important;
}

/* 4. Footer: Client Login beside the legal links */
footer a[href*="portal.purecodedigital"] {
  color: inherit !important;
  opacity: .85 !important;
  text-decoration: none !important;
}
footer a[href*="portal.purecodedigital"]:hover { color: #ffae1a !important; opacity: 1 !important; }
/* ===== end Client Portal relocation ===== */

/* ===== Header phone number - added 2026-07-27 ===== */
/* Main menu item 22712, tel:+18775427974. Renders in the desktop nav
   and the mobile drawer (Main menu is assigned to both locations). */

#navigation #menu-main > li > a[href^="tel:"],
#navigation #menu-main > li > a[href^="tel:"] * {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .4px !important;
  color: #fff !important;
  background: none !important;
  line-height: 1 !important;
}
#navigation #menu-main > li > a[href^="tel:"] {
  display: inline-block !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  margin: 0 !important;
  transition: border-color .2s ease, color .2s ease !important;
}
#navigation #menu-main > li:has(> a[href^="tel:"]) {
  display: flex !important;
  align-items: center !important;
}
#navigation #menu-main > li > a[href^="tel:"]:hover,
#navigation #menu-main > li > a[href^="tel:"]:hover * { color: #ffae1a !important; }
#navigation #menu-main > li > a[href^="tel:"]:hover { border-color: #ffae1a !important; }

@media (max-width: 1300px) {
  #navigation #menu-main > li > a[href^="tel:"] {
    font-size: 13px !important;
    padding: 8px 12px !important;
  }
}

/* Drawer: tapping the number is a primary action on a phone. */
#ut-mobile-menu > li > a[href^="tel:"],
#ut-mobile-menu > li > a[href^="tel:"] * {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #ffae1a !important;
}
/* ===== end header phone number ===== */

/* ===== Header layout: centred menu, utilities hard right - 2026-07-27 ===== */
/* Desktop only. Below 1026px the theme swaps to the mobile drawer. */
@media (min-width: 1026px) {

  /* The theme reserves a 250px "extra module" slot at the right end of
     the header. It is empty on this site - no links, text or images -
     and it was what stopped the nav 250px short of the right edge.
     If that slot is ever populated in Theme Options, delete this rule. */
  #header-section .ut-header-primary-extra-module { display: none !important; }

  /* Nav takes the reclaimed width: 15% logo + 85% nav. */
  #header-section #navigation { width: 85% !important; }

  /* One flex row across the full width. The two auto margins split the
     free space between them: the first pushes the menu clear of the logo,
     the second pushes the phone + Client Login cluster to the right edge,
     which leaves the main items centred between the two. */
  #navigation #menu-main {
    float: none !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
  }
  #navigation #menu-main > li:first-child { margin-left: auto !important; }
  #navigation #menu-main > li:has(> a[href^="tel:"]) { margin-left: auto !important; }
}
/* ===== end header layout ===== */

/* --- Exact centring at wide desktop widths (added 2026-07-27) --- */
/* The block above centres the menu BETWEEN the logo and the utility
   cluster. Because that cluster (~290px) is wider than the logo
   (~210px), the menu lands ~55px left of the true viewport centre.
   These rules make it exact above 1400px, where there is room.

   padding-right on the ul (17.65% = the logo's 15% expressed against
   the nav's 85%) shifts the centred group back to the viewport centre,
   and the two utility items are lifted out of flow and pinned to the
   nav so that padding cannot move them.

   NOTE the three-ID selectors. YellowPencil sets padding on #menu-main
   with !important from a <style> block printed in the BODY, so it wins
   any two-ID rule on document order. Measured: two IDs -> 0px,
   three IDs -> 207px. Do not simplify these selectors.

   Delete this whole media query to go back to the simpler in-flow
   version above. */
@media (min-width: 1400px) {
  #header-section #navigation { position: relative !important; }
  #header-section #navigation #menu-main {
    position: static !important;
    justify-content: center !important;
    padding-right: 17.65% !important;
  }
  #header-section #navigation #menu-main > li:first-child { margin-left: 0 !important; }
  #header-section #navigation #menu-main > li:has(> a[href^="tel:"]) {
    position: absolute !important;
    right: 128px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-left: 0 !important;
  }
  #header-section #navigation #menu-main > li:has(> a[href*="portal.purecodedigital"]) {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

/* ===== Submenu parent items: readable on hover + chevron (2026-07-27) ===== */
/* The theme's "background-static" link animation paints a solid white
   166x28 block through ::after on submenu links, and only animates it
   to opacity:1 for items that HAVE children. Those same items also turn
   their label white on hover — so every item you had to hover to reach
   the third level rendered white-on-white and vanished. Measured before
   the fix: Marketing hovered = color #fff with ::after background #fff,
   opacity 1, z-index -1, 166x28.

   This removes the white slab and repurposes the leftover "›" glyph as a
   right-aligned "has more" affordance. Leaf items are untouched: their
   ::after never animates past opacity 0. */

#navigation #menu-main ul.sub-menu li > a::after {
  background-color: transparent !important;
  background-image: none !important;
}

#navigation #menu-main ul.sub-menu li.menu-item-has-children > a::after {
  content: "\203A" !important;
  opacity: 1 !important;
  z-index: 2 !important;
  left: auto !important;
  right: 14px !important;
  width: auto !important;
  height: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 17px !important;
  line-height: 1 !important;
}
/* ===== end submenu fix ===== */

/* ===== Related services block (output by the WPCode snippet) - 2026-07-27 ===== */
/* The link classes contain "btn" and "cta" deliberately: YellowPencil's
   global link reset forces color:inherit on any anchor whose class does
   not contain btn, button or cta. Renaming them silently kills the colour. */
.pcd-rel{max-width:1140px;margin:44px auto 12px;padding:26px 24px;border:1px solid #e6e6e6;border-radius:16px;background:#fafafa;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;}
.pcd-rel .pcd-rel-h{margin:0 0 14px !important;font-size:13px !important;font-weight:800 !important;letter-spacing:.1em;text-transform:uppercase;color:#8a8a8a !important;}
.pcd-rel .pcd-rel-links{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px;}
.pcd-rel .pcd-rel-btn{display:inline-block;padding:9px 16px;border:1px solid #e0e0e0;border-radius:999px;background:#fff;font-size:14px;font-weight:700;color:#111 !important;text-decoration:none !important;transition:border-color .18s ease,color .18s ease;}
.pcd-rel .pcd-rel-btn:hover{border-color:#ff8500;color:#ff8500 !important;}
.pcd-rel .pcd-rel-all{border-color:#111 !important;}
.pcd-rel .pcd-rel-cta{display:inline-block;padding:13px 26px;border-radius:999px;background:#ff8500;color:#fff !important;font-size:14px;font-weight:800;text-decoration:none !important;transition:box-shadow .18s ease;}
.pcd-rel .pcd-rel-cta:hover{color:#fff !important;box-shadow:0 8px 20px rgba(255,133,0,.35);}
@media (max-width:600px){.pcd-rel{padding:20px 16px;}.pcd-rel .pcd-rel-cta{display:block;text-align:center;}}
/* ===== end related services ===== */

/* ===== 9. HOMEPAGE TEXT CONTRAST — added 2026-07-28 =====
   9 WCAG AA failures found by compositing each text node against its
   real rendered background. Causes: theme default colours landing on
   same-colour row fills. Ratios were 1.00, 1.00, 1.00, 1.01, 2.67, 2.44. */

/* 9a. Dark-filled rows -> light text. Every .vc_row-has-fill on this
   homepage is solid #000 or a dark photo (verified live). Add a carve-out
   here if a LIGHT filled row is ever introduced. */
body#ut-sitebody.home .vc_row.vc_row-has-fill h1,
body#ut-sitebody.home .vc_row.vc_row-has-fill h2,
body#ut-sitebody.home .vc_row.vc_row-has-fill h3,
body#ut-sitebody.home .vc_row.vc_row-has-fill h4 { color:#ffffff !important; }
body#ut-sitebody.home .vc_row.vc_row-has-fill p,
body#ut-sitebody.home .vc_row.vc_row-has-fill li { color:#e8e8e8 !important; }

/* 9b. "PROFESSIONAL DIGITAL SERVICE AGENCY" row: no fill and no bg image
   at any breakpoint, but two of its four text elements were white.
   Matching them to their #444 siblings. */
body#ut-sitebody.home #main-content .wpb-content-wrapper > section.vc_section:nth-of-type(2) > .vc_row:nth-child(1) h2 { color:#111111 !important; }
body#ut-sitebody.home #main-content .wpb-content-wrapper > section.vc_section:nth-of-type(2) > .vc_row:nth-child(1) p  { color:#444444 !important; }

/* 9c. Footer legal line was rgba(240,240,240,.33) = 2.67:1.
   Colour MUST go on the container: YellowPencil ships
   a:not(#navigation a):not(#ut-mobile-menu a)... { color:inherit !important }
   and :not() counts its argument, so that selector carries TWO IDs and
   beats any class-only rule on the anchor. Let the anchors inherit. */
footer .ut-sub-footer-content .footer-links,
footer .ut-sub-footer-content span.copyright,
footer .ut-sub-footer-content .footer-links span { color:#c9c9c9 !important; }
footer .ut-sub-footer-content .footer-links a:hover { color:#ffae1a !important; }
footer a[href*="portal.purecodedigital"] { opacity:1 !important; }

/* 9d. "START MY PROJECT": white on #ff8500 is 2.44:1. Dark text on the
   same orange is 7.13:1 and matches the floating Get My Price button.
   Homepage-scoped on purpose. */
/* Sitewide: only two a.bklyn-btn exist (homepage "START MY PROJECT" on
   #ff8500 = 2.44:1, and "Get a Quote" on /web-design-service-company/ on
   #ff9736 at 14px = 2.16:1). Both are orange, so the rule is safe
   unscoped. If a bklyn-btn on a DARK fill is ever added, scope this. */
a.bklyn-btn .ut-btn-text, a.bklyn-btn { color:#1a1a1a !important; }

/* ===== 10. HOMEPAGE VERTICAL RHYTHM — added 2026-07-28 =====
   Page was 11,195px with 1,320px in gaps of 100px+ containing no text,
   no image and no background image. After these rules: 10,237px / 350px.

   TWO THINGS ARE LOAD-BEARING HERE:
   1. WPBakery regenerates ut-row IDs every render (hex timestamps), so
      rows cannot be targeted by ID. nth-child is what is left; verified
      stable across reloads (section 1 has 5 children, section 2 has 17).
   2. The theme prints #ut-row-XXXXX{padding-top:300px!important} — one ID
      plus !important. A zero-ID !important rule LOSES to it. The
      body#ut-sitebody + #main-content prefix supplies two IDs, which
      clears it. Drop either ID and the padding silently reverts with no
      error. Measured: 0 IDs -> 300px unchanged, 2 IDs -> 190px applied. */

@media (min-width:1000px){
  body#ut-sitebody.home #main-content .wpb-content-wrapper > section.vc_section { padding-top:40px !important; padding-bottom:40px !important; }
  body#ut-sitebody.home #main-content .wpb-content-wrapper > section.vc_section:nth-of-type(1) > .vc_row:nth-child(3) { margin-top:24px !important; }
  body#ut-sitebody.home #main-content .wpb-content-wrapper > .vc_row:nth-child(7) { padding-top:56px !important; }
  body#ut-sitebody.home #main-content .wpb-content-wrapper > section.vc_section:nth-of-type(2) > .vc_row:nth-child(3) { margin-top:0 !important; }
  body#ut-sitebody.home #main-content .wpb-content-wrapper > section.vc_section:nth-of-type(2) > .vc_row:nth-child(5) { padding-top:190px !important; padding-bottom:190px !important; margin-top:60px !important; }
  body#ut-sitebody.home #main-content .wpb-content-wrapper > section.vc_section:nth-of-type(2) > .vc_row:nth-child(7) { margin-top:72px !important; }
  body#ut-sitebody.home #main-content .wpb-content-wrapper > section.vc_section:nth-of-type(2) > .vc_row:nth-child(9),
  body#ut-sitebody.home #main-content .wpb-content-wrapper > section.vc_section:nth-of-type(2) > .vc_row:nth-child(11) { padding-top:56px !important; margin-top:24px !important; }
  body#ut-sitebody.home #main-content .wpb-content-wrapper > section.vc_section:nth-of-type(2) > .vc_row:nth-child(13) { padding-top:80px !important; padding-bottom:70px !important; margin-top:60px !important; }
}

/* ===== 11. /digital-agency/ — CTA and card exit links (added 2026-07-28) =====
   Audit found this page receives 117 internal links from 76 of the site's 176
   pages — almost certainly the most-linked page on the site — and its body
   linked out to NOTHING. The "Ready to Build Something That Performs?" section
   was a heading plus a line of copy above a 176px row containing zero links and
   zero buttons.

   Page content now carries 7 card links plus 2 CTA buttons (page 9570).
   This styles them.

   Class names are load-bearing: YellowPencil resets anchors whose class does not
   contain btn/button/cta. "pcd-card-cta-link" and "pcd-cta-btn" both qualify.

   Colour note: brand orange #ff9433 on white is only 2.2:1, so the card links
   use #b5540a (4.96:1). The primary button keeps the brand orange with #1a1a1a
   text (7.9:1), matching the site's other buttons. */

body#ut-sitebody #main-content .pcd-service-card .pcd-card-cta{ margin:20px 0 0 !important; padding-top:16px !important; border-top:1px solid #ececf1 !important; }
body#ut-sitebody #main-content .pcd-service-card a.pcd-card-cta-link{ display:inline-block !important; font-size:14px !important; font-weight:700 !important; letter-spacing:.3px !important; color:#b5540a !important; text-decoration:none !important; line-height:1.3 !important; }
body#ut-sitebody #main-content .pcd-service-card a.pcd-card-cta-link:after{ content:" \2192" !important; }
body#ut-sitebody #main-content .pcd-service-card a.pcd-card-cta-link:hover{ color:#7d3a06 !important; text-decoration:underline !important; }

body#ut-sitebody #main-content .pcd-cta-row{ display:flex !important; flex-wrap:wrap !important; gap:14px !important; justify-content:center !important; margin:8px 0 0 !important; }
body#ut-sitebody #main-content .pcd-cta-row a.pcd-cta-btn{ display:inline-block !important; padding:17px 32px !important; border-radius:999px !important; font-size:16px !important; font-weight:700 !important; line-height:1 !important; text-decoration:none !important; }
body#ut-sitebody #main-content .pcd-cta-row a.pcd-cta-primary{ background-color:#ff9433 !important; color:#1a1a1a !important; border:2px solid #ff9433 !important; }
body#ut-sitebody #main-content .pcd-cta-row a.pcd-cta-primary:hover{ background-color:#ffa757 !important; border-color:#ffa757 !important; }
body#ut-sitebody #main-content .pcd-cta-row a.pcd-cta-secondary{ background-color:transparent !important; color:#1a1a1a !important; border:2px solid #d3d3da !important; }
body#ut-sitebody #main-content .pcd-cta-row a.pcd-cta-secondary:hover{ border-color:#1a1a1a !important; }
@media (max-width:600px){ body#ut-sitebody #main-content .pcd-cta-row{ flex-direction:column !important; align-items:stretch !important; } body#ut-sitebody #main-content .pcd-cta-row a.pcd-cta-btn{ text-align:center !important; } }

/* ===== 12. /digital-agency/ — heading hierarchy and vertical rhythm (2026-07-28) =====
   Measured before: 7,345px tall with 2,230px in gaps of 100px or more containing
   no text, no image and no background image. Thirty percent of the page was
   empty. Sources were four vc_sections at 60/60 padding, nine rows carrying
   margin-top 40, three rows at 80-150 padding-top, and eight standalone
   "nbsp" lines that wpautop rendered as empty paragraphs (removed from the page
   content itself, 384px).

   Heading fix: the H1 and the orange H2 under it were both 32px/700, and the H2
   wrapped to two lines, so the H2 visually outranked the H1. H1 now 44px, H2 24px
   as a supporting line. Copy unchanged.

   Hero contrast verified against the actual gradient stops, not a guessed
   background: orange on the three stops measures 6.49 / 8.21 / 8.82, white
   measures 14.29 / 18.07 / 19.42. All pass comfortably. */

body#ut-sitebody.page-id-9570 #main-content h1.pcd-hero-h{ font-size:44px !important; line-height:1.14 !important; margin-bottom:10px !important; }
body#ut-sitebody.page-id-9570 #main-content h2.pcd-hero-h2{ font-size:24px !important; line-height:1.35 !important; font-weight:600 !important; }
@media (max-width:767px){
 body#ut-sitebody.page-id-9570 #main-content h1.pcd-hero-h{ font-size:30px !important; }
 body#ut-sitebody.page-id-9570 #main-content h2.pcd-hero-h2{ font-size:19px !important; }
}

@media (min-width:1000px){
 body#ut-sitebody.page-id-9570 #main-content .wpb-content-wrapper > section.vc_section{ padding-top:36px !important; padding-bottom:36px !important; }
 body#ut-sitebody.page-id-9570 #main-content .wpb-content-wrapper > section.vc_section > .vc_row{ margin-top:24px !important; }
 body#ut-sitebody.page-id-9570 #main-content .wpb-content-wrapper > section.vc_section > .vc_row:first-child{ margin-top:0 !important; }
 body#ut-sitebody.page-id-9570 #main-content .wpb-content-wrapper > .vc_row{ padding-top:56px !important; }
}

/* ===== 13. "What We Do" flip boxes — proportions, padding, mobile (2026-07-30) =====
   Box: [oxilab_flip_box id="1"] "Home Flip" — 12 items, Flip Box Ultimate plugin.
   Everything here is scoped to .page-id-5624 (the homepage) because many of the
   plugin's classes are GENERIC, not per-box: a flip box added to any other page would
   otherwise inherit the grid, the card chrome and the flattening below.
   (The front border, hover lift and the corner flip hint live in the earlier
   unnumbered "Flip box section polish" block. This section builds on it.)

   THE BUG. The plugin sizes every card by a FIXED ASPECT RATIO: General > Width 430,
   Height 330 becomes oxilab-flip-box-body-1::after{padding-bottom:76.7442%}. But the
   back face holds a paragraph, so as the card narrows the box gets SHORTER while the
   text it must contain gets TALLER. oxilab-flip-box-1 is overflow:hidden, so the copy
   was cut off mid-sentence. Measured before this fix:
     320px vp: 12/12 cards clipped, worst 128px of copy lost
     360px vp:  7/12 clipped        375px vp: 6/12 clipped
     620px vp: 12/12 clipped, worst 135px       700px vp: 10/12 clipped
   Desktop was safe but 45% empty: 182px of front content in a 330px box.

   THE FIX. Kill the ratio. Flip only where the card is wide enough (>=1200px), with an
   explicit height; below that the card stops flipping and becomes ONE static card with
   icon, title and copy all visible, height driven by content — so clipping is
   impossible and nothing is hidden behind a tap. */

/* Layout properties must not animate. The plugin sets `transition: all .5s` on
   oxilab-flip-box-wrapper * — and a RUNNING CSS TRANSITION OUTRANKS !important, so
   every height/padding override below silently appeared to do nothing until this line
   existed. Keep transform and shadow (the flip and the hover lift); drop the rest. */
.page-id-5624 .oxilab-flip-box-wrapper * { transition-property: transform, box-shadow, opacity, color, background-color !important; }

/* ---------- Grid: even gutters, cards fill their column ---------- */
.page-id-5624 .oxilab-flip-box-padding-1 { padding: 12px !important; }   /* 24px gutters, was 38 horizontal / 20 vertical */
.page-id-5624 .oxilab-flip-box-body-1    { max-width: none !important; } /* was capped at 430px inside a 448px slot */
.page-id-5624 .oxilab-flip-box-body-1::after { padding-bottom: 0 !important; display: none !important; }

/* ---------- Front face ---------- */
.page-id-5624 .oxilab-flip-box-1-data { padding: 16px 18px !important; }
.page-id-5624 .oxilab-flip-box-1-data .oxilab-icon { padding: 6px 10px !important; }
.page-id-5624 .oxilab-flip-box-1-data .oxilab-icon-data { width: 104px !important; height: 104px !important; border-radius: 50% !important; }
.page-id-5624 .oxilab-flip-box-1-data .oxilab-icon-data .oxi-icons { line-height: 104px !important; font-size: 40px !important; }
.page-id-5624 .oxilab-flip-box-front .oxilab-heading {
  font-size: 21px !important; line-height: 1.3 !important;
  text-transform: uppercase !important;          /* 3 of 12 titles are stored in title case */
  letter-spacing: .02em !important; color: #222 !important;
  padding: 12px 6px 0 !important;
}

/* ---------- Back face ---------- */
/* It still carried the plugin's 8px black border and offset grey shadow, so flipping a
   card jumped from a soft 1px grey box to a heavy black one. Matched to the front. */
.page-id-5624 .oxilab-flip-box-back-1 {
  border: 1px solid #e5e5e5 !important; background: #fafafa !important;
  border-radius: 15px !important; box-shadow: 0 4px 14px rgba(0, 0, 0, .06) !important;
}
.page-id-5624 .oxilab-flip-box-back-1-data { padding: 16px 18px !important; }
.page-id-5624 .oxilab-flip-box-back-1-data .oxilab-heading {
  font-size: 17px !important; line-height: 1.25 !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .02em !important;
  color: #222 !important; padding: 0 0 6px !important;
  font-family: Chenla, Georgia, serif !important;   /* was Open Sans; front titles are Chenla */
}
.page-id-5624 .oxilab-flip-box-back-1-data .oxilab-heading:empty { display: none !important; }
.page-id-5624 .oxilab-flip-box-back-1-data .oxilab-info {
  font-size: 14.5px !important;
  line-height: 1.45 !important;                     /* was 14px/28px = 2.0, which forced the 330px box */
  color: #3a3a3a !important; padding: 0 !important;
}
.page-id-5624 .oxilab-flip-box-back-1-data .oxilab-button { padding: 10px 10px 0 !important; }
.page-id-5624 .oxilab-flip-box-back-1-data .oxilab-button-data {
  font-size: 12.5px !important; font-weight: 600 !important;
  letter-spacing: .04em !important; padding: 9px 18px !important;
}

/* ---------- Flip band: only where the card is wide enough to be safe ---------- */
/* Verified zero clipping: card 344x310 -> 40px headroom, 392x310 -> 61px headroom. */
@media (min-width: 1200px) {
  .page-id-5624 .oxilab-flip-box-body-1 { height: auto !important; }
}

/* ---------- All widths: no flip, one static card, content-driven height (un-gated Aug 28 2026) ---------- */
@media all {
  /* grid, so 2-up rows are equal height without float raggedness */
  .page-id-5624 .oxilab-flip-box-wrapper { display: grid !important; gap: 20px !important; float: none !important; }

  /* card chrome moves onto the grid cell, so every card in a row matches exactly */
  .page-id-5624 .oxilab-flip-box-col-3 {
    width: auto !important; float: none !important; padding: 0 !important;
    border: 1px solid #e5e5e5 !important; background: #fafafa !important;
    border-radius: 15px !important; overflow: hidden !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06) !important;
  }
  .page-id-5624 .oxilab-flip-box-1,
  .page-id-5624 .oxilab-flip-box-back-1 {
    border: 0 !important; background: transparent !important; box-shadow: none !important;
    border-radius: 0 !important; position: relative !important;
    height: auto !important; overflow: visible !important;
  }
  .page-id-5624 .oxilab-flip-box-1::after { display: none !important; }   /* the hover-flip affordance */

  /* unwind the 3D flip so both faces simply stack */
  .page-id-5624 .oxilab-flip-box-front,
  .page-id-5624 .oxilab-flip-box-back {
    position: relative !important; height: auto !important;
    transform: none !important; backface-visibility: visible !important; z-index: auto !important;
  }
  .page-id-5624 .oxilab-flip-box-1-data,
  .page-id-5624 .oxilab-flip-box-back-1-data {
    position: relative !important; top: auto !important; left: auto !important;
    transform: none !important;
    display: flow-root !important;   /* both faces' children float; absolute positioning used to contain them */
  }
  .page-id-5624 .oxilab-flip-box-body-1        { height: auto !important; }
  .page-id-5624 .oxilab-flip-box-body-absulote { position: relative !important; height: auto !important; }
  .page-id-5624 .oxilab-flip-box-flip          { height: auto !important; display: block !important; }
  .page-id-5624 .oxilab-flip-box-style-data    { height: auto !important; perspective: none !important; }
  .page-id-5624 .oxilab-flip-box-style         { height: auto !important; transform: none !important; transform-style: flat !important; }

  /* the front title already names the card, so drop the repeat on the back */
  .page-id-5624 .oxilab-flip-box-back-1-data .oxilab-heading { display: none !important; }

  /* spacing for the merged card */
  .page-id-5624 .oxilab-flip-box-1-data      { padding: 24px 20px 4px !important; }
  .page-id-5624 .oxilab-flip-box-back-1-data { padding: 0 20px 20px !important; }
  .page-id-5624 .oxilab-flip-box-1-data .oxilab-icon-data { width: 84px !important; height: 84px !important; }
  .page-id-5624 .oxilab-flip-box-1-data .oxilab-icon-data .oxi-icons { line-height: 84px !important; font-size: 33px !important; }
  .page-id-5624 .oxilab-flip-box-front .oxilab-heading { font-size: 19px !important; padding: 12px 6px 0 !important; }
}
@media (min-width: 1200px) { .page-id-5624 .oxilab-flip-box-wrapper { grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; } }
@media (min-width: 700px) and (max-width: 1199px) { .page-id-5624 .oxilab-flip-box-wrapper { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 699px)                        { .page-id-5624 .oxilab-flip-box-wrapper { grid-template-columns: 1fr !important; } }

/* ==========================================================================
   Sticky mobile / tablet header  (added 2026-08-06)
   Below 1025px the header pins to the top, slides away on scroll down and
   returns on scroll up. Desktop is untouched. Pairs with the WPCode snippet
   "PCD sticky mobile header" (toggles .pcd-hdr-hidden on <html>).
   ========================================================================== */
@media (max-width: 1024px) {
  body#ut-sitebody #header-section.ha-header {
    position: fixed !important; top: 0; left: 0; right: 0; width: 100%;
    transform: translateY(0); transition: transform .28s ease; will-change: transform;
  }
  /* body is a flex column, so the spacer needs flex:0 0 auto or it collapses */
  body#ut-sitebody:not(.ut-header-display-on-hero) #header-section.ha-header + .clear,
  body#ut-sitebody .pcd-header-spacer { flex: 0 0 auto; }
  html.pcd-hdr-hidden body#ut-sitebody #header-section.ha-header { transform: translateY(-105%); }
  /* drawer open: pinned, and scrollable if the menu is taller than the screen */
  body#ut-sitebody.ut-mobile-menu-open #header-section.ha-header {
    position: fixed !important; transform: translateY(0) !important;
    max-height: 100vh; max-height: 100dvh;
    overflow-y: auto !important; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  body#ut-sitebody.ut-mobile-menu-open { overflow: hidden; }
  body#ut-sitebody.admin-bar #header-section.ha-header { top: 46px; }
}
@media (max-width: 767px) {
  body#ut-sitebody:not(.ut-header-display-on-hero) #header-section.ha-header + .clear,
  body#ut-sitebody .pcd-header-spacer { height: var(--pcd-hdr-h, 61px); }
  :target { scroll-margin-top: calc(var(--pcd-hdr-h, 61px) + 12px); }
}
@media (min-width: 768px) and (max-width: 1024px) {
  body#ut-sitebody:not(.ut-header-display-on-hero) #header-section.ha-header + .clear,
  body#ut-sitebody .pcd-header-spacer { height: var(--pcd-hdr-h, 81px); }
  :target { scroll-margin-top: calc(var(--pcd-hdr-h, 81px) + 12px); }
}
@media screen and (max-width: 600px) {
  body#ut-sitebody.admin-bar #header-section.ha-header { top: 0; }
}

/* ==========================================================================
   Miami web design page (ID 10582): readable measure. Added 2026-08-22.
   Body copy ran 1360px wide, centred, at 21px/1.33. Constrained to 820px,
   left aligned, leading opened to 1.75. Scoped to this page only.
   ========================================================================== */

/* ========== Miami page (ID 10582) UI pass, 2026-08-22 ==========
   Selectors deliberately avoid .ut-row-<hash> classes: WPBakery
   regenerates those on every save, so rules keyed to them break silently. */

/* rows ship up to 120px of vertical margin the layout does not need */

/* seven section wrappers sit at 60px top and bottom */

/* let the hero sit flush against the header */

/* hero: uses the Miami night skyline already in the media library */

/* ==========================================================================
   YellowPencil GLOBAL customization — merged into Additional CSS 2026-08-07
   Moved verbatim from the YellowPencil plugin so all site-wide CSS lives in
   one place. It sat immediately after this block in the page head, with
   nothing between them, so the cascade order is unchanged.
   51 rules. YellowPencil's per-page customizations (104 of them) are NOT
   included and remain in the plugin.
   ========================================================================== */
#header-section,.ha-header,.ha-header-perspective,.ha-header-front,.ha-header-back{background: #000 !important;-webkit-box-shadow: none !important;box-shadow: none !important;position: relative !important;z-index: 99999 !important;overflow: visible !important;}#navigation{background: #000 !important;display:-webkit-box !important;display:-webkit-flex !important;display:-ms-flexbox !important;display:flex !important;-webkit-box-align: center !important;-ms-flex-align: center !important;align-items: center !important;-webkit-box-pack: center !important;-ms-flex-pack: center !important;justify-content: center !important;padding: 14px 0 !important;min-height: 84px !important;border-bottom: 1px solid rgba(255,255,255,0.08) !important;position: relative !important;z-index: 99999 !important;overflow: visible !important;}.site-logo a img,.logo img,.header-logo img,.branding img{position: static !important;margin: 0 !important;padding: 0 !important;max-height: 56px !important;width: auto !important;height: auto !important;}#navigation #menu-main,#navigation .menu-main-menu-container > ul{display:-webkit-box !important;display:-webkit-flex !important;display:-ms-flexbox !important;display:flex !important;-webkit-box-align: center !important;-ms-flex-align: center !important;align-items: center !important;gap: 26px !important;margin: 0 !important;padding: 0 !important;}#navigation #menu-main > li > a,#menu-main .menu-item .ut-main-navigation-link{font-family: 'Manrope', Arial, sans-serif !important;font-style: normal !important;font-weight: 700 !important;font-size: 16px !important;letter-spacing: 0.08em !important;text-transform: uppercase !important;color: #eaeaea !important;text-decoration: none !important;padding: 10px 6px !important;border-bottom: 3px solid transparent !important;transition: color .15s ease, border-color .15s ease, background .15s ease !important;}#navigation #menu-main > li > a:hover,#menu-main .menu-item .ut-main-navigation-link:hover{color: #e69500 !important;border-bottom-color: #e69500 !important;}#navigation .current-menu-item > a,#navigation .current-menu-ancestor > a{color: #fff !important;border-bottom-color: #e69500 !important;}#navigation #menu-main > li > a[href*="web-design-pricing-instant-ai-quote"],#navigation #menu-main > li > a.ut-main-navigation-link[href*="web-design-pricing-instant-ai-quote"]{background: #ffae1a !important;color: #000 !important;padding: 12px 18px !important;border-radius: 14px !important;display: inline-flex !important;-webkit-box-align: center !important;-ms-flex-align: center !important;align-items: center !important;-webkit-box-pack: center !important;-ms-flex-pack: center !important;justify-content: center !important;border: 0 !important;border-bottom: 0 !important;letter-spacing: 0.06em !important;text-transform: uppercase !important;}#navigation #menu-main > li > a[href*="web-design-pricing-instant-ai-quote"]:hover,#navigation #menu-main > li.current-menu-item > a[href*="web-design-pricing-instant-ai-quote"],#navigation #menu-main > li.current-menu-ancestor > a[href*="web-design-pricing-instant-ai-quote"]{color: #000 !important;border-bottom: 0 !important;}#navigation #menu-main > li.menu-item{position: relative !important;}#navigation ul.sub-menu{opacity: 0 !important;visibility: hidden !important;pointer-events: none !important;}#navigation #menu-main > li.menu-item > ul.sub-menu{position: absolute !important;left: 50% !important;top: 100% !important;-webkit-transform: translateX(-50%) !important;-ms-transform: translateX(-50%) !important;transform: translateX(-50%) !important;min-width: 260px !important;max-width: 340px !important;background: #0b0b0b !important;border: 1px solid rgba(255,255,255,0.12) !important;border-radius: 14px !important;padding: 10px 0 !important;margin: 0 !important;-webkit-box-shadow: 0 18px 45px rgba(0,0,0,0.55) !important;box-shadow: 0 18px 45px rgba(0,0,0,0.55) !important;z-index: 999999 !important;transition: opacity .12s ease, visibility 0s linear .12s !important;will-change: opacity;}#navigation #menu-main > li.menu-item > ul.sub-menu::before{content: "" !important;position: absolute !important;left: -12px !important;right: -12px !important;top: -18px !important;height: 18px !important;background: transparent !important;}#navigation #menu-main > li.menu-item:hover > ul.sub-menu,#navigation #menu-main > li.menu-item:focus-within > ul.sub-menu,#navigation #menu-main > li.menu-item > ul.sub-menu:hover{opacity: 1 !important;visibility: visible !important;pointer-events: auto !important;transition: opacity .12s ease, visibility 0s !important;}#navigation #menu-main > li.menu-item > ul.sub-menu > li{position: relative !important;}#navigation #menu-main > li.menu-item > ul.sub-menu > li > a{display:-webkit-box !important;display:-webkit-flex !important;display:-ms-flexbox !important;display:flex !important;-webkit-box-align: center !important;-ms-flex-align: center !important;align-items: center !important;-webkit-box-pack: space-between !important;-ms-flex-pack: space-between !important;justify-content: space-between !important;padding: 12px 16px !important;margin: 0 10px !important;border-radius: 12px !important;font-family: 'Manrope', Arial, sans-serif !important;font-weight: 800 !important;font-size: 14px !important;letter-spacing: 0.06em !important;text-transform: uppercase !important;text-decoration: none !important;color: #f7931e !important;background: rgba(255,255,255,0.03) !important;border: 1px solid rgba(255,255,255,0.10) !important;}#navigation #menu-main > li.menu-item > ul.sub-menu > li:hover > a,#navigation #menu-main > li.menu-item > ul.sub-menu > li:focus-within > a{color: #fff !important;background: rgba(255,255,255,0.08) !important;border-color: rgba(255,255,255,0.16) !important;}#navigation #menu-main > li.menu-item > ul.sub-menu > li.menu-item-has-children > a::after{content: "›" !important;color: #e69500 !important;font-size: 18px !important;margin-left: 10px !important;}#navigation #menu-main > li.menu-item > ul.sub-menu > li.menu-item > ul.sub-menu{position: absolute !important;top: 0 !important;left: 100% !important;margin-left: 10px !important;min-width: 260px !important;max-width: 340px !important;background: #0b0b0b !important;border: 1px solid rgba(255,255,255,0.12) !important;border-radius: 14px !important;padding: 10px 0 !important;-webkit-box-shadow: 0 18px 45px rgba(0,0,0,0.60) !important;box-shadow: 0 18px 45px rgba(0,0,0,0.60) !important;z-index: 1000000 !important;transition: opacity .12s ease, visibility 0s linear .12s !important;will-change: opacity;}#navigation #menu-main > li.menu-item > ul.sub-menu > li.menu-item > ul.sub-menu::before{content: "" !important;position: absolute !important;top: 0 !important;bottom: 0 !important;left: -14px !important;width: 14px !important;background: transparent !important;}#navigation #menu-main > li.menu-item > ul.sub-menu > li.menu-item:hover > ul.sub-menu,#navigation #menu-main > li.menu-item > ul.sub-menu > li.menu-item:focus-within > ul.sub-menu,#navigation #menu-main > li.menu-item > ul.sub-menu > li.menu-item > ul.sub-menu:hover{opacity: 1 !important;visibility: visible !important;pointer-events: auto !important;transition: opacity .12s ease, visibility 0s !important;}#navigation #menu-main > li.menu-item > ul.sub-menu > li.menu-item > ul.sub-menu > li > a{display: block !important;padding: 12px 16px !important;font-family: 'Manrope', Arial, sans-serif !important;font-weight: 800 !important;font-size: 14px !important;letter-spacing: 0.06em !important;text-transform: uppercase !important;text-decoration: none !important;color: rgba(255,255,255,0.92) !important;background: transparent !important;border: 0 !important;-webkit-box-shadow: none !important;box-shadow: none !important;margin: 0 !important;border-radius: 0 !important;text-align: left !important;line-height: 1.2 !important;white-space: normal !important;}#navigation #menu-main > li.menu-item > ul.sub-menu > li.menu-item > ul.sub-menu > li:hover > a{color: #fff !important;background: rgba(230,149,0,0.18) !important;}#navigation ul.sub-menu > li > a::before,#navigation ul.sub-menu > li > a::after,#navigation ul.sub-menu li::before,#navigation ul.sub-menu li::after{content: none !important;background: transparent !important;-webkit-box-shadow: none !important;box-shadow: none !important;}#navigation,#navigation *{-webkit-transform: none !important;-ms-transform: none !important;transform: none !important;-webkit-filter: none !important;filter: none !important;}#menu-main > li.menu-item-22231,#ut-mobile-menu > li.menu-item-22231{display: none !important;}#menu-main > li.menu-item-21370,#ut-mobile-menu > li.menu-item-21370{display: none !important;}#menu-main > li.menu-item-22241,#ut-mobile-menu > li.menu-item-22241{display: none !important;}a:not(#navigation a):not(.mobile-navigation a):not(#ut-mobile-menu a):not(nav a):not(.menu a):not(.sub-menu a):not([class*="btn"]):not([class*="button"]):not([class*="cta"]):not([role="button"]):not([style*="color"]):not(#qf-fab){text-decoration: none !important;font-weight: normal !important;color: inherit !important;}body #qf-fab-wrap{top: auto !important;bottom: 20px !important;right: 20px !important;}a#qf-fab{background: #ffae1a !important;color: #111 !important;}a#qf-fab:hover{background: #ff9500 !important;color: #111 !important;}@media (max-width: 1154px){#navigation #menu-main > li > a,#menu-main .menu-item .ut-main-navigation-link{font-size: 14px !important;}.site-logo a img{max-height: 50px !important;}}@media (max-width: 1035px){#navigation #menu-main > li > a,#menu-main .menu-item .ut-main-navigation-link{font-size: 13px !important;}}@media (max-width: 1025px){#navigation,.header-menu,.navigation--main,.navigation__main,.menu-main-menu-container{display: none !important;}.menu-toggle,.mobile-menu-toggle,.header-menu-mobile-toggle{display: block !important;position: relative !important;z-index: 999999 !important;}#header-section,.ha-header,.ha-header-front,.ha-header-back{position: relative !important;z-index: 999999 !important;overflow: visible !important;}.mobile-navigation,#navigation ul.mobile-menu{background: #000 !important;width: 100% !important;position: fixed !important;inset: 0 !important;padding: 28px 18px 26px !important;z-index: 999998 !important;overflow-y: auto !important;text-align: left !important;}.mobile-navigation .ut-overlay-close,.mobile-navigation .ut-mobile-menu-close,.mobile-navigation .ut-close,.mobile-navigation .close{position: fixed !important;top: 18px !important;right: 18px !important;z-index: 999999 !important;}.mobile-navigation ul,.mobile-navigation li{list-style: none !important;margin: 0 !important;padding: 0 !important;}.mobile-navigation > ul > li > a,#ut-mobile-menu > .menu-item > a{display:-webkit-box !important;display:-webkit-flex !important;display:-ms-flexbox !important;display:flex !important;-webkit-box-align: center !important;-ms-flex-align: center !important;align-items: center !important;-webkit-box-pack: space-between !important;-ms-flex-pack: space-between !important;justify-content: space-between !important;padding: 18px 10px !important;font-family: 'Manrope', Arial, sans-serif !important;font-size: 20px !important;font-weight: 800 !important;letter-spacing: 0.02em !important;text-transform: none !important;color: #fff !important;border-bottom: 1px solid rgba(255,255,255,0.10) !important;background: transparent !important;text-decoration: none !important;}.mobile-navigation > ul > li:hover > a,.mobile-navigation > ul > li:focus-within > a{background: rgba(255,255,255,0.06) !important;}.mobile-navigation .menu-item-has-children > .sub-menu{display: block !important;max-height: none !important;height: auto !important;opacity: 1 !important;visibility: visible !important;overflow: visible !important;pointer-events: auto !important;margin: 0 !important;padding: 0 !important;border: 0 !important;background: transparent !important;}.mobile-navigation .sub-menu > li > a{display: block !important;padding: 14px 10px 14px 40px !important;font-family: 'Manrope', Arial, sans-serif !important;font-size: 16px !important;font-weight: 800 !important;letter-spacing: 0.02em !important;text-transform: none !important;color: #f7931e !important;border-bottom: 1px solid rgba(255,255,255,0.08) !important;background: transparent !important;text-decoration: none !important;}.mobile-navigation .sub-menu .sub-menu{margin: 8px 10px 10px 40px !important;padding: 8px 0 !important;background: rgba(255,255,255,0.03) !important;border: 1px solid rgba(255,255,255,0.08) !important;border-radius: 12px !important;}.mobile-navigation .sub-menu .sub-menu > li > a{padding: 12px 14px !important;font-size: 15px !important;font-weight: 700 !important;letter-spacing: 0.01em !important;text-transform: none !important;color: rgba(255,255,255,0.92) !important;border-bottom: 1px solid rgba(255,255,255,0.08) !important;}.mobile-navigation .sub-menu > li:last-child > a,.mobile-navigation .sub-menu .sub-menu > li:last-child > a{border-bottom: 0 !important;}.mobile-navigation a,.mobile-navigation a:hover,.mobile-navigation a:focus,.mobile-navigation a:focus-visible{background-color: transparent !important;-webkit-box-shadow: none !important;box-shadow: none !important;outline: none !important;}.mobile-navigation a::before,.mobile-navigation a::after,.mobile-navigation li::before,.mobile-navigation li::after{content: none !important;}.mobile-navigation a[href*="web-design-pricing-instant-ai-quote"]{margin-top: 16px !important;border: 0 !important;border-radius: 14px !important;background: #e69500 !important;color: #fff !important;-webkit-box-pack: center !important;-ms-flex-pack: center !important;justify-content: center !important;font-weight: 900 !important;letter-spacing: 0.04em !important;padding: 16px 14px !important;}}

/* ==========================================================================
   Miami typography normalisation  (page 10582, August 7 2026)
   The page ran body copy at five sizes (21/20/18/14px) and headings at two
   weights (H2 700, H3 500), which made some text look bold and some faint.
   This puts it on one type scale. No copy, layout or alignment is changed.
   The body ID prefix is required: the theme uses ID-scoped rules such as
   #ut_sc_xxxx .ut-service-column p {font-size:14px !important}, and an ID
   beats any number of classes.
   ========================================================================== */

/* ==========================================================================
   Government Technology Solutions — page styling (page 90391, August 7 2026)
   Page was plain content in .entry-content with no styling: all paragraphs at
   14px, lines running the full 1360px viewport, heading weights descending
   700/600/500, and the two CTAs as plain text links split by a pipe.
   This sets a readable measure and type scale and makes the CTAs buttons.
   No copy or markup changed. NOTE: this page is plain HTML, not WPBakery —
   there is no .wpb_text_column to hook, hence the different selectors.
   ========================================================================== */
body#ut-sitebody.page-id-90391 .entry-content {max-width:880px;margin-left:auto;margin-right:auto}
body#ut-sitebody.page-id-90391 .entry-content p,body#ut-sitebody.page-id-90391 .entry-content li{font-size:18px!important;line-height:1.72!important;font-weight:400!important;color:#3f4650!important}
body#ut-sitebody.page-id-90391 .entry-content h1,body#ut-sitebody.page-id-90391 .entry-content h2,body#ut-sitebody.page-id-90391 .entry-content h3,body#ut-sitebody.page-id-90391 .entry-content h4{font-weight:700!important;letter-spacing:-.02em!important;color:#0d0f12!important}
body#ut-sitebody.page-id-90391 .entry-content h1{font-size:40px!important;line-height:1.15!important;margin-bottom:18px!important}
body#ut-sitebody.page-id-90391 .entry-content h2{font-size:28px!important;line-height:1.2!important;margin-top:56px!important;margin-bottom:14px!important}
body#ut-sitebody.page-id-90391 .entry-content h3{font-size:20px!important;line-height:1.3!important;margin-top:32px!important;margin-bottom:8px!important}
/* font-size:0 collapses the " | " between the two CTA links without touching markup */
body#ut-sitebody.page-id-90391 .entry-content p:has(> a[href*="contact"]){font-size:0!important;margin-top:28px!important}
body#ut-sitebody.page-id-90391 .entry-content p a[href*="contact"]{display:inline-block!important;background:#f2a03d!important;border-radius:999px!important;padding:14px 30px!important;font-size:16px!important;font-weight:700!important;text-decoration:none!important;margin:0 10px 10px 0!important}
/* -webkit-text-fill-color is required: something in the theme forces the anchor
   colour to transparent and wins, so fill is what actually paints the label. */
body#ut-sitebody.page-id-90391 .entry-content p a[href*="contact"],body#ut-sitebody.page-id-90391 .entry-content p a[href*="contact"] *{color:#111!important;-webkit-text-fill-color:#111!important}
body#ut-sitebody.page-id-90391 .entry-content p a[href*="contact"]:nth-of-type(2){background:#fff!important;box-shadow:inset 0 0 0 2px #111!important}
@media (max-width:767px){
  body#ut-sitebody.page-id-90391 .entry-content p,body#ut-sitebody.page-id-90391 .entry-content li{font-size:17px!important}
  body#ut-sitebody.page-id-90391 .entry-content h1{font-size:30px!important}
  body#ut-sitebody.page-id-90391 .entry-content h2{font-size:24px!important;margin-top:44px!important}
  body#ut-sitebody.page-id-90391 .entry-content h3{font-size:19px!important}
  body#ut-sitebody.page-id-90391 .entry-content p a[href*="contact"]{display:block!important;text-align:center;margin-right:0!important}
}

/* ==========================================================================
   Homepage cards - label face + desktop padding  (page 5624, Aug 28 2026)
   The flip is now off at every width (see the "All widths" block above), so
   the label is permanent furniture. It was inheriting "Chenla", a Khmer serif
   from the theme stack that matches nothing else on the site. Manrope is the
   site heading face and is already loaded on every page for H2.
   Scoped to .oxilab-heading only - the icon glyphs live on .oxi-icons in a
   sibling element and must keep their icon font.
   ========================================================================== */
.page-id-5624 .oxilab-flip-box-front .oxilab-heading,
.page-id-5624 .oxilab-flip-box-front .oxilab-heading * {
  font-family: Manrope, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .02em !important;
}

/* Desktop cards are ~465px wide and now carry real copy, so a little more room
   than the phone padding set inside the main block. */
@media (min-width: 1200px) {
  .page-id-5624 .oxilab-flip-box-1-data      { padding: 28px 24px 6px !important; }
  .page-id-5624 .oxilab-flip-box-back-1-data { padding: 0 24px 24px !important; }
  .page-id-5624 .oxilab-flip-box-front .oxilab-heading { font-size: 20px !important; }
}

/* ==========================================================================
   Digital Agency page (9570), readability pass, August 29 2026
   ========================================================================== */
.page-id-9570 #main-content p{ letter-spacing:normal !important; }
.page-id-9570 #main-content .wpb_text_column p[style*="text-align: right"]{ text-align:left !important; }
.page-id-9570 #main-content .wpb_text_column{ max-width:820px; margin-left:auto !important; margin-right:auto !important; }
.page-id-9570 #main-content .sp-easy-accordion .ea-body{ max-width:820px; margin-left:auto; margin-right:auto; }
.page-id-9570 #main-content .sp-easy-accordion .ea-header a{ border-radius:8px; }
.page-id-9570 #main-content .sp-easy-accordion .sp-ea-single{ margin-bottom:10px; }
.page-id-9570 .pcd-trust-strip{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:22px; }
@media (max-width:860px){
  .page-id-9570 #main-content .wpb_text_column{ padding-left:18px; padding-right:18px; }
  .page-id-9570 .pcd-trust-strip{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px){
  .page-id-9570 .pcd-trust-strip{ grid-template-columns:1fr; }
}

/* Accordion: keep the panel full width, hold the text to a readable measure */
.page-id-9570 #main-content .sp-easy-accordion .ea-body{ max-width:none !important; }
.page-id-9570 #main-content .sp-easy-accordion .ea-body > *{ max-width:820px; margin-left:auto; margin-right:auto; }
/* YellowPencil sets line-height:2.5em on the first intro column with a very long
   selector, which left the two intro columns mismatched. Same measure for both. */
body#ut-sitebody.page-id-9570 #main-content .wpb_text_column p{ line-height:1.7 !important; }
body#ut-sitebody.page-id-9570 #main-content #primary .wpb_text_column p{ line-height:1.7 !important; }

/* The set is 10 cards in a 3-up grid, so the last row holds one card on its
   own. Centre it rather than leaving it hanging in column 1. The selector only
   matches when the final card actually starts a row, so it self-disables if the
   card count changes to a multiple of three. */
@media (min-width: 1200px) {
  .page-id-5624 .oxilab-flip-box-col-3:last-child:nth-child(3n+1) { grid-column: 2 !important; }
}

/* ==========================================================================
   Homepage (5624) hero carousel, August 29 2026
   The carousel draws itself wider than the row that contains it, and the row
   clips the overflow, so the outer two images were cut by about 134px each
   side. Holding it inside the row fixes it at every width.
   ========================================================================== */
.page-id-5624 .ut-react-carousel{ width:94% !important; max-width:94% !important; left:0 !important; margin-left:auto !important; margin-right:auto !important; }
.page-id-5624 .ut-react-carousel .ut-react-grid.ut-react-carousel-interaction{ width:100% !important; left:0 !important; right:auto !important; }

/* Homepage hero carousel on phones and tablets.
   The theme keeps three items across at every width, so on a phone each image was
   68px wide. Below 861px the carousel is widened past the screen so the middle
   image fills it and the neighbours sit off to the sides. */
@media (max-width:860px) and (min-width:601px){
  .page-id-5624 .ut-react-carousel{ width:170% !important; max-width:170% !important; left:-35% !important; }
  .page-id-5624 .ut-react-carousel .ut-react-grid.ut-react-carousel-interaction{ width:100% !important; left:0 !important; }
}
@media (max-width:600px) and (min-width:481px){
  .page-id-5624 .ut-react-carousel{ width:240% !important; max-width:240% !important; left:-70% !important; }
  .page-id-5624 .ut-react-carousel .ut-react-grid.ut-react-carousel-interaction{ width:100% !important; left:0 !important; }
}
@media (max-width:480px){
  .page-id-5624 .ut-react-carousel{ width:300% !important; max-width:300% !important; left:-100% !important; }
  .page-id-5624 .ut-react-carousel .ut-react-grid.ut-react-carousel-interaction{ width:100% !important; left:0 !important; }
}

/* ==========================================================================
   Hero carousel card titles were cut off  (site-wide, Aug 29 2026)

   The theme renders each carousel card title as an inline SVG - a <symbol>
   holding <text font-size="80px"> instanced by a <use>. The <svg> carries no
   viewBox and no width/height, so it falls back to the SVG default viewport of
   300x150 and clips everything past 300px. "Software/App Development" measures
   544 units at 80px, so roughly half of it was missing; only "SEO" fitted.

   The theme ships no CSS for .ut-text-svg at all (checked every loaded sheet)
   and nothing sets a viewBox at runtime, so there is no theme rule to restore.
   Adding a viewBox by hand does not help either - the <symbol>/<use> nesting
   swallows the scaling - so the reliable fix is to size the type to the
   viewport instead. At 42px the longest title lands at 286px inside the 300px
   box, with every other title comfortably shorter.

   Not page-scoped on purpose: the same element clips wherever it is used.
   ========================================================================== */
body#ut-sitebody svg.ut-text-svg .ut-svg-text,
body#ut-sitebody svg.ut-text-svg text { font-size: 42px !important; }

.ut-animate-element,
.ut-animate-image{
  opacity:1 !important;
  transition:none !important;   ← this one is essential
  animation:none !important;
  transform:none !important;
}

/* Miami photo bands — Sept 11, 2026.
   Advanced WP Backgrounds stacks its image layers at z-index -99/-100, which
   buries them behind the section's own background, so both bands rendered as
   flat grey slabs. Layer them: image 0, tint 1, copy 2. */

/* Jarallax never paints its layer on this page, so set the two band photos
   directly as row backgrounds. WPBakery regenerates ut-row-<hash> classes on
   every builder save, so these key off stable classes instead: the first band
   has no .ut-animate-element, the second one does. */

/* MIAMI PAGE typography + hidden-content fixes - Sept 15 2026 */

/* 1. Six checklist bullets were invisible: the theme reveal animation
      never fires and pre-hides three elements per bullet. This was the
      remaining blank gap on the page. transition:none is required -
      a running transition outranks important author rules. */

/* 2. One H2 was left-aligned while the other seven were centred. */

/* 3. Three card H3s were centred over left-aligned body copy.
      Long selector is deliberate - an existing rule carries
      !important at two IDs and beats anything shorter. */

/* 4. Six card paragraphs were 18px against fifteen at 16px. */

/* 5. Full-width lists were 20px against 18px body copy around them. */

/* ===== Industries section (.pcx) - added 2026-09-20 ===== */
.pcx{--paper:#FFFFFF;--paper-2:#F7F6F4;--ink:#111111;--body:#444444;--muted:#7A7772;--rule:#E4E1DC;--rule-soft:#EFEDE9;--gold:#FFAE1A;--orange:#F7931E;background:var(--paper);color:var(--body);margin:0 calc(50% - 50vw);padding:0;width:100vw;max-width:100vw;overflow-x:hidden;font-family:Inter,"Helvetica Neue",Arial,sans-serif;font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
.pcx *{box-sizing:border-box}
.pcx .w{width:100%;max-width:1080px;margin:0 auto;padding:0 22px}
.pcx h1,.pcx h2,.pcx h3{font-family:Manrope,"Helvetica Neue",Arial,sans-serif;color:var(--ink);margin:0;text-wrap:balance}
.pcx p{margin:0 0 16px}
.pcx a{color:var(--ink)}
.pcx .hero{padding:66px 0 54px;border-bottom:1px solid var(--rule-soft)}
.pcx .eyebrow{display:inline-block;font-family:Manrope,Arial,sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--orange);margin-bottom:16px;text-decoration:none}
.pcx h1{font-size:clamp(31px,5vw,50px);font-weight:800;letter-spacing:-.025em;line-height:1.09;margin-bottom:20px;max-width:15ch}
.pcx .lede{font-size:clamp(17px,2vw,19.5px);line-height:1.6;max-width:62ch;margin-bottom:28px}
.pcx .btn{display:inline-block;background:var(--gold);color:var(--ink);text-decoration:none;font-weight:600;font-size:16px;padding:14px 30px;border-radius:999px;transition:transform .12s ease,box-shadow .16s ease}
.pcx .btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(255,174,26,.35)}
.pcx section{padding:56px 0;border-bottom:1px solid var(--rule-soft)}
.pcx section.last{border-bottom:none}
.pcx h2{font-size:clamp(22px,2.8vw,30px);font-weight:800;letter-spacing:-.02em;margin-bottom:12px}
.pcx .sub{color:var(--muted);font-size:16px;max-width:66ch;margin-bottom:30px}
.pcx .needs{display:flex;flex-direction:column;gap:1px;background:var(--rule-soft);border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}
.pcx .need{background:var(--paper);padding:22px 0;display:flex;gap:20px;align-items:flex-start}
.pcx .need .n{flex:0 0 auto;font-family:Manrope,Arial,sans-serif;font-size:13px;font-weight:700;color:var(--orange);padding-top:3px;min-width:24px}
.pcx .need h3{font-size:18px;font-weight:700;letter-spacing:-.015em;margin-bottom:6px}
.pcx .need p{margin:0;font-size:15.5px;max-width:70ch}
.pcx .builds{display:flex;flex-wrap:wrap;gap:14px;background:transparent;border:0}
.pcx .build{flex:1 1 300px;min-width:0;background:#fff;border:1px solid var(--rule);border-radius:12px;padding:22px 22px 20px;box-shadow:0 1px 2px rgba(17,17,17,.04),0 10px 24px -16px rgba(17,17,17,.34)}
.pcx .build h3{font-size:17px;font-weight:700;letter-spacing:-.01em;margin-bottom:7px}
.pcx .build p{margin:0;font-size:15px}
.pcx .faq details{border-bottom:1px solid var(--rule-soft)}
.pcx .faq summary{cursor:pointer;list-style:none;padding:17px 34px 17px 0;position:relative;font-family:Manrope,Arial,sans-serif;font-weight:700;font-size:16.5px;color:var(--ink)}
.pcx .faq summary::-webkit-details-marker{display:none}
.pcx .faq summary:after{content:"+";position:absolute;right:4px;top:15px;color:var(--orange);font-size:20px;font-weight:700}
.pcx .faq details[open] summary:after{content:"\2013"}
.pcx .faq .ans{padding:0 0 18px;font-size:15.5px;max-width:74ch}
.pcx .faq .ans p:last-child{margin-bottom:0}
.pcx .closer{background:var(--paper-2);border:1px solid var(--rule);border-radius:14px;padding:32px;display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.pcx .closer h2{font-size:23px;margin-bottom:8px}
.pcx .closer p{margin:0;max-width:54ch;font-size:16px}
.pcx .also{margin-top:34px;font-size:15.5px;color:var(--muted)}
.pcx .also a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:2px solid var(--gold)}
/* hub */
.pcx .intro{padding:64px 0 10px;max-width:780px}
.pcx .intro p{margin:0 0 16px}
.pcx .swat{display:flex;gap:5px;margin:0 0 20px}
.pcx .swat i{display:block;width:38px;height:4px;border-radius:2px}
.pcx .group{margin-top:44px;border:1px solid var(--rule);border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(17,17,17,.05),0 14px 34px -14px rgba(17,17,17,.22)}
.pcx .band{background:#111;padding:26px 28px 24px;display:flex;gap:18px;align-items:flex-start}
.pcx .band svg{flex:0 0 auto;width:30px;height:30px;margin-top:3px;stroke:var(--acc);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pcx .band .bt{flex:1 1 auto;min-width:0}
.pcx .band h2{color:#fff;font-size:clamp(21px,2.6vw,28px);margin:0 0 7px;letter-spacing:-.025em}
.pcx .band p{color:#9A968E;margin:0;font-size:15.5px;max-width:62ch}
.pcx .band .tally{flex:0 0 auto;font-family:Manrope,Arial,sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--acc);white-space:nowrap}
.pcx .cards{display:flex;flex-wrap:wrap;gap:1px;background:var(--rule-soft);border:0}
.pcx .card{flex:1 1 300px;min-width:0;background:#fff;padding:26px 26px 24px;display:flex;flex-direction:column;gap:11px;text-decoration:none;color:inherit;position:relative;transition:background .18s ease}
.pcx .card:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .24s ease}
.pcx .card:hover{background:#FBFAF8}
.pcx .card:hover:before{transform:scaleX(1)}
.pcx .card:focus-visible{outline:2px solid var(--accd);outline-offset:-3px}
.pcx .card h3{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.24;transition:color .18s ease}
.pcx .card:hover h3{color:var(--accd)}
.pcx .card p{margin:0;font-size:15px;line-height:1.62;flex:1 1 auto}
.pcx .go{font-family:Manrope,Arial,sans-serif;font-size:13.5px;font-weight:800;color:var(--accd);align-self:flex-start;margin-top:4px;border-bottom:0;display:inline-flex;align-items:center;gap:7px}
.pcx .go i{font-style:normal;display:inline-block;transition:transform .24s ease}
.pcx .card:hover .go i{transform:translateX(5px)}
.pcx .g1{--acc:#FFAE1A;--accd:#8F5D00}
.pcx .g2{--acc:#F2622E;--accd:#AD3C12}
.pcx .g3{--acc:#FF3D8F;--accd:#BE1063}
.pcx .g4{--acc:#2BC4BC;--accd:#0C7570}
@media (max-width:600px){.pcx .band{flex-wrap:wrap;gap:12px;padding:22px 20px}.pcx .band .tally{order:-1}.pcx .card{padding:22px 20px}.pcx .group{border-radius:12px}}
@media (max-width:600px){.pcx .w{padding:0 16px}.pcx .hero{padding:44px 0 38px}.pcx .intro{padding:40px 0 6px}.pcx section{padding:40px 0}.pcx .need{flex-direction:column;gap:6px}.pcx .closer{padding:24px 20px}.pcx .group-head{flex-wrap:wrap;gap:6px}.pcx .group-head .tally{margin-left:0;width:100%}}
@media (prefers-reduced-motion:reduce){.pcx *{transition:none!important}}
.pcx,.pcx .w,.pcx .hero,.pcx .hero .w,.pcx .intro,.pcx section,.pcx .group{text-align:left}
.pcx .wpb_wrapper,.pcx .wpb_text_column{text-align:left}
/* ===== end Industries section ===== */

/* ===== Services mega panel - added 2026-09-20 =====
   One wide panel instead of a 260px column with hover flyouts.
   Two theme behaviours this has to defeat, both found by measuring:
   sub-menus are FLOATED RIGHT (offsets children from their heading), and
   the first nested li carries a 40px top padding that margin:0 does not touch.
   Menu links also carry border-radius:12px, overflow:hidden and a fixed height,
   which clipped the headings and the All Services row until reset below.
   The theme uses two-ID selectors, so every rule matches its depth. */
#navigation #menu-main > li.menu-item-4988.menu-item > ul.sub-menu{width:860px!important;max-width:calc(100vw - 60px)!important;min-width:0!important;padding:28px 32px 6px!important;column-count:3;column-gap:42px;column-fill:balance}
#navigation #menu-main > li.menu-item-4988.menu-item > ul.sub-menu > li.menu-item{display:block!important;width:100%!important;float:none!important;min-height:0!important;margin:0 0 26px!important;padding:0!important;border:0!important;background:transparent!important;break-inside:avoid;page-break-inside:avoid}
#navigation #menu-main > li.menu-item-4988.menu-item > ul.sub-menu > li.menu-item > a{display:block!important;padding:5px 0!important;margin:0!important;border:0!important;background:transparent!important;min-height:0!important;line-height:1.45!important;font-size:14px!important;font-weight:500!important;text-transform:none!important;letter-spacing:0!important;white-space:normal!important;height:auto!important;overflow:visible!important;border-radius:0!important}
#navigation #menu-main > li.menu-item-4988.menu-item > ul.sub-menu > li.menu-item.menu-item-has-children > a{font-family:Manrope,Arial,sans-serif!important;font-size:10.5px!important;font-weight:800!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:#F7931E!important;pointer-events:none!important;font-style:normal!important;padding:0 0 8px!important;border-bottom:1px solid rgba(255,255,255,.11)!important;margin-bottom:6px!important}
#navigation #menu-main > li.menu-item-4988.menu-item > ul.sub-menu > li.menu-item > ul.sub-menu{position:static!important;float:none!important;display:block!important;left:auto!important;top:auto!important;right:auto!important;width:auto!important;max-width:none!important;min-width:0!important;opacity:1!important;visibility:visible!important;transform:none!important;box-shadow:none!important;border:0!important;background:transparent!important;padding:0!important;margin:0!important}
#navigation #menu-main > li.menu-item-4988.menu-item > ul.sub-menu > li.menu-item > ul.sub-menu > li.menu-item{display:block!important;float:none!important;width:100%!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important}
#navigation #menu-main > li.menu-item-4988.menu-item > ul.sub-menu > li.menu-item > ul.sub-menu > li.menu-item > a{display:block!important;padding:6px 0!important;margin:0!important;border:0!important;background:transparent!important;min-height:0!important;line-height:1.4!important;font-size:14px!important;font-weight:500!important;text-transform:none!important;letter-spacing:0!important;height:auto!important;overflow:visible!important;border-radius:0!important}
#navigation #menu-main > li.menu-item-4988.menu-item > ul.sub-menu li.menu-item > a:after,#navigation #menu-main > li.menu-item-4988.menu-item > ul.sub-menu li.menu-item > a:before{display:none!important;content:none!important}
#navigation #menu-main > li.menu-item-4988.menu-item > ul.sub-menu > li.menu-item.pcd-allservices{column-span:all!important;margin:2px 0 0!important;border-top:1px solid rgba(255,255,255,.12)!important}
#navigation #menu-main > li.menu-item-4988.menu-item > ul.sub-menu > li.menu-item.pcd-allservices > a{font-family:Manrope,Arial,sans-serif!important;font-size:12px!important;font-weight:800!important;letter-spacing:.1em!important;text-transform:uppercase!important;color:#FFAE1A!important;padding:14px 0 16px!important;font-style:normal!important}
@media (max-width:1100px){#navigation #menu-main > li.menu-item-4988.menu-item > ul.sub-menu{width:600px!important;column-count:2}}
/* ===== end Services mega panel ===== */

/* ===== Centre the main nav - added 2026-09-25 =====
   The theme floats the logo left and floats the nav left after it, so the
   nav's own flex centring happens inside the space LEFT OVER beside the
   logo rather than across the page. The menu therefore sits right of centre,
   and drifts further right whenever the right-hand items are hidden.
   Fix: pin the logo and the extras block to the row edges and let the nav
   centre in the full row. Header height is unchanged (the nav still sets it).
   Desktop only - at max-width:1025px the theme swaps to the mobile menu. */
@media (min-width:1026px){
#header-section .ha-header-front{position:relative;display:flex!important;align-items:center;justify-content:center}
#header-section .ha-header-front > .site-logo-wrap{position:absolute!important;left:0;top:50%;transform:translateY(-50%);margin:0!important;float:none!important}
#header-section .ha-header-front > .ut-header-primary-extra-module{position:absolute!important;right:0;top:50%;transform:translateY(-50%);margin:0!important;float:none!important}
#header-section #navigation.ut-horizontal-navigation{float:none!important;flex:0 0 auto!important;width:auto!important;max-width:100%!important}
/* the theme puts ~105px of padding-right on the menu above 1366px, which
   pushed the visible items 52px left of centre. Zero it so the ITEMS centre,
   not the ul box. */
#header-section #navigation #menu-main{justify-content:center!important;width:auto!important;padding-left:0!important;padding-right:0!important}
#header-section #navigation #menu-main > li.menu-item{margin-left:0!important}
}
/* ===== end Centre the main nav ===== */

/* ==========================================================================
   Miami (10582): spacing + small text, October 1 2026
   ========================================================================== */
/* Strip under the hero: its text sat 0px from the hero's bottom edge */

/* "Miami Digital Marketing Agency": heading sat flush against the photo band */

/* Three cards under it reserved a 160px circle each for icons that were never chosen */

/* The 740px blank band is the devices image, stuck at the start of the theme's reveal transition */

/* Empty photo under "Professional Miami Web Design & SEO Services": two paragraphs hidden by a YellowPencil rule */

/* Content Updates row: icons touched the bottom of the photo band */

/* Two stray <br> tags added 56px between the FAQ and "Web Design Near Miami" */

/* Small text, one step up: card copy 16 to 17px, card links 12-13 to 14px, city chips 15 to 16px */

/* Miami (10582), October 2 2026: centre the text that sits under a centred icon.
   Content Updates / Website Maintenance / Cloud Hosting had their icons centred but their
   heading and paragraph left aligned. Matches only text columns directly after a
   centre-aligned icon element (3 on this page). Out-specifies the Sept 15 rule that left-aligns
   all .vc_col-sm-4 h3. */

/* "Looking for web design and SEO support in Miami?" sat left above a centred button */