/**
 * Real estate photo editing landing page
 *
 * @copyright   2026, ON1
 *
 * base.css already owns most of this page's vocabulary - .eyebrow,
 * .section-divider, .section-intro, the .faqs accordion and the whole #reviews
 * and #resources bands - so what lives here is the hero, the intro strip, the
 * two-column block the five feature bands share, and the closing CTA.
 *
 * The .section-* classes came across from v2/assets/css/base.css, which this
 * page no longer loads. They are scoped to the body id rather than left bare:
 * the names are generic enough that a later base.css addition under the same
 * name would collide.
 *
 * Unlike the Nature and Lifestyle siblings, the hero is not a photographic
 * plate - there is no 2880-wide art for this page, the widest asset in
 * /images/landing/real-estate-photo-editing/ being 1320 x 700. It runs as a
 * two-column band instead, copy against the before/after comparison, which is
 * the same shape the AI Photo Restoration hero uses.
 *
 * Band order, on the 70/20/10 dark / light / one-step-lighter split:
 *
 *   #hero                      pinned dark, --bg-950
 *   #intro                     pinned LIGHT, heading plus the four-up strip
 *   #sky-swap                  follows the theme
 *   #noise-reduction           follows the theme
 *   #custom-presets            follows the theme
 *   #batch-processing          follows the theme
 *   #hdr-blending              follows the theme
 *   #more-features             follows the theme, the four small-art topics
 *   #reviews                   follows the theme, --bg-800 (the one step-lighter band)
 *   #faqs                      follows the theme
 *   #experience-the-difference pinned dark, --bg-950, blue burst
 *   #resources                 follows the theme, base.css owns the band
 *   ON1 Guarantee              pinned light, injected by partials/footer.php
 */

/* !- Buttons
   House sizing, same as the blog index. The hero steps up from it below. */
#real-estate-photo-editing #site-main .btn {
	font-size: var(--text-sm);
	padding: 0.75rem 1.25rem;
}

/* !- Hero
   Pinned dark and stating its own colors - pinning the attribute only redefines
   the tokens, and body's color is already computed by the time it inherits in.
   The secondary button is .btn-outline-light, which is only legible on a dark
   surface, so the pin is load-bearing rather than cosmetic. */
#real-estate-photo-editing #hero {
	background: var(--bg-950);
	color: var(--text-300);
	padding: 4rem 0;
}

@media (min-width: 992px) {
	#real-estate-photo-editing #hero {
		padding: 5.625rem 0;
	}
}

/* Mobile first, and the small step is the one that matters: at --text-6xl the
   headline crowds the comparison on a phone, where the two columns have already
   stacked. */
#real-estate-photo-editing #hero .hero-h1 {
	color: var(--white);
	font-size: var(--text-4xl);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.08;
	margin-bottom: 1rem;
	text-wrap: balance;
}

@media (min-width: 992px) {
	#real-estate-photo-editing #hero .hero-h1 {
		font-size: var(--text-5xl);
	}
}

#real-estate-photo-editing #hero .hero-sub {
	font-size: var(--text-base);
	line-height: 1.65;
	margin-bottom: 2.5rem;
}

#real-estate-photo-editing #hero .btn {
	font-size: var(--text-base);
	padding: 0.9375rem 1.875rem;
}

#real-estate-photo-editing #hero .hero-buttons {
	margin-bottom: 2.5rem;
}

#real-estate-photo-editing #hero .hero-proof {
	color: var(--white);
	font-size: var(--text-xs);
	margin: 0;
}

#real-estate-photo-editing #hero .hero-proof .list-inline-item {
	margin-right: 1.75rem;
	padding-left: 0.875rem;
	position: relative;
}

#real-estate-photo-editing #hero .hero-proof .list-inline-item:last-child {
	margin-right: 0;
}

#real-estate-photo-editing #hero .hero-proof .list-inline-item::before {
	background: var(--blue-500);
	border-radius: 50%;
	content: '';
	height: 0.375rem;
	left: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 0.375rem;
}

/* !- Intro
   The page's light band. Pinned, so it stays light under either theme, and it
   restates background and color for the same reason the hero does. */
#real-estate-photo-editing #intro {
	background: var(--bg-900);
	color: var(--text-300);
	padding: 4.375rem 0;
}

#real-estate-photo-editing #intro .intro-heading {
	color: var(--text-50);
	font-size: var(--text-3xl);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin-bottom: 0.875rem;
}

