/**
 * TAJO theme styles. Loaded after Bootstrap 5.3 (CDN) and Swiper 11 (CDN).
 *
 * 1. Tokens: brand colours, fonts and sizes from the XD (TAJ-Website-Templates-v2.xd).
 * 2. Bootstrap overrides via its CSS variables
 * 3. Base, components, layout, blocks
 */

/* ---------- 1. Tokens ---------- */

/* Brand fonts: @font-face rules are in fonts.css. */

:root {
	--tajo-cream: #f6efe5;
	--tajo-ink: #1a1a1a;
	--tajo-charcoal: #383838;
	--tajo-olive: #5d6653;
	--tajo-sage: #a0ab93;
	--tajo-rust: #b95232;
	--tajo-coral: #e28a78;
	--tajo-brown: #413e39;
	--tajo-sand: #ede2d7;
	--tajo-stone: #e3dad2;
	--tajo-white: #fff;
	--tajo-line: rgba(0, 29, 44, .75);

	--tajo-font-display: "PP Editorial New", Georgia, serif;
	--tajo-font-body: "Akkurat LL", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* XD desktop sizes at 1876px, scaled down on smaller screens. */
	--tajo-fs-display: clamp(3rem, 1.6rem + 4.2vw, 6.4375rem); /* 103px hero */
	/* Each reaches its full size by 1876px, and each step is smaller than the one above it. */
	--tajo-fs-h1: clamp(2.25rem, 1.5rem + 2.4vw, 4.27rem);     /* 68.3px page titles */
	--tajo-fs-h2: clamp(1.75rem, 1.78rem + 1.15vw, 3.125rem);  /* 45px at 1440 → 50px section headings */
	--tajo-fs-h3: clamp(1.5rem, 1.155rem + 1.15vw, 2.5rem);    /* 35px at 1440 → 40px slide titles */
	--tajo-fs-h4: clamp(1.375rem, 1.2rem + .5vw, 1.75rem);     /* 28px card titles */
	--tajo-tracking-display: -.004em;
	--tajo-tracking-eyebrow: .04em;

	/* Vertical rhythm measured from the XD (section padding about 88px, CTA about 120px, image rows about 50px). */
	--tajo-section-y: clamp(3.5rem, 1.5rem + 3.4vw, 5.5rem);
	--tajo-section-y-lg: clamp(4rem, 2rem + 4.7vw, 7.5rem);
	--tajo-stack-y: clamp(1.75rem, 1rem + 1.8vw, 3.125rem);
	--tajo-header-h: 6.5rem;
	--tajo-hero-full: 100svh;                        /* homepage hero fills the screen */
	--tajo-hero-short: clamp(22rem, 28vw, 32.75rem); /* 524px */

	/* Corner radii from the XD image masks. */
	--tajo-radius-card: 1.5rem;     /* 24px: project and package card images */
	--tajo-radius-media: 1.625rem;  /* 26px: feature row images */
	--tajo-radius-tile: 1.125rem;   /* 16-19px: single project images */
	--tajo-radius-panel: .875rem;   /* 14-15px: testimonial cards, service slides */
	--tajo-grid-gap: clamp(1.5rem, .5rem + 3vw, 4.25rem); /* 68px between cards */

	/* ---------- 2. Bootstrap overrides ---------- */
	--bs-body-font-family: var(--tajo-font-body);
	--bs-body-font-size: 1.125rem;
	--bs-body-line-height: 1.75;
	--bs-body-color: var(--tajo-charcoal);
	--bs-body-color-rgb: 56, 56, 56;
	--bs-body-bg: var(--tajo-white);
	--bs-emphasis-color: var(--tajo-ink);
	--bs-heading-color: inherit;
	--bs-link-color: var(--tajo-charcoal);
	--bs-link-color-rgb: 56, 56, 56;
	--bs-link-hover-color: var(--tajo-ink);
	--bs-link-hover-color-rgb: 26, 26, 26;
	--bs-primary: var(--tajo-charcoal);
	--bs-primary-rgb: 56, 56, 56;
	--bs-dark: var(--tajo-ink);
	--bs-dark-rgb: 26, 26, 26;
	--bs-light: var(--tajo-cream);
	--bs-light-rgb: 246, 239, 229;
	--bs-border-radius: var(--tajo-radius-panel);
	--bs-border-radius-lg: var(--tajo-radius-card);
	--bs-focus-ring-color: rgba(93, 102, 83, .35);
}

/* Wider gutters than Bootstrap's default. Every page uses the project/package XD's column: margin
   213px at 1876px (1482px wide), and the same 92% of Bootstrap's width from 1400px. */
.container,
.row {
	--bs-gutter-x: 2rem;
}

@media (min-width: 1400px) {
	.container {
		max-width: 1214px;
	}
}

@media (min-width: 1700px) {
	.container {
		max-width: 1482px;
	}
}

/* ---------- 3. Base ---------- */

/* Default (not "antialiased") smoothing: matches the XD's text weight, which matters for Editorial New Ultralight. */
body {
	letter-spacing: .02em;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--tajo-font-display);
	font-weight: 200;
	line-height: 1.08;
	letter-spacing: var(--tajo-tracking-display);
}

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

.tajo-section {
	padding-block: var(--tajo-section-y);
}

.tajo-section--cream { background-color: var(--tajo-cream); }
.tajo-section--white { background-color: var(--tajo-white); }
.tajo-section--stone { background-color: var(--tajo-stone); }
.tajo-section--ink   { background-color: var(--tajo-ink); color: var(--tajo-cream); }
.tajo-section--lg    { padding-block: var(--tajo-section-y-lg); }

/* Single-project blocks sit close together in one column. */
.tajo-stack { padding-block: var(--tajo-stack-y); }

/* Main heading of a page without a hero; the content follows it closely. */
.tajo-page-title { padding-block: var(--tajo-section-y); }
.tajo-page-title + .tajo-section { padding-top: 0; }

/* Plain WordPress blocks (paragraphs, headings…) between TAJO sections. */
.tajo-prose {
	max-width: 52rem;
	margin-inline: auto;
}

.tajo-display { font-family: var(--tajo-font-display); font-weight: 200; font-size: var(--tajo-fs-display); line-height: 1.08; }
.tajo-h1 { font-size: var(--tajo-fs-h1); font-weight: 200; line-height: 1.08; }
.tajo-h2 { font-size: var(--tajo-fs-h2); font-weight: 200; line-height: 1.08; }
.tajo-h3 { font-size: var(--tajo-fs-h3); font-weight: 200; line-height: 1.2; }
.tajo-h4 { font-size: var(--tajo-fs-h4); font-weight: 300; line-height: 1.3; letter-spacing: .02em; }

.tajo-eyebrow {
	margin-bottom: 1rem;
	font-family: var(--tajo-font-body);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: var(--tajo-tracking-eyebrow);
	text-transform: uppercase;
}

.tajo-lead {
	font-size: clamp(1.0625rem, 1rem + .25vw, 1.25rem);
	line-height: 1.8;
	letter-spacing: .013em;
}

.tajo-section-head {
	margin-bottom: clamp(2rem, 1.5rem + 1vw, 2.5rem);
	text-align: center;
}

.tajo-section-head__title { margin-bottom: .25rem; line-height: 1.2; }

/* XD: listing headings are #1a1a1a; review headings stay charcoal. */
.tajo-card-grid .tajo-section-head,
.tajo-post-grid .tajo-section-head { color: var(--tajo-ink); }
.tajo-section-head__text  { margin: 0; letter-spacing: .02em; }

/* Listing heads (Home & Land XD at 1876px): description 17.6px, its baseline 41px under the
   heading's and 64px above the cards (tightened for MAG-104 QA). */
.tajo-post-grid .tajo-section-head { margin-bottom: clamp(2.25rem, .5rem + 2.5vw, 3.4375rem); }
.tajo-post-grid .tajo-section-head__title { margin-bottom: 0; }
.tajo-post-grid .tajo-section-head__text { font-size: 1.1rem; }

/* Editor-only notice when a block is missing required content. */
.tajo-block-empty {
	padding: 2rem;
	border: 1px dashed var(--tajo-sage);
	background: var(--tajo-cream);
	font-size: 1rem;
	text-align: center;
}

/* ---------- Components: buttons ---------- */

