/* ==========================================================================
   Varsha Diamond — theme.css
   Shared by both designs: tokens, base, buttons, forms, header, footer,
   inner pages and scroll animations.
   Home designs: home-one.css · home-two.css   Catalogue: shop.css
   ========================================================================== */

/* Tokens
   -------------------------------------------------------------------------- */

:root {
	--brown: #5b4632;          /* main */
	--brown-deep: #3e2f21;
	--champagne: #f4d9a0;      /* second */
	--amber: #c8792c;          /* accent: icons, rules, large text */
	--amber-ink: #95561b;      /* accent for small text on light grounds (AA) */
	--cream: #fbf7f0;
	--sand: #f4ecdf;
	--beige: #efe3cf;
	--white: #fff;
	--ink: #2e241b;
	--muted: #6f5f50;
	--line: #ebe3d6;
	--line-strong: #d9cdbb;
	--heading: var(--brown);

	--font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--script: "Allura", "Snell Roundhand", cursive;

	--wrap: 1320px;
	--gutter: clamp(16px, 4vw, 48px);
	--section: clamp(64px, 8vw, 112px);
	--header-h: 78px;

	--ease: cubic-bezier(.22, 1, .36, 1);
	--ease-curtain: cubic-bezier(.76, 0, .24, 1);
	--shadow: 0 28px 50px -34px rgba(46, 36, 27, .45);

	/* Design One defaults: square corners, medium-weight headings. */
	--radius-btn: 0px;
	--radius-card: 0px;
	--radius-media: 0px;
	--heading-weight: 500;
	--heading-track: -.03em;
}

.design-two {
	--heading: var(--brown-deep);
	--radius-btn: 999px;
	--radius-card: 16px;
	--radius-media: 12px;
	--heading-weight: 700;
	--heading-track: -.035em;
	--header-h: 74px;
}

/* Base
   -------------------------------------------------------------------------- */

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

[hidden] { display: none !important; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 24px);
	overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--font);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img,
svg,
video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
figure { margin: 0; }
address { font-style: normal; }
button,
input,
select,
textarea { font: inherit; color: inherit; }
ul[role="list"],
ol[role="list"] { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--font);
	font-weight: var(--heading-weight);
	line-height: 1.15;
	letter-spacing: var(--heading-track);
	color: var(--heading);
	text-wrap: balance;
}

::selection { background: var(--champagne); color: var(--brown-deep); }
:focus-visible { outline: 2px solid var(--amber-ink); outline-offset: 3px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}
.skip-link:focus {
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	top: 12px;
	left: 12px;
	z-index: 200;
	padding: .75rem 1rem;
	background: var(--white);
	color: var(--ink);
}

.icon {
	width: 1.25em;
	height: 1.25em;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.icon--fill { fill: currentColor; stroke: none; }

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
.section--flush-top { padding-top: 0; }
.section--cream { background: var(--cream); }
.section--soft { background: linear-gradient(180deg, var(--white) 0%, var(--cream) 100%); }

.placeholder {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 120px;
	background: linear-gradient(135deg, var(--sand), var(--beige));
}

.script {
	font-family: var(--script);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1;
	color: var(--amber);
}
.script .icon { display: inline-block; width: .55em; height: .55em; stroke-width: 1.2; vertical-align: .05em; }

.admin-note {
	margin: 1.5rem 0 0;
	padding: 1rem 1.25rem;
	border: 1px dashed var(--line-strong);
	background: var(--white);
	font-size: 13.5px;
	color: var(--muted);
}
.admin-note a { color: var(--amber-ink); text-decoration: underline; }

/* Headings
   -------------------------------------------------------------------------- */

.eyebrow {
	display: inline-block;
	margin: 0 0 .9rem;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--amber-ink);
}

