/*
 Theme Name:   PrintItAll Child
 Theme URI:    https://printitall.co.za
 Description:  Flatsome child theme for PrintItAll. Brand tokens, fonts, Elementor helpers. No layout overrides except full-width fix.
 Author:       IWW AI Support
 Template:     flatsome
 Version:      2.2.0
 License:      GNU General Public License v2 or later
 Text Domain:  printitall-child
*/

/* ─────────────────────────────────────────────────────────────
   1. GOOGLE FONTS
───────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Syne:wght@400;500;600;700;800&display=swap');


/* ─────────────────────────────────────────────────────────────
   2. BRAND TOKENS
───────────────────────────────────────────────────────────── */
:root {
  --pia-blue:         #26abe2;
  --pia-blue-dark:    #1a8abf;
  --pia-blue-light:   rgba(38,171,226,0.12);
  --pia-pink:         #d81378;
  --pia-pink-dark:    #ad0f61;
  --pia-pink-light:   rgba(216,19,120,0.10);
  --pia-yellow:       #fdc813;
  --pia-yellow-dark:  #d4a600;
  --pia-yellow-light: rgba(253,200,19,0.14);
  --pia-ink:          #0b0b0b;
  --pia-white:        #ffffff;
  --pia-off:          #f5f3ef;
  --pia-mid:          #6b6560;
  --pia-dim:          #999490;
  --pia-font-head:    'Bricolage Grotesque', sans-serif;
  --pia-font-body:    'Syne', sans-serif;
}


/* ─────────────────────────────────────────────────────────────
   3. ELEMENTOR FULL-WIDTH FIX
   
   Problem: Flatsome's #wrapper has a max-width set in Theme
   Options (Appearance → Flatsome Options → Layout → Site Width).
   Even when the Elementor Full Width page template is selected,
   #wrapper constrains the page.

   Fix: On pages where Elementor is active, remove the max-width
   from #wrapper, #main and .main-container so Elementor sections
   can stretch edge to edge.

   Scoped to .elementor-page so it ONLY fires on Elementor-built
   pages — all other Flatsome pages are untouched.
───────────────────────────────────────────────────────────── */

.elementor-page #wrapper,
.elementor-page #main,
.elementor-page .main-container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Remove the Flatsome .row max-width on Elementor pages */
.elementor-page .main-container > .row {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* The content column inside that row */
.elementor-page .main-container > .row > .col {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  float: none !important;
}


/* ─────────────────────────────────────────────────────────────
   4. ELEMENTOR BUTTON ANIMATION
   Scoped to .elementor-button only — no global button override.
───────────────────────────────────────────────────────────── */

.elementor-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.elementor-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: skewX(-15deg);
  pointer-events: none;
}
.elementor-button:hover::after {
  animation: pia-shimmer 0.5s ease forwards;
}
@keyframes pia-shimmer {
  0%   { left: -100%; }
  100% { left: 160%;  }
}


/* ─────────────────────────────────────────────────────────────
   5. UTILITY CLASSES
   Add any of these to Elementor elements via:
   Advanced → CSS Classes
───────────────────────────────────────────────────────────── */

/* ── Text colours ── */
.text-blue   { color: var(--pia-blue)        !important; }
.text-pink   { color: var(--pia-pink)        !important; }
.text-yellow { color: var(--pia-yellow-dark) !important; }
.text-ink    { color: var(--pia-ink)         !important; }
.text-white  { color: var(--pia-white)       !important; }
.text-mid    { color: var(--pia-mid)         !important; }

/* ── Section / column background colours ── */
.bg-blue   { background-color: var(--pia-blue)   !important; }
.bg-pink   { background-color: var(--pia-pink)   !important; }
.bg-yellow { background-color: var(--pia-yellow) !important; }
.bg-ink    { background-color: var(--pia-ink)    !important; }
.bg-ink2   { background-color: #181818           !important; }
.bg-off    { background-color: var(--pia-off)    !important; }
.bg-white  { background-color: var(--pia-white)  !important; }

/* ── Coloured top border on a section or column ── */
.border-top-blue   { border-top: 4px solid var(--pia-blue)   !important; }
.border-top-pink   { border-top: 4px solid var(--pia-pink)   !important; }
.border-top-yellow { border-top: 4px solid var(--pia-yellow) !important; }
.border-top-ink    { border-top: 4px solid var(--pia-ink)    !important; }

/* ── Coloured bottom border ── */
.border-bot-blue   { border-bottom: 4px solid var(--pia-blue)   !important; }
.border-bot-pink   { border-bottom: 4px solid var(--pia-pink)   !important; }
.border-bot-yellow { border-bottom: 4px solid var(--pia-yellow) !important; }
.border-bot-ink    { border-bottom: 4px solid var(--pia-ink)    !important; }

/* ── Hover lift — add to any column or section ── */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(11,11,11,0.12);
}

