/*
Theme Name:   Aunty K Essential
Theme URI:    https://auntyk.co.za/
Author:       Munya
Description:  Custom Aunty K CMT Services theme. Divi-free. One of two independent brand forks.
Version:      1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  auntyk
Tags:         custom-theme, woocommerce
*/

/* ==========================================================================
   Brand tokens are injected inline by inc/design-tokens.php, read from
   design-tokens.json. Nothing in this file hard-codes a brand colour, so the
   forks differ only by data.
   ========================================================================== */

/* --- Reset ----------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var( --font-body );
	font-size: var( --size-body );
	line-height: 1.6;
	color: var( --color-text );
	background: var( --color-bg );
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
	font-family: var( --font-heading );
	line-height: 1.2;
	margin: 0 0 0.5em;
	color: var( --color-heading );
}

h1 { font-family: var( --font-display ); font-size: var( --size-display ); }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Anchored sections (#quote, #process) must clear the sticky header. */
[id] { scroll-margin-top: 110px; }

a, button, summary, input, select, textarea { touch-action: manipulation; }
h2 { font-size: var( --size-heading ); }
h4 { font-family: var( --font-subheading ); font-size: var( --size-subheading ); }

p { margin: 0 0 1em; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed; top: 0; left: 0;
	z-index: 9999; padding: 12px 20px;
	background: #fff; color: #000; clip: auto;
	width: auto; height: auto;
}

/* --- Layout ---------------------------------------------------------------- */
.wrap { width: 100%; max-width: var( --content-max ); margin: 0 auto; padding: 0 20px; }
.wrap--narrow { max-width: var( --narrow-max ); }
.wrap--wide { max-width: var( --wide-max ); }

.section { padding: var( --section-y ) 0; }
.section--tight { padding: calc( var( --section-y ) / 2 ) 0; }
.section--flush { padding: 0; }

/* Background modifiers — mapped to brand tokens, never to raw hex. */
.bg-cream { background: var( --color-cream ); }
.bg-ink { background: var( --color-ink ); }
.bg-tan { background: var( --color-tan ); }
.bg-white { background: var( --color-white ); }
.bg-none { background: transparent; }

.on-dark,
.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark h4 { color: var( --color-on-dark ); }

.on-dark { color: var( --color-on-dark ); }
.accent-text { color: var( --color-accent ); }

/* --- Buttons --------------------------------------------------------------- */
.btn,
.wp-block-button__link,
button,
input[type="submit"] {
	display: inline-block;
	font-family: var( --font-button );
	font-weight: 700;
	font-size: var( --size-button );
	line-height: 1;
	padding: 14px 30px;
	border: 0;
	border-radius: var( --radius-button );
	background: var( --color-accent );
	color: var( --color-accent-text );
	text-decoration: none;
	cursor: pointer;
	transition: box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.btn:hover,
button:hover,
input[type="submit"]:hover { box-shadow: inset 0 0 0 999px rgba( 0, 0, 0, 0.08 ); }
.on-dark .btn:hover { box-shadow: inset 0 0 0 999px rgba( 255, 255, 255, 0.12 ); }

.btn--outline {
	background: transparent;
	color: var( --color-accent );
	box-shadow: inset 0 0 0 2px var( --color-accent );
}

.btn-row { text-align: center; margin-top: 24px; }

.btn--small { padding: 11px 20px; font-size: 15px; }

/* Outline buttons use the heading colour: gold text on a light band is below 3:1. */
.btn--outline {
	color: var( --color-heading );
	box-shadow: inset 0 0 0 2px var( --color-accent );
}
.btn--outline:hover { background: var( --color-accent ); color: var( --color-accent-text ); opacity: 1; }

/* Inline "View all ->" link. Heading colour with an accent underline, for the same reason. */
.text-link {
	color: var( --color-heading );
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var( --color-accent );
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
	white-space: nowrap;
}
.text-link:hover { color: var( --color-accent ); }
.on-dark .text-link { color: var( --color-on-dark ); }

/* --- Header ---------------------------------------------------------------- */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: var( --color-header-bg );
	border-bottom: 1px solid var( --color-border );
}

.site-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 20px; padding-top: 14px; padding-bottom: 14px;
}

.site-logo img { max-height: var( --logo-height ); width: auto; }
.site-logo__text { font-family: var( --font-heading ); font-weight: 700; font-size: 22px; text-decoration: none; }

