/* =========================================================================
   GrownBiz — home page sections
   Slider · Features · Services · Why · Process · Packages · SEO work · PPC ·
   Cases · Reviews · Videos · Clients/Achievements · Gallery · FAQ · Contact
   ========================================================================= */

/* ---------- Hero slider ----------
   Desktop: navy text panel on the left, photo bleeding to the right edge.
   Phones: photo on top, panel below. Slides cross-fade; the active photo
   drifts slowly (disabled for reduced motion). */
.hero { position: relative; background: var(--navy-deep); color: #c9d1e6; overflow: hidden; }
.hero__slides { display: grid; }
.slide { grid-area: 1 / 1; position: relative; display: grid; visibility: hidden; opacity: 0; transition: opacity 0.7s ease, visibility 0s 0.7s; }
.slide.is-active { visibility: visible; opacity: 1; transition: opacity 0.7s ease; z-index: 1; }
.slide__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; }
.slide__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 7s linear; }
.slide.is-active .slide__media img { transform: scale(1); }
.slide__inner { position: relative; }
.slide__panel { padding-block: 2rem 2.5rem; }
.slide__kicker {
  display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.1rem;
  font-family: var(--font); font-weight: 700; font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lilac);
}
.slide__kicker span { padding-right: 0.75rem; border-right: 1px solid var(--rule-light); color: var(--white); }
.slide__title {
  font-family: var(--font); font-weight: 800; font-size: var(--fs-2xl); line-height: 1.02; letter-spacing: -0.015em;
  color: var(--white); max-width: 13ch; text-wrap: balance;
}
.slide__title em { font-family: var(--font); font-weight: 800; font-style: italic; color: var(--lilac); }
.slide__text { font-size: var(--fs-md); margin-top: 1.25rem; max-width: 46ch; }
.slide__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.9rem; }
/* text enters after the photo */
.slide__panel > * { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s var(--ease); }
.slide.is-active .slide__panel > * { opacity: 1; transform: none; }
.slide.is-active .slide__panel > :nth-child(2) { transition-delay: 0.08s; }
.slide.is-active .slide__panel > :nth-child(3) { transition-delay: 0.16s; }
.slide.is-active .slide__panel > :nth-child(4) { transition-delay: 0.24s; }

@media (min-width: 960px) {
  .slide { min-height: clamp(480px, 66vh, 620px); }
  .slide__media { position: absolute; inset: 0 0 0 44%; aspect-ratio: auto; }
  /* a purple rule where the photo meets the panel */
  .slide__media::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--purple); z-index: 1; }
  .slide__inner { display: flex; align-items: center; }
  .slide__panel { width: 44%; padding: 2.5rem 3rem 6rem 0; }
}

/* control bar: numbered tabs with a timer line, plus prev / pause / next */
.hero__bar { position: relative; z-index: 2; border-top: 1px solid var(--rule-light); background: var(--navy-deep); }
.hero__bar-row { display: flex; align-items: stretch; gap: 1rem; }
.hero__tabs { display: grid; grid-template-columns: repeat(4, 1fr); flex: 1; }
.hero__tab {
  position: relative; display: flex; align-items: center; gap: 0.6rem; min-height: 64px; padding: 0.75rem 0.25rem;
  background: none; border: 0; color: #9aa6c4; text-align: left; font-weight: 650; font-size: 0.9rem;
}
.hero__tab-num { font-family: var(--font); font-weight: 700; font-size: 0.78rem; color: var(--lilac); }
.hero__tab-label { display: none; }
.hero__tab-progress { position: absolute; left: 0; right: 0.75rem; top: -1px; height: 2px; background: transparent; overflow: hidden; }
.hero__tab-progress::after { content: ""; position: absolute; inset: 0; background: var(--lilac); transform: scaleX(0); transform-origin: left; }
.hero__tab[aria-selected="true"] { color: var(--white); }
.hero__tab[aria-selected="true"] .hero__tab-progress::after { transform: scaleX(1); }
.hero.is-playing .hero__tab[aria-selected="true"] .hero__tab-progress::after { transform: scaleX(0); animation: hero-timer var(--slide-time, 7s) linear forwards; }
@keyframes hero-timer { to { transform: scaleX(1); } }
.hero__tab:hover { color: var(--white); }
.hero__controls { display: flex; align-items: center; gap: 0.4rem; }
.hero__ctrl {
  display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--rule-light); border-radius: var(--radius-sm);
  background: transparent; color: var(--white); transition: background-color 0.2s, color 0.2s;
}
.hero__ctrl .icon { width: 18px; height: 18px; }
.hero__ctrl:hover { background: var(--white); color: var(--navy); }
.hero__ico-play { display: none; }
.hero__ctrl[aria-pressed="true"] .hero__ico-pause { display: none; }
.hero__ctrl[aria-pressed="true"] .hero__ico-play { display: block; }
@media (min-width: 640px) { .hero__tab-label { display: inline; } }
@media (max-width: 479.98px) { .hero__ctrl[data-slide-prev], .hero__ctrl[data-slide-next] { display: none; } }
@media (min-width: 960px) {
  .hero__bar { position: absolute; left: 0; right: 0; bottom: 0; background: transparent; border: 0; }
  .hero__bar-row { width: 100%; }
  .hero__tabs { flex: 0 0 calc(44% - var(--gutter)); max-width: calc(44% - var(--gutter)); border-top: 1px solid var(--rule-light); }
  .hero__controls { margin-left: auto; padding-block: 1rem; }
  .hero__ctrl { background: rgba(4, 26, 59, 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}
.no-js .slide:not(:first-child) { display: none; }
.no-js .hero__bar { display: none; }

/* ---------- Feature strip ---------- */
.features { border-bottom: 1px solid var(--border); }
.features__grid { display: grid; }
.feature { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.9rem; padding: 1.2rem 0; border-bottom: 1px solid var(--border); }
.feature:last-child { border-bottom: 0; }
.feature__icon { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--rule); border-radius: var(--radius-sm); color: var(--purple); }
.feature__icon .icon { width: 21px; height: 21px; }
.feature__title { display: block; color: var(--navy); font-size: 0.98rem; }
.feature__text { display: block; font-size: 0.88rem; line-height: 1.5; margin-top: 0.15rem; }
@media (min-width: 700px) {
  .features__grid { grid-template-columns: 1fr 1fr; }
  .feature { padding: 1.75rem 1.5rem; }
  .feature:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--border); }
  .feature:nth-child(n + 3) { border-bottom: 0; }
}
@media (min-width: 1100px) {
  .features__grid { grid-template-columns: repeat(4, 1fr); }
  .feature { border-bottom: 0; border-right: 1px solid var(--border); padding: 1.4rem 1.25rem; }
  .feature:first-child { padding-left: 0; }
  .feature:last-child { border-right: 0; padding-right: 0; }
}

/* ---------- Services: dark card grid with full sub-service lists ---------- */
.services { background: var(--navy-deep); color: #c9d1e6; }
.services .section-title { color: var(--white); }
.services .section-head--split { border-color: var(--rule-light); }
.services .eyebrow { color: #dfe4f2; }
.services .eyebrow::before { color: var(--lilac); border-color: var(--rule-light); }
.svc-grid { display: grid; gap: 0.85rem; }
.svc-card {
  position: relative; display: flex; flex-direction: column; padding: 1.2rem 1.2rem 1rem;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--rule-light);
  transition: background-color 0.25s, border-color 0.25s, transform 0.25s var(--ease);
}
.svc-card::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--purple-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); }
.svc-card:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(217, 182, 230, 0.35); }
.svc-card:hover::before { transform: scaleX(1); }
.svc-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; }
.svc-card__icon { display: grid; place-items: center; width: 40px; height: 40px; background: var(--purple); color: var(--white); border-radius: var(--radius-sm); }
.svc-card__icon .icon { width: 20px; height: 20px; }
.svc-card__num { font-family: var(--font); font-weight: 700; font-size: 0.78rem; color: #5f6a85; }
.svc-card__title { font-size: 1.05rem; color: var(--white); margin-bottom: 0.6rem; }
.svc-card__list { display: grid; gap: 0; margin-bottom: 0.9rem; flex: 1; align-content: start; }
.svc-card__list a {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.22rem 0; color: #c9d1e6; font-size: 0.87rem; text-decoration: none;
  transition: color 0.2s, padding-left 0.2s var(--ease);
}
.svc-card__list a::before { content: ""; width: 10px; height: 1px; background: var(--lilac); flex: none; transition: width 0.2s; }
.svc-card__list a:hover { color: var(--white); padding-left: 0.2rem; }
.svc-card__list a:hover::before { width: 16px; }
.svc-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--rule-light); }
.svc-card__link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--lilac); font-weight: 700; font-size: 0.9rem; text-decoration: none; }
.svc-card__link small { font-weight: 500; color: #9aa6c4; }
.svc-card__link .icon { width: 16px; height: 16px; transition: transform 0.2s; }
.svc-card__link:hover { color: var(--white); }
.svc-card__link:hover .icon { transform: translateX(3px); }
.svc-card__ask {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0.3rem 0.85rem; border: 1px solid var(--rule-light);
  border-radius: var(--radius-sm); color: var(--white); font-size: 0.82rem; font-weight: 700; text-decoration: none; transition: background-color 0.2s, color 0.2s;
}
.svc-card__ask:hover { background: var(--white); color: var(--navy); }
.svc-card:target { border-color: var(--lilac); background: rgba(217, 182, 230, 0.08); }
@media (min-width: 680px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Why clients stay ---------- */
.why { background: var(--paper); }
.why__grid { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 4.5rem); align-items: start; }
.why__photo { width: 100%; aspect-ratio: 11 / 9; object-fit: cover; }
.why__stats { margin-top: 1.5rem; }
.stats { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }
.stat { display: flex; flex-direction: column-reverse; padding: 1.1rem 1rem 1.1rem 0; border-bottom: 1px solid var(--rule); }
.stat:nth-child(odd) { border-right: 1px solid var(--rule); }
.stat:nth-child(even) { padding-left: 1rem; }
.stat__value { font-family: var(--font); font-weight: 800; font-size: clamp(2.4rem, 2rem + 1.5vw, 3.2rem); color: var(--purple); line-height: 1; font-variant-numeric: tabular-nums; }
.stat__label { font-size: 0.85rem; margin-top: 0.35rem; color: var(--navy); font-weight: 600; }
@media (min-width: 640px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stat { border-right: 1px solid var(--rule); padding-left: 1rem; }
  .stat:first-child { padding-left: 0; }
  .stat:last-child { border-right: 0; }
}
.why__copy .section-lead { margin-top: 1rem; }
.reasons { display: grid; margin-top: 1.4rem; border-top: 1px solid var(--rule); counter-reset: reason; }
.reason { display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.25rem 1rem; padding: 0.95rem 0; border-bottom: 1px solid var(--rule); }
.reason__icon { display: none; }
.reason::before { counter-increment: reason; content: counter(reason, decimal-leading-zero); font-family: var(--font); font-weight: 700; font-size: 0.8rem; color: var(--purple); padding-top: 0.2rem; }
.reason__title { font-size: 1.08rem; margin-bottom: 0.25rem; }
.reason p { font-size: 0.95rem; }
@media (min-width: 1024px) { .why__grid { grid-template-columns: 1fr 1fr; } .why__copy { padding-top: 1rem; } }

/* ---------- Process ---------- */
.steps { display: grid; border-top: 1px solid var(--rule); }
.step { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.25rem 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--rule); }
.step__num { grid-row: span 2; font-family: var(--font); font-weight: 800; font-size: 3rem; line-height: 0.9; color: var(--purple); }
.step__title { font-size: 1.15rem; }
.step__text { font-size: 0.95rem; }
@media (min-width: 960px) {
  .steps { grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--rule); }
  .step { display: block; padding: 1.4rem 1.25rem 1.5rem; border-bottom: 0; border-right: 1px solid var(--rule); }
  .step:first-child { padding-left: 0; }
  .step:last-child { border-right: 0; padding-right: 0; }
  .step__num { display: block; font-size: 3.2rem; margin-bottom: 1rem; }
  .step__title { margin-bottom: 0.4rem; }
}

