/* ==========================================================================
   agency.css — conversion + trust components

   Loaded AFTER style.css, deliberately:
     1. style.css stays untouched, so nothing existing can be lost
     2. later source order lets a few base rules be corrected without
        fighting specificity

   Uses the existing design tokens (--bg, --ink, --blue, --lime, --line,
   --r, --gutter) so everything here matches the original design language.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. STICKY HEADER

   The header used to scroll away, taking the only CTA with it. On a long
   home page that means a visitor who reads to the bottom has nothing to
   click without scrolling back up.

   body had overflow-x: hidden, which silently computes overflow-y: auto and
   turns body into a scroll container — the classic reason position: sticky
   "does nothing". overflow-x: clip prevents the sideways scrollbar without
   creating that scroll container. .marquee-sec and footer already clip their
   own overflow, so nothing needs the old body rule.
   -------------------------------------------------------------------------- */
body {
	overflow-x: clip;
}

/* Older engines without overflow: clip keep the safe old behaviour and
   simply do not get a sticky header. Nothing breaks. */
@supports not (overflow: clip) {
	body {
		overflow-x: hidden;
	}
}

header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--bg);
	/* Permanent hairline. A sticky header needs a visible edge as soon as
	   content passes under it, and relying on a scroll-toggled class would
	   mean the separation depends on JavaScript running. */
	border-bottom: 1px solid var(--line);
}

@media (max-width: 1080px) {
	header {
		position: sticky;
		top: 0;
	}
}

/* Keyboard users should be able to jump the nav. Invisible until focused. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: 12px 20px;
	background: var(--ink);
	color: #fff;
	border-radius: 0 0 14px 0;
	font-size: 14px;
	text-decoration: none;
}

.skip-link:focus {
	left: 0;
}

/* --------------------------------------------------------------------------
   2. NAV PHONE

   A visible phone number is one of the highest-return, lowest-effort
   changes available — published research puts the lead lift around 54%.
   -------------------------------------------------------------------------- */
.nav-links a.nav-phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14.5px;
	font-weight: 600;
	white-space: nowrap;
	opacity: 1;
	flex: none;
}

.nav-links a.nav-phone::after {
	display: none;
}

.nav-links a.nav-phone i {
	font-size: 12px;
	color: var(--muted);
}

.nav-links a.nav-phone:hover i {
	color: var(--ink);
}

/* --------------------------------------------------------------------------
   3. TRUST BAR

   Credibility is judged in roughly 50 milliseconds, so these signals have
   to sit at the top of the page rather than in the footer. Three to five
   specific signals outperform a page covered in badges.
   -------------------------------------------------------------------------- */
.trust-bar {
	background: var(--ink);
	color: #fff;
	font-size: 13.5px;
}

.trust-bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-top: 11px;
	padding-bottom: 11px;
}

.trust-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.trust-list li {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: rgba(255, 255, 255, 0.86);
}

.trust-list li i {
	color: var(--lime);
	font-size: 12.5px;
}

.trust-call {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex: none;
	padding: 7px 16px;
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease;
}

.trust-call:hover {
	background: var(--lime);
	color: var(--ink);
}

.trust-call i {
	font-size: 12px;
}

.trust-call:focus-visible {
	outline: 2px solid var(--lime);
	outline-offset: 3px;
}

@media (max-width: 860px) {
	.trust-bar-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.trust-list {
		gap: 8px 18px;
		font-size: 12.5px;
	}

	.trust-call {
		align-self: stretch;
		justify-content: center;
	}
}

/* --------------------------------------------------------------------------
   4. FLOATING WHATSAPP

   WhatsApp is the default business channel in Bangladesh and over 90% of
   visitors are on a phone. The message arrives pre-filled so the chat opens
   with context already in it.
   -------------------------------------------------------------------------- */
.wa-float {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 20px;
	border-radius: 100px;
	background: #25d366;
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	box-shadow: 0 10px 30px rgba(37, 211, 102, 0.36);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.wa-float i {
	font-size: 22px;
	line-height: 1;
}

.wa-float:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 38px rgba(37, 211, 102, 0.45);
}

.wa-float:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 3px;
}