.section-head { margin-bottom: clamp(32px, 4vw, 52px); }
.section-head--center { max-width: 680px; margin-inline: auto; text-align: center; }
.section-head--split {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 2rem;
}
.section-head--split .section-head__main { max-width: 640px; }
.section-title { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
.section-text { margin: .75rem 0 0; font-size: 15.5px; color: var(--muted); }

/* Buttons and links
   -------------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	min-height: 50px;
	padding: .8rem 1.7rem;
	border: 1px solid transparent;
	border-radius: var(--radius-btn);
	background: none;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.btn .icon { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.btn:hover .icon--arrow { transform: translateX(3px); }
.btn--small { min-height: 42px; padding: .55rem 1.2rem; }
.btn--block { width: 100%; }

.btn--primary { background: var(--brown); color: var(--white); }
.btn--primary:hover { background: var(--brown-deep); }
.btn--dark { background: var(--ink); color: var(--white); }
.btn--dark:hover { background: #000; }
.btn--light { background: var(--white); color: var(--brown); }
.btn--light:hover { background: var(--champagne); color: var(--brown-deep); }
.btn--outline { border-color: var(--brown); color: var(--brown); }
.btn--outline:hover { background: var(--brown); color: var(--white); }
.btn--outline-light { border-color: rgba(255, 255, 255, .6); color: var(--white); }
.btn--outline-light:hover { background: var(--white); border-color: var(--white); color: var(--brown); }
.btn[aria-pressed="true"] { background: var(--champagne); border-color: var(--champagne); color: var(--brown-deep); }

.design-two .btn {
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	padding-inline: 1.6rem;
}

.link-more {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding-bottom: 3px;
	border-bottom: 1px solid currentColor;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--brown);
	transition: color .25s var(--ease);
}
.link-more .icon { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.link-more:hover { color: var(--amber-ink); }
.link-more:hover .icon--arrow { transform: translateX(4px); }
.link-more:hover .icon--plus-circle { transform: rotate(90deg); }
.link-more--light { color: var(--white); }
.link-more--light:hover { color: var(--champagne); }
.design-two .link-more { border-bottom: 0; padding-bottom: 0; }

.badge {
	display: inline-block;
	padding: .32rem .75rem;
	border-radius: 999px;
	background: var(--champagne);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--brown-deep);
}

/* Forms
   -------------------------------------------------------------------------- */

.field { display: grid; gap: .35rem; margin-bottom: 1rem; }
.field label { font-size: 13px; font-weight: 600; color: var(--brown); }
.field input,
.field select,
.field textarea,
.search-form__input,
.comment-form input:not([type="submit"]):not([type="checkbox"]),
.comment-form textarea {
	width: 100%;
	min-height: 48px;
	padding: .65rem .95rem;
	border: 1px solid var(--line-strong);
	border-radius: 0;
	background: var(--white);
	font-size: 15px;
	color: var(--ink);
	transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.design-two .field input,
.design-two .field select,
.design-two .field textarea,
.design-two .search-form__input { border-radius: 10px; }
.field input:focus,
.field select:focus,
.field textarea:focus,
.search-form__input:focus {
	outline: none;
	border-color: var(--amber);
	box-shadow: 0 0 0 3px rgba(200, 121, 44, .18);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: .65rem; }
.field--check input { width: 18px; min-height: 18px; margin-top: 3px; accent-color: var(--brown); }
.field--check label { font-weight: 400; color: var(--muted); }
.field--hp { position: absolute; left: -9999px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.search-form { display: flex; gap: 10px; width: min(100%, 560px); }

/* Enquiry plugin: list, quotation form, notices */
.enquiry__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.enquiry--compact .enquiry__grid { grid-template-columns: 1fr; }
.enquiry__title { margin-bottom: 1.25rem; font-size: 1.6rem; }
.enquiry__title span {
	display: inline-grid;
	place-items: center;
	min-width: 28px;
	height: 28px;
	margin-left: .4rem;
	border-radius: 14px;
	background: var(--champagne);
	font-size: 13px;
	vertical-align: middle;
}
.enquiry__list { display: grid; gap: 10px; margin-bottom: 1.25rem; }
.enquiry-item { display: grid; grid-template-columns: 84px 1fr; gap: 16px; padding: 10px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); }
.enquiry-item__media { aspect-ratio: 1; overflow: hidden; background: var(--sand); border-radius: var(--radius-media); }
.enquiry-item__media img { width: 100%; height: 100%; object-fit: cover; }
.enquiry-item__name { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.enquiry-item__sku { display: block; margin-bottom: .5rem; font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.enquiry-item__controls { display: flex; align-items: center; gap: 1rem; }
.enquiry-item__qty { width: 84px; min-height: 36px; padding: .3rem .5rem; border: 1px solid var(--line-strong); background: var(--white); }
.enquiry-item__remove { padding: 0; border: 0; border-bottom: 1px solid currentColor; background: none; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.enquiry-item__remove:hover { color: var(--amber-ink); }
.enquiry__empty { padding: 1.5rem; border: 1px dashed var(--line-strong); color: var(--muted); }
.enquiry__form { padding: clamp(20px, 3vw, 40px); background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-card); }
.section--cream .enquiry__form { background: var(--white); }
.enquiry__hint { font-size: 13px; color: var(--muted); }
.enquiry__notice { margin-bottom: 2rem; padding: 1rem 1.25rem; border-left: 3px solid var(--amber); background: var(--cream); }
.enquiry__notice--ok { border-color: #4f7a4a; }
.enquiry__notice--error { border-color: #a63a2a; }
@media (max-width: 860px) { .enquiry__grid { grid-template-columns: 1fr; } }

/* Catalogue request form (Design One band) */
.catalogue-form { position: relative; max-width: 480px; }
.catalogue-form__row { display: flex; }
.catalogue-form__row input {
	flex: 1;
	min-width: 0;
	min-height: 50px;
	padding: .65rem 1rem;
	border: 1px solid var(--line-strong);
	border-right: 0;
	background: var(--white);
	font-size: 14px;
}
.catalogue-form__row input:focus { outline: none; border-color: var(--amber); }
.catalogue-form__consent { display: flex; gap: .5rem; align-items: flex-start; margin: .75rem 0 0; font-size: 12.5px; color: var(--muted); }
.catalogue-form__consent input { margin-top: 3px; accent-color: var(--brown); }
.catalogue-form__notice { margin: .75rem 0 0; font-size: 13.5px; font-weight: 600; }
.catalogue-form__notice--ok { color: #3f6a3a; }
.catalogue-form__notice--error { color: #a63a2a; }

/* Header
   -------------------------------------------------------------------------- */

.topbar { background: var(--beige); color: var(--brown); font-size: 12px; font-weight: 500; }
/* Scrolling ticker. theme.js repeats the message group until one half of the track
   is wider than the screen, then appends an identical second half; the track moves
   left by exactly half its width per cycle, so the loop joins without a jump or gap.
   --ticker-duration (set by theme.js from the width) keeps the pace at ~38px/s.
   Each message is followed by a ✧ separator, so spacing is even across the seam.
   overflow: clip (not hidden) so focusing a link cannot scroll the ticker. */
.topbar__ticker {
	display: flex;
	align-items: center;
	min-height: 36px;
	overflow: hidden;
	overflow: clip;
	white-space: nowrap;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
.topbar__track { display: flex; flex: none; width: max-content; }
.topbar__ticker.is-ready .topbar__track {
	animation: vd-ticker var(--ticker-duration, 60s) linear infinite;
	will-change: transform;
}
.topbar__group { display: flex; flex: none; align-items: center; margin: 0; padding: 0; list-style: none; }
.topbar__item { flex: none; }
.topbar__sep { flex: none; margin: 0 1.4rem; font-size: 10px; opacity: .55; }
.topbar__item a { text-decoration: underline; text-decoration-color: rgba(91, 70, 50, .35); text-underline-offset: 3px; }
.topbar__item a:hover { color: var(--amber-ink); }
@keyframes vd-ticker {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}
/* Pause while the pointer is over the bar (devices with a real hover), or while a link in it has focus. */
@media (hover: hover) {
	.topbar__ticker:hover .topbar__track { animation-play-state: paused; }
}
.topbar__ticker:focus-within .topbar__track { animation-play-state: paused; }

/* Reduced motion: a single static, centred announcement instead of the ticker. */
.topbar__static { display: none; margin: 0; }
@media (prefers-reduced-motion: reduce) {
	.topbar__ticker { display: none; }
	.topbar__static { display: flex; align-items: center; justify-content: center; min-height: 36px; padding-inline: var(--gutter); text-align: center; }
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--white);
	color: var(--ink);
	transition: background-color .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease);
}
.site-header--one { border-bottom: 1px solid var(--line); }
.site-header--two { border-bottom: 1px solid var(--line); }
.site-header.is-scrolled { box-shadow: 0 12px 30px -26px rgba(46, 36, 27, .5); }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

.site-header__bar {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 2rem;
	height: var(--header-h);
}

/* Logo */
.logo { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; color: var(--brown); }
.logo__img { width: auto; max-height: 46px; }
.logo--image { line-height: 0; }
.logo__img--mark,
.logo__img--light { display: none; }
@media (max-width: 479px) {
	.logo--has-mark .logo__img--full { display: none; }
	.logo--has-mark .logo__img--mark:not(.logo__img--light) { display: block; max-height: 40px; }
}
.logo__name { font-size: 1.45rem; font-weight: 700; letter-spacing: .34em; text-transform: uppercase; margin-right: -.34em; }
.logo__sub { margin-top: 6px; font-size: 8.5px; font-weight: 700; letter-spacing: .62em; text-transform: uppercase; color: var(--amber-ink); margin-right: -.62em; }
.design-two .logo { flex-direction: row; align-items: baseline; gap: .4rem; color: inherit; }
.design-two .logo__name { font-size: 1.55rem; font-weight: 800; letter-spacing: -.04em; text-transform: lowercase; margin-right: 0; }
.design-two .logo__sub { margin: 0; font-size: .95rem; font-weight: 500; letter-spacing: -.01em; text-transform: lowercase; color: inherit; opacity: .7; }

/* Primary navigation */
.primary-nav { justify-self: center; }
.primary-nav__extra,
.primary-nav__brand { display: none; }
.nav-list { display: flex; align-items: center; gap: clamp(1.1rem, 2.3vw, 2.4rem); margin: 0; padding: 0; list-style: none; }
.nav-list > li { position: relative; display: flex; align-items: center; }
.nav-list > li.has-mega { position: static; }
.nav-list > li > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: var(--header-h);
	font-size: 14px;
	font-weight: 600;
	color: inherit;
	transition: color .25s var(--ease);
}
.nav-list > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(50% - 1.05em);
	height: 1.5px;
	background: var(--amber);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .45s var(--ease);
}
.nav-list > li:hover > a::after,
.nav-list > li:focus-within > a::after,
.nav-list > .current-menu-item > a::after,
.nav-list > .current-menu-ancestor > a::after { transform: scaleX(1); transform-origin: left; }
.design-one .nav-list > .current-menu-item > a,
.design-one .nav-list > .current-menu-ancestor > a { color: var(--amber-ink); }
.design-two .nav-list > li > a { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

.sub-toggle {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	margin-left: 2px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}
.sub-toggle .icon { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.nav-list > li:hover > .sub-toggle .icon,
.is-expanded > .sub-toggle .icon { transform: rotate(180deg); }

.sub-menu {
	position: absolute;
	top: calc(100% - 14px);
	left: -1rem;
	z-index: 5;
	min-width: 220px;
	margin: 0;
	padding: .6rem 0;
	list-style: none;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow);
	color: var(--ink);
	opacity: 0;
	visibility: hidden;
	translate: 0 8px;
	transition: opacity .3s var(--ease), translate .3s var(--ease), visibility 0s linear .3s;
}
.nav-list > li:hover > .sub-menu,
.nav-list > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	translate: 0 0;
	transition: opacity .3s var(--ease), translate .3s var(--ease);
}
.sub-menu a { display: block; padding: .5rem 1.25rem; font-size: 14px; transition: color .2s, padding .3s var(--ease); }
.sub-menu a:hover { color: var(--amber-ink); padding-left: 1.5rem; }

/* Mega panel */
.mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 5;
	background: var(--white);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	box-shadow: var(--shadow);
	color: var(--ink);
	opacity: 0;
	visibility: hidden;
	translate: 0 6px;
	transition: opacity .3s var(--ease), translate .3s var(--ease), visibility 0s linear .3s;
}
.has-mega:hover > .mega,
.has-mega:focus-within > .mega {
	opacity: 1;
	visibility: visible;
	translate: 0 0;
	transition: opacity .3s var(--ease), translate .3s var(--ease);
}
.mega__inner { display: grid; grid-template-columns: 1fr 1fr 1fr 1.35fr; gap: 2.5rem; padding-block: 32px 36px; }
.mega__title { margin: 0 0 1rem; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--amber-ink); }
.mega__col li { margin-bottom: .55rem; }
.mega__col a { display: inline-flex; align-items: center; gap: .65rem; font-size: 14.5px; transition: color .2s; }
.mega__col a:hover { color: var(--amber-ink); }
.mega__shapes .shape-icon { width: 22px; height: 22px; color: var(--brown); }
.mega__all { margin-top: .35rem; border-bottom: 1px solid currentColor; font-size: 13px !important; font-weight: 600; }
.mega__feature { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sand); border-radius: var(--radius-media); }
.mega__feature-media { position: absolute; inset: 0; }
.mega__feature-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.mega__feature:hover img { transform: scale(1.05); }
.mega__feature-text {
	position: absolute;
	left: 14px;
	bottom: 14px;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem .9rem;
	border-radius: var(--radius-btn);
	background: var(--white);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--brown);
}
.mega__feature-text .icon { width: 14px; height: 14px; }

/* Header tools */
.header-tools { display: flex; align-items: center; justify-content: flex-end; gap: .25rem; }
.tool {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: inherit;
	cursor: pointer;
	transition: background-color .25s var(--ease), color .25s var(--ease);
}
.tool:hover { background: var(--sand); color: var(--amber-ink); }
.tool .icon { width: 21px; height: 21px; }
.tool__count {
	position: absolute;
	top: 3px;
	right: 2px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--amber-ink);
	color: var(--white);
	font-size: 10px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}
