/* ==========================================================================
   Victoria Conran — site enhancements
   Design tokens are taken from the live Astra settings so anything added here
   sits inside the existing design rather than beside it:
     body + headings  'Donegal One', serif
     body text        #4e5768
     links / accent   #27a024, hover #75c32c
     content width    1200px
   ========================================================================== */

:root {
	--vc-serif:        'Donegal One', Georgia, 'Times New Roman', serif;
	--vc-ink:          #4e5768;
	--vc-ink-soft:     #6f7787;
	--vc-green:        #27a024;
	--vc-green-light:  #75c32c;
	--vc-paper:        #f6f6f3;
	--vc-paper-warm:   #fbfaf7;
	--vc-rule:         #e2e3dd;
	--vc-white:        #fff;
	--vc-shadow:       0 1px 2px rgba(30, 38, 46, .04), 0 8px 24px -12px rgba(30, 38, 46, .10);
	--vc-radius:       2px;
	--vc-measure:      1200px;
}

/* ==========================================================================
   Testimonials
   A grid that pages as a carousel: three across on desktop, two on tablet,
   one on mobile.  The track is a flex row of pages; each page lays its cards
   out on a grid so cards in a row share a height.
   ========================================================================== */

.vc-testimonials {
	--vc-gap: 32px;
	max-width: var(--vc-measure);
	margin-inline: auto;
	padding-inline: 0;
	font-family: var(--vc-serif);
	color: var(--vc-ink);
}

.vc-testimonials__heading {
	font-family: var(--vc-serif);
	font-weight: 400;
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.2;
	text-align: center;
	color: var(--vc-ink);
	margin: 0 0 clamp(28px, 4vw, 48px);
}

.vc-testimonials__viewport {
	overflow: hidden;
	transition: height .4s cubic-bezier(.22, .61, .36, 1);
}

.vc-testimonials__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	/* flex-start, not stretch: heights are equalised per page in JS so one very
	   long testimonial cannot inflate every card in the carousel. */
	align-items: flex-start;
	transition: transform .5s cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}

/* Each card is a flex child sized to the per-view count. */
.vc-testimonial {
	flex: 0 0 calc(100% / var(--vc-per-view, 1));
	box-sizing: border-box;
	padding-inline: calc(var(--vc-gap) / 2);
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
}

/* The card.  Everything lives inside it so a row of cards shares one baseline
   at the bottom regardless of how long each quote is. */
.vc-testimonial__card {
	position: relative;
	flex: 1 1 auto;
	/* Without this the card's auto min-height wins over the equalised row height and
	   the longest quote spills out of the bottom of its card. */
	min-height: 0;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 46px 40px 32px;
	background: var(--vc-paper-warm);
	border: 1px solid rgba(226, 227, 221, .7);
	border-radius: 3px;
	box-shadow: 0 1px 1px rgba(30, 38, 46, .03), 0 18px 34px -22px rgba(30, 38, 46, .16);
}

/* A quiet quote mark rather than a loud graphic */
.vc-testimonial__card::before {
	content: '\201C';
	position: absolute;
	top: 14px;
	left: 30px;
	font-family: var(--vc-serif);
	font-size: 78px;
	line-height: 1;
	color: var(--vc-green);
	opacity: .12;
	pointer-events: none;
}

.vc-testimonial__quote {
	margin: 0;
	padding: 0;
	border: 0;
	quotes: none;
	font-style: normal;
}
.vc-testimonial__quote::before,
.vc-testimonial__quote::after { content: none; }

.vc-testimonial__body {
	position: relative;
	font-size: 17px;
	line-height: 1.8;
	color: var(--vc-ink);
}

.vc-testimonial__body p { margin: 0 0 1em; }
.vc-testimonial__body p:last-child { margin-bottom: 0; }

/* Long quotes are clamped so one very long testimonial cannot set the height
   of every card in the row. */
