/*
 * DreamFast Studio — shared service-page template ([dfs_service_page]).
 * Deliberately modest vertical rhythm (48–72px) — the old generated pages
 * stacked ~120px paddings per block and produced huge blank gaps.
 */

/* ---------- Sections & headings ---------- */
.svc-section {
	padding-block: 28px;
}
.svc-section:last-of-type {
	padding-bottom: 84px;
}
.svc-section > h2 {
	color: #fff;
	letter-spacing: -0.025em;
	margin: 0 0 26px;
	font-size: clamp(26px, 3.4vw, 38px);
	line-height: 1.12;
	max-width: 21em;
}
.svc-note {
	color: rgb(150, 156, 146);
	max-width: 760px;
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.75;
}

/* ---------- Hero ---------- */
.svc-hero {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	align-items: center;
	gap: clamp(32px, 5vw, 72px);
	padding-block: clamp(48px, 7vw, 84px) clamp(36px, 5vw, 60px);
	display: grid;
}
.svc-hero-copy h1 {
	color: #fff;
	letter-spacing: -0.03em;
	margin: 14px 0 0;
	font-size: clamp(32px, 4.6vw, 54px);
	line-height: 1.06;
}
.svc-hero-copy h1 em {
	color: var(--lime);
	font-style: normal;
}
.svc-intro {
	color: rgb(196, 201, 191);
	max-width: 34em;
	margin: 20px 0 0;
	font-size: clamp(15px, 1.6vw, 17px);
	line-height: 1.8;
}
.svc-ctas {
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 28px;
	display: flex;
}

/* ---------- Hero visual: browser frame (+ optional phone) ---------- */
.svc-hero-visual {
	min-width: 0;
	position: relative;
}
.svc-browser-wrap {
	position: relative;
}
.svc-browser {
	background: rgb(24, 26, 23);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 16px;
	margin: 0;
	overflow: hidden;
	box-shadow: rgba(0, 0, 0, 0.45) 0 30px 70px -30px;
}
.svc-browser-bar {
	background: rgb(32, 34, 31);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 14px;
	display: flex;
	direction: ltr;
}
.svc-browser-bar i {
	background: rgba(255, 255, 255, 0.22);
	border-radius: 50%;
	flex: 0 0 8px;
	width: 8px;
	height: 8px;
}
.svc-browser-bar i:first-child {
	background: rgba(201, 255, 69, 0.75);
}
.svc-browser img {
	width: 100%;
	height: auto;
	display: block;
}
.svc-phone {
	background: rgb(24, 26, 23);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 18px;
	width: clamp(88px, 22%, 130px);
	margin: 0;
	padding: 6px;
	overflow: hidden;
	position: absolute;
	bottom: -26px;
	inset-inline-start: -18px;
	box-shadow: rgba(0, 0, 0, 0.5) 0 24px 50px -20px;
}
.svc-phone img {
	border-radius: 12px;
	width: 100%;
	height: auto;
	display: block;
}

