/* qa-b-sections — QA overrides */

/* #4 — pricing cards: rupee price on line 1, smaller $ price on line 2,
   so the amount never wraps mid-number and the redundant "/ monthly"
   label doesn't collide with it. */
.price-lines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}
.price-line-usd {
  font-size: 0.55em;
  font-weight: 500;
  color: #555;
  opacity: 1;
  margin-top: 0.15em;
}
.price-mo {
  font-size: 0.6em;
  opacity: 0.8;
}
/* The "/ monthly" label duplicates the "/mo" already on the price line;
   keep it out of the way instead of letting it collide/wrap. */
.services-hours-text {
  display: none !important;
}

/* Pricing: bullet outlines and the mail/LinkedIn icon chips in the card
   header were yellow-on-light (low contrast against the cream cards).
   Use black bullet outlines, and flip the icon chips to black icon on a
   yellow chip background to match the rest of the site's convention. */
.service-list-bullet-icon {
  border-color: #000 !important;
}
.price-social-links .social-link {
  background-color: #ffff23 !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}
.price-social-links .social-bg-path {
  color: #000 !important;
}

/* #12 — "What You Get" inline icon pills (magnet-positioned onto nbsp
   anchors in the running text) only had a single   reserved for
   the "i"/"p" anchors while their sibling anchors ("w", "seo", "gsap")
   reserved several, so those two pills rendered on top of the following
   words. The nbsp counts were widened in the markup to match; this just
   backstops it by giving the pills themselves a little breathing room
   so they never sit flush against adjacent letters. */
.capa-card-item {
  margin: 0 0.15em;
  background-color: #ffff23 !important;
}
.capa-card-top-item {
  color: #000 !important;
}
/* On mobile the magnet-positioned pills still overlapped the surrounding
   words (and each other). The earlier attempt to neutralise this targeted
   `.capa-card-item`, but that's only the pill's inner chrome — the vendor
   script actually writes the live `transform: translate3d(...)` onto its
   parent `.capa-card` (the `[data-origin]` magnet target), recomputed
   continuously against the nbsp-anchor spans in `.what_you_get-text-mobile`.
   Forcing that transform off leaves the pills stacked in their zero-height
   flex wrap instead of "inline" (they're siblings of the paragraph, not
   descendants, so there's no real inline position to fall back to), so
   instead: hide the pills entirely on mobile and collapse the nbsp gaps
   their anchor spans reserved, so the sentence reads as plain, clean text. */
@media screen and (max-width: 767px) {
  .capa-cards-wrap {
    display: none !important;
  }
  .what_you_get-text-mobile .span,
  .what_you_get-text-mobile [data-connect="i-mobile"] {
    display: none !important;
  }
}

/* Timeline / project palette: make sure nothing here is still purple
   after the yellow/black/cream palette swap. */
.about-card-year,
.about-card-point-circle {
  color: var(--yellow, #ffff23);
}
.about-card-point-circle {
  background-color: var(--yellow, #ffff23) !important;
  border-color: #000 !important;
}


/* Pricing card mail/LinkedIn icons: qa-c-bottom.css renders sidebar social
   icons as a black tile with a yellow glyph (by design there). The pricing
   copies must be the opposite (yellow tile, black glyph) with no fringe.
   Scoped to .price-social-links only so the sidebar icons are untouched;
   selectors are one notch more specific than the qa-c-bottom rules they
   override (adding the "svg" element step keeps the same class count but
   adds an element to the specificity tuple) so they win despite loading
   earlier in the cascade. The anchor's own background is already yellow
   (#ffff23) from qa-c-bottom's .social-link rule, so matching the tile fill
   to that same yellow makes any edge fringe invisible instead of needing to
   re-derive exact corner geometry. */
.price-social-links .social-link svg .social-bg-path {
  color: #ffff23 !important;
  fill: #ffff23 !important;
}
.price-social-links .social-link svg path[stroke] {
  stroke: #14120d !important;
}
.price-social-links .social-link svg .social-path-white {
  fill: #14120d !important;
}

/* ================================================================
   RWD (phones + tablet portrait)
   ================================================================ */

/* Timeline, tablet portrait (768-991): the desktop pinned S-curve with
   absolutely-positioned cards overflows and runs under the sidebar at
   this width. Use the same stacked vertical timeline the phone layout
   uses, sitting to the right of the fixed sidebar. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .about-section {
    /* Same -130vh overlap as desktop: with 0 here, About only started after
       the full 300vh hero, leaving ~1 screen of empty blurred hero on tablet. */
    margin-top: -130vh !important;
    padding: 110px 4vw 110px 23vw !important;
  }
  .about-wrap {
    align-items: stretch !important;
    margin-top: 48px !important;
    position: relative !important;
  }
  .about-timeline-wrap { display: none !important; }
  .about-card-container {
    gap: 28px !important;
    margin-top: 28px !important;
    padding-bottom: 0 !important;
  }
  .about-card-wrap,
  .about-card-wrap.ac-1,
  .about-card-wrap.ac-2,
  .about-card-wrap.ac-3,
  .about-card-wrap.ac-4,
  .about-card-wrap.ac-5,
  .about-card-wrap.ac-6,
  .about-card-wrap.ac-7 {
    position: static !important;
    width: 100% !important;
    margin-top: 0 !important;
    gap: 28px !important;
    transform: none !important;
  }
  .about-card {
    width: 100% !important;
    margin-bottom: 0 !important;
    padding: 28px !important;
    border-radius: 16px !important;
  }
  .about-card-year { font-size: clamp(3rem, 8vw, 4.5rem) !important; margin-bottom: 10px !important; }
  .about-card-heading { font-size: clamp(1.4rem, 3.4vw, 1.9rem) !important; margin-bottom: 10px !important; }
  .about-card-bottom-layout { margin-top: 28px !important; }
  .about-card-bottom-text { font-size: 14px !important; }
  .about-card-img { width: 56px !important; }
  .about-card-button { font-size: 14px !important; padding: 8px 16px !important; border-radius: 10px !important; }
  .about-card-point-wrap { order: -9999; padding-top: 0 !important; display: block !important; position: relative !important; }
  .about-card-point-line { clip-path: inset(0%) !important; background: #000 !important; width: 4px !important; }
  .about-card-point-line-wrap { width: 4px !important; }
  .about-card-point-circle {
    display: block !important; position: absolute !important;
    width: 18px !important; height: 18px !important; border-width: 4px !important;
    inset: 40px 0 auto 50% !important; transform: translate(-50%) !important;
  }
}

/* Tablet portrait: oversized section headings + 3-up pricing squeezed
   into ~190px columns (price wrapped, bullets cramped). */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .h2-big { font-size: clamp(5rem, 13vw, 7rem) !important; line-height: 0.92 !important; }
  .cta_heading, .cta_heading .cta-span-heading {
    font-size: clamp(3.2rem, 8.6vw, 4.6rem) !important;
    line-height: 1 !important;
  }
  .service-wrap { flex-direction: column !important; gap: 16px !important; }
  .service-wrap > .service-card {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
  }
}

/* Hero->About fix: .hero keeps .hero-sticky pinned (dark blurred photo) until
   ~133vh, but #about starts before that, so the dark layer showed behind the
   About heading/cards and ended in a hard edge. Give #about an opaque cream
   background (same as body) so it slides over the pinned hero cleanly. */
#about { background-color: #d5cfbe; }

/* About = exact replica of the template's About format (years roll as
   yellow '25/'26 like the original; month lives in the card's date line).
   Card bodies reserve 3 lines exactly where the template's own copy wraps
   to 3 lines (breakpoints measured against the original), so every card
   keeps the original height at every width. */
@media screen and (min-width: 992px) { .about-card-wrap.ac-7 .about-card p.op80 { min-height: 2lh; } }
@media screen and (min-width: 1100px) { .about-card-wrap.ac-1 .about-card p.op80 { min-height: 3lh; } }
@media screen and (min-width: 1183px) { .about-card-wrap.ac-2 .about-card p.op80 { min-height: 3lh; } }
@media screen and (min-width: 1232px) { .about-card-wrap.ac-6 .about-card p.op80 { min-height: 3lh; } }
@media screen and (min-width: 2156px) { .about-card-wrap.ac-4 .about-card p.op80 { min-height: 3lh; } }

/* About on phones: template sizes. The site-wide label bump (qa-f) doesn't
   apply here, and "Read more" keeps the template's visual size while an
   invisible ::after keeps the 44px tap target. */
@media screen and (max-width: 767px) {
  .about-section .label { font-size: clamp(.75rem, 3.73vw, 1.79rem); }
}
@media screen and (max-width: 479px) {
  .about-section .about-card-button {
    min-height: 0;
    display: block;
    position: relative;
  }
  .about-section .about-card-button::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
}

/* Phones: reserve the template's line counts where our copy is shorter
   (template card 1 = 2-line title + 4-line body, card 4 = 3-line body). */
@media screen and (max-width: 767px) {
  .about-card-wrap.ac-1 .about-card-heading { min-height: 2lh; }
  .about-card-wrap.ac-1 .about-card p.op80 { min-height: 4lh; }
  .about-card-wrap.ac-4 .about-card p.op80 { min-height: 3lh; }
}

/* CTA chat: "Let's Build" hugs its label (no empty tail) and its text
   starts on the same left edge as the "Have something in mind?" bubble. */
.cta-button-grid .cta-button {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  text-align: left;
}
@media screen and (min-width: 480px) {
  .cta-button-grid .cta-button { padding-left: 1.32vw; padding-right: 1.32vw; }
}
.cta-button-grid .cta-button .button-text { text-align: left; }
/* The hover-roll wrappers add their own inner padding; drop it so the
   button label starts exactly where the bubble text does. */
.cta-button-grid .cta-button .nav-button-mask,
.cta-button-grid .cta-button .button-text { padding-left: 0 !important; padding-right: 0 !important; }

/* Section headings: the template's gradient text fill faded the right-hand
   words to grey ("(&)", "Journey"...), hurting legibility. Solid colours. */
.h2-style, .h2-style .line {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: #0b0b0d;
}
.h2-style-white, .h2-style-white .line {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: #fff;
}

/* About: breathing room between the hero edge and the heading (desktop;
   tablet/phone already have their own top padding). */
@media screen and (min-width: 992px) {
  .about-section { padding-top: clamp(56px, 5.5vw, 110px) !important; }
}

/* "The journey continues" has no avatar (owner: Webnixian logo only on the
   first card); hide the empty slot and its leftover "online" dot. */
.about-card-wrap.ac-7 .about-card-bottom-layout-left > .about-card-img-wrap { display: none !important; }