/**
 * Warm style.
 *
 * The brand board's direction: "New York chic / Urban Street Bohemian meets the
 * earthy, textured palette of Restoration Hardware interior design." In
 * practice that means moving off the original cool teal-and-cream scheme onto
 * warm charcoal, taupe, olive, camel and parchment, squaring off the soft
 * rounded shapes, and letting photography carry each page rather than sitting
 * in a framed box beside the text.
 *
 * Everything here is scoped to body.wc-skin-warm, which the Customizer adds
 * only when the style is switched on. Nothing in this file loads or applies
 * otherwise, so the original style is untouched and one click reverts it.
 *
 * It restyles only. No template, string, heading, link or image is changed, so
 * the content and the SEO work already done on the live site are unaffected.
 */

/* ==========================================================================
   1. Tokens

   Every colour the theme draws with is defined here, so most of the site
   changes without a single component rule.
   ========================================================================== */

body.wc-skin-warm {
	/* Brand — straight off the board */
	--wc-ink: #302723;              /* charcoal, replaces the cool teal      */
	--wc-ink-90: rgba(48, 39, 35, 0.9);
	--wc-ink-70: rgba(48, 39, 35, 0.72);
	--wc-ink-55: rgba(48, 39, 35, 0.58);
	--wc-ink-40: rgba(48, 39, 35, 0.42);
	--wc-ink-12: rgba(48, 39, 35, 0.14);
	--wc-ink-08: rgba(48, 39, 35, 0.09);

	--wc-teal: #60593c;             /* deep olive takes the "deep" slot      */
	--wc-teal-light: #6f6747;

	--wc-terracotta: #b18151;       /* camel                                  */
	--wc-terracotta-dark: #8f6539;

	--wc-sand: #cfae82;
	--wc-sand-light: #e8d0b8;       /* soft parchment                         */

	--wc-sage: #ebe4d7;             /* warm linen, was a cool grey-green     */
	--wc-sage-deep: #947862;        /* warm taupe                             */

	/*
	 * Slate. Named in the brief twice — once in the site-wide palette and again
	 * for the service pages — and it is the one cool note in an otherwise warm
	 * set, which is what keeps the whole thing from going sepia. Biased warm so
	 * it sits with the taupe rather than fighting it.
	 */
	--wc-slate: #6a6b6a;
	--wc-slate-soft: #e4e3e0;

	/* Surfaces — every one warmed, none left neutral */
	--wc-white: #fffcf8;
	--wc-cream: #faf5ed;
	--wc-cream-2: #f7f1e7;
	--wc-cream-3: #f2e9db;
	--wc-cream-4: #eadecb;

	--wc-line: rgba(48, 39, 35, 0.14);
	--wc-line-soft: rgba(48, 39, 35, 0.08);

	/* Shape — the rounded, soft-edged look gives way to something squarer
	 * and more architectural. The pill token stays, because chips and dots
	 * still want it; buttons and cards are squared individually below. */
	--wc-radius-xs: 2px;
	--wc-radius-sm: 3px;
	--wc-radius: 4px;
	--wc-radius-lg: 5px;
	--wc-radius-xl: 6px;

	/* Elevation — warm, and much lighter. The original look leaned on soft
	 * drop shadows; this one leans on hairlines and material. */
	--wc-shadow-xs: 0 1px 2px rgba(48, 39, 35, 0.04);
	--wc-shadow-sm: 0 1px 3px rgba(48, 39, 35, 0.05);
	--wc-shadow: 0 4px 18px rgba(48, 39, 35, 0.07);
	--wc-shadow-lg: 0 16px 48px rgba(48, 39, 35, 0.12);

	background: var(--wc-cream);
}

/* ==========================================================================
   2. Type

   The display face stays Playfair Display — it is already a high-contrast
   serif and already loaded. What changes is how it is used: the italic does
   much more work, tracking opens up, and the navigation moves to the serif.
   ========================================================================== */

body.wc-skin-warm .wc-lead,
body.wc-skin-warm .wc-hero__text,
body.wc-skin-warm blockquote {
	font-family: var(--wc-font-display);
	font-style: italic;
	letter-spacing: 0.005em;
}

body.wc-skin-warm h1,
body.wc-skin-warm h2,
body.wc-skin-warm h3 {
	letter-spacing: -0.005em;
}

/* The eyebrow becomes a wide-tracked small-cap label rather than a dotted tag. */
body.wc-skin-warm .wc-eyebrow {
	letter-spacing: 0.26em;
	font-size: 0.6875rem;
	font-weight: 500;
	color: var(--wc-sage-deep);
}

body.wc-skin-warm .wc-eyebrow .wc-dot {
	width: 1.75rem;
	height: 1px;
	border-radius: 0;
	background: var(--wc-terracotta);
}