.nav-toggle {
	display: none;
	background: none; border: 0; padding: 10px;
	min-width: 44px; min-height: 44px;
	color: var( --color-heading ); cursor: pointer;
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
	display: block; width: 24px; height: 2px;
	background: currentColor; content: "";
}
.nav-toggle__bar { position: relative; }
.nav-toggle__bar::before { position: absolute; top: -7px; }
.nav-toggle__bar::after  { position: absolute; top: 7px; }

.primary-nav ul { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.primary-nav a {
	text-decoration: none;
	font-family: var( --font-nav );
	font-weight: 500;
	font-size: var( --size-nav );
	color: var( --color-nav-link );
}
.primary-nav a:hover { color: var( --color-accent ); }

/* Sub-menus */
.primary-nav .sub-menu {
	display: none; position: absolute; min-width: 200px;
	margin: 0; padding: 10px 0; list-style: none;
	background: var( --color-nav-dropdown-bg );
	border: 1px solid var( --color-border );
	border-radius: 12px;
	box-shadow: var( --shadow-card );
}
.primary-nav li { position: relative; }
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu { display: block; }
.primary-nav .sub-menu a { display: block; padding: 8px 18px; }
.primary-nav .sub-menu li { display: block; }

.header-actions { display: flex; align-items: center; gap: 14px; }

.header-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: var( --color-nav-link );
	text-decoration: none;
}
.header-cart:hover { color: var( --color-accent ); }
.header-cart__icon { width: 26px; height: 26px; }
.header-cart__count {
	position: absolute; top: 2px; right: 0;
	min-width: 19px; padding: 0 5px;
	border-radius: 999px; background: var( --color-accent ); color: var( --color-accent-text );
	font-size: 11px; font-weight: 700; line-height: 19px; text-align: center;
}

/* --- Hero ------------------------------------------------------------------ */
.hero {
	background: var( --color-cream );
	background-size: cover;
	background-position: center;
	padding: calc( var( --section-y ) * 0.8 ) 0;
	overflow: hidden;
}
.hero__row {
	display: grid;
	grid-template-columns: minmax( 0, 1.05fr ) minmax( 0, 1fr );
	gap: var( --gutter );
	align-items: center;
}
.hero__text { text-align: left; }
.hero__title { margin: 0 0 18px; line-height: 1.08; }
.hero__title-sub { display: block; color: var( --color-heading ); opacity: 0.72; }
.hero__lead { font-size: 21px; line-height: 1.5; color: var( --color-heading ); max-width: 30ch; margin-bottom: 30px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__media img { width: 100%; height: auto; border-radius: var( --radius-card ); }
.hero__media { display: flex; align-items: center; justify-content: center; }

/* The store hero image is a transparent cut-out: no frame, no radius. */
.hero--store .hero__media img { border-radius: 0; max-height: 520px; width: auto; }

/* A small announcement link above the store headline. */
.hero__notice {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 22px;
	padding: 6px 14px 6px 6px;
	border: 1px solid var( --color-border );
	border-radius: 999px;
	background: var( --color-white );
	color: var( --color-heading );
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}
.hero__notice:hover { border-color: var( --color-accent ); }
.hero__notice-tag {
	padding: 3px 10px;
	border-radius: 999px;
	background: var( --color-accent );
	color: var( --color-accent-text );
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* CMT hero: the banner photo fills the band behind the text, anchored right where the people
   are; the text takes the empty left half. */
.hero--cmt {
	position: relative;
	display: flex;
	align-items: center;
	/* The band takes the banner's own proportions, so it is never upscaled and cropped
	   into the text column. */
	aspect-ratio: 1920 / 600;
	padding: 0;
	background: var( --color-white );
}
.hero--cmt .hero__text { max-width: 470px; }
.hero--cmt .hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
	border-radius: 0;
}
.hero--cmt .wrap { position: relative; }
.hero--cmt .hero__row { grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr ); }

/* Small uppercase label above a heading. */
.eyebrow {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --color-heading );
	opacity: 0.75;
}
.on-dark .eyebrow { color: var( --color-on-dark ); }

/* --- Section heading -------------------------------------------------------
   Left-aligned on the content edge and marked with a short gold rule. The rule is
   structural — it says "a new section starts here" — and it is the one place the accent
   appears as a graphic device. Centring every heading is the template default and costs
   the page its editorial rhythm.
   -------------------------------------------------------------------------- */
.section-heading {
	text-align: left;
	margin-bottom: 36px;
	padding-bottom: 16px;
	border-bottom: 1px solid var( --color-border );
	position: relative;
}

.section-heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 64px;
	height: 2px;
	background: var( --color-accent );
}

