/* ============================================================
   TalkingAfter v2 "Vibrant" — enhance.css
   Playful, animated, doodle-rich layer on top of override.css.
   All motion is GPU-friendly (transform/opacity) and gated on
   .ta-js so content stays visible if JS fails. Respects
   prefers-reduced-motion.
   ============================================================ */

:root{
  --vg:#1fa06a; --vg-d:#15794f; --vgold:#f5b120;
  --vcream:#fbf8f1; --vink:#1a2e26;
}

/* ---------- 0. Scroll progress bar ---------- */
#ta-progress{
  position:fixed; top:0; left:0; height:4px; width:0%;
  z-index:99999; pointer-events:none;
  background:linear-gradient(90deg,var(--vg),var(--vgold));
  box-shadow:0 1px 8px rgba(31,160,106,.45);
  transition:width .08s linear;
}

/* ---------- 1. Scroll-reveal ---------- */
.ta-js .ta-rvl{
  opacity:0;
  transform:translateY(34px) scale(.975);
  transition:opacity .7s cubic-bezier(.22,.9,.28,1),
             transform .7s cubic-bezier(.22,.9,.28,1);
  transition-delay:calc(var(--rvl-i, 0) * 90ms);
  will-change:opacity,transform;
}
.ta-js .ta-rvl.ta-in{ opacity:1; transform:translateY(0) scale(1); }

/* ---------- 2. Doodle layers ---------- */
.ta-has-doodles{ position:relative; }
.ta-has-doodles > *:not(.ta-doodles){ position:relative; z-index:1; }
.ta-doodles{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  pointer-events:none; user-select:none;
}
.ta-doodle{
  position:absolute; display:block;
  opacity:0; color:var(--vg);
  animation:ta-doodle-in .9s ease forwards;
  animation-delay:.2s;
}
.ta-doodle svg{ display:block; width:100%; height:100%; overflow:visible; }
/* colour + strength variants */
.ta-doodle.dc-gold{ color:var(--vgold); }
.ta-doodle.dc-emerald{ color:var(--vg); }
.ta-doodle.dc-deep{ color:var(--vg-d); }
.ta-doodle.dc-white{ color:#ffffff; }
.ta-doodle.op-lo{ --op:.16; }
.ta-doodle.op-mid{ --op:.28; }
.ta-doodle.op-hi{ --op:.42; }

@keyframes ta-doodle-in{ from{opacity:0} to{opacity:var(--op,.28)} }

/* organic floating loops — different rhythms so it feels alive */
.ta-doodle .fl{
  transform-box:fill-box; transform-origin:center;
  animation:ta-bob var(--dur,7s) ease-in-out infinite;
  animation-delay:var(--del,0s);
}
.ta-doodle.f-drift .fl{ animation-name:ta-drift; }
.ta-doodle.f-spin  .fl{ animation-name:ta-spin; animation-timing-function:linear; }
.ta-doodle.f-sway  .fl{ animation-name:ta-sway; }
.ta-doodle.f-pulse .fl{ animation-name:ta-pulse; }

@keyframes ta-bob{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-14px) rotate(4deg); }
}
@keyframes ta-drift{
  0%,100%{ transform:translate(0,0) rotate(-6deg); }
  50%{ transform:translate(10px,-10px) rotate(6deg); }
}
@keyframes ta-spin{
  from{ transform:rotate(0deg); } to{ transform:rotate(360deg); }
}
@keyframes ta-sway{
  0%,100%{ transform:rotate(-8deg); }
  50%{ transform:rotate(8deg); }
}
@keyframes ta-pulse{
  0%,100%{ transform:scale(.9); }
  50%{ transform:scale(1.12); }
}