/* ---------- Packages: one ruled comparison block ---------- */
.packages { background: var(--paper); }
.pkg__switch { display: flex; justify-content: center; gap: 0; margin: 0 auto 2.25rem; border-bottom: 1px solid var(--rule); width: fit-content; max-width: 100%; overflow-x: auto; }
.pkg__switch-btn {
  position: relative; flex: none; min-height: 48px; padding: 0.5rem 1.25rem; border: 0; background: none;
  font-weight: 700; font-size: 0.95rem; color: var(--text); white-space: nowrap;
}
.pkg__switch-btn::after { content: ""; position: absolute; left: 1.25rem; right: 1.25rem; bottom: -1px; height: 2px; background: var(--purple); transform: scaleX(0); transition: transform 0.2s var(--ease); }
.pkg__switch-btn[aria-selected="true"] { color: var(--navy); }
.pkg__switch-btn[aria-selected="true"]::after { transform: scaleX(1); }
.pkg__plans { display: grid; background: var(--white); border: 1px solid var(--rule); }
.plan { position: relative; display: flex; flex-direction: column; padding: 1.5rem 1.4rem; border-bottom: 1px solid var(--rule); }
.plan:last-child { border-bottom: 0; }
.plan__name { font-family: var(--font); font-weight: 800; font-size: 2rem; line-height: 1; }
.plan__for { font-size: 0.9rem; margin-top: 0.4rem; }
.plan__price { display: flex; align-items: baseline; gap: 0.35rem; margin: 1.1rem 0; padding-block: 0.9rem; border-block: 1px solid var(--rule); color: var(--navy); }
.plan__price span { font-size: 2.3rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.plan__price small { font-size: 0.88rem; color: var(--text); }
.plan__features { display: grid; gap: 0.5rem; margin-bottom: 1.5rem; flex: 1; align-content: start; }
.plan__features li { display: flex; gap: 0.6rem; font-size: 0.94rem; }
.plan__features .icon { width: 17px; height: 17px; margin-top: 0.22rem; color: var(--purple); }
.plan .btn { margin-top: auto; }
.plan--featured { background: var(--navy-deep); color: #c9d1e6; box-shadow: inset 0 4px 0 var(--lilac); }
.plan--featured .plan__name, .plan--featured .plan__price { color: var(--white); }
.plan--featured .plan__price { border-color: var(--rule-light); }
.plan--featured .plan__price small { color: #c9d1e6; }
.plan--featured .plan__features .icon { color: var(--lilac); }
.plan__flag { position: absolute; top: 2.1rem; right: 1.75rem; font-family: var(--font); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lilac); }
.packages__note { text-align: center; margin-top: 1.5rem; font-size: 0.9rem; }
@media (min-width: 900px) {
  .pkg__plans { grid-template-columns: repeat(3, 1fr); }
  .plan { border-bottom: 0; border-right: 1px solid var(--rule); padding: 1.9rem 1.75rem; }
  .plan:last-child { border-right: 0; }
  .plan__flag { top: 2rem; right: 1.75rem; }
}

/* ---------- Horizontal scroller (SEO work, reviews) ---------- */
.scroller { display: grid; grid-auto-flow: column; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding: 0.25rem var(--gutter) 1.25rem; scroll-padding-inline: var(--gutter); }
.scroller > * { scroll-snap-align: start; }

/* ---------- SEO portfolio: summary, industry filter, search-result cards ---------- */
.seo-sum { display: grid; grid-template-columns: repeat(3, 1fr); border-left: 1px solid var(--rule); }
.seo-sum div { display: flex; flex-direction: column-reverse; padding: 0 1rem; border-right: 1px solid var(--rule); }
.seo-sum dd { font-family: var(--font); font-weight: 800; font-size: clamp(2.2rem, 1.8rem + 1.5vw, 3rem); line-height: 1; color: var(--purple); }
.seo-sum dt { font-size: 0.82rem; font-weight: 600; color: var(--navy); margin-top: 0.3rem; }

.seo-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.seo-filter__btn {
  min-height: 40px; padding: 0.4rem 1rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--white);
  font-weight: 650; font-size: 0.88rem; color: var(--navy); transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.seo-filter__btn:hover { border-color: var(--navy); }
.seo-filter__btn[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }

.seo-grid { display: grid; gap: 1rem; }
.seo-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--rule); transition: border-color 0.2s, box-shadow 0.25s; }
.seo-card:hover { border-color: var(--purple-accent); box-shadow: 0 24px 40px -30px rgba(7, 38, 84, 0.5); }
.seo-card[hidden] { display: none; }

/* mini search-results preview */
.serp { padding: 0.8rem 0.9rem 0.9rem; background: var(--paper); border-bottom: 1px solid var(--rule); }
.serp__query {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.9rem; border-radius: 999px;
  background: var(--white); border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(7, 38, 84, 0.08);
  font-size: 0.86rem; color: var(--navy);
}
.serp__query .icon { width: 15px; height: 15px; color: var(--text); }
.serp__result { position: relative; margin-top: 0.7rem; padding: 0.7rem 0.8rem; background: var(--white); border-left: 3px solid var(--purple); }
.serp__rank { position: absolute; top: 0.7rem; right: 0.75rem; padding: 0.15rem 0.45rem; background: #e3f6ec; color: var(--success); font-family: var(--font); font-weight: 700; font-size: 0.74rem; }
.serp__site { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: var(--navy); line-height: 1.25; padding-right: 2.5rem; }
.serp__site small { display: block; color: var(--text); font-size: 0.72rem; }
.serp__fav { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--navy-tint); color: var(--navy); font-weight: 800; font-size: 0.72rem; flex: none; }
.serp__title { margin-top: 0.4rem; color: #1a0dab; font-size: 0.9rem; line-height: 1.3; font-weight: 500; }
.serp__desc { margin-top: 0.25rem; font-size: 0.8rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.seo-card__body { display: flex; flex-direction: column; flex: 1; padding: 0.9rem 0.9rem 1rem; }
.seo-card__industry { font-family: var(--font); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--purple); }
.seo-card__name { font-family: var(--font); font-weight: 800; font-size: 1.5rem; line-height: 1.05; margin-top: 0.3rem; }
.seo-card__domain { font-size: 0.84rem; margin-bottom: 0.8rem; }
.seo-card__kw { border-top: 1px solid var(--rule); }
.seo-card__kw li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.42rem 0; border-bottom: 1px solid var(--rule); font-size: 0.87rem; color: var(--navy); }
.seo-card__kw b { flex: none; font-family: var(--font); font-weight: 700; font-weight: 500; font-size: 0.72rem; color: var(--success); }
.seo-card__more summary { display: inline-block; padding: 0.55rem 0; cursor: pointer; font-size: 0.86rem; font-weight: 650; color: var(--purple); }
.seo-card__more[open] summary { margin-bottom: 0; }
.seo-card__cta { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: auto; padding-top: 0.9rem; font-weight: 700; font-size: 0.9rem; text-decoration: none; }
.seo-card__cta .icon { width: 16px; height: 16px; transition: transform 0.2s; }
.seo-card__cta:hover .icon { transform: translateX(3px); }
@media (min-width: 680px) { .seo-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .seo-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- PPC results: campaign dashboards ---------- */
.ppc { background: var(--navy-deep); color: #c9d1e6; }
.ppc .section-title { color: var(--white); }
.ppc .section-title em { color: var(--lilac); }
.section-head--light { border-color: var(--rule-light); }
.ads { display: grid; gap: 1.5rem; }
.ads__tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule-light); }
.ads__tab {
  position: relative; display: flex; gap: 0.75rem; align-items: flex-start; padding: 1rem 0.75rem 1rem 0; min-height: 64px;
  background: none; border: 0; color: #9aa6c4; text-align: left;
}
.ads__tab::before { content: ""; position: absolute; left: 0; right: 0.75rem; top: -1px; height: 2px; background: var(--lilac); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
.ads__tab[aria-selected="true"]::before { transform: scaleX(1); }
.ads__tab-num { font-family: var(--font); font-weight: 700; font-size: 0.75rem; color: var(--lilac); padding-top: 0.2rem; }
.ads__tab strong { display: block; color: inherit; font-size: 0.98rem; }
.ads__tab small { display: block; font-size: 0.82rem; margin-top: 0.1rem; }
.ads__tab[aria-selected="true"], .ads__tab:hover { color: var(--white); }
@media (max-width: 559.98px) { .ads__tab small { display: none; } .ads__tab { flex-direction: column; gap: 0.2rem; } }

.dash { background: var(--white); min-width: 0; color: var(--text); border-radius: var(--radius); overflow: hidden; box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.7); }
.dash__bar { display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 1.1rem; background: #f1f3f8; border-bottom: 1px solid var(--border); font-size: 0.82rem; }
.dash__dots { display: flex; gap: 5px; }
.dash__dots i { width: 9px; height: 9px; border-radius: 50%; background: #c9cfdc; }
.dash__title { font-weight: 650; color: var(--navy); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash__period { margin-left: auto; flex: none; font-family: var(--font); font-weight: 700; font-size: 0.72rem; padding: 0.25rem 0.55rem; border: 1px solid var(--border); background: var(--white); }
.dash__body { padding: 0; }
.dash__stats { display: grid; grid-template-columns: repeat(2, 1fr); border-bottom: 1px solid var(--border); }
.dash__stat { display: flex; flex-direction: column; padding: 0.9rem 1.1rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.dash__stat dt { font-size: 0.78rem; font-weight: 600; }
.dash__stat dd { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem); font-weight: 750; color: var(--navy); letter-spacing: -0.02em; line-height: 1.2; margin-top: 0.15rem; }
.dash__stat--0 { background: var(--navy); }
.dash__stat--0 dt, .dash__stat--0 dd { color: var(--white); }
.dash__stat--3 { background: var(--purple); }
.dash__stat--3 dt, .dash__stat--3 dd { color: var(--white); }
@media (min-width: 760px) {
  .dash__stats { grid-template-columns: repeat(5, 1fr); }
  .dash__stat { border-bottom: 0; }
  .dash__stat:last-child { border-right: 0; }
}
@media (max-width: 759.98px) { .dash__stat:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; } .dash__period { display: none; } }

.dash__chart { margin: 0; padding: 1.25rem 1.1rem 1rem; }
.dash__chart svg { width: 100%; height: clamp(150px, 20vw, 230px); overflow: visible; }
.dash__grid line { stroke: #e7eaf1; stroke-width: 1; vector-effect: non-scaling-stroke; }
.dash__area { fill: rgba(7, 38, 84, 0.07); }
.dash__line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.dash__line--a { stroke: var(--navy); }
.dash__line--b { stroke: var(--purple-accent); }
.dash__legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 0.75rem; font-size: 0.8rem; font-weight: 600; color: var(--navy); }
.dash__key { display: inline-flex; align-items: center; gap: 0.4rem; }
.dash__key::before { content: ""; width: 18px; height: 3px; background: var(--navy); }
.dash__key--b::before { background: var(--purple-accent); }
.dash__type { margin-left: auto; font-family: var(--font); font-weight: 700; font-weight: 500; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text); }
/* draw the line in when the panel appears */
@media (prefers-reduced-motion: no-preference) {
  .ads__panel:not([hidden]) .dash__line, .cs__panel:not([hidden]) .dash__line { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: dash-draw 1.4s var(--ease) forwards; }
  .ads__panel:not([hidden]) .dash__line--b, .cs__panel:not([hidden]) .dash__line--b { animation-delay: 0.2s; }
  @keyframes dash-draw { to { stroke-dashoffset: 0; } }
}
.ads__result { display: flex; gap: 0.75rem; align-items: flex-start; margin-top: 1.25rem; font-size: 1rem; color: #e6eaf5; max-width: 70ch; }
.ads__result .icon { width: 22px; height: 22px; color: var(--lilac); margin-top: 0.15rem; }

/* ---------- Case studies: client tabs, story on the left, campaign report on the right ---------- */
.cs__tabs { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--rule); margin-bottom: 1.75rem; }
.cs__tabs::-webkit-scrollbar { display: none; }
.cs__tab {
  position: relative; flex: none; display: flex; align-items: center; gap: 0.6rem; min-height: 50px; padding: 0.5rem 1.4rem 0.5rem 0;
  background: none; border: 0; font-weight: 700; font-size: 0.98rem; color: var(--text);
}
.cs__tab::after { content: ""; position: absolute; left: 0; right: 1.4rem; bottom: -1px; height: 2px; background: var(--purple); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease); }
.cs__tab-num { font-family: var(--font); font-weight: 700; font-size: 0.74rem; color: var(--purple); }
.cs__tab[aria-selected="true"], .cs__tab:hover { color: var(--navy); }
.cs__tab[aria-selected="true"]::after { transform: scaleX(1); }

.cs__panel { display: grid; gap: 2rem; align-items: center; }
.cs__tag { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.75rem; background: var(--purple-tint); color: var(--purple); font-weight: 700; font-size: 0.82rem; border-radius: var(--radius-sm); }
.cs__tag .icon { width: 16px; height: 16px; }
.cs__name { font-family: var(--font); font-weight: 800; font-size: clamp(2.1rem, 1.7rem + 1.5vw, 2.9rem); line-height: 1; margin-top: 0.7rem; }
.cs__project { margin-top: 0.4rem; font-size: 0.95rem; color: var(--navy); }
.cs__project span { font-weight: 700; }