/* One heading size for every section, so section titles never compete with the hero.
   The scale runs body -> section -> statement, and nothing else. */
.section-heading h1,
.section-heading h2,
.section-heading h3,
.section-heading h4 {
	font-size: var( --size-subheading );
	margin: 0;
}

.on-dark .section-heading { border-bottom-color: rgba( 255, 255, 255, 0.16 ); }
.on-dark .section-heading::after { background: var( --color-accent-on-dark ); }

/* Heading with a companion on the right: a "View all" link or a one-line aside. */
.section-heading--split {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 24px;
}
.section-heading__aside { margin: 0; opacity: 0.8; }

.section-heading--center { text-align: center; border-bottom: 0; padding-bottom: 0; }
.section-heading--center::after { left: 50%; transform: translateX( -50% ); bottom: -14px; }

/* --- Brand statement band --------------------------------------------------- */
.section--statement .statement {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.statement__title {
	font-family: var( --font-subheading );
	font-size: var( --size-subheading );
	line-height: 1.2;
	margin: 0 0 22px;
}

.statement__body {
	font-size: 19px;
	line-height: 1.7;
	margin: 0 0 16px;
}

.statement__foot { font-size: 19px; margin: 0; }

/* --- Category / content cards ---------------------------------------------- */
.card-grid { display: grid; gap: var( --gutter ); }
.card-grid--2 { grid-template-columns: repeat( 2, 1fr ); }
.card-grid--3 { grid-template-columns: repeat( 3, 1fr ); }
.card-grid--4 { grid-template-columns: repeat( 4, 1fr ); }

/* The whole card is the target; the call to action is a quiet cue inside it rather than a
   separate button repeated under every tile. */
.category-card { display: block; text-decoration: none; color: inherit; }

.category-card__media {
	display: block;
	overflow: hidden;
	border-radius: var( --radius-image );
	background: var( --color-tan );
}

/* Square, matching the product grid — one frame shape across the whole site. */
.category-card__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 0;
	transition: transform 0.6s cubic-bezier( 0.2, 0.7, 0.3, 1 );
}

/* Image zoom only. No card lift and no shadow change: on a shop this motion reveals more
   of the garment, it does not perform. */
.category-card:hover .category-card__media img { transform: scale( 1.035 ); }

.category-card__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 16px 2px 0;
}

.category-card__label {
	font-family: var( --font-subheading );
	font-size: 22px;
	font-weight: 700;
	color: var( --color-heading );
}