/* ==========================================================================
   2b. Texture

   The brief asks for layered textures — cashmere and knits, linen, soft
   leather, wood, matte stone — and the first pass delivered flat colour, which
   is the half of the look that colour alone cannot carry.

   Drawn rather than photographed: a woven linen tooth built from two fine
   cross-hatched gradients. Kept at two to three per cent so it reads as
   material under the hand rather than as a pattern, and confined to the tinted
   surfaces — long passages of body copy stay on clean paper, where texture
   would only cost legibility.
   ========================================================================== */

body.wc-skin-warm .wc-section--cream,
body.wc-skin-warm .wc-section--cream-3,
body.wc-skin-warm .wc-word-stack,
body.wc-skin-warm .wc-trust,
body.wc-skin-warm .wc-faq-split {
	background-image:
		repeating-linear-gradient(90deg, rgba(48, 39, 35, 0.028) 0 1px, transparent 1px 3px),
		repeating-linear-gradient(0deg, rgba(48, 39, 35, 0.022) 0 1px, transparent 1px 3px);
}

/* The dark bands take the same weave, lightened instead of darkened so the
 * tooth is visible against them. */
body.wc-skin-warm .wc-section--ink,
body.wc-skin-warm .wc-cta-band {
	background-image:
		repeating-linear-gradient(90deg, rgba(255, 252, 248, 0.022) 0 1px, transparent 1px 3px),
		repeating-linear-gradient(0deg, rgba(255, 252, 248, 0.018) 0 1px, transparent 1px 3px);
}

/* A single hairline of light along the top of tinted panels, which is how a
 * matte surface actually catches a room. */
body.wc-skin-warm .wc-card--cream,
body.wc-skin-warm .wc-card--pad {
	box-shadow: inset 0 1px 0 rgba(255, 252, 248, 0.6);
}

/* ==========================================================================
   3. Navigation

   The board puts the menu over the photograph in a serif, with the header
   itself invisible until the page scrolls. The theme already adds .is-stuck on
   scroll, so the transparent state costs no new behaviour.
   ========================================================================== */

body.wc-skin-warm .wc-nav__menu a,
body.wc-skin-warm .wc-mobile-panel a {
	font-family: var(--wc-font-display);
	font-size: 1.0625rem;
	letter-spacing: 0.01em;
}

body.wc-skin-warm.wc-hero-media .wc-header {
	background: transparent;
	border-bottom-color: transparent;
}

body.wc-skin-warm .wc-header.is-stuck {
	background: var(--wc-cream);
	border-bottom-color: var(--wc-line-soft);
}

/*
 * While the header sits over the hero photograph its type has to be light; once
 * it detaches and gains its cream background it goes back to ink. Only the
 * templates that actually render a photographic hero get this — the Insights,
 * Resources and Consultation pages write their own hero markup with no picture
 * behind it, and a light header there would be invisible.
 */
body.wc-skin-warm.wc-hero-media .wc-header:not(.is-stuck) .wc-nav__menu a,
body.wc-skin-warm.wc-hero-media .wc-header:not(.is-stuck) .wc-brand__name,
body.wc-skin-warm.wc-hero-media .wc-header:not(.is-stuck) .wc-brand__sub,
body.wc-skin-warm.wc-hero-media .wc-header:not(.is-stuck) .wc-brand__tagline,
body.wc-skin-warm.wc-hero-media .wc-header:not(.is-stuck) .wc-header__login {
	color: rgba(255, 252, 248, 0.92);
}

body.wc-skin-warm.wc-hero-media .wc-header:not(.is-stuck) .wc-brand__mark svg,
body.wc-skin-warm.wc-hero-media .wc-header:not(.is-stuck) .wc-burger span,
body.wc-skin-warm.wc-hero-media .wc-header:not(.is-stuck) .wc-burger span::before,
body.wc-skin-warm.wc-hero-media .wc-header:not(.is-stuck) .wc-burger span::after {
	color: rgba(255, 252, 248, 0.92);
	background-color: currentColor;
}

body.wc-skin-warm.wc-hero-media .wc-header:not(.is-stuck) .wc-brand__mark svg {
	background: none;
}

/*
 * The header's own call to action sits outside the hero, so it is not covered
 * by the rules that light the buttons inside it. Over the photograph it needs
 * the same treatment, and it must go back to ink the moment the header gains
 * its background.
 */
body.wc-skin-warm.wc-hero-media .wc-header:not(.is-stuck) .wc-btn {
	border-color: rgba(255, 252, 248, 0.55);
	color: rgba(255, 252, 248, 0.95);
	background: transparent;
}

body.wc-skin-warm.wc-hero-media .wc-header:not(.is-stuck) .wc-btn:hover {
	background: var(--wc-sand-light);
	border-color: var(--wc-sand-light);
	color: var(--wc-ink);
}

