/* Limitless Prints — sitewide header/nav polish on top of theme.json colors */

/* Sitewide background image with boxed (85% width) content */
body {
	background-image: url('https://www.limitlessprints.co.za/wp-content/uploads/2026/09/Website-Background.webp');
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
@media (max-width: 768px) {
	body {
		background-attachment: scroll;
	}
}
main.wp-block-group {
	max-width: 85%;
	margin-left: auto;
	margin-right: auto;
	background-color: #ffffff;
}
/* Neutralize WordPress's "full width" break-out (which normally escapes to
   100vw) so full-width sections inside the page sit within our boxed
   content area instead of punching back out to the true viewport edges. */
main.wp-block-group .alignfull {
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* Full-screen "canvas" template (used by the Lumise design editor page, and
   any other page that needs to escape the sitewide boxed/background
   container entirely and fill the whole viewport). Assigned via the
   page-canvas.html block template, which has no header/footer and gives
   its <main> the "lumise-fullscreen" class. */
main.wp-block-group.lumise-fullscreen {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	background-color: transparent !important;
	min-height: 100vh;
}

/* Lumise embeds its actual editor app in an <iframe>, and hard-codes that
   iframe's height as an inline style straight from its own "Editor Iframe
   Height" setting (default 80vh) -- leaving a visible band of the site's
   own background exposed below it. Inline styles beat an external
   stylesheet unless we use !important, so do that here to make the iframe
   itself fill the true viewport height regardless of that setting. */
main.wp-block-group.lumise-fullscreen iframe {
	height: 100vh !important;
	display: block;
}

.lp-header-logo img {
	height: auto;
}

/* Header nav links */
.lp-header .wp-block-navigation a {
	color: #FFFFFF;
	font-weight: 500;
	transition: color .15s ease;
}
.lp-header .wp-block-navigation a:hover {
	color: #0088FF;
	text-decoration: none;
}

/* Header CTA button */
.lp-header .wp-block-button__link {
	transition: transform .15s ease, filter .15s ease;
}
.lp-header .wp-block-button__link:hover {
	transform: translateY(-1px);
	filter: brightness(1.1);
}

/* FiboSearch in the header: keep it compact and legible on the dark background */
.lp-header-search {
	display: flex;
	align-items: center;
}
.lp-header .dgwt-wcas-search-wrapp {
	display: flex;
	align-items: center;
}
/* The collapsed search icon (magnifying glass) defaults to a dark fill,
   which is invisible on our black header -- force it white. */
.lp-header .dgwt-wcas-search-icon,
.lp-header .dgwt-wcas-ico-magnifier-handler,
.lp-header .dgwt-wcas-ico-magnifier-handler path,
.lp-header .dgwt-wcas-ico-magnifier,
.lp-header .dgwt-wcas-ico-magnifier path {
	fill: #FFFFFF !important;
	color: #FFFFFF !important;
}
.lp-header .dgwt-wcas-search-icon {
	display: inline-flex;
	align-items: center;
	width: 22px;
	height: 22px;
}
.lp-header .dgwt-wcas-search-input {
	border-radius: 6px;
}
.lp-header .dgwt-wcas-search-input:focus {
	outline: 2px solid #0088FF;
}

@media (max-width: 768px) {
	.lp-header-logo img {
		width: 140px !important;
	}
}

/* Footer */
.lp-footer .wp-block-navigation a,
.lp-footer .wc-block-customer-account__link,
.lp-footer a {
	color: #FFFFFF;
	transition: color .15s ease;
}
.lp-footer .wp-block-navigation a:hover,
.lp-footer .wc-block-customer-account__link:hover,
.lp-footer a:hover {
	color: #0088FF;
	text-decoration: none;
}
.lp-footer-logo img {
	height: auto;
	width: 140px;
}
.lp-footer-account .wc-block-customer-account__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.lp-footer-account .wc-block-customer-account__icon {
	width: 20px;
	height: 20px;
}

/* Elementor icon-list bullet icons and accordion +/- toggle icons can render
   without their normal size constraint (showing up huge, edge-to-edge) --
   force them back down to a compact, consistent inline size everywhere. */
.elementor-icon-list-icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.elementor-icon-list-icon svg,
.elementor-icon-list-icon i {
	width: 1em !important;
	height: 1em !important;
	font-size: 18px !important;
	max-width: 18px !important;
	max-height: 18px !important;
}
.elementor-tab-title .elementor-accordion-icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.elementor-tab-title .elementor-accordion-icon svg,
.elementor-tab-title .elementor-accordion-icon i {
	width: 1em !important;
	height: 1em !important;
	font-size: 16px !important;
	max-width: 16px !important;
	max-height: 16px !important;
}

/* ===========================================================================
   Limitless Prints — "Services" page style (ported from the old Divi site)
   Scoped under .limitless-services so it can't leak onto other pages/widgets.
   =========================================================================== */

/* Custom display font used for the site "eyebrow" badge (e.g. the
   "Limitless Prints" pill above the hero heading). */
@font-face {
	font-family: 'Bombardies';
	src: url('/wp-content/themes/limitless-prints/assets/fonts/Bombardies.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

.limitless-services {
	--ink-black: #0a0a0a;
	--paper-white: #fafafa;
	--press-red: #ff2d55;
	--print-cyan: #00d4ff;
	--vinyl-purple: #c44dff;
	--screen-yellow: #ffd60a;
	--limitless-green: #00d084;
	--limitless-blue: #00a3ff;
	--gradient-1: linear-gradient(135deg, var(--press-red) 0%, var(--vinyl-purple) 100%);
	--gradient-2: linear-gradient(135deg, var(--print-cyan) 0%, var(--vinyl-purple) 100%);
	--gradient-3: linear-gradient(135deg, var(--screen-yellow) 0%, var(--press-red) 100%);
	--gradient-green-blue: linear-gradient(135deg, var(--limitless-green) 0%, var(--limitless-blue) 100%);
}

.limitless-services * {
	box-sizing: border-box;
}

.limitless-services {
	font-family: 'Outfit', sans-serif;
}

/* Let the full-bleed sections (hero, why-choose, CTA) fill the entire boxed
   white content area edge-to-edge, matching the site's .alignfull pattern
   above -- otherwise the theme's default content-width constraint leaves a
   gap instead of letting these bands span the whole box. */
main.wp-block-group .limitless-services {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Hero Section */
.lp-hero {
	position: relative;
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ink-black);
	overflow: hidden;
	padding: 4rem 2rem;
}

/* Compact variant: used where the hero doesn't carry its own CTA buttons
   (e.g. the Home page, where the CTA lives in the section right below
   instead) so the hero itself takes up noticeably less vertical space and
   the next section can sit higher on the page. */
.lp-hero--compact {
	min-height: 42vh;
	padding: 3rem 2rem;
}

.lp-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 45, 85, 0.03) 10px, rgba(255, 45, 85, 0.03) 20px),
		repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(0, 212, 255, 0.03) 10px, rgba(0, 212, 255, 0.03) 20px);
}