/* Every text button is the same 52px pill with a 16px label (hero "Discover More"). The lg/sm classes
   stay for markup but no longer change the size. */
.btn {
	--bs-btn-padding-x: 1.6rem;
	--bs-btn-padding-y: 0;
	--bs-btn-font-size: 1rem;
	--bs-btn-font-weight: 400;
	--bs-btn-line-height: 1.4;
	--bs-btn-border-width: 1px;
	--bs-btn-border-radius: 50rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 3.25rem;
	letter-spacing: var(--tajo-tracking-eyebrow);
}

.btn-lg,
.btn-sm {
	--bs-btn-padding-x: 1.6rem;
	--bs-btn-padding-y: 0;
	--bs-btn-font-size: 1rem;
	--bs-btn-line-height: 1.4;
	--bs-btn-border-radius: 50rem;
}

/* Paired buttons (project overview) keep a shared minimum width. */
.btn-sm { min-width: 8.25rem; }

.btn-tajo-dark {
	--bs-btn-color: var(--tajo-cream);
	--bs-btn-bg: var(--tajo-charcoal);
	--bs-btn-border-color: var(--tajo-charcoal);
	--bs-btn-hover-color: var(--tajo-white);
	--bs-btn-hover-bg: var(--tajo-ink);
	--bs-btn-hover-border-color: var(--tajo-ink);
	--bs-btn-active-color: var(--tajo-white);
	--bs-btn-active-bg: var(--tajo-ink);
	--bs-btn-active-border-color: var(--tajo-ink);
	--bs-btn-focus-shadow-rgb: 56, 56, 56;
}

.btn-tajo-light {
	--bs-btn-color: var(--tajo-charcoal);
	--bs-btn-bg: var(--tajo-cream);
	--bs-btn-border-color: var(--tajo-cream);
	--bs-btn-hover-color: var(--tajo-ink);
	--bs-btn-hover-bg: var(--tajo-white);
	--bs-btn-hover-border-color: var(--tajo-white);
	--bs-btn-active-color: var(--tajo-ink);
	--bs-btn-active-bg: var(--tajo-white);
	--bs-btn-active-border-color: var(--tajo-white);
	--bs-btn-focus-shadow-rgb: 246, 239, 229;
}

.btn-tajo-ink {
	--bs-btn-color: var(--tajo-white);
	--bs-btn-bg: var(--tajo-ink);
	--bs-btn-border-color: var(--tajo-ink);
	--bs-btn-hover-color: var(--tajo-white);
	--bs-btn-hover-bg: var(--tajo-charcoal);
	--bs-btn-hover-border-color: var(--tajo-charcoal);
	--bs-btn-active-color: var(--tajo-white);
	--bs-btn-active-bg: var(--tajo-charcoal);
	--bs-btn-active-border-color: var(--tajo-charcoal);
	--bs-btn-focus-shadow-rgb: 26, 26, 26;
}

.btn-tajo-outline {
	--bs-btn-color: var(--tajo-ink);
	--bs-btn-bg: transparent;
	--bs-btn-border-color: var(--tajo-ink);
	--bs-btn-hover-color: var(--tajo-white);
	--bs-btn-hover-bg: var(--tajo-ink);
	--bs-btn-hover-border-color: var(--tajo-ink);
	--bs-btn-active-color: var(--tajo-white);
	--bs-btn-active-bg: var(--tajo-ink);
	--bs-btn-active-border-color: var(--tajo-ink);
	--bs-btn-focus-shadow-rgb: 26, 26, 26;
}

/* "VIEW ALL" / "MORE INFO" text link, underlined 7px below the text as in the XD. */
.tajo-link-rule {
	display: inline-block;
	padding-bottom: .1875rem;
	border-bottom: 1px solid rgba(9, 26, 44, .75);
	color: var(--tajo-charcoal);
	font-size: .875rem;
	line-height: 1.2;
	letter-spacing: var(--tajo-tracking-eyebrow);
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: border-color .2s ease;
}

.tajo-link-rule:hover,
a:hover .tajo-link-rule {
	border-bottom-color: transparent;
}

/* ---------- Components: icons ---------- */

/* SVGs in assets/icons, drawn in the current text colour. Blocks output <span class="tajo-icon tajo-icon--bed">. */
.tajo-icon {
	display: inline-block;
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	background-color: currentColor;
	-webkit-mask: var(--tajo-icon) center / contain no-repeat;
	mask: var(--tajo-icon) center / contain no-repeat;
	vertical-align: middle;
}

.tajo-icon--arrow     { --tajo-icon: url("../icons/arrow.svg"); }
.tajo-icon--mark      { --tajo-icon: url("../icons/mark.svg"); }
.tajo-icon--close     { --tajo-icon: url("../icons/close.svg"); }
.tajo-icon--bed       { --tajo-icon: url("../icons/bed.svg"); }
.tajo-icon--bath      { --tajo-icon: url("../icons/bath.svg"); }
.tajo-icon--car       { --tajo-icon: url("../icons/car.svg"); }
.tajo-icon--play      { --tajo-icon: url("../icons/play.svg"); }
.tajo-icon--facebook  { --tajo-icon: url("../icons/facebook.svg"); }
.tajo-icon--instagram { --tajo-icon: url("../icons/instagram.svg"); }
.tajo-icon--linkedin  { --tajo-icon: url("../icons/linkedin.svg"); }
.tajo-icon--youtube   { --tajo-icon: url("../icons/youtube.svg"); }
.tajo-icon--x         { --tajo-icon: url("../icons/x.svg"); }
.tajo-icon--tiktok    { --tajo-icon: url("../icons/tiktok.svg"); }
.tajo-icon--pinterest { --tajo-icon: url("../icons/pinterest.svg"); }
.tajo-icon--houzz     { --tajo-icon: url("../icons/houzz.svg"); }

/* ---------- Components: motion ---------- */

/*
 * CSS only: a hero load-in, a hero parallax and section reveals driven by scroll timelines.
 * Reveals use the individual translate/scale properties, so they never fight existing transforms
 * (card hover zoom, Swiper). Browsers without scroll timelines show everything static; visitors
 * who ask for reduced motion get none.
 */
@keyframes tajo-rise {
	from { opacity: 0; translate: 0 1.5rem; }
	to   { opacity: 1; translate: 0 0; }
}

@keyframes tajo-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes tajo-hero-parallax {
	from { transform: scale(1.12) translateY(0); }
	to   { transform: scale(1.12) translateY(12%); }
}

@keyframes tajo-hero-text-parallax {
	from { transform: translateY(0); }
	to   { transform: translateY(20svh); }
}

@keyframes tajo-reveal-up {
	from { opacity: 0; translate: 0 2.5rem; }
	to   { opacity: 1; translate: 0 0; }
}

@keyframes tajo-reveal-zoom {
	from { opacity: 0; scale: .94; }
	to   { opacity: 1; scale: 1; }
}