.hover-lift-sm {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift-sm:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(11,11,11,0.1);
}

/* ── Coloured tag / badge chip ──
   Add to a Heading widget (h6) ── */
.pia-tag {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: 2px;
}
.pia-tag-blue   { background: var(--pia-blue-light);   color: var(--pia-blue);        }
.pia-tag-pink   { background: var(--pia-pink-light);   color: var(--pia-pink);        }
.pia-tag-yellow { background: var(--pia-yellow-light); color: var(--pia-yellow-dark); }
.pia-tag-ink    { background: var(--pia-ink);          color: var(--pia-yellow);      }

/* ── Eyebrow label with line prefix ──
   Add to a Heading widget (h6) ── */
.pia-eyebrow .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pia-eyebrow .elementor-heading-title::before {
  content: '';
  display: block;
  width: 1.5rem;
  height: 2px;
  background: currentColor;
  flex-shrink: 0;
}

/* ── Rainbow gradient divider ──
   Add to a Divider widget ── */
.pia-divider .elementor-divider-separator {
  background: linear-gradient(90deg,
    var(--pia-blue), var(--pia-pink), var(--pia-yellow)) !important;
  border: none !important;
  height: 4px !important;
}

/* ─────────────────────────────────────────────────────────────
   6. PRINT DESIGN ELEMENT CLASSES
   Add to any Section via Advanced → CSS Classes.
   Each class adds print-world decorative elements as
   CSS pseudo-elements — no HTML, no inline styles.
───────────────────────────────────────────────────────────── */

/* All print element sections need position:relative */
.pia-print,
.pia-print-hero,
.pia-print-services,
.pia-print-why,
.pia-print-testi,
.pia-print-cta,
.pia-print-dark {
  position: relative;
  overflow: hidden;
}

/* ── pia-print-hero — for blue hero section ──
   Dashed bleed border + CMYK calibration bar bottom
   + halftone dot grid left edge ── */
.pia-print-hero::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1.5px dashed rgba(255,255,255,0.15);
  pointer-events: none;
  z-index: 0;
}
.pia-print-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg,
    #00b4d8 0%,   #00b4d8 12.5%,
    #e040fb 12.5%,#e040fb 25%,
    #ffd600 25%,  #ffd600 37.5%,
    #212121 37.5%,#212121 50%,
    #26abe2 50%,  #26abe2 62.5%,
    #d81378 62.5%,#d81378 75%,
    #fdc813 75%,  #fdc813 87.5%,
    #ffffff 87.5%,#ffffff 100%);
  opacity: 0.3;
  pointer-events: none;
  z-index: 1;
}
.pia-print-hero .elementor-container::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 6.25rem; height: 100%;
  background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  pointer-events: none;
  z-index: 0;
}

/* ── pia-print-services — for yellow services section ──
   Dashed bleed border + halftone right edge
   + CMYK dots bottom-left ── */
