/*
 Theme Name:   Kadence Child (Glam Aurora)
 Theme URI:    https://glamaurora.com
 Description:  Child theme for Glam Aurora's Kadence install. Carries the
               custom landing templates,
the brand system below,
and the
               structural functions split (functions-structural.php +
               site_config.php).
 Author:       Glam Aurora
 Template:     kadence
 Version:      1.0.0
 Text Domain:  kadence-child
*/

/* =========================================================================
 * Glam Aurora brand system — site-wide,
for every normal Kadence-chrome page
 * (About Us,
Services,
Contact Us,
blog posts,
portfolio/service detail
 * pages,
etc). Same palette/type already used on the three custom landing
 * templates (hub,
corporate,
weddings) — see assets/landing-pages.css —
 * not a new design,
just extended to Kadence's own default nav/footer/
 * page-title/typography,
which those three templates don't use at all
 * (they render their own <nav> and skip Kadence's chrome entirely,
so
 * none of this touches them). The typography/color rules below are
 * additionally scoped with :not(.rc-tpl-hub):not(.rc-tpl-landing) as a
 * belt-and-braces guard against ever bleeding onto those three pages.
 * ========================================================================= */

:root {
	/* ---------------------------------------------------------------
	 * GLAM AURORA BRAND PALETTE — Rich Berry Rose, confirmed 2026-09-01.
	 *
	 * Light cream ground with rose-gold and blush accents. This is a
	 * deliberate departure from the inherited gold-on-dark scheme that
	 * came with the starter kit; it must not read as a recolour of it.
	 *
	 * Every value is sampled from the Glam Aurora watercolour logo
	 * (cream gown, blush wash, deep-brown script), not invented.
	 *
	 * Variable NAMES are inherited from the kit and describe their ROLE,
	 * not their colour.
	 *
	 * ROSE GOLD, owner-directed. An earlier pass sampled this palette straight
	 * out of Glam-Aurora-logo2.png, but the logo's darks come from a brown
	 * HAIR silhouette, so a faithful sample landed on terracotta/coffee
	 * (hues 20-30 deg) rather than rose gold. These anchors were specified by
	 * the owner to correct that.
	 *
	 * The dark anchor was then moved again, from rosewood #3A1D1A to a
	 * balanced chocolate brown: red dominance R-G drops 29 -> 23 while the
	 * warm G-B spread rises 3 -> 15, so it reads brown rather than wine.
	 * Chocolate dark + rose-gold accent is the intended pairing; the accent
	 * and blush anchors were deliberately NOT touched.
	 *
	 *   dark-bg  #3B2415 chocolate     accent  #9C6B5C rose gold
	 *   blush    #E8B9AE dusty rose    page bg #FBF1EC cool ivory
	 *
	 * Everything else is derived from those four by moving lightness within
	 * the same hue — no independent colour choices, nothing eyeballed.
	 *
	 * TEXT-SAFE vs DECORATIVE (measured on rendered pixels, not calculated):
	 *   text-safe on light : --rc-ink, --rc-ink-soft, --rc-gold
	 *   text-safe on dark  : --rc-dark-ink, --rc-gold-bright,
	 *                        --rc-gold-champagne, --rc-blush
	 *   DECORATIVE ONLY    : --rc-accent-raw (4.05:1 on ivory — close, but
	 *                        under AA), --rc-blush (1.58) and
	 *                        --rc-gold-champagne (1.89) on LIGHT.
	 * --rc-gold is the deepened form of --rc-accent-raw that clears AA, and
	 * is what any text or button on a light surface must use.
	 * ------------------------------------------------------------ */
	--rc-bone: #FBF1EC;          /* ANCHOR — cool ivory page background   */
	--rc-white: #FFFFFF;         /* neutral                               */
	--rc-charcoal: #FBF1EC;      /* recessed light surface                */
	--rc-charcoal-2: #F6E3DF;    /* alt light surface                     */
	--rc-champagne: #3B2415;     /* foreground on those surfaces          */
	--rc-ink: #3B2415;           /* ANCHOR chocolate — body text          */
	--rc-ink-soft: #8C5A4C;      /* muted text — 5.13:1, AA as-is         */
	--rc-gold: #906355;          /* DERIVED from #9C6B5C — text/buttons   */
	--rc-gold-bright: #B1887B;   /* accent hue, lightness RE-SOLVED against
	                                the chocolate anchor: that anchor is a
	                                shade lighter than the rosewood one, which
	                                left the old #AE8376 at 4.35 — under AA. */
	--rc-blush: #E8B9AE;         /* ANCHOR dusty rose, DECORATIVE ON LIGHT */
	--rc-accent-raw: #9C6B5C;    /* ANCHOR rose gold — 4.05:1, fills only */

	/* --rc-accent-raw (#9C6B5C) is the rose-gold anchor. On the ivory it
	 * measures 4.05:1 — fine for large text, under AA for body —
	 * so it is a fill/border colour only. --rc-gold (#906355) is that exact
	 * hue darkened until it clears AA, and --rc-gold-bright (#B1887B) is the
	 * same hue lightened for small text on the dark bands. */
}

/* ---- Typography + base colors, site-wide (excludes the 3 custom templates) ---- */
body:not(.rc-tpl-hub):not(.rc-tpl-landing),
body:not(.rc-tpl-hub):not(.rc-tpl-landing) input,
body:not(.rc-tpl-hub):not(.rc-tpl-landing) select,
body:not(.rc-tpl-hub):not(.rc-tpl-landing) optgroup,
body:not(.rc-tpl-hub):not(.rc-tpl-landing) textarea {
	font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--rc-ink);
}
body:not(.rc-tpl-hub):not(.rc-tpl-landing) {
	background: var(--rc-bone);
}
body:not(.rc-tpl-hub):not(.rc-tpl-landing) .content-bg,
body:not(.rc-tpl-hub):not(.rc-tpl-landing).content-style-unboxed .site {
	background: var(--rc-bone);
}
body:not(.rc-tpl-hub):not(.rc-tpl-landing) h1,
body:not(.rc-tpl-hub):not(.rc-tpl-landing) h2,
body:not(.rc-tpl-hub):not(.rc-tpl-landing) h3,
body:not(.rc-tpl-hub):not(.rc-tpl-landing) h4,
body:not(.rc-tpl-hub):not(.rc-tpl-landing) h5,
body:not(.rc-tpl-hub):not(.rc-tpl-landing) h6 {
	font-family: 'Fraunces', Georgia, serif;
	color: var(--rc-ink);
}
body:not(.rc-tpl-hub):not(.rc-tpl-landing) .entry-content a:not(.rc-btn):not(.rc-naplink):not(.rc-tab),
body:not(.rc-tpl-hub):not(.rc-tpl-landing) .footer-html-inner a:not(.rc-btn):not(.rc-naplink):not(.rc-tab),
body:not(.rc-tpl-hub):not(.rc-tpl-landing) a:not(.wp-block-button__link):not(.wpcf7-submit):not(.rc-btn):not(.rc-naplink):not(.rc-tab) {
	color: var(--rc-gold-bright);
}
body:not(.rc-tpl-hub):not(.rc-tpl-landing) .entry-content a:not(.rc-btn):not(.rc-naplink):not(.rc-tab):hover,
body:not(.rc-tpl-hub):not(.rc-tpl-landing) .footer-html-inner a:not(.rc-btn):not(.rc-naplink):not(.rc-tab):hover,
body:not(.rc-tpl-hub):not(.rc-tpl-landing) a:not(.wp-block-button__link):not(.wpcf7-submit):not(.rc-btn):not(.rc-naplink):not(.rc-tab):hover {
	color: var(--rc-gold);
}

/* ---- Nav bar (site-wide; the 3 custom templates render their own <nav>
   and never contain #masthead, so these rules simply don't match there) ---- */
#masthead.site-header {
	background: var(--rc-charcoal);
}
#masthead .site-title,
#masthead .site-title-wrap p,
#masthead .site-title a,
#masthead .brand {
	color: var(--rc-champagne) !important;
}
/* Same treatment as .nav-links a on the custom templates: champagne text
   at reduced opacity, full opacity + a gold-bright underline slide-in on
   hover — not a color swap. */
#masthead #primary-menu > li > a,
#masthead #mobile-menu > li > a,
#masthead .menu-item a {
	position: relative;
	color: var(--rc-champagne);
	opacity: 0.85;
	transition: opacity 0.2s ease;
}
#masthead #primary-menu > li > a::after,
#masthead .menu-item a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -2px;
	height: 1px;
	background: var(--rc-gold-bright);
	transition: right 0.25s ease;
}
#masthead #primary-menu > li > a:hover,
#masthead #primary-menu > li.current-menu-item > a,
#masthead .menu-item a:hover {
	color: var(--rc-champagne);
	opacity: 1;
}
#masthead #primary-menu > li > a:hover::after,
#masthead #primary-menu > li.current-menu-item > a::after,
#masthead .menu-item a:hover::after {
	right: 0;
}
#masthead .sub-menu {
	background: var(--rc-charcoal-2);
}
#masthead .sub-menu a {
	color: var(--rc-champagne);
	opacity: 0.85;
}
#masthead .sub-menu a:hover {
	opacity: 1;
}
#masthead .kadence-svg-icon {
	color: var(--rc-champagne);
}