@media (prefers-reduced-motion: no-preference) {
	/* Hero: text and button rise in one after another on load. Not the title: it is the LCP on full-height heroes. */
	.tajo-hero__text,
	.tajo-hero__btn,
	.tajo-hero__badge {
		animation: tajo-rise .9s cubic-bezier(.2, .7, .2, 1) both;
	}

	.tajo-hero__text { animation-delay: .15s; }
	.tajo-hero__btn  { animation-delay: .3s; }
	.tajo-hero__badge { animation-delay: .15s; }
	/* Video only: the image is the LCP on inner pages, and a fade would delay it by about .8s. */
	.tajo-hero__media video { animation: tajo-fade-in .4s ease-out both; }

	/* Buttons lift slightly on hover. */
	.btn,
	.tajo-slider-nav__btn {
		transition-property: color, background-color, border-color, box-shadow, opacity, translate;
		transition-duration: .2s;
	}

	.btn:hover,
	.tajo-slider-nav__btn:not(.swiper-button-disabled):not(.is-disabled):hover { translate: 0 -2px; }

	/*
	 * Hero image drifts down slower than the page scrolls (parallax); the text a little slower than
	 * the page (about 80%). Not on inner-page or project heroes, whose text sits at the bottom edge.
	 */
	@supports (animation-timeline: scroll()) {
		.tajo-hero__media img {
			animation: tajo-hero-parallax linear both;
			animation-timeline: scroll(root);
			animation-range: 0 100svh;
		}

		.tajo-hero__media video {
			animation: tajo-fade-in .4s ease-out both, tajo-hero-parallax linear both;
			animation-timeline: auto, scroll(root);
			animation-range: normal, 0 100svh;
		}

		.tajo-hero:not(.tajo-hero--short) .tajo-hero__content {
			animation: tajo-hero-text-parallax linear both;
			animation-timeline: scroll(root);
			animation-range: 0 100svh;
		}

		body:is(.single-tajo_project, .single-tajo_package) .tajo-hero .tajo-hero__content { animation: none; }
	}

	/* Sections fade up (text) or settle in (images) as they scroll into view. */
	@supports (animation-timeline: view()) {
		.tajo-section-head,
		.tajo-intro__inner,
		.tajo-testimonials__head,
		.tajo-grid > *,
		.tajo-services .swiper,
		.tajo-testimonials .swiper,
		.tajo-cta__inner,
		.tajo-contact__intro,
		.tajo-form,
		.tajo-overview__row,
		.tajo-floorplan__row {
			animation: tajo-reveal-up linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 80%;
		}

		.tajo-media-text__media,
		.tajo-image-pair__media,
		.tajo-gallery__item,
		.tajo-floorplan__media {
			animation: tajo-reveal-zoom linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 80%;
		}

		/*
		 * Feature row, timed to the whole section: the image fades up, then the eyebrow, heading,
		 * text and button rise one after another.
		 */
		.tajo-feature { view-timeline: --tajo-feature block; }

		.tajo-feature__media,
		.tajo-feature__drawing,
		.tajo-feature__content > * {
			animation-timeline: --tajo-feature;
			animation-fill-mode: both;
			animation-timing-function: ease-out;
		}

		.tajo-feature__media,
		.tajo-feature__drawing {
			animation-name: tajo-reveal-up;
			animation-range: cover 10% cover 35%;
		}

		.tajo-feature__content > * {
			animation-name: tajo-reveal-up;
			animation-range: cover 15% cover 35%;
		}

		.tajo-feature__content > :nth-child(2) { animation-range: cover 18% cover 38%; }
		.tajo-feature__content > :nth-child(3) { animation-range: cover 21% cover 41%; }
		.tajo-feature__content > :nth-child(4) { animation-range: cover 24% cover 44%; }

		/*
		 * Footer columns rise one after another. Timed to the footer itself, which ends the page,
		 * so everything is in place before the page is fully scrolled.
		 */
		.tajo-footer { view-timeline: --tajo-footer block; }

		.tajo-footer__grid > * {
			animation: tajo-reveal-up ease-out both;
			animation-timeline: --tajo-footer;
			animation-range: entry 0% entry 50%;
		}

		.tajo-footer__grid > :nth-child(2) { animation-range: entry 8% entry 58%; }
		.tajo-footer__grid > :nth-child(3) { animation-range: entry 16% entry 66%; }
		.tajo-footer__grid > :nth-child(4) { animation-range: entry 24% entry 74%; }
		.tajo-footer__grid > :nth-child(5) { animation-range: entry 32% entry 82%; }

		.tajo-footer__bottom {
			animation: tajo-reveal-up ease-out both;
			animation-timeline: --tajo-footer;
			animation-range: entry 40% entry 90%;
		}

		/* Cards in a row arrive one after another. */
		.tajo-grid > :nth-child(3n+2) { animation-range: entry 10% entry 90%; }
		.tajo-grid > :nth-child(3n+3) { animation-range: entry 20% entry 100%; }
	}
}

/* ---------- Components: slider prev/next ---------- */

.tajo-slider-nav {
	display: flex;
	gap: 1.75rem;
}

.tajo-slider-nav__btn {
	display: inline-grid;
	place-items: center;
	width: 3.375rem;
	height: 3.375rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(107, 107, 107, .14);
	color: #001d2c;
	transition: background-color .2s ease, opacity .2s ease;
}

.tajo-slider-nav__btn:hover { background: rgba(107, 107, 107, .28); }
.tajo-slider-nav__btn.swiper-button-disabled { opacity: .4; cursor: default; }
.tajo-slider-nav__btn.swiper-button-lock { display: none; }
.tajo-slider-nav__btn .tajo-icon { width: .875rem; height: 1.5rem; }
.tajo-slider-nav__btn--next .tajo-icon { transform: scaleX(-1); }
.tajo-slider-nav__btn.is-disabled { opacity: .4; pointer-events: none; }

.tajo-slider-nav--light .tajo-slider-nav__btn { background: var(--tajo-white); }
.tajo-slider-nav--light .tajo-slider-nav__btn:hover { background: var(--tajo-cream); }

/* ---------- Components: lightbox ---------- */

/*
 * Project and package images (data-tajo-zoom, set by the blocks) open full screen in a <dialog>
 * built by main.js. No padding: the original file fills the screen, the close button is the
 * white round slider button of the homepage reviews.
 */
[data-tajo-zoom] { cursor: zoom-in; }

.tajo-lightbox {
	width: 100vw;
	max-width: none;
	height: 100dvh;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	background: transparent;
}

.tajo-lightbox[open] {
	display: grid;
	place-items: center;
}

/* Horizontal drags are swipes (main.js); vertical panning and pinch zoom stay with the browser. */
.tajo-lightbox.has-nav {
	touch-action: pan-y pinch-zoom;
	user-select: none;
}

.tajo-lightbox::backdrop { background: rgba(26, 26, 26, .92); }

.tajo-lightbox__img {
	max-width: 100vw;
	max-height: 100dvh;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Top right: (<)(>)(×), the reviews' white round buttons and spacing. Prev/next only for a Gallery. */
.tajo-lightbox__bar {
	position: absolute;
	top: 1rem;
	right: 1rem;
}

.tajo-lightbox__btn { background: var(--tajo-white); }

/* Hover inverts the colours instead of the slider buttons' lift. */
.tajo-lightbox__btn:hover,
.tajo-lightbox__btn:not(.swiper-button-disabled):not(.is-disabled):hover {
	background: #001d2c;
	color: var(--tajo-white);
	translate: none;
}

.tajo-lightbox__close .tajo-icon { width: 1rem; height: 1rem; }

.tajo-lightbox:not(.has-nav) .tajo-lightbox__prev,
.tajo-lightbox:not(.has-nav) .tajo-lightbox__next { display: none; }

@media (min-width: 992px) {
	.tajo-lightbox__bar {
		top: 1.5rem;
		right: 1.5rem;
	}
}

html:has(.tajo-lightbox[open]) { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
	.tajo-lightbox[open],
	.tajo-lightbox[open]::backdrop {
		transition: opacity .25s ease-out;
	}

	@starting-style {
		.tajo-lightbox[open],
		.tajo-lightbox[open]::backdrop { opacity: 0; }
	}

	/* Gallery prev/next and swipes: the new photo slides in from the side it came from. */
	.tajo-lightbox__img.is-from-next { animation: tajo-lightbox-from-next .35s cubic-bezier(.2, .7, .2, 1); }
	.tajo-lightbox__img.is-from-prev { animation: tajo-lightbox-from-prev .35s cubic-bezier(.2, .7, .2, 1); }

	@keyframes tajo-lightbox-from-next {
		from { opacity: 0; translate: 4rem 0; }
	}

	@keyframes tajo-lightbox-from-prev {
		from { opacity: 0; translate: -4rem 0; }
	}
}

/* ---------- Components: forms (Fluent Forms) ---------- */

/* Scoped under .fluentform to beat Fluent's ".ff-default .ff-el-form-control", which loads later. */
.tajo-form .fluentform .ff-el-group { margin-bottom: .6875rem; } /* 58px between lines, as in the XD */

.tajo-form .ff-el-input--label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
}

.tajo-form .fluentform .ff-el-form-control,
.tajo-form .fluentform select,
.tajo-form .fluentform textarea {
	width: 100%;
	padding: .5rem 0 .625rem;
	border: 0;
	border-bottom: 1px solid var(--tajo-line);
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	color: var(--tajo-charcoal);
	font-family: inherit;
	font-size: 1.125rem;
	line-height: 1.6;
	letter-spacing: .02em;
}