.vc-testimonial__body[data-clamp] {
	display: -webkit-box;
	-webkit-line-clamp: 6;
	line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* No gradient fade over the clamp: line-clamp already ends the last line with an
   ellipsis, and a fade on top of that reads as a rendering fault rather than as
   "there is more". The ellipsis alone is clearer and keeps the line legible. */

.vc-testimonial.is-expanded .vc-testimonial__body[data-clamp] {
	-webkit-line-clamp: unset;
	line-clamp: unset;
	overflow: visible;
}

.vc-testimonial__more {
	align-self: flex-start;
	margin-top: 16px;
	padding: 0;
	background: none;
	border: 0;
	border-bottom: 1px solid transparent;
	font-family: var(--vc-serif);
	font-size: 12.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--vc-green);
	cursor: pointer;
	transition: color .2s ease, border-color .2s ease;
}
.vc-testimonial__more:hover,
.vc-testimonial__more:focus-visible {
	color: var(--vc-green-light);
	border-bottom-color: currentColor;
}

/* Pushed to the foot of the card by the auto margin, so attributions line up
   across the row even when the quotes are different lengths. */
.vc-testimonial__cite {
	margin-top: auto;
	padding-top: 26px;
	text-align: right;
}
.vc-testimonial__cite::before {
	content: '';
	display: block;
	width: 40px;
	margin: 0 0 16px auto;
	border-top: 1px solid var(--vc-rule);
}

.vc-testimonial__name {
	display: block;
	font-size: 14.5px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--vc-ink);
}

.vc-testimonial__role {
	display: block;
	margin-top: 4px;
	font-size: 13.5px;
	font-style: italic;
	letter-spacing: .01em;
	color: var(--vc-green);
}

/* A way out of the clamped carousel to the page where the quotes can be read
   in full.  Sits under the controls so it reads as the last step of the block. */
.vc-testimonials__all {
	margin: 26px 0 0;
	font-family: var(--vc-serif);
	font-size: 14px;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: center;
}
.vc-testimonials__all a {
	color: var(--vc-green);
	text-decoration: none;
	border-bottom: 1px solid rgba(39, 160, 36, .35);
	transition: color .2s ease, border-color .2s ease;
}
.vc-testimonials__all a:hover,
.vc-testimonials__all a:focus-visible {
	color: var(--vc-green-light);
	border-color: var(--vc-green-light);
}
.vc-testimonials__all a::after { content: ' \2192'; }

/* --- controls --- */

.vc-testimonials__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: clamp(24px, 3vw, 36px);
}
.vc-testimonials__controls[hidden] { display: none; }

.vc-testimonials__arrow {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--vc-rule);
	border-radius: 50%;
	color: var(--vc-ink-soft);
	cursor: pointer;
	transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.vc-testimonials__arrow svg { width: 18px; height: 18px; display: block; }

.vc-testimonials__arrow:hover:not(:disabled),
.vc-testimonials__arrow:focus-visible:not(:disabled) {
	color: var(--vc-green);
	border-color: var(--vc-green);
	background: rgba(39, 160, 36, .05);
}
.vc-testimonials__arrow:disabled { opacity: .3; cursor: default; }

.vc-testimonials__dots { display: flex; align-items: center; gap: 10px; }

.vc-testimonials__count {
	margin: 0;
	min-width: 5.5ch;
	font-size: 14px;
	letter-spacing: .12em;
	text-align: center;
	color: var(--vc-ink-soft);
	font-variant-numeric: tabular-nums;
}

.vc-testimonials__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--vc-ink-soft);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.vc-testimonials__dot[aria-selected="true"] {
	background: var(--vc-green);
	border-color: var(--vc-green);
	transform: scale(1.25);
}

@media (max-width: 1024px) { .vc-testimonials { --vc-gap: 24px; padding-inline: 20px; } }

@media (max-width: 767px) {
	.vc-testimonials { --vc-gap: 16px; padding-inline: 16px; }
	.vc-testimonial__card { padding: 38px 26px 26px; }
	.vc-testimonial__card::before { font-size: 62px; top: 10px; left: 20px; }
	.vc-testimonial__body { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.vc-testimonials__track,
	.vc-testimonials__viewport { transition: none; }
}

/* ==========================================================================
   Global footer
   Full-bleed dark band over the herb photograph the old section already used,
   with the details given a proper structure instead of three centred lines.
   ========================================================================== */

.vc-footer {
	position: relative;
	isolation: isolate;
	padding: clamp(56px, 8vw, 96px) 20px clamp(32px, 4vw, 44px);
	background-image: var(--vc-footer-bg);
	background-size: cover;
	background-position: center;
	font-family: var(--vc-serif);
	color: #fff;
	text-align: center;
}

/* Dark wash so type holds over the photograph. */
.vc-footer::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(rgba(14, 18, 21, .90), rgba(14, 18, 21, .84));
}