/* The current page is marked with a rule under it, as the board draws it. */
body.wc-skin-warm .wc-nav__menu .current-menu-item > a,
body.wc-skin-warm .wc-nav__menu .current_page_item > a {
	position: relative;
}

body.wc-skin-warm .wc-nav__menu .current-menu-item > a::before,
body.wc-skin-warm .wc-nav__menu .current_page_item > a::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.45rem;
	height: 1px;
	background: currentColor;
	opacity: 0.75;
}

/* ==========================================================================
   4. The hero

   The original hero is a two-column split: copy on the left, a framed portrait
   on the right. The board puts the photograph behind everything and lays the
   copy over it. Same markup, same words, same image — the frame simply stops
   being a frame and becomes the band itself.
   ========================================================================== */

body.wc-skin-warm.wc-hero-media .wc-hero {
	position: relative;
	isolation: isolate;
	min-height: min(86vh, 820px);
	display: grid;
	align-items: center;
	/*
	 * Pulled up under the sticky header so the photograph runs to the top of
	 * the page and the menu sits on it, as the board draws it. The header stays
	 * above because it already carries a z-index; the padding gives the copy
	 * back the space the negative margin took. The bottom padding clears the
	 * Heal / Grow / Connect / Belong strip, which is positioned over the foot
	 * of the band.
	 */
	margin-top: calc(-1 * var(--wc-header-h));
	padding-top: calc(var(--wc-header-h) + clamp(3rem, 7vw, 5.5rem));
	padding-bottom: clamp(6rem, 11vw, 9rem);
	background: linear-gradient(150deg, #3b302a 0%, #2b2320 60%, #342a24 100%);
}

body.wc-skin-warm.wc-hero-media .wc-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	margin: 0;
	max-width: none;
}

body.wc-skin-warm.wc-hero-media .wc-hero__media .wc-frame {
	height: 100%;
	border-radius: 0;
	box-shadow: none;
	background: none;
	/*
	 * Static on purpose. The word strip lives inside this frame, and while the
	 * frame was positioned the strip was trapped in its stacking context and
	 * painted underneath the scrim. Unpositioned, the strip resolves against
	 * the hero instead and sits cleanly on top.
	 */
	position: static;
}

/*
 * The aspect ratio is set inline on this element by template-parts/hero.php, so
 * a plain declaration loses to it. This is the one place the skin has to force
 * the issue; everywhere else it only needs to be more specific.
 */
body.wc-skin-warm.wc-hero-media .wc-hero__media .wc-frame__inner {
	aspect-ratio: auto !important;
	position: static !important;
	height: 100%;
}

body.wc-skin-warm.wc-hero-media .wc-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

/*
 * On a phone the hero is taller than it is wide, so a landscape photograph is
 * scaled to the height and only about a third of its width is on screen.
 * Centred, that third is whatever happens to be in the middle of the frame —
 * which in the bundled portrait is Denise's shoulder, with her face cropped
 * off to the right. Shifted across so the subject stays in the picture.
 *
 * Set on the image rather than the band, so a photograph uploaded later is
 * framed the same way.
 */
@media (max-width: 720px) {
	body.wc-skin-warm.wc-hero-media .wc-hero__media img {
		/* 64%, not 68%: panning the window further right moves the subject
		 * left in the frame, and at 68% the headline ran across her face.
		 * This sits her to the right of the band with the copy clear of her. */
		object-position: 64% center;
	}

	/* On a phone the copy spans nearly the whole band, so the scrim stops
	 * being a left-hand gradient and becomes an even veil. */
	body.wc-skin-warm.wc-hero-media .wc-hero__media::after {
		background:
			linear-gradient(170deg, rgba(34, 27, 23, 0.86) 0%, rgba(34, 27, 23, 0.62) 55%, rgba(34, 27, 23, 0.72) 100%);
	}
}

/* The scrim. Weighted to the left, where the copy sits, so the right of the
 * photograph stays open. */
/*
 * The scrim and the word strip are both inside the media layer, and that layer
 * has a z-index of its own, so neither can be lifted out of it. They are
 * ordered against each other instead: scrim first, strip on top.
 */
body.wc-skin-warm.wc-hero-media .wc-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(100deg, rgba(34, 27, 23, 0.9) 0%, rgba(34, 27, 23, 0.72) 38%, rgba(34, 27, 23, 0.26) 68%, rgba(34, 27, 23, 0.4) 100%),
		linear-gradient(180deg, rgba(34, 27, 23, 0.55) 0%, rgba(34, 27, 23, 0) 30%);
}

/*
 * Deliberately not positioned. The media is absolute with inset: 0, so giving
 * this element position: relative would make it the containing block and the
 * full-bleed photograph would shrink to the width of the text column.
 */
body.wc-skin-warm.wc-hero-media .wc-hero__inner {
	grid-template-columns: minmax(0, 1fr);
}