/* ---- Footer (site-wide; same rationale as nav above) ---- */
#colophon.site-footer {
	background: var(--rc-charcoal);
	color: var(--rc-champagne);
}
#colophon .rc-footer-brand {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 1.1rem;
	letter-spacing: 0.04em;
	color: var(--rc-champagne);
	margin-bottom: 0.75rem;
}
#colophon .rc-footer-brand span {
	color: var(--rc-gold-bright);
}
#colophon .footer-html-inner p {
	color: var(--rc-champagne);
	opacity: 0.85;
}
/* Same treatment as .footer-social a on the custom templates: champagne,
   underlined, a subtle opacity dim on hover — not a color swap. */
#colophon a {
	color: var(--rc-champagne);
	text-decoration: underline;
	text-underline-offset: 2px;
	opacity: 0.85;
}
#colophon a:hover {
	opacity: 0.65;
}

/* ---- Page title band (long service-page titles) ----
   Kadence uses a different modifier class per context — page-hero-section
   for pages, post-hero-section for single blog posts,
   post-archive-hero-section for category/tag archive listings — so all
   three need covering for genuinely site-wide coverage. */
.entry-hero.page-hero-section,
.entry-hero.post-hero-section,
.entry-hero.post-archive-hero-section {
	background: var(--rc-charcoal) !important;
}
.entry-hero .entry-title {
	font-family: 'Fraunces', Georgia, serif;
	color: var(--rc-champagne) !important;
}
.entry-hero .kadence-breadcrumbs,
.entry-hero .kadence-breadcrumbs a {
	color: var(--rc-champagne);
	opacity: 0.75;
}

/* Single blog posts on this install use Kadence's "Normal" title layout
   (content-title-style-normal), not the "Above"/hero layout pages use —
   confirmed via computed styles, not assumed — so .entry-header.post-title
   renders inline inside the white content card, with no .entry-hero
   wrapper to target above. Styled as its own dark band (full-bleed via
   negative margins matching .entry-content-wrap's own padding) so blog
   posts still get a matching page-title treatment. */
.entry-header.post-title {
	background: var(--rc-charcoal);
	margin: -2rem -2rem 2rem;
	padding: 2.5rem 2rem;
}
@media all and (max-width: 767px) {
	.entry-header.post-title {
		margin: -1.5rem -1.5rem 1.5rem;
		padding: 2rem 1.5rem;
	}
}
.entry-header.post-title .entry-title {
	font-family: 'Fraunces', Georgia, serif;
	color: var(--rc-champagne);
}
.entry-header.post-title .entry-meta {
	color: var(--rc-champagne);
	opacity: 0.7;
}
.entry-header.post-title .entry-meta a {
	color: var(--rc-champagne);
}

/* ---------------------------------------------------------------------
 * Contact Us — Contact Form 7 styling to match the site's established
 * brand palette (charcoal / gold / champagne / bone). Scoped to CF7's
 * own markup so it only affects the contact form, not other content.
 * ------------------------------------------------------------------- */
.wpcf7-form {
	max-width: 640px;
	margin: 2rem auto 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5rem;
}
.wpcf7-form .form-1-column,
.wpcf7-form .form-2-column {
	flex: 1 1 240px;
	margin: 0 0 1.1rem;
}
.wpcf7-form .form-full {
	flex: 1 1 100%;
	margin: 0 0 1.1rem;
}
.wpcf7-form label {
	display: block;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #906355;
	margin-bottom: 0.4rem;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
	width: 100%;
	padding: 0.7rem 0.9rem;
	background: #F6E3DF;
	border: 1px solid rgba(251, 241, 236, 0.18);
	border-radius: 3px;
	font-size: 0.95rem;
	color: #3B2415;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form textarea:focus {
	border-color: #906355;
	background: #fff;
	outline: none;
}
.wpcf7-form textarea {
	min-height: 130px;
	resize: vertical;
}
.wpcf7-form .wpcf7-list-item {
	margin: 0 0.6rem 0 0;
}
.wpcf7-form input[type="checkbox"] {
	accent-color: #906355;
	margin-right: 0.4rem;
}
/* Same specificity trap as .btn-outline in landing-pages.css: the reset rule
   `body:not(.rc-tpl-hub):not(.rc-tpl-landing) input` is (0,
2,
2) and beat this
   selector at (0,
2,
1),
so the Send button inherited --rc-ink (#3B2415) over its
   own #FBF1EC background — ~1.05:1,
unreadable. `html body` prefix lifts this to
   (0,
2,
3). Scoped to .wpcf7-form,
and only one CF7 form exists site-wide. */
html body .wpcf7-form input[type="submit"] {
	background: #FBF1EC;
	color: #3B2415;
	border: 1px solid #906355;
	padding: 0.75rem 2rem;
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: 3px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
html body .wpcf7-form input[type="submit"]:hover {
	background: #B1887B;
	color: #FBF1EC;
}
.wpcf7-form .wpcf7-not-valid-tip {
	color: #b3261e;
	font-size: 0.8rem;
	margin-top: 0.3rem;
}
.wpcf7-response-output {
	max-width: 640px;
	margin: 1rem auto 0;
	padding: 0.8rem 1rem;
	border-radius: 3px;
	font-size: 0.9rem;
}


/* ---------------------------------------------------------------------
 * FLOATING WHATSAPP BUTTON — site-wide.
 * Lives here rather than in landing-pages.css because that file is only
 * enqueued on the hub/corporate/weddings/feature-work templates, while the
 * button now renders on every page via wp_footer. style.css is the only
 * child-theme stylesheet loaded unconditionally.
 * Uses --rc-gold-bright: the landing pages' --gold-bright is not defined
 * outside them, so referencing it here would silently fall back to nothing.
 * z-index 60 clears the landing nav's 50 and Kadence's own sticky header.
 * ------------------------------------------------------------------- */
.wa-fab {
	position: fixed; right: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px);
	z-index: 60; width: 68px; height: 68px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: #25d366; color: #fff; text-decoration: none;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
	transition: transform .2s ease, box-shadow .2s ease;
}
/* fill is set explicitly rather than via currentColor: the FAB is an <a>,
and
   both stylesheets recolour links with far higher specificity than .wa-fab —
   `body:not(.rc-tpl-hub):not(.rc-tpl-landing) a:not(...)` (0,
4,
2) on Kadence
   pages and `body.rc-tpl-landing a:not(.rc-btn):not(.rc-naplink):not(.rc-tab) { color: inherit }` (0,1,2) on the landing
   pages. Either one turned the glyph gold or ink instead of white. Setting
   fill directly takes the link cascade out of the picture; the colour rule
   below is belt-and-braces for anything else inheriting from the anchor. */
.wa-fab svg { width: 38px; height: 38px; fill: #fff; display: block; }
html body a.wa-fab { color: #fff; }
.wa-fab:hover { transform: scale(1.07); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45); }
.wa-fab:focus-visible { outline: 3px solid var(--rc-gold-bright, #B1887B); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .wa-fab { transition: none; } }
@media (max-width: 600px) {
	.wa-fab { width: 60px; height: 60px; }
	.wa-fab svg { width: 34px; height: 34px; }
}

/* Keep each footer's right-hand content clear of the button. Without this the
   FAB sat on top of the landing footer's "YouTube" link (~537px² of it) at
   1920/1440/1024 — an unclickable link, not a cosmetic overlap. Applied to the
   landing footers and Kadence's own, since the button is now on every page. */
@media (min-width: 601px) {
	body.rc-tpl-landing > footer,
	body.rc-tpl-hub > footer,
	.site-footer .site-container,
	.site-footer .site-info { padding-right: 96px; }
}

/* =========================================================================
 * STATS / TRUST BAND  +  BRAND STRIP
 * Added 2026-09-01 alongside the brand palette. Both sections were shipped
 * as markup before any styling existed; this is that styling.
 * ========================================================================= */

.rc-stats {
	background: var(--rc-charcoal-2);
	padding: clamp(38px, 6vw, 64px) 20px;
	border-top: 1px solid rgba(59, 36, 21, 0.08);
	border-bottom: 1px solid rgba(59, 36, 21, 0.08);
}
.rc-stats-inner {
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: clamp(24px, 4vw, 48px);
	text-align: center;
}
.rc-stat { display: flex; flex-direction: column; gap: 6px; }
.rc-stat-num {
	font-family: 'Fraunces', Georgia, serif;
	font-size: clamp(34px, 5vw, 52px);
	line-height: 1;
	color: var(--rc-gold);
	font-weight: 400;
}
.rc-stat-label {
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rc-ink-soft);
}

.rc-brands {
	background: var(--rc-bone);
	padding: clamp(40px, 6vw, 72px) 20px;
}
.rc-brands-inner { max-width: 1080px; margin: 0 auto; text-align: center; }
.rc-brands-tagline {
	max-width: 760px;
	margin: 0 auto clamp(28px, 4vw, 44px);
	color: var(--rc-ink-soft);
	font-size: clamp(15px, 1.6vw, 17px);
	line-height: 1.65;
}
.rc-brands-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(22px, 4vw, 56px);
}
.rc-brand { margin: 0; display: flex; align-items: center; }
/* Logos are supplied at wildly different intrinsic sizes; cap by height so
   they optically match rather than by width, which would leave the wordmark
   logos tiny next to the ones with a device above the type. */
.rc-brand-logo {
	/* Source files are 842x595 canvases with ~35% white padding baked in, so a
	   46px cap rendered the actual wordmarks at roughly 30px. Raised so the
	   marks themselves read at a sensible size. */
	max-height: 78px;
	width: auto;
	max-width: 200px;
	object-fit: contain;
	opacity: .72;
	transition: opacity .2s ease;
}
.rc-brand-logo:hover { opacity: 1; }
.rc-brand--text {
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--rc-ink-soft);
}
@media (max-width: 600px) {
	.rc-brand-logo { max-height: 56px; max-width: 150px; }
}