.tool__count[data-empty] { display: none; }
.tool__count.is-bump { animation: vd-bump .5s var(--ease); }
@keyframes vd-bump { 40% { scale: 1.45; } }

/* Mobile menu toggle */
.nav-toggle {
	display: none;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-left: -9px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before {
	display: block;
	width: 22px;
	height: 1.5px;
	background: currentColor;
	transition: transform .45s var(--ease);
}
.nav-toggle__bars { position: relative; transform: translateY(-4px); }
.nav-toggle__bars::before { content: ""; position: absolute; top: 8px; left: 0; }
.nav-open .nav-toggle__bars { transform: translateY(0) rotate(45deg); }
.nav-open .nav-toggle__bars::before { transform: translateY(-8px) rotate(-90deg); }

/* Search panel */
.search-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--white);
	border-top: 1px solid var(--line);
	box-shadow: var(--shadow);
	color: var(--ink);
}
.search-panel__inner { display: flex; align-items: center; gap: 1rem; padding-block: 18px; }
.search-panel__form { flex: 1; display: flex; align-items: center; gap: .8rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line-strong); }
.search-panel__form > .icon { width: 22px; height: 22px; color: var(--muted); }
.search-panel__form input { flex: 1; min-width: 0; padding: .3rem 0; border: 0; background: none; font-size: 18px; outline: none; }