.cs__block { display: grid; grid-template-columns: 40px 1fr; gap: 0.9rem; margin-top: 1.1rem; }
.cs__block h4 { font-size: 1rem; margin-bottom: 0.5rem; }
.cs__block-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-sm); background: #e3f6ec; color: var(--success); font-weight: 800; }
.cs__block-icon .icon { width: 20px; height: 20px; }
.cs__block-icon--warn { background: #fdecea; color: var(--danger); font-size: 1.2rem; }
.cs__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.cs__chips li { padding: 0.35rem 0.75rem; border: 1px solid var(--rule); background: var(--white); font-size: 0.87rem; color: var(--navy); }
.cs__chips--ok li { border-color: #bfe6cf; background: #f2fbf6; }

.cs__results { display: flex; align-items: center; gap: 1.25rem; margin-top: 1.4rem; padding: 1.1rem 1.3rem; background: var(--navy-deep); color: #c9d1e6; }
.cs__figure { font-family: var(--font); font-weight: 800; font-size: clamp(3rem, 2.4rem + 2vw, 4.2rem); line-height: 0.9; color: var(--lilac); flex: none; }
.cs__results h4 { color: var(--white); font-size: 1rem; margin-bottom: 0.4rem; }
.cs__results li { display: flex; gap: 0.5rem; font-size: 0.92rem; color: #e6eaf5; }
.cs__results li + li { margin-top: 0.25rem; }
.cs__results .icon { width: 16px; height: 16px; color: var(--lilac); margin-top: 0.25rem; }

.cs__visual { min-width: 0; }
.cs__cta { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1rem; font-weight: 700; text-decoration: none; }
.cs__cta .icon { width: 18px; height: 18px; transition: transform 0.2s; }
.cs__cta:hover .icon { transform: translateX(3px); }
.dash--compact { border: 1px solid var(--rule); box-shadow: 0 30px 60px -40px rgba(7, 38, 84, 0.55); }
.dash--compact .dash__stat dd { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); }
.dash--compact .dash__chart svg { height: clamp(140px, 16vw, 190px); }
@media (min-width: 1024px) { .cs__panel { grid-template-columns: 1fr 1.05fr; gap: 3.5rem; } }
@media (max-width: 479.98px) { .cs__results { flex-direction: column; align-items: flex-start; gap: 0.75rem; } }

/* ---------- Reviews: platform ratings + quotes ---------- */
.reviews { background: var(--paper); overflow: hidden; }
.rating-pill {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem 0.75rem; margin-top: 1.1rem;
  padding: 0.55rem 1.1rem; background: var(--white); border: 1px solid var(--rule); font-size: 0.92rem; color: var(--text);
}
.rating-pill strong { font-family: var(--font); font-weight: 800; font-size: 1.9rem; line-height: 1; color: var(--purple); }
.rating-pill b { color: var(--navy); }
.rating-pill__stars, .platform__stars, .review__stars { display: inline-flex; gap: 2px; color: #f2a516; }
.rating-pill__stars .icon { width: 17px; height: 17px; }

.platforms { display: grid; grid-template-columns: repeat(2, 1fr); background: var(--white); border: 1px solid var(--rule); }
.platform {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.3rem;
  padding: 1.05rem 0.6rem 1rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  transition: background-color 0.25s;
}
.platform::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand); }
.platform:hover { background: var(--paper); }
.platform__name { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 800; font-size: 1rem; color: var(--brand); letter-spacing: -0.01em; }
.platform__logo { width: 20px; height: 20px; }
.platform__mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; background: var(--brand); color: var(--white); font-size: 0.78rem; }
.platform__score { font-family: var(--font); font-weight: 800; font-size: 2.2rem; line-height: 1; color: var(--navy); margin-top: 0.35rem; }
.platform__score small { font-family: var(--font); font-size: 0.85rem; color: var(--text); }
.platform__stars .icon { width: 15px; height: 15px; }
.platform__count { font-family: var(--font); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.2rem; }
@media (max-width: 639.98px) { .platform:nth-child(2n) { border-right: 0; } .platform:nth-last-child(-n + 2) { border-bottom: 0; } }
@media (min-width: 640px) and (max-width: 1099.98px) {
  .platforms { grid-template-columns: repeat(3, 1fr); }
  .platform:nth-child(3n) { border-right: 0; }
  .platform:nth-last-child(-n + 3) { border-bottom: 0; }
}
@media (min-width: 1100px) {
  .platforms { grid-template-columns: repeat(6, 1fr); }
  .platform { border-bottom: 0; }
  .platform:last-child { border-right: 0; }
}

.quotes { margin-top: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }
.quotes__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.quotes__title { font-family: var(--font); font-weight: 800; font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem); }
.scroller--reviews { grid-auto-columns: min(84%, 330px); gap: 1rem; padding: 0 0 0.75rem; margin: 0; }
.review { display: flex; flex-direction: column; margin: 0; padding: 1.15rem 1.2rem; background: var(--white); border: 1px solid var(--rule); }
.review__stars .icon { width: 15px; height: 15px; }
.review blockquote { margin: 0.6rem 0 1rem; flex: 1; font-family: var(--font); font-weight: 800; font-size: 1.18rem; line-height: 1.28; color: var(--navy); }
.review figcaption { display: flex; align-items: center; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.review figcaption strong { display: block; color: var(--navy); font-size: 0.95rem; }
.review figcaption small { display: block; font-size: 0.82rem; }
.review__avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--navy); color: var(--white); font-weight: 700; flex: none; }

/* ---------- Video testimonials ---------- */
.videos { background: var(--navy); color: #c9d1e6; }
.videos .section-title { color: var(--white); }
.videos .section-head--center .eyebrow { color: #dfe4f2; }
.videos__grid { display: grid; gap: 2rem; }
.video { margin: 0; }
.video__frame { position: relative; display: block; width: 100%; padding: 0; border: 0; overflow: hidden; aspect-ratio: 16 / 9; background: #000; }
.video__frame img { width: 100%; height: 100%; object-fit: cover; opacity: 0.72; transition: opacity 0.25s; }
button.video__frame:hover img { opacity: 0.9; }
.video__play { position: absolute; left: 1.25rem; bottom: 1.25rem; display: grid; place-items: center; width: 64px; height: 64px; background: var(--white); color: var(--purple); }
.video__play .icon { width: 26px; height: 26px; margin-left: 3px; }
.video__soon { position: absolute; left: calc(1.25rem + 64px); bottom: 1.25rem; height: 64px; display: flex; align-items: center; padding: 0 1rem; background: var(--purple); color: var(--white); font-family: var(--font); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; }
.video__iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }
.video figcaption { margin-top: 0.9rem; font-size: 0.95rem; }
.video figcaption strong { color: var(--white); }
@media (min-width: 760px) { .videos__grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Clients + achievements ---------- */
.logos__track { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.logo-mark {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 80px; padding: 1rem;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  color: var(--navy); font-weight: 800; font-size: 1rem; letter-spacing: -0.01em; text-align: center;
  filter: grayscale(1); opacity: 0.8; transition: opacity 0.2s, filter 0.2s;
}
.logo-mark:hover { filter: none; opacity: 1; }
.logo-mark__dot { display: grid; place-items: center; width: 30px; height: 30px; background: var(--purple); color: var(--white); font-size: 0.9rem; flex: none; }
@media (min-width: 760px) { .logos__track { grid-template-columns: repeat(4, 1fr); } .logo-mark { min-height: 96px; } }

.achieve { margin-top: clamp(2.25rem, 1.75rem + 1.5vw, 3.25rem); }
.achieve__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--rule); }
.achieve__title { font-size: clamp(1.9rem, 1.5rem + 1.3vw, 2.6rem); }
.achieve__grid { display: grid; }
.badge-card { display: flex; gap: 0.9rem; align-items: center; padding: 1.05rem 0; border-bottom: 1px solid var(--rule); }
.badge-card__icon { display: grid; place-items: center; width: 54px; height: 54px; flex: none; border: 1px solid var(--purple); color: var(--purple); border-radius: 50%; }
.badge-card__icon .icon { width: 24px; height: 24px; }
.badge-card strong { display: block; color: var(--navy); font-size: 1rem; line-height: 1.3; }
.badge-card small { display: block; font-size: 0.85rem; margin-top: 0.15rem; }
@media (min-width: 640px) { .achieve__grid { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
@media (min-width: 1100px) { .achieve__grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Gallery ---------- */
.gallery { background: var(--paper); }
.gallery__grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 130px; gap: 0.6rem; }
.gallery__item { position: relative; overflow: hidden; margin: 0; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.gallery__item:hover img { transform: scale(1.04); }
.gallery__cap { position: absolute; left: 0; bottom: 0; padding: 0.35rem 0.65rem; background: var(--white); color: var(--navy); font-family: var(--font); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; }
.gallery__item--1 { grid-column: span 2; grid-row: span 2; }
.gallery__item--7 { grid-column: span 2; }
@media (min-width: 760px) {
  .gallery__grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 165px; gap: 0.7rem; }
  .gallery__item--4 { grid-column: span 2; }
}

/* ---------- FAQ ---------- */
.faq__grid { display: grid; gap: 2.5rem; }
.faq__intro .section-lead { margin-top: 1rem; }
.faq__ask { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.faq__list { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; cursor: pointer; list-style: none; font-weight: 700; color: var(--navy); font-size: 1.05rem; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--purple); }
.faq__sign { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 1px solid var(--rule); border-radius: 50%; color: var(--purple); transition: transform 0.25s var(--ease), background-color 0.2s, color 0.2s; }
.faq__sign .icon { width: 15px; height: 15px; }
.faq__item[open] .faq__sign { transform: rotate(45deg); background: var(--purple); border-color: var(--purple); color: var(--white); }
.faq__answer { padding: 0 3rem 1.4rem 0; }
@media (min-width: 960px) {
  .faq__grid { grid-template-columns: 0.8fr 1.2fr; gap: 5rem; align-items: start; }
  .faq__intro { position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* ---------- Contact ---------- */
.contact { background: var(--paper); border-top: 1px solid var(--border); }
.contact__grid { display: grid; gap: 2.5rem; align-items: start; }
.contact__info .section-lead { margin-top: 1rem; }
.contact__list { margin-top: 2rem; border-top: 1px solid var(--rule); }
.contact__list li { display: flex; gap: 1rem; align-items: flex-start; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); }
.contact__list a { display: block; color: var(--navy); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.contact__list a:hover { color: var(--purple); text-decoration: underline; }
.contact__list address { color: var(--navy); }
.contact__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid var(--rule); border-radius: var(--radius-sm); color: var(--purple); }
.contact__icon .icon { width: 21px; height: 21px; }
.contact__icon--wa { background: var(--whatsapp-dark); border-color: var(--whatsapp-dark); color: var(--white); }
.contact__label { display: block; font-family: var(--font); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--purple); margin-bottom: 0.2rem; }
.contact__list .contact__map { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem; font-size: 0.9rem; color: var(--purple); }
.contact__map .icon { width: 16px; height: 16px; }
.contact__card { background: var(--white); border: 1px solid var(--rule); border-top: 4px solid var(--purple); padding: clamp(1.4rem, 1rem + 2vw, 2.5rem); }
.contact__card-title { font-family: var(--font); font-weight: 800; font-size: 2.2rem; line-height: 1; }
.contact__card-sub { font-size: 0.88rem; margin: 0.5rem 0 1.5rem; }
@media (min-width: 960px) { .contact__grid { grid-template-columns: 0.9fr 1.1fr; gap: 5rem; } }

/* keep wide dashboards inside narrow screens */
.ads, .cs { grid-template-columns: minmax(0, 1fr); }
.ads__panel, .cs__panel > * { min-width: 0; }
.ads__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ads__tab strong { overflow-wrap: anywhere; }
.contact__list .contact__map { min-height: 28px; }

/* without JavaScript every tab panel is shown in turn */
.no-js [role="tablist"]:not(.hero__tabs) { display: none; }
.no-js [role="tabpanel"][hidden] { display: block !important; }
.no-js .pkg__plans[hidden] { display: grid !important; }

/* italic accent words on dark sections */
.services .section-title em, .ppc .section-title em { color: var(--lilac); }

/* closing card in the SEO grid */
.seo-card--cta { justify-content: center; padding: 2rem 1.6rem; background: var(--navy-deep); border-color: var(--navy-deep); color: #c9d1e6; }
.seo-card--cta:hover { border-color: var(--purple-accent); }
.seo-card--cta h3 { font-family: var(--font); font-weight: 800; font-size: 2.2rem; line-height: 1.02; color: var(--white); }
.seo-card--cta h3 em { font-style: italic; color: var(--lilac); }
.seo-card--cta p { margin: 0.75rem 0 1.5rem; font-size: 0.95rem; }
.seo-card--cta .btn { align-self: flex-start; }

/* PPC: campaign list on the left, compact report on the right */
.ads .dash__chart svg { height: clamp(130px, 14vw, 170px); }
.ads__result { font-size: 0.93rem; margin-top: 0.9rem; }
@media (min-width: 1024px) {
  .ads { grid-template-columns: 280px minmax(0, 1fr); gap: 2.5rem; align-items: start; }
  .ads__tabs { grid-template-columns: 1fr; border-top: 1px solid var(--rule-light); }
  .ads__tab { padding: 1rem 0 1rem 1rem; border-bottom: 1px solid var(--rule-light); min-height: 0; }
  .ads__tab::before { left: 0; right: auto; top: -1px; bottom: -1px; width: 3px; height: auto; transform: scaleY(0); transform-origin: top; }
  .ads__tab[aria-selected="true"]::before { transform: scaleY(1); }
  .ads__tab[aria-selected="true"] { background: rgba(255, 255, 255, 0.05); }
}

/* services: closing call-to-action card fills the last row */
.svc-card--cta { justify-content: space-between; gap: 1.5rem; background: var(--purple); border-color: var(--purple); }
.svc-card--cta::before { display: none; }
.svc-card--cta:hover { background: var(--purple); border-color: var(--lilac); }
.svc-card__eyebrow { font-family: var(--font); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lilac); }
.svc-card__cta-title { font-family: var(--font); font-weight: 800; font-size: clamp(1.7rem, 1.4rem + 1vw, 2.3rem); line-height: 1.05; color: var(--white); margin-top: 0.5rem; max-width: 22ch; }
.svc-card__cta-title em { color: var(--lilac); }
.svc-card__cta-text { margin-top: 0.6rem; font-size: 0.93rem; color: #eadcf0; max-width: 48ch; }
.svc-card__cta-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.svc-card__cta-actions .btn--outline-light { color: var(--white); }
.svc-card__cta-actions .btn--outline-light:hover { color: var(--navy); }
@media (min-width: 680px) { .svc-card--cta { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .svc-card--cta { grid-column: span 2; } }

/* =========================================================================
   Polish layer: clean, bold, practical. Solid colours, no gradients or glows.
   ========================================================================= */
:root { --card-shadow: 0 1px 2px rgba(7, 38, 84, 0.05), 0 10px 26px -18px rgba(7, 38, 84, 0.3); }

/* hero */
.slide__title { font-size: var(--fs-2xl); line-height: 1.1; letter-spacing: -0.035em; max-width: 15ch; }
.slide__title em { font-style: normal; color: var(--lilac); }
.slide__kicker { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; }
.hero__ctrl { border-radius: 50%; }

/* feature strip */
.feature__icon { border: 0; border-radius: 10px; background: var(--purple-tint); }
.feature__title { font-weight: 800; }

/* services (dark cards) */
.svc-card { border-radius: var(--radius); }
.svc-card__icon { border-radius: 10px; }
.svc-card__num { font-weight: 700; }
.svc-card__ask { border-radius: 8px; }
.svc-card__cta-title { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.8rem); line-height: 1.2; letter-spacing: -0.02em; }

/* why */
.why__photo { border-radius: var(--radius); }
.stats { border: 0; gap: 0.6rem; }
.stat, .stat:nth-child(odd), .stat:nth-child(even), .stat:first-child, .stat:last-child {
  padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white);
}
.stat__value { font-size: clamp(1.5rem, 1.25rem + 0.9vw, 1.95rem); letter-spacing: -0.03em; }
.reasons { border-top: 0; gap: 0.6rem; }
.reason { grid-template-columns: 44px 1fr; padding: 0.95rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); }
.reason::before { display: none; }
.reason__icon { display: grid; grid-row: span 2; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--purple-tint); color: var(--purple); border: 0; }
.reason__icon .icon { width: 21px; height: 21px; }

/* process */
.steps { border: 0; gap: 0.75rem; }
.step, .step:first-child, .step:last-child { padding: 1.2rem 1.15rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); }
.step__num { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--purple-tint); color: var(--purple); font-size: 0.95rem; font-weight: 800; margin-bottom: 0.8rem; }
.step:last-child .step__num { background: var(--purple); color: var(--white); }
@media (max-width: 959.98px) { .step { display: grid; grid-template-columns: 42px 1fr; gap: 0 1rem; } .step__num { grid-row: span 2; margin: 0; } }
@media (min-width: 960px) { .steps { border-bottom: 0; } }

