/* ==========================================================================
   DiskAnalyst — Data Recovery Lab
   Base styles: mobile-first, minimal dependencies, CSS custom properties.
   ========================================================================== */

:root {
	--color-black: #0b0b0b;
	--color-black-soft: #161616;
	--color-red: #e10600;
	--color-red-dark: #b30500;
	--color-white: #ffffff;
	--color-off-white: #f7f7f7;
	--color-gray-100: #f1f1f1;
	--color-gray-300: #d8d8d8;
	--color-gray-500: #8a8a8a;
	--color-gray-700: #4a4a4a;
	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--container-width: 1200px;
	--radius: 6px;
	--radius-lg: 14px;
	--shadow-card: 0 2px 10px rgba(0, 0, 0, 0.07);
	--shadow-card-hover: 0 10px 24px rgba(0, 0, 0, 0.12);
	--transition: 150ms ease;
}

* , *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-sans);
	color: var(--color-black);
	background: var(--color-white);
	line-height: 1.55;
	font-size: 16px;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.2; font-weight: 700; }
p { margin: 0 0 1em; }
button { font-family: inherit; cursor: pointer; }

.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 20px;
}
.container--narrow { max-width: 800px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
	white-space: nowrap;
}
.skip-link {
	position: absolute;
	top: -50px;
	inset-inline-start: 0;
	background: var(--color-red);
	color: #fff;
	padding: 10px 16px;
	z-index: 1000;
	transition: top var(--transition);
}
.skip-link:focus {
	position: fixed;
	top: 0;
	width: auto;
	height: auto;
	clip: auto;
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 13px 22px;
	border-radius: var(--radius);
	font-weight: 600;
	font-size: 15px;
	border: 2px solid transparent;
	transition: background var(--transition), color var(--transition), border-color var(--transition);
	white-space: nowrap;
}
.btn--primary { background: var(--color-red); color: #fff; }
.btn--primary:hover { background: var(--color-red-dark); }
.btn--outline { background: transparent; color: var(--color-black); border-color: var(--color-black); }
.btn--outline:hover { background: var(--color-black); color: #fff; }
.section--dark .btn--outline,
.hero .btn--outline,
.page-hero .btn--outline { border-color: #fff; color: #fff; }
.section--dark .btn--outline:hover,
.hero .btn--outline:hover,
.page-hero .btn--outline:hover { background: #fff; color: var(--color-black); }

.check-list li {
	position: relative;
	padding-inline-start: 28px;
	margin-bottom: 10px;
}
.check-list li::before {
	content: "\2713";
	position: absolute;
	inset-inline-start: 0;
	color: var(--color-red);
	font-weight: 700;
}

.section { padding: 56px 0; }
.section--dark { background: var(--color-black); color: #fff; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--tight-bottom { padding-bottom: 0; }

.section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
}
.section__head-link { color: var(--color-red); font-weight: 600; font-size: 14px; }

/* ==========================================================================
   Top bar
   ========================================================================== */
.top-bar { background: var(--color-black); color: #cfcfcf; font-size: 13px; }
.top-bar__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	align-items: center;
	justify-content: space-between;
	padding: 8px 20px;
}
.top-bar__tagline { margin: 0; color: #fff; font-weight: 500; }
.top-bar__contacts { display: flex; flex-wrap: wrap; gap: 16px; }
.top-bar__contacts a { color: #cfcfcf; }
.top-bar__contacts a:hover { color: #fff; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	background: #fff;
	border-bottom: 1px solid var(--color-gray-100);
	position: sticky;
	top: 0;
	z-index: 100;
}
.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding: 14px 20px;
}
.site-logo { display: flex; align-items: center; gap: 10px; margin-inline-end: auto; }
.site-logo img,
.custom-logo { max-height: 48px; width: auto; }
@media (min-width: 900px) {
	.site-logo img,
	.custom-logo { max-height: 56px; }
}
.site-logo__name { display: block; font-size: 20px; font-weight: 700; color: var(--color-black); letter-spacing: 0.5px; }
.site-logo__name strong { color: var(--color-red); }
.site-logo__tag { display: block; font-size: 10px; letter-spacing: 2px; color: var(--color-gray-500); font-weight: 600; }

.nav-toggle {
	background: none;
	border: none;
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	order: 3;
}
.nav-toggle__bar { width: 24px; height: 2px; background: var(--color-black); display: block; }

.primary-nav {
	order: 4;
	flex-basis: 100%;
	display: none;
}
.primary-nav.is-open { display: block; padding-bottom: 12px; }
.primary-nav__list { display: flex; flex-direction: column; }
.primary-nav__list li { border-top: 1px solid var(--color-gray-100); }
.primary-nav__list a { display: block; padding: 12px 4px; font-weight: 600; font-size: 15px; }
.primary-nav__list a:hover,
.primary-nav__list .current-menu-item > a { color: var(--color-red); }

/* Desktop-row CTA: hidden on mobile (see "Mobile header" section below,
   which is the one place that governs which of the two CTAs — this one or
   .mobile-nav__cta inside the nav panel — is visible at a given width). */
.site-header__cta { display: none; padding: 10px 16px; font-size: 14px; }

@media (min-width: 900px) {
	.site-header__inner { flex-wrap: nowrap; }
	.nav-toggle { display: none; }
	.primary-nav { order: 2; flex-basis: auto; display: block; }
	.primary-nav__list { flex-direction: row; gap: 26px; }
	.primary-nav__list li { border-top: none; }
	.primary-nav__list a {
		padding: 6px 0;
		position: relative;
	}
	.primary-nav__list a::after {
		content: "";
		position: absolute;
		left: 0; right: 0; bottom: -2px;
		height: 2px;
		background: var(--color-red);
		transform: scaleX(0);
		transition: transform var(--transition);
	}
	.primary-nav__list a:hover::after,
	.primary-nav__list .current-menu-item > a::after { transform: scaleX(1); }
	.site-header__cta { display: inline-flex; order: 4; padding: 13px 22px; }
}

/* ==========================================================================
   Mobile header: CTA moved out of the closed logo/toggle row
   ========================================================================== */
/* Closed mobile header is just logo + toggle — .mobile-nav__cta lives
   inside #primary-menu (the same element .is-open toggles), so it shows
   and hides with the panel automatically. Full-width, placed after the nav
   links. Hidden at the desktop breakpoint, where .site-header__cta (above)
   is the one CTA shown instead — see that rule's comment. */
.mobile-nav__cta {
	display: flex;
	justify-content: center;
	width: 100%;
	margin: 16px 0 4px;
}
@media (min-width: 900px) {
	.mobile-nav__cta { display: none; }
}

/* ==========================================================================
   Language switcher (Phase 4)
   ========================================================================== */
/* Two independent renderings of the same server-resolved links (see
   inc/language-switcher.php) -- .lang-switch--desktop sits inline in the
   closed header row (desktop only), .lang-switch--mobile lives inside the
   collapsible #primary-menu panel (mobile only), mirroring exactly how
   .site-header__cta / .mobile-nav__cta already split the same CTA button
   between the two layouts. Deliberately plain and small -- text links only,
   no flags, no dropdown -- so it reads as a restrained utility control, not
   another nav item competing with Home/Services/etc. */
/* direction: ltr pins this control's own internal layout so it always
   reads "EN | اردو" in that fixed left-to-right order on both the English
   and Urdu site -- the switcher is a small utility control naming two
   fixed language options, not flowing Urdu content, so keeping its order
   stable regardless of the surrounding page direction (Phase 5) avoids it
   silently re-ordering to "اردو | EN" once the page itself becomes RTL.
   The Urdu label glyphs render correctly regardless of container
   direction; only run-ordering is affected by dir, and each label here is
   a single run. Phase 4's link markup, URLs and current-language logic
   are unchanged -- this is a style-only addition. */
.lang-switch { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; direction: ltr; }
.lang-switch__link { color: var(--color-gray-500); padding: 4px 2px; }
.lang-switch__link:hover { color: var(--color-black); }
.lang-switch__link.is-current { color: var(--color-black); text-decoration: underline; text-decoration-color: var(--color-red); text-underline-offset: 3px; }
.lang-switch__sep { color: var(--color-gray-300); }

.lang-switch--desktop { display: none; }
@media (min-width: 900px) {
	.lang-switch--desktop { display: flex; order: 3; margin: 0 2px; }
}

.lang-switch--mobile {
	border-top: 1px solid var(--color-gray-100);
	padding: 14px 4px 2px;
	font-size: 15px;
}
.lang-switch--mobile .lang-switch__link { padding: 10px 6px; }
@media (min-width: 900px) {
	.lang-switch--mobile { display: none; }
}

/* Top contact bar: shorter and cleaner-wrapping on narrow phones. The
   tagline is decorative, not one of the items the mobile layout needs to
   keep visible, so it's dropped first to save a full row of height. */
@media (max-width: 480px) {
	.top-bar { font-size: 12px; }
	.top-bar__inner { padding: 6px 16px; gap: 4px 12px; }
	.top-bar__tagline { display: none; }
	.top-bar__contacts { gap: 6px 12px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { background: var(--color-black); color: #fff; padding: 48px 0; }
.hero__inner { display: grid; gap: 32px; align-items: center; }
.hero__headline { font-size: 40px; margin-bottom: 14px; }
.text-accent { color: var(--color-red); }
.hero__subhead { font-size: 18px; font-weight: 600; margin-bottom: 12px; }
.hero__text { color: #cfcfcf; max-width: 52ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 14px 22px; font-size: 13px; color: #cfcfcf; }
.hero__trust li::before { content: "\2022"; color: var(--color-red); margin-inline-end: 6px; }
.hero__media { display: none; }
.hero__media-frame {
	position: relative;
	aspect-ratio: 4/3;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-image: linear-gradient(160deg, rgba(11, 11, 11, 0.35), rgba(11, 11, 11, 0.75)), url("../images/stock/hero-data-recovery-2026.webp");
	background-size: cover;
	background-position: center;
	border: 1px solid #2a2a2a;
	box-shadow: var(--shadow-card);
}
/* Deliberately kept physical (not right -> inset-inline-end / text-align:
   right -> end): this caption is composed against a specific spot in the
   hero photograph (assets/images/stock/hero-data-recovery-2026.webp), and the
   image itself is never mirrored under RTL (see main.css's RTL notes and
   Phase 5 brief -- "do not mirror photographic imagery unless the
   composition actually requires it"). Converting this to a logical
   property would flip the caption to the opposite corner of an unflipped
   photo, which would look broken rather than correct in Urdu. */
.hero__caption {
	position: absolute;
	right: 20px;
	bottom: 18px;
	max-width: 60%;
	text-align: right;
	color: #fff;
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: 18px;
	line-height: 1.3;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.hero__caption span { display: block; }
.hero__caption .text-accent { font-style: normal; text-decoration: underline; text-decoration-color: var(--color-red); }

@media (min-width: 860px) {
	.hero__inner { grid-template-columns: 1.1fr 0.9fr; }
	.hero__headline { font-size: 56px; }
	.hero__media { display: block; }
	.hero__media-frame { aspect-ratio: 5/4; }
}

/* ==========================================================================
   Card grids / services
   ========================================================================== */
/* Base is a single column below 375px: at 2 columns the narrowest phones
   (320–360px) don't have room for these cards' title+description content
   without forcing tiny text or ugly mid-word wrapping, so the cleanest fix
   is to stack them instead of shrinking them. From 375px up this is
   unchanged from before. minmax(0, 1fr) (rather than a bare 1fr) is used
   everywhere below as a second, defensive layer: a plain `1fr` grid track
   can still be forced wider than its share by a single long unbreakable
   word, which is exactly what caused the 320px horizontal-overflow bug
   this fixes — minmax(0, 1fr) lets a track shrink past its content's
   min-content width instead of blowing out the grid.
*/
.card-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.card-grid--3 { grid-template-columns: minmax(0, 1fr); }
.card-grid--4 { grid-template-columns: minmax(0, 1fr); }
.card-grid--6 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 375px) {
	.card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.card-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.card-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 640px) {
	.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.card-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.card-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
	.card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.card-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.service-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-align: center;
	min-height: 120px;
	padding: 22px 14px;
	border: 1px solid var(--color-gray-100);
	border-radius: var(--radius-lg);
	background: #fff;
	box-shadow: var(--shadow-card);
	font-weight: 600;
	font-size: 14px;
	transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.service-card:hover { border-color: var(--color-red); transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.service-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--color-off-white);
	color: var(--color-red);
}
.service-card__icon svg { width: 22px; height: 22px; }

/* Photo-fronted service cards (Phase 8 image refresh). Illustrative,
   AI-generated/stock device imagery -- see assets/images/services/SOURCES.md.
   Falls back to the plain icon card above when a slug has no photo. */
.service-card--photo {
	padding: 0 0 18px;
	justify-content: flex-start;
	overflow: hidden;
}
.service-card__photo {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--color-off-white);
}
.service-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.service-card--photo .service-card__body {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px 14px 0;
}

/* Single supporting photo on an individual service page (Phase 8 image
   rollout) -- one modest image near the intro, not scattered decoration. */
.service-detail__photo {
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 320px;
	overflow: hidden;
	border-radius: var(--radius-lg);
	margin: 20px 0 28px;
	background: var(--color-off-white);
}
.service-detail__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.info-card {
	display: block;
	padding: 24px;
	border: 1px solid var(--color-gray-100);
	border-radius: var(--radius);
	transition: border-color var(--transition), transform var(--transition);
}
.info-card:hover { border-color: var(--color-red); transform: translateY(-2px); }
.info-card__title { font-size: 18px; margin-bottom: 8px; }
.info-card__desc { color: var(--color-gray-700); font-size: 14px; }
.info-card__link { color: var(--color-red); font-weight: 600; font-size: 14px; }

/* Services-index photo cards -- reuses .service-card__photo (defined above)
   for the image itself, so there is one photo-rendering rule for both grids. */
.info-card--photo { padding: 0; overflow: hidden; }
.info-card--photo .info-card__body { padding: 18px 24px 24px; }
.info-card--compact { text-align: center; }

/* ==========================================================================
   How it works
   ========================================================================== */
.how-it-works__grid { display: grid; gap: 32px; }
.steps { display: grid; gap: 22px; margin-top: 20px; }
.steps__item { display: flex; gap: 14px; }
.steps__num {
	position: relative;
	flex: none;
	width: 46px; height: 46px;
	border-radius: 50%;
	background: var(--color-red);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700;
}
.steps__num svg { width: 22px; height: 22px; }
.steps__num em {
	position: absolute;
	top: -6px; inset-inline-end: -6px;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--color-black);
	border: 2px solid var(--color-black);
	color: #fff;
	font-style: normal;
	font-size: 11px;
	font-weight: 700;
	display: flex; align-items: center; justify-content: center;
}
.section--dark .steps__num em { border-color: var(--color-black-soft); }
.steps__item h3, .steps__item h2 { font-size: 17px; margin-bottom: 4px; }
.steps__item p { color: #cfcfcf; margin: 0; font-size: 14px; }
.how-it-works__aside {
	background: var(--color-black-soft);
	border: 1px solid #262626;
	border-radius: var(--radius-lg);
	padding: 24px;
}
.how-it-works__aside p { color: #cfcfcf; }
.steps--compact { gap: 12px; }
.steps--compact li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; margin-bottom: 0; padding-left: 0; }
.steps--compact li::before { content: none; }
.steps--compact .steps__num { width: 26px; height: 26px; font-size: 13px; }
.steps--page { gap: 32px; }

@media (min-width: 860px) {
	.how-it-works__grid { grid-template-columns: 1.3fr 0.7fr; }
}

/* ==========================================================================
   Symptoms + Why us
   ========================================================================== */
.symptoms-why__grid { display: grid; gap: 40px; }
/* Symptom labels here run up to ~38 characters ("Array not recognized after
   power loss") — at 2 columns that doesn't fit in a 320px viewport without
   tiny text or ugly mid-word wraps, so this collapses to 1 column below
   375px, same as .card-grid above. minmax(0, 1fr) is used at every
   breakpoint as the same defensive second layer described there. */
.icon-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; }
@media (min-width: 375px) { .icon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px) { .icon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .icon-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .icon-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.icon-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
	min-height: 100px;
	padding: 16px 10px;
	border: 1px solid var(--color-gray-100);
	border-radius: var(--radius-lg);
	background: #fff;
	box-shadow: var(--shadow-card);
	font-size: 13px;
	font-weight: 600;
	transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.icon-card:hover { border-color: var(--color-red); color: var(--color-red); box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.icon-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	border-radius: 50%;
	background: var(--color-off-white);
	color: var(--color-red);
}
.icon-card__icon svg { width: 18px; height: 18px; }

.why-us__grid { display: grid; gap: 20px; margin-top: 16px; }
.why-us__media {
	display: none;
	border-radius: var(--radius-lg);
	background-image: linear-gradient(160deg, rgba(11, 11, 11, 0.55), rgba(11, 11, 11, 0.8)), url("../images/stock/why-diskanalyst-recovery-2026.webp");
	background-size: cover;
	background-position: center;
	min-height: 220px;
	box-shadow: var(--shadow-card);
}

@media (min-width: 640px) {
	.why-us__grid { grid-template-columns: 1fr 0.8fr; align-items: stretch; }
	.why-us__media { display: block; }
}

@media (min-width: 960px) {
	.symptoms-why__grid { grid-template-columns: 1.4fr 0.6fr; }
}

/* ==========================================================================
   Device strip
   ========================================================================== */
.device-strip__list {
	display: grid;
	/* Device labels are short ("Desktop HDD", "SATA SSD"), so this grid isn't
	   part of the confirmed 320px overflow bug and its column counts are left
	   unchanged (homepage layout, out of scope). minmax(0, 1fr) is added only
	   as the same defensive safety net used elsewhere: it can never force
	   overflow, but a bare 1fr track theoretically still could. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-top: 20px;
}
@media (min-width: 640px) { .device-strip__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 960px) { .device-strip__list { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.device-chip {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
	padding: 14px 8px;
	border: 1px solid #262626;
	border-radius: var(--radius-lg);
	background: var(--color-black-soft);
	font-size: 12px;
	font-weight: 600;
	color: #e6e6e6;
	transition: border-color var(--transition), transform var(--transition);
}
.device-chip:hover { border-color: var(--color-red); color: #fff; transform: translateY(-2px); }
.device-chip__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: rgba(225, 6, 0, 0.12);
	color: var(--color-red);
}
.device-chip__icon svg { width: 17px; height: 17px; }

/* ==========================================================================
   Business strip
   ========================================================================== */
.business-strip {
	position: relative;
	color: #fff;
	background-image: linear-gradient(115deg, rgba(11, 11, 11, 0.94) 40%, rgba(179, 5, 0, 0.55)), url("../images/stock/business-it-recovery-2026.webp");
	background-size: cover;
	background-position: center;
}
.business-strip h2, .business-strip h3 { color: #fff; }
.business-strip p { color: #d8d8d8; }
.business-strip__grid { display: grid; gap: 24px; }
.business-strip__audience { display: grid; gap: 10px; }
.business-strip__audience li {
	padding: 10px 14px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius);
	font-weight: 600;
	font-size: 14px;
}
.business-strip__stories {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--radius-lg);
	padding: 22px;
}
.business-strip__stories h3 { font-size: 18px; margin-bottom: 8px; }
.business-strip__stories p { font-size: 14px; margin-bottom: 12px; }
.business-strip__stories-link { display: inline-block; font-weight: 600; color: #fff; border-bottom: 2px solid var(--color-red); padding-bottom: 2px; }
@media (min-width: 900px) {
	.business-strip__grid { grid-template-columns: 1.4fr 0.8fr 0.8fr; }
}

.business-cta__inner { text-align: center; }
.business-cta .btn { margin-top: 14px; }

/* ==========================================================================
   FAQ / Form / Contact row
   ========================================================================== */
.faq-form-contact__grid { display: grid; gap: 36px; }
@media (min-width: 1000px) {
	.faq-form-contact__grid { grid-template-columns: 1fr 1.2fr 0.9fr; }
}

.faq-accordion { border-top: 1px solid var(--color-gray-100); }
.faq-item { border-bottom: 1px solid var(--color-gray-100); }
.faq-item__question {
	width: 100%;
	background: none;
	border: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 14px 0;
	text-align: start;
	font-weight: 600;
	font-size: 14px;
}
.faq-item__icon { color: var(--color-red); font-size: 18px; flex: none; }
.faq-item__answer { padding: 0 0 16px; color: var(--color-gray-700); font-size: 14px; }

.case-form__row { display: grid; gap: 12px; margin-bottom: 12px; }
@media (min-width: 480px) { .case-form__row { grid-template-columns: 1fr 1fr; } }
.case-form__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.case-form label { font-size: 13px; font-weight: 600; }
.req { color: var(--color-red); }
.case-form input,
.case-form select,
.case-form textarea {
	padding: 10px 12px;
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius);
	font-family: inherit;
	font-size: 14px;
	width: 100%;
}
.case-form input:focus,
.case-form select:focus,
.case-form textarea:focus {
	outline: 2px solid var(--color-red);
	outline-offset: 1px;
}
.case-form__submit { width: 100%; justify-content: center; margin-top: 8px; }
.case-form__notice { padding: 10px 14px; border-radius: var(--radius); font-size: 14px; margin-bottom: 14px; }
.case-form__notice--success { background: #eafaf0; color: #1c6b3a; }
.case-form__notice--error { background: #fdecea; color: var(--color-red-dark); }
.case-form__notice--error ul { list-style: disc; margin-block: 8px 0; margin-inline-start: 18px; margin-inline-end: 0; padding: 0; }
.case-form__notice--error a { color: var(--color-red-dark); text-decoration: underline; }
.case-form__field-error { color: var(--color-red-dark); font-size: 12px; font-weight: 600; }
.case-form input[aria-invalid="true"],
.case-form select[aria-invalid="true"],
.case-form textarea[aria-invalid="true"] { border-color: var(--color-red); }

.contact-details { display: grid; gap: 16px; }
.contact-details__label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--color-gray-500); margin-bottom: 2px; }
.contact-details a { font-weight: 600; }
.contact-details__directions { display: inline-block; margin-top: 6px; color: var(--color-red); font-weight: 600; font-size: 13px; }

/* ==========================================================================
   Page hero (interior pages)
   ========================================================================== */
.page-hero { background: var(--color-black); color: #fff; padding: 40px 0; }
.page-hero h1 { margin-bottom: 8px; }
.page-hero p { color: #cfcfcf; margin: 0; max-width: 60ch; }
.breadcrumb { font-size: 13px; color: #b8b8b8; margin-bottom: 10px; }
.breadcrumb a { color: #b8b8b8; }
.breadcrumb a:hover { color: #fff; }

.service-detail__grid { display: grid; gap: 32px; }
.service-detail__intro { font-size: 17px; }
.service-detail__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.service-detail__aside {
	background: var(--color-off-white);
	border-radius: var(--radius);
	padding: 22px;
	align-self: start;
}
.related-list li { margin-bottom: 8px; }
.related-list a { color: var(--color-red); font-weight: 600; font-size: 14px; }
@media (min-width: 900px) {
	.service-detail__grid { grid-template-columns: 1.6fr 0.9fr; }
}

.callout { background: var(--color-off-white); border-inline-start: 3px solid var(--color-red); padding: 16px 20px; border-radius: var(--radius); margin: 24px 0; }
.placeholder-note { color: var(--color-gray-500); }

/* Phase 8B: marked image slots for the Laboratory page -- a deliberate
   placeholder for real DiskAnalyst lab photography to be dropped in later,
   not a filled-in fake photo. Dashed border signals "not final content"
   at a glance; RTL-safe via logical properties, same convention as
   .callout above. */
.image-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 180px;
	padding: 24px;
	border: 2px dashed var(--color-gray-300, #cbd5d1);
	border-radius: var(--radius);
	background: var(--color-off-white);
	color: var(--color-gray-500);
	text-align: center;
}
.image-slot__icon { opacity: 0.5; }
.image-slot__label { font-size: 14px; font-weight: 600; }
.image-slot__caption { font-size: 12px; color: var(--color-gray-500); max-width: 32ch; }
.image-slot-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin: 24px 0; }
@media (min-width: 640px) {
	.image-slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Service page hero: icon + short value prop + CTAs, and the warnings
   callout / static (non-link) icon and device chips used on the four
   expanded service pages. Guarded by the template so pages without this
   data render exactly as before. */
.page-hero__head { display: flex; align-items: center; gap: 12px; }
.page-hero__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: rgba(225, 6, 0, 0.16);
	color: var(--color-red);
}
.page-hero__icon svg { width: 22px; height: 22px; }
.page-hero__lead { font-size: 16px; }
.page-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

.callout__title { display: flex; align-items: center; gap: 8px; font-size: 17px; margin-bottom: 12px; }
.callout__title svg { width: 20px; height: 20px; color: var(--color-red); flex: none; }
.callout__list { display: grid; gap: 10px; }
.callout__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.callout__list li svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--color-red); }

.icon-card--static, .device-chip--static { cursor: default; }
.icon-card--static:hover { border-color: var(--color-gray-100); color: inherit; box-shadow: var(--shadow-card); transform: none; }
.device-chip--static:hover { border-color: #262626; color: #e6e6e6; transform: none; }
.device-strip__list--light { background: none; }
/* ~130px/column at 2-col on a 320px viewport comfortably fits these short
   device labels, so column counts are unchanged here too — minmax(0, 1fr)
   only, as the same defensive safety net. */
.service-detail__main .device-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 480px) { .service-detail__main .device-strip__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 760px) { .service-detail__main .device-strip__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.about-content h2 { margin-top: 32px; }

.contact-page__grid { display: grid; gap: 32px; }
@media (min-width: 860px) { .contact-page__grid { grid-template-columns: 0.8fr 1.2fr; } }

.blog-list__item { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--color-gray-100); }
.blog-list__meta { color: var(--color-gray-500); font-size: 13px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--color-black); color: #cfcfcf; padding-top: 44px; }
.site-footer__inner { display: grid; gap: 28px; padding-bottom: 32px; border-bottom: 1px solid #262626; }
.site-footer__brand { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* Light chip behind the logo so its dark wordmark reads on the dark
   footer — the logo image itself is untouched (same asset as the header).
   Padding is kept tight and the radius modest so this reads as a small
   integrated patch behind the mark, not a floating card. Sized to stay
   on one line with the Facebook button down to the 1024px footer column
   width (see the 3-column grid below). */
.site-footer__logo {
	display: inline-flex;
	align-items: center;
	background: #fff;
	padding: 4px 8px;
	border-radius: 4px;
	line-height: 0;
}
.site-footer__logo img,
.site-footer__logo .custom-logo {
	height: 48px;
	width: auto;
	max-width: 220px;
	object-fit: contain;
	display: block;
}
.site-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid #333;
	color: #cfcfcf;
	flex: none;
	transition: border-color var(--transition), color var(--transition);
}
.site-footer__social-link svg { width: 20px; height: 20px; }
.site-footer__social-link:hover,
.site-footer__social-link:focus-visible { border-color: var(--color-red); color: #fff; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13px; }
.site-footer__links a:hover { color: #fff; }
.site-footer__meta { font-size: 13px; color: #a0a0a0; }
.site-footer__divider { height: 1px; background: var(--color-red); opacity: 0.6; }
.site-footer__bottom-inner {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
	padding: 18px 0; font-size: 12px; color: #8a8a8a;
}
.site-footer__motto { color: var(--color-red); font-weight: 600; margin: 0; }

@media (min-width: 720px) {
	.site-footer__inner { grid-template-columns: 1fr 2fr 1fr; align-items: start; }
}

/* ==========================================================================
   1.0.1 fixes
   ========================================================================== */
.site-logo { min-width: 0; }
.site-logo .custom-logo-link,
.site-logo__fallback { display: inline-flex; align-items: center; }
.site-logo .custom-logo,
.site-logo__fallback img {
	width: auto;
	height: 54px;
	max-width: min(330px, 42vw);
	object-fit: contain;
}
.case-form__hp {
	position: absolute !important;
	inset-inline-start: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}
@media (max-width: 899px) {
	.site-logo .custom-logo,
	.site-logo__fallback img { height: 44px; max-width: min(250px, 55vw); }
}


/* ==========================================================================
   Accessibility / interaction polish (v1.0.2)
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid rgba(225, 6, 0, 0.45);
	outline-offset: 3px;
}

.hero__media-frame { background-position: 52% center; }
.why-us__media { background-position: center center; }
.business-strip { background-position: center 45%; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   Urdu typography (Phase 6)
   ========================================================================== */
/* Font choice: Noto Naskh Arabic, chosen over Noto Nastaliq Urdu. Nastaliq
   is the more traditionally "Urdu" calligraphic style, but its diagonal,
   flowing letterforms need a much taller line-height (Google's own guidance
   recommends roughly double a normal Latin line-height) and don't compress
   well into compact single-line UI controls -- buttons, nav items, form
   labels, badges. That's a direct conflict with this being a dense,
   professional UI (nav, CTAs, cards, forms) rather than a long-form
   article/newspaper layout. Naskh is a much more horizontal, compact
   script -- closer to how Latin text behaves in a UI -- and is very
   commonly used for exactly this kind of technical/business Urdu
   interface. It's also the better fit for the long-form legal pages
   (Privacy Policy, Terms, Disclaimer, Data Confidentiality), since Naskh
   was historically developed for extended reading, unlike Nastaliq.
   Verified against the real UI in browser QA (see
   bilingual-implementation-status.md, Phase 6) before finalizing.

   Delivery: Google Fonts CDN (this build environment's outbound network
   is allowlisted and doesn't reach fonts.gstatic.com, so downloading the
   .woff2 files to self-host them wasn't possible here -- see
   header.php's Phase 6 comment). The <link> is only emitted on Urdu
   pages (guarded by `'ur' === $current_lang`), so English visitors make
   zero extra requests, and only the 4 weights actually used anywhere in
   this theme (400, 500, 600, 700) are requested -- not the full family.
   Google serves Noto Naskh Arabic pre-subset by script with its own
   unicode-range, so Latin characters (HDD, SSD, NAS, model numbers, etc.)
   are never painted by the Arabic glyph set -- they fall straight through
   to --font-sans in the stack below, exactly as needed for mixed
   Urdu/English technical strings. */
:root {
	--font-urdu: "Noto Naskh Arabic", var(--font-sans);
}

/* Single, minimal, locale-scoped hook: everything in the theme sets
   font-family via inheritance from <body> (headings have no explicit
   font-family of their own; buttons/inputs/selects/textareas already use
   font-family: inherit), so switching it once here is enough to retint
   the whole Urdu site without touching a single English rule. main.css
   is only enqueued on the public front end (never in wp-admin), so this
   selector has no reach into the admin UI regardless. Line-height is
   bumped from the site's 1.55 Latin default to give Urdu's taller
   ascenders/descenders comfortable room without clipping in any of the
   theme's padding-based (not fixed-height) buttons/cards/inputs. */
html[lang="ur-PK"] body {
	font-family: var(--font-urdu);
	line-height: 1.85;
}

html[lang="ur-PK"] h1,
html[lang="ur-PK"] h2,
html[lang="ur-PK"] h3,
html[lang="ur-PK"] h4 {
	/* The English 1.2 is too tight for Urdu's taller glyphs -- headings
	   were the most visible clipping risk found during QA. */
	line-height: 1.5;
}

/* Latin-style uppercase + tracked letter-spacing (used for the contact
   panel's small field labels) has no equivalent in Urdu: Urdu has no
   letter case, and letter-spacing actively breaks Arabic-script letter
   joining, so both are switched off wherever this label style renders
   translated Urdu text. */
html[lang="ur-PK"] .contact-details__label {
	text-transform: none;
	letter-spacing: 0;
}

/* The hero photo caption is deliberately kept as English-style decorative
   italic serif (Georgia) in Phase 5 for the LTR site, but Georgia has no
   Urdu glyphs and most Urdu typefaces have no true italic form -- forcing
   italic here risks a synthetic-oblique render of Urdu letterforms in
   browsers that fake it. On Urdu pages this caption switches to the Urdu
   font stack and drops the italic styling; its position/photo composition
   (Phase 5's deliberate non-mirroring) is unaffected. */
html[lang="ur-PK"] .hero__caption {
	font-family: var(--font-urdu);
	font-style: normal;
}