.lp-hero-content {
	position: relative;
	z-index: 2;
	text-align: center;
	max-width: 1200px;
	margin: 0 auto;
}

/* "Limitless Prints" wordmark above the H1 -- sized and colored to echo the
   site logo (same green-to-blue gradient, same display font), scaled up so
   its rendered width roughly matches the "Custom T-Shirts" heading below
   it rather than reading as a small badge. */
.lp-eyebrow {
	display: inline-block;
	background: var(--gradient-green-blue);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
	font-family: 'Bombardies', 'Outfit', sans-serif;
	font-size: clamp(4rem, 19vw, 9.75rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin-bottom: 1rem;
}

.lp-hero h1 {
	font-family: 'Anton', sans-serif;
	font-size: clamp(3rem, 10vw, 7rem);
	color: var(--paper-white);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	line-height: 0.9;
	margin-bottom: 1.5rem;
	animation: lpSlideUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	opacity: 0;
}

.lp-hero h1 .highlight {
	background: var(--gradient-green-blue);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	display: inline-block;
}

@keyframes lpSlideUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.lp-hero p {
	font-size: clamp(1.1rem, 2vw, 1.4rem);
	color: rgba(255, 255, 255, 0.8);
	max-width: 700px;
	margin: 0 auto 2rem;
	font-weight: 300;
	animation: lpSlideUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
	opacity: 0;
}

/* Services Introduction */
.lp-services-intro {
	text-align: center;
	margin-bottom: 5rem;
	padding: 4rem 2rem 0;
}

.lp-services-intro h2 {
	font-family: 'Anton', sans-serif;
	font-size: clamp(2rem, 5vw, 3.5rem);
	text-transform: uppercase;
	margin-bottom: 1rem;
	letter-spacing: 0.02em;
	color: var(--ink-black);
}

.lp-services-intro p {
	font-size: 1.2rem;
	color: #666;
	max-width: 800px;
	margin: 0 auto;
	line-height: 1.6;
}

/* Services Grid - 3 Columns */
.lp-services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3rem;
	margin-bottom: 4rem;
	padding: 0 2rem;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}