.tajo-form .fluentform .ff-el-form-control::placeholder {
	color: var(--tajo-charcoal);
	opacity: 1;
}

.tajo-form .fluentform .ff-el-form-control:focus {
	outline: 0;
	border-bottom-color: var(--tajo-olive);
	background-color: transparent;
	box-shadow: 0 1px 0 0 var(--tajo-olive);
}

/* Browsers force their own autofill colour; the delay holds the section background behind the field. */
.tajo-form .fluentform .ff-el-form-control:-webkit-autofill {
	-webkit-text-fill-color: var(--tajo-charcoal);
	transition: background-color 0s 600000s;
}

/* Fluent boxes the thank-you message; here it is plain text. */
.tajo-form .ff-message-success {
	margin-top: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
}

.tajo-form .fluentform select {
	appearance: none;
	padding-right: 1.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M9 1 5 5 1 1' fill='none' stroke='%23383838' stroke-width='1.2'/%3E%3C/svg%3E");
	background-position: right .25rem center;
	background-repeat: no-repeat;
	background-size: .625rem .375rem;
}

.tajo-form .fluentform textarea {
	min-height: 13.5rem;
	resize: vertical;
}

.tajo-form .fluentform .ff-btn-submit {
	height: 3.25rem;
	margin-top: 2.125rem;
	padding: 0 1.6rem;
	border: 0;
	border-radius: 50rem;
	background-color: var(--tajo-charcoal) !important;
	color: var(--tajo-sand) !important;
	font-size: 1rem;
	line-height: 1.4;
	letter-spacing: var(--tajo-tracking-eyebrow);
	transition: background-color .2s ease;
}

.tajo-form .fluentform .ff-btn-submit:hover { background-color: var(--tajo-ink) !important; }
.tajo-form .ff-el-is-error .ff-el-form-control { border-bottom-color: var(--tajo-rust); }
.tajo-form .error,
.tajo-form .text-danger { color: var(--tajo-rust); font-size: .875rem; }

/* ---------- Layout: header ---------- */

.tajo-header {
	position: relative;
	z-index: 1030;
	background: var(--tajo-ink);
	color: var(--tajo-white);
}

/* Front page: sits over the hero with the XD's top gradient. */
.tajo-header--overlay {
	position: absolute;
	inset: 0 0 auto;
	padding-bottom: 3rem;
	background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
}

.admin-bar .tajo-header--overlay,
.admin-bar .tajo-offcanvas {
	top: 46px;
}

@media (min-width: 783px) {
	.admin-bar .tajo-header--overlay,
	.admin-bar .tajo-offcanvas {
		top: 32px;
	}
}

.tajo-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	min-height: var(--tajo-header-h);
}

/* lg: logo | nav | button in a 1fr auto 1fr grid so the nav centres on the page, not between unequal ends. */
@media (min-width: 992px) {
	.tajo-header__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		/* Row centred 84px from the top at 1876px. */
		min-height: calc(var(--tajo-header-h) + 2rem);
		padding-top: 2rem;
	}

	.tajo-header__cta { justify-self: end; }
}

.tajo-header__brand {
	display: inline-flex;
	color: inherit;
	font-family: var(--tajo-font-display);
	font-size: 1.75rem;
	text-decoration: none;
}

.tajo-header__brand:hover { color: inherit; }
/* Logo from Tajo Settings: an inline SVG (drawn in the text colour) or an image. */
/* Image logos step up with the screen: 72px phones, 80px tablets, 96px small laptops, 112px desktop. */
.tajo-header__brand .tajo-logo { display: block; width: auto; max-width: 12rem; height: 4.5rem; }
@media (min-width: 576px) { .tajo-header__brand .tajo-logo { height: 5rem; } }
@media (min-width: 992px) { .tajo-header__brand .tajo-logo { height: 6rem; } }
@media (min-width: 1200px) { .tajo-header__brand .tajo-logo { height: 7rem; } }
.tajo-header__brand svg.tajo-logo { width: 12.5rem; max-width: 100%; height: auto; fill: currentColor; }
.tajo-header__brand-text { line-height: 1; letter-spacing: var(--tajo-tracking-display); }

.tajo-header__nav {
	display: flex;
	justify-content: center;
}

.tajo-header__menu {
	display: flex;
	gap: clamp(1.5rem, 4vw, 5.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tajo-header__menu a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding-block: .25rem;
	color: var(--tajo-white);
	font-size: 1.125rem;
	letter-spacing: 0;
	text-decoration: none;
}

.tajo-header__menu a::after {
	content: "";
	position: absolute;
	bottom: -.125rem;
	left: 0;
	width: 0;
	height: 1px;
	background: currentColor;
	transition: width .2s ease;
}

.tajo-header__menu > li > a:hover::after,
.tajo-header__menu > .current-menu-item > a::after,
.tajo-header__menu > .current-menu-ancestor > a::after,
.tajo-header__menu > .current-menu-parent > a::after {
	width: calc(100% - 1.125rem);
}

.tajo-header__menu > li:not(.menu-item-has-children) > a:hover::after,
.tajo-header__menu > .current-menu-item:not(.menu-item-has-children) > a::after {
	width: 100%;
}

.tajo-header__menu .menu-item-has-children { position: relative; }
.tajo-caret { width: .625rem; height: .375rem; }

.tajo-header__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: -1rem;
	min-width: 14rem;
	margin: 0;
	padding: .75rem 0;
	border-radius: .5rem;
	background: var(--tajo-ink);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(.5rem);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.tajo-header__menu .sub-menu a {
	display: block;
	padding: .375rem 1rem;
	font-size: 1rem;
}

.tajo-header__menu .sub-menu a::after { display: none; }

.tajo-header__menu .menu-item-has-children:hover > .sub-menu,
.tajo-header__menu .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.tajo-header__cta { min-width: 8.25rem; }

.tajo-header__toggle {
	padding: .5rem;
	border: 0;
	background: none;
	color: inherit;
}

.tajo-header__toggle svg { width: 2rem; height: 2rem; }

.tajo-offcanvas {
	--bs-offcanvas-bg: var(--tajo-ink);
	--bs-offcanvas-color: var(--tajo-white);
}

.tajo-offcanvas .offcanvas-header { min-height: var(--tajo-header-h); }
.tajo-offcanvas .btn-close { filter: invert(1); }

.tajo-offcanvas__menu {
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.tajo-offcanvas__menu a {
	display: block;
	padding: .625rem 0;
	color: var(--tajo-white);
	font-family: var(--tajo-font-display);
	font-size: 2rem;
	font-weight: 200;
	text-decoration: none;
}

.tajo-offcanvas__menu .sub-menu {
	padding-left: 1rem;
	list-style: none;
}

.tajo-offcanvas__menu .sub-menu a {
	font-family: var(--tajo-font-body);
	font-size: 1.125rem;
}

.tajo-offcanvas__menu .tajo-caret { display: none; }

/* ---------- Layout: footer ---------- */

.tajo-footer {
	padding-block: clamp(3.5rem, 2rem + 4vw, 6rem);
	background: var(--tajo-ink);
	color: var(--tajo-white);
	font-size: 1rem;
	letter-spacing: 0;
}

/* The copyright bar closes the footer, so it needs less room underneath. */
.tajo-footer:has(.tajo-footer__bottom) { padding-bottom: clamp(1.5rem, 1rem + 1vw, 2.25rem); }

.tajo-footer a { color: inherit; text-decoration: none; }
.tajo-footer a:hover { text-decoration: underline; }

.tajo-footer__title {
	margin-bottom: 1.5rem;
	font-family: var(--tajo-font-body);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
}

/* The design writes "Licenses" in title case, unlike the menu headings. */
.tajo-footer__title--plain { text-transform: none; }

/* On tablets, the three menus share the full row when there is no licences column. */
@media (min-width: 768px) and (max-width: 991.98px) {
	.tajo-footer__grid--no-legal > .col-md-3 { width: 33.333%; }
}

/* Footer columns at x 736 / 985 / 1236 / 1526 of the 1876px design (logo, 3 menus, licences). */
@media (min-width: 992px) {
	.tajo-footer__grid {
		display: grid;
		grid-template-columns: 588fr 249fr 251fr 290fr 234fr;
	}

	/* Without licences, the menus move right so the last one ends on the same edge as the credit below. */
	.tajo-footer__grid--no-legal {
		grid-template-columns: 1fr repeat(3, auto);
		column-gap: clamp(3rem, 1rem + 4vw, 7.5rem);
	}

	.tajo-footer__grid > * { width: auto; max-width: none; }
	.tajo-footer__legal { white-space: nowrap; }
}

.tajo-footer__menu {
	margin: 0;
	padding: 0;
	line-height: 2;
	list-style: none;
}

.tajo-footer__legal { line-height: 2; }

/* The text is longer than the column, unlike the rest of it. */
.tajo-footer__text { white-space: normal; }
.tajo-footer__text p { margin-bottom: 0; }

.tajo-footer__badge { margin-top: .5rem; }
.tajo-footer__badge,
.tajo-footer__badge a {
	display: flex;
	align-items: center;
	gap: .75rem;
}
.tajo-footer__badge img {
	flex: none;
	width: auto;
	height: 50px;
}

/* Copyright and credit: a quiet full-width bar under the columns, side by side on wide screens. */
.tajo-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .25rem 2rem;
	margin-top: clamp(2.5rem, 1.5rem + 2vw, 4rem);
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, .15);
	color: rgba(255, 255, 255, .6);
	font-size: .875rem;
}