/* Design Two: transparent header over the home hero */
.site-header--overlay { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent; color: var(--white); }
.site-header--overlay::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 150%;
	background: linear-gradient(rgba(24, 17, 11, .5), rgba(24, 17, 11, 0));
	pointer-events: none;
	transition: opacity .35s var(--ease);
	z-index: -1;
}
.site-header--overlay .tool:hover { background: rgba(255, 255, 255, .14); color: var(--white); }
.site-header--overlay.is-scrolled,
.site-header--overlay.is-open,
.site-header--overlay:has(.has-mega:hover),
.site-header--overlay:has(.menu-item-has-children:hover) {
	background: var(--white);
	border-bottom-color: var(--line);
	color: var(--ink);
}
.site-header--overlay.is-scrolled::before,
.site-header--overlay.is-open::before,
.site-header--overlay:has(.has-mega:hover)::before,
.site-header--overlay:has(.menu-item-has-children:hover)::before { opacity: 0; }
.site-header--overlay.is-scrolled .tool:hover,
.site-header--overlay.is-open .tool:hover { background: var(--sand); color: var(--amber-ink); }
.admin-bar .site-header--overlay { top: 32px; }
/* Light logo while the header is transparent (same states as above). */
.site-header--overlay:not(.is-scrolled):not(.is-open):not(:has(.has-mega:hover)):not(:has(.menu-item-has-children:hover)) .site-header__bar > .logo .logo__img { display: none; }
.site-header--overlay:not(.is-scrolled):not(.is-open):not(:has(.has-mega:hover)):not(:has(.menu-item-has-children:hover)) .site-header__bar > .logo .logo__img--light.logo__img--full { display: block; }
@media (max-width: 479px) {
	.site-header--overlay:not(.is-scrolled):not(.is-open):not(:has(.has-mega:hover)):not(:has(.menu-item-has-children:hover)) .site-header__bar > .logo--has-mark .logo__img--light.logo__img--full { display: none; }
	.site-header--overlay:not(.is-scrolled):not(.is-open):not(:has(.has-mega:hover)):not(:has(.menu-item-has-children:hover)) .site-header__bar > .logo--has-mark .logo__img--light.logo__img--mark { display: block; max-height: 40px; }
}