.lp-service-card {
	background: white;
	border-radius: 24px;
	padding: 3rem 2.5rem;
	position: relative;
	overflow: hidden;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
	cursor: pointer;
	animation: lpFadeInUp 0.6s ease forwards;
	opacity: 0;
}

.lp-service-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6px;
	transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.lp-service-card:nth-child(1)::before { background: var(--gradient-1); }
.lp-service-card:nth-child(2)::before { background: var(--gradient-2); }
.lp-service-card:nth-child(3)::before { background: var(--gradient-3); }

.lp-service-card:nth-child(1) { animation-delay: 0.1s; }
.lp-service-card:nth-child(2) { animation-delay: 0.2s; }
.lp-service-card:nth-child(3) { animation-delay: 0.3s; }

@keyframes lpFadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.lp-service-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.lp-service-card:hover::before {
	height: 100%;
	opacity: 0.05;
}

.lp-service-card::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: transparent;
	transition: background 0.3s ease;
	pointer-events: none;
	border-radius: 24px;
}

.lp-service-card:hover::after {
	background: rgba(0, 0, 0, 0.02);
}

.lp-service-icon {
	width: 70px;
	height: 70px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	margin-bottom: 1.5rem;
	position: relative;
}

.lp-service-card:nth-child(1) .lp-service-icon { background: linear-gradient(135deg, rgba(255, 45, 85, 0.1) 0%, rgba(196, 77, 255, 0.1) 100%); }
.lp-service-card:nth-child(2) .lp-service-icon { background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(196, 77, 255, 0.1) 100%); }
.lp-service-card:nth-child(3) .lp-service-icon { background: linear-gradient(135deg, rgba(255, 214, 10, 0.1) 0%, rgba(255, 45, 85, 0.1) 100%); }

.lp-service-card h3 {
	font-family: 'Anton', sans-serif;
	font-size: 1.8rem;
	text-transform: uppercase;
	margin-bottom: 1rem;
	letter-spacing: 0.02em;
	color: var(--ink-black);
}

.lp-service-card p {
	color: #666;
	margin-bottom: 1.5rem;
	font-size: 1.05rem;
	line-height: 1.6;
}

.lp-service-features {
	list-style: none;
	margin-bottom: 1.5rem;
	padding: 0;
}

.lp-service-features li {
	padding: 0.6rem 0;
	padding-left: 1.8rem;
	position: relative;
	color: #444;
	font-size: 0.95rem;
}

.lp-service-features li::before {
	content: '✓';
	position: absolute;
	left: 0;
	font-weight: bold;
	font-size: 1.2rem;
}

.lp-service-card:nth-child(1) .lp-service-features li::before { color: var(--press-red); }
.lp-service-card:nth-child(2) .lp-service-features li::before { color: var(--print-cyan); }
.lp-service-card:nth-child(3) .lp-service-features li::before { color: var(--screen-yellow); }

.lp-print-types {
	background: rgba(0, 0, 0, 0.03);
	border-radius: 12px;
	padding: 1.2rem;
	margin-top: 1.5rem;
}

.lp-print-types h4 {
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.8rem;
	font-weight: 700;
	color: var(--ink-black);
}

.lp-print-types ul {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0.5rem;
	padding: 0;
}

.lp-print-types li {
	font-size: 0.9rem;
	color: #555;
	padding: 0.4rem 0;
}

.lp-print-types li strong {
	color: var(--ink-black);
	font-weight: 600;
}

/* Clickable card links */
.lp-card-link {
	text-decoration: none;
	color: inherit;
	display: block;
	height: 100%;
}

.lp-card-link:hover,
.lp-card-link:focus,
.lp-card-link:active {
	text-decoration: none;
	color: inherit;
}

/* Learn More link */
.lp-learn-more {
	display: inline-block;
	margin-top: 1.5rem;
	font-weight: 600;
	font-size: 1rem;
	color: var(--ink-black);
	transition: all 0.3s ease;
	position: relative;
	padding-right: 0.5rem;
}

.lp-service-card:nth-child(1) .lp-learn-more { color: var(--press-red); }
.lp-service-card:nth-child(2) .lp-learn-more { color: var(--print-cyan); }
.lp-service-card:nth-child(3) .lp-learn-more { color: var(--screen-yellow); }

.lp-service-card:hover .lp-learn-more {
	padding-right: 1rem;
}

/* Why Choose Us */
.lp-why-choose {
	padding: 6rem 2rem;
	background: linear-gradient(180deg, var(--paper-white) 0%, white 100%);
}

.lp-why-choose-container {
	max-width: 1200px;
	margin: 0 auto;
}