#real-estate-photo-editing #intro .intro-sub {
	font-size: var(--text-base);
	line-height: 1.7;
}

#real-estate-photo-editing #intro .intro-sub strong {
	color: var(--text-100);
	font-weight: 600;
}

/* !- Four-up strip
   Cards sit one step lighter than the band they're on, which on a pinned-light
   band means --bg-950. The border is what carries the edge at that distance. */
#real-estate-photo-editing .four-up-item {
	background: var(--bg-950);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	padding: 2rem 1.75rem;
}

#real-estate-photo-editing .four-up-item .four-up-icon {
	color: var(--blue-600);
	font-size: 1.75rem;
	margin-bottom: 1rem;
}

#real-estate-photo-editing .four-up-item h3 {
	font-size: var(--text-base);
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 0.625rem;
}

#real-estate-photo-editing .four-up-item .four-up-copy {
	color: var(--text-400);
	font-size: var(--text-sm);
	line-height: 1.6;
	margin-bottom: 0;
}

/* !- Section blocks
   The five deep-dive bands, each one topic against one image. The row runs g-0
   so the artwork meets the copy column edge to edge; .section-copy carries the
   padding that keeps the text off it.

   Only five of the page's nine feature topics get a band, because only five
   have artwork wide enough to hold a half-page column. The other four are cards
   in #more-features below - their images only exist at 275 square, cut for the
   legacy four-up, where that size is right rather than half-empty. */
#real-estate-photo-editing .section-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 5rem 4.375rem;
}

@media (max-width: 575.98px) {
	#real-estate-photo-editing .section-copy {
		padding-left: 0;
		padding-right: 0;
	}
}

#real-estate-photo-editing .section-h2 {
	color: var(--text-50);
	font-size: var(--text-3xl);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin-bottom: 1rem;
}

#real-estate-photo-editing .section-body {
	font-size: var(--text-base);
	line-height: 1.65;
	margin-bottom: 1.75rem;
}

#real-estate-photo-editing .section-body strong {
	color: var(--text-100);
	font-weight: 600;
}

#real-estate-photo-editing .section-link {
	color: var(--link-alt);
	font-size: var(--text-sm);
	font-weight: 600;
	text-decoration: none;
}

#real-estate-photo-editing .section-link:hover {
	text-decoration: underline;
}

/* The intro sub and the HDR paragraph both run a .section-link inside body copy
   rather than on its own line, where the 0.875rem of the class would shrink the
   word out of the sentence around it. */
#real-estate-photo-editing .intro-sub .section-link,
#real-estate-photo-editing .section-body .section-link {
	font-size: inherit;
}

/* !- More features
   The four topics whose only artwork is 275 square. As cards the images sit at
   or just above native size at every breakpoint - the widest case is the 2-up
   between sm and lg, which asks about 348 of them - so they stay sharp instead
   of being stretched into a half-page column. No card chrome: the photographs
   carry the row, and a border would fight the four-up on the pinned-light
   #intro band above. */
#real-estate-photo-editing #more-features {
	padding: 5rem 0;
}

#real-estate-photo-editing .feature-card img {
	margin-bottom: 1.125rem;
	width: 100%;
}

#real-estate-photo-editing .feature-card h3 {
	color: var(--text-50);
	font-size: var(--text-base);
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 0.625rem;
}

#real-estate-photo-editing .feature-card .feature-card-copy {
	font-size: var(--text-sm);
	line-height: 1.6;
	margin-bottom: 0;
}

/* !- Experience the Difference
   Pinned dark, and restating its own colors for the reason the hero does. The
   secondary button is .btn-outline-light, which is only legible on a dark
   surface - letting this band follow the theme would erase it on light. */
#real-estate-photo-editing #experience-the-difference {
	background: var(--bg-950);
	color: var(--text-300);
	padding: 6.25rem 0;
}

#real-estate-photo-editing #experience-the-difference h2 {
	color: var(--text-50);
	font-size: var(--text-4xl);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin-bottom: 1.25rem;
	text-wrap: balance;
}

#real-estate-photo-editing #experience-the-difference .cta-copy {
	font-size: var(--text-lg);
	line-height: 1.65;
	margin-bottom: 2.5rem;
}

#real-estate-photo-editing #experience-the-difference .cta-copy strong {
	color: var(--text-100);
	font-weight: 600;
}