.category-card__cta {
	font-size: 15px;
	font-weight: 600;
	color: var( --color-heading );
	text-decoration: underline;
	text-decoration-color: var( --color-accent );
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

@media ( prefers-reduced-motion: reduce ) {
	.category-card__media img { transition: none; }
	.category-card:hover .category-card__media img { transform: none; }
}

/* --- Icon box (replaces Divi ba_icon_box) ---------------------------------- */
.icon-box {
	height: 100%;
	padding: 34px 24px;
	text-align: center;
	border-radius: var( --radius-icon );
	background: var( --color-iconbox-bg );
	border: 1px solid rgba( 255, 255, 255, 0.14 );
	box-shadow: var( --shadow-card );
}
.icon-box img { width: 60px; height: 60px; margin: 0 auto 15px; object-fit: contain; }
.icon-box h3 { font-family: var( --font-subheading ); font-size: 1.5rem; line-height: 1.2; margin: 0 0 10px; }
.icon-box p { font-size: 1rem; line-height: 1.4; margin: 0; }

/* --- Accordion (replaces Divi et_pb_accordion; no JS) ---------------------- */
.faq { border-radius: var( --radius-image ); overflow: hidden; }
.faq details {
	border-bottom: 1px solid var( --color-border );
	background: var( --color-faq-bg );
}
.faq details:last-child { border-bottom: 0; }
.faq summary {
	padding: 18px 24px;
	cursor: pointer;
	font-weight: 700;
	font-family: var( --font-subheading );
	list-style: none;
	position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: "+"; position: absolute; right: 24px; top: 50%;
	transform: translateY( -50% ); font-size: 22px; line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq .faq__answer { padding: 0 24px 20px; }

/* --- Carousel (replaces Divi ba_image_carousel) ----------------------------- */
.carousel { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.carousel__item { flex: 0 0 auto; width: 335px; scroll-snap-align: center; }
.carousel__item img { width: 100%; height: 100%; object-fit: cover; }
.carousel-nav { display: flex; justify-content: center; gap: 12px; margin-top: 20px; }
.carousel-nav button {
	width: 48px; height: 48px; padding: 0; border-radius: 50%;
	background: var( --color-accent ); color: var( --color-accent-text );
	font-size: 18px; line-height: 1;
}

/* --- Divider --------------------------------------------------------------- */
.divider { width: 80px; height: 3px; margin: 18px auto 26px; background: var( --color-accent ); border: 0; }

/* --- Footer ---------------------------------------------------------------- */
.site-footer {
	background: var( --color-footer-bg );
	color: var( --color-footer-text );
	padding: 60px 0 30px;
}
.site-footer h4,
.site-footer .footer-title { font-family: var( --font-subheading ); color: var( --color-footer-heading ); font-size: 18px; line-height: 1.3; margin: 0 0 16px; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var( --color-accent ); }
.footer-grid {
	display: grid;
	/* auto-fit so the footer adapts when the Follow column is hidden (3 cols) or shown (4). */
	grid-template-columns: repeat( auto-fit, minmax( 190px, 1fr ) );
	gap: 30px;
}
.footer-tagline { opacity: 0.85; margin: 0; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 10px; }
.footer-brand { grid-column: span 1; }
.footer-bottom {
	margin-top: 44px; padding-top: 22px;
	border-top: 1px solid rgba( 255, 255, 255, 0.14 );
	text-align: center; font-size: 14px; opacity: 0.8;
}

/* --- Converted Divi content ------------------------------------------------
   Pages rebuilt from Divi shortcodes land here. Prose is constrained for
   readability while product grids are left to span the full width.
   -------------------------------------------------------------------------- */
.entry-content > p,
.entry-content > h1,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > ul,
.entry-content > ol,
.entry-content > .faq,
.entry-content > .contact-form,
.entry-content > .form-notice {
	max-width: 780px;
	margin-left: auto;
	margin-right: auto;
}

.divi-image { border-radius: var( --radius-image ); margin: 0 auto 1.5em; }

.blurb { text-align: center; max-width: 780px; margin: 0 auto 1.6em; }
.blurb h3 { font-family: var( --font-subheading ); font-size: 1.35rem; margin-bottom: 0.35em; }

.faq__item {
	background: var( --color-faq-bg );
	border-radius: var( --radius-image );
	margin-bottom: 0.5em;
	overflow: hidden;
}
.faq__item summary { padding: 16px 22px; cursor: pointer; font-weight: 700; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item .faq__answer { padding: 0 22px 18px; }

/* --- Contact form ---------------------------------------------------------- */
.contact-form { margin-top: 2em; }
.contact-form__trap { position: absolute; left: -9999px; }
.contact-form__field { margin-bottom: 1.1em; }
.contact-form__field label { display: block; font-weight: 600; margin-bottom: 0.35em; }
.contact-form__field input,
.contact-form__field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var( --color-border );
	border-radius: 10px;
	font-family: inherit;
	font-size: 1rem;
	background: var( --color-white );
}
.form-notice {
	padding: 14px 18px;
	border-radius: 10px;
	background: var( --color-cream );
	margin-bottom: 1.5em;
}

/* --- WhatsApp floating button -----------------------------------------------
   Replaces the Click to Chat plugin. Position, spacing and label match the
   plugin's saved settings: fixed bottom-right, 15px desktop / 10px mobile.
   -------------------------------------------------------------------------- */
.wa-widget {
	position: fixed;
	bottom: var( --wa-offset );
	right: var( --wa-offset );
	z-index: 999;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	border-radius: 999px;
	background: var( --wa-bg );
	/* White on WhatsApp green is 1.98:1; ink text is 8.8:1. */
	color: var( --color-ink );
	font-family: var( --font-button );
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.22 );
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.wa-widget:hover,
.wa-widget:focus-visible {
	transform: translateY( -2px );
	box-shadow: 0 10px 26px rgba( 0, 0, 0, 0.28 );
	color: var( --color-ink );
}

.wa-widget__icon { width: 24px; height: 24px; flex: none; fill: currentColor; }

@media ( max-width: 767px ) {
	.wa-widget { bottom: var( --wa-offset-phone ); right: var( --wa-offset-phone ); padding: 12px; }
	.wa-widget__label { display: none; }
}

@media ( prefers-reduced-motion: reduce ) {
	.wa-widget { transition: none; }
	.wa-widget:hover { transform: none; }
}

/* --- Sections rebuilt from Divi ---------------------------------------------
   .section--divi marks a <section> converted from an [et_pb_section]. Divi set text
   colours per module; these rules let the converter carry them through so copy stays
   readable on the coloured bands.
   -------------------------------------------------------------------------- */
.section--divi > .divi-text,
.section--divi > .divi-text > p { color: var( --dt-color, inherit ); }

.section--divi .divi-text h1,
.section--divi .divi-text h2,
.section--divi .divi-text h3,
.section--divi .divi-text h4,
.section--divi .divi-text h5,
.section--divi .divi-text h6 { color: var( --dh-color, inherit ); }

/* A converted section keeps its own fill but still needs breathing room. */
.section--divi { padding: var( --section-y ) 0; }
.section--divi:empty { display: none; }

.page-heading { padding-top: 50px; }
.page-heading .page-title { margin: 0; }

/* A visible focus ring everywhere — the default outline is suppressed by many resets. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
textarea:focus-visible {
	/* Gold is ~2.3:1 on white; the heading colour gives a 3:1+ ring on light bands. */
	outline: 3px solid var( --color-heading );
	outline-offset: 2px;
}
.on-dark :focus-visible,
.site-footer :focus-visible { outline-color: var( --color-on-dark ); }

/* --- Redesign components (2026-09-24) --------------------------------------
   Shared by both brands; colour comes only from tokens, so the same markup reads as
   gold-on-cream for Set Apart and ink-on-stone for Aunty K.
   -------------------------------------------------------------------------- */

/* Two-column media + text block. */
.split {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: calc( var( --gutter ) * 1.5 );
	align-items: center;
}
.split__media { display: flex; justify-content: center; }
.split__img {
	width: 100%;
	max-width: 460px;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var( --radius-card );
	box-shadow: var( --shadow-image );
}
.split__title { font-size: var( --size-subheading ); margin-bottom: 18px; }
.split__body > p { font-size: 18px; max-width: 46ch; }

/* Numbered steps (the CMT process is genuinely sequential). */
.steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 22px; }
.step {
	display: grid;
	grid-template-columns: 56px 1fr;
	column-gap: 18px;
	align-items: start;
}
.step__num {
	grid-row: span 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var( --color-cream );
	color: var( --color-heading );
	font-family: var( --font-heading );
	font-size: 20px;
	font-weight: 700;
}
.step__title { font-family: var( --font-subheading ); font-size: 21px; margin: 4px 0 2px; }
.step__text { margin: 0; }

/* Tick list. */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.checklist li {
	position: relative;
	padding: 14px 18px 14px 50px;
	border-radius: var( --radius-icon );
	background: var( --color-white );
	font-size: 18px;
	font-weight: 500;
	color: var( --color-heading );
}
.checklist li::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 50%;
	width: 14px;
	height: 8px;
	margin-top: -6px;
	border-left: 2.5px solid var( --color-accent );
	border-bottom: 2.5px solid var( --color-accent );
	transform: rotate( -45deg );
}