/* Floating WhatsApp */
.float-wa {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 50;
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--brown);
	color: var(--white);
	box-shadow: 0 14px 30px -12px rgba(46, 36, 27, .6);
	transition: transform .3s var(--ease), background-color .3s var(--ease);
}
.float-wa:hover { transform: translateY(-3px); background: var(--brown-deep); }
.float-wa .icon { width: 26px; height: 26px; }

/* Mobile drawer */
@media (max-width: 1023px) {
	:root,
	.design-two { --header-h: 64px; }
	.site-header__bar { grid-template-columns: 1fr auto 1fr; gap: .5rem; }
	.nav-toggle { display: inline-grid; }
	.logo { justify-self: center; }
	.logo__name { font-size: 1.2rem; }
	.design-two .logo__name { font-size: 1.3rem; }
	.design-two .logo__sub { font-size: .85rem; }
	.header-tools .tool--wa { display: none; }

	.primary-nav {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 80;
		width: min(88vw, 400px);
		padding: 80px 22px 32px;
		overflow-y: auto;
		background: var(--white);
		color: var(--ink);
		box-shadow: 0 0 0 100vmax rgba(46, 36, 27, 0);
		translate: -100% 0;
		visibility: hidden;
		transition: translate .5s var(--ease), box-shadow .5s var(--ease), visibility 0s linear .5s;
	}
	.nav-open .primary-nav {
		translate: 0 0;
		visibility: visible;
		box-shadow: 0 0 0 100vmax rgba(46, 36, 27, .4);
		transition: translate .5s var(--ease), box-shadow .5s var(--ease);
	}
	.nav-open { overflow: hidden; }
	.nav-open .nav-toggle { position: relative; z-index: 90; color: var(--ink); }

	.nav-list { flex-direction: column; align-items: stretch; gap: 0; }
	.nav-list > li { flex-wrap: wrap; border-bottom: 1px solid var(--line); }
	.nav-list > li > a {
		flex: 1;
		height: 56px;
		font-size: 15px !important;
		letter-spacing: 0 !important;
		text-transform: none !important;
		color: var(--ink) !important;
	}
	.nav-list > li > a::after { display: none; }
	.sub-toggle { width: 44px; height: 44px; }
	.nav-list > li:hover > .sub-toggle .icon { transform: none; }
	.is-expanded > .sub-toggle .icon { transform: rotate(180deg) !important; }

	.sub-menu,
	.mega {
		position: static;
		flex-basis: 100%;
		display: none;
		padding: 0 0 1rem;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		translate: none;
	}
	.is-expanded > .sub-menu,
	.is-expanded > .mega { display: block; }
	.sub-menu a { padding: .45rem 0; color: var(--muted); }
	.mega__inner { grid-template-columns: 1fr 1fr; gap: 1.25rem; padding: 0; }
	.mega__feature { display: none; }

	.primary-nav__extra { display: grid; gap: 10px; margin-top: 1.75rem; }
	.primary-nav__brand { display: flex; justify-content: center; margin-top: 2.25rem; }
	/* The drawer has room for the full logo even on small phones. */
	.primary-nav__brand .logo--has-mark .logo__img--full { display: block; max-height: 40px; }
	.primary-nav__brand .logo--has-mark .logo__img--mark { display: none; }
}