.vc-footer__inner {
	max-width: var(--vc-measure);
	margin-inline: auto;
}

/* --- invitation --- */

.vc-footer__title {
	margin: 0;
	font-family: var(--vc-serif);
	font-weight: 400;
	font-size: clamp(32px, 5vw, 52px);
	line-height: 1.15;
	color: #fff;
}

.vc-footer__standfirst {
	max-width: 46ch;
	margin: 16px auto 0;
	font-size: 17px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .75);
}

.vc-footer__cta {
	display: inline-block;
	margin-top: 28px;
	padding: 14px 34px;
	background: var(--vc-green);
	border: 1px solid var(--vc-green);
	border-radius: 999px;
	font-size: 16px;
	letter-spacing: .04em;
	color: #fff;
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.vc-footer__cta:hover,
.vc-footer__cta:focus-visible {
	background: var(--vc-green-light);
	border-color: var(--vc-green-light);
	color: #fff;
	transform: translateY(-1px);
}

/* --- details --- */

.vc-footer__details {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	max-width: 1080px;
	margin: clamp(40px, 5vw, 64px) auto 0;
	padding-top: clamp(32px, 4vw, 48px);
	border-top: 1px solid rgba(255, 255, 255, .16);
	text-align: left;
}

.vc-footer__label {
	margin: 0 0 12px;
	font-family: var(--vc-serif);
	font-weight: 400;
	font-size: 12.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--vc-green-light);
}

.vc-footer__lines {
	margin: 0;
	font-size: 16.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .92);
}
.vc-footer__lines span { display: block; }

.vc-footer__lines em {
	font-style: normal;
	font-size: 12.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
	margin-left: 8px;
}

.vc-footer__lines a {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .28);
	transition: color .2s ease, border-color .2s ease;
}
.vc-footer__lines a:hover,
.vc-footer__lines a:focus-visible {
	color: var(--vc-green-light);
	border-color: var(--vc-green-light);
}

.vc-footer__note {
	margin: 12px 0 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .62);
}

/* The clinic's own line sits a little away from the address above it. */
.vc-footer__tel { margin-top: 10px; }

/* Links out to Google Maps rather than embedding a frame in every page footer. */
.vc-footer__map {
	display: inline-block;
	margin-top: 14px;
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vc-green-light);
	text-decoration: none;
	border-bottom: 1px solid rgba(117, 195, 44, .4);
	transition: color .2s ease, border-color .2s ease;
}
.vc-footer__map::after { content: ' \2197'; }
.vc-footer__map:hover,
.vc-footer__map:focus-visible { color: #fff; border-color: rgba(255, 255, 255, .6); }

/* --- credential + legal --- */

.vc-footer__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: 1080px;
	margin: clamp(36px, 4vw, 52px) auto 0;
	padding-top: clamp(24px, 3vw, 32px);
	border-top: 1px solid rgba(255, 255, 255, .16);
}

/* The supplied logo is dark-on-white, so it needs its own light chip. */
.vc-footer__bacc {
	display: inline-block;
	flex: none;
	padding: 10px 14px;
	background: #fff;
	border-radius: 3px;
	line-height: 0;
	transition: transform .2s ease;
}
.vc-footer__bacc:hover { transform: translateY(-1px); }
.vc-footer__bacc img { display: block; width: 168px; height: auto; }

.vc-footer__legal {
	margin: 0;
	font-size: 13.5px;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .5);
	text-align: right;
}

/* The three pages that have no home in the main navigation. */
.vc-footer__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 24px;
	font-size: 13.5px;
}
.vc-footer__links a {
	color: rgba(255, 255, 255, .72);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}
.vc-footer__links a:hover,
.vc-footer__links a:focus-visible {
	color: #fff;
	border-color: rgba(255, 255, 255, .5);
}