.lp-why-choose h2 {
	font-family: 'Anton', sans-serif;
	font-size: clamp(2rem, 5vw, 3.5rem);
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 4rem;
	color: var(--ink-black);
}

.lp-features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 2.5rem;
}

.lp-feature-item {
	text-align: center;
	padding: 2rem;
}

/* Elements marked for JS-driven scroll-reveal (see limitless-services.js) */
.lp-fade-in {
	opacity: 0;
	animation: lpFadeIn 0.8s ease forwards;
}

@keyframes lpFadeIn {
	to { opacity: 1; }
}

.lp-feature-icon {
	font-size: 3rem;
	margin-bottom: 1rem;
	display: block;
}

.lp-feature-item h3 {
	font-size: 1.3rem;
	margin-bottom: 0.8rem;
	font-weight: 700;
	color: var(--ink-black);
}

.lp-feature-item p {
	color: #666;
	line-height: 1.6;
}

/* CTA Section */
.lp-cta-section {
	background: var(--ink-black);
	padding: 5rem 2rem;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.lp-cta-section::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(255, 45, 85, 0.1) 0%, transparent 50%);
}

.lp-cta-content {
	position: relative;
	z-index: 2;
	max-width: 800px;
	margin: 0 auto;
}

.lp-cta-section h2 {
	font-family: 'Anton', sans-serif;
	font-size: clamp(2.5rem, 6vw, 4rem);
	color: white;
	text-transform: uppercase;
	margin-bottom: 1.5rem;
	line-height: 1.1;
}

.lp-cta-section p {
	font-size: 1.3rem;
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: 2.5rem;
}

.lp-cta-address {
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.65);
	margin-bottom: 2.5rem;
	line-height: 1.8;
}

.lp-cta-buttons {
	display: flex;
	gap: 1.5rem;
	justify-content: center;
	flex-wrap: wrap;
}

.lp-btn {
	padding: 1.2rem 3rem;
	border-radius: 50px;
	text-decoration: none;
	font-weight: 600;
	font-size: 1.1rem;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	display: inline-block;
}

.lp-btn-primary {
	background: var(--gradient-1);
	color: white;
	box-shadow: 0 10px 30px rgba(255, 45, 85, 0.3);
}

.lp-btn-primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 15px 40px rgba(255, 45, 85, 0.4);
}

.lp-btn-secondary {
	background: white;
	color: var(--ink-black);
	border: 2px solid white;
}

.lp-btn-secondary:hover {
	background: transparent;
	color: white;
	transform: translateY(-3px);
}

/* ===========================================================================
   Reusable light-theme content sections (added for the Custom T-Shirt
   Printing Cape Town page, but usable by any .limitless-services page).
   =========================================================================== */

.lp-section {
	padding: 5rem 2rem;
	background: #ffffff;
}

.lp-section--alt {
	background: linear-gradient(180deg, var(--paper-white) 0%, white 100%);
}

/* Home page: "Custom Printed Tees, Made Easy" process section. The site
   owner doesn't want a white band here (products will fill the space below
   it later), and wants it noticeably shorter than the standard .lp-section
   -- so this variant goes dark to match the hero above it, with reduced
   padding/spacing throughout to cut the overall height by roughly a third. */
.lp-home-steps {
	background: var(--ink-black);
	padding: 2.5rem 2rem;
}
.lp-home-steps .lp-section-heading {
	color: var(--paper-white);
	font-size: clamp(1.4rem, 3vw, 2rem);
	margin-bottom: 0.5rem;
}
.lp-home-steps .lp-section-subtitle {
	color: rgba(255, 255, 255, 0.65);
	margin-bottom: 1.5rem;
}
.lp-home-steps .lp-step-number {
	width: 46px;
	height: 46px;
	font-size: 1.1rem;
	margin-bottom: 0.7rem;
}
.lp-home-steps .lp-step h3 {
	color: var(--paper-white);
	font-size: 1.05rem;
	margin-bottom: 0.3rem;
}
.lp-home-steps .lp-step p {
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.9rem;
}
.lp-home-steps .lp-cta-buttons {
	margin-top: 1.25rem;
}

.lp-section-inner {
	max-width: 1100px;
	margin: 0 auto;
}

.lp-section-heading {
	font-family: 'Anton', sans-serif;
	font-size: clamp(1.8rem, 4vw, 2.75rem);
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 0.02em;
	color: var(--ink-black);
	margin-bottom: 1rem;
}

.lp-section-subtitle {
	text-align: center;
	color: #666;
	font-size: 1.1rem;
	max-width: 700px;
	margin: 0 auto 3rem;
	line-height: 1.6;
}