/* Facts strip under the CMT hero. */
.facts { background: var( --color-white ); border-bottom: 1px solid var( --color-border ); }
.facts__list {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	margin: 0;
	padding: 0;
	list-style: none;
}
.facts__list li { padding: 24px 22px; font-size: 16px; line-height: 1.4; }
.facts__list li + li { border-left: 1px solid var( --color-border ); }
.facts__list strong {
	display: block;
	font-family: var( --font-subheading );
	font-size: 21px;
	color: var( --color-heading );
}

/* Portfolio grid. */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.gallery-grid__item { overflow: hidden; border-radius: var( --radius-image ); background: var( --color-cream ); }
.gallery-grid__item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* Quote section: intro left, form right. */
.quote {
	display: grid;
	grid-template-columns: minmax( 0, 0.85fr ) minmax( 0, 1.15fr );
	gap: calc( var( --gutter ) * 1.25 );
	align-items: start;
}
.quote__intro > p { font-size: 18px; }
.quote__alt a { font-weight: 600; }
.quote__form .contact-form {
	margin: 0;
	padding: 32px;
	border-radius: var( --radius-card );
	background: var( --color-white );
	box-shadow: var( --shadow-card );
}

.contact-card {
	padding: 30px;
	border-radius: var( --radius-card );
	background: var( --color-cream );
}
.contact-card__title { font-family: var( --font-subheading ); font-size: 24px; }
.contact-card__list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 14px; }
.contact-card__label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.8;
}
.contact-card__list a { font-size: 19px; font-weight: 600; color: var( --color-heading ); }
.contact-card__note { margin: 0; font-size: 15px; }