/* =========================================================================
 * KADENCE PAGE-TITLE BAND
 * Kadence renders its own title area with a pale blue-grey default that sits
 * outside the child theme's palette. Brought into the brand: pearl ivory
 * ground, deep plum type. Scoped to Kadence's own wrappers so nothing else
 * inherits it.
 * ========================================================================= */
.wp-site-blocks .entry-hero-container-inner,
.entry-hero-container-inner,
.entry-hero .entry-header,
#wrapper .entry-hero-container-inner {
	background: var(--rc-bone) !important;
	border-bottom: 1px solid rgba(59, 36, 21, 0.08);
}
.entry-hero-container-inner .entry-title,
.entry-hero .entry-title,
.entry-hero-container-inner .kadence-breadcrumbs,
.entry-hero-container-inner .kadence-breadcrumbs a {
	color: var(--rc-ink) !important;
}
.entry-hero-container-inner .kadence-breadcrumbs a:hover { color: var(--rc-gold) !important; }

/* ---------------- HOMEPAGE HERO (full-bleed photograph) ----------------
 * The photograph IS the hero background: absolutely positioned, object-fit
 * cover, edge to edge, no radius, no border, no box. A gradient scrim sits
 * between the photo and the copy so the headline reads directly on the image.
 *
 * Scrim opacity is solved, not guessed. Over a worst-case pure-white region of
 * a photograph, cream #F9F2EE text needs >= .65 alpha of #3B2415 to clear AA
 * (4.54:1); .72 gives 5.76:1. The horizontal gradient therefore never drops
 * below .74 across the half of the frame the copy occupies, and only thins out
 * on the far side where no text sits.
 * -------------------------------------------------------------------- */
.rc-hero {
	position: relative;
	isolation: isolate;
	background: var(--rc-dark-bg);
	/* Reference uses min-height:74vh with the content vertically centred and
	   capped at 760px — that, not font-size alone, is what makes the headline
	   own the screen. Padding matches the reference's own clamp values; the
	   nav is in normal flow above, so no overlay allowance is needed. Extra
	   bottom room leaves space for the stat bar to overlap upward. */
	padding: clamp(90px, 12vw, 130px) clamp(20px, 5vw, 56px) clamp(120px, 14vw, 165px);
	min-height: 74vh;
	display: flex;
	align-items: center;
	overflow: hidden;
}
.rc-hero-bg { position: absolute; inset: 0; z-index: -2; }
.rc-hero-bg img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: center 28%;
	display: block;
	border-radius: 0; box-shadow: none;
}
.rc-hero-scrim {
	position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		/* Rose, not sepia. The previous scrim was a brown-plum that muddied the
		   warm photo; this is the berry ground plus a magenta-rose wash, so the
		   overlay reads pink rather than washed-out brown. */
		linear-gradient(100deg,
			rgba(59, 36, 21, .93) 0%,
			rgba(59, 36, 21, .86) 38%,
			rgba(59, 36, 21, .74) 58%,
			rgba(59, 36, 21, .44) 100%),
		linear-gradient(120deg, rgba(144, 99, 85, .30) 0%, rgba(177, 136, 123, .16) 55%, rgba(177, 136, 123, 0) 100%),
		linear-gradient(to bottom, rgba(59, 36, 21, .55) 0%, rgba(59, 36, 21, 0) 30%);
}
/* flex: 1 0 auto, not width:100% — as a flex item this box otherwise shrinks
   to its content and the headline wraps to one word per line. */
.rc-hero-inner { position: relative; flex: 1 1 auto; width: 100%; max-width: 1180px; margin: 0 auto; }
.rc-hero-copy { max-width: min(760px, 62%); }
.rc-hero-headline {
	font-family: 'Fraunces', Georgia, serif; font-weight: 400;
	font-size: clamp(38px, 6.4vw, 82px); line-height: 1.02; letter-spacing: -0.015em;
	color: var(--rc-dark-ink); margin: 0 0 18px;
	text-shadow: 0 2px 18px rgba(59, 36, 21, .55);
}
.rc-hero-subline {
	color: var(--rc-dark-ink); font-size: clamp(15px, 1.7vw, 18px);
	line-height: 1.65; margin: 0 0 30px; max-width: 46ch;
	text-shadow: 0 1px 10px rgba(59, 36, 21, .6);
}
.rc-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.rc-btn {
	display: inline-block; padding: 13px 28px; border-radius: 999px;
	font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
	text-decoration: none; transition: background .2s, color .2s, border-color .2s;
}
.rc-btn--primary { background: var(--rc-gold); color: var(--rc-white); border: 1px solid var(--rc-gold); }
.rc-btn--primary:hover { background: var(--rc-ink); border-color: var(--rc-ink); color: var(--rc-white); }
.rc-btn--ghost { background: transparent; color: var(--rc-ink); border: 1px solid rgba(59, 36, 21,.28); }
.rc-btn--ghost:hover { border-color: var(--rc-gold); color: var(--rc-gold); }
/* No-photo fallback keeps the old solid-band behaviour. */
.rc-hero--noimg { min-height: 0; }
.rc-hero--noimg .rc-hero-copy { max-width: none; text-align: center; }
.rc-hero--noimg .rc-hero-ctas { justify-content: center; }

@media (max-width: 860px) {
	/* Single column: the copy spans the frame, so the scrim must be uniform
	   rather than fading to one side. */
	.rc-hero-copy { max-width: none; }
	.rc-hero-scrim {
		background:
			linear-gradient(to bottom, rgba(59, 36, 21, .90) 0%, rgba(59, 36, 21, .78) 55%, rgba(59, 36, 21, .84) 100%),
			linear-gradient(120deg, rgba(144, 99, 85, .26), rgba(177, 136, 123, .12));
	}
	.rc-hero-bg img { object-position: center 22%; }

	/* ---- Orientation-aware mobile hero -------------------------------
	 * The crop runs in opposite directions at the two ends of the range, so
	 * one rule cannot serve both.
	 *
	 * A LANDSCAPE photo in the default 74vh phone frame is cropped
	 * HORIZONTALLY — measured at 39% of the source width on a 390px viewport,
	 * which reduced the subject to a narrow vertical slice. Nothing about
	 * object-position fixes that; only a shorter frame shows more width. So
	 * drop the min-height floor and trim the vertical padding, letting the
	 * copy set the height. The flex box still grows for the content, so this
	 * is a floor being removed, not a fixed height being imposed — a longer
	 * headline cannot be clipped.
	 *
	 * Square-ish sources sit between the two and get a smaller reduction.
	 * PORTRAIT sources already fill a tall frame almost exactly, so they keep
	 * the 74vh default and are deliberately not listed here. */
	.rc-hero--landscape {
		min-height: 0;
		padding-top: clamp(56px, 9vw, 80px);
		padding-bottom: clamp(84px, 11vw, 110px);
	}
	.rc-hero--square { min-height: 56vh; }

	/* Y anchoring still matters whenever the frame ends up shorter than the
	   scaled photo: bias to the upper third, where faces sit. */
	.rc-hero--landscape .rc-hero-bg img,
	.rc-hero--square .rc-hero-bg img { object-position: center 25%; }
}

/* A PORTRAIT photo in the wide desktop frame is the mirror-image problem —
   cropped vertically, keeping roughly a third of the source height. Anchor it
   high so that third contains the face rather than the middle of a dress. */
@media (min-width: 861px) {
	.rc-hero--portrait .rc-hero-bg img { object-position: center 18%; }
}

/* =========================================================================
 * STATS / TRUST BAND  +  BRAND STRIP
 * Added 2026-09-01 alongside the brand palette. Both sections were shipped
 * as markup before any styling existed; this is that styling.
 * ========================================================================= */

.rc-stats {
	background: var(--rc-charcoal-2);
	padding: clamp(38px, 6vw, 64px) 20px;
	border-top: 1px solid rgba(59, 36, 21, 0.08);
	border-bottom: 1px solid rgba(59, 36, 21, 0.08);
}
.rc-stats-inner {
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: clamp(24px, 4vw, 48px);
	text-align: center;
}
.rc-stat { display: flex; flex-direction: column; gap: 6px; }
.rc-stat-num {
	font-family: 'Fraunces', Georgia, serif;
	font-size: clamp(34px, 5vw, 52px);
	line-height: 1;
	color: var(--rc-gold);
	font-weight: 400;
}
.rc-stat-label {
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rc-ink-soft);
}