/* Two-column checklist (e.g. "Perfect for Every Occasion") */
.lp-checklist {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.4rem 3rem;
	padding: 0;
	max-width: 900px;
	margin: 0 auto;
}

.lp-checklist li {
	padding: 0.8rem 0;
	padding-left: 2rem;
	position: relative;
	color: #444;
	font-size: 1.05rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.lp-checklist li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--limitless-blue);
	font-weight: bold;
	font-size: 1.2rem;
}

/* Numbered process steps (e.g. "How It Works") */
.lp-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2.5rem;
	max-width: 1200px;
	margin: 0 auto;
}

/* Variant for a 3-step process (e.g. the Home page's "Custom Printed Tees,
   Made Easy" section) so 3 items don't leave an empty 4th column. */
.lp-steps--3 {
	grid-template-columns: repeat(3, 1fr);
	max-width: 950px;
}

.lp-step {
	text-align: center;
	padding: 0 1rem;
}

.lp-step-number {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--gradient-green-blue);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Anton', sans-serif;
	font-size: 1.4rem;
	margin: 0 auto 1.2rem;
}

.lp-step h3 {
	font-family: 'Anton', sans-serif;
	font-size: 1.2rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin-bottom: 0.6rem;
	color: var(--ink-black);
}

.lp-step p {
	color: #666;
	font-size: 0.95rem;
	line-height: 1.5;
}

/* Highlighted band (e.g. "Bulk Orders & Corporate Solutions") */
.lp-highlight-band {
	background: linear-gradient(135deg, rgba(0, 208, 132, 0.08), rgba(0, 163, 255, 0.08));
	border: 1px solid rgba(0, 163, 255, 0.25);
	border-radius: 20px;
	padding: 3rem 2.5rem;
	text-align: center;
	max-width: 900px;
	margin: 0 auto;
}

.lp-highlight-band h2 {
	font-family: 'Anton', sans-serif;
	font-size: clamp(1.6rem, 3.5vw, 2.25rem);
	text-transform: uppercase;
	color: var(--ink-black);
	margin-bottom: 1rem;
}

.lp-highlight-band p {
	color: #555;
	font-size: 1.1rem;
	line-height: 1.6;
	max-width: 650px;
	margin: 0 auto;
}

.lp-highlight-band a {
	color: var(--limitless-blue);
	font-weight: 600;
	text-decoration: underline;
}

/* FAQ accordion -- native <details>/<summary>, no JS required */
.lp-faq {
	max-width: 900px;
	margin: 0 auto;
}

.lp-faq-item {
	background: #ffffff;
	border-radius: 16px;
	margin-bottom: 1rem;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
	border-left: 4px solid var(--limitless-blue);
	overflow: hidden;
}

.lp-faq-item summary {
	cursor: pointer;
	list-style: none;
	padding: 1.4rem 1.8rem;
	font-family: 'Outfit', sans-serif;
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--ink-black);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.lp-faq-item summary::-webkit-details-marker {
	display: none;
}

.lp-faq-item summary::after {
	content: '+';
	font-size: 1.6rem;
	line-height: 1;
	color: var(--limitless-blue);
	transition: transform 0.3s ease;
	flex-shrink: 0;
}

.lp-faq-item[open] summary::after {
	transform: rotate(45deg);
}

.lp-faq-item[open] summary {
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.lp-faq-answer {
	padding: 0 1.8rem 1.4rem;
	color: #666;
	line-height: 1.65;
}

/* Responsive */
@media (max-width: 1024px) and (min-width: 769px) {
	.lp-steps {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {
	.lp-services-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
		padding: 0 1.5rem;
	}
}

@media (max-width: 768px) {
	.lp-hero {
		min-height: 60vh;
		padding: 3rem 1.5rem;
	}

	.lp-hero--compact {
		min-height: 34vh;
		padding: 2.5rem 1.5rem;
	}

	/* Keep the "Limitless Prints" wordmark from outsizing the H1 below it
	   on small screens, where its vw-driven desktop scale would otherwise
	   overshoot (both wrap to two lines here, so the wide-viewport width
	   match no longer applies). */
	.lp-eyebrow {
		font-size: clamp(2rem, 11vw, 3.2rem);
	}

	.lp-service-card {
		padding: 2rem 1.5rem;
	}

	.lp-cta-buttons {
		flex-direction: column;
		align-items: center;
	}

	.lp-btn {
		width: 100%;
		max-width: 300px;
	}

	.lp-services-intro {
		padding: 3rem 1.5rem 0;
	}

	.lp-checklist {
		grid-template-columns: 1fr;
	}

	.lp-steps {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.lp-section {
		padding: 3rem 1.5rem;
	}
}