.tajo-footer__bottom p { margin: 0; }
.tajo-footer__bottom a:hover { color: var(--tajo-white); }


/* ---------- Block: Hero ---------- */

.tajo-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--tajo-hero-full);
	padding-block: calc(var(--tajo-header-h) + 3rem) 4rem;
	overflow: hidden;
	background: var(--tajo-ink);
	color: var(--tajo-white);
}

/* Inner pages: 524px, title near the bottom. */
.tajo-hero--short {
	/* Inner-page heroes have rounded bottom corners (40px). */
	z-index: 1;
	margin-bottom: -2.5rem;
	border-radius: 0 0 2.5rem 2.5rem;
	align-items: flex-end;
	min-height: var(--tajo-hero-short);
	padding-bottom: clamp(2.5rem, 4.8vw, 5.5rem);
}

.tajo-hero__media {
	position: absolute;
	inset: 0;
	margin: 0;
}

/* The video (when set) plays over the image, which shows until its first frame and as its fallback. */
.tajo-hero__media :is(img, video) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Video brightness is set per block (default 85%). */
.tajo-hero__video { filter: brightness(var(--tajo-hero-video-brightness, .85)); }

/* The next section slides 40px under the hero, so its own colour (not the page's white) shows behind
   the rounded corners. Its background paints under the transparent border, keeping its spacing. */
.tajo-hero--short + * { border-top: 2.5rem solid transparent; }

/* Left-to-right darkening from the XD (multiply, 61%); strength set per block. */
.tajo-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(0, 0, 0, var(--tajo-hero-overlay, .61)), rgba(0, 0, 0, 0) 51%);
}

.tajo-hero--short .tajo-hero__media::after {
	background: linear-gradient(to right, rgba(0, 0, 0, var(--tajo-hero-overlay, .6)), rgba(0, 0, 0, 0) 45%);
}

.tajo-hero__content {
	position: relative;
	max-width: 46rem;
}

.tajo-hero__title { margin-bottom: 1.5rem; }
.tajo-hero__title em { font-style: italic; }
.tajo-hero--short .tajo-hero__title { margin-bottom: 0; }

.tajo-hero__text {
	max-width: 29rem;
	margin-bottom: 1.875rem;
	line-height: 1.67;
	letter-spacing: var(--tajo-tracking-eyebrow);
}

.tajo-hero__text > :last-child { margin-bottom: 0; }

/* Award or member logo, under the title. */
.tajo-hero__badge {
	width: fit-content;
	margin-bottom: 1.5rem;
	padding: .25rem;
	border-radius: .75rem;
	/* Award logos use dark text, which needs a white backing over any photo. */
	background: var(--tajo-white);
}

.tajo-hero--short .tajo-hero__badge { margin-top: 1.5rem; }

/* 5.75rem plus the badge padding keeps the whole badge within 100px. */
.tajo-hero__badge-img {
	display: block;
	width: auto;
	max-width: 11rem;
	height: auto;
	max-height: 5.75rem;
}

/* ---------- Component: Card (Card Grid, Post Grid) ---------- */

.tajo-grid {
	--bs-gutter-x: var(--tajo-grid-gap);
	--bs-gutter-y: 3.25rem;
}

.tajo-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.tajo-card:hover { color: inherit; }

.tajo-card__media {
	margin: 0 0 1.3rem;
	overflow: hidden;
	aspect-ratio: 483 / 310;
	border-radius: var(--tajo-radius-card);
	background: var(--tajo-sand);
	isolation: isolate;
}

.tajo-card--package .tajo-card__media {
	aspect-ratio: 754 / 484;
	margin-bottom: 1.55rem;
	border-radius: 1.5625rem;
}

/* Package rows: 58px from a card title's baseline to the next row's image (XD). */
.tajo-grid:has(.tajo-card--package) { --bs-gutter-y: 3rem; }

.tajo-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.tajo-card:hover .tajo-card__media img { transform: scale(1.04); }

.tajo-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.tajo-card__title { margin: 0; }

/* "View all": small caps whose underline sits on the title's baseline, as in the XD. */
.tajo-card__head .tajo-link-rule {
	position: relative;
	top: -.3em;
	padding-bottom: .125rem;
	font-size: .6875rem;
	line-height: 1;
}

.tajo-card__tag,
.tajo-card__meta {
	font-size: .8rem;
	line-height: 1.6;
	letter-spacing: .02em;
	text-transform: uppercase;
}

/* Category: 12.6px at 1876px, kept in proportion to the card title (XD), on the title's baseline. */
.tajo-card__tag {
	flex-shrink: 0;
	font-size: calc(var(--tajo-fs-h4) * .45);
}

/* Beds, baths, cars and area: 12px in the XD. */
.tajo-card__meta { font-size: .75rem; }
.tajo-card__meta-area { text-transform: none; }

.tajo-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.6em;
	margin: .375rem 0 0;
	padding: 0;
	list-style: none;
}

/* ---------- Component: filter pills and pagination (Post Grid) ---------- */

.tajo-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem 1.3rem;
	margin: 0 0 clamp(2.5rem, 1.5rem + 2.85vw, 4.8rem);
	padding: 0;
	list-style: none;
}

/* Filter row sits 107px under the hero. */
.tajo-post-grid:has(.tajo-filter) { padding-top: clamp(3.5rem, 1.5rem + 4.4vw, 6.7rem); }

.tajo-filter a {
	display: inline-block;
	padding: .3125rem 1.0625rem;
	border-radius: 50rem;
	color: #4a4741;
	font-size: clamp(1rem, .9rem + .3vw, 1.25rem);
	line-height: 1.4;
	letter-spacing: .02em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color .2s ease, color .2s ease;
}
.tajo-filter a:hover { background: rgba(56, 56, 56, .08); }

.tajo-filter a[aria-current="page"] {
	background: var(--tajo-charcoal);
	color: var(--tajo-cream);
}

.tajo-pagination {
	justify-content: center;
	margin-top: clamp(2.5rem, 2rem + 1.5vw, 3.75rem);
}

.tajo-grid-empty { text-align: center; }

/* Post Grid loading: the listing dims while the next filter or page loads. */
.tajo-post-grid__body { transition: opacity .2s ease; }

.tajo-post-grid.is-loading .tajo-post-grid__body {
	opacity: .4;
	pointer-events: none;
}

/* ---------- Block: Feature Row ---------- */

/* Text beside a large image that bleeds to the viewport edge (lg and up). Image 1105×736 at 1876px. */
.tajo-feature {
	--tajo-feature-y: clamp(3rem, 6.3vw, 7.375rem);
	position: relative;
	overflow: hidden;
	padding-block: var(--tajo-feature-y);
}

.tajo-feature__media {
	margin: 0 calc(var(--bs-gutter-x, 2rem) * .5) 2.5rem;
	overflow: hidden;
	border-radius: var(--tajo-radius-media);
}

.tajo-feature__media img {
	width: 100%;
	aspect-ratio: 1105 / 736;
	object-fit: cover;
}