.rc-brands {
	background: var(--rc-bone);
	padding: clamp(40px, 6vw, 72px) 20px;
}
.rc-brands-inner { max-width: 1080px; margin: 0 auto; text-align: center; }
.rc-brands-tagline {
	max-width: 760px;
	margin: 0 auto clamp(28px, 4vw, 44px);
	color: var(--rc-ink-soft);
	font-size: clamp(15px, 1.6vw, 17px);
	line-height: 1.65;
}
.rc-brands-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(22px, 4vw, 56px);
}
.rc-brand { margin: 0; display: flex; align-items: center; }
/* Logos are supplied at wildly different intrinsic sizes; cap by height so
   they optically match rather than by width, which would leave the wordmark
   logos tiny next to the ones with a device above the type. */
.rc-brand-logo {
	/* Source files are 842x595 canvases with ~35% white padding baked in, so a
	   46px cap rendered the actual wordmarks at roughly 30px. Raised so the
	   marks themselves read at a sensible size. */
	max-height: 78px;
	width: auto;
	max-width: 200px;
	object-fit: contain;
	opacity: .72;
	transition: opacity .2s ease;
}
.rc-brand-logo:hover { opacity: 1; }
.rc-brand--text {
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--rc-ink-soft);
}
@media (max-width: 600px) {
	.rc-brand-logo { max-height: 56px; max-width: 150px; }
}

/* =========================================================================
 * KADENCE PAGE-TITLE BAND
 * Kadence renders its own title area with a pale blue-grey default that sits
 * outside the child theme's palette. Brought into the brand: pearl ivory
 * ground, deep plum type. Scoped to Kadence's own wrappers so nothing else
 * inherits it.
 * ========================================================================= */
.wp-site-blocks .entry-hero-container-inner,
.entry-hero-container-inner,
.entry-hero .entry-header,
#wrapper .entry-hero-container-inner {
	background: var(--rc-bone) !important;
	border-bottom: 1px solid rgba(59, 36, 21, 0.08);
}
.entry-hero-container-inner .entry-title,
.entry-hero .entry-title,
.entry-hero-container-inner .kadence-breadcrumbs,
.entry-hero-container-inner .kadence-breadcrumbs a {
	color: var(--rc-ink) !important;
}
.entry-hero-container-inner .kadence-breadcrumbs a:hover { color: var(--rc-gold) !important; }

/* (The original two-column hero block lived here: a 1fr/1fr grid with the
 * photo in a rounded, shadowed box beside the copy. It was superseded by the
 * full-bleed construction further up this file, and left behind it overrode
 * the new rules purely by appearing later in the cascade -- which is why the
 * headline was wrapping one word per line. Removed. The .rc-btn rules it also
 * carried are defined with the full-bleed block.) */

/* ---------------- FRONT-PAGE TITLE SUPPRESSION ----------------
 * The static front page renders Kadence's page-title band reading "Home",
 * directly above the hero, which duplicates nothing useful. Suppressed on
 * the front page ONLY — every other page keeps its title band.
 * -------------------------------------------------------------- */
body.home.page .entry-hero-container-inner,
body.home.page .entry-hero,
body.home.page .page-hero-section { display: none !important; }

/* ---------------- HOMEPAGE SECTIONS ---------------- */
.rc-services-home, .rc-work-home, .rc-recent-home { padding: clamp(44px, 6vw, 84px) 20px; max-width: 1180px; margin: 0 auto; }
.rc-work-home { background: var(--rc-charcoal); max-width: none; }
.rc-work-home > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.rc-sec-head { text-align: center; margin-bottom: clamp(28px, 4vw, 48px); }
.rc-sec-eyebrow { display: block; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--rc-gold); margin-bottom: 10px; }
.rc-sec-heading { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: clamp(26px, 3.4vw, 40px); color: var(--rc-ink); margin: 0; }
.rc-sec-intro { color: var(--rc-ink-soft); max-width: 56ch; margin: 14px auto 0; }
.rc-sec-more { text-align: center; margin-top: 32px; }