/* Footer
   -------------------------------------------------------------------------- */

.site-footer { font-size: 14px; color: var(--muted); }
.footer-col__title { margin: 0 0 1rem; font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--brown); }
.footer-col__list { margin: 0; padding: 0; list-style: none; }
.footer-col__list li { margin-bottom: .55rem; }
.footer-col__list a,
.contact-list a { transition: color .2s var(--ease); }
.footer-col__list a:hover,
.contact-list a:hover { color: var(--amber-ink); }

.contact-list { margin: 0 0 1.25rem; }
.contact-list li { display: flex; gap: .7rem; margin-bottom: .7rem; }
.contact-list .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--amber-ink); }
.contact-list--compact li { margin-bottom: .45rem; }

.social { display: flex; flex-wrap: wrap; gap: .5rem; }
.social a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	color: var(--brown);
	transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.social a:hover { background: var(--brown); border-color: var(--brown); color: var(--white); }
.social .icon { width: 17px; height: 17px; }

.site-footer--one { background: var(--cream); border-top: 1px solid var(--line); }
.footer-one__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 3rem; padding-block: clamp(48px, 6vw, 80px); }
.footer-one__brand .logo { align-items: flex-start; margin-bottom: 1.1rem; }
.footer-one__tagline { max-width: 22rem; }