.tajo-feature .tajo-eyebrow { margin-bottom: 2.4rem; }
.tajo-feature__title { margin-bottom: .375rem; color: var(--tajo-brown); }
.tajo-feature__text  { max-width: 29rem; margin-bottom: 2.625rem; }
.tajo-feature__text > :last-child { margin-bottom: 0; }

@media (min-width: 992px) {
	/* The image is 736px tall at 1876px (39.25vw) and never shorter on narrower screens, so it keeps the
	   XD's size next to the text instead of shrinking while the text stays the same (MAG-100 #3). */
	.tajo-feature {
		display: flex;
		align-items: center;
		min-height: calc(max(39.25vw, 46rem) + 2 * var(--tajo-feature-y));
	}

	.tajo-feature__media {
		position: absolute;
		top: var(--tajo-feature-y);
		bottom: var(--tajo-feature-y);
		width: 58.9%;
		margin: 0;
	}

	.tajo-feature__media img {
		height: 100%;
		aspect-ratio: auto;
	}

	.tajo-feature--image-right .tajo-feature__media {
		right: 0;
		border-radius: var(--tajo-radius-media) 0 0 var(--tajo-radius-media);
	}

	.tajo-feature--image-left .tajo-feature__media {
		left: 0;
		border-radius: 0 var(--tajo-radius-media) var(--tajo-radius-media) 0;
	}

	.tajo-feature__content { position: relative; }

	/* Image-left rows: text starts on the column edge, as in the XD. */
	.tajo-feature--image-left .tajo-feature__content { padding-left: 0; }
}

/* Drawing rows (package XD): the plan or elevation sits uncropped in the column, 2/3 wide, with the
   text in the other 28.6%. A grey rule runs across the column above, the drawing 98px under it. */
.tajo-feature--drawing { padding-block: clamp(2.5rem, 1rem + 2.8vw, 4.25rem); }
.tajo-feature--drawing.tajo-feature--rule { padding-top: 0; }

.tajo-feature--rule .tajo-feature__inner {
	padding-top: clamp(3rem, 1rem + 4.4vw, 6.125rem);
	border-top: 1px solid #979797;
}

/* Its own class, so the photo rules' aspect-ratio doesn't override the image's width/height ratio. */
.tajo-feature__drawing { margin: 0 0 2.5rem; }
.tajo-feature__drawing img { width: 100%; height: auto; }

/* Directly under a drawing row the gallery sits 100px below the drawing. */
.tajo-feature--drawing + .tajo-gallery { padding-top: 2rem; }

/* Package pages: the consultation rule 105px under the gallery, contact 491px below the rule (XD). */
.tajo-feature--drawing + .tajo-gallery + .tajo-cta--rule {
	padding-top: calc(var(--tajo-stack-y) + .375rem);
	padding-bottom: calc(var(--tajo-section-y-lg) - .625rem);
}

@media (min-width: 992px) {
	.tajo-feature.tajo-feature--drawing {
		display: block;
		min-height: 0;
		overflow: visible;
	}

	.tajo-feature__inner {
		display: grid;
		grid-template-columns: 66.62% 1fr 28.55%;
		align-items: center;
	}

	.tajo-feature--image-right .tajo-feature__inner { grid-template-columns: 28.55% 1fr 66.62%; }

	.tajo-feature__drawing {
		grid-column: 1;
		grid-row: 1;
		margin: 0;
	}

	.tajo-feature--image-right .tajo-feature__drawing { grid-column: 3; }

	/* The text sits about 84px above the drawing's centre, as in the XD. */
	.tajo-feature--drawing .tajo-feature__content {
		grid-column: 3;
		grid-row: 1;
		margin-bottom: 10.4375rem;
	}

	.tajo-feature--drawing.tajo-feature--image-right .tajo-feature__content { grid-column: 1; }
}

/* ---------- Block: Services Slider ---------- */

.tajo-services {
	/* Below lg slides peek past the container; clip them at the section edge. */
	overflow: hidden;
	padding-bottom: var(--tajo-section-y-lg);
}

.tajo-services__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 2.25rem;
}

.tajo-services__eyebrow { margin: 0; color: var(--tajo-cream); }

/* Same slide widths as the presets in main.js, so nothing moves when Swiper starts as a slider nears the screen. */
.tajo-services .swiper:not(.swiper-initialized) .swiper-slide { width: calc((100% - 2px) / 1.1); margin-right: 20px; }
.tajo-testimonials .swiper:not(.swiper-initialized) .swiper-slide { width: calc((100% - 2.4px) / 1.1); margin-right: 24px; }

@media (min-width: 768px) {
	.tajo-services .swiper:not(.swiper-initialized) .swiper-slide { width: calc((100% - 20px) / 2); }
	.tajo-testimonials .swiper:not(.swiper-initialized) .swiper-slide { width: calc((100% - 24px) / 2); }
}

@media (min-width: 1200px) {
	.tajo-services .swiper:not(.swiper-initialized) .swiper-slide { width: calc((100% - 70px) / 3); margin-right: 35px; }
	.tajo-testimonials .swiper:not(.swiper-initialized) .swiper-slide { width: calc((100% - 60px) / 3); margin-right: 30px; }
}

.tajo-services .swiper { overflow: visible; }

@media (min-width: 992px) {
	.tajo-services .swiper { overflow: hidden; }
}

.tajo-services__slide {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 508 / 634;
	border-radius: var(--tajo-radius-panel);
	color: var(--tajo-white);
	text-decoration: none;
	isolation: isolate;
}

.tajo-services__slide:hover { color: var(--tajo-white); }

.tajo-services__slide img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}

.tajo-services__slide:hover img { transform: scale(1.04); }

.tajo-services__slide::after {
	content: "";
	position: absolute;
	inset: 35% 0 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .84));
}

.tajo-services__body {
	position: absolute;
	inset: auto 0 0;
	z-index: 1;
	padding: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.tajo-services__title { margin-bottom: .75rem; }

.tajo-services__text p { margin: 0; }

.tajo-services__text {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--tajo-cream);
	font-size: 1rem;
	/* Fixed at the 4-line clamp so slide titles line up whatever the text length. */
	min-height: calc(4 * 1.8em);
	line-height: 1.8;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
}

/* ---------- Block: Testimonials ---------- */

.tajo-testimonials .container { position: relative; }
.tajo-testimonials:not(.tajo-section--ink) { padding-bottom: var(--tajo-section-y-lg); }

.tajo-testimonials__head {
	margin-bottom: clamp(2.5rem, 1.5rem + 2.5vw, 4.25rem);
	text-align: center;
}

.tajo-testimonials__nav {
	justify-content: center;
	margin-top: 2rem;
}

/* On white: arrows top right, level with the heading. */
@media (min-width: 992px) {
	.tajo-testimonials:not(.tajo-section--ink) .tajo-testimonials__nav {
		position: absolute;
		top: 2.8rem;
		right: calc(var(--bs-gutter-x) * .5);
		margin: 0;
	}
}

/* On dark (inner pages): white heading, white arrows centred under the cards. */
.tajo-testimonials.tajo-section--ink {
	padding-top: var(--tajo-section-y-lg);
	color: var(--tajo-white);
}

.tajo-testimonials.tajo-section--ink .tajo-testimonials__nav { margin-top: clamp(2rem, 1rem + 2.5vw, 4.4rem); }
.tajo-section--ink .tajo-slider-nav__btn { background: var(--tajo-white); }
.tajo-section--ink .tajo-slider-nav__btn:hover { background: var(--tajo-cream); }

.tajo-testimonials .swiper-slide { height: auto; }

.tajo-testimonials__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: clamp(24rem, 22rem + 6vw, 31.75rem);
	padding: clamp(2rem, 1.5rem + 1vw, 2.9375rem);
	padding-bottom: 1.5rem;
	border-radius: var(--tajo-radius-panel);
	background: var(--tajo-cream);
	color: var(--tajo-charcoal);
}

.tajo-testimonials__tag {
	align-self: flex-start;
	margin-bottom: 1.6rem;
	padding: .5625rem 1.75rem;
	border-radius: .75rem;
	background: var(--tajo-charcoal);
	color: var(--tajo-sand);
	font-size: 1.125rem;
	line-height: 1.4;
	letter-spacing: .02em;
}