/* ---------- 3. Section "cards" — elevated rounded panels ---------- */
/* Warm/light sections get a soft floating panel so content reads as a card */
[id="about"] > .e-con-inner,
[id="services"] > .e-con-inner,
[id="reels"] > .e-con-inner,
[id="contact"] > .e-con-inner{
  background:linear-gradient(180deg,#ffffff 0%, #f6fcf8 100%) !important;
  border-radius:30px !important;
  padding:clamp(26px,4vw,60px) clamp(20px,3.5vw,52px) !important;
  box-shadow:0 34px 70px -30px rgba(21,121,79,.30),
             0 6px 18px rgba(21,121,79,.06) !important;
  border:1px solid rgba(31,160,106,.10) !important;
}
/* more air between the big bands */
[id="about"],[id="services"],[id="reels"],[id="contact"],[id="trust"]{
  padding-top:clamp(46px,7vw,96px) !important;
  padding-bottom:clamp(46px,7vw,96px) !important;
}

/* Small cards: unified rounded + soft layered shadow + lift transition */
.e-con:has(> .hostinger-ai-service-image),
[id="trust"] .e-con:has(> .ta-stat){
  border-radius:22px !important;
  transition:transform .35s cubic-bezier(.2,.8,.25,1),
             box-shadow .35s cubic-bezier(.2,.8,.25,1) !important;
  will-change:transform;
}
.e-con:has(> .hostinger-ai-service-image){
  background:#ffffff !important;
  border:1px solid rgba(31,160,106,.10) !important;
  box-shadow:0 16px 34px -14px rgba(21,121,79,.22),
             0 3px 10px rgba(21,121,79,.06) !important;
  overflow:hidden;
}
/* service image zoom container */
.e-con:has(> .hostinger-ai-service-image) .hostinger-ai-service-image img{
  transition:transform .55s cubic-bezier(.2,.8,.25,1) !important;
  will-change:transform;
}
/* HOVER: lift + gentle tilt + image zoom */
.e-con:has(> .hostinger-ai-service-image):hover{
  transform:translateY(-10px) rotate(-.6deg) !important;
  box-shadow:0 30px 60px -18px rgba(21,121,79,.34),
             0 8px 20px rgba(21,121,79,.10) !important;
}
.e-con:has(> .hostinger-ai-service-image):hover .hostinger-ai-service-image img{
  transform:scale(1.07) !important;
}
[id="trust"] .e-con:has(> .ta-stat):hover{
  transform:translateY(-6px) scale(1.03) !important;
}

/* ---------- 4. Stats band shimmer ---------- */
[id="trust"]{ position:relative; overflow:hidden; }
[id="trust"]::after{
  content:""; position:absolute; top:0; left:-40%; width:40%; height:100%;
  background:linear-gradient(100deg,transparent, rgba(255,255,255,.14), transparent);
  transform:skewX(-18deg);
  animation:ta-shimmer 6.5s ease-in-out infinite;
  pointer-events:none; z-index:0;
}
@keyframes ta-shimmer{
  0%{ left:-45%; } 55%,100%{ left:130%; }
}
[id="trust"] .ta-stat .elementor-heading-title{
  text-shadow:0 2px 14px rgba(0,0,0,.18);
}

/* ---------- 5. Buttons: springy + primary CTA idle pulse ---------- */
.elementor-button, a.elementor-button, .hostinger-ai-cta-button .elementor-button,
.wp-block-button__link, input[type="submit"]{
  transition:transform .18s cubic-bezier(.2,1.5,.4,1),
             box-shadow .22s ease, background .18s ease !important;
}
.elementor-button:hover, a.elementor-button:hover,
.wp-block-button__link:hover, input[type="submit"]:hover{
  transform:translateY(-3px) scale(1.045) !important;
}
.elementor-button:active, a.elementor-button:active,
input[type="submit"]:active{ transform:translateY(-1px) scale(.98) !important; }

/* idle attention pulse on hero + contact primary CTAs */
.ta-cta-pulse{ animation:ta-cta 2.8s ease-in-out infinite; }
@keyframes ta-cta{
  0%,100%{ box-shadow:0 10px 22px rgba(245,177,32,.30); }
  50%{ box-shadow:0 14px 32px rgba(245,177,32,.34), 0 0 0 8px rgba(245,177,32,.12); }
}

/* ---------- 6. Heading brush underline that draws on reveal ---------- */
.ta-underline{ position:relative; display:inline-block; }
.ta-underline::after{
  content:""; position:absolute; left:8%; right:8%; bottom:-.42em; height:.15em;
  background:linear-gradient(90deg,var(--vg),var(--vgold));
  border-radius:999px; transform:scaleX(0); transform-origin:left center;
  opacity:.95;
  transition:transform .8s cubic-bezier(.6,0,.2,1) .15s;
}
.ta-in .ta-underline::after,
.ta-underline.ta-in::after{ transform:scaleX(1); }
/* dark-band headings get a gold underline for contrast */
[id="trust"] .ta-underline::after{
  background:linear-gradient(90deg,var(--vgold),#ffd66b);
}

/* ---------- 7. Hero scroll-down cue ---------- */
#ta-scrollcue{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  z-index:6; width:30px; height:48px; border:2px solid rgba(255,255,255,.75);
  border-radius:16px; display:flex; justify-content:center; padding-top:8px;
  cursor:pointer; backdrop-filter:blur(2px);
  animation:ta-cue-fade 1s ease both .8s;
}
#ta-scrollcue::before{
  content:""; width:5px; height:9px; border-radius:3px; background:#fff;
  animation:ta-cue 1.6s ease-in-out infinite;
}
@keyframes ta-cue{ 0%{transform:translateY(0);opacity:1} 70%{transform:translateY(16px);opacity:0} 100%{opacity:0} }
@keyframes ta-cue-fade{ from{opacity:0} to{opacity:1} }

/* ---------- 8. Smooth anchor scrolling ---------- */
html{ scroll-behavior:smooth; }

/* ---------- 9. Nicer focus states ---------- */
a:focus-visible, button:focus-visible, .elementor-button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:3px solid var(--vgold) !important; outline-offset:3px;
  border-radius:8px;
}