.rc-svc-grid, .fw-index-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: clamp(16px, 2.4vw, 28px);
}
.rc-svc-card, .fw-index-card {
	display: flex; flex-direction: column; text-decoration: none;
	background: var(--rc-white); border: 1px solid rgba(59, 36, 21,.08);
	border-radius: 4px; overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.rc-svc-card:hover, .fw-index-card:hover {
	transform: translateY(-3px); border-color: rgba(144, 99, 85,.3);
	box-shadow: 0 14px 32px rgba(59, 36, 21,.10);
}
.rc-svc-thumb, .fw-index-photo { display: block; aspect-ratio: 4 / 3; background: var(--rc-charcoal-2); overflow: hidden; }
.rc-svc-thumb img, .fw-index-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-svc-body, .fw-index-meta { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.rc-svc-title, .fw-index-card-title { font-family: 'Fraunces', Georgia, serif; font-size: 19px; color: var(--rc-ink); line-height: 1.25; }
.rc-svc-excerpt, .fw-index-card-excerpt { font-size: 14px; line-height: 1.6; color: var(--rc-ink-soft); }
.rc-svc-price { margin-top: 4px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--rc-gold); }
.fw-index-empty { text-align: center; color: var(--rc-ink-soft); padding: 28px 0; }

.rc-cta-final { background: var(--rc-charcoal-2); padding: clamp(48px, 7vw, 92px) 20px; text-align: center; }
.rc-cta-inner { max-width: 780px; margin: 0 auto; }
.rc-cta-heading { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: clamp(26px, 3.6vw, 42px); color: var(--rc-ink); margin: 0 0 12px; }
.rc-cta-sub { color: var(--rc-ink-soft); margin: 0 0 28px; }
.rc-cta-buttons { justify-content: center; margin-bottom: 40px; }
.rc-nap { border-top: 1px solid rgba(59, 36, 21,.12); padding-top: 28px; }
.rc-nap-name { font-family: 'Fraunces', Georgia, serif; font-size: 20px; color: var(--rc-ink); margin: 0 0 8px; }
.rc-nap-line { color: var(--rc-ink-soft); font-size: 15px; line-height: 1.7; margin: 0 0 6px; }
.rc-nap-social { margin: 14px 0 0; display: flex; gap: 20px; justify-content: center; }
.rc-nap-social a { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }

/* NAP links (social + mailto) sit on the tinted panel, where the supplied
 * raspberry measures 2.86:1. They carry .rc-naplink, which is excluded from
 * the generic link rule above -- the same mechanism that rule already uses for
 * .rc-btn. Adding specificity instead would just restart the arms race that
 * made the hero button unreadable. */
.rc-naplink { color: var(--rc-gold); }
.rc-naplink:hover { color: var(--rc-ink); }

/* Kadence's skip link is raspberry on the page ground (3.16:1). It is only
 * visible on keyboard focus, which is exactly when it must be readable. */
.skip-link, .skip-link:focus { color: var(--rc-ink) !important; background: var(--rc-white) !important; }


/* =========================================================================
 * DARK / LIGHT SECTION ALTERNATION  +  PORTED INTERACTION CODE
 *
 * The .pop / .pop-stagger reveal rules below are copied VERBATIM from
 * assets/landing-pages.css (the source project's production stylesheet, which
 * the starter kit ships unmodified). Same easing curve, same distances, same
 * durations, same stagger delays, same reduced-motion escape hatch. Only the
 * scoping changed: the original was gated on body.rc-tpl-*, which are template
 * classes this site does not use.
 *
 * Mechanism only — no colours, imagery or copy carried over.
 * ====================================================================== */

:root {
	--rc-dark-bg: #3B2415;      /* ANCHOR chocolate brown */
	--rc-dark-ink: #F9F2EE;     /* text on dark       */
	--rc-dark-accent: #B1887B;  /* accent on dark     */
}

/* ---------- POP-IN REVEAL (verbatim from landing-pages.css) ---------- */
.js .pop, .js .pop-stagger > * { opacity: 0; }
.js .pop { transform: scale(0.86) translateY(26px); transition: opacity .65s cubic-bezier(.34,1.56,.64,1), transform .65s cubic-bezier(.34,1.56,.64,1); }
.js .pop.is-visible { opacity: 1; transform: scale(1) translateY(0); }
.js .pop-stagger > * { transform: scale(0.86) translateY(22px); transition: opacity .6s cubic-bezier(.34,1.56,.64,1), transform .6s cubic-bezier(.34,1.56,.64,1); }
.js .pop-stagger.is-visible > * { opacity: 1; transform: scale(1) translateY(0); }
.js .pop-stagger.is-visible > *:nth-child(1) { transition-delay: 0s; }
.js .pop-stagger.is-visible > *:nth-child(2) { transition-delay: .08s; }
.js .pop-stagger.is-visible > *:nth-child(3) { transition-delay: .16s; }
.js .pop-stagger.is-visible > *:nth-child(4) { transition-delay: .24s; }
.js .pop-stagger.is-visible > *:nth-child(5) { transition-delay: .32s; }
.js .pop-stagger.is-visible > *:nth-child(6) { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
	/* No opacity override here on purpose. home-interactions.js already adds
	 * .is-visible to every .pop element when reduced motion is requested, which
	 * reveals them through the normal rule. An `opacity: 1 !important` here was
	 * redundant with that, and being !important it outranked every other rule
	 * for these elements -- a needlessly blunt instrument sitting on top of the
	 * exact property the reveal depends on. Transitions are still suppressed. */
	.pop, .pop-stagger > * { transition: none !important; transform: none !important; }
	.rc-collage-tile img { transition: none !important; }
}

/* ---------- FULL-BLEED DARK BANDS ---------- */
.rc-band-dark {
	background: var(--rc-dark-bg);
	color: var(--rc-dark-ink);
	/* full-bleed out of Kadence's constrained content column */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.rc-band-dark .rc-hero-headline,
.rc-band-dark .rc-cta-heading,
.rc-band-dark .rc-sec-heading { color: var(--rc-dark-ink); }
.rc-band-dark .rc-hero-subline,
.rc-band-dark .rc-cta-sub,
.rc-band-dark .rc-nap-line,
.rc-band-dark .rc-nap-name,
.rc-band-dark .rc-sec-intro { color: var(--rc-dark-ink); }
.rc-band-dark .rc-sec-eyebrow { color: var(--rc-dark-accent); }
.rc-band-dark .rc-nap { border-top-color: rgba(249, 242, 238, 0.18); }
.rc-band-dark .rc-btn--ghost { color: var(--rc-dark-ink); border-color: rgba(249, 242, 238, 0.45); }
.rc-band-dark .rc-btn--ghost:hover { color: var(--rc-dark-bg); background: var(--rc-dark-ink); border-color: var(--rc-dark-ink); }
body:not(.rc-tpl-hub):not(.rc-tpl-landing) .rc-band-dark a.rc-naplink { color: var(--rc-dark-accent); }
body:not(.rc-tpl-hub):not(.rc-tpl-landing) .rc-band-dark a.rc-naplink:hover { color: var(--rc-dark-ink); }
.rc-hero.rc-band-dark .rc-hero-media img { box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }

/* ---------- COLLAGE GRID (real Glam Aurora photos) ---------- */
.rc-collage {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 150px;
	gap: clamp(10px, 1.4vw, 18px);
}
.rc-collage-tile {
	position: relative; display: block; overflow: hidden; border-radius: 4px;
	background: var(--rc-charcoal-2); text-decoration: none;
	grid-column: span 1; grid-row: span 2;
}
/* Deliberately irregular: the 1st and 6th tiles are wide, the 3rd is tall.
   Pattern repeats every 6 tiles so any tile count stays balanced. */
.rc-collage-tile:nth-child(6n+1) { grid-column: span 2; grid-row: span 2; }
.rc-collage-tile:nth-child(6n+3) { grid-row: span 3; }
.rc-collage-tile:nth-child(6n+6) { grid-column: span 2; }
.rc-collage-tile img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	/* Hover-zoom: same technique as the source project's .split-card:hover::before */
	transform: scale(1); transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.rc-collage-tile:hover img, .rc-collage-tile:focus-visible img { transform: scale(1.06); }
.rc-collage-cap {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 26px 16px 14px; color: #FFFFFF; font-size: 14px; line-height: 1.35;
	/* The caption sits over a photograph, so its contrast depends on the image
	 * rather than on a colour I can measure. Two guarantees instead: the
	 * gradient never drops below .68 alpha behind the text, and a text-shadow
	 * carries the glyph edges. Solved, not guessed: at .68 alpha over a
	 * worst-case pure-white photo region the backdrop computes to rgb(140, 90, 76)
	 * and white text on it is 5.99:1. At .55 it was 3.89:1 — below AA. */
	background: linear-gradient(to top, rgba(59, 36, 21, .95) 0%, rgba(59, 36, 21, .68) 62%, rgba(59, 36, 21, 0) 100%);
	text-shadow: 0 1px 3px rgba(59, 36, 21, .85);
	opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease;
}
.rc-collage-tile:hover .rc-collage-cap, .rc-collage-tile:focus-visible .rc-collage-cap { opacity: 1; transform: translateY(0); }
.rc-collage-tile:focus-visible { outline: 3px solid var(--rc-gold); outline-offset: 3px; }
@media (max-width: 900px) {
	.rc-collage { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
	.rc-collage-tile:nth-child(6n+3) { grid-row: span 2; }
	.rc-collage-cap { opacity: 1; transform: none; }
}

/* The kit colours headings with `body:not(.rc-tpl-hub):not(.rc-tpl-landing) h1`
 * — (0,3,1). A bare `.rc-band-dark .rc-hero-headline` is (0,2,0) and loses,
 * which rendered the hero headline deep plum on the dark band at 1.45:1.
 * Matching the same body prefix so these win. */
body:not(.rc-tpl-hub):not(.rc-tpl-landing) .rc-band-dark h1,
body:not(.rc-tpl-hub):not(.rc-tpl-landing) .rc-band-dark h2,
body:not(.rc-tpl-hub):not(.rc-tpl-landing) .rc-band-dark .rc-hero-headline,
body:not(.rc-tpl-hub):not(.rc-tpl-landing) .rc-band-dark .rc-cta-heading { color: var(--rc-dark-ink); }

/* =========================================================================
 * STRUCTURAL PASS — measured against the recovered reference template
 * (template-weddings.php + its landing-pages.css, read from the verified
 * starter-kit archive). Where this diverges from that reference it is a
 * deliberate instruction, noted inline.
 * ====================================================================== */

/* ---- 1. NAV: reference pattern ----------------------------------------
 * Matches template-weddings.php's .nav exactly in behaviour: a near-opaque
 * dark bar with a 10px backdrop blur, position: sticky at top 0, sitting in
 * normal flow ABOVE the hero rather than floating over the photograph.
 *
 * The reference uses rgba(59, 36, 21,0.9) — its own charcoal at 0.9 alpha. The
 * equivalent here is this palette's own dark ground, #3B2415, at the same
 * alpha, so the relationship is reproduced without importing their colour.
 * -------------------------------------------------------------------- */
body.home #masthead,
body.home .site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(59, 36, 21, 0.9) !important;
	backdrop-filter: blur(10px);
	border-bottom: 0 !important;
	box-shadow: none !important;
	transition: background .3s ease;
}
body.home .site-header-wrap,
body.home .site-header-row,
body.home .site-header-inner-wrap,
body.home .site-branding,
body.home .header-navigation { background: transparent !important; }
body.home .site-header a,
body.home .site-header .site-title,
body.home .header-navigation a,
body.home .site-branding a { color: var(--rc-dark-ink) !important; }
body.home .header-navigation a:hover,
body.home .site-header a:hover { color: var(--rc-dark-accent) !important; }
body.home .menu-toggle-open .kadence-svg-icon,
body.home .mobile-toggle-open-container .kadence-svg-icon { color: var(--rc-dark-ink) !important; }

/* ---- 2. FLUSH SECTIONS --------------------------------------------------
 * Stats and services sit edge to edge with no inset, no radius, no shadow.
 *
 * DIVERGENCE FROM REFERENCE: the reference .stat-bar deliberately floats —
 * `margin: -46px clamp(20px,5vw,56px) 0` with a 34px shadow, overlapping the
 * hero as an inset band. Flush is the instruction here, so the negative
 * margin and shadow are not reproduced.
 * -------------------------------------------------------------------- */
/* Reference .stat-bar, reproduced:
 *   margin: -46px clamp(20px,5vw,56px) 0;  -> pulled up over the hero
 *   position: relative; z-index: 3;        -> sits above the hero's scrim
 *   box-shadow: 0 12px 34px rgba(0,0,0,.28)
 * The negative top margin and the inset are the point: this band deliberately
 * floats and overlaps rather than sitting flush. */
.rc-stats {
	position: relative; z-index: 3;
	width: auto;
	margin: -46px clamp(20px, 5vw, 56px) 0;
	background: var(--rc-charcoal);
	border: 0; border-radius: 0;
	box-shadow: 0 12px 34px rgba(59, 36, 21, 0.28);
	padding: 0;
}
.rc-stats-inner {
	max-width: none; margin: 0;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
}
/* Reference alternates the blocks light/dark across the band. */
.rc-stat { padding: 22px clamp(16px, 2.4vw, 28px); gap: 6px; }
.rc-stat:nth-child(odd)  { background: var(--rc-gold-bright); color: var(--rc-dark-bg); }
.rc-stat:nth-child(even) { background: var(--rc-dark-bg); color: var(--rc-dark-ink); }
.rc-stat:nth-child(odd) .rc-stat-num   { color: var(--rc-dark-bg); }
.rc-stat:nth-child(odd) .rc-stat-label { color: var(--rc-dark-bg); }
.rc-stat:nth-child(even) .rc-stat-num  { color: var(--rc-dark-accent); }
.rc-stat:nth-child(even) .rc-stat-label{ color: var(--rc-dark-ink); }
@media (max-width: 700px) {
	.rc-stats { margin: -28px clamp(14px, 4vw, 24px) 0; }
	.rc-stats-inner { grid-template-columns: 1fr; }
}
.rc-services-home, .rc-recent-home {
	width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
	background: var(--rc-bone);
	padding: clamp(52px, 8vw, 92px) clamp(20px, 5vw, 56px);
	max-width: none;
}
.rc-services-home > *, .rc-recent-home > * { max-width: 1200px; margin-left: auto; margin-right: auto; }
.rc-brands { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.rc-work-home { border-radius: 0; }

/* ---- 3. SERVICE CARDS: minimal bordered rectangles ----------------------
 * Reference .service-card: flat light ground, square corners, no shadow, and
 * an inset 1px hairline drawn with ::before that changes colour on hover.
 * No photograph. Reproduced here.
 * -------------------------------------------------------------------- */
.rc-svc-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: clamp(14px, 2vw, 22px);
}
.rc-svc-card {
	position: relative; display: flex; flex-direction: column; gap: 10px;
	background: var(--rc-charcoal);
	padding: 26px 24px 28px;
	border: 0; border-radius: 0; box-shadow: none;
	text-decoration: none; overflow: visible;
	transition: transform .3s ease, background .3s ease;
}
.rc-svc-card::before {
	content: ""; position: absolute; inset: 10px;
	border: 1px solid rgba(59, 36, 21, .22);
	pointer-events: none; transition: border-color .3s ease;
}
.rc-svc-card:hover { transform: translateY(-4px); background: var(--rc-white); }
.rc-svc-card:hover::before { border-color: var(--rc-gold); }
.rc-svc-card .service-icon { color: var(--rc-gold); display: block; width: 30px; height: 30px; margin-bottom: 4px; }
.rc-svc-card .service-icon svg { width: 100%; height: 100%; }
.rc-svc-title { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 19px; line-height: 1.2; color: var(--rc-ink); }
.rc-svc-excerpt { font-size: 13.5px; line-height: 1.6; color: var(--rc-ink-soft); }
.rc-svc-price { margin-top: auto; padding-top: 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--rc-gold); font-weight: 600; }
/* the old photo shell is gone from the markup; kill any residual rule */
.rc-svc-thumb { display: none !important; }

/* Full-bleed guard. The 100vw sections are 15px wider than clientWidth when a
 * vertical scrollbar is present (100vw includes the scrollbar; clientWidth
 * does not). Kadence's own #wrapper/.site already carry overflow-x: clip, so
 * no horizontal scrollbar appears — but relying on a parent theme's wrapper
 * for that is a dependency, not a guarantee. Asserting it here too. */
body.home { overflow-x: clip; }

/* Close the gap between the nav and the hero on the front page.
 * Kadence puts 80px of margin-top on .content-area and 32px of padding-top on
 * .entry-content-wrap, which left a 112px band of page ground between the
 * sticky nav and the hero photograph. In the reference the hero begins
 * immediately after the nav, so both are zeroed here — front page only, so
 * every other page keeps Kadence's normal content spacing. */
body.home .content-area { margin-top: 0 !important; }
body.home .entry-content-wrap { padding-top: 0 !important; }
body.home .entry.content-bg { background: transparent; box-shadow: none; }

/* ---- fixes found by measuring the rendered nav and stats band ---- */

/* Kadence colours the site title with a more specific rule than the branding
 * selector reached, leaving it #3B2415 on the #3B2415 nav — 1:1, invisible.
 * Targeted directly, including the anchor Kadence wraps it in. */
body.home #masthead .site-title,
body.home #masthead .site-title a,
body.home #masthead .brand-logo a,
body.home #masthead .site-branding .site-title a,
body.home #masthead .site-branding a .site-title { color: var(--rc-dark-ink) !important; }

/* Stats band: dark ink on the full-strength accent measured 4.503:1 — it
 * passes the 4.5 threshold by 0.003, which is no margin at all for a 12px
 * label. The lighter blush tone keeps the reference's alternating rhythm and
 * the same hue family while giving 9.35:1. The dark block keeps the accent for
 * its numerals (4.50:1 at 52px, well past the 3.0 large-text bar) and the
 * light ink for its 12px label at 13.98:1. */
.rc-stat:nth-child(odd) { background: var(--rc-blush); }
.rc-stat:nth-child(odd) .rc-stat-num,
.rc-stat:nth-child(odd) .rc-stat-label { color: var(--rc-ink); }

/* =========================================================================
 * CREAM + CHAMPAGNE GOLD on dark sections.
 * Pink stays the brand: buttons and every light-section element keep the
 * raspberry. Gold is a DARK-SECTION ACCENT ONLY — eyebrow labels and
 * emphasised headline spans — never a replacement for the pink.
 * ====================================================================== */
:root {
	--rc-cream: #F9F2EE;          /* blush @ L=0.90 — text on dark        */
	--rc-gold-champagne: #C9ADA4; /* rose-gold @ L=0.45 — dark bands only */
}
.rc-band-dark,
.rc-band-dark .rc-hero-headline,
.rc-band-dark .rc-hero-subline,
.rc-band-dark .rc-cta-heading,
.rc-band-dark .rc-cta-sub,
.rc-band-dark .rc-nap-name,
.rc-band-dark .rc-nap-line,
.rc-band-dark .rc-sec-heading,
.rc-band-dark .rc-sec-intro { color: var(--rc-cream); }
body:not(.rc-tpl-hub):not(.rc-tpl-landing) .rc-band-dark h1,
body:not(.rc-tpl-hub):not(.rc-tpl-landing) .rc-band-dark h2 { color: var(--rc-cream); }
.rc-band-dark .rc-btn--ghost { color: var(--rc-cream); border-color: rgba(249, 242, 238, .45); }
.rc-band-dark .rc-btn--ghost:hover { background: var(--rc-cream); color: var(--rc-dark-bg); border-color: var(--rc-cream); }
.rc-band-dark .rc-nap { border-top-color: rgba(249, 242, 238, .18); }
/* eyebrow labels on dark = champagne gold; on light they stay raspberry */
.rc-band-dark .rc-sec-eyebrow { color: var(--rc-gold-champagne); }
/* emphasised span inside a dark headline, the reference's gold-highlight trick */
.rc-band-dark .accent, .rc-hero-headline .accent { color: var(--rc-gold-champagne); }
body.home #masthead .site-title,
body.home #masthead .site-title a,
body.home #masthead .site-branding a .site-title { color: var(--rc-cream) !important; }
body.home .site-header a,
body.home .header-navigation a { color: var(--rc-cream) !important; }

/* ---- FEATURE WORK strip (reference .fw-* structure) ---- */
.rc-fw {
	width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
	background: var(--rc-dark-bg);
	padding: clamp(56px, 9vw, 90px) 0;
}
.rc-fw-head { max-width: 1200px; margin: 0 auto clamp(26px, 4vw, 40px); padding: 0 clamp(20px, 5vw, 56px); }
.rc-fw-head .rc-sec-heading { color: var(--rc-cream); text-align: left; }
.rc-fw-head .rc-sec-eyebrow { color: var(--rc-gold-champagne); text-align: left; }
.rc-fw-strip { position: relative; }
.rc-fw-track {
	display: flex; gap: 4px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: clamp(20px, 5vw, 56px);
	padding: 4px clamp(20px, 5vw, 56px);
	scrollbar-width: thin;
	scrollbar-color: rgba(249, 242, 238, .28) transparent;
}
.rc-fw-track::-webkit-scrollbar { height: 6px; }
.rc-fw-track::-webkit-scrollbar-thumb { background: rgba(249, 242, 238, .28); }
.rc-fw-track:focus-visible { outline: 2px solid var(--rc-gold-champagne); outline-offset: 3px; }
.rc-fw-item {
	flex: 0 0 clamp(260px, 28vw, 380px); scroll-snap-align: start;
	display: block; text-decoration: none;
	background: rgba(249, 242, 238, .06);
}
.rc-fw-photo { display: block; aspect-ratio: 4/3; overflow: hidden; background: rgba(249, 242, 238,.08); }
.rc-fw-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.rc-fw-item:hover .rc-fw-photo img { transform: scale(1.05); }
.rc-fw-meta { display: block; padding: 16px 18px 22px; }
.rc-fw-label { display: block; color: var(--rc-gold-champagne); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.rc-fw-title { display: block; font-family: 'Fraunces', Georgia, serif; color: var(--rc-cream); font-weight: 400; font-size: 18px; line-height: 1.3; margin-bottom: 8px; }
.rc-fw-excerpt { display: block; color: var(--rc-cream); opacity: .72; font-size: 13px; line-height: 1.6; }
.rc-fw-item:hover .rc-fw-title, .rc-fw-item:focus-visible .rc-fw-title { color: var(--rc-gold-champagne); }
.rc-fw-nav {
	position: absolute; top: 34%; z-index: 3;
	width: 42px; height: 42px; border-radius: 50%;
	border: 1px solid rgba(249, 242, 238, .35);
	background: rgba(59, 36, 21, .72); color: var(--rc-cream);
	font-size: 17px; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: background .2s ease, border-color .2s ease;
}
.rc-fw-nav:hover { background: var(--rc-gold); border-color: var(--rc-gold); }
.rc-fw-nav[hidden] { display: none; }
.rc-fw-prev { left: clamp(8px, 2vw, 18px); }
.rc-fw-next { right: clamp(8px, 2vw, 18px); }
.rc-fw .rc-sec-more { margin-top: 30px; }

/* NAP links on the dark closing band were the accent pink at exactly 4.50:1 —
 * passing by nothing. Champagne gold is the dark-section accent and gives real
 * margin; the pink stays on every button and light-section element. */
body:not(.rc-tpl-hub):not(.rc-tpl-landing) .rc-band-dark a.rc-naplink { color: var(--rc-gold-champagne); }
body:not(.rc-tpl-hub):not(.rc-tpl-landing) .rc-band-dark a.rc-naplink:hover { color: var(--rc-cream); }

/* ---- Makeup gallery pages (filterable by sub-style) ---- */
.rc-mg { padding: clamp(24px, 4vw, 44px) 0; }
.rc-mg-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 clamp(22px, 3vw, 34px); }
.rc-mg-chip {
	font: inherit; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
	padding: 9px 18px; border-radius: 999px; cursor: pointer;
	background: transparent; color: var(--rc-ink);
	border: 1px solid rgba(59, 36, 21, .28);
	transition: background .2s, color .2s, border-color .2s;
}
.rc-mg-chip:hover { border-color: var(--rc-gold); color: var(--rc-gold); }
.rc-mg-chip.is-active { background: var(--rc-gold); border-color: var(--rc-gold); color: var(--rc-white); }
.rc-mg-chip:focus-visible { outline: 3px solid var(--rc-gold); outline-offset: 2px; }
.rc-mg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: clamp(14px, 2vw, 22px); }
.rc-mg-item { display: flex; flex-direction: column; text-decoration: none; background: var(--rc-charcoal); }
.rc-mg-item[hidden] { display: none !important; }
.rc-mg-photo { display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--rc-charcoal-2); }
.rc-mg-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.rc-mg-item:hover .rc-mg-photo img { transform: scale(1.05); }
.rc-mg-meta { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.rc-mg-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--rc-gold); }
.rc-mg-title { font-family: 'Fraunces', Georgia, serif; font-size: 17px; line-height: 1.3; color: var(--rc-ink); }