.site-footer--two { background: var(--white); border-top: 1px solid var(--line); }
.footer-two__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem; max-width: 1120px; padding-block: clamp(48px, 6vw, 80px); }
.site-footer--two .footer-col__title { color: var(--ink); }
.site-footer--two .social { margin-top: 1rem; }

.footer-base { border-top: 1px solid var(--line); font-size: 12.5px; }
.footer-base__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-block: 18px 22px; }
.footer-base p { margin: 0; }
.footer-base--two .footer-base__inner { justify-content: center; gap: .5rem 2.5rem; text-align: center; }
.footer-base a:hover { color: var(--amber-ink); }

@media (max-width: 1023px) {
	.footer-one__grid { grid-template-columns: 1fr 1fr 1fr; }
	.footer-one__brand { grid-column: 1 / -1; }
	.footer-two__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.footer-one__grid { grid-template-columns: 1fr 1fr; }
}

/* Inner pages
   -------------------------------------------------------------------------- */

.page-hero {
	position: relative;
	padding-block: clamp(48px, 7vw, 96px);
	overflow: hidden;
	isolation: isolate;
	background: var(--cream);
	border-bottom: 1px solid var(--line);
	text-align: center;
}
.page-hero__title { font-size: clamp(2.2rem, 4.8vw, 3.6rem); }
.page-hero__text { max-width: 38rem; margin: .9rem auto 0; font-size: 16px; color: var(--muted); }
.page-hero--image { padding-block: clamp(96px, 13vw, 180px); border-bottom: 0; background: var(--brown-deep); color: var(--white); }
.page-hero--image .page-hero__media { position: absolute; inset: -8% 0; z-index: -2; }
.page-hero--image .page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero--image::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(30, 22, 15, .3), rgba(30, 22, 15, .6)); }
.page-hero--image .page-hero__title,
.page-hero--image .page-hero__text,
.page-hero--image .woocommerce-breadcrumb { color: var(--white); }
.design-two .page-hero { background: linear-gradient(180deg, var(--cream), var(--white)); }

.woocommerce-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	margin-bottom: .9rem;
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--muted);
}
.woocommerce-breadcrumb a:hover { color: var(--amber-ink); }