/* ---------- 10. Mobile: hide doodles, lighten motion ---------- */
@media (max-width:767px){
  .ta-doodles{ display:none !important; }
  [id="about"] > .e-con-inner,[id="services"] > .e-con-inner,
  [id="reels"] > .e-con-inner,[id="contact"] > .e-con-inner{
    border-radius:22px !important; padding:22px 16px !important;
    box-shadow:0 18px 40px -22px rgba(21,121,79,.28) !important;
  }
  .e-con:has(> .hostinger-ai-service-image):hover{ transform:translateY(-4px) !important; }
}

/* ---------- 11. Reduced-motion: strip non-essential animation ---------- */
@media (prefers-reduced-motion:reduce){
  .ta-js .ta-rvl{ opacity:1 !important; transform:none !important; transition:none !important; }
  .ta-doodle, .ta-doodle .fl, #ta-progress, [id="trust"]::after,
  .ta-cta-pulse, #ta-scrollcue, #ta-scrollcue::before{
    animation:none !important;
  }
  .ta-doodle{ opacity:var(--op,.22) !important; }
  .ta-underline::after{ transition:none !important; transform:scaleX(1) !important; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   12. v2 tweak (2026-07-13): navy → emerald sections,
       richer white cards, greener footer subscribe button
   ============================================================ */

/* Journey/Process + Why-Choose bands: blue/navy -> the emerald green */
[id="process"], [id="why-us"]{
  background:linear-gradient(165deg,#1fa06a 0%,#12613e 100%) !important;
  background-color:#17915d !important;
}

/* The white boxes: more attractive — bigger radius, deep layered shadow,
   crisp hairline, roomier padding, springy hover lift */
[id="process"] .e-grid > .e-con,
[id="why-us"] .e-grid > .e-con{
  background:#ffffff !important;
  border-radius:22px !important;
  border:1px solid rgba(255,255,255,.65) !important;
  box-shadow:0 26px 52px -22px rgba(5,45,28,.55),
             0 6px 16px rgba(5,45,28,.16) !important;
  padding:34px 30px !important;
  transition:transform .3s cubic-bezier(.2,.8,.25,1),
             box-shadow .3s cubic-bezier(.2,.8,.25,1) !important;
}
[id="process"] .e-grid > .e-con:hover,
[id="why-us"] .e-grid > .e-con:hover{
  transform:translateY(-9px) !important;
  box-shadow:0 38px 70px -20px rgba(5,45,28,.6),
             0 12px 26px rgba(5,45,28,.22) !important;
}

/* "good writing": crisp serif titles in deep emerald + comfy muted body */
[id="process"] .hostinger-ai-service-title .elementor-heading-title,
[id="why-us"]  .hostinger-ai-service-title .elementor-heading-title{
  color:#12482f !important;
  font-weight:800 !important;
  letter-spacing:.2px !important;
  line-height:1.28 !important;
}
[id="process"] .hostinger-ai-service-description,
[id="process"] .hostinger-ai-service-description *,
[id="why-us"]  .hostinger-ai-service-description,
[id="why-us"]  .hostinger-ai-service-description *{
  color:#47584f !important;
  line-height:1.72 !important;
}

/* Footer newsletter button -> gold/amber (matches all other buttons) */
.hostinger-reach-block-submit,
button.hostinger-reach-block-submit.has-color-3-background-color{
  background-color:#f5b120 !important;
  background-image:none !important;
  color:#3a2a05 !important;
}
.hostinger-reach-block-submit:hover{ background-color:#e0a012 !important; color:#2a1e00 !important; }

/* ---------- 13. Nav scroll-spy: active item mirrors hover ---------- */
.hostinger-ai-site-navigation .wp-block-navigation-item > a{
  position:relative;
  transition:color .2s ease !important;
}
.hostinger-ai-site-navigation .wp-block-navigation-item > a::after{
  content:""; position:absolute; left:10px; right:10px; bottom:1px; height:2px;
  background:linear-gradient(90deg,var(--vg),var(--vgold));
  border-radius:2px; transform:scaleX(0); transform-origin:left center;
  transition:transform .26s cubic-bezier(.2,.8,.25,1);
}
/* hover AND scroll-active share the exact same look */
.hostinger-ai-site-navigation .wp-block-navigation-item > a:hover,
.hostinger-ai-site-navigation .wp-block-navigation-item.ta-nav-active > a{
  color:var(--vg) !important;
}
.hostinger-ai-site-navigation .wp-block-navigation-item > a:hover::after,
.hostinger-ai-site-navigation .wp-block-navigation-item.ta-nav-active > a::after{
  transform:scaleX(1);
}

/* ============================================================
   14. v2 tweak-2 (2026-07-13): ALL navy -> green, full-screen
       hero, responsive process card titles, dropdown hover-hold
   ============================================================ */

/* ---- Every remaining navy band -> green ---- */
/* "The Journey" milestone strip + Testimonials + FAQ + "Follow the Journey" */
[id="e0c0370"], [id="testimonials"], [id="faq"], [id="9479030"]{
  background:linear-gradient(165deg,#1fa06a 0%,#12613e 100%) !important;
  background-color:#17915d !important;
}
/* Footer -> deep emerald (anchors the page, still clearly green) */
.site-footer, footer.site-footer{
  background:linear-gradient(180deg,#124e34 0%,#0d3d28 100%) !important;
  background-color:#0f4830 !important;
}
/* keep FAQ accordion readable on green: active row soft-white, icons gold */
.ta-faq .elementor-tab-title{ color:#fff !important; }
.ta-faq .elementor-tab-title.elementor-active{ background:rgba(255,255,255,.12) !important; }
.ta-faq .elementor-tab-title.elementor-active a,
.ta-faq .elementor-tab-title.elementor-active .elementor-accordion-title{ color:#fff !important; }
.ta-faq .elementor-tab-content{ color:#eafff5 !important; }
.ta-faq .elementor-accordion-icon i{ color:var(--vgold) !important; }

/* ---- Full-screen hero (a touch over one screen) ---- */
[id="home"]{
  min-height:calc(100vh + 40px) !important;
  display:flex !important; align-items:center !important;
}

/* ---- Process / Why-Choose card titles: responsive, never clipped ---- */
[id="process"] .e-grid > .e-con,
[id="why-us"]  .e-grid > .e-con{ overflow:visible !important; }
[id="process"] .hostinger-ai-service-title,
[id="why-us"]  .hostinger-ai-service-title,
[id="process"] .hostinger-ai-service-title .elementor-heading-title,
[id="why-us"]  .hostinger-ai-service-title .elementor-heading-title{
  font-size:clamp(.98rem, .82rem + .5vw, 1.16rem) !important;
  line-height:1.3 !important;
  white-space:normal !important;
  overflow-wrap:normal !important;     /* never split a word mid-letter */
  word-break:normal !important;
  hyphens:none !important;
  max-width:100% !important;
}
[id="process"] .hostinger-ai-service-description,
[id="process"] .hostinger-ai-service-description *,
[id="why-us"]  .hostinger-ai-service-description,
[id="why-us"]  .hostinger-ai-service-description *{
  font-size:clamp(.9rem, .82rem + .3vw, 1rem) !important;
}

/* ---- Portfolio dropdown: hold open long enough to click ---- */
/* transition so it fades rather than snaps; invisible bridge covers the
   gap between the label and the submenu so pointerleave doesn't fire early */
.wp-block-navigation .wp-block-navigation__submenu-container{
  transition:opacity .18s ease !important;
}
.wp-block-navigation .has-child > .wp-block-navigation__submenu-container::before{
  content:""; position:absolute; left:0; right:0; top:-18px; height:20px; display:block;
  background:transparent; pointer-events:auto;
}
/* keep it open while the pointer is over the parent item OR the submenu itself */
.wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
.wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container,
.wp-block-navigation .wp-block-navigation__submenu-container:hover{
  opacity:1 !important; visibility:visible !important;
}

/* "The Journey" band has no custom id (only data-id) -> target its elementor class */
.elementor-element-e0c0370{
  background:linear-gradient(165deg,#1fa06a 0%,#12613e 100%) !important;
  background-color:#17915d !important;
}

/* ============================================================
   15. v2 tweak-3 (2026-07-13): kill EVERY navy — the page bg,
       the footer inner group, FAQ +icons; dropdown hold-open
   ============================================================ */

/* The whole PAGE background was navy (#22304a) and showed through
   transparent areas (behind the FAQ accordion, "Follow the Journey"). */
html, body, .wp-site-blocks{ background-color:#17915d !important; }

/* Any theme "color-2" navy group -> deep green; footer's inner navy
   group -> transparent so the footer's own green gradient shows. */
.has-color-2-background-color{ background-color:#124e34 !important; }
.site-footer .has-color-2-background-color,
footer .wp-block-group.has-color-2-background-color{ background-color:transparent !important; }

/* FAQ "+/-" accordion icons are SVGs coloured theme-blue by a per-widget
   Elementor !important rule -> beat it with higher specificity */
.ta-faq.elementor-widget-accordion .elementor-tab-title .elementor-accordion-icon,
.ta-faq.elementor-widget-accordion .elementor-tab-title .elementor-accordion-icon svg,
.ta-faq.elementor-widget-accordion .elementor-tab-title .elementor-accordion-icon svg path,
.ta-faq.elementor-widget-accordion .elementor-accordion-icon-closed svg,
.ta-faq.elementor-widget-accordion .elementor-accordion-icon-opened svg{
  color:#f5b120 !important; fill:#f5b120 !important;
}
/* FAQ sub-heading was light-blue -> soft white on the green */
[id="faq"] .elementor-heading-title,
.ta-faq-sub .elementor-heading-title{ color:#eafff5 !important; }
[id="faq"] .ta-underline .elementor-heading-title, /* keep main heading white */
[id="faq"] h1 .ta-underline, [id="faq"] h2 .ta-underline{ color:#ffffff !important; }

/* ---- Dropdown: JS-driven hold-open target (see navDropdown) ----
   IMPORTANT: on this theme the submenu's *size* (height/width/overflow) is
   given ONLY by the rule `.submenu-icon[aria-expanded="true"] ~ .submenu-container`
   (the `:focus-within` size branch is `:not(.open-on-hover-click)`, and our
   Portfolio item HAS `open-on-hover-click`). The theme resets that button's
   aria-expanded to false on every pointerleave, which collapsed a click-locked
   menu to a 0-size clipped box. So `.ta-force-open` must OWN the full open
   geometry itself — matching the theme's open state — and not depend on aria. */
.wp-block-navigation .has-child.ta-force-open > .wp-block-navigation__submenu-container{
  visibility:visible !important; opacity:1 !important; pointer-events:auto !important;
  display:flex !important;
  height:auto !important; width:auto !important; min-width:200px !important;
  overflow:visible !important;
}

/* ---- Process cards are a NARROW 5-col grid (~106px content) -> the long
     single words ("Understanding","Transformation") clipped. Give them a
     touch less side-padding + a size that fits the whole word (no breaking).
     (why-us is a wider 3-col grid, left larger.) ---- */
[id="process"] .e-grid > .e-con{ padding:30px 20px !important; }
[id="process"] .hostinger-ai-service-title,
[id="process"] .hostinger-ai-service-title .elementor-heading-title{
  font-size:clamp(.9rem, .8rem + .35vw, 1.0rem) !important;
  line-height:1.32 !important;
  white-space:normal !important; overflow-wrap:normal !important; word-break:normal !important;
}

/* ---- A little breathing room BELOW heading underlines (before subtitle) ---- */
.elementor-widget-heading:has(.ta-underline),
.elementor-heading-title:has(.ta-underline){ margin-bottom:.45em !important; padding-bottom:.1em !important; }

/* ============================================================
   16. v2 tweak-4 (2026-07-13): FAQ single flat bg + smaller
       process card heading/description
   ============================================================ */

/* FAQ was two-tone: the heading section had a gradient while the accordion
   section showed the flat body green -> make the whole area ONE flat green. */
[id="faq"], [id="faq"] > .e-con-inner,
.elementor-element-1c53e02, .elementor-element-1c53e02 > .e-con-inner{
  background:#17915d !important;
  background-image:none !important;
}

/* Process cards: smaller heading + description so they fit the narrow 5-col
   cards perfectly (no awkward wrap). */
[id="process"] .hostinger-ai-service-title,
[id="process"] .hostinger-ai-service-title .elementor-heading-title{
  font-size:clamp(.8rem, .72rem + .28vw, .9rem) !important;
  line-height:1.34 !important;
}
[id="process"] .hostinger-ai-service-description,
[id="process"] .hostinger-ai-service-description *{
  font-size:clamp(.78rem, .72rem + .2vw, .86rem) !important;
  line-height:1.6 !important;
}

/* ============================================================
   17. v2 tweak-5 (2026-07-13): process step number restyle,
       cream Moments bg, all CTA buttons gold, full-width hero
       CTA, face-cropped testimonial avatars
   ============================================================ */

/* ---- Process cards: BIG centered number (no dot), heading + body centered ---- */
[id="process"] .e-con-inner,
[id="process"] .hostinger-ai-service-title,
[id="process"] .hostinger-ai-service-title .elementor-heading-title,
[id="process"] .hostinger-ai-service-description,
[id="process"] .hostinger-ai-service-description *{ text-align:center !important; }
[id="process"] .ta-stepnum{
  display:block; font-family:'Playfair Display',Georgia,serif;
  font-size:2.7rem; font-weight:800; line-height:1; color:#12482f;
  text-align:center; margin:0 0 .18em; letter-spacing:0;
}
[id="process"] .ta-steplabel{
  display:block; font-size:1.02rem; font-weight:800; color:#12482f;
  line-height:1.25; text-align:center;
}

/* ---- Moments (home gallery preview) section: uniform cream, no green strip ---- */
.elementor-element-6978c71{ background:#fbf8f1 !important; background-image:none !important; }

/* ---- Force EVERY standalone CTA button gold (some "See all/Watch/View"
        buttons kept an emerald per-widget colour) + margin under them ---- */
.elementor-widget-button a.elementor-button,
.elementor-widget-button .elementor-button,
a.elementor-button.elementor-button-link,
.hostinger-ai-cta-button .elementor-button{
  background-color:#f5b120 !important; background-image:none !important;
  color:#3a2a05 !important; border-color:#f5b120 !important;
}
.elementor-widget-button a.elementor-button:hover,
.elementor-widget-button .elementor-button:hover{
  background-color:#e0a012 !important; color:#2a1e00 !important;
}
.elementor-widget-button{ margin-bottom:26px !important; }

/* ---- Hero CTA: full width ---- */
[id="home"] .elementor-widget-button,
[id="home"] .elementor-widget-button .elementor-widget-container{ width:100% !important; }
[id="home"] .elementor-widget-button .elementor-button,
[id="home"] a.elementor-button{
  width:100% !important; max-width:560px !important;
  margin-left:auto !important; margin-right:auto !important;
  justify-content:center !important;
}

/* ---- Testimonial avatars: show the FACE (crop from top) ---- */
[id="testimonials"] img{ object-fit:cover !important; object-position:center center !important; }

/* Some per-page Elementor widget CSS re-greens buttons with higher specificity
   (e.g. gallery "Watch our videos") -> win with a 3-class selector + !important */
a.elementor-button.elementor-button-link.elementor-size-sm,
.elementor-element a.elementor-button.elementor-button-link,
.e-con a.elementor-button.elementor-button-link{
  background-color:#f5b120 !important; background-image:none !important;
  color:#3a2a05 !important; border-color:#f5b120 !important;
}
a.elementor-button.elementor-button-link.elementor-size-sm:hover,
.elementor-element a.elementor-button.elementor-button-link:hover{
  background-color:#e0a012 !important; color:#2a1e00 !important;
}

/* ============================================================
   18. v2 tweak-6 (2026-07-13): "How I Can Help You" 2 pillars,
       button size + hover fixes
   ============================================================ */

/* ---- Two-pillar highlight section (injected after the stats band) ---- */
#ta-pillars{ background:#fbf8f1; padding:clamp(54px,7vw,96px) 20px; }
#ta-pillars .ta-pillars-inner{ max-width:1080px; margin:0 auto; }
#ta-pillars .ta-pillars-h{
  font-family:'Playfair Display',Georgia,serif; text-align:center;
  font-size:clamp(1.7rem,1.2rem+1.6vw,2.6rem); font-weight:800; color:#12482f;
  margin:0 0 .5em;
}
#ta-pillars .ta-pillars-sub{
  text-align:center; color:#47584f; font-size:clamp(.95rem,.9rem+.3vw,1.1rem);
  max-width:640px; margin:0 auto clamp(28px,4vw,46px);
}
#ta-pillars .ta-pillar-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,34px);
}
#ta-pillars .ta-pillar{
  position:relative; background:#fff; border-radius:24px;
  padding:clamp(30px,3.4vw,46px) clamp(26px,3vw,42px);
  border:1px solid rgba(31,160,106,.12);
  box-shadow:0 26px 52px -26px rgba(5,45,28,.34), 0 6px 16px rgba(5,45,28,.08);
  transition:transform .3s cubic-bezier(.2,.8,.25,1), box-shadow .3s ease;
  overflow:hidden;
}
#ta-pillars .ta-pillar:hover{ transform:translateY(-8px); box-shadow:0 36px 66px -24px rgba(5,45,28,.4), 0 10px 22px rgba(5,45,28,.12); }
#ta-pillars .ta-pillar-badge{
  position:absolute; top:18px; right:22px;
  font-family:'Playfair Display',serif; font-weight:800; font-size:2.6rem;
  color:rgba(245,177,32,.24); line-height:1;
}
#ta-pillars .ta-pillar-icon{
  width:66px; height:66px; border-radius:18px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg,#1fa06a,#12613e); color:#fff; margin-bottom:20px;
  box-shadow:0 10px 22px rgba(31,160,106,.3);
}
#ta-pillars .ta-pillar-icon svg{ width:38px; height:38px; }
#ta-pillars .ta-pillar h3{
  font-family:'Playfair Display',serif; font-size:clamp(1.2rem,1rem+.6vw,1.5rem);
  font-weight:800; color:#12482f; margin:0 0 .5em;
}
#ta-pillars .ta-pillar p{ color:#47584f; line-height:1.72; font-size:clamp(.95rem,.9rem+.2vw,1.05rem); margin:0; }
#ta-pillars .ta-pillar strong{ color:#15794f; font-weight:700; }
@media (max-width:760px){ #ta-pillars .ta-pillar-grid{ grid-template-columns:1fr; } }

/* ---- CTA buttons: NORMAL size (not full-width), contained hover ---- */
[id="home"] .elementor-widget-button,
[id="home"] .elementor-widget-button .elementor-widget-container{ width:auto !important; text-align:center !important; }
[id="home"] a.elementor-button,
[id="home"] .elementor-button{
  width:auto !important; min-width:220px !important; max-width:330px !important;
  margin-left:auto !important; margin-right:auto !important; display:inline-flex !important;
}
/* contained, tasteful hover on ALL buttons (kill any wide/ghost glow) */
.elementor-button:hover, a.elementor-button:hover,
.wp-block-button__link:hover, input[type="submit"]:hover{
  box-shadow:0 8px 20px rgba(224,160,18,.35) !important;
  transform:translateY(-2px) !important;
}
/* remove the idle pulse ring that read as a broken full-width glow */
.ta-cta-pulse{ animation:none !important; }

/* ---- Gallery & Videos PAGES (no hero) -> cream page bg, not green
        (the "View photo gallery"/"Watch our videos" bands were on green
        coming from .wp-site-blocks) ---- */
body:not(:has([id="home"])),
body:not(:has([id="home"])) .wp-site-blocks{ background-color:#fbf8f1 !important; }

/* ============================================================
   19. v2 tweak-7 (2026-07-13): fix double-button, new hero image,
       shorter process cards, centered/shorter why-us cards
   ============================================================ */

/* ---- DOUBLE BUTTON FIX: the widget wrapper (.hostinger-ai-cta-button /
   .elementor-widget-button) was itself painted gold with a 999px radius +
   shadow, sitting behind the real .elementor-button (10px radius) -> two
   mismatched shapes. Strip the wrapper so there is exactly ONE button. ---- */
.hostinger-ai-cta-button,
.elementor-widget-button,
.elementor-widget-button > .elementor-widget-container{
  background:transparent !important; background-color:transparent !important;
  background-image:none !important; box-shadow:none !important;
  border:0 !important; border-radius:0 !important;
}
/* the one real button = consistent pill, whole thing reacts on hover */
a.elementor-button.elementor-button-link,
.elementor-button, a.elementor-button, .wp-block-button__link, input[type="submit"]{
  border-radius:999px !important; overflow:visible;
  box-shadow:0 6px 16px rgba(224,160,18,.26) !important;
}
a.elementor-button.elementor-button-link:hover,
.elementor-button:hover, a.elementor-button:hover,
.wp-block-button__link:hover, input[type="submit"]:hover{
  background-color:#e0a012 !important; color:#2a1e00 !important;
  box-shadow:0 10px 24px rgba(224,160,18,.36) !important;
  transform:translateY(-2px) !important;
}
.ta-cta-pulse{ animation:none !important; }

/* ---- NEW hero background image (override the external post-6.css rule) ---- */
/* ===== PHOTO HERO: Rabeeba (real photo, in her setting) on the left, a
   gradient scrim on the right carries the text. Professional, no cut-out. ===== */
.elementor-element-ddccf30{
  background:
    linear-gradient(90deg, rgba(34,144,107,0) 34%, rgba(34,144,107,.42) 50%, rgba(23,105,76,.9) 70%, rgba(19,92,66,.97) 100%),
    url("https://talkingafter.com/wp-content/uploads/2026/07/hero-rabeeba2.jpg?hd") 16% 30%/cover no-repeat !important;
  background-color:#22906b !important;
  position:relative !important; overflow:hidden !important;
}
/* kill the theme's own dark overlay (we use our own scrim) */
.elementor-element-ddccf30 > .elementor-background-overlay{ opacity:0 !important; }
/* doodles off in hero */
[id="home"] .ta-doodles{ display:none !important; }
/* content -> right side, over the scrim, left-aligned white */
[id="home"] > .e-con-inner{
  position:relative; z-index:2;
  margin-left:53% !important; margin-right:0 !important;
  max-width:44% !important; width:auto !important;
  padding-right:2% !important;
  align-items:flex-end !important; text-align:right !important;
}
[id="home"] .elementor-heading-title,
[id="home"] .elementor-widget-heading,
[id="home"] .elementor-widget-text-editor,
[id="home"] .elementor-text-editor,
[id="home"] .elementor-widget-button{ text-align:right !important; }
[id="home"] .elementor-widget-button > .elementor-widget-container,
[id="home"] .elementor-widget-button.elementor-align-center > .elementor-widget-container{
  display:flex !important; justify-content:flex-end !important; text-align:right !important;
}
[id="home"] a.elementor-button{ margin-left:auto !important; margin-right:0 !important; }

/* PHONE: full photo (Rabeeba featured) + bottom-up dark scrim, content centered */
@media (max-width:820px){
  .elementor-element-ddccf30{
    background:
      linear-gradient(180deg, rgba(34,144,107,.12) 0%, rgba(30,120,88,.32) 38%, rgba(22,100,72,.82) 76%, rgba(19,92,66,.96) 100%),
      url("https://talkingafter.com/wp-content/uploads/2026/07/hero-rabeeba2.jpg?hd") 30% 16%/cover no-repeat !important;
    background-color:#22906b !important;
  }
  [id="home"] > .e-con-inner{
    margin-left:0 !important; max-width:100% !important; width:100% !important;
    align-items:center !important; text-align:center !important;
    justify-content:flex-end !important; padding-bottom:8% !important;
  }
  [id="home"] .elementor-heading-title,
  [id="home"] .elementor-widget-heading,
  [id="home"] .elementor-widget-text-editor,
  [id="home"] .elementor-widget-button{ text-align:center !important; }
  [id="home"] .elementor-widget-button > .elementor-widget-container{ justify-content:center !important; }
  [id="home"] a.elementor-button{ margin-left:auto !important; margin-right:auto !important; }
}

/* ---- Process cards: reduce unwanted vertical space, center content ---- */
[id="process"] .e-grid > .e-con{ padding:20px 18px !important; }
[id="process"] .e-grid > .e-con > .e-con-inner{ justify-content:center !important; }
[id="process"] .ta-stepnum{ font-size:2.1rem !important; margin-bottom:.05em !important; }
[id="process"] .hostinger-ai-service-title{ margin-bottom:6px !important; }
[id="process"] .hostinger-ai-service-description,
[id="process"] .hostinger-ai-service-description *{ line-height:1.5 !important; }

/* ---- Why-Choose cards: CENTER the content + reduce height ---- */
[id="why-us"] .e-con-inner,
[id="why-us"] .hostinger-ai-service-title,
[id="why-us"] .hostinger-ai-service-title *,
[id="why-us"] .hostinger-ai-service-description,
[id="why-us"] .hostinger-ai-service-description *{ text-align:center !important; }
[id="why-us"] .e-grid > .e-con{ padding:24px 26px !important; }
[id="why-us"] .e-grid > .e-con > .e-con-inner{ justify-content:center !important; align-items:center !important; }
[id="why-us"] .hostinger-ai-service-title{ margin-bottom:8px !important; }
[id="why-us"] .hostinger-ai-service-description,
[id="why-us"] .hostinger-ai-service-description *{ line-height:1.55 !important; }

/* ===== FINAL: hero CTA alignment — right on desktop, centered on phone ===== */
[id="home"] .elementor-widget-button{ width:100% !important; text-align:right !important; }
[id="home"] .elementor-widget-button > .elementor-widget-container{
  width:100% !important; display:block !important; text-align:right !important; justify-content:flex-end !important;
}
[id="home"] a.elementor-button{ display:inline-flex !important; margin-left:auto !important; margin-right:0 !important; }
@media (max-width:820px){
  [id="home"] .elementor-widget-button,
  [id="home"] .elementor-widget-button > .elementor-widget-container{ text-align:center !important; justify-content:center !important; }
  [id="home"] a.elementor-button{ margin-left:auto !important; margin-right:auto !important; }
}

/* ===== hero: remove the "500+ families..." stat line; button text green; sane width ===== */
[id="home"] .elementor-element-e6e7a0c{ display:none !important; }
[id="home"] a.elementor-button,
[id="home"] a.elementor-button .elementor-button-text{ color:#1fa06a !important; }
[id="home"] a.elementor-button:hover,
[id="home"] a.elementor-button:hover .elementor-button-text{ color:#15794f !important; }
[id="home"] a.elementor-button{ width:auto !important; min-width:240px !important; max-width:340px !important; }

/* hero CTA: content-width pill (not stretched), still right-aligned */
[id="home"] .elementor-widget-button a.elementor-button.elementor-button-link.elementor-size-sm{
  width:auto !important; min-width:240px !important; max-width:330px !important; flex:0 0 auto !important;
}

/* ===== hero button: slightly lighter gold + darker green text (readable); content lower ===== */
[id="home"] .elementor-widget-button a.elementor-button.elementor-button-link{
  background-color:#f9c24c !important; border-color:#f9c24c !important;
}
[id="home"] .elementor-widget-button a.elementor-button.elementor-button-link,
[id="home"] .elementor-widget-button a.elementor-button.elementor-button-link .elementor-button-text{
  color:#15794f !important; font-weight:700 !important;
}
[id="home"] .elementor-widget-button a.elementor-button.elementor-button-link:hover,
[id="home"] .elementor-widget-button a.elementor-button.elementor-button-link:hover .elementor-button-text{
  color:#0f5f3d !important;
}
[id="home"] .elementor-widget-button a.elementor-button.elementor-button-link:hover{ background-color:#f5b120 !important; }
/* nudge the whole hero content down a bit */
[id="home"] > .e-con-inner{ margin-top:9vh !important; }
@media (max-width:820px){ [id="home"] > .e-con-inner{ margin-top:0 !important; } }

/* CTA wrappers kept a per-widget GREEN bg (square corners behind the gold pill)
   that beat the earlier transparent rule on live -> higher specificity strip */
.hostinger-ai-cta-button.hostinger-ai-cta-button,
.elementor-widget-button.elementor-widget-button,
div[class*="elementor-element"].hostinger-ai-cta-button{
  background:transparent !important; background-color:transparent !important;
  background-image:none !important; border-radius:0 !important; box-shadow:none !important;
}

/* "Ready to Begin Your Transformation?" CTA band was pale lavender (#f2f6fe,
   off-palette blue) -> cream to match the rest of the light sections */
.elementor-element-425a1bf.elementor-element-425a1bf,
.elementor-element-425a1bf.elementor-element-425a1bf > .e-con-inner{
  background-color:#fbf8f1 !important; background-image:none !important;
}