.tajo-testimonials__quote {
	position: relative;
	margin: 0 0 2rem;
	font-size: clamp(1.0625rem, 1rem + .3vw, 1.3125rem);
	line-height: 1.57;
	letter-spacing: .02em;
	-webkit-hyphens: auto;
	hyphens: auto;
}

.tajo-testimonials__quote p { margin: 0; }

/* Long reviews are cut at 5 lines so the cards keep the XD's near-square shape (the opening mark takes a line too). */
.tajo-testimonials__quote {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
}

.tajo-testimonials__quote p:first-child::before,
.tajo-testimonials__quote p:last-child::after {
	font-family: var(--tajo-font-display);
	font-size: 2.5625rem;
	line-height: 0;
}

/* Opening mark on its own line above the quote, closing mark after the last word. */
.tajo-testimonials__quote p:first-child::before {
	content: "\201C";
	display: block;
	height: 1.5rem;
	margin-bottom: .75rem;
	line-height: 1.5;
}

.tajo-testimonials__quote p:last-child::after {
	content: "\201D";
	padding-left: .1em;
	vertical-align: -.35em;
}

.tajo-testimonials__author {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: auto;
	font-size: 1.125rem;
	line-height: 1.3;
}

/* Round 75px avatar, name in Editorial New, suburb in Akkurat. */
.tajo-testimonials__author img {
	flex-shrink: 0;
	width: 4.6875rem;
	height: 4.6875rem;
	border-radius: 50%;
	object-fit: cover;
}

.tajo-testimonials__name {
	display: block;
	font-family: var(--tajo-font-display);
	font-size: 1.75rem;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: var(--tajo-tracking-display);
}

.tajo-testimonials__suburb { display: block; }

/* ---------- Block: Call to Action ---------- */

.tajo-cta {
	padding-bottom: calc(var(--tajo-section-y-lg) * 1.2);
	text-align: center;
}

.tajo-cta__title {
	margin-bottom: .5rem;
	font-size: var(--tajo-fs-h2);
	line-height: 1.2;
}

.tajo-cta__text {
	max-width: 75rem;
	margin: 0 auto 2.5rem;
	font-size: clamp(1.0625rem, 1rem + .25vw, 1.25rem);
	line-height: 2.3;
	letter-spacing: 0;
}

/* XD: two lines with no gap between them. */
.tajo-cta__text p { margin: 0; }

/* Single project: a 1px rule above, in the narrow column. */
.tajo-cta--rule {
	padding-top: var(--tajo-stack-y);
	padding-bottom: var(--tajo-section-y-lg);
}

.tajo-cta--rule .tajo-cta__inner {
	padding-top: clamp(3.5rem, 2rem + 3.6vw, 6.25rem);
	border-top: 1px solid var(--tajo-charcoal);
}

/* ---------- Block: Intro ---------- */

/* About XD at 1876px: rust mark 74px tall, 71px heading, 20px text on 45.6px lines (1094px wide), button. */
.tajo-intro {
	padding-block: clamp(3.5rem, 1.5rem + 3.4vw, 5.3125rem) clamp(3.75rem, 1.5rem + 3.7vw, 5.6875rem);
	color: var(--tajo-charcoal);
	text-align: center;
}

.tajo-intro__inner {
	max-width: 68.375rem;
	margin-inline: auto;
}

.tajo-intro .tajo-icon--mark {
	display: block;
	width: 4.3125rem;
	height: 4.625rem;
	margin: 0 auto 3.4375rem;
	color: #b3452f;
}

.tajo-intro__title {
	margin-bottom: 1.3125rem;
	font-size: var(--tajo-fs-h2);
	font-weight: 200;
	line-height: 1.1;
}

.tajo-intro__text {
	margin-bottom: 3.875rem;
	font-size: clamp(1.0625rem, 1rem + .27vw, 1.25rem);
	line-height: 2.28;
	letter-spacing: 0;
}

.tajo-intro__text:last-child,
.tajo-intro__text > :last-child { margin-bottom: 0; }

/* ---------- Block: Project Overview ---------- */

.tajo-overview {
	padding-block: clamp(3rem, 2rem + 2.4vw, 5rem) clamp(3.5rem, 2rem + 3.6vw, 6.6875rem);
	color: var(--tajo-ink);
}

/* Description column 870px of 1450px. */
@media (min-width: 992px) {
	.tajo-overview__side  { width: 40%; }
	.tajo-overview__aside { width: 60%; }
}

/* First block after the overview band gets the full gap (about 100px). */
.tajo-overview + .tajo-stack { padding-top: calc(var(--tajo-stack-y) * 2); }

.tajo-overview__intro {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Same 24px line as the description, so both start level (MAG-103). */
.tajo-overview__eyebrow {
	margin-bottom: 1.6rem;
	font-size: 1rem;
	line-height: 1.5;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.tajo-overview__title {
	margin-bottom: 2rem;
	font-size: clamp(1.75rem, 1.3rem + 1vw, 2.3125rem); /* 37px */
}

.tajo-overview__specs {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 4.4rem;
	margin: 0 0 2.5rem;
	padding: 0;
	font-size: 1rem;
	line-height: 1.2;
	list-style: none;
}

.tajo-overview__specs li {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.tajo-overview__specs .tajo-icon { width: 1.375rem; height: 1.125rem; }

.tajo-overview__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2.6875rem;
	margin-top: auto;
}

.tajo-overview__text {
	margin-bottom: 3rem;
	font-size: 1rem;
	line-height: 1.5;
	letter-spacing: 0;
}

.tajo-overview__text > :last-child { margin-bottom: 0; }

.tajo-overview__details {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 1.375rem;
	margin: 0;
	font-size: 1rem;
	line-height: 1.2;
}

@media (min-width: 768px) {
	.tajo-overview__details { grid-template-columns: 1fr 1fr; }
}

/* The table's last rule ends level with the buttons, however few rows it has (MAG-105). */
@media (min-width: 992px) {
	.tajo-overview__aside {
		display: flex;
		flex-direction: column;
	}

	.tajo-overview__details { margin-top: auto; }
}

.tajo-overview__row {
	display: grid;
	grid-template-columns: minmax(7rem, 45%) 1fr;
	gap: 1rem;
	padding-block: .875rem;
	border-bottom: 1px solid var(--tajo-ink);
}

.tajo-overview__row dt { font-weight: 400; }
.tajo-overview__row dd { margin: 0; font-weight: 700; letter-spacing: .01em; }

/* ---------- Block: Media & Text ---------- */

.tajo-media-text__media,
.tajo-image-pair__media,
.tajo-gallery__item {
	margin: 0;
	overflow: hidden;
	border-radius: var(--tajo-radius-tile);
	background: var(--tajo-sand);
}

.tajo-media-text__media img,
.tajo-image-pair__media img,
.tajo-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tajo-media-text__media { aspect-ratio: 837 / 613; }

.tajo-media-text .row { --bs-gutter-y: 2rem; }

/* The heading and text sit at the bottom of the image. */
@media (min-width: 992px) {
	.tajo-media-text .row { --bs-gutter-x: 3.2rem; align-items: flex-end; }
}

.tajo-stack-title {
	margin-bottom: 1.9rem;
	font-size: clamp(1.5rem, 1.2rem + .6vw, 1.75rem); /* 28px */
	font-weight: 200;
	line-height: 1.08;
}

.tajo-stack-text {
	max-width: 33rem;
	font-size: 1rem;
	line-height: 1.5;
	letter-spacing: 0;
}

.tajo-stack-text > :last-child { margin-bottom: 0; }

/* ---------- Block: Image Pair ---------- */

/* Directly under Media & Text the gap is halved, as in the XD. */
.tajo-media-text + .tajo-image-pair { padding-top: 0; }

.tajo-image-pair__grid {
	display: grid;
	gap: 2rem;
}

.tajo-image-pair__media--small { aspect-ratio: 553 / 416; }
.tajo-image-pair__media--large { aspect-ratio: 847 / 637; border-radius: .9375rem; }

.tajo-image-pair__body { margin-top: 2rem; }

@media (min-width: 992px) {
	.tajo-image-pair__grid {
		grid-template-columns: 553fr 847fr;
		align-items: start;
		gap: 2.875rem;
	}

	.tajo-image-pair__body { margin-top: clamp(2rem, 4.75vw, 5.5rem); }
}

/* ---------- Block: Gallery ---------- */

/* XD at 1876px: 98px from the image pair's last text baseline to the gallery, 121px from the
   gallery to the FLOORPLAN label. */
.tajo-image-pair + .tajo-gallery { padding-top: calc(var(--tajo-stack-y) - .5rem); }
.tajo-gallery + .tajo-floorplan { padding-top: calc(var(--tajo-stack-y) + 1.3rem); }

.tajo-gallery__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.1875rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 992px) {
	.tajo-gallery__grid { grid-template-columns: repeat(4, 1fr); }
}

.tajo-gallery__item { aspect-ratio: 348 / 462; }

/* ---------- Block: Media (image or video) ---------- */

.tajo-media__frame {
	position: relative;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 1464 / 910;
	background: var(--tajo-ink);
}

.tajo-media__frame img,
.tajo-media__frame iframe,
.tajo-media__frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

.tajo-media__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: clamp(4rem, 3rem + 3vw, 6.5rem);
	height: clamp(4rem, 3rem + 3vw, 6.5rem);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	color: var(--tajo-ink);
	transform: translate(-50%, -50%);
	transition: background-color .2s ease, transform .2s ease;
}