body.wc-skin-warm.wc-hero-media .wc-hero__copy {
	max-width: 44rem;
}

body.wc-skin-warm.wc-hero-media .wc-hero__title,
body.wc-skin-warm.wc-hero-media .wc-hero__copy .wc-eyebrow,
body.wc-skin-warm.wc-hero-media .wc-hero__text {
	color: #fffcf8;
}

body.wc-skin-warm.wc-hero-media .wc-hero__title {
	font-style: italic;
	text-wrap: balance;
}

body.wc-skin-warm.wc-hero-media .wc-hero__text {
	font-style: normal;
	font-family: var(--wc-font-body);
	color: rgba(255, 252, 248, 0.86);
	max-width: 36rem;
}

body.wc-skin-warm.wc-hero-media .wc-hero__copy .wc-eyebrow {
	color: var(--wc-sand-light);
}

body.wc-skin-warm.wc-hero-media .wc-hero__copy .wc-eyebrow .wc-dot {
	background: var(--wc-sand-light);
}

/* The feature row, the credential figures and the badge all sat on paper
 * before; on the photograph they need to read light. */
body.wc-skin-warm.wc-hero-media .wc-hero .wc-feature__text {
	color: rgba(255, 252, 248, 0.88);
}

body.wc-skin-warm.wc-hero-media .wc-hero .wc-feature__icon {
	color: var(--wc-sand-light);
	background: rgba(255, 252, 248, 0.1);
	border-color: rgba(255, 252, 248, 0.22);
}

/*
 * The credential figures. The theme draws each as a white panel, which was
 * right when the hero was paper; over the photograph the panel stayed white
 * and only the type was lightened, leaving four blank boxes. The panel itself
 * has to go dark for the figures inside it to read.
 */
body.wc-skin-warm.wc-hero-media .wc-hero .wc-credential {
	background: rgba(43, 35, 31, 0.5);
	border-color: rgba(255, 252, 248, 0.22);
	box-shadow: none;
	backdrop-filter: blur(6px);
}

body.wc-skin-warm.wc-hero-media .wc-hero .wc-credential strong {
	color: #fffcf8;
}

body.wc-skin-warm.wc-hero-media .wc-hero .wc-credential span {
	color: rgba(255, 252, 248, 0.72);
}

body.wc-skin-warm.wc-hero-media .wc-hero__badge {
	top: auto;
	right: auto;
	bottom: clamp(1.5rem, 4vw, 3rem);
	left: clamp(1rem, 4vw, 3rem);
	background: rgba(48, 39, 35, 0.55);
	backdrop-filter: blur(6px);
	box-shadow: none;
	border: 1px solid rgba(255, 252, 248, 0.22);
	color: rgba(255, 252, 248, 0.92);
}

body.wc-skin-warm.wc-hero-media .wc-hero__badge span { color: var(--wc-sand-light); }

/* The handwritten line and the caption belonged to the framed portrait. Over a
 * full-bleed photograph they would land in the middle of it. */
body.wc-skin-warm.wc-hero-media .wc-frame__script,
body.wc-skin-warm.wc-hero-media .wc-hero__media .wc-frame__caption {
	display: none;
}

/*
 * Heal / Grow / Connect / Belong. A vertical stack in the corner of the old
 * frame; the board runs it across the foot of the hero as a row with hairline
 * dividers, which is where it reads as a statement rather than a caption.
 */
body.wc-skin-warm.wc-hero-media .wc-word-stack {
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom: 0;
	top: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0;
	text-align: center;
	font-family: var(--wc-font-display);
	font-size: clamp(0.95rem, 1.5vw, 1.2rem);
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: none;
	color: var(--wc-ink);
	text-shadow: none;
	/* background-color, not the shorthand: the shorthand resets
	 * background-image and would wipe the weave set in section 2b. */
	background-color: var(--wc-sand-light);
	padding: clamp(0.9rem, 2vw, 1.35rem) clamp(1rem, 4vw, 3rem);
}

body.wc-skin-warm.wc-hero-media .wc-word-stack::before { display: none; }

body.wc-skin-warm.wc-hero-media .wc-word-stack span {
	flex: 1 1 0;
	padding-inline: clamp(0.5rem, 2vw, 1.5rem);
	border-left: 1px solid rgba(48, 39, 35, 0.2);
}

body.wc-skin-warm.wc-hero-media .wc-word-stack span:first-child { border-left: 0; }

body.wc-skin-warm.wc-hero-media .wc-hero__strapline {
	position: absolute;
	right: clamp(1rem, 4vw, 3rem);
	bottom: calc(100% + 1.25rem);
	margin: 0;
	color: rgba(255, 252, 248, 0.8);
	font-family: var(--wc-font-display);
	font-style: italic;
}