@media (max-width: 640px) {
	.wa-float {
		right: 16px;
		bottom: 16px;
		padding: 15px;
	}

	/* Icon only on small screens so it never covers content. */
	.wa-float-label {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   5. BREADCRUMBS
   -------------------------------------------------------------------------- */
.crumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 28px;
	font-size: 13.5px;
	color: var(--muted);
}

.crumbs a {
	color: var(--muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.crumbs a:hover {
	color: var(--ink);
	border-bottom-color: var(--ink);
}

.crumbs [aria-current='page'] {
	color: var(--ink);
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   6. HOME PROOF STRIP
   -------------------------------------------------------------------------- */
.proof-strip {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px 34px;
	padding: 22px 30px;
	margin-bottom: 8px;
	border: 1px solid var(--line);
	border-radius: 100px;
	background: var(--card);
}

.proof-strip .proof-item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14.5px;
	font-weight: 500;
}

.proof-strip .proof-item i {
	color: var(--ink);
	font-size: 14px;
}

@media (max-width: 860px) {
	.proof-strip {
		border-radius: var(--r);
		padding: 20px 22px;
		gap: 12px 22px;
	}

	.proof-strip .proof-item {
		font-size: 13.5px;
	}
}

/* --------------------------------------------------------------------------
   7. CASE STUDIES

   The structure that converts, per the research: frame the problem, show
   the process, state what shipped, then offer an onward journey.
   -------------------------------------------------------------------------- */
.case-hero {
	padding-top: 56px;
	padding-bottom: 20px;
}

.case-head {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	gap: 48px;
	align-items: start;
}

.case-title {
	margin: 0 0 18px;
}

.case-summary {
	max-width: 56ch;
	font-size: 18.5px;
	line-height: 1.6;
	color: var(--muted);
	margin: 0 0 28px;
}

.case-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
}

.case-facts {
	display: grid;
	gap: 18px;
	margin: 0;
	padding: 30px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--card);
}

.case-facts dt {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
	margin-bottom: 5px;
}

.case-facts dd {
	margin: 0;
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.5;
}

.case-shot {
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--card);
}

.case-shot img {
	display: block;
	width: 100%;
	height: auto;
}

.case-body {
	padding-top: 72px;
	padding-bottom: 20px;
}

.case-block {
	max-width: 940px;
	margin: 0 auto 68px;
}

.case-block h2 {
	margin: 0 0 20px;
}

.case-lead {
	font-size: 18px;
	line-height: 1.75;
	color: var(--muted);
	margin: 0;
}

.case-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 4px;
}

.case-steps li {
	display: grid;
	grid-template-columns: 62px 1fr;
	gap: 20px;
	align-items: start;
	padding: 24px 0;
	border-top: 1px solid var(--line);
}

.case-steps li:last-child {
	border-bottom: 1px solid var(--line);
}

.case-step-n {
	font-size: 15px;
	font-weight: 600;
	color: var(--muted);
	letter-spacing: 0.04em;
}

.case-steps li p {
	margin: 0;
	font-size: 16.5px;
	line-height: 1.7;
}

.case-cols {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 48px;
}

.case-ticks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 13px;
}

.case-ticks li {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 12px;
	align-items: start;
	font-size: 16px;
	line-height: 1.6;
}

.case-ticks li i {
	margin-top: 4px;
	color: var(--ink);
	font-size: 15px;
}

.case-ticks.two-col {
	grid-template-columns: 1fr 1fr;
	gap: 14px 40px;
}

/* Only rendered when a project has real, client-confirmed figures. */
.case-results {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 24px;
	max-width: 940px;
	margin: 0 auto 68px;
	padding: 40px;
	border-radius: var(--r);
	background: var(--blue);
}

.case-result-n {
	font-size: 44px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.case-results p {
	margin: 8px 0 0;
	font-size: 14.5px;
	color: var(--muted);
}

.case-quote {
	max-width: 940px;
	margin: 0 auto 40px;
	padding: 44px;
	border-radius: var(--r);
	background: var(--ink);
	color: #fff;
}

.case-quote .stars {
	margin-bottom: 18px;
	color: var(--lime);
}

.case-quote p {
	margin: 0 0 26px;
	font-size: 21px;
	line-height: 1.6;
	font-weight: 300;
}

.case-quote footer {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 15px;
}

.case-quote footer small {
	color: rgba(255, 255, 255, 0.62);
	font-size: 13.5px;
}

.case-next {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	padding: 30px 36px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--card);
}

.case-next-link {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-decoration: none;
	color: var(--ink);
}

.case-next-link span {
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
}

.case-next-link b {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 22px;
	font-weight: 500;
}