.tajo-media__play:hover { background: var(--tajo-white); transform: translate(-50%, -50%) scale(1.05); }
.tajo-media__play .tajo-icon { width: 40%; height: 40%; margin-left: 8%; }

.tajo-media__caption {
	margin-top: .75rem;
	font-size: .875rem;
}

/* Full-width band: edge to edge, 765px tall at 1876px (the map on the Contact Us XD). */
.tajo-media--full .tajo-media__frame {
	height: clamp(22.5rem, 40.78vw, 47.8125rem);
	aspect-ratio: auto;
}

.tajo-media--full .tajo-media__caption { padding-inline: 1rem; }

/* Free consultation after it (or the map): 85px under the button, as in the Contact XD. */
.tajo-media--full + .tajo-cta,
.tajo-map + .tajo-cta { padding-bottom: calc(var(--tajo-section-y) - .1875rem); }

/* ---------- Block: Map ---------- */

/* Full width, 765px tall at 1876px (Contact XD, "Google Maps, dark mode"). Google's embed can't be
   styled without an API key, so a filter turns it dark: inverted, hues turned back, greyed out. */
.tajo-map {
	height: clamp(22.5rem, 40.78vw, 47.8125rem);
	background: var(--tajo-ink);
}

.tajo-map__frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	filter: invert(.9) hue-rotate(180deg) grayscale(1) brightness(.85);
}

/* ---------- Block: Contact ---------- */

.tajo-contact { padding-bottom: var(--tajo-section-y-lg); }

/* Form column 688px wide at 1876px. As in the XD, the "First Name" and "Last Name" lines sit on the
   heading's and intro text's baselines, and Submit ends level with the social icons. */
@media (min-width: 992px) {
	.tajo-contact .tajo-form {
		width: 44.7%;
		padding-top: 1.75rem;
	}

	.tajo-contact .tajo-form .fluentform .ff_submit_btn_wrapper { margin-bottom: 0; }
}

.tajo-contact__title { margin-bottom: 1.25rem; }
.tajo-contact__text  { max-width: 28rem; margin-bottom: 3rem; }
.tajo-contact__text > :last-child { margin-bottom: 0; }

.tajo-contact__region {
	margin-bottom: .5rem;
	font-family: var(--tajo-font-display);
	font-size: 1.5rem;
	font-weight: 200;
}

.tajo-contact__address {
	margin-bottom: 1.5rem;
	font-style: normal;
}

.tajo-contact__address p { margin: 0; }

/* Address block sits at the bottom of the column, level with the end of the form (lg). */
@media (min-width: 992px) {
	.tajo-contact__intro {
		display: flex;
		flex-direction: column;
	}

	.tajo-contact__region { margin-top: auto; }
}

/* The email underline lines up with the Message underline (both columns end level: icons and Submit). */
.tajo-contact__details { margin-bottom: 2.8125rem; } /* allows for the 52px icon buttons */

/* Phone and email are underlined 8px below the text, as in the XD. */
.tajo-contact__details a {
	display: table;
	margin-bottom: 1.25rem;
	padding-bottom: .25rem;
	border-bottom: 1px solid var(--tajo-line);
	color: inherit;
	line-height: 1.6;
	text-decoration: none;
	transition: border-color .2s ease;
}

.tajo-contact__details a:last-child { margin-bottom: 0; }
.tajo-contact__details a:hover { border-bottom-color: transparent; }

.tajo-contact__social {
	display: flex;
	gap: .875rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tajo-contact__social a {
	display: inline-grid;
	place-items: center;
	width: 3.25rem; /* 52px, as tall as Submit */
	height: 3.25rem;
	border-radius: 50%;
	background: var(--tajo-charcoal);
	color: var(--tajo-cream);
	transition: background-color .2s ease;
}

.tajo-contact__social a:hover { background: var(--tajo-ink); }
.tajo-contact__social .tajo-icon { width: 1.375rem; height: 1.375rem; }

/*
 * Contact Us page (MAG-106 XD): the form has its own heading and text, level with the left column's.
 * The office then sits under the intro text, level with "First Name", and the phone, email and
 * icons move to the bottom (still level with the Message line and Submit).
 */
.tajo-contact--form-head { padding-top: calc(var(--tajo-section-y) + 2rem); } /* "Get In Touch" 122px under the hero */

@media (min-width: 992px) {
	.tajo-contact--form-head .tajo-form { padding-top: 0; }
	.tajo-contact--form-head .tajo-contact__region { margin-top: 0; padding-top: .875rem; } /* cap top level with "First Name" (MAG-106) */
	.tajo-contact--form-head .tajo-contact__details { margin-top: auto; }
}

/* ---------- Block: Floorplan ---------- */

.tajo-floorplan__title {
	margin-bottom: 2.5rem;
	font-family: var(--tajo-font-body);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.tajo-floorplan__list { margin: 0; font-size: 1rem; }

.tajo-floorplan__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-block: .875rem;
	border-bottom: 1px solid #8b6347; /* dark brown (MAG-103) */
}

.tajo-floorplan__row dt { font-weight: 400; }
.tajo-floorplan__row dd { margin: 0; text-align: right; }

.tajo-floorplan__media { margin: 0; }
.tajo-floorplan__media img { width: 100%; height: auto; }

/* House areas (package XD at 1876px): "HOUSE AREAS" label over a 419px table of 50px rows with grey
   rules, values at 73%; the plan fills the right 861px, its top level with the label. */
.tajo-overview + .tajo-floorplan--areas { padding-top: clamp(4rem, 1.5rem + 6.1vw, 8.65rem); }
.tajo-floorplan--areas { padding-bottom: clamp(3.5rem, 1rem + 5.6vw, 7.5625rem); }

.tajo-floorplan__label {
	margin-bottom: .875rem;
	font-family: var(--tajo-font-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.tajo-floorplan--areas .tajo-floorplan__list {
	border-top: 1px solid #979797;
	line-height: 1.2;
}

.tajo-floorplan--areas .tajo-floorplan__row {
	display: grid;
	grid-template-columns: 73% 1fr;
	gap: 0;
	padding-block: .95rem;
	border-bottom-color: #979797;
}

.tajo-floorplan--areas .tajo-floorplan__row dd { text-align: left; }

/* Column widths include the 32px gutter: 419px table, 861px plan in the 1450px column. */
@media (min-width: 992px) {
	.tajo-floorplan--areas .tajo-floorplan__side { width: 30.43%; }
	.tajo-floorplan--areas .tajo-floorplan__plan { width: 60.25%; }
	.tajo-floorplan--areas .tajo-floorplan__media { margin-top: .47rem; }
}

/* ---------- Layout: single project and package pages ---------- */

/* Hero text sits low, 109px above the bottom of the image. */
.single-tajo_project .tajo-hero:not(.tajo-hero--short),
.single-tajo_package .tajo-hero:not(.tajo-hero--short) {
	align-items: flex-end;
	padding-bottom: clamp(3rem, 1rem + 4.8vw, 6.8rem);
}