/* Per-style empty state on the gallery pages: a warm message plus the enquiry
 * routes, rather than a bare grid. Shown when a style has no work tagged yet. */
.rc-mg-empty {
	text-align: center; padding: clamp(36px, 6vw, 64px) 20px;
	background: var(--rc-charcoal); border: 1px solid rgba(59, 36, 21, .12);
}
.rc-mg-empty-msg {
	font-family: 'Fraunces', Georgia, serif; font-size: clamp(18px, 2.4vw, 24px);
	line-height: 1.4; color: var(--rc-ink); margin: 0 auto 26px; max-width: 34ch;
}
.rc-mg-empty .rc-btn { margin: 0 6px 8px; }

/* ============================================================
 * SERVICE TILES — numbered category grid
 * Static at every width. The reference's <=780px ruleset is the
 * permanent behaviour: no sticky stage, no wheel capture.
 * ========================================================== */
.rc-tiles {
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  background: var(--rc-dark-bg);
  padding: clamp(56px, 9vw, 90px) 0;
}
.rc-tiles-head { max-width: 1200px; margin: 0 auto clamp(26px, 4vw, 40px); padding: 0 clamp(20px, 5vw, 56px); }
.rc-tiles-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
@media (min-width: 700px)  { .rc-tiles-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .rc-tiles-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.rc-tile {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  border-radius: 2px;
  background: var(--rc-dark-bg);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1),
              box-shadow .45s cubic-bezier(.22, 1, .36, 1);
}
.rc-tile:hover, .rc-tile:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(59, 36, 21, .38);
}
.rc-tile:focus-visible { outline: 2px solid var(--rc-dark-accent); outline-offset: 3px; }