.case-next-link:hover b i {
	transform: translateX(5px);
}

.case-next-link b i {
	font-size: 16px;
	transition: transform 0.22s ease;
}

.case-next-all {
	font-size: 14.5px;
	color: var(--muted);
	text-decoration: none;
	border-bottom: 1px solid var(--line);
}

.case-next-all:hover {
	color: var(--ink);
	border-bottom-color: var(--ink);
}

@media (max-width: 960px) {
	.case-head,
	.case-cols {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.case-ticks.two-col {
		grid-template-columns: 1fr;
	}

	.case-body {
		padding-top: 52px;
	}

	.case-block {
		margin-bottom: 52px;
	}

	.case-quote {
		padding: 32px 26px;
	}

	.case-quote p {
		font-size: 18px;
	}

	.case-results {
		padding: 30px 26px;
	}

	.case-steps li {
		grid-template-columns: 44px 1fr;
		gap: 14px;
	}
}

/* --------------------------------------------------------------------------
   8. SERVICE LANDING PAGES
   -------------------------------------------------------------------------- */
.svc-page-hero {
	padding-top: 56px;
	padding-bottom: 8px;
}

.svc-page-head {
	max-width: 780px;
}

.svc-page-head .ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	margin-bottom: 26px;
	border-radius: 20px;
	background: var(--blue);
	font-size: 24px;
}

.svc-page-tagline {
	font-size: 20px;
	line-height: 1.6;
	color: var(--muted);
	margin: 16px 0 30px;
}

.svc-page-body {
	padding-top: 56px;
	padding-bottom: 20px;
}

.svc-page-block {
	max-width: 940px;
	margin: 0 auto 64px;
}

.svc-page-block h2 {
	margin: 0 0 22px;
}

.svc-problem {
	padding: 38px 40px;
	border-radius: var(--r);
	background: var(--blue);
}

.svc-problem h2 {
	margin-bottom: 14px;
}

.svc-problem p {
	margin: 0;
	font-size: 17px;
	line-height: 1.75;
}

.svc-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 24px;
}

.svc-step {
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--card);
}

.svc-step .n {
	display: block;
	margin-bottom: 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--muted);
}

.svc-step h3 {
	margin: 0 0 10px;
	font-size: 18px;
}

.svc-step p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--muted);
}

.related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 26px;
}

.svc-other {
	padding: 36px 40px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--card);
}

.svc-other h2 {
	margin: 0 0 22px;
	font-size: 26px;
}

.svc-other-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.svc-other-list a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 20px;
	border: 1px solid var(--line);
	border-radius: 100px;
	font-size: 14.5px;
	color: var(--ink);
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.svc-other-list a:hover {
	background: var(--blue);
	border-color: var(--blue);
}

.svc-other-list a i {
	font-size: 13px;
	color: var(--muted);
}

/* Services index rows */
.svc-row-left {
	display: flex;
	align-items: center;
	gap: 18px;
}

.svc-row-left .num {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--muted);
}

.svc-row-left .ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 18px;
	background: var(--blue);
	font-size: 20px;
}

.svc-row-body h2 {
	margin: 0 0 8px;
	font-size: 30px;
}

.svc-row-body h2 a {
	color: var(--ink);
	text-decoration: none;
}

.svc-row-body h2 a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.svc-row-tagline {
	margin: 0 0 14px;
	font-size: 17px;
	font-weight: 500;
}

.svc-row-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--ink);
	padding-bottom: 2px;
}

.svc-row-link i {
	font-size: 12px;
	transition: transform 0.22s ease;
}

.svc-row-link:hover i {
	transform: translateX(4px);
}

@media (max-width: 960px) {
	.svc-page-body {
		padding-top: 44px;
	}

	.svc-page-block {
		margin-bottom: 48px;
	}

	.svc-problem,
	.svc-other {
		padding: 28px 24px;
	}

	.svc-page-tagline {
		font-size: 17.5px;
	}

	.svc-row-body h2 {
		font-size: 25px;
	}
}

/* --------------------------------------------------------------------------
   9. PRICING PAGE

   style.css scopes the two-card layout to #pricing (the home page). The
   pricing page has three tiers and is not inside #pricing, so it gets its
   own responsive rule here.
   -------------------------------------------------------------------------- */
:not(#pricing) > .price-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 26px;
	align-items: start;
}

.price-terms {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 26px;
	margin-top: 34px;
	padding: 34px 38px;
	border-radius: var(--r);
	background: var(--blue);
}