/* Form layout: two columns of short fields, long fields full width. */
.contact-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.contact-form__field--full { grid-column: 1 / -1; }
.contact-form__optional { font-weight: 400; font-size: 14px; opacity: 0.8; }
.contact-form__field select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid rgba( 0, 0, 0, 0.45 );
	border-radius: 10px;
	font-family: inherit;
	font-size: 1rem;
	background: var( --color-white );
	color: var( --color-text );
}
/* Faint borders failed contrast (docs/09); 0.45 black gives a 3.4:1 edge against white. */
.contact-form__field input,
.contact-form__field textarea { border-color: rgba( 0, 0, 0, 0.45 ); }
.contact-form__actions { margin: 6px 0 0; }
.contact-form__actions .btn { width: 100%; padding: 17px 30px; }
.form-notice--error { background: rgba( 180, 40, 40, 0.08 ); }

/* Inner page header. */
.page-hero { padding: calc( var( --section-y ) * 0.85 ) 0; }
.page-hero__title { font-size: var( --size-heading ); margin-bottom: 12px; }
.page-hero__lead { font-size: 19px; max-width: 58ch; margin-bottom: 26px; color: var( --color-heading ); }

/* Footer cross-link. */
.footer-note { margin: 16px 0 0; font-size: 15px; opacity: 0.9; }
.footer-note a { display: inline-block; margin-top: 4px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* Full-bleed gallery band. */
.section--gallery .carousel { padding: 0 20px; gap: 12px; }
.section--gallery .carousel__item { width: 300px; }
.section--gallery .carousel__item img { aspect-ratio: 4 / 5; border-radius: var( --radius-image ); }

/* Story block. */
.story { text-align: center; }
.story__title { font-family: var( --font-subheading ); font-size: var( --size-subheading ); margin: 0; }
.story p { font-size: 18px; }

/* --- Responsive ------------------------------------------------------------ */
/* Below ~1180px the text would overlap the people in the banner: stack the banner under the
   text instead, cropped to the people. */
@media ( max-width: 1180px ) {
	.hero--cmt { flex-direction: column; align-items: stretch; aspect-ratio: auto; padding-top: calc( var( --section-y ) * 0.8 ); }
	.hero--cmt .hero__row { grid-template-columns: 1fr; }
	.hero--cmt .hero__bg { position: static; order: 2; height: clamp( 240px, 42vw, 420px ); margin-top: 36px; }
}

@media ( max-width: 980px ) {
	.card-grid--3, .card-grid--4 { grid-template-columns: repeat( 2, 1fr ); }
	.footer-grid { grid-template-columns: repeat( 2, 1fr ); }
	.split,
	.quote { grid-template-columns: 1fr; }
	.split--media-left .split__media { order: 0; }
	.split__media { order: 2; }
	.split__img { max-width: 520px; aspect-ratio: 4 / 3; }

}

@media ( max-width: 767px ) {
	:root { --section-y: var( --section-y-phone ); }

	.hero__row,
	.single-product__layout { grid-template-columns: 1fr; }
	.card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr; }

	.hero__media { order: 2; }
	.hero--store .hero__media img { max-height: 340px; }
	.hero--cmt .hero__media img { max-height: 360px; }
	.hero__lead { font-size: 19px; }
	.facts__list { grid-template-columns: 1fr; }
	.facts__list li { padding: 16px 0; }
	.facts__list li + li { border-left: 0; border-top: 1px solid var( --color-border ); }
	.gallery-grid { grid-template-columns: repeat( 2, 1fr ); gap: 10px; }
	.contact-form__grid { grid-template-columns: 1fr; }
	.quote__form .contact-form { padding: 22px 18px; }
	.section--gallery .carousel__item { width: 240px; }
	.page-hero__title { font-size: var( --size-subheading ); }

	.nav-toggle { display: block; }
	.primary-nav {
		display: none;
		position: absolute; left: 0; right: 0; top: 100%;
		background: var( --color-header-bg );
		border-bottom: 1px solid var( --color-border );
		padding: 20px;
	}
	.primary-nav.is-open { display: block; }
	.primary-nav ul { flex-direction: column; align-items: flex-start; gap: 4px; }
	.primary-nav a { display: block; padding: 10px 0; }
	.primary-nav .sub-menu { display: block; position: static; border: 0; box-shadow: none; padding-left: 14px; }
}

@media ( max-width: 480px ) {
	h1 { font-size: 40px; }
	.header-cta { display: none; }
	.hero__actions .btn { flex: 1 1 auto; text-align: center; }
}