/* packages */
.pkg__switch { border: 1px solid var(--border); border-radius: 12px; background: var(--white); padding: 0.3rem; gap: 0.2rem; }
.pkg__switch-btn { border-radius: 9px; min-height: 42px; }
.pkg__switch-btn::after { display: none; }
.pkg__switch-btn[aria-selected="true"] { background: var(--navy); color: var(--white); }
.pkg__plans { background: none; border: 0; gap: 1rem; }
.plan, .plan:last-child { border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); }
.plan__name { font-size: 1.3rem; letter-spacing: -0.02em; }
.plan__price span { font-size: 2rem; }
.plan--featured { border-color: var(--navy-deep); box-shadow: inset 0 4px 0 var(--purple-accent); }
.plan__flag { font-size: 0.7rem; }
@media (min-width: 900px) { .plan, .plan:last-child { border-right: 1px solid var(--border); } }

/* SEO portfolio */
.seo-sum { border: 0; gap: 0.5rem; }
.seo-sum div { padding: 0.65rem 0.9rem; border: 1px solid var(--border); border-radius: 10px; }
.seo-sum dd { font-size: 1.7rem; letter-spacing: -0.03em; }
.seo-filter__btn { border-radius: 8px; }
.seo-card { border-radius: var(--radius); overflow: hidden; border-color: var(--border); }
.serp__query { box-shadow: none; }
.serp__result { border-left: 3px solid var(--purple); border-radius: 0 8px 8px 0; }
.serp__rank { border-radius: 6px; font-weight: 800; }
.seo-card__name { font-size: 1.15rem; letter-spacing: -0.02em; }
.seo-card__kw b { font-weight: 700; }
.seo-card--cta { border-radius: var(--radius); }
.seo-card--cta h3 { font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; }

/* PPC */
.dash { border-radius: var(--radius); }
.dash__period { border-radius: 6px; }

/* case studies */
.cs__tab { font-weight: 700; }
.cs__panel { padding-top: 0.25rem; }
.cs__tag { border-radius: 6px; }
.cs__name { font-size: clamp(1.6rem, 1.35rem + 1vw, 2.1rem); letter-spacing: -0.03em; }
.cs__block-icon { border-radius: 10px; }
.cs__chips li { border-radius: 6px; padding: 0.3rem 0.7rem; font-size: 0.85rem; }
.cs__results { border-radius: var(--radius); }
.cs__figure { font-size: clamp(2.3rem, 1.9rem + 1.6vw, 3.2rem); letter-spacing: -0.04em; }

/* reviews */
.rating-pill { border-radius: 10px; border-color: var(--border); }
.rating-pill strong { font-size: 1.5rem; }
.platforms { border-radius: var(--radius); overflow: hidden; border-color: var(--border); }
.platform { border-color: var(--border); }
.platform__score { font-size: 1.85rem; letter-spacing: -0.03em; }
.platform__count { font-weight: 600; }
.quotes__title { font-size: 1.3rem; letter-spacing: -0.02em; }
.review { border-radius: var(--radius); border-color: var(--border); }
.review blockquote { font-family: var(--font); font-weight: 500; font-size: 0.98rem; line-height: 1.6; }

/* videos */
.video__frame, .video__iframe { border-radius: var(--radius); }

/* clients + achievements */
.logos__track { border-radius: var(--radius); overflow: hidden; border-color: var(--border); }
.logo-mark { border-color: var(--border); }
.logo-mark__dot { border-radius: 6px; }
.achieve__title { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem); }
.badge-card__icon { border: 0; background: var(--purple-tint); }

/* gallery */
.gallery__item { border-radius: 10px; }