.price-terms h3 {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0 0 10px;
	font-size: 16.5px;
}

.price-terms h3 i {
	font-size: 15px;
}

.price-terms p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--muted);
}

@media (max-width: 860px) {
	.price-terms {
		padding: 26px 24px;
	}
}

/* --------------------------------------------------------------------------
   10. THANK-YOU + 404
   -------------------------------------------------------------------------- */
.ty-card {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
	padding: 56px 48px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--card);
}

.ty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	margin-bottom: 28px;
	border-radius: 50%;
	background: var(--lime);
	font-size: 30px;
}

.ty-icon-warn {
	background: var(--blue);
}

.ty-card h1 {
	margin: 0 0 16px;
}

.ty-lead {
	margin: 0 0 40px;
	font-size: 17.5px;
	line-height: 1.7;
	color: var(--muted);
}

.ty-next,
.ty-links {
	padding-top: 34px;
	margin-top: 34px;
	border-top: 1px solid var(--line);
}

.ty-next h2,
.ty-links h2 {
	margin: 0 0 10px;
	font-size: 20px;
}

.ty-next p {
	margin: 0 0 22px;
	color: var(--muted);
	font-size: 15px;
}

.ty-links ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 11px;
}

.ty-links a {
	font-size: 15.5px;
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--line);
}

.ty-links a:hover {
	border-bottom-color: var(--ink);
}

@media (max-width: 640px) {
	.ty-card {
		padding: 40px 24px;
	}
}

/* --------------------------------------------------------------------------
   11. LEGAL PAGES
   -------------------------------------------------------------------------- */
.legal-wrap {
	padding-bottom: 80px;
}

.legal {
	max-width: 780px;
	margin: 0 auto;
}

.legal h2 {
	margin: 44px 0 14px;
	font-size: 22px;
}

.legal h2:first-child {
	margin-top: 0;
}

.legal p {
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 1.75;
	color: var(--muted);
}

.legal a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   12. FOOTER ADDITIONS
   -------------------------------------------------------------------------- */
.foot-nap {
	margin-top: 26px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.13);
	font-size: 14px;
	line-height: 1.7;
}

.foot-nap p {
	margin: 0 0 8px;
}

.foot-nap-name {
	font-weight: 600;
}

.foot-license {
	font-size: 13px;
	opacity: 0.72;
}

.pay-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 24px;
}

.pay-label {
	width: 100%;
	margin-bottom: 4px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.6;
}

.pay-chip {
	padding: 6px 13px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 100px;
	font-size: 12.5px;
}

.foot-legal {
	display: inline-flex;
	gap: 20px;
}

/* --------------------------------------------------------------------------
   13. LINKED SERVICE CARDS + FORM PROMISE

   The home page service cards became <a> elements so each one leads to its
   own landing page. Anchors bring a default underline and colour with them,
   so those are reset here and replaced with a proper card affordance.
   -------------------------------------------------------------------------- */
a.svc-card {
	display: block;
	color: inherit;
	text-decoration: none;
	transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

a.svc-card h3,
a.svc-card p,
a.svc-card .num {
	text-decoration: none;
	color: inherit;
}

a.svc-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 40px rgba(11, 11, 11, 0.08);
}

a.svc-card:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 4px;
}

/* Card-wide links need an explicit cue that they are clickable, since the
   text itself no longer carries one. */
a.svc-card h3::after {
	content: ' \2192';
	display: inline;
	opacity: 0;
	transition: opacity 0.2s ease;
}

a.svc-card:hover h3::after {
	opacity: 1;
}

/* The response guarantee under the submit button. This single line is the
   strongest differentiator on the page: most agencies in this market reply
   in days, so saying "hours" out loud where the decision happens matters. */
.form-promise {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 16px 0 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--muted);
}

.form-promise a {
	color: var(--muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.form-promise a:hover {
	color: var(--ink);
}

/* Testimonial attributions now link to the matching case study, which is
   where a persuaded reader wants to go next. */
.testi-who small a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.testi-who small a:hover {
	color: var(--ink);
}

/* --------------------------------------------------------------------------
   14. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.wa-float,
	.case-next-link b i,
	.svc-row-link i,
	.trust-call,
	.svc-other-list a,
	a.svc-card {
		transition: none;
	}

	.wa-float:hover,
	a.svc-card:hover {
		transform: none;
	}
}