@media (max-width: 900px) {
	.vc-footer__details { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
}

@media (max-width: 900px) {
	.vc-footer__foot { flex-wrap: wrap; justify-content: center; text-align: center; }
	.vc-footer__links { order: 3; width: 100%; }
	.vc-footer__legal { text-align: center; }
}

@media (max-width: 600px) {
	.vc-footer { text-align: center; }
	.vc-footer__details { grid-template-columns: 1fr; text-align: center; }
	.vc-footer__lines em { display: block; margin: 2px 0 0; }
	.vc-footer__foot { flex-direction: column; }
	.vc-footer__legal { text-align: center; }
}

/* ==========================================================================
   Long-form content
   Applied to the service pages so a page of copy reads as sections rather than
   one unbroken slab.  Deliberately restrained — the brief was minimalistic.
   ========================================================================== */

.vc-prose {
	max-width: 68ch;
	margin-inline: auto;
	font-family: var(--vc-serif);
	font-size: 17px;
	line-height: 1.8;
	color: var(--vc-ink);
	text-align: left;
}

.vc-prose > p { margin: 0 0 1.35em; }
.vc-prose > p:last-child { margin-bottom: 0; }

/* Opening paragraph carries a little more weight. */
.vc-prose__lead {
	font-size: 20px;
	line-height: 1.65;
	color: var(--vc-ink);
}

.vc-prose h2 {
	margin: 2.4em 0 .75em;
	font-family: var(--vc-serif);
	font-weight: 400;
	font-size: 27px;
	line-height: 1.3;
	color: var(--vc-ink);
}
.vc-prose h2:first-child { margin-top: 0; }

/* A short green rule instead of a heavier divider. */
.vc-prose h2::before {
	content: '';
	display: block;
	width: 30px;
	margin-bottom: .55em;
	border-top: 2px solid var(--vc-green);
}

.vc-prose h3 {
	margin: 1.9em 0 .6em;
	font-family: var(--vc-serif);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.35;
	color: var(--vc-ink);
}

.vc-prose ul {
	margin: 0 0 1.35em;
	padding: 0;
	list-style: none;
}

.vc-prose ul li {
	position: relative;
	margin: 0 0 .55em;
	padding-left: 1.6em;
}

.vc-prose ul li::before {
	content: '';
	position: absolute;
	left: .25em;
	top: .78em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--vc-green);
	opacity: .65;
}

.vc-prose a {
	color: var(--vc-green);
	text-decoration: none;
	border-bottom: 1px solid rgba(39, 160, 36, .35);
	transition: color .2s ease, border-color .2s ease;
}
.vc-prose a:hover { color: var(--vc-green-light); border-color: var(--vc-green-light); }

/* A quiet aside for practical detail (costs, how to book). */
.vc-prose__note {
	margin: 1.8em 0;
	padding: 20px 24px;
	background: var(--vc-paper);
	border-left: 2px solid var(--vc-green);
	font-size: 16px;
	line-height: 1.7;
}
.vc-prose__note p { margin: 0 0 .6em; }
.vc-prose__note p:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
	.vc-prose { font-size: 16.5px; }
	.vc-prose__lead { font-size: 18.5px; }
	.vc-prose h2 { font-size: 24px; margin-top: 2em; }
}

/* ==========================================================================
   Events — classes, workshops and retreats
   Victoria asked for these to "pop and look distinct from each other", so each
   one is a card with its date and place on a rail to the left of the detail.
   ========================================================================== */

.vc-events { max-width: 900px; margin-inline: auto; font-family: var(--vc-serif); }

.vc-events__year {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 2.6em 0 1.2em;
	font-family: var(--vc-serif);
	font-weight: 400;
	font-size: 15px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--vc-green);
}
.vc-events__year:first-child { margin-top: 0; }
.vc-events__year::after {
	content: '';
	flex: 1 1 auto;
	border-top: 1px solid var(--vc-rule);
}

.vc-event {
	display: grid;
	grid-template-columns: 210px 1fr;
	gap: 0;
	margin-bottom: 22px;
	background: var(--vc-paper-warm);
	border: 1px solid var(--vc-rule);
	border-radius: var(--vc-radius);
	box-shadow: var(--vc-shadow);
	overflow: hidden;
}