.entry-content { font-size: 16px; }
.entry-content > * { max-width: 760px; }
.page-main > .section .entry-content > * { margin-inline: auto; }
.entry-content--wide > * { max-width: none; }
.entry-content--lead { max-width: 760px; margin: 0 auto clamp(40px, 5vw, 64px); font-size: 17px; text-align: center; color: var(--muted); }
.entry-content a { color: var(--amber-ink); text-decoration: underline; text-underline-offset: 3px; }
.entry-content h2 { margin: 2rem 0 1rem; font-size: 1.8rem; }
.entry-content h3 { margin: 1.6rem 0 .8rem; font-size: 1.35rem; }
.entry-content img { border-radius: var(--radius-media); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.split__media { aspect-ratio: 4 / 4.8; overflow: hidden; border-radius: var(--radius-media); background: var(--sand); }
.split__media > * { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.split__copy .section-title { margin-bottom: 1.2rem; }
.split__copy .entry-content { margin-bottom: 1.75rem; color: var(--muted); }
.split__copy .entry-content > * { margin-inline: 0; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* Process steps */
.process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin: 0; padding: 0; list-style: none; }
.process--spaced { margin-top: clamp(16px, 2vw, 24px); }
.process__step {
	position: relative;
	padding: clamp(24px, 3vw, 36px) clamp(18px, 2vw, 28px);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
}
.process__num { display: block; margin-bottom: 1.25rem; font-size: 2.2rem; font-weight: 300; line-height: 1; letter-spacing: -.04em; color: var(--amber); }
.process__title { margin-bottom: .45rem; font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }
.process__text { margin: 0; font-size: 14px; color: var(--muted); }
@media (max-width: 960px) { .process { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .process { grid-template-columns: 1fr; } }

/* CTA band */
.cta-band { background: var(--brown); color: var(--white); }
.cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; padding-block: clamp(48px, 6vw, 80px); }
.cta-band__title { font-size: clamp(1.8rem, 3vw, 2.5rem); color: var(--white); }
.cta-band__text { max-width: 36rem; margin: .5rem 0 0; color: rgba(255, 255, 255, .78); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Contact page and form sections */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact-grid__info .section-title { margin-bottom: 1rem; }
.contact-grid__info .entry-content { margin-bottom: 1.5rem; color: var(--muted); }
.contact-grid__info .entry-content > * { margin-inline: 0; }
.contact-grid__info .contact-list { margin-bottom: 1.75rem; font-size: 15px; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.form-section .enquiry { max-width: 820px; margin-inline: auto; }

/* Posts */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.post-card__media { display: block; aspect-ratio: 4 / 3; margin-bottom: 1rem; overflow: hidden; border-radius: var(--radius-media); background: var(--sand); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__date { margin: 0 0 .4rem; font-size: 12px; color: var(--muted); }
.post-card__title { margin-bottom: .5rem; font-size: 1.3rem; }
.post-card__title a:hover { color: var(--amber-ink); }
.post-card__excerpt { color: var(--muted); }
@media (max-width: 900px) { .post-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .post-grid { grid-template-columns: 1fr; } }
.entry { max-width: 820px; margin-inline: auto; }
.entry__media { margin-bottom: 2rem; overflow: hidden; border-radius: var(--radius-media); }
.post-navigation { max-width: 820px; margin: 3rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.post-navigation .nav-links { display: flex; justify-content: space-between; gap: 1rem; }
.post-nav__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--amber-ink); }
.comments { max-width: 820px; margin: 3rem auto 0; }
.nav-links .page-numbers { display: inline-grid; place-items: center; min-width: 40px; height: 40px; margin: 0 3px; border: 1px solid var(--line); }
.nav-links .page-numbers.current { background: var(--brown); border-color: var(--brown); color: var(--white); }

.empty-state { display: grid; justify-items: center; gap: 1.25rem; text-align: center; color: var(--muted); }
.empty-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Lines (hero headings) */
.line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.line > span { display: inline-block; }

/* Animations
   --------------------------------------------------------------------------
   html.anim is set in <head> unless the visitor prefers reduced motion;
   html.is-ready is added by theme.js once the page can animate.
   [data-anim]              fade up when scrolled into view
   [data-anim="fade"]       fade only
   [data-anim="reveal"]     image curtain (the child is clipped, not the observed box)
   [data-anim-group] > [data-anim-item]   staggered children
   .hero-in                 entrance on load (delay via --d)
   -------------------------------------------------------------------------- */

.anim .hero-in {
	opacity: 0;
	translate: 0 18px;
	transition: opacity .9s var(--ease) var(--d, 0s), translate 1s var(--ease) var(--d, 0s);
}
.anim.is-ready .hero-in { opacity: 1; translate: 0 0; }

.anim .one-hero__title .line > span,
.anim .two-hero__title .line > span {
	translate: 0 110%;
	transition: translate 1.15s var(--ease) calc(.15s + var(--i, 0) * .12s);
}
.anim.is-ready .one-hero__title .line > span,
.anim.is-ready .two-hero__title .line > span { translate: 0 0; }

.anim [data-anim] {
	opacity: 0;
	translate: 0 26px;
	transition: opacity .9s var(--ease) var(--d, 0s), translate 1s var(--ease) var(--d, 0s);
}
.anim [data-anim="fade"] { translate: none; }
.anim [data-anim].is-in { opacity: 1; translate: 0 0; }

.anim [data-anim="reveal"] { opacity: 1; translate: none; }
.anim [data-anim="reveal"] > * {
	clip-path: inset(100% 0 0 0);
	transition: clip-path 1.25s var(--ease-curtain) var(--d, 0s);
}
.anim [data-anim="reveal"] img {
	scale: 1.14;
	transition: scale 1.8s var(--ease) var(--d, 0s), transform 1.1s var(--ease);
}
.anim [data-anim="reveal"].is-in > * { clip-path: inset(0 0 0 0); }
.anim [data-anim="reveal"].is-in img { scale: 1; }

.anim [data-anim-group] [data-anim-item] {
	opacity: 0;
	translate: 0 26px;
	transition: opacity .8s var(--ease) calc(var(--i, 0) * 90ms), translate .9s var(--ease) calc(var(--i, 0) * 90ms);
}
.anim [data-anim-group].is-in [data-anim-item] { opacity: 1; translate: 0 0; }