/* ---------- Hero visual: before/after (wireframe vs. screenshot) ---------- */
.svc-ba {
	grid-template-columns: 0.82fr 1.18fr;
	align-items: center;
	gap: 18px;
	display: grid;
}
.svc-ba-old,
.svc-ba-new {
	border-radius: 14px;
	position: relative;
}
.svc-ba-old {
	background: rgb(30, 31, 29);
	border: 1px dashed rgba(255, 255, 255, 0.22);
	aspect-ratio: 4 / 3;
	padding: 34px 18px 18px;
	overflow: hidden;
	transform: rotate(-1.5deg);
}
.svc-ba-old i {
	background: rgba(255, 255, 255, 0.14);
	border-radius: 4px;
	height: 10px;
	margin-bottom: 10px;
	display: block;
}
.svc-ba-old .l1 { width: 55%; height: 16px; background: rgba(255, 255, 255, 0.22); }
.svc-ba-old .l2 { width: 90%; }
.svc-ba-old .l3 { width: 78%; }
.svc-ba-old .l4 { width: 84%; }
.svc-ba-old .l5 { width: 40%; height: 22px; border-radius: 6px; margin-top: 16px; }
.svc-ba-new {
	border: 1px solid rgba(201, 255, 69, 0.45);
	overflow: hidden;
	transform: rotate(1deg);
	box-shadow: rgba(0, 0, 0, 0.45) 0 26px 60px -26px;
}
.svc-ba-new img {
	width: 100%;
	height: auto;
	display: block;
}
.svc-ba-tag {
	color: rgb(210, 214, 205);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: rgba(17, 18, 17, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 10px;
	font-weight: 700;
	position: absolute;
	top: 10px;
	inset-inline-start: 10px;
	z-index: 2;
}
.svc-ba-tag.is-lime {
	color: rgb(16, 18, 14);
	background: var(--lime);
	border-color: var(--lime);
}

/* ---------- Chips (WP keep/swap, local towns) ---------- */
.svc-chips {
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
	display: flex;
}
.svc-chips span {
	color: rgb(206, 211, 202);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	padding: 7px 14px;
	font-size: 12px;
	font-weight: 600;
}
.svc-chips .is-keep {
	color: var(--lime);
	background: rgba(201, 255, 69, 0.08);
	border-color: rgba(201, 255, 69, 0.4);
}
.svc-chips .is-swap {
	color: rgb(230, 233, 226);
	border-style: dashed;
}

/* ---------- Hero visual: performance before/after ---------- */
.svc-perf-hero {
	align-items: center;
	gap: 14px;
	display: flex;
}
.svc-perf-hero figure {
	background: rgb(24, 26, 23);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 14px;
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 10px;
	position: relative;
}
.svc-perf-hero img {
	border-radius: 8px;
	width: 100%;
	height: auto;
	display: block;
}
.svc-perf-hero figcaption {
	color: rgb(160, 166, 156);
	margin-top: 8px;
	font-size: 11px;
	line-height: 1.5;
	text-align: center;
}
.svc-score {
	color: #fff;
	border-radius: 999px;
	min-width: 40px;
	height: 40px;
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
	justify-content: center;
	align-items: center;
	display: inline-flex;
	position: absolute;
	top: -12px;
	inset-inline-start: -8px;
	z-index: 2;
	box-shadow: rgba(0, 0, 0, 0.4) 0 8px 20px;
}
.svc-score.is-low { background: rgb(178, 62, 52); }
.svc-score.is-high {
	color: rgb(16, 18, 14);
	background: var(--lime);
}
.svc-perf-arrow {
	color: var(--lime);
	flex: 0 0 auto;
	font-size: 26px;
}

/* ---------- Problem / article cards ---------- */
.svc-cards {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	display: grid;
}
/* NOTE: sections.css also styles `.svc-card` (the homepage services grid:
   min-height 360px, flex column). This sheet loads later, so the template
   cards must explicitly reset those properties — scoped under .svc-cards. */
.svc-cards .svc-card {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 18px;
	min-height: 0;
	padding: 22px;
	display: block;
}
.svc-card .svc-ic {
	color: var(--lime);
	width: 26px;
	height: 26px;
	margin-bottom: 12px;
	display: block;
}
.svc-card p {
	color: rgb(199, 204, 194);
	margin: 0;
	font-size: 14.5px;
	line-height: 1.7;
}
a.svc-card {
	transition: border-color 0.2s, transform 0.2s;
	display: block;
}
a.svc-card:hover {
	border-color: rgba(201, 255, 69, 0.5);
	transform: translateY(-3px);
}
.svc-card-title {
	color: #fff !important;
	margin-bottom: 8px !important;
	font-size: 16.5px !important;
	font-weight: 700;
}

/* ---------- Keep vs. rebuild ---------- */
.svc-keepvs {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	display: grid;
}
.svc-keep,
.svc-build {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 18px;
	padding: 24px;
}
.svc-keep {
	background: rgba(201, 255, 69, 0.05);
	border-color: rgba(201, 255, 69, 0.35);
}
.svc-keepvs h3 {
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 14px;
	font-size: 13px;
}
.svc-keep h3 { color: var(--lime); }
.svc-build h3 { color: #fff; }
.svc-keepvs ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.svc-keepvs li {
	color: rgb(199, 204, 194);
	padding: 7px 0;
	padding-inline-start: 24px;
	font-size: 14.5px;
	line-height: 1.6;
	position: relative;
}
.svc-keepvs li::before {
	position: absolute;
	inset-inline-start: 0;
	top: 7px;
}
.svc-keep li::before {
	content: "✓";
	color: var(--lime);
	font-weight: 800;
}
.svc-build li::before {
	content: "↻";
	color: rgb(160, 166, 156);
	font-weight: 700;
}

/* ---------- What's included ---------- */
.svc-includes {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 32px;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
}
.svc-includes li {
	color: rgb(199, 204, 194);
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	padding: 12px 0;
	padding-inline-start: 26px;
	font-size: 15px;
	line-height: 1.6;
	position: relative;
}
.svc-includes li::before {
	content: "✓";
	color: var(--lime);
	font-weight: 800;
	position: absolute;
	inset-inline-start: 0;
	top: 12px;
}

/* ---------- Process ---------- */
.svc-process {
	counter-reset: none;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
}
.svc-process li {
	color: rgb(206, 211, 202);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 16px;
	padding: 20px;
	font-size: 14.5px;
	line-height: 1.65;
}
.svc-process li span {
	color: var(--lime);
	letter-spacing: 0.02em;
	margin-bottom: 10px;
	font-family: var(--font-accent);
	font-size: 22px;
	font-weight: 800;
	display: block;
}

/* ---------- Work minis / evidence ---------- */
.svc-evidence {
	margin-top: 26px;
}
.svc-worklink {
	margin: 22px 0 0;
	font-size: 15px;
	font-weight: 700;
}
.svc-worklink a {
	color: var(--lime);
}

/* ---------- FAQ ---------- */
.svc-faq {
	max-width: 860px;
}
.svc-qa {
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.svc-qa summary {
	color: #fff;
	cursor: pointer;
	list-style: none;
	padding: 18px 0;
	padding-inline-end: 34px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	position: relative;
}
.svc-qa summary::-webkit-details-marker { display: none; }
.svc-qa summary::after {
	content: "+";
	color: var(--lime);
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	position: absolute;
	inset-inline-end: 4px;
	top: 18px;
	transition: transform 0.2s;
}
.svc-qa[open] summary::after {
	transform: rotate(45deg);
}
.svc-qa p {
	color: rgb(190, 195, 185);
	margin: 0;
	padding: 0 0 20px;
	font-size: 15px;
	line-height: 1.8;
}

/* ---------- Related services ---------- */
.svc-related {
	flex-wrap: wrap;
	gap: 12px;
	display: flex;
}
.svc-related a {
	color: rgb(230, 233, 226);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	font-size: 14px;
	font-weight: 700;
	transition: border-color 0.2s, transform 0.2s;
	display: inline-flex;
}
.svc-related a:hover {
	border-color: rgba(201, 255, 69, 0.55);
	transform: translateY(-2px);
}
.svc-related i {
	color: var(--lime);
	font-style: normal;
}

/* ---------- Responsive ---------- */
@media (width <= 980px) {
	.svc-hero {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.svc-hero-visual { max-width: 640px; }
	.svc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (width <= 700px) {
	.svc-section { padding-block: 22px; }
	.svc-section:last-of-type { padding-bottom: 64px; }
	.svc-cards,
	.svc-keepvs,
	.svc-includes { grid-template-columns: 1fr; }
	.svc-perf-hero { gap: 8px; }
	.svc-perf-arrow { font-size: 18px; }
	.svc-score { min-width: 32px; height: 32px; font-size: 13px; }
	.svc-phone { bottom: -18px; }
	.svc-ba { gap: 10px; }
	.svc-ba-old { padding: 30px 12px 12px; }
}

/* --- Design-critique pass (2026-07-29) ---------------------------------- */

/* Link cards say they are links: arrow after the title, matching the
   service cards' affordance. */
a.svc-card .svc-card-title::after {
	content: " ←";
	color: var(--lime);
}
html[dir="ltr"] a.svc-card .svc-card-title::after {
	content: " →";
}

/* Before/after hero: the "after" screenshot wipes in over its start edge,
   so the improvement reads as a motion, not two static images. */
.dfs-js .svc-ba-new img {
	animation: dfs-ba-reveal 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s backwards;
}
@keyframes dfs-ba-reveal {
	from { clip-path: inset(0 0 0 100%); }
	to { clip-path: inset(0); }
}
html[dir="ltr"] .dfs-js .svc-ba-new img {
	animation-name: dfs-ba-reveal-ltr;
}
@keyframes dfs-ba-reveal-ltr {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0); }
}
@media (prefers-reduced-motion: reduce) {
	.dfs-js .svc-ba-new img { animation: none !important; }
}

/* Companion-guide link under the "what's included" list. */
.svc-guide {
	margin: 18px 0 0;
	font-size: 15px;
	font-weight: 700;
}
.svc-guide a {
	color: var(--lime);
	border-bottom: 1px solid rgba(202, 255, 61, 0.35);
	padding-bottom: 2px;
}