.rc-tile-photo {
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.rc-tile-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
  display: block;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.rc-tile:hover .rc-tile-photo img { transform: scale(1.06); }

/* Readability scrim under the caption. Sized generously so the label sits
 * on near-solid colour rather than on whatever the photo happens to show. */
.rc-tile-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top,
              rgba(59, 36, 21, .94) 0%,
              rgba(59, 36, 21, .82) 22%,
              rgba(59, 36, 21, .18) 52%,
              rgba(59, 36, 21, 0)   72%);
  pointer-events: none;
}

.rc-tile-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex; align-items: baseline; gap: .55em;
  padding: clamp(14px, 1.6vw, 20px);
  z-index: 2;
}
.rc-tile-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(.78rem, 1vw, .9rem);
  letter-spacing: .14em;
  color: var(--rc-blush);
  flex: 0 0 auto;
}
.rc-tile-label {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1rem, 1.35vw, 1.22rem);
  line-height: 1.2;
  color: var(--rc-dark-ink);
}

/* ---- Designed placeholder --------------------------------------------
 * Used where no photograph has been chosen. Deliberately reads as a
 * graphic — flat brand wash, geometric motif, inset hairline — so an
 * empty slot never implies a photo of work that does not exist. */
.rc-tile-ph {
  background:
    radial-gradient(120% 90% at 30% 12%, #F2D7D1 0%, rgba(242, 215, 209, 0) 62%),
    linear-gradient(155deg, var(--rc-blush) 0%, #E5AFA3 48%, #D88977 100%);
}
.rc-tile-ph::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg,  rgba(255, 255, 255, .30) 0 1px, rgba(255, 255, 255, 0) 1px 14px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .30) 0 1px, rgba(255, 255, 255, 0) 1px 14px);
  opacity: .8;
}
.rc-tile-ph-motif {
  position: absolute;
  top: 50%; left: 50%;
  width: 34%; aspect-ratio: 1;
  transform: translate(-50%, -58%) rotate(45deg);
  border: 1px solid rgba(255, 255, 255, .78);
  box-shadow: inset 0 0 0 7px rgba(255, 255, 255, .22);
}
.rc-tile--placeholder .rc-tile-photo::after {
  background: linear-gradient(to top,
              rgba(59, 36, 21, .95) 0%,
              rgba(59, 36, 21, .84) 24%,
              rgba(59, 36, 21, .16) 54%,
              rgba(59, 36, 21, 0)   74%);
}

/* ---- Orientation-aware mobile tiles -------------------------------
 * Same problem as the hero, one level down: a LANDSCAPE photo forced into the
 * 4/5 portrait cell is cropped to roughly half its width — measured at 53% for
 * the 1.50 gown photo on a 390px viewport. object-position cannot help, since
 * nothing is being cut vertically.
 *
 * So give a landscape source the whole row and its own proportions: a short
 * full-width band instead of a tall narrow cell. The ratio comes from the
 * attachment's real dimensions via --rc-tile-ar, so this follows whatever
 * photo is set rather than being tuned to the one currently in slot 01.
 *
 * Scoped to <=780px, the only range where the static grid is the visible
 * layout. Above that the morph takes over, and the grid's rare desktop
 * fallback role keeps its uniform cells.
 *
 * Portrait sources are deliberately absent: they already show 100% of their
 * width in the default cell and need no change. */
@media (max-width: 780px) {
  .rc-tiles-grid > .rc-tile--landscape { grid-column: 1 / -1; }
  .rc-tile--landscape .rc-tile-photo {
    aspect-ratio: var(--rc-tile-ar, 3 / 2);
    /* Floor for the caption's sake. Only an extreme panorama reaches it, and
       there the min-height wins over the ratio and some crop returns — the
       right trade at that point. */
    min-height: 168px;
  }
  /* Square-ish sources sit between the two: keep the cell, drop the tall crop. */
  .rc-tile--square .rc-tile-photo { aspect-ratio: 1 / 1; }
}

@media (prefers-reduced-motion: reduce) {
  .rc-tile, .rc-tile-photo img { transition: none; }
  .rc-tile:hover { transform: none; }
  .rc-tile:hover .rc-tile-photo img { transform: none; }
}

.rc-tiles-head .rc-sec-eyebrow { color: var(--rc-gold-champagne); }

/* ============================================================
 * FLIP MORPH — ported from the starter kit's landing-pages.css.
 *
 * #morph-hero-img starts full-bleed in the sticky stage and animates its BOX
 * into #morph-center-slot. No transform is ever applied to it: with
 * background-size:cover, changing the box re-crops the photo instead of
 * stretching it, which is what removes the aspect-distortion problem class
 * the original notes describe at length.
 *
 * VISIBILITY SWAP — deliberately stricter than the reference:
 *   .morph-tile rests at opacity 0 and is only lifted by JS. In the reference
 *   that meant a desktop visitor with JS off saw a bare hero and four
 *   invisible tiles. Here the swap is gated on .js (set in <head> before first
 *   paint), so no-JS at ANY width falls through to the static grid instead.
 * ========================================================== */
.morph-wrapper { display: none; }

@media (min-width: 781px) {
  .js .morph-wrapper { display: block; }
  .js .rc-tiles { display: none; }
}

/* Set by the script when it bails out before the morph can be initialised
   (no IntersectionObserver). Reverts to the static grid rather than leaving a
   morph section that is visible but never driven. */
.rc-no-morph .morph-wrapper { display: none !important; }
.rc-no-morph .rc-tiles { display: block !important; }

.morph-wrapper {
  position: relative;
  height: 160vh;
  background: var(--rc-dark-bg);
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.morph-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }

/* Clears the sticky nav. */
/* The scrim is load-bearing, not decoration. Without it the heading sits over
 * whatever the top-left tile happens to show: measured against the real suit
 * photograph it hit 1.32:1 over the bright jacket (median across glyphs was
 * 10.73 — fine over the dark areas, unreadable over the light ones). A
 * text-shadow reads better than it measures and WCAG gives it no credit. */