.pia-print-services::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1.5px dashed rgba(11,11,11,0.1);
  pointer-events: none;
  z-index: 0;
}
.pia-print-services::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 8.75rem; height: 100%;
  background-image: radial-gradient(circle, rgba(11,11,11,0.06) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  pointer-events: none;
  z-index: 0;
}
.pia-print-services .elementor-container::after {
  content: '';
  position: absolute;
  bottom: 1rem; left: 3.25rem;
  width: 4.25rem; height: 0.875rem;
  background:
    radial-gradient(circle at 7px 7px,  #00b4d8 6px, transparent 6px),
    radial-gradient(circle at 24px 7px, #e040fb 6px, transparent 6px),
    radial-gradient(circle at 41px 7px, #ffd600 6px, transparent 6px),
    radial-gradient(circle at 58px 7px, #212121 6px, transparent 6px);
  opacity: 0.22;
  pointer-events: none;
  z-index: 1;
}

/* ── pia-print-why — for white Why section ──
   Pink halftone top-left + CMYK dots top-right ── */
.pia-print-why::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 10rem; height: 10rem;
  background-image: radial-gradient(circle, rgba(216,19,120,0.09) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  pointer-events: none;
  z-index: 0;
}
.pia-print-why .elementor-container::before {
  content: '';
  position: absolute;
  top: 1.5rem; right: 3.25rem;
  width: 4.25rem; height: 0.875rem;
  background:
    radial-gradient(circle at 7px 7px,  #26abe2 6px, transparent 6px),
    radial-gradient(circle at 24px 7px, #d81378 6px, transparent 6px),
    radial-gradient(circle at 41px 7px, #fdc813 6px, transparent 6px),
    radial-gradient(circle at 58px 7px, #0b0b0b 6px, transparent 6px);
  opacity: 0.18;
  pointer-events: none;
  z-index: 1;
}

/* ── pia-print-testi — for off-white Testimonials section ──
   Yellow halftone bottom-right + ghost PROOF stamp ── */
.pia-print-testi::before {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 11.25rem; height: 11.25rem;
  background-image: radial-gradient(circle, rgba(212,166,0,0.1) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  pointer-events: none;
  z-index: 0;
}
.pia-print-testi::after {
  content: 'PROOF';
  position: absolute;
  top: 1.75rem; left: 3.25rem;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 4.5rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(11,11,11,0.04);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ── pia-print-cta — for pink CTA section ──
   Halftone overlay + dashed bleed border + CMYK dots ── */
.pia-print-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  pointer-events: none;
  z-index: 0;
}
.pia-print-cta::after {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1.5px dashed rgba(255,255,255,0.12);
  pointer-events: none;
  z-index: 0;
}
.pia-print-cta .elementor-container::after {
  content: '';
  position: absolute;
  bottom: 1rem; right: 3.25rem;
  width: 4.25rem; height: 0.875rem;
  background:
    radial-gradient(circle at 7px 7px,  rgba(255,255,255,0.6) 6px, transparent 6px),
    radial-gradient(circle at 24px 7px, #fdc813 6px, transparent 6px),
    radial-gradient(circle at 41px 7px, #26abe2 6px, transparent 6px),
    radial-gradient(circle at 58px 7px, rgba(11,11,11,0.5) 6px, transparent 6px);
  opacity: 0.28;
  pointer-events: none;
  z-index: 1;
}

/* ── pia-print-dark — for dark/ink sections ──
   Ghost OVERPRINT stamp ── */
.pia-print-dark::after {
  content: 'OVERPRINT';
  position: absolute;
  bottom: 1.25rem; left: 1.25rem;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 2.25rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.04);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ── pia-reg-mark — registration mark circle ──
   Add to any Section. Places a crosshair circle in top-left. ── */
.pia-reg-mark::before {
  content: '';
  position: absolute;
  top: 1.125rem; left: 1.125rem;
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0.25;
  pointer-events: none;
  z-index: 1;
}

/* ── pia-halftone — subtle halftone dot grid ──
   Add to any Section. White or current colour dots. ── */
.pia-halftone::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, currentColor 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}


/* ═══════════════════════════════════════════════════════════════
   v15 HOMEPAGE — Section classes for JS/CSS targeting
   Add these in Elementor → Advanced → CSS Classes on each section
═══════════════════════════════════════════════════════════════ */

/* ── Global: sections must be position:relative for pseudo-elements ── */
.pia-hero,
.pia-statement,
.pia-trust,
.pia-svc-intro,
.pia-svc-grid,
.pia-about,
.pia-work,
.pia-why,
.pia-testi,
.pia-cta {
  position: relative;
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────
   PIA-HERO
   700px height, background image + dark gradient overlay,
   canvas print elements handled by print-elements.js
───────────────────────────────────────────────────────────── */
.pia-hero.elementor-section {
  min-height: 700px !important;
  background-color: #0b0b0b !important;
}
/* Tri-colour bar at top of hero */
.pia-hero .elementor-container::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    #26abe2 0% 33.33%,
    #d81378 33.33% 66.66%,
    #fdc813 66.66% 100%);
  z-index: 10;
  pointer-events: none;
}
/* Canvas injected by JS — must fill section */
.pia-hero #pia-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
/* All columns sit above canvas */
.pia-hero .elementor-column {
  position: relative;
  z-index: 2;
}

/* ─────────────────────────────────────────────────────────────
   PIA-HERO HEADLINE TREATMENTS
   Applied via CSS Class on the heading widget
───────────────────────────────────────────────────────────── */
/* .pia-headline-stroke — outline/ghost word */
.pia-headline-stroke .elementor-heading-title,
.pia-headline-stroke h1,
.pia-headline-stroke h2 {
  color: transparent !important;
  -webkit-text-stroke: 2px rgba(255,255,255,0.38) !important;
}
/* .pia-headline-yellow — yellow accent word */
.pia-headline-yellow .elementor-heading-title,
.pia-headline-yellow h1,
.pia-headline-yellow h2 {
  color: #fdc813 !important;
}

/* ─────────────────────────────────────────────────────────────
   PIA-STATEMENT — full yellow section
───────────────────────────────────────────────────────────── */
.pia-statement.elementor-section {
  background-color: #fdc813 !important;
  border-top: 5px solid #e0b000;
  border-bottom: 5px solid #e0b000;
}
/* Halftone dot texture */
.pia-statement::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(11,11,11,.06) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
  pointer-events: none; z-index: 0;
}
.pia-statement .elementor-container { position: relative; z-index: 1; }

/* ─────────────────────────────────────────────────────────────
   PIA-TRUST — clean white logo strip
───────────────────────────────────────────────────────────── */
.pia-trust.elementor-section {
  background-color: #ffffff !important;
  border-bottom: 4px solid #0b0b0b;
}
/* Trust logo hover — applied to each text widget */
.pia-trust-name .elementor-widget-container {
  transition: color .2s, transform .25s cubic-bezier(.34,1.56,.64,1), letter-spacing .2s;
  display: inline-block;
}
.pia-trust-name:hover .elementor-widget-container {
  color: #26abe2;
  transform: translateY(-2px) scale(1.06);
  letter-spacing: .1em;
}

/* ─────────────────────────────────────────────────────────────
   PIA-SVC-INTRO — full magenta services header
───────────────────────────────────────────────────────────── */
.pia-svc-intro.elementor-section {
  background-color: #d81378 !important;
  border-bottom: 5px solid #b8106a;
}
.pia-svc-intro::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.07) 2px, transparent 2px);
  background-size: 26px 26px;
  pointer-events: none; z-index: 0;
}
.pia-svc-intro::after {
  content: 'PRINT';
  position: absolute; right: -10px; top: -20px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(100px, 15vw, 200px);
  font-weight: 900;
  color: rgba(255,255,255,.05);
  line-height: 1; pointer-events: none; user-select: none; z-index: 0;
}
.pia-svc-intro .elementor-container { position: relative; z-index: 1; }

/* ─────────────────────────────────────────────────────────────
   PIA-SVC-GRID — 5 dark service cards
───────────────────────────────────────────────────────────── */
.pia-svc-grid.elementor-section {
  background-color: #0b0b0b !important;
  border-bottom: 5px solid #0b0b0b;
}

/* ── Individual service card ── */
/* Add .pia-svc-card to each column inside the service grid section */
.pia-svc-card.elementor-column {
  border-right: 2px solid rgba(255,255,255,.06) !important;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s !important;
  transform-style: preserve-3d;
  cursor: pointer;
}
.pia-svc-card.elementor-column:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 32px 80px rgba(0,0,0,.4) !important;
  z-index: 2;
}
/* Card colour top border per card — .pia-svc-c1 through .pia-svc-c5 */
.pia-svc-c1.elementor-column { border-top: 4px solid #26abe2 !important; background: #0b0b0b !important; }
.pia-svc-c2.elementor-column { border-top: 4px solid #d81378 !important; background: #0b0b0b !important; }
.pia-svc-c3.elementor-column { border-top: 4px solid #fdc813 !important; background: #0b0b0b !important; }
.pia-svc-c4.elementor-column { border-top: 4px solid #26abe2 !important; background: #0b0b0b !important; }
.pia-svc-c5.elementor-column { border-top: 4px solid #d81378 !important; background: #0b0b0b !important; border-right: none !important; }

/* Tilt — handled by interactions.js targeting .pia-svc-card */

/* ─────────────────────────────────────────────────────────────
   PIA-ABOUT — full blue section
───────────────────────────────────────────────────────────── */
.pia-about.elementor-section {
  background-color: #26abe2 !important;
  border-bottom: 5px solid #1a8abf;
}
/* Right column slightly darker */
.pia-about .elementor-column:last-child {
  background: rgba(0,0,0,.15);
}
/* Year watermark */
.pia-about .elementor-column:first-child::after {
  content: '2012';
  position: absolute; right: -16px; bottom: -40px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(120px, 16vw, 220px);
  font-weight: 900;
  color: rgba(255,255,255,.07);
  line-height: 1; pointer-events: none; user-select: none; z-index: 0;
}

/* ─────────────────────────────────────────────────────────────
   PIA-WORK — ink black work section
───────────────────────────────────────────────────────────── */
.pia-work.elementor-section {
  background-color: #0b0b0b !important;
  border-bottom: 5px solid #26abe2;
}
/* Work tile — add .pia-tile to each image box widget wrapper */
.pia-tile {
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.pia-tile img {
  transition: transform .75s cubic-bezier(.16,1,.3,1) !important;
  transform: scale(1.06);
}
.pia-tile:hover img {
  transform: scale(1) !important;
}
/* Parallax handled by interactions.js targeting .pia-tile */

/* ─────────────────────────────────────────────────────────────
   PIA-WHY — pure white section
───────────────────────────────────────────────────────────── */
.pia-why.elementor-section {
  background-color: #ffffff !important;
  border-bottom: 5px solid #0b0b0b;
}
/* Why item hover — add .pia-why-item to each column */
.pia-why-item.elementor-column {
  border-right: 3px solid #0b0b0b !important;
  transition: background .3s !important;
  cursor: pointer;
}
.pia-why-item.elementor-column:last-child { border-right: none !important; }
.pia-why-item.elementor-column:hover { background: #f4f2ee !important; }
/* Colour underline sweep per item */
.pia-why-item.elementor-column::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 4px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.pia-why-item.elementor-column:hover::after { transform: scaleX(1); }
.pia-wi-1.elementor-column::after { background: #26abe2; }
.pia-wi-2.elementor-column::after { background: #d81378; }
.pia-wi-3.elementor-column::after { background: #fdc813; }
.pia-wi-4.elementor-column::after { background: #26abe2; }

/* ─────────────────────────────────────────────────────────────
   PIA-TESTI — full magenta testimonials
───────────────────────────────────────────────────────────── */
.pia-testi.elementor-section {
  background-color: #d81378 !important;
  border-bottom: 5px solid #b8106a;
}
.pia-testi::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.06) 2px, transparent 2px);
  background-size: 28px 28px;
  pointer-events: none; z-index: 0;
}
.pia-testi .elementor-container { position: relative; z-index: 1; }
/* Testi card */
.pia-testi-card {
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, background .25s;
  cursor: pointer;
}
.pia-testi-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 56px rgba(0,0,0,.25);
}

/* ─────────────────────────────────────────────────────────────
   PIA-CTA — ink/yellow split section
───────────────────────────────────────────────────────────── */
.pia-cta.elementor-section {
  background-color: #0b0b0b !important;
}
/* Right column yellow */
.pia-cta .elementor-column:last-child {
  background: #fdc813 !important;
  border-left: 5px solid #e0b000;
}
.pia-cta .elementor-column:last-child::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(11,11,11,.065) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
  pointer-events: none; z-index: 0;
}
/* Ghost arrow watermark on left col */
.pia-cta .elementor-column:first-child::after {
  content: '→';
  position: absolute; right: -20px; bottom: -80px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 300px; font-weight: 900;
  color: rgba(255,255,255,.03);
  line-height: 1; pointer-events: none; user-select: none; z-index: 0;
}

/* ─────────────────────────────────────────────────────────────
   PIA-BTN-PRIMARY — button shimmer + fill-reveal
   Apply to the Elementor button widget wrapper
───────────────────────────────────────────────────────────── */
.pia-btn-primary .elementor-button {
  position: relative; overflow: hidden;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s !important;
  animation: piaBtnGlow 4s ease-in-out infinite;
}
.pia-btn-primary .elementor-button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 32px rgba(0,0,0,.3) !important;
  animation: none;
}
/* Fill reveal — left-to-right on hover */
.pia-btn-primary .elementor-button::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,.2);
  transform: translateX(-101%);
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.pia-btn-primary .elementor-button:hover::before {
  transform: translateX(0);
}
/* Shimmer sweep */
.pia-btn-primary .elementor-button::after {
  content: '';
  position: absolute; top: 0; left: -80%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: skewX(-20deg);
  animation: piaShimmer 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes piaShimmer { 0%,100%{left:-80%} 50%{left:140%} }
@keyframes piaBtnGlow {
  0%,100%{box-shadow:0 0 0 0 rgba(253,200,19,0)}
  50%{box-shadow:0 0 0 6px rgba(253,200,19,.18)}
}

/* ─────────────────────────────────────────────────────────────
   PIA-NAV-LINK — underline wipe on nav items
   Apply to each nav menu item's parent li
───────────────────────────────────────────────────────────── */
.pia-nav-link a {
  position: relative;
}
.pia-nav-link a::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 0; height: 2px;
  background: #fdc813;
  transition: width .25s cubic-bezier(.16,1,.3,1);
}
.pia-nav-link a:hover::after { width: 100%; }

/* ─────────────────────────────────────────────────────────────
   PIA-SR-ROW — service row fill-reveal
   Apply to each service row section (if using row layout)
───────────────────────────────────────────────────────────── */
.pia-sr-row.elementor-section {
  border-bottom: 1px solid rgba(11,11,11,.1);
  overflow: hidden;
  cursor: pointer;
  transition: background .35s;
}
.pia-sr-row.elementor-section::before {
  content: '';
  position: absolute; inset: 0;
  background: #0b0b0b;
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s cubic-bezier(.16,1,.3,1);
  z-index: 0;
  pointer-events: none;
}
.pia-sr-row.elementor-section:hover::before { transform: scaleX(1); }
.pia-sr-row .elementor-container { position: relative; z-index: 1; }
/* Text colour flip on row hover */
.pia-sr-row.elementor-section:hover .elementor-heading-title,
.pia-sr-row.elementor-section:hover p,
.pia-sr-row.elementor-section:hover .elementor-widget-container {
  color: rgba(248,246,242,.85) !important;
  transition: color .28s;
}

/* ─────────────────────────────────────────────────────────────
   PIA-PROCESS — process step rows in about section
───────────────────────────────────────────────────────────── */
.pia-process-item {
  transition: background .2s;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.pia-process-item:hover { background: rgba(255,255,255,.04) !important; }
/* Badge scale on hover — targets inner column */
.pia-process-badge {
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s !important;
  display: inline-flex !important;
}
.pia-process-item:hover .pia-process-badge {
  transform: scale(1.1) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.3) !important;
}

/* ─────────────────────────────────────────────────────────────
   PIA-FOOTER — ink black footer
───────────────────────────────────────────────────────────── */
.pia-footer.elementor-section {
  background-color: #0b0b0b !important;
  border-top: 5px solid #26abe2;
}
/* Footer link left-border reveal */
.pia-footer-col .elementor-widget-container a {
  position: relative; padding-left: 0;
  transition: color .2s, padding-left .2s;
}
.pia-footer-col .elementor-widget-container a::before {
  content: '';
  position: absolute; left: -8px; top: 0; bottom: 0;
  width: 2px; background: #26abe2;
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .2s cubic-bezier(.16,1,.3,1);
}
.pia-footer-col .elementor-widget-container a:hover::before {
  transform: scaleY(1);
}
.pia-footer-col .elementor-widget-container a:hover {
  padding-left: 6px;
}

/* ─────────────────────────────────────────────────────────────
   PIA-REVEAL — scroll reveal base
   Add to any widget or section. JS adds .pia-revealed on scroll.
───────────────────────────────────────────────────────────── */
.pia-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1);
}
.pia-reveal.pia-revealed {
  opacity: 1;
  transform: none;
}
.pia-reveal-d1 { transition-delay: .08s; }
.pia-reveal-d2 { transition-delay: .16s; }
.pia-reveal-d3 { transition-delay: .24s; }
.pia-reveal-d4 { transition-delay: .32s; }
.pia-reveal-d5 { transition-delay: .40s; }