/* The date rail */
.vc-event__when {
	padding: 28px 24px;
	background: var(--vc-paper);
	border-right: 1px solid var(--vc-rule);
}

.vc-event__date {
	display: block;
	font-size: 17px;
	line-height: 1.4;
	color: var(--vc-ink);
}

.vc-event__place {
	display: block;
	margin-top: 10px;
	font-size: 12.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--vc-green);
}

.vc-event__body { padding: 28px 30px; }

.vc-event__title {
	margin: 0 0 4px;
	font-family: var(--vc-serif);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.3;
	color: var(--vc-ink);
}

.vc-event__subtitle {
	margin: 0 0 14px;
	font-size: 16px;
	font-style: italic;
	line-height: 1.45;
	color: var(--vc-ink-soft);
}

.vc-event__body > p {
	margin: 0 0 1em;
	font-size: 16px;
	line-height: 1.72;
	color: var(--vc-ink);
}
.vc-event__body > p:last-child { margin-bottom: 0; }

/* Cost / booking rows */
.vc-event__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin: 16px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--vc-rule);
	font-size: 15.5px;
}
.vc-event__meta > div { display: flex; align-items: baseline; gap: 8px; }
.vc-event__meta dt {
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--vc-ink-soft);
}
.vc-event__meta dd { margin: 0; color: var(--vc-ink); }
.vc-event__meta a { color: var(--vc-green); text-decoration: none;
	border-bottom: 1px solid rgba(39,160,36,.35); }
.vc-event__meta a:hover { color: var(--vc-green-light); }

/* Weekly classes use the same card, laid out as a simple two-up grid. */
.vc-classes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 22px;
	max-width: 900px;
	/* Its own breathing room, so the block sits correctly whether it follows a
	   section title (margins collapse) or a paragraph of prose (they do not). */
	margin: 34px auto 44px;
	font-family: var(--vc-serif);
}

.vc-class {
	padding: 28px 28px 24px;
	background: var(--vc-paper-warm);
	border: 1px solid var(--vc-rule);
	border-top: 2px solid var(--vc-green);
	border-radius: var(--vc-radius);
	box-shadow: var(--vc-shadow);
}

.vc-class__name {
	margin: 0 0 4px;
	font-family: var(--vc-serif);
	font-weight: 400;
	font-size: 21px;
	line-height: 1.3;
	color: var(--vc-ink);
}

.vc-class__where {
	margin: 0 0 16px;
	font-size: 12.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--vc-green);
}

.vc-class__rows { margin: 0; font-size: 16px; line-height: 1.7; }
.vc-class__rows > div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 7px 0;
	border-bottom: 1px solid var(--vc-rule);
}
.vc-class__rows > div:last-child { border-bottom: 0; }
.vc-class__rows dt { color: var(--vc-ink-soft); font-size: 14.5px; }
.vc-class__rows dd { margin: 0; color: var(--vc-ink); text-align: right; }

@media (max-width: 700px) {
	.vc-event { grid-template-columns: 1fr; }
	.vc-event__when {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 16px;
		padding: 18px 22px;
		border-right: 0;
		border-bottom: 1px solid var(--vc-rule);
	}
	.vc-event__place { margin-top: 0; }
	.vc-event__body { padding: 22px; }
	.vc-event__title { font-size: 20px; }
}

/* Section headings used between components on the Classes and Retreats page. */
.vc-section-title {
	max-width: 900px;
	margin: clamp(48px, 6vw, 72px) auto clamp(22px, 3vw, 32px);
	font-family: var(--vc-serif);
	font-weight: 400;
	font-size: clamp(25px, 3.4vw, 34px);
	line-height: 1.25;
	color: var(--vc-ink);
	text-align: center;
}
.vc-section-title::after {
	content: '';
	display: block;
	width: 34px;
	margin: .55em auto 0;
	border-top: 2px solid var(--vc-green);
}