.morph-label {
  position: absolute; top: 96px; left: clamp(20px, 5vw, 56px);
  z-index: 6; margin: 0; pointer-events: none;
  padding: 9px 16px 10px;
  background: rgba(59, 36, 21, .78);
  border-left: 2px solid var(--rc-gold-champagne);
}
.morph-label .rc-sec-eyebrow { color: var(--rc-gold-champagne); margin: 0; }
@media (max-width: 1099px) { .morph-label { top: 120px; } }

.morph-grid {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
}
/* Measurement target for the hero's end box. Never painted. */
#morph-center-slot { grid-column: 2; grid-row: 1 / 3; visibility: hidden; }

.morph-tile {
  position: relative; overflow: hidden;
  opacity: 0;                       /* lifted by updateMorph() */
  display: block; text-decoration: none;
}
.morph-tile-fill { position: absolute; inset: 0; z-index: 0; }

/* Caption scrim. Explicit z-index is required, not decorative: ::after is
 * generated as the last child and would otherwise paint over the caption. */
.morph-tile::after, #morph-hero-img::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background: linear-gradient(to top,
              rgba(59, 36, 21, .94) 0%,
              rgba(59, 36, 21, .78) 40%,
              rgba(59, 36, 21, 0) 100%);
  pointer-events: none; z-index: 1;
}
.morph-tile-caption {
  position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2;
  display: flex; align-items: baseline; gap: .6em;
  font-family: 'Fraunces', Georgia, serif;
}
.morph-tile-caption .num {
  color: var(--rc-blush);
  font-size: clamp(.78rem, 1vw, .9rem); letter-spacing: .14em; flex: 0 0 auto;
}
.morph-tile-caption .lbl {
  color: var(--rc-dark-ink);
  font-size: clamp(1rem, 1.35vw, 1.22rem); line-height: 1.2;
}

/* inset:0 is the pre-JS resting state; the box is animated inline by JS.
 * Deliberately no will-change/transform promotion — the element is never
 * transformed, and a separate compositor layer would reintroduce exactly the
 * parent/child frame-timing gap that broke the earlier transform approach. */
#morph-hero-img {
  position: absolute; inset: 0; margin: 0; z-index: 2;
  overflow: hidden; display: block; text-decoration: none;
}
#morph-hero-img .morph-tile-fill { border: 2px solid var(--rc-dark-bg); }
#morph-hero-img .morph-tile-caption { left: 26px; right: 26px; bottom: 24px; }
#morph-hero-img .morph-tile-caption .lbl { font-size: clamp(1.3rem, 2.2vw, 2rem); }

.morph-tile:focus-visible, #morph-hero-img:focus-visible {
  outline: 2px solid var(--rc-dark-accent); outline-offset: -4px;
}

/* Reduced motion: the morph is a scroll-driven animation with no static
 * equivalent, so opt out entirely and show the static grid instead. */
@media (prefers-reduced-motion: reduce) {
  .js .morph-wrapper { display: none; }
  .js .rc-tiles { display: block; }
}

/* ============================================================
 * VERTICAL RHYTHM — one authoritative block.
 *
 * Measured before this existed (1440px, ink-to-ink between sections):
 *   stats -> services   92px      services -> morph   92px
 *   brands -> recent   194px      recent  -> CTA     182px
 * Every section padded 72–92px top AND bottom, so any two sections stacked
 * 145–195px of empty space between them. Those were not chosen values; they
 * were four different clamp() ranges inherited from the starter kit.
 *
 * Two of the worst offenders were not padding at all — see the heading rules
 * below. Fixing those removes 60px above every section heading, which is what
 * made each eyebrow look detached from its own title.
 * ========================================================== */
:root {
	/* One number drives every section. 60px desktop / 40px phone, so two
	   stacked sections give 120px / 80px of separation — clearly distinct
	   bands, no dead blocks. */
	--rc-section-y: clamp(40px, 4.6vw, 60px);
}

.rc-services-home,
.rc-recent-home,
.rc-work-home,
.rc-brands,
.rc-fw,
.rc-tiles,
.rc-cta-final {
	padding-top: var(--rc-section-y);
	padding-bottom: var(--rc-section-y);
}

/*
 * Kadence's content.min.css ships `.single-content h2 { margin: 1.5em 0 .5em }`.
 * That selector is (0,1,1) and beats the plain `.rc-sec-heading { margin: 0 }`
 * at (0,1,0) — and since content.min.css loads AFTER this sheet, even matching
 * its specificity would still lose on order. At the 40px display size, 1.5em is
 * 60px of dead space above every section heading.
 *
 * Kadence also ships an inline `h2 { line-height: 1.5 }`. Nothing here ever set
 * a line-height, so that applied unopposed to a 40px display serif: 60px line
 * boxes, with the extra half-leading reading as yet more space above the caps.
 *
 * The doubled class is a deliberate, ancestor-independent specificity bump. The
 * alternative — leaning on `.single-content` or `.entry-content` — would tie the
 * child theme to a parent wrapper class that can be renamed out from under it.
 */
.rc-sec-heading.rc-sec-heading,
.rc-cta-heading.rc-cta-heading {
	margin-top: 0;
	line-height: 1.12;
}

/* Sub-rhythm inside a section: heading block to the content it introduces, and
   the trailing "see all" button. Trimmed in proportion to the section padding
   so the internal spacing does not now look larger than the gap between whole
   sections. */
.rc-sec-head { margin-bottom: clamp(20px, 2.6vw, 30px); }
.rc-fw-head  { margin-bottom: clamp(18px, 2.4vw, 28px); }
.rc-sec-more { margin-top: clamp(20px, 2.2vw, 26px); }
.rc-fw .rc-sec-more { margin-top: clamp(20px, 2.2vw, 26px); }

/* ---- Imported Tatsu post bodies (see tatsu-compat.php) ----
 * The builder supplied its own layout; with the builder gone these are plain
 * stacked figures, so they need their own rhythm rather than sitting flush
 * against each other. A LONE figure keeps this full-width treatment. */
.rc-post-figure {
	margin: clamp(20px, 3vw, 32px) 0;
}

/* A run of consecutive images was a gallery in the original layout, so it is
 * rendered as one: three across on desktop, two on tablet, one on a phone.
 * Uniform tiles need a fixed ratio; 3/4 suits the portrait photography here,
 * and the crop is biased upward because that is where faces sit. */
.rc-post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(8px, 1.1vw, 14px);
	margin: clamp(20px, 3vw, 32px) 0;
}
.rc-post-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rc-post-grid .rc-post-figure { margin: 0; }
.rc-post-grid .rc-post-figure img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center 25%;
}
@media (max-width: 780px) {
	.rc-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
	.rc-post-grid,
	.rc-post-grid--2 { grid-template-columns: 1fr; }
	/* The ratio is deliberately NOT reset to auto here. Releasing it while
	   object-fit:cover and the srcset's sizes="auto" are both in play left the
	   figure without a resolved height: measured at 1500px per tile and a
	   9040px grid on a 390px viewport. A fixed ratio keeps the tiles uniform
	   and the layout stable at every width. */
}
.rc-post-figure img,
img.rc-post-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px;
}

/* ---- Stacked photo-gallery sections (see [rc_photo_gallery heading=...]) ----
 * Several galleries share one page, so each needs its own label and enough
 * separation that a reader can tell which photos belong to which style. */
.rc-pg-section { margin: 0 0 clamp(40px, 5vw, 64px); }
.rc-pg-section:last-child { margin-bottom: 0; }
.rc-pg-head { margin: 0 0 clamp(16px, 2.2vw, 24px); }
.rc-pg-head .rc-sec-eyebrow { color: var(--rc-gold); }
.rc-pg-head .rc-sec-heading { text-align: left; }
.rc-pg-empty {
	color: var(--rc-ink-soft);
	padding: clamp(20px, 3vw, 30px);
	border: 1px dashed rgba(59, 36, 21, .22);
	border-radius: 3px;
	margin: 0;
}
/* Scroll-margin so a #anchor jump from the home tiles clears the sticky nav
   instead of hiding the heading underneath it. */
.rc-pg-section[id] { scroll-margin-top: 96px; }

/* ---- Tabbed galleries (see [rc_gallery_tabs]) ---- */
.rc-tabs { margin: 0 0 clamp(24px, 3vw, 36px); }
.rc-tablist {
	display: flex; flex-wrap: wrap;
	gap: clamp(8px, 1vw, 12px);
	margin: 0 0 clamp(22px, 3vw, 32px);
	border-bottom: 1px solid rgba(59, 36, 21, .14);
	padding-bottom: clamp(12px, 1.6vw, 18px);
}
.rc-tab {
	display: inline-block;
	padding: 11px 22px;
	border-radius: 999px;
	border: 1px solid rgba(59, 36, 21, .22);
	background: transparent;
	color: var(--rc-ink-soft);
	font-size: 14px; letter-spacing: .04em;
	text-decoration: none;
	transition: background .2s, color .2s, border-color .2s;
	cursor: pointer;
}
.rc-tab:hover { border-color: var(--rc-gold); color: var(--rc-gold); }
.rc-tab.is-active {
	background: var(--rc-gold);
	border-color: var(--rc-gold);
	color: var(--rc-bone);
}
.rc-tab:focus-visible { outline: 2px solid var(--rc-gold); outline-offset: 2px; }
.rc-tabpanel[hidden] { display: none; }