/* FAQ */
.faq__list { border: 0; display: grid; gap: 0.5rem; }
.faq__item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); padding: 0 1.1rem; }
.faq__item[open] { border-color: #d9c6e1; }

/* contact */
.contact__list { border: 0; display: grid; gap: 0.5rem; }
.contact__list li { padding: 0.8rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); }
.contact__icon { border: 0; border-radius: 10px; background: var(--purple-tint); }
.contact__card { border: 1px solid var(--border); border-top: 4px solid var(--purple); border-radius: var(--radius); }
.contact__card-title { font-size: 1.45rem; letter-spacing: -0.02em; }
.plan.plan--featured { background: var(--navy-deep); border-color: var(--navy-deep); }
.services .section-lead, .ppc .section-lead, .videos .section-lead { color: #c9d1e6; }

/* SEO portfolio cards v2: client header, score strip, keyword list */
.seo-card { display: flex; flex-direction: column; padding: 1.15rem 1.15rem 1rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; overflow: visible; }
.seo-card:hover { border-color: #cdb7d6; box-shadow: var(--card-shadow); }
.seo-card__top { display: flex; align-items: center; gap: 0.75rem; }
.seo-card__logo { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 10px; background: var(--navy); color: var(--white); font-weight: 800; font-size: 1.05rem; }
.seo-card__id { min-width: 0; flex: 1; }
.seo-card__name { font-size: 1.05rem; line-height: 1.25; margin: 0; letter-spacing: -0.01em; }
.seo-card__domain { font-size: 0.82rem; margin: 0; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seo-card__tag { flex: none; padding: 0.2rem 0.55rem; border-radius: 6px; background: var(--purple-tint); color: var(--purple); font-size: 0.72rem; font-weight: 700; }
.seo-card__score { display: flex; align-items: center; gap: 0.6rem; margin: 0.9rem 0 0.6rem; padding: 0.65rem 0.8rem; border-radius: 10px; background: var(--paper); }
.seo-card__score strong { font-size: 1.7rem; font-weight: 800; line-height: 1; color: var(--purple); letter-spacing: -0.03em; }
.seo-card__score > span { font-size: 0.78rem; line-height: 1.25; color: var(--navy); font-weight: 600; }
.seo-card__best { margin-left: auto; text-align: right; }
.seo-card__best b { display: block; font-size: 1rem; color: var(--success); }
.seo-card__kw { border-top: 0; margin: 0; }
.seo-card__kw li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.38rem 0; border-bottom: 1px dashed var(--border); font-size: 0.86rem; color: var(--navy); }
.seo-card__kw li:last-child { border-bottom: 0; }
.seo-card__kw span { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.seo-card__kw .icon { width: 13px; height: 13px; color: #8a93a6; flex: none; }
.seo-card__kw b { flex: none; min-width: 2.2rem; text-align: center; padding: 0.1rem 0.4rem; border-radius: 6px; background: #e3f6ec; color: var(--success); font-size: 0.76rem; font-weight: 800; }
.seo-card__cta { margin-top: auto; padding-top: 0.75rem; min-height: 32px; }
.seo-card--cta { padding: 1.5rem; }
.svc-card__link { min-height: 32px; }
.seo-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 680px) { .seo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .seo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.seo-card__kw span { overflow-wrap: anywhere; }
@media (max-width: 359.98px) { .seo-card__tag { display: none; } }
.seo-card.seo-card--cta { justify-content: center; background: var(--navy-deep); border-color: var(--navy-deep); color: #c9d1e6; }
.seo-card.seo-card--cta h3 { color: var(--white); }

/* =========================================================================
   Ad account "Overview" report (sample) — console-style UI
   ========================================================================= */
.gads {
  --g-blue: #1967d2; --g-red: #d93025; --g-text: #202124; --g-muted: #5f6368; --g-line: #dadce0; --g-bg: #f8f9fa;
  font-family: Roboto, "Segoe UI", Arial, sans-serif; color: var(--g-text); font-size: 12px; line-height: 1.35;
  background: var(--white); border-radius: 12px; overflow: hidden; box-shadow: 0 30px 60px -32px rgba(0, 0, 0, 0.55); min-width: 0;
}
.gads__chrome { display: flex; align-items: center; gap: 12px; padding: 9px 14px; background: #202124; color: #bdc1c6; font-size: 12px; }
.gads__dots { display: flex; gap: 6px; }
.gads__dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.gads__dots i:nth-child(2) { background: #febc2e; }
.gads__dots i:nth-child(3) { background: #28c840; }
.gads__app { display: grid; grid-template-columns: 1fr; background: var(--g-bg); }
.gads__rail, .gads__menu { display: none; }
.gads__main { min-width: 0; padding: 12px 12px 10px; }

.gads__filters { display: flex; flex-wrap: wrap; gap: 8px; }
.gads__select { display: flex; flex-direction: column; padding: 5px 26px 5px 10px; border: 1px solid var(--g-line); border-radius: 4px; background: var(--white); font-size: 11.5px; font-weight: 500; position: relative; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gads__select small { font-size: 9.5px; color: var(--g-muted); font-weight: 400; }
.gads__select::after { content: ""; position: absolute; right: 9px; top: 50%; border: 4px solid transparent; border-top-color: var(--g-muted); transform: translateY(-2px); }
.gads__select:first-child { box-shadow: inset 0 -2px 0 var(--g-blue); }
.gads__chips { display: none; align-items: center; gap: 8px; margin-top: 8px; font-size: 10.5px; color: var(--g-muted); }
.gads__chips b { font-weight: 500; padding: 3px 9px; border: 1px solid var(--g-line); border-radius: 12px; background: var(--white); color: var(--g-text); }
.gads__chips em { font-style: normal; }
.gads__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 8px; }
.gads__title { font-size: 17px; font-weight: 400; color: var(--g-text); margin: 0; }
.gads__range { padding: 5px 10px; border: 1px solid var(--g-line); border-radius: 4px; background: var(--white); font-size: 11px; white-space: nowrap; }

.gads__tiles { display: grid; grid-template-columns: repeat(2, 1fr); background: var(--white); border: 1px solid var(--g-line); border-bottom: 0; }
.gads__tile { display: flex; flex-direction: column; gap: 4px; padding: 9px 12px 11px; border-right: 1px solid var(--g-line); }
.gads__tile span { font-size: 11px; color: var(--g-muted); }
.gads__tile strong { font-size: 22px; font-weight: 400; color: var(--g-text); letter-spacing: -0.01em; }
.gads__tile--0 { background: var(--g-blue); }
.gads__tile--1 { background: var(--g-red); }
.gads__tile--0 span, .gads__tile--0 strong, .gads__tile--1 span, .gads__tile--1 strong { color: var(--white); }
@media (min-width: 560px) { .gads__tiles { grid-template-columns: repeat(4, 1fr); } }

.gads__chart { position: relative; padding: 12px 36px 22px 34px; background: var(--white); border: 1px solid var(--g-line); }
.gads__chart svg { display: block; width: 100%; height: clamp(120px, 15vw, 175px); overflow: visible; }
.gads__chart line { stroke: #e8eaed; stroke-width: 1; vector-effect: non-scaling-stroke; }
.gads__line { fill: none; stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.gads__line--a { stroke: var(--g-blue); }
.gads__line--b { stroke: var(--g-red); }
.gads__y { position: absolute; left: 6px; font-size: 9.5px; color: var(--g-muted); }
.gads__y--top { top: 8px; }
.gads__y--mid { top: calc(50% - 10px); }
.gads__y--zero { bottom: 22px; }
.gads__x { position: absolute; bottom: 5px; font-size: 9.5px; color: var(--g-muted); }
.gads__x--start { left: 34px; }
.gads__x--end { right: 36px; }

@media (min-width: 760px) {
  .gads__app { grid-template-columns: 62px 168px minmax(0, 1fr); }
  .gads__rail { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 0; background: var(--white); border-right: 1px solid var(--g-line); }
  .gads__create { display: grid; place-items: center; gap: 2px; font-size: 9.5px; color: var(--g-muted); }
  .gads__create b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(60, 64, 67, 0.35); color: var(--g-blue); font-size: 22px; font-weight: 400; }
  .gads__rail-item { display: grid; place-items: center; gap: 2px; font-size: 9px; color: var(--g-muted); }
  .gads__ico { width: 17px; height: 17px; }
  .gads__rail-item.is-active { color: var(--g-blue); }
  .gads__rail-item.is-active .gads__ico { padding: 3px 9px; width: 34px; height: 22px; border-radius: 11px; background: #d3e3fd; }
  .gads__menu { display: grid; align-content: start; gap: 2px; padding: 10px 8px; margin: 0; list-style: none; background: var(--white); border-right: 1px solid var(--g-line); }
  .gads__menu li { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 10px; border-radius: 16px; font-size: 11px; color: var(--g-text); }
  .gads__menu li span { color: var(--g-muted); }
  .gads__menu li.is-active { background: var(--g-blue); color: var(--white); font-weight: 500; }
  .gads__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--g-red); }
  .gads__chips { display: flex; }
}
/* compact version inside case studies: hide the side menu */
@media (min-width: 760px) { .gads--compact .gads__app { grid-template-columns: 56px minmax(0, 1fr); } .gads--compact .gads__menu { display: none; } }
.gads--compact .gads__tile strong { font-size: 19px; }

/* ---------- Video testimonials: vertical shorts ---------- */
.videos { background: var(--navy-deep); }
.shorts { display: grid; grid-auto-flow: column; grid-auto-columns: min(62%, 240px); gap: 0.9rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 0.25rem; }
.shorts::-webkit-scrollbar { display: none; }
.short { scroll-snap-align: start; }
.short__frame { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #000; color: var(--white); text-align: left; }
.short__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.short__frame:hover img { transform: scale(1.04); }
.short__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.85) 100%); }
.short__len { position: absolute; top: 0.7rem; right: 0.7rem; padding: 0.15rem 0.45rem; border-radius: 5px; background: rgba(0, 0, 0, 0.6); font-size: 0.72rem; font-weight: 700; }
.short__play { position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--purple); transition: transform 0.25s var(--ease); }
.short__play .icon { width: 22px; height: 22px; margin-left: 3px; }
.short__frame:hover .short__play { transform: translate(-50%, -50%) scale(1.08); }
.short__info { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.9rem; display: grid; gap: 0.6rem; }
.short__quote { font-size: 0.92rem; font-weight: 700; line-height: 1.3; }
.short__who { display: flex; align-items: center; gap: 0.5rem; }
.short__who strong { display: block; font-size: 0.82rem; }
.short__who small { display: block; font-size: 0.72rem; opacity: 0.8; }
.short__avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--purple); font-weight: 800; font-size: 0.8rem; flex: none; border: 2px solid rgba(255, 255, 255, 0.8); }
.short__soon { position: absolute; top: 0.7rem; left: 0.7rem; padding: 0.15rem 0.5rem; border-radius: 5px; background: var(--purple); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.short iframe { width: 100%; aspect-ratio: 9 / 16; border: 0; border-radius: 16px; }
@media (min-width: 900px) { .shorts { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; } }

/* ---------- FAQ v2 ---------- */
.faq__grid { display: grid; gap: 2rem; }
.faq__side .section-lead { margin-top: 0.6rem; }
.ask-card { margin-top: 1.4rem; border-radius: var(--radius); overflow: hidden; background: var(--navy-deep); color: #c9d1e6; }
.ask-card__photo { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.ask-card__body { padding: 1.1rem 1.2rem 1.25rem; }
.ask-card__title { font-size: 1.15rem; font-weight: 800; color: var(--white); }
.ask-card__text { font-size: 0.9rem; margin: 0.3rem 0 0.9rem; }
.ask-card__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.faq__list { display: grid; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); overflow: hidden; }
.faq__item, .faq__item[open] { border: 0; border-radius: 0; padding: 0; box-shadow: none; border-bottom: 1px solid var(--border); }
.faq__item:last-child { border-bottom: 0; }
.faq__item[open] { background: var(--paper); }
.faq__item summary { display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: 0.75rem; padding: 0.85rem 1.1rem; font-size: 0.97rem; }
.faq__num { font-size: 0.78rem; font-weight: 800; color: var(--purple); }
.faq__sign { width: 28px; height: 28px; }
.faq__sign .icon { width: 14px; height: 14px; }
.faq__answer { padding: 0 1.1rem 1rem calc(2rem + 1.85rem); font-size: 0.93rem; }
@media (min-width: 960px) {
  .faq__grid { grid-template-columns: 0.85fr 1.15fr; gap: 3rem; align-items: start; }
  .faq__side { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
.videos .section-title { color: var(--white); } .videos .section-title em { color: var(--lilac); } .videos .section-lead { color: #c9d1e6; }

/* ---------- Process: icon timeline ---------- */
.flow { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.flow__step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 1rem; }
.flow__step:not(:last-child)::before { content: ""; position: absolute; left: 27px; top: 56px; bottom: -1rem; width: 2px; background: linear-gradient(var(--purple), var(--navy-tint)); }
.flow__node { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--white); border: 1px solid var(--border); color: var(--purple); box-shadow: 0 10px 24px -16px rgba(7, 38, 84, 0.55); z-index: 1; transition: transform 0.3s var(--ease), background 0.3s, color 0.3s; }
.flow__node .icon { width: 22px; height: 22px; }
.flow__num { position: absolute; right: -6px; bottom: -4px; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px; border-radius: 12px; background: var(--purple); color: var(--white); font-size: 0.68rem; font-weight: 800; border: 2px solid var(--white); }
.flow__card { padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s var(--ease); }
.flow__title { font-size: 1.05rem; margin-bottom: 0.3rem; }
.flow__text { font-size: 0.9rem; color: var(--text); margin-bottom: 0.75rem; }
.flow__out { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.65rem; border-radius: 999px; background: var(--purple-tint); color: var(--purple); font-size: 0.76rem; font-weight: 700; }
.flow__out .icon { width: 13px; height: 13px; }
.flow__step:hover .flow__node, .flow__step:nth-child(3) .flow__node { background: var(--purple); color: var(--white); border-color: var(--purple); }
.flow__step:hover .flow__num, .flow__step:nth-child(3) .flow__num { background: var(--navy); }
.flow__step:hover .flow__card { border-color: rgba(101, 30, 122, 0.35); box-shadow: 0 18px 34px -24px rgba(7, 38, 84, 0.45); transform: translateY(-3px); }
.flow__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 1.75rem; }
@media (min-width: 960px) {
  .flow { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.1rem; }
  .flow__step { grid-template-columns: 1fr; justify-items: center; gap: 1.1rem; text-align: center; }
  .flow__step:not(:last-child)::before { left: calc(50% + 40px); right: calc(-50% - 1.1rem + 40px); top: 35px; bottom: auto; width: auto; height: 2px; background: repeating-linear-gradient(90deg, var(--purple) 0 6px, transparent 6px 12px); opacity: 0.5; }
  .flow__node { width: 70px; height: 70px; }
  .flow__node .icon { width: 26px; height: 26px; }
  .flow__card { height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; }
  .flow__text { flex: 1; }
}

/* ---------- Clients: two-row logo marquee ---------- */
.marquee { display: grid; gap: 1rem; margin-inline: calc(50% - 50vw); padding-block: 0.35rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); overflow: hidden; }
.marquee__row { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee__row--rev { animation-direction: reverse; animation-duration: 44s; }
.marquee:hover .marquee__row { animation-play-state: paused; }
.marquee__track { display: flex; gap: 1rem; padding: 0 0.5rem; margin: 0; list-style: none; }
@keyframes marquee { to { transform: translateX(-50%); } }
.brand-card { display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 200px; height: 84px; padding: 0 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); box-shadow: 0 10px 24px -20px rgba(7, 38, 84, 0.5); white-space: nowrap; }
.brand-card__mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--purple); color: var(--white); font-weight: 800; font-size: 1rem; flex: none; }
.brand-card__name { font-weight: 800; font-size: 1rem; letter-spacing: -0.02em; color: var(--navy); }
.brand-card--1 .brand-card__mark { background: var(--navy); border-radius: 50%; }
.brand-card--2 .brand-card__mark { background: #0f8a5f; border-radius: 4px; }
.brand-card--2 .brand-card__name { text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.9rem; }
.brand-card--3 .brand-card__mark { background: #d9480f; border-radius: 50% 50% 50% 4px; }
.brand-card--3 .brand-card__name { color: #3b3b3b; font-weight: 700; }
@media (min-width: 760px) { .brand-card { width: 220px; height: 96px; } }
@media (prefers-reduced-motion: reduce) { .marquee__row { animation: none; } .marquee { overflow-x: auto; } }

/* ---------- Why choose: partner card + reason cards ---------- */
.why__grid { align-items: center; }
.why__copy .section-title em { color: var(--purple); font-style: normal; }
.gp-card { margin-top: 1.4rem; padding: 1.1rem 1.2rem; border: 1px solid var(--border); border-radius: var(--radius-lg, 18px); background: var(--white); box-shadow: 0 18px 40px -30px rgba(7, 38, 84, 0.5); }
.gp-card__top { display: flex; align-items: center; gap: 1rem; padding-bottom: 1rem; margin-bottom: 0.9rem; border-bottom: 1px solid var(--border); }
.gp-card__top strong { display: block; color: var(--navy); font-size: 1rem; }
.gp-card__top small { display: block; font-size: 0.82rem; }
.gp-badge { display: flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.9rem 0.35rem 0.6rem; border-right: 1px solid var(--border); flex: none; }
.gp-badge .brand-g { width: 26px; height: 26px; }
.gp-badge > span { display: grid; line-height: 1; font-size: 1.25rem; color: #3c4043; font-weight: 500; font-family: Roboto, Arial, sans-serif; }
.gp-badge small { font-size: 0.68rem; color: #5f6368; margin-bottom: 2px; }
.gp-card__label { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text); margin-bottom: 0.55rem; }
.gp-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.gp-tools li { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: 10px; background: var(--paper); font-size: 0.85rem; font-weight: 600; color: var(--navy); }
.gp-tools .brand-g { width: 16px; height: 16px; flex: none; }
.why__cta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }
.why-cards { display: grid; gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
.why-card { position: relative; padding: 1.25rem 1.2rem 1.3rem; border: 1px solid var(--border); border-radius: var(--radius-lg, 18px); background: var(--white); overflow: hidden; transition: transform 0.3s var(--ease), box-shadow 0.3s; }
.why-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -28px rgba(7, 38, 84, 0.5); }
.why-card__num { position: absolute; top: 0.8rem; right: 1rem; font-size: 2.2rem; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(7, 38, 84, 0.14); }
.why-card__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; color: var(--white); background: var(--purple); margin-bottom: 0.9rem; }
.why-card__icon .icon { width: 22px; height: 22px; }
.why-card--1 .why-card__icon { background: var(--navy); }
.why-card--2 .why-card__icon { background: #c2410c; }
.why-card--3 .why-card__icon { background: #0f8a5f; }
.why-card__title { font-size: 1.05rem; margin-bottom: 0.35rem; }
.why-card__text { font-size: 0.9rem; }
.why .why__stats { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
@media (min-width: 560px) { .why-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .why__grid { grid-template-columns: 1fr 1.05fr; } .why-cards { gap: 1.1rem; } .why-card:nth-child(even) { transform: translateY(1.4rem); } .why-card:nth-child(even):hover { transform: translateY(calc(1.4rem - 3px)); } }

/* ---------- Awards & recognition (dark) ---------- */
.awards { background: radial-gradient(120% 90% at 50% 0%, #0b2f66 0%, var(--navy-deep) 60%); color: #c9d1e6; }
.awards .section-title { color: var(--white); }
.awards .section-title em { color: var(--lilac); font-style: normal; }
.awards .section-lead { color: #c9d1e6; }
.award-list { display: grid; gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
.award { position: relative; display: grid; justify-items: center; text-align: center; padding: 1.5rem 1.1rem 1.3rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-lg, 18px); background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); transition: transform 0.3s var(--ease), border-color 0.3s; }
.award:hover { transform: translateY(-4px); border-color: rgba(240, 192, 90, 0.5); }
.award__icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(145deg, #f6d27a, #c9902c); color: #3d2a05; box-shadow: 0 0 0 6px rgba(240, 192, 90, 0.12); margin-bottom: 0.9rem; }
.award__icon .icon { width: 26px; height: 26px; }
.award__year { position: absolute; top: 0.8rem; right: 0.9rem; padding: 0.1rem 0.5rem; border-radius: 999px; border: 1px solid rgba(240, 192, 90, 0.45); color: #f0c05a; font-size: 0.72rem; font-weight: 700; }
.award__title { color: var(--white); font-size: 1.02rem; line-height: 1.3; margin-bottom: 0.3rem; }
.award__scope { font-size: 0.85rem; color: #c9d1e6; }
.award__by { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px dashed rgba(255, 255, 255, 0.16); width: 100%; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: #8e9bbb; }
@media (min-width: 560px) { .award-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .award-list { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; } }
.awards .achieve { margin-top: 1.4rem; }
.partner-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.partner { display: grid; justify-items: center; gap: 0.15rem; padding: 0.95rem 0.8rem; border-radius: 14px; background: var(--white); text-align: center; }
.partner__logo { display: flex; align-items: center; gap: 0.4rem; font-family: Roboto, Arial, sans-serif; font-size: 1rem; font-weight: 500; color: #3c4043; }
.partner__logo .brand-g { width: 20px; height: 20px; }
.partner__logo .brand-fb { width: 20px; height: 20px; color: #0866ff; }
.partner__logo--meta { color: #0866ff; font-weight: 700; }
.partner__logo .brand-msme { width: 20px; height: 20px; color: #ea580c; }
.partner__title { color: var(--navy); font-size: 1.05rem; font-weight: 800; }
.partner__text { font-size: 0.76rem; color: var(--text); }
@media (min-width: 900px) { .partner-row { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; } }
@media (max-width: 559.98px) {
  .gp-card__top { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .gp-badge { border-right: 0; padding: 0; }
  .gp-tools li { padding: 0.5rem 0.55rem; font-size: 0.8rem; gap: 0.4rem; }
  .why__cta .btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 559.98px) {
  .award { grid-template-columns: 48px 1fr; justify-items: start; text-align: left; column-gap: 0.9rem; padding: 1rem 1rem 0.9rem; }
  .award__icon { grid-row: span 3; width: 48px; height: 48px; margin: 0; box-shadow: 0 0 0 4px rgba(240, 192, 90, 0.12); }
  .award__icon .icon { width: 22px; height: 22px; }
  .award__title { font-size: 0.98rem; padding-right: 3rem; margin: 0; }
  .award__by { grid-column: 2; margin-top: 0.45rem; padding-top: 0.45rem; font-size: 0.68rem; }
  .partner { padding: 0.8rem 0.5rem; }
  .partner__logo { font-size: 0.9rem; }
  .partner__title { font-size: 0.95rem; }
}

/* ---------- Awards as framed certificates ---------- */
.certs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 0.9rem; margin: 0; padding: 0; list-style: none; }
.cert { text-align: center; }
.cert__frame { margin: 0 0 0.7rem; padding: 7px; border-radius: 4px; background: linear-gradient(135deg, #d9b25c, #8a6420 45%, #e6c477 70%, #9a7128); box-shadow: 0 18px 30px -16px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.25); transition: transform 0.35s var(--ease); }
.cert__frame img { display: block; width: 100%; height: auto; aspect-ratio: 800 / 1131; border: 5px solid #fbf8f1; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); background: #fbf8f1; }
.cert:hover .cert__frame { transform: translateY(-4px) rotate(-0.4deg); }
.cert__title { color: var(--white); font-weight: 700; font-size: 0.92rem; line-height: 1.3; }
.cert__meta { font-size: 0.76rem; color: #8e9bbb; margin-top: 0.15rem; }
@media (min-width: 1024px) { .certs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; } .cert__frame { padding: 9px; } .cert__title { font-size: 0.98rem; } }
/* marquee breaks out with 100vw, which includes the scrollbar on Windows: clip it */
.trust { overflow-x: clip; }
@supports not (overflow: clip) { .trust { overflow-x: hidden; } }

/* ---------- Services: 6 cards + strip ---------- */
.svc-anchor { display: block; position: relative; top: calc(-1 * var(--header-h, 80px)); }
.svc-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-top: 1.25rem; padding: 1.1rem 1.3rem; border: 1px solid var(--rule-light); border-radius: var(--radius); background: linear-gradient(90deg, rgba(101, 30, 122, 0.55), rgba(255, 255, 255, 0.04)); }
.svc-strip__title { color: var(--white); font-weight: 700; font-size: 1.02rem; }
.svc-strip__title span { display: block; font-weight: 400; font-size: 0.88rem; color: #c9d1e6; margin-top: 0.15rem; }
.svc-strip__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
@media (min-width: 1024px) { .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- SEO portfolio: dark cards, light text ---------- */
.seo-card:not(.seo-card--cta) { background: linear-gradient(160deg, #0b2a5c 0%, var(--navy-deep) 70%); border-color: rgba(255, 255, 255, 0.08); color: #c9d1e6; box-shadow: 0 22px 40px -30px rgba(4, 26, 59, 0.9); }
.seo-card:not(.seo-card--cta):hover { border-color: rgba(217, 182, 230, 0.45); box-shadow: 0 26px 46px -28px rgba(4, 26, 59, 0.95); transform: translateY(-3px); }
.seo-card { transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s; }
.seo-card:not(.seo-card--cta) .seo-card__logo { background: var(--purple); }
.seo-card:not(.seo-card--cta) .seo-card__name { color: var(--white); }
.seo-card:not(.seo-card--cta) .seo-card__domain { color: #8e9bbb; }
.seo-card:not(.seo-card--cta) .seo-card__tag { background: rgba(217, 182, 230, 0.14); color: var(--lilac); }
.seo-card:not(.seo-card--cta) .seo-card__score { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); }
.seo-card:not(.seo-card--cta) .seo-card__score strong { color: var(--lilac); }
.seo-card:not(.seo-card--cta) .seo-card__score > span, .seo-card:not(.seo-card--cta) .seo-card__best { color: #c9d1e6; }
.seo-card:not(.seo-card--cta) .seo-card__best b { color: #4ade80; }
.seo-card:not(.seo-card--cta) .seo-card__kw li { color: #e4e9f5; border-bottom-color: rgba(255, 255, 255, 0.1); }
.seo-card:not(.seo-card--cta) .seo-card__kw .icon { color: #6f7d9e; }
.seo-card:not(.seo-card--cta) .seo-card__kw b { background: rgba(74, 222, 128, 0.14); color: #4ade80; }
.seo-card:not(.seo-card--cta) .seo-card__cta { color: var(--lilac); }
.seo-card:not(.seo-card--cta) .seo-card__cta:hover { color: var(--white); }
/* CTA card switches to the brand purple so it still stands apart */
.seo-card.seo-card--cta { background: linear-gradient(150deg, #7a2a93, var(--purple) 55%, #4a1259); border-color: transparent; color: #eadcf0; }
.seo-card.seo-card--cta h3 em { color: #f3d9ff; }

/* spacing pass: page-specific gaps */
.rating-pill { margin-top: 0.75rem; }
.cs__panel, .ppc__body { margin-top: 0; }
.trust { padding-bottom: calc(var(--space-section) * 0.85); }
.flow__cta, .why__cta { margin-top: 1.25rem; }
.why .why__stats { margin-top: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); }
.awards .achieve { margin-top: 1.1rem; }
.seo-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.25rem; margin-top: 1.25rem; text-align: center; }
.seo-more p { font-size: 0.95rem; color: var(--text); }
.seo-more strong { color: var(--navy); }

/* ---------- Platforms ticker (under the hero) ---------- */
.ticker { display: flex; align-items: center; gap: 1.25rem; padding: 0.85rem 0 0.85rem max(1rem, calc((100vw - 1240px) / 2)); border-block: 1px solid var(--border); background: var(--paper); overflow: hidden; }
.ticker__label { flex: none; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple); padding-right: 1.25rem; border-right: 1px solid var(--border); }
.ticker__view { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ticker__row { display: flex; width: max-content; animation: marquee 45s linear infinite; }
.ticker:hover .ticker__row { animation-play-state: paused; }
.ticker__track { display: flex; margin: 0; padding: 0; list-style: none; }
.ticker__track li { display: flex; align-items: center; gap: 1.6rem; padding-right: 1.6rem; white-space: nowrap; font-weight: 700; font-size: 0.95rem; color: var(--navy); }
.ticker__track li::after { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--purple); opacity: 0.45; transform: rotate(45deg); }
@media (max-width: 639.98px) { .ticker__label { display: none; } .ticker { padding-left: 0; } .ticker__track li { font-size: 0.86rem; } }
@media (prefers-reduced-motion: reduce) { .ticker__row { animation: none; } }

/* ---------- Case studies: slider controls ---------- */
.cs__nav { display: flex; align-items: center; justify-content: center; gap: 0.9rem; margin-top: 1.4rem; }
.cs__count { font-size: 0.85rem; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; min-width: 4.2rem; text-align: center; }
.cs__progress { position: relative; width: 120px; height: 3px; border-radius: 3px; background: var(--border); overflow: hidden; }
.cs__progress::after { content: ""; position: absolute; inset: 0; background: var(--purple); transform-origin: left; transform: scaleX(0); }
.cs.is-autoplay.is-tick .cs__progress::after { animation: csprog var(--autoplay, 8000ms) linear forwards; }
.cs.is-autoplay:hover .cs__progress::after, .cs.is-autoplay:focus-within .cs__progress::after, .cs.is-offscreen .cs__progress::after { animation-play-state: paused; }
.cs:not(.is-autoplay) .cs__progress { display: none; }
@keyframes csprog { to { transform: scaleX(1); } }
.cs__panel:not([hidden]) { animation: csfade 0.45s var(--ease); }
@keyframes csfade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Certificates: slider ---------- */
.certs-wrap { position: relative; }
ul.certs { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 0.9rem) / 2); grid-template-columns: none; gap: 0.9rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0.5rem 0.1rem 0.75rem; }
.certs::-webkit-scrollbar { display: none; }
.cert { scroll-snap-align: start; }
@media (min-width: 760px) { ul.certs { grid-auto-columns: calc((100% - 2 * 1.1rem) / 3); gap: 1.1rem; } }
@media (min-width: 1024px) { ul.certs { grid-template-columns: none; grid-auto-columns: calc((100% - 3 * 1.4rem) / 4); gap: 1.4rem; } }
.certs-nav { justify-content: center; margin-top: 0.75rem; }
.round-btn--light { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.25); color: var(--white); }
.round-btn--light:hover:not(:disabled) { background: var(--white); color: var(--navy); }

/* =========================================================================
   Mobile final pass: long card stacks become swipe rows, chips stay on one line
   ========================================================================= */
@media (max-width: 679.98px) {
  ul.seo-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; grid-template-columns: none; gap: 0.8rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter, 1rem); scrollbar-width: none; margin-inline: calc(-1 * var(--gutter, 1rem)); padding: 0.25rem var(--gutter, 1rem) 0.75rem; }
  .seo-grid::-webkit-scrollbar { display: none; }
  .seo-grid > * { scroll-snap-align: start; }
  .seo-grid::after { content: ""; width: 1px; }
  .swipe-hint { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 0.1rem; font-size: 0.78rem; font-weight: 600; color: var(--text); }
  .swipe-hint .icon { width: 14px; height: 14px; }
  .seo-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter, 1rem)); padding-inline: var(--gutter, 1rem); }
  .seo-filter::-webkit-scrollbar { display: none; }
  .seo-filter__btn { flex: none; }
  .features__grid { grid-template-columns: 1fr 1fr; gap: 0; }
  .feature, .feature:last-child { grid-template-columns: 1fr; gap: 0.5rem; padding: 0.9rem 0.75rem; border-bottom: 1px solid var(--border); }
  .feature:nth-last-child(-n+2) { border-bottom: 0; }
  .feature:nth-child(even) { padding-right: 0; }
  .feature:nth-child(odd) { border-right: 1px solid var(--border); }
  .feature__title { font-size: 0.9rem; }
  .feature__text { font-size: 0.8rem; }
}
@media (min-width: 680px) { .swipe-hint { display: none; } }
.ads__tab, .cs__tab { white-space: nowrap; }

.contact__icon.contact__icon--wa { background: #e3f6ec; color: var(--whatsapp-dark); }
@media (max-width: 559.98px) { .brand-card { width: 170px; height: 68px; gap: 0.5rem; } .brand-card__mark { width: 28px; height: 28px; font-size: 0.85rem; } .brand-card__name { font-size: 0.88rem; } .marquee { gap: 0.7rem; } .marquee__track { gap: 0.7rem; padding: 0 0.35rem; } }

/* ---------- Client tiles: consistent logo-style cards, nothing clipped ---------- */
.marquee { padding-block: 0.9rem 1.4rem; margin-block: -0.6rem -0.9rem; gap: 0.6rem; }
.brand-card { justify-content: flex-start; gap: 0.75rem; width: 236px; height: 84px; padding: 0 1.1rem; border-color: var(--border); border-radius: 14px; background: var(--white); box-shadow: 0 6px 18px -12px rgba(7, 38, 84, 0.35); transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s var(--ease); }
.brand-card:hover { border-color: rgba(101, 30, 122, 0.35); box-shadow: 0 14px 26px -16px rgba(7, 38, 84, 0.45); transform: translateY(-2px); }
.brand-card__mark { width: 40px; height: 40px; border-radius: 11px; font-size: 1.05rem; }
.brand-card__id { display: grid; min-width: 0; text-align: left; }
.brand-card .brand-card__name, .brand-card--2 .brand-card__name, .brand-card--3 .brand-card__name { font-size: 0.98rem; font-weight: 800; letter-spacing: -0.015em; text-transform: none; color: var(--navy); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.brand-card__ind { font-size: 0.74rem; font-weight: 600; color: #5f687c; letter-spacing: 0.01em; }
@media (max-width: 559.98px) {
  .brand-card { width: 190px; height: 66px; gap: 0.6rem; padding: 0 0.85rem; border-radius: 12px; }
  .brand-card__mark { width: 32px; height: 32px; border-radius: 9px; font-size: 0.9rem; }
  .brand-card .brand-card__name, .brand-card--2 .brand-card__name, .brand-card--3 .brand-card__name { font-size: 0.86rem; }
  .brand-card__ind { font-size: 0.68rem; }
}

/* Why-us partner card: compact phone layout */
@media (max-width: 559.98px) {
  .gp-card { padding: 0.95rem 1rem 1rem; margin-top: 1.1rem; }
  .gp-card__top { flex-direction: row; align-items: center; gap: 0.8rem; padding-bottom: 0.85rem; margin-bottom: 0.75rem; }
  .gp-badge { flex-direction: column; align-items: center; gap: 0.2rem; padding: 0 0.8rem 0 0; border-right: 1px solid var(--border); }
  .gp-badge .brand-g { width: 24px; height: 24px; }
  .gp-badge > span { font-size: 0.95rem; text-align: center; }
  .gp-badge small { font-size: 0.6rem; }
  .gp-card__top strong { font-size: 0.95rem; line-height: 1.25; }
  .gp-card__top small { font-size: 0.78rem; }
  .gp-card__label { font-size: 0.68rem; margin-bottom: 0.5rem; }
  .gp-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .gp-tools li { padding: 0.38rem 0.6rem; font-size: 0.78rem; gap: 0.35rem; white-space: nowrap; border-radius: 999px; }
  .gp-tools .brand-g { width: 14px; height: 14px; }
  .why__cta { gap: 0.5rem; }
  .why__cta .btn { padding-block: 0.75rem; }
}
@media (max-width: 359.98px) { .gp-tools li { padding: 0.34rem 0.5rem; font-size: 0.72rem; gap: 0.3rem; } .gp-tools { gap: 0.35rem; } .gp-badge { padding-right: 0.6rem; } .gp-card__top { gap: 0.6rem; } }

/* Services on phones: stacked (no swipe), compact cards, footer never wraps */
.svc-card__link { white-space: nowrap; }
@media (max-width: 679.98px) {
  .svc-grid { gap: 0.7rem; }
  .svc-card { padding: 1rem 1.05rem 0.95rem; }
  .svc-card__head { margin-bottom: 0.55rem; }
  .svc-card__icon { width: 40px; height: 40px; }
  .svc-card__title { font-size: 1.08rem; margin-bottom: 0.45rem; }
  .svc-card__list li a { padding-block: 0.22rem; font-size: 0.88rem; }
  .svc-card__foot { margin-top: 0.6rem; padding-top: 0.65rem; }
  .svc-card__link { font-size: 0.86rem; }
  .svc-card__ask { padding: 0.4rem 0.8rem; font-size: 0.82rem; }
}

/* Package switch on phones: three equal segments, short labels, no sideways scroll */
@media (max-width: 559.98px) {
  .pkg__switch { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; overflow: visible; margin-bottom: 1.5rem; }
  .pkg__switch-btn { padding: 0.55rem 0.4rem; font-size: 0.9rem; text-align: center; white-space: nowrap; }
  .pkg__switch-more { display: none; }
}

/* Section background rhythm after the reorder:
   services dark · why paper · SEO white · process paper · packages white · PPC dark ·
   cases white · reviews paper · videos dark · clients white · awards dark · gallery paper · FAQ white · contact paper */
.process { background: var(--paper); }
.packages { background: var(--white); }
.packages .plan:not(.plan--featured) { box-shadow: 0 16px 36px -28px rgba(7, 38, 84, 0.45); }
.packages .pkg__switch { background: var(--paper); }
@media (min-width: 960px) { .flow__step { grid-template-rows: auto 1fr; align-content: stretch; } .flow__card { height: auto; align-self: stretch; } }

/* =========================================================================
   Attraction layer: hero floats, depth on dark sections, richer hovers, staggered reveals
   ========================================================================= */

/* Hero: two small UI cards floating over the photo */
.hero-float { position: absolute; z-index: 2; display: none; align-items: center; gap: 0.6rem; padding: 0.6rem 0.85rem 0.6rem 0.6rem; border-radius: 14px; background: rgba(255, 255, 255, 0.94); color: var(--navy); box-shadow: 0 18px 40px -18px rgba(4, 26, 59, 0.6); backdrop-filter: blur(6px); }
.hero-float strong { display: block; font-size: 0.86rem; line-height: 1.2; }
.hero-float small { display: block; font-size: 0.72rem; color: #5b6476; }
.hero-float__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--purple); color: var(--white); flex: none; }
.hero-float__icon--alt { background: #0f8a5f; }
.hero-float__icon .icon { width: 18px; height: 18px; }
.hero-float__dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); animation: ping 2s infinite; }
.hero-float--a { left: 6%; bottom: 20%; }
.hero-float--b { right: 5%; top: 12%; }
.slide.is-active .hero-float { animation: floatIn 0.7s var(--ease) both, bob 6s ease-in-out 0.7s infinite; }
.slide.is-active .hero-float--b { animation-delay: 0.25s, 1s; }
@keyframes floatIn { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
@media (min-width: 760px) { .hero-float { display: flex; } }

/* Depth on dark sections: soft glows + faint dot grid */
.services, .ppc, .videos, .awards { position: relative; isolation: isolate; }
.services::before, .ppc::before, .videos::before, .awards::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40rem 26rem at 8% 0%, rgba(138, 63, 163, 0.28), transparent 60%),
    radial-gradient(34rem 24rem at 100% 100%, rgba(26, 115, 232, 0.14), transparent 60%),
    radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.2px) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.55));
  mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.55));
}

/* Headline accent: gradient on the emphasised words */
.section-title em, .slide__title em { background: linear-gradient(92deg, var(--purple) 0%, #a24bbf 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.04em; }
.services .section-title em, .ppc .section-title em, .videos .section-title em, .awards .section-title em, .slide__title em, .footer-cta .section-title em { background-image: linear-gradient(92deg, #e2c2ef 0%, #b98bd0 100%); }

/* Eyebrow: small gradient tick before the label */
.section .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; }
.section .eyebrow::after { content: none; }
.section-head .eyebrow::before, .why__copy .eyebrow::before, .faq__side .eyebrow::before, .contact .eyebrow::before { content: ""; display: inline-block; width: 18px; height: 2px; border: 0; padding: 0; border-radius: 2px; background: linear-gradient(90deg, var(--purple), #c084fc); }
.section-head--center .eyebrow { display: flex; justify-content: center; }

/* Primary button: soft gradient + light sweep on hover */
.btn--primary { background-image: linear-gradient(135deg, #7a2a93, var(--purple) 55%, #55176a); position: relative; overflow: hidden; }
.btn--primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent); transform: skewX(-18deg); transition: left 0.6s var(--ease); pointer-events: none; }
.btn--primary:hover::after { left: 130%; }

/* Service cards: glow + icon lift on hover */
.svc-card { transition: transform 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s, background-color 0.35s; }
.svc-card:hover { transform: translateY(-4px); border-color: rgba(217, 182, 230, 0.4); box-shadow: 0 26px 50px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(217, 182, 230, 0.12) inset; }
.svc-card__icon { background-image: linear-gradient(140deg, #8a3fa3, var(--purple)); box-shadow: 0 10px 22px -10px rgba(138, 63, 163, 0.8); transition: transform 0.35s var(--ease); }
.svc-card:hover .svc-card__icon { transform: translateY(-2px) rotate(-6deg); }

/* Feature strip + why-card icons: gentle tint and lift */
.feature__icon { background: linear-gradient(140deg, #f6eefa, #ece2f3); color: var(--purple); transition: transform 0.3s var(--ease); }
.feature:hover .feature__icon { transform: translateY(-2px); }
.why-card__icon { box-shadow: 0 12px 22px -12px rgba(7, 38, 84, 0.6); transition: transform 0.35s var(--ease); }
.why-card:hover .why-card__icon { transform: translateY(-3px) rotate(-6deg); }

/* Staggered reveal: children of a revealing grid arrive one after another */
.reveal > * { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal:not(.is-in).stagger > * { opacity: 0; transform: translateY(14px); }
.reveal.stagger { opacity: 1; transform: none; }
.reveal.is-in.stagger > *:nth-child(2) { transition-delay: 0.07s; }
.reveal.is-in.stagger > *:nth-child(3) { transition-delay: 0.14s; }
.reveal.is-in.stagger > *:nth-child(4) { transition-delay: 0.21s; }
.reveal.is-in.stagger > *:nth-child(5) { transition-delay: 0.28s; }
.reveal.is-in.stagger > *:nth-child(6) { transition-delay: 0.35s; }
.reveal.is-in.stagger > *:nth-child(n+7) { transition-delay: 0.4s; }

/* Scroll progress line under the header */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; pointer-events: none; background: linear-gradient(90deg, var(--purple), #c084fc); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* Back to top */
.to-top { position: fixed; right: 1.1rem; bottom: 5.4rem; z-index: 90; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--navy); color: var(--white); box-shadow: 0 12px 26px -12px rgba(4, 26, 59, 0.7); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 0.3s, transform 0.3s var(--ease), background-color 0.2s; }
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--purple); }
.to-top .icon { width: 20px; height: 20px; }
@media (max-width: 559.98px) { .to-top { right: 0.9rem; bottom: 4.6rem; width: 40px; height: 40px; } }

@media (prefers-reduced-motion: reduce) {
  .slide.is-active .hero-float, .hero-float__dot { animation: none; }
  .btn--primary::after { display: none; }
}

/* Tap targets: inline text links get a 44px touch area on phones */
@media (max-width: 759.98px) { .cs__cta, .contact__map, .footer-links__map, .seo-card__cta, .svc-card__link, .footer-links__col a, .brand { display: inline-flex; align-items: center; min-height: 44px; } .footer-links__col ul { gap: 0; } }
@media (max-width: 759.98px) { .svc-card__list li a { display: block; padding-block: 0.4rem; } .site-nav__contact a, .contact__item a, .contact__map, a.contact__map { display: inline-flex; align-items: center; min-height: 40px; } }
@media (max-width: 759.98px) { .contact__list a { display: inline-flex; align-items: center; min-height: 36px; } }

/* =====================================================================
   2026-10-19 layer: featured-in strip, brand-coloured platforms,
   9 service cards, 3 pricing plans, consultant form + dark panel
   ===================================================================== */

/* ---------- As featured in ---------- */
.press { padding-block: 1.1rem; background: linear-gradient(90deg, #fbf6fd, var(--paper) 45%, #f3f5fb); border-bottom: 1px solid var(--border); overflow-x: clip; }
.press__row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.press__label { display: inline-flex; align-items: center; gap: 0.55rem; flex: none; margin: 0; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); }
.press__label .icon { width: 18px; height: 18px; color: var(--purple); }
.press__label .press__chev { width: 22px; height: 22px; transform: rotate(-90deg); color: var(--purple-accent); }
.press__view { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.press__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.press:hover .press__track { animation-play-state: paused; }
.press__track ul { display: flex; gap: 0.9rem; margin: 0; padding: 0.35rem 0.9rem 0.35rem 0; list-style: none; }
.press__logo { display: grid; place-items: center; min-width: 170px; height: 64px; padding: 0 1.4rem; border-radius: 14px; background: var(--white); border: 1px solid #edf0f6; box-shadow: 0 10px 22px -18px rgba(7, 38, 84, 0.45); color: #2b3446; font-weight: 800; font-size: 1.02rem; white-space: nowrap; filter: grayscale(1); opacity: 0.85; transition: filter 0.25s, opacity 0.25s, transform 0.25s; }
.press__logo:hover { filter: none; opacity: 1; transform: translateY(-2px); }
.press__logo--0 { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; color: #111; }
.press__logo--1 { color: #c8102e; letter-spacing: -0.01em; text-transform: uppercase; font-size: 0.98rem; }
.press__logo--2 { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: #3b4352; }
.press__logo--3 { color: #1f3a93; }
@media (max-width: 639.98px) { .press__row { gap: 0.6rem; } .press__label { font-size: 0.72rem; } .press__logo { min-width: 140px; height: 52px; font-size: 0.9rem; } }
@media (prefers-reduced-motion: reduce) { .press__track { animation: none; } }

/* ---------- Platforms ticker: brand colours ---------- */
.ticker__track li { gap: 0.55rem; padding-right: 0; margin-right: 0.7rem; padding: 0.4rem 0.85rem 0.4rem 0.5rem; border-radius: 999px; background: var(--white); border: 1px solid color-mix(in srgb, var(--brand) 22%, #e3e6ee); color: #2b3446; }
.ticker__track li::after { display: none; }
.ticker__mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 12%, #fff); color: var(--brand); }
.ticker__mark .icon { width: 15px; height: 15px; }
.ticker__name > span { color: color-mix(in srgb, var(--brand) 70%, #1f2633); }
.g-word { font-weight: 800; letter-spacing: -0.01em; }
.g-word b { font-weight: 800; }
.ticker__track li:not(:has(.g-word)) .ticker__name { color: color-mix(in srgb, var(--brand) 75%, #1f2633); }
.ticker { padding-block: 0.7rem; }

/* ---------- Services: 9 cards ---------- */
@media (min-width: 680px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc-card__list { grid-template-columns: 1fr; }
.svc-card__list a { font-size: 0.9rem; }
@media (min-width: 1024px) { .svc-card__list li a { padding-block: 0.22rem; } }

/* ---------- Pricing plans ---------- */
.pp-grid { display: grid; gap: 1rem; }
@media (min-width: 760px) { .pp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pp { position: relative; display: flex; flex-direction: column; padding: 1.4rem 1.35rem 1.35rem; border-radius: 18px; background: var(--white); border: 1px solid var(--border); box-shadow: 0 18px 40px -32px rgba(7, 38, 84, 0.55); transition: transform 0.25s var(--ease), box-shadow 0.25s; }
.pp::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; border-radius: 18px 18px 0 0; background: linear-gradient(90deg, var(--purple), var(--navy)); }
.pp:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(7, 38, 84, 0.6); }
.pp--featured { background: linear-gradient(160deg, var(--navy) 0%, #2a1749 60%, var(--purple) 100%); border-color: transparent; color: #d7dcea; }
.pp--featured::before { background: linear-gradient(90deg, #d9b6e6, #fff); }
.pp__head { display: flex; align-items: center; gap: 0.8rem; }
.pp__icon { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 13px; background: var(--purple-tint); color: var(--purple); }
.pp--featured .pp__icon { background: rgba(255, 255, 255, 0.12); color: var(--white); }
.pp__icon .icon { width: 22px; height: 22px; }
.pp__name { font-size: 1.12rem; margin: 0; }
.pp--featured .pp__name { color: var(--white); }
.pp__for { margin: 0.1rem 0 0; font-size: 0.85rem; color: #5f687c; }
.pp--featured .pp__for { color: #c9cfe3; }
.pp__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.45rem; margin: 1.15rem 0 0.9rem; padding: 0.85rem 1rem; border-radius: 12px; background: var(--paper); }
.pp--featured .pp__price { background: rgba(255, 255, 255, 0.08); }
.pp__price small { flex-basis: 100%; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple-accent); }
.pp--featured .pp__price small { color: #e5c7f0; }
.pp__price span { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; color: var(--navy); line-height: 1.05; }
.pp--featured .pp__price span { color: var(--white); }
.pp__price em { font-style: normal; font-size: 0.9rem; font-weight: 600; color: #5f687c; }
.pp--featured .pp__price em { color: #c9cfe3; }
ul.pp__features { display: grid; gap: 0.55rem; margin: 0 0 1.25rem; padding: 0; list-style: none; flex: 1; align-content: start; }
.pp__features li { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.92rem; line-height: 1.45; }
.pp__features .icon { width: 18px; height: 18px; flex: none; margin-top: 1px; padding: 3px; border-radius: 50%; background: #e7f6ee; color: #12804a; }
.pp--featured .pp__features .icon { background: rgba(52, 210, 123, 0.18); color: #6ee7a8; }
.pp__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }
.pp__actions .btn { justify-content: center; padding-inline: 0.75rem; }
.pp__actions .btn:only-child { grid-column: 1 / -1; }
.pp--featured .pp__actions .btn--ghost { --btn-fg: var(--white); --btn-border: rgba(255, 255, 255, 0.5); }
.pp--featured .pp__actions .btn--ghost:hover { --btn-bg: var(--white); --btn-fg: var(--navy); }
.pp--featured .pp__actions .btn--primary { --btn-bg: var(--white); --btn-fg: var(--purple); --btn-border: var(--white); }
.packages__note { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.6rem 1rem; margin-top: 1.3rem; text-align: center; }

/* ---------- Contact: consultant form + dark panel ---------- */
.contact__grid { gap: 1.25rem; align-items: stretch; }
@media (min-width: 960px) { .contact__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); gap: 1.5rem; } }
.contact .contact__card { border: 1px solid var(--border); border-top: 1px solid var(--border); border-radius: 20px; padding: clamp(1.25rem, 0.9rem + 1.5vw, 2.25rem); box-shadow: 0 24px 50px -40px rgba(7, 38, 84, 0.6); }
.contact__title { margin: 0; font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2.1rem); letter-spacing: -0.02em; }
.contact__sub { margin: 0.4rem 0 0.9rem; color: #59627a; }
ul.contact__ticks { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0 0 1.2rem; padding: 0 0 1.1rem; list-style: none; border-bottom: 1px dashed var(--border); }
.contact__ticks li { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; font-weight: 600; color: var(--navy); }
.contact__ticks .icon { width: 17px; height: 17px; color: #12804a; }
.contact .field { margin-bottom: 0.85rem; }
.contact .field label small { font-weight: 500; color: #5f6a85; }
.contact .field .req { color: #d92d20; }
@media (min-width: 560px) { .contact .field-row { grid-template-columns: 1fr 1fr; } }
.input-icon { position: relative; }
.input-icon > .icon { position: absolute; left: 0.85rem; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: #9aa5bd; pointer-events: none; }
.input-icon--area > .icon { top: 0.95rem; transform: none; }
.contact .field input, .contact .field select, .contact .field textarea { background: #f6f7fb; border-color: #e5e8f0; }
.contact .field input:focus, .contact .field select:focus, .contact .field textarea:focus { background: var(--white); }
.input-icon input, .input-icon select, .input-icon textarea { width: 100%; padding-left: 2.5rem; }
.contact .field textarea { min-height: 96px; }
.input-prefix { display: flex; align-items: stretch; border: 1px solid #e5e8f0; border-radius: 10px; background: #f6f7fb; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; }
.input-prefix:focus-within { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(101, 30, 122, 0.18); background: var(--white); }
.field.has-error .input-prefix { border-color: var(--danger); }
.input-prefix > span { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0 0.75rem; border-right: 1px solid #e5e8f0; font-size: 0.7rem; font-weight: 700; color: #5f6a85; white-space: nowrap; }
.input-prefix > span b { font-size: 0.92rem; color: var(--navy); }
.contact .input-prefix input { flex: 1; min-width: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.contact__foot { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 0.9rem 1.25rem; margin-top: 0.4rem; padding-top: 1rem; border-top: 1px dashed var(--border); }
.contact__foot .captcha { margin: 0; }
.captcha__row { display: flex; align-items: center; gap: 0.5rem; }
.captcha__img { width: 104px; height: 44px; border-radius: 10px; border: 1px dashed #c9cfe0; background: #eef0f7; }
.captcha__refresh { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 1px solid var(--border); border-radius: 50%; background: var(--white); color: var(--navy); cursor: pointer; transition: transform 0.3s, color 0.2s; }
.captcha__refresh:hover { color: var(--purple); transform: rotate(90deg); }
.captcha__refresh .icon { width: 17px; height: 17px; }
.contact .captcha input { width: 128px; text-align: center; letter-spacing: 0.3em; font-weight: 700; }
.contact__send { min-height: 50px; padding-inline: 1.6rem; border-radius: 999px; box-shadow: 0 16px 28px -16px rgba(101, 30, 122, 0.85); }
@media (max-width: 559.98px) { .contact__send { width: 100%; justify-content: center; } .contact .captcha input { flex: 1; width: auto; min-width: 0; } }

.contact__panel { position: relative; display: flex; flex-direction: column; padding: clamp(1.25rem, 0.9rem + 1.2vw, 1.9rem); border-radius: 20px; background: radial-gradient(120% 70% at 100% 0%, rgba(138, 63, 163, 0.45), transparent 60%), linear-gradient(170deg, #0b2350 0%, var(--navy-deep) 55%, #1b0f33 100%); color: #c9d1e6; overflow: hidden; }
.contact__group { padding-block: 1.05rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.contact__group:first-child { padding-top: 0; }
.contact__group:last-child { border-bottom: 0; padding-bottom: 0; margin-top: auto; }
.contact__panel-title { margin: 0 0 0.85rem; font-size: 1.12rem; font-weight: 800; color: var(--white); }
.contact__panel-title em { font-style: normal; color: #e0a9f2; }
ul.contact__pairs { display: grid; gap: 0.85rem 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 420px) { ul.contact__pairs:not(.contact__pairs--stack) { grid-template-columns: 1fr 1fr; } }
ul.contact__pairs--stack { margin-bottom: 0.85rem; }
.contact__pairs li { display: flex; gap: 0.7rem; align-items: flex-start; min-width: 0; }
.contact__pairs li > span:last-child { display: grid; gap: 0.1rem; min-width: 0; }
.contact__pairs small { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #8f9abb; }
.contact__pairs a, .contact__pairs address { color: var(--white); font-weight: 600; font-style: normal; font-size: 0.93rem; text-decoration: none; overflow-wrap: anywhere; }
.contact__pairs a:hover { color: #f0c6ff; }
.contact__panel .contact__map { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.3rem; font-size: 0.85rem; color: #e0a9f2; }
.contact__pi { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 11px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--white); }
.contact__pi .icon { width: 18px; height: 18px; }
.contact__pi--wa { background: rgba(37, 211, 102, 0.16); border-color: rgba(37, 211, 102, 0.35); color: #5ee597; }
ul.contact__social { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.contact__social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--white); transition: background-color 0.2s, color 0.2s, transform 0.2s; }
.contact__social a:hover { background: var(--white); color: var(--brand); transform: translateY(-2px); }
.contact__social .icon { width: 16px; height: 16px; }
.pp--featured .pp__actions .btn--primary { background: var(--white); color: var(--purple); border-color: var(--white); box-shadow: none; }
.pp--featured .pp__actions .btn--primary:hover { background: #f4ecf7; color: var(--purple-hover); }
.contact__panel { justify-content: space-between; }
.contact__group:last-child { margin-top: 0; }
.contact__pairs li.contact__pairs-wide { grid-column: 1 / -1; }
.contact .captcha input::placeholder { letter-spacing: 0.02em; font-weight: 500; }
.contact__hours { color: var(--white); font-weight: 600; font-size: 0.93rem; }
ul.contact__pairs--stack:last-child { margin-bottom: 0; }
.press { position: relative; }
ul.contact__social { gap: 0.35rem; }
.contact__social a { width: 35px; height: 35px; }
.press__logo { filter: none; opacity: 1; padding: 0 1.5rem; }
.press__logo img { display: block; width: auto; height: 34px; max-width: 190px; object-fit: contain; }
.press__logo img[src*="asia-pacific"] { height: 30px; mix-blend-mode: multiply; }
.press__logo img[src*="udaipur"] { height: 42px; }
@media (max-width: 639.98px) { .press__logo img { height: 26px; max-width: 150px; } .press__logo img[src*="udaipur"] { height: 34px; } }
@media (max-width: 767.98px) { .press__row { flex-direction: column; align-items: stretch; gap: 0.55rem; } .press__label { justify-content: center; } .press__view { flex: none; width: 100%; } }

/* Real Google Ads screenshot (uploaded in the admin) */
.ads-shot { margin: 0; overflow: hidden; border-radius: 16px; background: var(--white); border: 1px solid var(--border); box-shadow: 0 30px 60px -36px rgba(4, 26, 59, 0.7); }
.ads-shot__bar { display: flex; align-items: center; gap: 5px; padding: 0.55rem 0.8rem; background: #f1f3f4; border-bottom: 1px solid #e3e6ee; }
.ads-shot__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d4d8e3; }
.ads-shot__bar i:first-child { background: #f87171; } .ads-shot__bar i:nth-child(2) { background: #fbbf24; } .ads-shot__bar i:nth-child(3) { background: #34d399; }
.ads-shot__bar b { margin-left: 0.6rem; padding: 0.15rem 0.7rem; border-radius: 999px; background: var(--white); font-size: 0.72rem; font-weight: 600; color: #5f6368; }
.ads-shot img { display: block; width: 100%; height: auto; }
.ads-shot figcaption { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.9rem; border-top: 1px solid #eef0f5; font-size: 0.78rem; font-weight: 600; color: #12804a; background: #f6fbf8; }
.ads-shot figcaption .icon { width: 15px; height: 15px; }
.brand-card__logo { width: auto; height: 36px; max-width: 120px; object-fit: contain; flex: none; }

/* Google Ads tabs below desktop: as many columns as fit, so 4 accounts sit 2 × 2 on phones */
@media (max-width: 1023.98px) {
  .ads__tabs { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); column-gap: 1rem; }
  .ads__tab { padding-bottom: 0.9rem; }
}