.vc-class__rows a,
.vc-event__body a {
	color: var(--vc-green);
	text-decoration: none;
	border-bottom: 1px solid rgba(39, 160, 36, .35);
	transition: color .2s ease, border-color .2s ease;
}
.vc-class__rows a:hover,
.vc-event__body a:hover { color: var(--vc-green-light); border-color: var(--vc-green-light); }

/* ==========================================================================
   Credential line
   Victoria's post-nominals hang directly off her name rather than floating as a
   line of their own — they live *inside* the heading (a display:block span, so
   no <br> and no stray empty line box) and are pulled up into the heading's own
   leading.  Her note on the first draft was that they read as a separate line;
   the space above them now has to be visibly smaller than the space below.
   ========================================================================== */

.vc-quals {
	display: block;
	font-family: var(--vc-serif);
	font-weight: 400;
	font-style: normal;
	/* Set in Victoria's own capitalisation — MBAcC and BA(Hons) are cased the way
	   the awarding bodies case them, so no text-transform here, whatever the
	   heading above it is doing. */
	text-transform: none;
	letter-spacing: .1em;
	line-height: 1.5;
	/* One line on anything wider than a phone; wrapping is preferable to a
	   horizontal scrollbar on the very narrowest screens. */
	white-space: nowrap;
}

@media (max-width: 480px) {
	.vc-quals { white-space: normal; letter-spacing: .06em; }
}

/* Home hero — white on the video, sat tight under a 5.9em name whose 1.4 leading
   would otherwise drop it halfway to the strapline. */
.vc-hero__quals {
	margin: -.55em 0 0;
	font-size: clamp(13px, 1.15vw, 16px);
	color: rgba(255, 255, 255, .8);
}

/* Below Elementor's mobile breakpoint the name drops to 2.4em, so there is far less
   leading to claw back — keep the negative pull and the two lines touch. */
@media (max-width: 767px) {
	.vc-hero__quals { margin-top: .2em; }
}

/* About — same lockup, dark on white, under a 25px name. */
.vc-about__quals {
	margin: .28em 0 0;
	font-size: 15px;
	color: rgba(78, 87, 104, .78);
}

/* "Classical Acupuncture" over "Chinese Medicine" — two lines at one size, pulled
   tighter than the theme's default heading leading so they read as a single lockup.
   The top margin is the gap that separates the name-plus-qualifications block from
   it; without it the qualifications look equally spaced between the two and read as
   a line of their own again. */
.vc-hero__title {
	line-height: 1.18;
	margin: .9em 0 .35em;
}

/* ==========================================================================
   Maps
   A key-less Google embed in a 4:3 box that never overflows its column — the
   old Appointments page hard-coded width="600" on the iframe, which pushed the
   map off the right of the screen on anything narrower than a laptop.
   ========================================================================== */

.vc-map {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--vc-radius);
	background: var(--vc-paper);
	box-shadow: var(--vc-shadow);
}

.vc-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* ==========================================================================
   Clinics — the two practice addresses on the Appointments page
   Each clinic is an address and its map, side by side, stacking on mobile.
   ========================================================================== */

.vc-clinics {
	max-width: var(--vc-measure);
	margin-inline: auto;
	font-family: var(--vc-serif);
	color: var(--vc-ink);
}

/* The page's opening paragraph shares the clinics' left edge instead of being
   centred on its own narrower measure, which left it visibly indented. */
.vc-clinics__intro {
	max-width: var(--vc-measure);
	margin: 0 auto clamp(28px, 4vw, 44px);
}
.vc-clinics__intro .vc-prose { margin-inline: 0; }

.vc-clinic {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	padding: clamp(28px, 4vw, 44px) 0;
	border-top: 1px solid var(--vc-rule);
}
.vc-clinic:first-of-type { border-top: 0; padding-top: 0; }

.vc-clinic__name {
	margin: 0 0 .55em;
	font-family: var(--vc-serif);
	font-weight: 400;
	font-size: 27px;
	line-height: 1.3;
	color: var(--vc-ink);
}
.vc-clinic__name::before {
	content: '';
	display: block;
	width: 30px;
	margin-bottom: .55em;
	border-top: 2px solid var(--vc-green);
}