@media (max-width: 860px) {
	body.wc-skin-warm.wc-hero-media .wc-hero { min-height: 0; }

	body.wc-skin-warm.wc-hero-media .wc-word-stack {
		font-size: 0.85rem;
		letter-spacing: 0.04em;
		padding-inline: 0.75rem;
	}

	body.wc-skin-warm.wc-hero-media .wc-word-stack span { padding-inline: 0.35rem; }

	body.wc-skin-warm.wc-hero-media .wc-hero__strapline { display: none; }
}

/* ==========================================================================
   5. Buttons

   The board draws every call to action the same way: a thin rule, a letter-
   spaced label and an arrow, with no fill. The filled pill goes.
   ========================================================================== */

body.wc-skin-warm .wc-btn {
	border-radius: 2px;
	background: transparent;
	border: 1px solid var(--wc-ink);
	color: var(--wc-ink);
	font-family: var(--wc-font-body);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 0.75rem;
	padding: 1.05rem 1.9rem;
	transition: background 0.3s var(--wc-ease), color 0.3s var(--wc-ease), border-color 0.3s var(--wc-ease);
}

body.wc-skin-warm .wc-btn:hover,
body.wc-skin-warm .wc-btn:focus-visible {
	background: var(--wc-ink);
	color: var(--wc-cream);
	border-color: var(--wc-ink);
}

body.wc-skin-warm .wc-btn__arrow { transition: transform 0.3s var(--wc-ease); }
body.wc-skin-warm .wc-btn:hover .wc-btn__arrow { transform: translateX(4px); }

/* On the photograph, and on any dark panel. */
body.wc-skin-warm.wc-hero-media .wc-hero .wc-btn,
body.wc-skin-warm .wc-btn--white,
body.wc-skin-warm .wc-btn--outline-light,
body.wc-skin-warm .wc-section--ink .wc-btn {
	border-color: rgba(255, 252, 248, 0.6);
	color: #fffcf8;
	background: transparent;
}

body.wc-skin-warm.wc-hero-media .wc-hero .wc-btn:hover,
body.wc-skin-warm .wc-btn--white:hover,
body.wc-skin-warm .wc-btn--outline-light:hover,
body.wc-skin-warm .wc-section--ink .wc-btn:hover {
	background: var(--wc-sand-light);
	border-color: var(--wc-sand-light);
	color: var(--wc-ink);
}

/* The secondary button loses its fill entirely and reads as a plain link. */
body.wc-skin-warm .wc-btn--ghost {
	border-color: transparent;
	padding-inline: 0.35rem;
	text-decoration: underline;
	text-underline-offset: 0.45em;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--wc-terracotta);
}

body.wc-skin-warm .wc-btn--ghost:hover {
	background: transparent;
	color: var(--wc-terracotta-dark);
	border-color: transparent;
}

body.wc-skin-warm.wc-hero-media .wc-hero .wc-btn--ghost {
	color: rgba(255, 252, 248, 0.92);
	text-decoration-color: var(--wc-sand-light);
}

body.wc-skin-warm.wc-hero-media .wc-hero .wc-btn--ghost:hover {
	background: transparent;
	color: #fffcf8;
}

body.wc-skin-warm .wc-btn--sand,
body.wc-skin-warm .wc-btn--terracotta {
	background: var(--wc-terracotta);
	border-color: var(--wc-terracotta);
	color: #fffcf8;
}

body.wc-skin-warm .wc-btn--sand:hover,
body.wc-skin-warm .wc-btn--terracotta:hover {
	background: var(--wc-terracotta-dark);
	border-color: var(--wc-terracotta-dark);
}

/*
 * The uppercase label and its tracking make a button noticeably wider than the
 * original pill. In the header at phone width that was enough to push the call
 * to action past the edge, so the small size gives the space back.
 */
body.wc-skin-warm .wc-btn--sm {
	padding: 0.7rem 1.1rem;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
}

@media (max-width: 1024px) {
	body.wc-skin-warm .wc-header__actions .wc-btn {
		padding: 0.6rem 0.85rem;
		letter-spacing: 0.05em;
	}
}

@media (max-width: 520px) {
	body.wc-skin-warm .wc-btn {
		padding-inline: 1.25rem;
		letter-spacing: 0.08em;
	}
}

body.wc-skin-warm .wc-link-arrow {
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 0.72rem;
	font-weight: 600;
}

/* ==========================================================================
   6. Cards and surfaces

   Hairlines and material rather than floating rounded boxes.
   ========================================================================== */

body.wc-skin-warm .wc-card {
	border-radius: var(--wc-radius);
	border: 1px solid var(--wc-line);
	box-shadow: none;
}

body.wc-skin-warm .wc-card--hover:hover {
	box-shadow: var(--wc-shadow);
	border-color: var(--wc-sage-deep);
	transform: none;
}

body.wc-skin-warm .wc-card--ink {
	background: var(--wc-ink);
	border-color: var(--wc-ink);
}