/* ==========================================================================
   Design uplift (2026-09-26)
   The brand stays exactly as locked (tokens only). What changes is scale, space and
   consistency: a larger editorial hero, one frame shape for category imagery, a service
   strip, calmer header/footer detail and more generous button proportions.
   ========================================================================== */

/* --- Buttons: a touch more presence ------------------------------------------ */
.btn,
.wp-block-button__link { padding: 16px 34px; letter-spacing: 0.01em; }
.btn--small { padding: 11px 20px; }

/* --- Header: quieter edge, room around the logo ---------------------------------- */
.site-header { border-bottom-color: rgba( 0, 0, 0, 0.06 ); }
.site-header__inner { padding-top: 16px; padding-bottom: 16px; }
.primary-nav a { position: relative; padding: 6px 0; }
.primary-nav > ul > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: var( --color-accent );
	transform: scaleX( 0 );
	transform-origin: left;
	transition: transform 0.25s ease;
}
.primary-nav > ul > li > a:hover::after,
.primary-nav > ul > li.current-menu-item > a::after { transform: scaleX( 1 ); }
.primary-nav a:hover { color: var( --color-nav-link ); }

/* --- Store hero: editorial scale ---------------------------------------------------- */
.hero--store { padding: calc( var( --section-y ) * 0.5 ) 0 0; }
.hero--store .hero__row { align-items: end; min-height: 500px; }
.hero--store .hero__text { align-self: center; padding-bottom: calc( var( --section-y ) * 0.75 ); }
.hero--store .hero__title { letter-spacing: -0.01em; margin-bottom: 20px; }
.hero--store .hero__lead { font-size: 23px; margin-bottom: 34px; }
.hero--store .hero__media {
	position: relative;
	align-self: end;
	align-items: flex-end;
	min-height: 520px;
}
/* A tan arch behind the cut-out: gives the figures a ground to stand in. */
.hero__arch {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: min( 88%, 470px );
	height: 88%;
	transform: translateX( -50% );
	border-radius: var( --radius-button ) var( --radius-button ) 0 0;
	background: var( --color-tan );
}
.hero--store .hero__media img {
	position: relative;
	max-height: 580px;
	width: auto;
}

/* --- Service promises strip ------------------------------------------------------------ */
.promises {
	background: var( --color-white );
	border-bottom: 1px solid var( --color-border );
}
.promises__list {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	margin: 0;
	padding: 0;
	list-style: none;
}
.promise {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 26px 24px;
	line-height: 1.4;
	font-size: 15px;
}
.promise + .promise { border-left: 1px solid var( --color-border ); }
.promise strong {
	display: block;
	font-family: var( --font-subheading );
	font-size: 18px;
	color: var( --color-heading );
}
.promise__icon {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	color: var( --color-accent );
}

/* --- Brand statement: give the line room to land ---------------------------------------- */
.section--statement { padding: calc( var( --section-y ) * 1.1 ) 0; }
.section--statement .statement { max-width: 820px; }
.statement__title { font-size: var( --size-heading ); letter-spacing: -0.01em; }
.statement__body { font-size: 22px; line-height: 1.6; }
.statement__foot { letter-spacing: 0.14em; text-transform: uppercase; font-size: 14px; font-weight: 600; opacity: 0.85; }

/* --- Category tiles: one portrait frame, label on the image ---------------------------- */
.card-grid--categories { gap: 24px; }
.card-grid--categories .category-card { position: relative; }
.card-grid--categories .category-card__media {
	position: relative;
	background: var( --color-cream );
}
.card-grid--categories .category-card__media img { aspect-ratio: 4 / 5; }
.card-grid--categories .category-card__media::after {
	content: "";
	position: absolute;
	inset: 45% 0 0;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.55 ), rgba( 0, 0, 0, 0 ) );
	pointer-events: none;
}
.card-grid--categories .category-card__row {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 22px 24px;
	align-items: center;
}
.card-grid--categories .category-card__label { color: var( --color-white ); font-size: 26px; }
.card-grid--categories .category-card__cta {
	color: var( --color-white );
	text-decoration: none;
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.9;
}
.card-grid--categories .category-card:hover .category-card__cta { opacity: 1; }
.card-grid--categories .category-card:focus-visible { outline: 3px solid var( --color-accent ); outline-offset: 4px; border-radius: var( --radius-image ); }

/* --- Section headings: a little more air --------------------------------------------- */
.section-heading { margin-bottom: 44px; }