.vc-clinic__address {
	margin: 0;
	font-size: 17px;
	line-height: 1.75;
}
.vc-clinic__address span { display: block; }

.vc-clinic__rows {
	margin: 1.1em 0 0;
	font-size: 16px;
	line-height: 1.7;
}
.vc-clinic__rows div { display: flex; gap: .6em; }
.vc-clinic__rows dt {
	flex: none;
	min-width: 5.5em;
	color: var(--vc-ink-soft);
}
.vc-clinic__rows dd { margin: 0; }

.vc-clinic__note {
	margin: 1.1em 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--vc-ink-soft);
}

.vc-clinic a {
	color: var(--vc-green);
	text-decoration: none;
	border-bottom: 1px solid rgba(39, 160, 36, .35);
	transition: color .2s ease, border-color .2s ease;
}
.vc-clinic a:hover { color: var(--vc-green-light); border-color: var(--vc-green-light); }

@media (max-width: 900px) {
	.vc-clinic { grid-template-columns: 1fr; gap: 24px; }
	.vc-clinic__name { font-size: 24px; }
}

/* ==========================================================================
   Testimonials page
   The carousel clamps every quote to keep its grid even.  This is the version
   for reading: full text, one column, grouped by what the quote is about.
   ========================================================================== */

.vc-quotes {
	max-width: 780px;
	margin-inline: auto;
	font-family: var(--vc-serif);
	color: var(--vc-ink);
	text-align: left;
}

/* The page's opening line shares the quotes' measure so nothing is indented
   relative to anything else. */
.vc-quotes__intro {
	max-width: 780px;
	margin: 0 auto clamp(32px, 4vw, 48px);
}
.vc-quotes__intro .vc-prose { margin-inline: 0; }

.vc-quotes__group + .vc-quotes__group { margin-top: clamp(48px, 6vw, 76px); }

.vc-quotes__heading {
	margin: 0 0 1.4em;
	font-family: var(--vc-serif);
	font-weight: 400;
	font-size: 27px;
	line-height: 1.3;
	color: var(--vc-ink);
}
.vc-quotes__heading::before {
	content: '';
	display: block;
	width: 30px;
	margin-bottom: .55em;
	border-top: 2px solid var(--vc-green);
}

.vc-quote {
	margin: 0 0 clamp(28px, 3.5vw, 40px);
	padding: clamp(24px, 3vw, 34px) clamp(24px, 3.5vw, 40px);
	background: var(--vc-paper-warm);
	border: 1px solid var(--vc-rule);
	border-radius: var(--vc-radius);
}
.vc-quote:last-child { margin-bottom: 0; }

.vc-quote__body {
	margin: 0;
	font-size: 17px;
	line-height: 1.8;
	color: var(--vc-ink);
	/* The blockquote element carries a default indent in some themes. */
	padding: 0;
	border: 0;
	quotes: none;
}
.vc-quote__body p { margin: 0 0 1.1em; }
.vc-quote__body p:last-child { margin-bottom: 0; }

/* Attribution, matched to the card version in the carousel. */
.vc-quote__cite {
	margin-top: 1.2em;
	padding-top: 1em;
	border-top: 1px solid var(--vc-rule);
	font-style: normal;
}

.vc-quote__name {
	display: block;
	font-size: 15px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vc-ink);
}

.vc-quote__role {
	display: block;
	margin-top: .25em;
	font-size: 14px;
	color: var(--vc-ink-soft);
}

@media (max-width: 767px) {
	.vc-quotes__heading { font-size: 24px; }
	.vc-quote__body { font-size: 16.5px; }
}

/* ==========================================================================
   Main navigation
   Dropping the "Services" parent promoted its four pages to the top level, which
   takes the menu from five items to eight — 987px of it.  Astra keeps the desktop
   menu down to 921px, so between there and 1100px it wrapped onto a second row
   with "Appointments" stranded underneath.  Tightening the tracking in that band
   keeps it on one line; above 1100px it is left exactly as it was.
   ========================================================================== */

@media (min-width: 922px) and (max-width: 1099px) {
	.main-header-menu > .menu-item > .menu-link {
		padding-left: 8px;
		padding-right: 8px;
		font-size: 13.5px;
	}
}