body.wc-skin-warm .wc-card__media,
body.wc-skin-warm .wc-frame {
	border-radius: var(--wc-radius-xs);
}

/*
 * .wc-section-head is a two-column grid with a wide gutter between the heading
 * and the note beside it. The --center modifier collapses that gutter when it
 * drops to one column; --stack does not, so it keeps the full gutter as the
 * gap BETWEEN the eyebrow, the heading and the lead — 55px of it, which left
 * the three reading as separate things rather than one heading block.
 *
 * Matched to the value --center already uses, so stacked and centred heads
 * now sit the same way.
 */
body.wc-skin-warm .wc-section-head--stack {
	gap: 0.85rem;
}

/*
 * The theme already zeroes the eyebrow's own bottom margin inside a centred
 * head, but not inside a stacked one — where it stacked on top of the grid gap
 * and added another 16px. Matched, so both read identically.
 */
body.wc-skin-warm .wc-section-head--stack .wc-eyebrow {
	margin-bottom: 0;
}

/* The lead keeps a little more air beneath it than the eyebrow above. */
body.wc-skin-warm .wc-section-head--stack .wc-lead {
	margin-top: 0.35rem;
}

/* A small camel rule under each section heading, as the board rules its own. */
body.wc-skin-warm .wc-section-head h2 {
	position: relative;
	padding-bottom: 1.1rem;
}

body.wc-skin-warm .wc-section-head h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 3.25rem;
	height: 1px;
	background: var(--wc-terracotta);
}

body.wc-skin-warm .wc-section-head--center h2::after {
	left: 50%;
	transform: translateX(-50%);
}

/*
 * The band that closes most pages. Its base colour is the theme's deep tone,
 * which the warm palette turns olive — too green for a full-width band — and
 * its overlay is a hard-coded cool charcoal that the tokens cannot reach. Both
 * are warmed here, so the band works with a photograph behind it or without.
 */
body.wc-skin-warm .wc-cta-band {
	background: var(--wc-ink);
}

body.wc-skin-warm .wc-cta-band__bg::after {
	background: linear-gradient(180deg, rgba(43, 35, 31, 0.58) 0%, rgba(43, 35, 31, 0.84) 100%);
}

body.wc-skin-warm .wc-cta-band__eyebrow {
	color: var(--wc-sand-light);
}

body.wc-skin-warm .wc-cta-band__title {
	font-style: italic;
}

/* ==========================================================================
   7. Photography

   Denise is replacing the photography as part of this work, so nothing here
   tries to disguise the current pictures. The one treatment applied is a very
   light warm wash on decorative imagery, which stops a cool-toned stock photo
   fighting the palette in the meantime. Portraits are deliberately excluded:
   a filter on a face is always visible.
   ========================================================================== */

body.wc-skin-warm .wc-card__media img,
body.wc-skin-warm .wc-post-card__media img,
body.wc-skin-warm .wc-article-banner__frame img {
	filter: sepia(0.14) saturate(0.96);
}

/*
 * The journal. The brief asks for the post images, the banners and the
 * thumbnails together; the first pass only reached the thumbnails, so an
 * article opened on the old cool gradient with a rounded, shadowed banner.
 */
body.wc-skin-warm .wc-article-hero {
	background: linear-gradient(170deg, var(--wc-cream-3), var(--wc-cream));
}

body.wc-skin-warm .wc-article-banner__frame {
	border-radius: var(--wc-radius-xs);
	box-shadow: none;
	border: 1px solid var(--wc-line);
}

body.wc-skin-warm .wc-article-hero__cat {
	border-radius: 2px;
	background: transparent;
	border: 1px solid var(--wc-terracotta);
	color: var(--wc-terracotta-dark);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: 0.6875rem;
}

body.wc-skin-warm .wc-article-hero__lead {
	font-family: var(--wc-font-display);
	font-style: italic;
}

/* Slate, where the brief asks for it: the supporting cards on the service
 * pages, so they read as a family distinct from the warm bands around them. */
body.wc-skin-warm .wc-card--outline-accent {
	border-color: var(--wc-slate);
}

body.wc-skin-warm .wc-approach__icon,
body.wc-skin-warm .wc-audience__icon {
	background: var(--wc-slate-soft);
	color: var(--wc-slate);
}

/* ==========================================================================
   7b. The word strip's icons

   A leaf, a group, a lotus and a heart, as both boards draw them. Only the
   warm style ever receives them — the original keeps the strip as a small
   stack in the corner of the framed portrait, and is unchanged.
   ========================================================================== */