/* --- Footer: more generous rhythm -------------------------------------------------------- */
.site-footer { padding: 80px 0 34px; }
.footer-grid { gap: 40px; }
.footer-grid li { margin-bottom: 12px; }

@media ( max-width: 980px ) {
	.hero--store .hero__row { min-height: 0; }
	.hero--store .hero__media { min-height: 420px; }
	.hero--store .hero__media img { max-height: 440px; }
	.promises__list { grid-template-columns: minmax( 0, 1fr ); }
	.promise + .promise { border-left: 0; border-top: 1px solid var( --color-border ); }
	.promise { padding: 16px 4px; }
}
@media ( max-width: 767px ) {
	.hero--store .hero__text { padding-bottom: 8px; }
	.hero--store .hero__lead { font-size: 19px; }
	.hero--store .hero__media { min-height: 340px; }
	.hero--store .hero__media img { max-height: 340px; }
	.card-grid--categories { gap: 14px; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.card-grid--categories .category-card__row { padding: 14px; flex-direction: column; align-items: flex-start; gap: 2px; }
	.card-grid--categories .category-card__label { font-size: 20px; }
	.card-grid--categories .category-card__cta { font-size: 12px; }
	.statement__body { font-size: 19px; }
	.site-footer { padding-top: 56px; }
}
@media ( prefers-reduced-motion: reduce ) {
	.primary-nav > ul > li > a::after { transition: none; }
}

/* --- Aunty K round 2 (2026-09-26): hero and services ------------------------------- */

/* Hero: the cut-out banner sits on the brand cream in a taller band, instead of a white strip
   squeezed to the banner's 3.2:1 proportions. */
.hero--cmt {
	aspect-ratio: auto;
	min-height: 560px;
	background: var( --color-cream );
}
/* contain, not cover: in the taller band cover enlarged the banner until the models ran into
   the headline. The cream shows above the cut-out instead. */
.hero--cmt .hero__bg { object-fit: contain; object-position: right bottom; }
.hero--cmt .hero__text { max-width: 500px; padding: calc( var( --section-y ) * 0.6 ) 0; }
.hero--cmt .hero__title { letter-spacing: -0.01em; }
.hero--cmt .hero__lead { font-size: 22px; }

/* A stitch line under the eyebrow: the one decorative device, and it is the trade's own mark. */
.hero--cmt .eyebrow { display: flex; align-items: center; gap: 14px; }
.hero--cmt .eyebrow::after {
	content: "";
	flex: 0 0 64px;
	border-top: 2px dashed var( --color-heading );
	opacity: 0.55;
}

/* Services: intro left, the three services as rows right. */
.services__row {
	display: grid;
	grid-template-columns: minmax( 0, 0.9fr ) minmax( 0, 1.1fr );
	gap: calc( var( --gutter ) * 1.75 );
	align-items: start;
}
.services__intro { position: sticky; top: 120px; }
.services__title {
	font-size: var( --size-heading );
	line-height: 1.12;
	letter-spacing: -0.01em;
	margin: 0 0 18px;
}
.services__lead { font-size: 19px; line-height: 1.6; opacity: 0.88; max-width: 38ch; margin: 0 0 30px; }
.services__list { list-style: none; margin: 0; padding: 0; }
.service {
	display: grid;
	grid-template-columns: 72px minmax( 0, 1fr );
	gap: 24px;
	align-items: center;
	padding: 30px 0;
	border-top: 1px solid rgba( 255, 255, 255, 0.16 );
}
.service:last-child { border-bottom: 1px solid rgba( 255, 255, 255, 0.16 ); }
.service__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	border: 1px solid rgba( 255, 255, 255, 0.22 );
}
.service__icon img { width: 40px; height: 40px; object-fit: contain; }
.service__title { font-family: var( --font-subheading ); font-size: 26px; line-height: 1.2; margin: 0 0 6px; }
.service__text { margin: 0; font-size: 17px; opacity: 0.85; }

@media ( max-width: 980px ) {
	.hero--cmt { min-height: 0; }
	.hero--cmt .hero__text { padding: 0; }
	.services__row { grid-template-columns: minmax( 0, 1fr ); gap: 36px; }
	.services__intro { position: static; }
}
@media ( max-width: 767px ) {
	.hero--cmt .hero__lead { font-size: 19px; }
	.service { grid-template-columns: 56px minmax( 0, 1fr ); gap: 16px; padding: 22px 0; }
	.service__icon { width: 56px; height: 56px; }
	.service__icon img { width: 32px; height: 32px; }
	.service__title { font-size: 22px; }
}