body.wc-skin-warm.wc-hero-media .wc-word-stack span {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

body.wc-skin-warm.wc-hero-media .wc-word-stack__icon {
	display: inline-flex;
	color: var(--wc-ink);
	opacity: 0.78;
}

@media (max-width: 720px) {
	/* Four icons and four words in 390px of strip is a squeeze; the words
	 * carry the meaning, so the icons give way first. */
	body.wc-skin-warm.wc-hero-media .wc-word-stack__icon { display: none; }
}

/* ==========================================================================
   7c. The journal card

   The board's "From the Journal" panel: the picture on the left, an italic
   serif title on the right, and a circular arrow. The Latest band drops to a
   single column so the three read as a list rather than three cramped
   columns, which is what that layout needs to work.
   ========================================================================== */

body.wc-skin-warm .wc-latest .wc-grid--3 {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wc-space-4);
	max-width: 920px;
}

body.wc-skin-warm .wc-latest .wc-post-card {
	display: grid;
	grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(1rem, 2.5vw, 1.75rem);
	padding: clamp(0.75rem, 1.5vw, 1rem);
}

body.wc-skin-warm .wc-latest .wc-post-card__media {
	margin: 0;
	border-radius: var(--wc-radius-xs);
	overflow: hidden;
}

body.wc-skin-warm .wc-latest .wc-post-card__media img { aspect-ratio: 4 / 3; }

body.wc-skin-warm .wc-latest .wc-post-card__title {
	font-style: italic;
	font-size: var(--wc-fs-h5);
	margin-bottom: 0.35rem;
}

body.wc-skin-warm .wc-latest .wc-post-card__excerpt {
	margin-bottom: 0;
	max-width: 54ch;
}

body.wc-skin-warm .wc-latest .wc-post-card__foot {
	margin-top: var(--wc-space-3);
	align-items: center;
}

/* The circular arrow, built from the existing read-more link so no markup
 * changes: the label is kept for screen readers and the arrow is drawn as
 * the disc. */
body.wc-skin-warm .wc-latest .wc-post-card__foot .wc-link-arrow {
	font-size: 0;
	letter-spacing: 0;
	gap: 0;
}

body.wc-skin-warm .wc-latest .wc-post-card__foot .wc-link-arrow span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: var(--wc-radius-pill);
	border: 1px solid var(--wc-ink);
	font-size: 0.95rem;
	color: var(--wc-ink);
	transition: background 0.3s var(--wc-ease), color 0.3s var(--wc-ease);
}

body.wc-skin-warm .wc-latest .wc-post-card:hover .wc-link-arrow span {
	background: var(--wc-ink);
	color: var(--wc-cream);
}

@media (max-width: 560px) {
	body.wc-skin-warm .wc-latest .wc-post-card { grid-template-columns: minmax(0, 1fr); }
	body.wc-skin-warm .wc-latest .wc-post-card__media img { aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   7d. Service and pathway tiles

   The board's "Therapy & Support" tiles carry their caption on the picture.
   Here the title moves onto the picture and the description stays beneath it,
   so the tile reads the way the board draws it without the card losing what
   it says.

   display: contents on the body lifts the title, text and link out of their
   wrapper and into the card's own grid, which is what lets the title share a
   cell with the picture. No markup changes.
   ========================================================================== */

body.wc-skin-warm .wc-card--service,
body.wc-skin-warm .wc-pathway {
	display: grid;
	/*
	 * One explicit column. Without it, placing the picture and the title in the
	 * same row makes grid auto-place the title into a second column instead of
	 * stacking it over the picture, and the card splits in half.
	 */
	grid-template-columns: minmax(0, 1fr);
	overflow: hidden;
}

body.wc-skin-warm .wc-card--service .wc-card__body,
body.wc-skin-warm .wc-pathway .wc-pathway__body {
	display: contents;
}

/*
 * The picture needs a definite width. It carries an aspect ratio, and a grid
 * item that is stretched vertically will take its WIDTH from that ratio — so
 * without this the picture collapsed to a narrow sliver as tall as the title
 * sharing its cell.
 */
body.wc-skin-warm .wc-card--service .wc-card__media,
body.wc-skin-warm .wc-pathway .wc-pathway__media {
	grid-area: 1 / 1;
	position: relative;
	width: 100%;
	align-self: start;
	/*
	 * A warm panel behind the picture rather than the pale cream the theme
	 * uses. The caption on top is white, so where a card has no image set yet
	 * the pale background left the title unreadable.
	 */
	background: var(--wc-ink);
}

body.wc-skin-warm .wc-card--service .wc-card__title,
body.wc-skin-warm .wc-pathway .wc-pathway__title {
	grid-area: 1 / 1;
	align-self: end;
	z-index: 1;
	margin: 0;
	padding: 2.75rem clamp(1rem, 2vw, 1.35rem) clamp(0.85rem, 1.6vw, 1.1rem);
	font-family: var(--wc-font-display);
	color: #fffcf8;
	background: linear-gradient(180deg, rgba(43, 35, 31, 0) 0%, rgba(43, 35, 31, 0.82) 65%);
	text-shadow: 0 1px 12px rgba(43, 35, 31, 0.55);
}

/*
 * Each remaining part gets a row of its own. The service card has three parts
 * below the picture and the pathway card has four — the kicker is the extra
 * one, and sharing a row with the description is what made the two print on
 * top of each other.
 */
body.wc-skin-warm .wc-pathway .wc-pathway__kicker {
	grid-row: 2;
	margin: 0;
	padding: clamp(0.9rem, 2vw, 1.2rem) clamp(1rem, 2vw, 1.35rem) 0;
}

body.wc-skin-warm .wc-card--service .wc-card__text {
	grid-row: 2;
}

body.wc-skin-warm .wc-pathway .wc-pathway__text {
	grid-row: 3;
}

body.wc-skin-warm .wc-card--service .wc-card__text,
body.wc-skin-warm .wc-pathway .wc-pathway__text {
	margin: 0;
	padding: clamp(0.75rem, 1.5vw, 1rem) clamp(1rem, 2vw, 1.35rem) 0;
}

body.wc-skin-warm .wc-card--service .wc-card__foot {
	grid-row: 3;
}

body.wc-skin-warm .wc-pathway .wc-pathway__link {
	grid-row: 4;
}

body.wc-skin-warm .wc-card--service .wc-card__foot,
body.wc-skin-warm .wc-pathway .wc-pathway__link {
	align-self: end;
	padding: clamp(0.9rem, 1.8vw, 1.15rem) clamp(1rem, 2vw, 1.35rem) clamp(1.1rem, 2vw, 1.45rem);
}

/* Four cards across leaves little room, and the uppercase tracking is enough
 * to break "Browse Resources" over two lines mid-phrase. */
body.wc-skin-warm .wc-pathway .wc-pathway__link,
body.wc-skin-warm .wc-card--service .wc-card__foot .wc-link-arrow {
	white-space: nowrap;
}

@media (max-width: 1100px) {
	/* At two cards across the longer labels have room again, and nowrap would
	 * only push them past the card edge. */
	body.wc-skin-warm .wc-pathway .wc-pathway__link,
	body.wc-skin-warm .wc-card--service .wc-card__foot .wc-link-arrow {
		white-space: normal;
	}
}

/* The badge sat in the lower corner of the picture, which is now where the
 * caption is. */
body.wc-skin-warm .wc-card--service .wc-card__icon-badge {
	top: clamp(0.75rem, 1.5vw, 1rem);
	bottom: auto;
}

/* The theme's own caption chip sits bottom-left of the picture — the same
 * corner the title now occupies. Moved to the top, beside the badge. */
body.wc-skin-warm .wc-pathway .wc-pathway__media-label {
	top: clamp(0.7rem, 1.5vw, 0.95rem);
	bottom: auto;
}

/* ==========================================================================
   7e. Meet Denise

   The board's panel: a serif heading, a short line, an outlined button, and a
   large portrait to the right of them. The theme draws the same content as a
   tinted card with a 120px thumbnail beside the text, so this widens the
   picture, moves it across and drops the card around it.

   The text block carries no class of its own, so it is reached through the
   photograph it follows.
   ========================================================================== */

body.wc-skin-warm .wc-about-card {
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
	gap: clamp(1.5rem, 4vw, 3.25rem);
	align-items: center;
	background: transparent;
	padding: 0;
}

body.wc-skin-warm .wc-about-card__photo {
	grid-column: 2;
	grid-row: 1;
	aspect-ratio: 4 / 5;
	border-radius: var(--wc-radius-xs);
}

body.wc-skin-warm .wc-about-card__photo + div {
	grid-column: 1;
	grid-row: 1;
}

body.wc-skin-warm .wc-about-card__photo + div h2 {
	font-size: var(--wc-fs-h3) !important;
	font-style: italic;
}

/* The pull quote beside it, in the same voice as the rest of the style. */
body.wc-skin-warm .wc-pull-quote p {
	font-family: var(--wc-font-display);
	font-style: italic;
}

body.wc-skin-warm .wc-pull-quote__mark {
	color: var(--wc-terracotta);
	opacity: 0.55;
}

@media (max-width: 860px) {
	body.wc-skin-warm .wc-about-card {
		grid-template-columns: minmax(0, 1fr);
	}

	body.wc-skin-warm .wc-about-card__photo {
		grid-column: 1;
		grid-row: 1;
		aspect-ratio: 16 / 10;
	}

	body.wc-skin-warm .wc-about-card__photo + div {
		grid-column: 1;
		grid-row: 2;
	}
}

/* ==========================================================================
   8. Footer
   ========================================================================== */

body.wc-skin-warm .wc-footer {
	background: var(--wc-ink);
}

body.wc-skin-warm .wc-footer a:hover { color: var(--wc-sand-light); }