/* ==========================================================================
   TERRA VERDE — colour palette
   --------------------------------------------------------------------------
   Palette lifted from terraverdeinfra.com. Loaded last, through the theme's
   existing <link id="color"> slot, so it overrides styles.css and menu.css
   without either of them being edited. Colours only — no layout, type,
   spacing or radius changes.

   Template colour            ->  Terra Verde
   #212529  body / bg-black-2 ->  #0a140e  ink
   #282d32  bg-black-1        ->  #0f1e14  green
   #121b22  deep panels       ->  #0f1e14  green
   #303441  footer            ->  #0f1e14  green
   #c18847  accent            ->  #c8a84a  gold
   #ff385c  accent            ->  #c8a84a  gold
   #6449e7  "for rent" badge  ->  #2d5238  mid green
   #ffffff  text              ->  #faf7f0  cream
   ========================================================================== */

:root {
	--tv-ink: #0a140e;
	--tv-green: #0f1e14;
	--tv-surface: #152a1c;
	--tv-green-3: #2d5238;
	--tv-gold: #c8a84a;
	--tv-gold-2: #e8cc80;
	--tv-gold-3: #f5e8c0;
	--tv-cream: #faf7f0;
	--tv-cream-2: #f0ebe0;
	--tv-cream-70: rgba(250, 247, 240, .7);
	--tv-cream-50: rgba(250, 247, 240, .5);
	--tv-gold-line: rgba(200, 168, 74, .14);
	--tv-gold-glass: rgba(200, 168, 74, .08);

	/* Light theme — from Terra Verde's app palette (light mode) */
	--tv-light: #faf7f0;         /* off-white / cream section  */
	--tv-light-card: #ffffff;    /* card on cream              */
	--tv-white: #ffffff;         /* pure white section         */
	--tv-white-card: #fcf8ed;    /* card on white              */
	--tv-light-ink: #0a140e;     /* headings                   */
	--tv-light-body: #3a5e4e;    /* body copy                  */
	--tv-light-line: #eae4d6;    /* hairlines / borders        */
	--tv-gold-ink: #a38c4d;      /* gold that reads on light   */
	--tv-emerald: #004c2a;       /* accent for small text      */
}

/* --------------------------------------------------------------------------
   0. Repair `position: sticky`
   --------------------------------------------------------------------------
   styles.css:97 sets `body { overflow-x: hidden !important }`. Per spec, a
   `hidden` value on one axis forces the other axis from `visible` to `auto`,
   which turns body into a scroll container — and every `position: sticky`
   descendant then resolves against body's scrollport instead of the viewport.
   Since the document element is what actually scrolls, sticky silently never
   engages anywhere on the page.

   `overflow-x: clip` clips identically but does NOT create a scroll container,
   so the horizontal-overflow protection is kept and sticky starts working.
   This is what lets the journey card stack be pure CSS.
   -------------------------------------------------------------------------- */
body.int_dark_bg,
body {
	overflow-x: clip !important;
}

/* The template also hides overflow on its page wrapper. That makes the
   wrapper a second scroll container and prevents every sticky descendant
   from reaching the viewport, so keep only the horizontal clipping here. */
.int_main_wraapper {
	overflow-x: clip !important;
	overflow-y: visible !important;
}

/* --------------------------------------------------------------------------
   1. Page & section backgrounds
   -------------------------------------------------------------------------- */
body.int_dark_bg {
	background-color: var(--tv-ink);
}

.bg-black-1 {
	background: var(--tv-green) !important;
}

.bg-black-2 {
	background: var(--tv-ink) !important;
}

/* --------------------------------------------------------------------------
   2. (was: fixed info sidebar) — the .int_infosidebar rail carrying the
   socials, phone and e-mail was removed from the markup along with the old
   Swiper banner, so its palette overrides went with it. The hero that
   replaced both is in section 25.
   --------------------------------------------------------------------------

   --------------------------------------------------------------------------
   3. Header & navigation
   -------------------------------------------------------------------------- */
#navigation.black ul a {
	color: var(--tv-cream);
}

#navigation.style-1.black .current {
	color: var(--tv-gold);
}

#navigation.style-1.black ul li:hover,
#navigation.style-1 ul li:hover {
	background-color: var(--tv-gold);
	color: var(--tv-gold);
}

#navigation.style-1 ul li:hover > a {
	color: var(--tv-ink);
}

/* Dropdown panels */
#navigation ul ul {
	background-color: var(--tv-green);
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, .45);
}

#navigation ul ul li {
	border-bottom: 1px solid var(--tv-gold-line);
}

#navigation ul li:hover ul a,
#navigation ul ul a {
	color: var(--tv-cream-70) !important;
	background: transparent !important;
}

#navigation ul ul li:hover > a {
	color: var(--tv-gold) !important;
}

/* Sticky (cloned) header */
#header.cloned,
#header.cloned.sticky {
	background-color: rgba(10, 20, 14, .95);
	box-shadow: 0 1px 0 0 var(--tv-gold-line);
}

#header.cloned.sticky ul li a {
	color: var(--tv-cream-70);
}

#header.cloned.sticky .current {
	color: var(--tv-gold);
}

#header.cloned.sticky ul li:hover a {
	color: var(--tv-ink);
}

#header.cloned.sticky .head-tr ul li:hover {
	color: var(--tv-ink) !important;
}

.head-tr.bottom {
	background: rgba(200, 168, 74, .06);
	border-top: 1px solid var(--tv-gold-line);
	border-bottom: 1px solid var(--tv-gold-line);
}

/* Sign-in / language widgets */
.int_dark_bg .header-widget.sign-in a,
.int_dark_bg .show-lang,
.int_dark_bg .show-lang strong,
.int_dark_bg .show-lang .fa-caret-down.arrlan,
.int_dark_bg .show-lang span .fa-globe-americas {
	color: var(--tv-cream);
}

.int_dark_bg .header-user-name,
.int_dark_bg .header-user-name:before {
	color: var(--tv-cream);
}

.lang-tooltip,
.header-user-menu ul {
	background: var(--tv-green);
}

.lang-tooltip li a,
.header-user-menu ul li a {
	color: var(--tv-cream-70);
}

.lang-tooltip li a:hover,
.header-user-menu ul li a:hover {
	color: var(--tv-gold);
}

/* Mobile menu trigger */
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
	background-color: var(--tv-cream);
}

/* --------------------------------------------------------------------------
   4. Hero slider
   -------------------------------------------------------------------------- */
.swiper_imgbox .swipper_img > h4,
.swiper_imgbox .swipper_img > h3,
.swiper_imgbox .swipper_img > h3 > .banner_span1 {
	color: var(--tv-gold);
}

.swiper_imgbox .swipper_img > h2,
.swiper_imgbox .swipper_img > p {
	color: var(--tv-cream);
}

.swiper_imgbox .swipper_img > h1,
.swiper_imgbox .swipper_img > h4 > span {
	color: var(--tv-surface);
}

.swiper_imgbox .homes-list li,
.swiper_imgbox .homes-list li i {
	color: var(--tv-cream-70);
}

.banner_box_wrapper .swiper-button-next,
.banner_box_wrapper .swiper-button-prev {
	color: var(--tv-cream);
}

.banner_box_wrapper .swiper-button-next:before,
.banner_box_wrapper .swiper-button-prev:before,
.banner_box_wrapper .swiper-button-prev:after,
.banner_box_wrapper .swiper-container-rtl .swiper-button-next:before,
.banner_box_wrapper .swiper-container-rtl .swiper-button-next:after,
.banner_box_wrapper .swiper-container-rtl .swiper-button-prev:before {
	background: var(--tv-gold);
}

/* Primary button ("View Property") — gold fill, green label */
.int_btn,
.int_btn:focus {
	color: var(--tv-ink);
	background: var(--tv-gold);
}

.int_btn:before {
	background: var(--tv-gold-2);
}

.int_btn:hover {
	color: var(--tv-ink);
	background: var(--tv-gold-2);
}

.btn_caret {
	background: var(--tv-gold);
	color: var(--tv-ink);
}

.int_btn:hover .btn_caret {
	background: var(--tv-gold-2);
}

/* --------------------------------------------------------------------------
   5. Section titles
   -------------------------------------------------------------------------- */
.int_dark_bg .section-title h3,
.section-title h3 {
	color: var(--tv-cream);
}

.int_dark_bg .section-title h2,
.section-title h2,
h2 span {
	color: var(--tv-gold);
}

.int_dark_bg .section-title:before,
.section-title:before {
	background: var(--tv-gold);
	background-color: var(--tv-gold);
}

/* --------------------------------------------------------------------------
   6. Property cards (For Sale / For Rent carousels)
   -------------------------------------------------------------------------- */
.recent-details,
.recent-title,
.recent-price,
.view-proper {
	color: var(--tv-cream);
}

.house-details.thehp-1 i,
.recently .homes-content .homes-list li,
.recently .homes-content .homes-list li i,
.portfolio .homes-content .homes-list li,
.portfolio .homes-content .homes-list li i {
	color: var(--tv-gold);
}

.listing-item.compact li {
	color: var(--tv-cream-70);
}

.listing-item.compact li span {
	color: var(--tv-cream);
}

/* "For Sale" badge — gold */
.listing-item.compact .listing-badges span,
.listing-item.compact.thehp-1 .listing-badges span,
.listing-item.compact.thehp-2 .listing-badges span {
	color: var(--tv-ink);
	border: none;
	background-color: var(--tv-gold);
}

/* "For Rent" badge — mid green, so the two stay distinguishable */
.listing-item.compact .listing-badges span.rent,
.listing-item.compact.thehp-2 .listing-badges span {
	color: var(--tv-cream) !important;
	background-color: var(--tv-green-3) !important;
}

.listing-item.compact .listing-badges .featured,
.int_dark_bg .feature-cities-1 .listing-badges .featured {
	background-color: var(--tv-gold);
	background: var(--tv-gold);
	color: var(--tv-ink);
}

/* Image scrim over card photos — tinted green instead of neutral black */
.recent-content {
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(10, 20, 14, 0)), to(rgba(10, 20, 14, .55)));
	background: linear-gradient(to bottom, rgba(10, 20, 14, 0) 0%, rgba(10, 20, 14, .55) 100%);
}

/* Carousel arrows & dots */
.int_dark_bg .slick-next:before,
.int_dark_bg .slick-prev:before,
.int_dark_bg .slick-prev.slick-disabled:before,
.int_dark_bg .slick-next.slick-disabled:before {
	color: var(--tv-cream);
}

.int_dark_bg .slick-prev:hover,
.int_dark_bg .slick-next:hover {
	background: var(--tv-gold);
}

.int_dark_bg .slick-dots li {
	box-shadow: inset 0 0 0 2px var(--tv-gold);
}

.int_dark_bg .slick-dots li.slick-active {
	box-shadow: inset 0 0 0 6px var(--tv-gold);
}

.int_dark_bg .slick-dots li:after {
	background: var(--tv-gold);
}

.int_dark_bg .owl-dot.active,
.owl-dot.active {
	background: var(--tv-gold) !important;
}

/* --------------------------------------------------------------------------
   7. Services band
   -------------------------------------------------------------------------- */
.int_dark_bg section.services-home {
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(10, 20, 14, .88)), to(rgba(10, 20, 14, .88))), url(../../images/bg/bg-counter.jpg) no-repeat center center;
	background: linear-gradient(rgba(10, 20, 14, .88), rgba(10, 20, 14, .88)), url(../../images/bg/bg-counter.jpg) no-repeat center center;
	background-attachment: fixed;
}

.services-home .badge-light-2,
.bg-light-2 {
	background: var(--tv-green);
}

.int_dark_bg .services-home .bg-base,
.services-home .bg-base {
	background: var(--tv-gold);
	color: var(--tv-ink) !important;
}

.int_dark_bg .services-home .border-1 {
	border: 1px dashed var(--tv-gold-line) !important;
}

.services-home .service h4 {
	color: var(--tv-cream);
}

.services-home .service p {
	color: var(--tv-cream-70);
}

.services-home a.text-base,
a.text-base {
	color: var(--tv-gold);
}

.int_dark_bg .services-home a.text-base:hover,
.services-home a.text-base:hover {
	color: var(--tv-gold-2);
}

.services-home .box-shadow-1,
.box-shadow-1-hover:hover,
.box-shadow-1:focus,
.box-shadow-1.focus {
	box-shadow: 0 3px 8px rgba(0, 0, 0, .35) !important;
}

/* --------------------------------------------------------------------------
   8. Team / agents
   -------------------------------------------------------------------------- */
.int_dark_bg .team-content {
	background: var(--tv-ink);
}

.int_dark_bg .team-info {
	background: var(--tv-surface);
}

.int_dark_bg .team-wrap:hover .team-content .team-info {
	background: var(--tv-gold);
}

.int_dark_bg .team-wrap:hover .team-content .team-info h3,
.int_dark_bg .team-wrap:hover .team-content .team-info p,
.int_dark_bg .team-wrap:hover .team-content .team-info span a {
	color: var(--tv-ink);
}

.int_dark_bg .team-content h3,
.int_dark_bg .team-content p,
.int_dark_bg .team-content span a {
	color: var(--tv-cream);
}

.team-content span a:hover {
	color: var(--tv-gold);
}

.int_dark_bg .team .team-pro .fa,
.int_dark_bg .team .team-pro .fab {
	background: var(--tv-gold);
	color: var(--tv-ink);
	border: 0;
}

/* --------------------------------------------------------------------------
   9. Pricing plans
   -------------------------------------------------------------------------- */
.int_dark_bg .plan,
.int_dark_bg .plan ul {
	background: var(--tv-ink);
	color: var(--tv-cream);
}

.int_dark_bg .plan {
	border: 1px dashed var(--tv-gold-line);
}

.int_dark_bg .plan ul li {
	border-top: 1px dashed var(--tv-gold-line);
}

.int_dark_bg .plan-name,
.int_dark_bg .plan.featured .plan-name {
	color: var(--tv-cream);
}

.int_dark_bg .plan-price,
.plan-price {
	background: var(--tv-gold);
	color: var(--tv-ink);
}

.int_dark_bg .plan.featured .plan-price,
.plan.featured .plan-price {
	background: var(--tv-surface);
	color: var(--tv-cream);
}

/* the little arrow under the price block must match the block behind it */
.plan-price:after,
.int_dark_bg .plan-price:after {
	border-top-color: var(--tv-gold);
}

.plan.featured .plan-price:after,
.int_dark_bg .plan.featured .plan-price:after {
	border-top-color: var(--tv-surface);
}

.int_dark_bg .plan a.btn,
.plan a.btn {
	background: var(--tv-gold);
	color: var(--tv-ink);
}

.int_dark_bg .plan a.btn:hover,
.plan a.btn:hover {
	background: var(--tv-gold-2);
	color: var(--tv-ink);
}

.int_dark_bg .plan a.btn.pro {
	background: var(--tv-green);
	color: var(--tv-cream);
}

.int_dark_bg .plan a.btn.pro2 {
	background: var(--tv-surface);
	color: var(--tv-cream);
}

section.pricing-table {
	background: var(--tv-green);
}

/* --------------------------------------------------------------------------
   10. Testimonials
   -------------------------------------------------------------------------- */
.int_dark_bg .testimonials .owl-carousel .test-1,
.testimonials .test-1 {
	background: var(--tv-surface);
}

.int_dark_bg .testimonials .test-1 h3,
.testimonials .test-1 h3 {
	color: var(--tv-gold);
}

.int_dark_bg .testimonials .test-1 h6,
.int_dark_bg .testimonials .test-1 p {
	color: var(--tv-cream);
}

.int_dark_bg .testimonials .test-1 p::before,
.testimonials .test-1 p::before {
	color: var(--tv-gold);
}

.int_dark_bg .starts .fa,
.starts .fa {
	color: var(--tv-gold) !important;
}

/* --------------------------------------------------------------------------
   11. Blog
   -------------------------------------------------------------------------- */
.int_dark_bg .blog-section .news-item {
	background: var(--tv-ink);
	border: 0;
}

.int_dark_bg .blog-section .news-item h3,
.int_dark_bg .blog-section .news-item-descr p {
	color: var(--tv-cream);
}

.int_dark_bg .blog-section .news-item h3:hover,
.blog-section .news-item a:hover h3 {
	color: var(--tv-gold);
}

.int_dark_bg .blog-section .news-item .date,
.int_dark_bg .blog-section .news-link,
.blog-section .news-link {
	color: var(--tv-gold);
}

.blog-section .news-link:hover {
	color: var(--tv-gold-2);
}

.int_dark_bg .blog-section .action-list .fa,
.blog-section .action-list .fa-comment,
.blog-section .action-list .fa-share-alt,
.blog-section .action-list .fa-heart {
	color: var(--tv-cream-70) !important;
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.first-footer .top-footer {
	background: var(--tv-ink);
	border-top: 0;
}

.int_dark_bg .second-footer,
.second-footer {
	background: var(--tv-green);
	border-top: 1px solid var(--tv-gold-line);
	color: var(--tv-cream-70);
}

.int_dark_bg .first-footer h3,
.first-footer h3 {
	color: var(--tv-cream);
}

.int_dark_bg .first-footer .netabout p,
.first-footer .netabout p,
.int_dark_bg .newsletters p,
.int_dark_bg .twitter-widget.contuct .twitter-area .text h5 {
	color: var(--tv-cream-70);
}

.int_dark_bg .first-footer .contactus .info p,
.first-footer .contactus .info p {
	color: var(--tv-cream-70);
}

.int_dark_bg .first-footer .contactus ul li .fa,
.first-footer .contactus ul li .fa,
.int_dark_bg .twitter-widget.contuct .twitter-area .icon-holder i {
	color: var(--tv-gold);
}

.int_dark_bg .navigation ul li a,
.first-footer .navigation ul li a {
	color: var(--tv-cream-70);
}

.int_dark_bg .navigation ul li a:hover,
.navigation ul li a:hover,
.int_dark_bg .twitter-widget.contuct .twitter-area .text h5 a,
.int_dark_bg .twitter-widget.contuct .twitter-area .text h4 {
	color: var(--tv-gold);
}

.int_dark_bg .first-footer .netabout h3::after,
.first-footer .netabout h3::after,
.int_dark_bg .first-footer .navigation h3::after,
.first-footer .navigation h3::after,
.int_dark_bg .first-footer .widget h3::after,
.first-footer .widget h3::after,
.int_dark_bg .first-footer .newsletters h3::after,
.first-footer .newsletters h3::after,
.first-footer .contactus h3::after {
	background: var(--tv-gold);
	background-color: var(--tv-gold) !important;
}

/* Newsletter field */
.int_dark_bg .first-footer .bloq-email .email input[type="email"] {
	background: var(--tv-surface);
	border: 1px solid var(--tv-gold-line);
	color: var(--tv-cream);
}

.int_dark_bg .first-footer .bloq-email .email input[type="submit"],
.first-footer .bloq-email .email input[type="submit"] {
	background: var(--tv-gold) !important;
	border: 1px solid var(--tv-gold);
	color: var(--tv-ink);
}

.first-footer .email input[type="submit"]:hover {
	background: var(--tv-gold-2) !important;
}

.int_dark_bg .first-footer .bloq-email .email input::-webkit-input-placeholder {
	color: var(--tv-cream-50);
}

.int_dark_bg .first-footer .bloq-email .email input::-ms-input-placeholder {
	color: var(--tv-cream-50);
}

.int_dark_bg .first-footer .bloq-email .email input::placeholder {
	color: var(--tv-cream-50);
}

.first-footer .bloq-email label {
	color: var(--tv-cream);
}

/* Footer socials — brand colours dropped for the house palette */
.first-footer .netsocials a .fa,
.first-footer .netsocials a .fab,
.second-footer .netsocials a .fa,
.second-footer .netsocials a .fab {
	color: var(--tv-cream-70);
	background: transparent;
}

.first-footer .netsocials a .fa:hover,
.first-footer .netsocials a .fab:hover,
.second-footer .netsocials a .fa:hover,
.second-footer .netsocials a .fab:hover,
.first-footer .netsocials a .fa-facebook:hover,
.first-footer .netsocials a .fa-twitter:hover,
.first-footer .netsocials a .fa-instagram:hover,
.first-footer .netsocials a .fa-youtube:hover {
	color: var(--tv-ink);
	background: var(--tv-gold);
}

.second-footer p .fa-heart:before {
	color: var(--tv-gold);
}

/* --------------------------------------------------------------------------
   13. Misc accents
   -------------------------------------------------------------------------- */
/* Scroll-to-top: gold square.
   The template leaves it padding-based with line-height:0, so it renders as a
   squat rectangle. It also needs an explicit box — jQuery fadeIn() writes
   `display: inline` inline, and inline elements ignore width/height. The
   attribute selector applies the box only while it is shown, so fadeOut()
   (which writes `display: none`) still hides it. */
.int_dark_bg .go-up,
.go-up {
	background: var(--tv-gold) !important;
	color: var(--tv-ink);
	width: 46px;
	height: 46px;
	padding: 0;
	line-height: 46px;
	text-align: center;
	font-size: 20px;
	border-radius: 2px;
}

.int_dark_bg .go-up:hover,
.go-up:hover,
.go-up:focus {
	background: var(--tv-gold-2) !important;
	color: var(--tv-ink);
}

.int_dark_bg a.button.border,
a.button,
a.button.border,
.int_dark_bg .btn.btn-outline-light {
	background: var(--tv-gold);
	background-color: var(--tv-gold);
	color: var(--tv-ink) !important;
	border-color: var(--tv-gold);
}

.int_dark_bg a.button.border:hover,
a.button:hover,
.int_dark_bg .btn.btn-outline-light:hover {
	background: var(--tv-gold-2);
	color: var(--tv-ink) !important;
	border-color: var(--tv-gold-2);
}

.text-base {
	color: var(--tv-gold) !important;
}

.text-base-dark-hover:hover {
	color: var(--tv-gold-2) !important;
}

/* --------------------------------------------------------------------------
   CTA band (.info-help) — "Special Offers Every Day."
   The stock button is #18ba60 bright green, left over from the template's
   default palette. Gold fill / ink label, same as every other CTA here.
   The scrim is also retinted from neutral black to deep green so the
   photo sits in the same family as the rest of the page.
   -------------------------------------------------------------------------- */
/* The stock scrim is a *white* 30% gradient on the section itself; the dark
   .info-help:before sits at z-index:-1 behind it and never shows. So the tint
   has to be replaced here. background-size is re-declared because the
   shorthand resets it. */
.info-help {
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(10, 20, 14, .5)), to(rgba(10, 20, 14, .5))), url(../../images/bg/bg-info3.jpg) no-repeat scroll center center;
	background: linear-gradient(rgba(10, 20, 14, .5), rgba(10, 20, 14, .5)), url(../../images/bg/bg-info3.jpg) no-repeat scroll center center;
	background-size: cover;
}

.info-help .info-head .info-text h3 {
	color: var(--tv-cream);
	/* The overlay was lightened, so the photo shows through more — this
	   keeps the headline readable without darkening the scrim back down. */
	text-shadow: 0 2px 14px rgba(10, 20, 14, .45);
}

.info-help .info-head .info-text p {
	color: var(--tv-cream-70);
	text-shadow: 0 1px 8px rgba(10, 20, 14, .4);
}

/* Desktop headline. The template caps this at 30px; its smaller rules are all
   scoped to max-width 991/767, so a min-width:992px rule can't collide. */
@media (min-width: 992px) {
	.info-help .info-head .info-text h3 {
		font-size: 48px;
		line-height: 1.16;
	}
}

.info-help .info-head .info-text .btn-pro,
.info-help .info-head .btn-pro,
.info-help .inf-btn .btn-pro {
	background: var(--tv-gold);
	color: var(--tv-ink);
	border: 0;
	border-radius: 0;
}

.info-help .info-head .info-text .btn-pro:hover,
.info-help .info-head .btn-pro:hover,
.info-help .inf-btn .btn-pro:hover,
.info-help .inf-btn .btn-pro:focus {
	background: var(--tv-gold-2);
	color: var(--tv-ink);
}

/* Pulse. Driven by box-shadow rather than transform/scale so the ring costs no
   layout and never nudges the button or the text beside it. The square ripple
   follows the button's 0 radius. */
@-webkit-keyframes tv-pulse {
	0%   { -webkit-box-shadow: 0 0 0 0 rgba(200, 168, 74, .55); }
	70%  { -webkit-box-shadow: 0 0 0 18px rgba(200, 168, 74, 0); }
	100% { -webkit-box-shadow: 0 0 0 0 rgba(200, 168, 74, 0); }
}

@keyframes tv-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(200, 168, 74, .55); }
	70%  { box-shadow: 0 0 0 18px rgba(200, 168, 74, 0); }
	100% { box-shadow: 0 0 0 0 rgba(200, 168, 74, 0); }
}

.info-help .inf-btn .btn-pro {
	-webkit-animation: tv-pulse 2.2s cubic-bezier(.66, 0, 0, 1) infinite;
	        animation: tv-pulse 2.2s cubic-bezier(.66, 0, 0, 1) infinite;
}

/* Stop the ripple on interaction — it has done its job once you are on it. */
.info-help .inf-btn .btn-pro:hover,
.info-help .inf-btn .btn-pro:focus {
	-webkit-animation: none;
	        animation: none;
	-webkit-box-shadow: none;
	        box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.info-help .inf-btn .btn-pro {
		-webkit-animation: none;
		        animation: none;
	}
}

/* Heading + copy left, buttons right, vertically centred on one row.
   The button column stacks under the copy below the md breakpoint, where
   text-md-right stops applying and it falls back to left alignment. */
.info-help .info-head .inf-btn {
	margin: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	gap: 14px;
}

.info-help .info-head .inf-btn .btn-pro,
.info-help .info-head .inf-btn .btn-pro-outline {
	margin-top: 0;
	white-space: nowrap;
}

/* Ghost twin to .btn-pro: transparent fill, gold outline, no pulse — sits
   beside "Get Started" as the lower-emphasis second action. */
.info-help .inf-btn .btn-pro-outline {
	background: transparent;
	color: var(--tv-cream);
	border: 1px solid var(--tv-gold);
	border-radius: 0;
}

.info-help .inf-btn .btn-pro-outline:hover,
.info-help .inf-btn .btn-pro-outline:focus {
	background: var(--tv-gold);
	color: var(--tv-ink);
}

@media (max-width: 767px) {
	.info-help .info-head .inf-btn {
		margin-top: 18px;
		-webkit-box-pack: start;
		    -ms-flex-pack: start;
		        justify-content: flex-start;
	}
}

/* Carousel dots are generated by owl.js, so they never appear in the markup */
.owl-dot {
	background: rgba(250, 247, 240, .25) !important;
}

/* ==========================================================================
   14. LIGHT SECTIONS
   --------------------------------------------------------------------------
   Terra Verde also ships a light theme (#fefcf4 / #ffffff surfaces, #eae4d6
   hairlines, #004c2a emerald). Put `tv-light` on any <section> to flip it to
   cream with white cards; add `tv-white` alongside for pure white with cream
   cards. Move the classes between sections freely — every component the
   homepage uses is covered below, so the rhythm is yours to rearrange.

   One rule to know: gold #c8a84a only reaches 2.1:1 on cream, so on light
   sections gold survives as a FILL (buttons, chips, the title bar) while
   accent TEXT steps down to #a38c4d for large headings and #004c2a emerald
   for anything at body size.
   ========================================================================== */

/* Cream/white base plus the template's dot tile (images/bg/bg-pattern-dot.png
   — a 10x10 RGBA tile of soft dark dots on transparent, the same texture the
   light homepage variants use via .bg-white-1). The services band overrides
   this below with its blueprint photo. */
.int_dark_bg section.tv-light {
	background: url(../../images/bg/bg-pattern-dot.png) 0 0 repeat, var(--tv-light) !important;
}

.int_dark_bg section.tv-light.tv-white {
	background: url(../../images/bg/bg-pattern-dot.png) 0 0 repeat, var(--tv-white) !important;
}

/* Baseline text colour — specific components below override this */
.int_dark_bg section.tv-light h1,
.int_dark_bg section.tv-light h2,
.int_dark_bg section.tv-light h3,
.int_dark_bg section.tv-light h4,
.int_dark_bg section.tv-light h5,
.int_dark_bg section.tv-light h6 {
	color: var(--tv-light-ink);
}

.int_dark_bg section.tv-light p,
.int_dark_bg section.tv-light li,
.int_dark_bg section.tv-light span {
	color: var(--tv-light-body);
}

/* Section titles — 26–28px, so darkened gold clears AA for large text */
.int_dark_bg section.tv-light .section-title h3 {
	color: var(--tv-light-ink);
}

.int_dark_bg section.tv-light .section-title h2 {
	color: var(--tv-gold-ink);
}

.int_dark_bg section.tv-light .section-title:before {
	background: var(--tv-gold);
	background-color: var(--tv-gold);
}

/* --- Services band -------------------------------------------------------
   Keeps the template's blueprint photo (images/bg/bg-counter.jpg) and its
   fixed-attachment parallax. The scrim is .82 — matching the stock light
   variant's .8 — so the blueprint still reads through. !important is required
   here because the .tv-light base rule above needs !important to beat
   .bg-black-1, and !important always wins regardless of specificity; the
   attachment needs it too, since the `background` shorthand resets it. */
.int_dark_bg section.services-home.tv-light {
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(250, 247, 240, .82)), to(rgba(250, 247, 240, .82))), url(../../images/bg/bg-counter.jpg) no-repeat center center !important;
	background: linear-gradient(rgba(250, 247, 240, .82), rgba(250, 247, 240, .82)), url(../../images/bg/bg-counter.jpg) no-repeat center center !important;
	background-attachment: fixed !important;
}

.int_dark_bg section.services-home.tv-light.tv-white {
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .84)), to(rgba(255, 255, 255, .84))), url(../../images/bg/bg-counter.jpg) no-repeat center center !important;
	background: linear-gradient(rgba(255, 255, 255, .84), rgba(255, 255, 255, .84)), url(../../images/bg/bg-counter.jpg) no-repeat center center !important;
	background-attachment: fixed !important;
}

.int_dark_bg section.tv-light .service,
.int_dark_bg section.tv-light .bg-light-2 {
	background: var(--tv-light-card);
}

.int_dark_bg section.tv-light.tv-white .service,
.int_dark_bg section.tv-light.tv-white .bg-light-2 {
	background: var(--tv-white-card);
}

.int_dark_bg section.tv-light .services-home .border-1,
.int_dark_bg section.tv-light .border-1 {
	border: 1px dashed var(--tv-light-line) !important;
}

.int_dark_bg section.tv-light .service h4 {
	color: var(--tv-light-ink);
}

.int_dark_bg section.tv-light .service p {
	color: var(--tv-light-body);
}

.int_dark_bg section.tv-light a.text-base,
.int_dark_bg section.tv-light .text-base {
	color: var(--tv-emerald) !important;
}

.int_dark_bg section.tv-light a.text-base:hover,
.int_dark_bg section.tv-light .text-base-dark-hover:hover {
	color: var(--tv-gold-ink) !important;
}

.int_dark_bg section.tv-light .box-shadow-1,
.int_dark_bg section.tv-light .box-shadow-1-hover:hover,
.int_dark_bg section.tv-light .box-shadow-1:focus {
	box-shadow: 0 3px 8px rgba(10, 20, 14, .08) !important;
}

/* --- Team / agents ------------------------------------------------------- */
.int_dark_bg section.tv-light .team-content,
.int_dark_bg section.tv-light .team-info {
	background: var(--tv-light-card);
}

.int_dark_bg section.tv-light.tv-white .team-content,
.int_dark_bg section.tv-light.tv-white .team-info {
	background: var(--tv-white-card);
}

.int_dark_bg section.tv-light .team-content h3 {
	color: var(--tv-light-ink);
}

.int_dark_bg section.tv-light .team-content p {
	color: var(--tv-light-body);
}

.int_dark_bg section.tv-light .team-content span a {
	color: var(--tv-emerald);
}

.int_dark_bg section.tv-light .team-wrap:hover .team-content .team-info {
	background: var(--tv-gold);
}

.int_dark_bg section.tv-light .team-wrap:hover .team-content .team-info h3,
.int_dark_bg section.tv-light .team-wrap:hover .team-content .team-info p,
.int_dark_bg section.tv-light .team-wrap:hover .team-content .team-info span a {
	color: var(--tv-ink);
}

/* --- Testimonials -------------------------------------------------------- */
.int_dark_bg section.tv-light .test-1,
.int_dark_bg section.tv-light .owl-carousel .test-1 {
	background: var(--tv-light-card);
}

.int_dark_bg section.tv-light.tv-white .test-1,
.int_dark_bg section.tv-light.tv-white .owl-carousel .test-1 {
	background: var(--tv-white-card);
}

.int_dark_bg section.tv-light .test-1 h3 {
	color: var(--tv-emerald);
}

.int_dark_bg section.tv-light .test-1 h6,
.int_dark_bg section.tv-light .test-1 p {
	color: var(--tv-light-body);
}

.int_dark_bg section.tv-light .test-1 p::before,
.int_dark_bg section.tv-light .test-1 p::after {
	color: var(--tv-gold-ink);
}

.int_dark_bg section.tv-light .starts .fa {
	color: var(--tv-gold-ink) !important;
}

/* --- Pricing ------------------------------------------------------------- */
.int_dark_bg section.tv-light .plan,
.int_dark_bg section.tv-light .plan ul {
	background: var(--tv-light-card);
	color: var(--tv-light-ink);
}

.int_dark_bg section.tv-light.tv-white .plan,
.int_dark_bg section.tv-light.tv-white .plan ul {
	background: var(--tv-white-card);
}

.int_dark_bg section.tv-light .plan {
	border: 1px dashed var(--tv-light-line);
}

.int_dark_bg section.tv-light .plan ul li {
	border-top: 1px dashed var(--tv-light-line);
}

.int_dark_bg section.tv-light .plan-name,
.int_dark_bg section.tv-light .plan.featured .plan-name {
	color: var(--tv-light-ink);
}

.int_dark_bg section.tv-light .plan.featured .plan-price {
	background: var(--tv-emerald);
	color: var(--tv-cream);
}

.int_dark_bg section.tv-light .plan.featured .plan-price:after {
	border-top-color: var(--tv-emerald);
}

/* --- Blog ---------------------------------------------------------------- */
.int_dark_bg section.tv-light .news-item {
	background: var(--tv-light-card);
}

.int_dark_bg section.tv-light.tv-white .news-item {
	background: var(--tv-white-card);
}

.int_dark_bg section.tv-light .news-item h3 {
	color: var(--tv-light-ink);
}

.int_dark_bg section.tv-light .news-item-descr p {
	color: var(--tv-light-body);
}

.int_dark_bg section.tv-light .news-item .date,
.int_dark_bg section.tv-light .news-link {
	color: var(--tv-emerald);
}

.int_dark_bg section.tv-light .news-item h3:hover,
.int_dark_bg section.tv-light .news-link:hover {
	color: var(--tv-gold-ink);
}

.int_dark_bg section.tv-light .action-list .fa {
	color: var(--tv-light-body) !important;
}

/* --- Carousel controls inside light sections ----------------------------- */
.int_dark_bg section.tv-light .slick-next:before,
.int_dark_bg section.tv-light .slick-prev:before,
.int_dark_bg section.tv-light .slick-prev.slick-disabled:before,
.int_dark_bg section.tv-light .slick-next.slick-disabled:before {
	color: var(--tv-light-ink);
}

/* Gold reaches only 2.1:1 on cream — fine as a large fill, too weak for a
   small control. Step the carousel dots down to the darkened gold (3.06:1). */
.int_dark_bg section.tv-light .slick-dots li {
	-webkit-box-shadow: inset 0 0 0 2px var(--tv-gold-ink);
	        box-shadow: inset 0 0 0 2px var(--tv-gold-ink);
}

.int_dark_bg section.tv-light .slick-dots li.slick-active {
	-webkit-box-shadow: inset 0 0 0 6px var(--tv-gold-ink);
	        box-shadow: inset 0 0 0 6px var(--tv-gold-ink);
}

.int_dark_bg section.tv-light .slick-dots li:after {
	background: var(--tv-gold-ink);
}

.int_dark_bg section.tv-light .owl-dot {
	background: rgba(10, 20, 14, .18) !important;
}

.int_dark_bg section.tv-light .owl-dot.active {
	background: var(--tv-gold) !important;
}

/* Property cards keep cream text — it sits on top of the photo, not the
   section background — so only the surrounding chrome flips. */
.int_dark_bg section.tv-light .recent-details,
.int_dark_bg section.tv-light .recent-title,
.int_dark_bg section.tv-light .recent-price,
.int_dark_bg section.tv-light .view-proper {
	color: var(--tv-cream);
}

/* ==========================================================================
   15. TERRA VERDE LOGO
   --------------------------------------------------------------------------
   The brand lockup is portrait (266x296 — emblem stacked over the wordmark),
   while the template's logo slot is a 55px-wide landscape box. At that width
   the wordmark renders about 5px tall and turns to mush, so:

     header  ->  images/terraverde-emblem.png  (emblem only, stays crisp small)
     footer  ->  images/terraverde-logo.png    (full lockup, has room to breathe)

   Both are sized fluidly with clamp() so they scale continuously rather than
   jumping at breakpoints, with hard floors so they never collapse on narrow
   phones and never overflow their container.
   ========================================================================== */

#logo img,
#header.cloned #logo img {
	width: auto;
	max-width: 100%;
	height: clamp(38px, 4.2vw, 54px);
	margin-top: 0;
	margin-right: clamp(14px, 2.2vw, 34px);
	-o-object-fit: contain;
	object-fit: contain;
}

/* Sticky header is shorter than the hero header — trim the emblem to match */
#header.cloned #logo img {
	height: clamp(34px, 3.4vw, 44px);
}

.first-footer .netabout .logo {
	display: inline-block;
	max-width: 100%;
}

.first-footer .netabout .logo img {
	display: block;
	width: clamp(104px, 11vw, 140px);
	height: auto;
	max-width: 100%;
}

/* Phones: the hamburger and logo share a narrow row, so cap the emblem
   and pull the footer lockup in a little. */
@media (max-width: 767px) {
	#logo img,
	#header.cloned #logo img {
		height: 40px;
		margin-right: 12px;
	}

	.first-footer .netabout .logo img {
		width: 112px;
	}
}

@media (max-width: 360px) {
	#logo img,
	#header.cloned #logo img {
		height: 34px;
		margin-right: 8px;
	}

	.first-footer .netabout .logo img {
		width: 96px;
	}
}

/* ==========================================================================
   16. HEADER BRAND LOCKUP
   --------------------------------------------------------------------------
   Emblem + wordmark, no nav and no hamburger. The wordmark is set in
   Montserrat (already loaded by the page at 600/800) because it is the
   closest match to the geometric sans in the logo artwork — no extra font
   request. The emblem carries no baked-in wordmark, so nothing is doubled.
   ========================================================================== */
#header-container {
	position: relative;
	z-index: 999;
}

#header.int_content_wraapper.hd {
	padding: 18px 0;
}

.container-header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

/* The 80px left offset that used to live here existed only to clear the fixed
   60px social rail (.int_infosidebar), which has been removed — so the brand
   now aligns to the same gutter as every section below it. */
@media (min-width: 1025px) {
	.container-header {
		padding-left: 30px;
		padding-right: 30px;
	}
}

/* ==========================================================================
   25. HERO (.tv-hero)
   --------------------------------------------------------------------------
   Replaces the template's two-pane Swiper banner (and the fixed social rail
   that sat beside it). The property photo is now the section background with
   a green-tinted scrim over it; copy sits left, enquiry form right.

   The scrim is a left-weighted gradient rather than a flat wash: the headline
   side needs contrast, the right side is covered by the form panel anyway, so
   the photo stays visible through the middle-right instead of being uniformly
   darkened.
   ========================================================================== */
.tv-hero {
	position: relative;
	background: url(../../images/slider/slider-8.jpg) no-repeat center center;
	background-size: cover;
	padding: clamp(46px, 4.8vw, 74px) 0;
	overflow: hidden;
}

.tv-hero::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: -webkit-gradient(linear, left top, right top, from(rgba(10, 20, 14, .58)), color-stop(55%, rgba(10, 20, 14, .32)), to(rgba(10, 20, 14, .14)));
	background: linear-gradient(to right, rgba(10, 20, 14, .58) 0%, rgba(10, 20, 14, .32) 55%, rgba(10, 20, 14, .14) 100%);
	pointer-events: none;
}

/* Lifts the row above the scrim — without a stacking context of its own the
   absolutely-positioned ::before would paint over the content. */
.tv-hero .container-fluid,
.tv-hero .container {
	position: relative;
	z-index: 1;
}

/* The scrim was lightened so the render reads through, which means the copy
   no longer sits on a near-solid panel. A soft shadow carries the legibility
   instead — it tracks the glyph edges, so it holds up over the bright and
   dark parts of the photo alike without dimming the image again. */
.tv-hero-content h1,
.tv-hero-content h4,
.tv-hero-lead,
.tv-hero-note,
.tv-hero-specs li {
	text-shadow: 0 2px 12px rgba(10, 20, 14, .55);
}

.tv-hero-row {
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	row-gap: 40px;
}

.tv-hero-content h4 {
	font-family: "Montserrat", "Lato", sans-serif;
	font-weight: 600;
	font-size: clamp(11px, 1vw, 13px);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--tv-gold);
	margin-bottom: 14px;
}

.tv-hero-content h4 span {
	color: var(--tv-cream-50);
}

.int_dark_bg .tv-hero-content h1,
.tv-hero-content h1 {
	font-family: "Montserrat", "Lato", sans-serif;
	font-weight: 600;
	font-size: clamp(28px, 3.1vw, 44px);
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--tv-cream);
	margin-bottom: 18px;
}

/* The headline sets the price in gold. This has to out-specify the generic
   `h2 span { color: var(--tv-gold) }` rule in section 5 and anything the
   template applies to spans inside headings on a dark background. */
.int_dark_bg .tv-hero .tv-hero-content h1 span,
.tv-hero-content h1 span {
	color: var(--tv-gold);
	white-space: nowrap;
}

.tv-hero-price {
	font-family: "Montserrat", "Lato", sans-serif;
	font-weight: 600;
	font-size: clamp(26px, 3.2vw, 42px);
	line-height: 1.1;
	color: var(--tv-gold);
	margin-bottom: 16px;
}

.int_dark_bg .tv-hero .tv-hero-loc,
.tv-hero-loc {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 10px;
	font-size: 15px;
	color: var(--tv-cream-70);
	margin-bottom: 26px;
}

.tv-hero-loc i {
	color: var(--tv-gold);
	font-size: 18px;
}

.tv-hero-specs {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 24px;
	max-width: 460px;
}

.int_dark_bg .tv-hero .tv-hero-specs li,
.tv-hero-specs li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 11px;
	font-size: 14.5px;
	color: var(--tv-cream-70);
}

.tv-hero-specs li i {
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 auto;
	        flex: 0 0 auto;
	color: var(--tv-gold);
	font-size: 17px;
}

.tv-hero-actions {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	gap: 14px;
}

.tv-hero-btn {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	gap: 9px;
	padding: 15px 32px;
	border-radius: 2px;
	font-family: "Montserrat", "Lato", sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	white-space: nowrap;
	-webkit-transition: background .3s, border-color .3s, color .3s;
	transition: background .3s, border-color .3s, color .3s;
}

.tv-hero-btn:hover,
.tv-hero-btn:focus {
	text-decoration: none;
}

.tv-hero-btn i {
	font-size: 1.3em;
}

.tv-hero-btn-gold {
	background: var(--tv-gold);
	border: 1px solid var(--tv-gold);
	color: var(--tv-ink);
}

.tv-hero-btn-gold:hover,
.tv-hero-btn-gold:focus {
	background: var(--tv-gold-2);
	border-color: var(--tv-gold-2);
	color: var(--tv-ink);
}

.tv-hero-btn-ghost {
	background: transparent;
	border: 1px solid var(--tv-gold);
	color: var(--tv-gold);
}

.tv-hero-btn-ghost:hover,
.tv-hero-btn-ghost:focus {
	background: var(--tv-gold);
	color: var(--tv-ink);
}

/* --- Enquiry form -------------------------------------------------------- */
.tv-hero-form {
	padding: clamp(26px, 2.8vw, 38px);
	background: rgba(10, 20, 14, .82);
	border: 1px solid var(--tv-gold-line);
	border-radius: 4px;
	-webkit-backdrop-filter: blur(6px);
	        backdrop-filter: blur(6px);
	-webkit-box-shadow: 0 22px 54px rgba(0, 0, 0, .35);
	        box-shadow: 0 22px 54px rgba(0, 0, 0, .35);
}

.int_dark_bg .tv-hero .tv-hero-form h3,
.tv-hero-form h3 {
	font-family: "Montserrat", "Lato", sans-serif;
	font-weight: 600;
	font-size: clamp(20px, 1.9vw, 25px);
	color: var(--tv-cream);
	margin-bottom: 8px;
}

.int_dark_bg .tv-hero .tv-hero-form-sub,
.tv-hero-form-sub {
	font-size: 14px;
	line-height: 1.7;
	color: var(--tv-cream-50);
	margin-bottom: 22px;
}

/* Name + phone share a row on anything above phones, then collapse. */
.tv-hero-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
}

.tv-hero-field {
	margin-bottom: 16px;
}

.int_dark_bg .tv-hero .tv-hero-field label,
.tv-hero-field label {
	display: block;
	font-family: "Montserrat", "Lato", sans-serif;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tv-cream-70);
	margin-bottom: 7px;
}

/* select is in the same rule as input/textarea deliberately — the three must
   be pixel-identical, and keeping them in one declaration means they cannot
   drift apart later. `appearance: none` strips the OS widget (which is what
   made the selects render as small white native boxes); the chevron is drawn
   back on below. `display: block` matters too: a select is inline-block by
   default, so without it the field sits narrow and the next label rides up
   alongside it. */
.tv-hero-field input,
.tv-hero-field textarea,
.tv-hero-field select {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 13px 15px;
	background: rgba(250, 247, 240, .05);
	border: 1px solid var(--tv-gold-line);
	border-radius: 2px;
	color: var(--tv-cream);
	font-family: "Lato", sans-serif;
	font-size: 14.5px;
	line-height: 1.5;
	height: auto;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	-webkit-transition: border-color .25s, background .25s;
	transition: border-color .25s, background .25s;
}

.tv-hero-field textarea {
	resize: vertical;
	min-height: 84px;
}

/* Chevron, drawn inline so there is no image request and no icon-font
   dependency. Sits on top of the same translucent fill as the inputs. */
.tv-hero-field select {
	cursor: pointer;
	padding-right: 40px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23c8a84a' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size: 11px;
}

/* Until a real choice is made the placeholder option is showing, so the field
   should read as placeholder text — matching ::placeholder on the inputs. */
.tv-hero-field select:invalid {
	color: rgba(250, 247, 240, .32);
}

/* The dropdown list is painted by the OS and does not inherit the field's
   colours — cream on cream would be invisible. */
.tv-hero-field select option {
	background: var(--tv-green);
	color: var(--tv-cream);
}

.tv-hero-field select option[disabled] {
	color: rgba(250, 247, 240, .4);
}

/* Safety net against the nice-select plugin (bundled in js/search.js). It
   hides the real <select> with an INLINE display:none and injects a
   <div class="nice-select"> after it — which is why these fields rendered as
   small white inline boxes. js/searched.js now excludes this form, but an
   inline style beats a normal rule, so !important is what makes this hold if
   the plugin is ever pointed at the page again. */
.tv-hero-form select {
	display: block !important;
}

.tv-hero-form .nice-select {
	display: none !important;
}

.tv-hero-field input::-webkit-input-placeholder,
.tv-hero-field textarea::-webkit-input-placeholder {
	color: rgba(250, 247, 240, .32);
}

.tv-hero-field input::-moz-placeholder,
.tv-hero-field textarea::-moz-placeholder {
	color: rgba(250, 247, 240, .32);
}

.tv-hero-field input:-ms-input-placeholder,
.tv-hero-field textarea:-ms-input-placeholder {
	color: rgba(250, 247, 240, .32);
}

.tv-hero-field input::placeholder,
.tv-hero-field textarea::placeholder {
	color: rgba(250, 247, 240, .32);
}

.tv-hero-field input:focus,
.tv-hero-field textarea:focus {
	outline: none;
	border-color: var(--tv-gold);
	background: rgba(250, 247, 240, .08);
}

.tv-hero-submit {
	width: 100%;
	margin-top: 6px;
	padding: 15px 28px;
	background: var(--tv-gold);
	border: 1px solid var(--tv-gold);
	border-radius: 2px;
	color: var(--tv-ink);
	font-family: "Montserrat", "Lato", sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	-webkit-transition: background .3s, border-color .3s;
	transition: background .3s, border-color .3s;
}

.tv-hero-submit:hover,
.tv-hero-submit:focus {
	background: var(--tv-gold-2);
	border-color: var(--tv-gold-2);
}

/* --- Responsive ---------------------------------------------------------- */
/* Below lg the columns stack, so the scrim flips from a left-weighted
   gradient to an even wash — copy now sits over the middle of the photo. */
@media (max-width: 991px) {
	.tv-hero::before {
		background: rgba(10, 20, 14, .52);
	}

	.tv-hero-formcol {
		margin-left: 0;
	}

	.tv-hero-specs {
		max-width: none;
	}
}

@media (max-width: 575px) {
	.tv-hero-form-grid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.tv-hero-specs {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.tv-hero-actions .tv-hero-btn {
		-webkit-box-flex: 1;
		    -ms-flex: 1 1 100%;
		        flex: 1 1 100%;
	}
}

/* ==========================================================================
   18. STAT BAND (.tv-stats) — count-up figures under the hero
   --------------------------------------------------------------------------
   Sits between the ink hero and the green "For Sale" band, so it uses ink with
   a gold/green radial wash to separate itself from both without introducing a
   new flat colour. Numbers are animated by js/tv-counter.js.
   ========================================================================== */
.tv-stats {
	position: relative;
	padding: clamp(34px, 3.4vw, 50px) 0;
	background: var(--tv-green) !important;
	overflow: hidden;
}

.tv-stats .section-title {
	margin-bottom: clamp(26px, 3vw, 44px);
}

.tv-stats-row {
	row-gap: 22px;
}

.tv-stat {
	position: relative;
	overflow: hidden;              /* clips the watermark at the card edge */
	height: 100%;
	padding: 28px 24px 24px;
	border: 1px solid var(--tv-gold-line);
	border-radius: 2px;
	background: rgba(200, 168, 74, .045);
	-webkit-transition: background .35s, border-color .35s, -webkit-transform .35s;
	transition: background .35s, border-color .35s, transform .35s;
}

.tv-stat:hover {
	background: rgba(200, 168, 74, .085);
	border-color: rgba(200, 168, 74, .34);
	-webkit-transform: translateY(-4px);
	        transform: translateY(-4px);
}

/* Watermark: top-right, deliberately bled past the right edge so the card's
   overflow:hidden shaves it. */
.tv-stat-icon {
	position: absolute;
	top: -16px;
	right: -24px;
	font-size: 118px;
	line-height: 1;
	color: rgba(200, 168, 74, .11);
	pointer-events: none;
	-webkit-transition: color .35s, -webkit-transform .35s;
	transition: color .35s, transform .35s;
}

.tv-stat:hover .tv-stat-icon {
	color: rgba(200, 168, 74, .18);
	-webkit-transform: scale(1.06);
	        transform: scale(1.06);
}

.tv-stat-num {
	position: relative;           /* above the watermark */
	font-family: "Montserrat", "Lato", sans-serif;
	font-weight: 600;
	/* Was clamp(30px, 3.1vw, 26px): the max had been lowered below the min, so
	   clamp returned the min and this rendered at a flat 30px — bigger than
	   intended, with the vw term inert. Rebuilt around the 26px target. */
	font-size: clamp(20px, 2.2vw, 26px);
	line-height: 1.05;
	color: var(--tv-gold);
	margin-bottom: 10px;
	/* Pins every digit to one advance width — without this the number visibly
	   shimmies as digits cycle, which reads as jitter even at 60fps. */
	font-variant-numeric: tabular-nums;
	-webkit-font-feature-settings: "tnum" 1;
	        font-feature-settings: "tnum" 1;
}

.tv-stat-label {
	position: relative;
	font-family: "Montserrat", "Lato", sans-serif;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--tv-cream-70);
}

@media (max-width: 575px) {
	.tv-stat {
		padding: 24px 20px 20px;
	}

	.tv-stat-icon {
		font-size: 96px;
		top: -12px;
		right: -20px;
	}
}

/* ==========================================================================
   19. ABOUT SECTION (.about-us)
   --------------------------------------------------------------------------
   The template ships this block for its inner "About" page, where the
   surrounding styles come from `.inner-pages`. Dropped on the homepage it
   arrives half-dressed: `.bg-2` paints a white slab behind the button and
   signature, `.bg-2 .button` hard-codes a #FF385C border, and the .button--moema
   ripple pseudo-element bleeds a rounded halo. All of that is unpicked here.
   ========================================================================== */
.about-us.rec-pro {
	padding: clamp(40px, 4.2vw, 64px) 0;
}

.about-us .who-1 h2 {
	font-family: "Montserrat", "Lato", sans-serif;
	font-size: clamp(26px, 2.6vw, 38px);
	line-height: 1.2;
	margin-bottom: 22px;
}

/* The `.tv-light span` body-copy catch-all is (0,3,1) and was swallowing the
   accent word. Gold is 2.3:1 on white, so this uses the darkened gold. */
.int_dark_bg .about-us .who-1 h2 span,
.about-us .who-1 h2 span {
	color: var(--tv-gold-ink);
}

.about-us .pftext p {
	margin-bottom: 18px;
	line-height: 1.9;
}

.about-us .pftext p:last-child {
	margin-bottom: 0;
}

/* Kill the white slab; it only existed to sit on the inner page's grey bg */
.about-us .box.bg-2 {
	background: transparent;
	color: inherit;
	margin-top: 34px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	gap: 26px;
}

/* `.bg-2 .button` is (0,2,0) with !important on colour — this has to clear it */
.about-us .box.bg-2 a.button,
.about-us .box.bg-2 .button {
	width: auto;
	min-width: 0;
	padding: 15px 34px;
	border: 1px solid var(--tv-gold) !important;
	border-radius: 0 !important;
	background: var(--tv-gold) !important;
	background-color: var(--tv-gold) !important;
	color: var(--tv-ink) !important;
	font-family: "Montserrat", "Lato", sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1;
	-webkit-animation: none;
	        animation: none;
	-webkit-transition: background .3s, border-color .3s;
	transition: background .3s, border-color .3s;
}

.about-us .box.bg-2 a.button:hover,
.about-us .box.bg-2 .button:hover {
	background: var(--tv-gold-2) !important;
	background-color: var(--tv-gold-2) !important;
	border-color: var(--tv-gold-2) !important;
	color: var(--tv-ink) !important;
	-webkit-animation: none;
	        animation: none;
}

/* the moema ripple is a rounded pseudo-element that shows through a square button */
.about-us .box.bg-2 .button--moema::before,
.about-us .box.bg-2 .button--moema:hover::before {
	display: none;
	-webkit-animation: none;
	        animation: none;
	content: none;
}

.about-us .box.bg-2 img {
	max-width: 190px;
	height: auto;
	margin-left: 0 !important;
}

/* Media column — the video overlay markup is gone, so this is just the image */
.about-us .tv-about-media {
	margin-top: 0;
	position: relative;
	line-height: 0;
}

.about-us .tv-about-media img {
	width: 100%;
	height: auto;
	max-width: 100%;
	border-radius: 2px;
}

@media (max-width: 991px) {
	.about-us .tv-about-media {
		margin-top: 34px;
	}
}

/* --------------------------------------------------------------------------
   Header CTAs — Call Now / Invest Now
   Icons are Line Awesome (`las`), which draws Font Awesome's glyph set in a
   line/outline weight — so the mark itself is outlined, not filled. Colour is
   inherited from the button, giving a gold outline icon on the ghost button
   and a black one on the gold button.
   -------------------------------------------------------------------------- */
.tv-actions {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: clamp(8px, 1vw, 14px);
	margin-left: auto;
}

.tv-btn {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	gap: 9px;
	padding: 11px clamp(16px, 1.6vw, 24px);
	border-radius: 2px;
	font-family: "Montserrat", "Lato", sans-serif;
	font-weight: 600;
	font-size: clamp(11px, .85vw, 12.5px);
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1;
	-webkit-transition: all .3s;
	transition: all .3s;
}

.tv-btn:hover,
.tv-btn:focus {
	text-decoration: none;
}

.tv-btn i {
	font-size: 1.35em;
	line-height: 1;
	color: inherit;
}

/* Call Now — gold outline button, gold outline icon */
.tv-btn-ghost {
	background: transparent;
	border: 1px solid var(--tv-gold);
	color: var(--tv-gold);
}

.tv-btn-ghost:hover,
.tv-btn-ghost:focus {
	background: var(--tv-gold);
	border-color: var(--tv-gold);
	color: var(--tv-ink);
}

/* Invest Now — gold fill, black outline icon */
.tv-btn-gold {
	background: var(--tv-gold);
	border: 1px solid var(--tv-gold);
	color: #000;
}

.tv-btn-gold:hover,
.tv-btn-gold:focus {
	background: var(--tv-gold-2);
	border-color: var(--tv-gold-2);
	color: #000;
}

/* Mobile: Call Now drops out entirely, Invest Now becomes icon-only.
   The label stays in the DOM (visually hidden) so the link keeps its
   accessible name alongside the aria-label. */
@media (max-width: 767px) {
	.tv-btn-ghost {
		display: none;
	}

	.tv-btn-gold {
		padding: 0;
		width: 44px;
		height: 44px;
		-ms-flex-negative: 0;
		    flex-shrink: 0;
	}

	.tv-btn-gold .tv-btn-label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.tv-btn-gold i {
		font-size: 21px;
	}
}

.tv-brand {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: clamp(10px, 1.4vw, 18px);
	text-decoration: none;
	line-height: 1;
}

.tv-brand:hover,
.tv-brand:focus {
	text-decoration: none;
}

.tv-brand-mark {
	width: auto;
	height: clamp(40px, 4.4vw, 58px);
	max-width: 100%;
	-o-object-fit: contain;
	   object-fit: contain;
	-webkit-transition: opacity .3s;
	transition: opacity .3s;
}

.tv-brand:hover .tv-brand-mark {
	opacity: .85;
}

.tv-brand-text {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.tv-brand-name {
	font-family: "Montserrat", "Lato", sans-serif;
	font-weight: 600;
	font-size: clamp(19px, 2.1vw, 28px);
	line-height: 1.05;
	letter-spacing: .005em;
	color: var(--tv-gold);
	white-space: nowrap;
}

.tv-brand-sub {
	font-family: "Montserrat", "Lato", sans-serif;
	font-weight: 500;
	font-size: clamp(8px, .78vw, 11px);
	line-height: 1.2;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(250, 247, 240, .45);
	white-space: nowrap;
}

@media (max-width: 420px) {
	.tv-brand-sub {
		letter-spacing: .13em;
	}
}

/* ==========================================================================
   20. BROCHURE SECTION (.tv-brochure)
   --------------------------------------------------------------------------
   Two-row layout dropped between About and Services: row 1 is title/copy
   left, download CTA right; row 2 is a full-bleed property photo left,
   feature list + price right. Built the same way as .about-us above — a
   handful of scoped rules layered on the generic .tv-light section.
   ========================================================================== */
.tv-brochure.rec-pro {
	padding: clamp(40px, 4.2vw, 64px) 0 0;
}

/* Flat cream, no dot texture — overrides the generic .tv-light background,
   which needs matching specificity since it also carries !important. */
.int_dark_bg section.tv-brochure.tv-light {
	background: var(--tv-light) !important;
}

.int_dark_bg .tv-brochure .tv-brochure-row1 h2 span,
.tv-brochure .tv-brochure-row1 h2 span {
	color: var(--tv-gold-ink);
}

.tv-brochure-row1 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	row-gap: 26px;
	margin-bottom: clamp(20px, 2.4vw, 32px);
}

.tv-brochure-row1 h3 {
	font-family: "Montserrat", "Lato", sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--tv-emerald);
	margin-bottom: 10px;
}

.tv-brochure-row1 h2 {
	font-family: "Montserrat", "Lato", sans-serif;
	font-size: clamp(26px, 2.6vw, 38px);
	line-height: 1.2;
	color: var(--tv-light-ink);
	margin-bottom: 16px;
}

.tv-brochure-row1 p {
	max-width: 620px;
	line-height: 1.9;
	margin: 0;
}

.tv-brochure-cta {
	text-align: right;
}

.tv-brochure-cta .button {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	width: auto;
	min-width: 0;
	padding: 16px 32px;
	border: 1px solid var(--tv-gold) !important;
	border-radius: 0 !important;
	background: var(--tv-gold) !important;
	background-color: var(--tv-gold) !important;
	color: var(--tv-ink) !important;
	font-family: "Montserrat", "Lato", sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .1em;
	line-height: 1;
	-webkit-transition: background .3s, border-color .3s;
	transition: background .3s, border-color .3s;
}

.tv-brochure-cta .button:hover {
	background: var(--tv-gold-2) !important;
	background-color: var(--tv-gold-2) !important;
	border-color: var(--tv-gold-2) !important;
	color: var(--tv-ink) !important;
}

.tv-brochure-cta .button--moema::before {
	display: none;
	content: none;
}

/* .container-fluid carries Bootstrap's 15px side padding, which left a gap
   between the media column and the true edge of the section. Pulling the row
   out by that same 15px bleeds the image flush; .tv-brochure-details adds it
   back as padding so its own text still lands where the row-1 copy above it
   does. */
.tv-brochure-row2 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	margin-left: -15px;
	margin-right: -15px;
}

.tv-brochure-media {
	line-height: 0;
	min-height: 380px;
}

.tv-brochure-media img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

/* Requalified with the section class: Bootstrap's `.no-gutters > [class*="col-"]`
   is (0,2,0) and would otherwise beat a bare `.tv-brochure-details` (0,1,0)
   regardless of source order. */
.tv-brochure .tv-brochure-details {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	padding: clamp(30px, 3.4vw, 50px) calc(15px + clamp(24px, 3vw, 44px)) clamp(40px, 4.4vw, 60px) clamp(24px, 3vw, 44px);
	background: transparent;
}

.tv-brochure-price {
	font-family: "Montserrat", "Lato", sans-serif;
	font-weight: 600;
	font-size: clamp(26px, 2.4vw, 34px);
	color: var(--tv-gold-ink);
	margin-bottom: 24px;
}

.tv-brochure-features {
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px 20px;
}

.tv-brochure-features li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 12px;
	padding-bottom: 14px;
	border-bottom: 1px dashed var(--tv-light-line);
	color: var(--tv-light-body);
	font-size: 14.5px;
}

.tv-brochure-features li i {
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 30px;
	        flex: 0 0 30px;
	width: 30px;
	height: 30px;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	border-radius: 50%;
	background: var(--tv-gold-glass);
	color: var(--tv-gold-ink);
	font-size: 13px;
}

.tv-brochure-details > a.button {
	width: auto;
	min-width: 0;
	align-self: flex-start;
	padding: 15px 34px;
	border: 1px solid var(--tv-gold) !important;
	border-radius: 0 !important;
	background: var(--tv-gold) !important;
	background-color: var(--tv-gold) !important;
	color: var(--tv-ink) !important;
	font-family: "Montserrat", "Lato", sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .1em;
	line-height: 1;
	-webkit-animation: none;
	        animation: none;
	-webkit-transition: background .3s, border-color .3s;
	transition: background .3s, border-color .3s;
}

.tv-brochure-details > a.button:hover {
	background: var(--tv-gold-2) !important;
	background-color: var(--tv-gold-2) !important;
	border-color: var(--tv-gold-2) !important;
	color: var(--tv-ink) !important;
}

.tv-brochure-details > a.button--moema::before {
	display: none;
	content: none;
}

@media (max-width: 991px) {
	.tv-brochure-cta {
		text-align: left;
	}

	.tv-brochure-media {
		min-height: 280px;
		margin-bottom: 30px;
	}

	/* Stacked layout: both edges of the details column now sit at the
	   bled-out row edge, so both need the 15px compensation, not just the right. */
	.tv-brochure .tv-brochure-details {
		padding-left: calc(15px + clamp(24px, 3vw, 44px));
	}
}

@media (max-width: 575px) {
	.tv-brochure-features {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   21. HIGHLIGHTS SECTION (.tv-highlights)
   --------------------------------------------------------------------------
   Sits under the brochure section: row 1 is heading/copy left, a 5-item
   checklist right; row 2 is a full-width info callout. Same light-section
   pattern as .tv-brochure above.
   ========================================================================== */
.tv-highlights.rec-pro {
	padding: clamp(40px, 4.2vw, 64px) 0;
}

/* Flat white, no dot texture — overrides the generic .tv-light.tv-white
   background, which needs matching specificity since it also carries !important. */
.int_dark_bg section.tv-highlights.tv-light.tv-white {
	background: var(--tv-white) !important;
}

.tv-highlights-row1 {
	margin-bottom: clamp(36px, 4vw, 56px);
}

.tv-highlights-intro h3 {
	font-family: "Montserrat", "Lato", sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--tv-emerald);
	margin-bottom: 10px;
}

.tv-highlights-intro h2 {
	font-family: "Montserrat", "Lato", sans-serif;
	font-size: clamp(26px, 2.6vw, 38px);
	line-height: 1.2;
	color: var(--tv-light-ink);
	margin-bottom: 16px;
}

.int_dark_bg .tv-highlights .tv-highlights-intro h2 span,
.tv-highlights .tv-highlights-intro h2 span {
	color: var(--tv-gold-ink);
}

.tv-highlights-intro p {
	max-width: 520px;
	line-height: 1.9;
	margin: 0;
}

.tv-highlights-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tv-highlights-list li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px dashed var(--tv-light-line);
	color: var(--tv-light-body);
	font-size: 15px;
}

.tv-highlights-list li:first-child {
	padding-top: 0;
}

.tv-highlights-list li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.tv-highlights-list li i {
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 22px;
	        flex: 0 0 22px;
	font-size: 20px;
	color: var(--tv-gold-ink);
}

.tv-info-box {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	gap: 18px;
	padding: clamp(24px, 2.6vw, 32px);
	background: var(--tv-gold-glass);
	border: 1px dashed rgba(200, 168, 74, .4);
	border-radius: 2px;
}

.tv-info-box i {
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 auto;
	        flex: 0 0 auto;
	font-size: 26px;
	line-height: 1;
	color: var(--tv-gold-ink);
	margin-top: 2px;
}

.tv-info-box p {
	margin: 0;
	line-height: 1.8;
	color: var(--tv-light-body);
}

@media (max-width: 991px) {
	.tv-highlights-intro {
		margin-bottom: 30px;
	}
}

/* ==========================================================================
   22. JOURNEY SECTION (.tv-journey)
   --------------------------------------------------------------------------
   Row 1: heading/copy left, "Speak with a Property Specialist" CTA right —
   same pattern as .tv-brochure-row1 / .tv-brochure-cta above.

   Row 2 is a sticky card stack — see the block comment on it below. It is
   pure CSS and carries no JS at all; on tablet and phone the cards simply
   flow in normal document order instead.
   ========================================================================== */
.tv-journey.rec-pro {
	padding: clamp(40px, 4.2vw, 64px) 0;
}

/* Flat cream, no dot texture — same override as .tv-brochure above. */
.int_dark_bg section.tv-journey.tv-light {
	background: var(--tv-light) !important;
}

.tv-journey-row1 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	row-gap: 26px;
	margin-bottom: clamp(20px, 2.2vw, 32px);
}

.tv-journey-intro h3 {
	font-family: "Montserrat", "Lato", sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--tv-emerald);
	margin-bottom: 10px;
}

.tv-journey-intro h2 {
	font-family: "Montserrat", "Lato", sans-serif;
	font-size: clamp(26px, 2.6vw, 38px);
	line-height: 1.2;
	color: var(--tv-light-ink);
	margin-bottom: 16px;
}

/* This section's copy has no paragraph under the heading, so the margin above
   is trailing dead space that widened the gap before the first card. Scoped to
   :last-child so it reappears if a paragraph is ever added back. */
.tv-journey-intro h2:last-child {
	margin-bottom: 0;
}

.int_dark_bg .tv-journey .tv-journey-intro h2 span,
.tv-journey .tv-journey-intro h2 span {
	color: var(--tv-gold-ink);
}

.tv-journey-intro p {
	max-width: 520px;
	line-height: 1.9;
	margin: 0;
}

.tv-journey-cta {
	text-align: right;
}

.tv-journey-cta .button {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	width: auto;
	min-width: 0;
	padding: 16px 32px;
	border: 1px solid var(--tv-gold) !important;
	border-radius: 0 !important;
	background: var(--tv-gold) !important;
	background-color: var(--tv-gold) !important;
	color: var(--tv-ink) !important;
	font-family: "Montserrat", "Lato", sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .1em;
	line-height: 1;
	-webkit-transition: background .3s, border-color .3s;
	transition: background .3s, border-color .3s;
}

.tv-journey-cta .button:hover {
	background: var(--tv-gold-2) !important;
	background-color: var(--tv-gold-2) !important;
	border-color: var(--tv-gold-2) !important;
	color: var(--tv-ink) !important;
}

.tv-journey-cta .button--moema::before {
	display: none;
	content: none;
}

@media (max-width: 991px) {
	.tv-journey-cta {
		text-align: left;
	}
}

/* --- Row 2 / the card stack ----------------------------------------------
   Every card shares one sticky anchor. As the next card reaches the deck,
   tv-journey-stack.js eases the cards already passed slightly upward and
   inward, exposing their top edges like the reference animation. The cards
   remain in normal document flow, so scrolling backwards unwinds the stack
   naturally and there is no artificial spacer or pinned full-screen stage.
   ------------------------------------------------------------------------- */
.tv-journey-cards {
	position: relative;
	isolation: isolate;
	--tv-stack-lift: 0px;
	--tv-stack-scale: 1;
	/* Breathing room so the last card can settle before the section ends. */
	padding-bottom: clamp(30px, 4vw, 60px);
}

.tv-journey-card {
	position: -webkit-sticky;
	position: sticky;
	top: clamp(84px, 8vw, 104px);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: clamp(22px, 3vw, 42px);
	min-height: clamp(180px, 19vw, 230px);
	padding: clamp(28px, 3.4vw, 46px);
	margin-bottom: clamp(22px, 2.6vw, 34px);
	/* Opaque, or the card beneath would show through as it slides under. */
	background: var(--tv-light-card);
	border: 1px solid var(--tv-light-line);
	border-radius: 6px;
	-webkit-box-shadow: 0 18px 44px rgba(10, 20, 14, .1);
	        box-shadow: 0 18px 44px rgba(10, 20, 14, .1);
	-webkit-transform: translate3d(0, var(--tv-stack-lift), 0) scale(var(--tv-stack-scale));
	        transform: translate3d(0, var(--tv-stack-lift), 0) scale(var(--tv-stack-scale));
	-webkit-transform-origin: 50% 0;
	        transform-origin: 50% 0;
	will-change: transform;
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
}

.tv-journey-card:last-child {
	margin-bottom: 0;
}

/* Later cards paint above earlier ones as they arrive at the common anchor. */
.tv-journey-card:nth-child(1) { z-index: 1; }
.tv-journey-card:nth-child(2) { z-index: 2; }
.tv-journey-card:nth-child(3) { z-index: 3; }
.tv-journey-card:nth-child(4) { z-index: 4; }
.tv-journey-card:nth-child(5) { z-index: 5; }

.tv-journey-num {
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 76px;
	        flex: 0 0 76px;
	width: 76px;
	height: 76px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	border-radius: 50%;
	background: var(--tv-gold);
	color: var(--tv-ink);
	font-family: "Montserrat", "Lato", sans-serif;
	font-weight: 600;
	font-size: 22px;
	line-height: 1;
}

.tv-journey-body h4 {
	font-family: "Montserrat", "Lato", sans-serif;
	font-weight: 600;
	font-size: clamp(19px, 1.9vw, 25px);
	line-height: 1.25;
	color: var(--tv-light-ink);
	margin-bottom: 10px;
}

.tv-journey-body p {
	margin: 0;
	max-width: 640px;
	line-height: 1.8;
	color: var(--tv-light-body);
}

/* Tablet/phone: stacking tall cards under a pinned header eats the whole
   screen, so the cards just flow normally instead. */
@media (max-width: 991px) {
	.tv-journey-card {
		position: static;
		min-height: 0;
		-webkit-transform: none !important;
		        transform: none !important;
		will-change: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tv-journey-card {
		-webkit-transform: none !important;
		        transform: none !important;
		will-change: auto;
	}
}

@media (max-width: 575px) {
	.tv-journey-card {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-align: start;
		    -ms-flex-align: start;
		        align-items: flex-start;
		gap: 18px;
	}

	.tv-journey-num {
		-ms-flex: 0 0 60px;
		    flex: 0 0 60px;
		width: 60px;
		height: 60px;
		font-size: 18px;
	}
}

/* ==========================================================================
   23. AMENITIES SECTION (.tv-amenities)
   --------------------------------------------------------------------------
   Row 1 is the theme's stock `.section-title` (subtitle + title, gold bar).
   Row 2 is an 8-item amenity list split into two `col-lg-6` columns (4 each,
   stacking under 992px) plus one `col-lg-12` highlighted feature spanning
   the full row, then an `.tv-info-box` note underneath — reusing the same
   info-card component from the Highlights section above.

   This section keeps the stock dot-textured `.tv-light` background (no
   override), unlike .tv-brochure/.tv-highlights/.tv-journey which strip it.
   ========================================================================== */
.tv-amenities.rec-pro {
	padding: clamp(40px, 4.2vw, 64px) 0;
}

/* Gold bar/heading colours on the light section — same fix as the Services
   band needs, since the stock `.section-title` rules above are #FF385C. */
.int_dark_bg .tv-amenities .section-title:before {
	background: var(--tv-gold);
	background-color: var(--tv-gold);
}

.int_dark_bg .tv-amenities .section-title h3 {
	color: var(--tv-light-ink);
}

.int_dark_bg .tv-amenities .section-title h2 {
	color: var(--tv-gold-ink);
}

.tv-amenities-row2 {
	row-gap: clamp(30px, 3.4vw, 44px);
}

.tv-amenities-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tv-amenities-list li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	gap: 18px;
	padding: 18px 0;
	border-bottom: 1px dashed var(--tv-light-line);
}

.tv-amenities-list li:first-child {
	padding-top: 0;
}

.tv-amenities-list li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.tv-amenity-icon {
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 48px;
	        flex: 0 0 48px;
	width: 48px;
	height: 48px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	border-radius: 50%;
	background: var(--tv-gold-glass);
	color: var(--tv-gold-ink);
	font-size: 18px;
}

.tv-amenity-body h4 {
	font-family: "Montserrat", "Lato", sans-serif;
	font-weight: 600;
	font-size: 16px;
	color: var(--tv-light-ink);
	margin-bottom: 6px;
}

.tv-amenity-body p {
	margin: 0;
	line-height: 1.7;
	color: var(--tv-light-body);
	font-size: 14.5px;
}

.tv-amenity-feature {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 24px;
	padding: clamp(28px, 3vw, 40px);
	background: var(--tv-light-card);
	border: 1px solid var(--tv-gold);
	border-radius: 2px;
}

.tv-amenity-feature-icon {
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 64px;
	        flex: 0 0 64px;
	width: 64px;
	height: 64px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	border-radius: 50%;
	background: var(--tv-gold);
	color: var(--tv-ink);
	font-size: 26px;
}

.tv-amenity-feature-body h4 {
	font-family: "Montserrat", "Lato", sans-serif;
	font-weight: 600;
	font-size: 19px;
	color: var(--tv-light-ink);
	margin-bottom: 8px;
}

.tv-amenity-feature-body p {
	margin: 0;
	line-height: 1.8;
	color: var(--tv-light-body);
	max-width: 760px;
}

.tv-amenities .tv-info-box {
	margin-top: clamp(30px, 3.4vw, 44px);
}

@media (max-width: 575px) {
	.tv-amenity-feature {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		text-align: center;
	}
}

/* ==========================================================================
   24. FAQ SECTION (.tv-faq)
   --------------------------------------------------------------------------
   col-lg-4 intro (title/copy/CTA) left, col-lg-8 accordion right. The
   accordion uses native <details>/<summary> — no JS, keyboard/AT support and
   open/close semantics come for free from the browser. The disclosure
   triangle is suppressed and a rotating "+" icon substitutes for it.
   ========================================================================== */
.tv-faq.rec-pro {
	padding: clamp(40px, 4.2vw, 64px) 0;
}

.tv-faq-intro h3 {
	font-family: "Montserrat", "Lato", sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--tv-emerald);
	margin-bottom: 10px;
}

.tv-faq-intro h2 {
	font-family: "Montserrat", "Lato", sans-serif;
	font-size: clamp(26px, 2.6vw, 38px);
	line-height: 1.2;
	color: var(--tv-light-ink);
	margin-bottom: 16px;
}

.int_dark_bg .tv-faq .tv-faq-intro h2 span,
.tv-faq .tv-faq-intro h2 span {
	color: var(--tv-gold-ink);
}

.tv-faq-intro p {
	max-width: 420px;
	line-height: 1.9;
	margin-bottom: 26px;
}

.tv-faq-intro .button {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	/* Centres the phone icon against the label — inline-flex defaults to
	   `stretch`, which would pull the glyph to the full button height. */
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	width: auto;
	min-width: 0;
	padding: 15px 34px;
	border: 1px solid var(--tv-gold) !important;
	border-radius: 0 !important;
	background: var(--tv-gold) !important;
	background-color: var(--tv-gold) !important;
	color: var(--tv-ink) !important;
	font-family: "Montserrat", "Lato", sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .1em;
	line-height: 1;
	-webkit-animation: none;
	        animation: none;
	-webkit-transition: background .3s, border-color .3s;
	transition: background .3s, border-color .3s;
}

.tv-faq-intro .button:hover {
	background: var(--tv-gold-2) !important;
	background-color: var(--tv-gold-2) !important;
	border-color: var(--tv-gold-2) !important;
	color: var(--tv-ink) !important;
}

.tv-faq-intro .button--moema::before {
	display: none;
	content: none;
}

@media (max-width: 991px) {
	.tv-faq-intro {
		margin-bottom: 40px;
	}

	.tv-faq-intro p {
		max-width: none;
	}
}

.tv-faq-item {
	border-bottom: 1px solid var(--tv-light-line);
}

.tv-faq-item:first-child {
	border-top: 1px solid var(--tv-light-line);
}

.tv-faq-item summary {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	gap: 20px;
	padding: 20px 4px;
	cursor: pointer;
	list-style: none;
	font-family: "Montserrat", "Lato", sans-serif;
	font-weight: 600;
	font-size: 16px;
	color: var(--tv-light-ink);
	-webkit-transition: color .25s;
	transition: color .25s;
}

/* Suppress the native disclosure triangle across engines. */
.tv-faq-item summary::-webkit-details-marker {
	display: none;
}

.tv-faq-item summary::marker {
	content: "";
}

.tv-faq-item summary:hover {
	color: var(--tv-gold-ink);
}

.tv-faq-item summary i {
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 auto;
	        flex: 0 0 auto;
	width: 26px;
	height: 26px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	border-radius: 50%;
	background: var(--tv-gold-glass);
	color: var(--tv-gold-ink);
	font-size: 12px;
	-webkit-transition: -webkit-transform .3s;
	transition: -webkit-transform .3s;
	transition: transform .3s;
	transition: transform .3s, -webkit-transform .3s;
}

.tv-faq-item[open] summary i {
	-webkit-transform: rotate(135deg);
	        transform: rotate(135deg);
}

.tv-faq-a {
	padding: 0 34px 22px 4px;
}

.tv-faq-a p {
	margin: 0;
	line-height: 1.8;
	color: var(--tv-light-body);
}

/* Height/opacity settle-in when a panel opens. Skipped gracefully wherever
   @starting-style isn't supported — the panel just appears without the
   slide, `<details>` itself still opens/closes correctly either way. */
@media (prefers-reduced-motion: no-preference) {
	.tv-faq-a {
		overflow: hidden;
		-webkit-transition: opacity .35s ease, translate .35s ease;
		transition: opacity .35s ease, translate .35s ease;
	}

	.tv-faq-item[open] .tv-faq-a {
		opacity: 1;
		translate: 0 0;
	}

	@starting-style {
		.tv-faq-item[open] .tv-faq-a {
			opacity: 0;
			translate: 0 -6px;
		}
	}
}

/* ==========================================================================
   17. FOOTER — black, stripped back
   --------------------------------------------------------------------------
   Logo, address, phone, email and socials on the left; tagline on the right.
   ========================================================================== */
.tv-footer .top-footer,
.int_dark_bg .tv-footer .top-footer {
	background: #000 !important;
	border-top: 0;
	/* Was clamp(48px, 6vw, 45px) — min above max, so per spec the min won and
	   it was pinned at a flat 48px with the vw term doing nothing. */
	padding: clamp(36px, 3.8vw, 56px) 0;
}

.tv-footer .second-footer,
.int_dark_bg .tv-footer .second-footer {
	background: #000 !important;
	border-top: 1px solid rgba(200, 168, 74, .16);
	color: var(--tv-cream-50);
	padding: 22px 0;
}

.tv-footer .second-footer p {
	margin: 0;
	font-size: 13px;
	color: var(--tv-cream-50);
}

.tv-footer .container-fluid {
	padding-left: clamp(16px, 3vw, 56px);
	padding-right: clamp(16px, 3vw, 56px);
}

/* Logo and contact details share one row; contact lines stack beside the mark */
.tv-foot-brand {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: clamp(22px, 3.2vw, 54px);
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}

.tv-foot-logo {
	-ms-flex-negative: 0;
	    flex-shrink: 0;
	display: inline-block;
}

/* styles.css has `.first-footer .logo img { width: 130px }` at (0,2,1); a bare
   `.tv-foot-logo img` is only (0,1,1) and loses no matter what the media query
   says — media queries carry no specificity. Qualifying with the footer class
   and the anchor takes this to (0,2,2). */
.tv-footer a.tv-foot-logo img {
	width: clamp(104px, 11vw, 142px);
	height: auto;
	max-width: 100%;
	display: block;
	margin-bottom: 0;
}

/* Without this the contact block sizes to max-content and drops onto its own
   line around 991px; letting it shrink keeps it beside the logo and wraps the
   address instead. */
.tv-foot-brand .contactus {
	-webkit-box-flex: 1;
	    -ms-flex: 1 1 240px;
	        flex: 1 1 240px;
	min-width: 0;
}

.tv-footer .contactus ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tv-footer .contactus ul li {
	margin-bottom: 14px;
}

.tv-footer .contactus ul li:last-child {
	margin-bottom: 0;
}

.tv-footer .contactus .info {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 12px;
}

/* White circular badges. styles.css carries
   `.int_dark_bg .first-footer .contactus ul li .fa` at (0,4,2), so this has to
   be qualified past it — a shorter selector silently loses no matter where it
   sits in the file. Glyph is ink, not gold: gold on white is only 2.3:1. */
.tv-footer .contactus ul li .info .fa,
.int_dark_bg .tv-footer .contactus ul li .info .fa {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #fff;
	color: var(--tv-ink);
	font-size: 14px;
	line-height: 1;
	-ms-flex-negative: 0;
	    flex-shrink: 0;
	-webkit-transition: background .3s, color .3s;
	transition: background .3s, color .3s;
}

.tv-footer .contactus ul li:hover .info .fa,
.int_dark_bg .tv-footer .contactus ul li:hover .info .fa {
	background: var(--tv-gold);
	color: var(--tv-ink);
}

.int_dark_bg .tv-footer .contactus .info p,
.tv-footer .contactus .info p {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--tv-cream-70);
}

/* Bottom bar: copyright left, socials right, on one row */
.tv-footer .second-footer .container-fluid.sd-f,
.int_dark_bg .tv-footer .container-fluid.sd-f {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	gap: 14px;
}

.tv-footer .tv-socials {
	list-style: none;
	margin: 0;
	padding: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	gap: 10px;
}

.tv-footer .tv-socials li {
	margin: 0;
}

.tv-footer .tv-socials a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(200, 168, 74, .28);
	border-radius: 50%;
	color: var(--tv-cream-70);
	font-size: 13px;
	-webkit-transition: all .3s;
	transition: all .3s;
}

/* the template puts the sizing + 1.5rem gap on the icon glyph itself */
.tv-footer .tv-socials a .fa,
.tv-footer .tv-socials a .fab {
	width: auto;
	height: auto;
	line-height: 1;
	margin-right: 0;
	font-size: 13px;
	background: transparent;
	color: inherit;
}

.tv-footer .tv-socials a:hover,
.tv-footer .tv-socials a:hover .fa,
.tv-footer .tv-socials a:hover .fab {
	background: var(--tv-gold);
	border-color: var(--tv-gold);
	color: #000;
}

/* Tagline */
.tv-tagline {
	margin: 0;
	font-family: "Montserrat", "Lato", sans-serif;
	font-weight: 600;
	font-size: clamp(30px, 4.4vw, 62px);
	line-height: 1.08;
	letter-spacing: -.015em;
	color: var(--tv-cream);
	text-align: right;
}

.tv-tagline span {
	color: var(--tv-gold);
}

@media (max-width: 991px) {
	.tv-tagline {
		text-align: left;
		margin-top: 40px;
	}
}

/* Below md the logo and contact stack, and the bottom bar goes two rows */
@media (max-width: 575px) {
	.tv-foot-brand {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-align: start;
		    -ms-flex-align: start;
		        align-items: flex-start;
		gap: 20px;
	}

	/* flex-basis works on the MAIN axis — once this column stacks, the 240px
	   basis set for the desktop row became a 240px *height*, which is where
	   the block of dead space under the contact list came from. */
	.tv-foot-brand .contactus {
		-webkit-box-flex: 0;
		    -ms-flex: 0 1 auto;
		        flex: 0 1 auto;
		width: 100%;
	}

	.tv-footer a.tv-foot-logo img {
		width: 90px;
	}

	.tv-footer .top-footer {
		padding: 44px 0 38px;
	}

	.tv-footer .contactus ul li {
		margin-bottom: 11px;
	}

	.tv-tagline {
		font-size: 40px;
		line-height: 1.12;
		margin-top: 26px;
	}

	/* Bottom bar: socials above the copyright, both centred */
	.tv-footer .second-footer .container-fluid.sd-f,
	.int_dark_bg .tv-footer .container-fluid.sd-f {
		-webkit-box-orient: vertical;
		-webkit-box-direction: reverse;
		    -ms-flex-direction: column-reverse;
		        flex-direction: column-reverse;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		text-align: center;
		gap: 16px;
	}

	.tv-footer .tv-socials {
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
	}

	/* .go-up is position:fixed bottom-right, so it floats over whatever sits
	   at the bottom of the viewport — this keeps the copyright clear of it. */
	.tv-footer .second-footer {
		padding: 20px 0 76px;
	}
}

/* ==========================================================================
   26. CONTENT PASS — Azure by Lapis copy
   --------------------------------------------------------------------------
   New elements introduced when the placeholder copy was replaced with the
   client's landing-page document: header nav, hero lead/note/consent, select
   inputs, non-numeric stat tiles, section lead paragraphs, project meta list.
   ========================================================================== */

/* --- Header nav ---------------------------------------------------------- */
.tv-nav {
	margin-left: auto;
	margin-right: clamp(12px, 2vw, 28px);
}

.tv-nav ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: clamp(14px, 1.8vw, 30px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tv-nav a {
	font-family: "Montserrat", "Lato", sans-serif;
	font-weight: 500;
	font-size: clamp(11px, .85vw, 13px);
	letter-spacing: .04em;
	color: var(--tv-cream-70);
	text-decoration: none;
	white-space: nowrap;
	-webkit-transition: color .25s;
	transition: color .25s;
}

.tv-nav a:hover,
.tv-nav a:focus {
	color: var(--tv-gold);
	text-decoration: none;
}

/* When the nav is present it takes the margin-left:auto, so .tv-actions must
   give it up or the two get pushed apart. Scoped to the width where the nav is
   actually shown: `display:none` does NOT stop `.tv-nav + .tv-actions` from
   matching, so unscoped this stripped the auto margin on mobile too and left
   the Enquire button sitting against the brand instead of the right edge. */
@media (min-width: 1200px) {
	.tv-nav + .tv-actions {
		margin-left: 0;
	}
}

/* Nav is the first thing to go when the row gets tight. */
@media (max-width: 1199px) {
	.tv-nav {
		display: none;
	}
}

/* Anchor targets sit under no fixed header here, but a little breathing room
   keeps jumped-to headings off the very top edge. */
#opportunity,
#project,
#how-it-works,
#faqs,
#enquire {
	scroll-margin-top: 24px;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* --- Hero copy ----------------------------------------------------------- */
.int_dark_bg .tv-hero .tv-hero-lead,
.tv-hero-lead {
	font-size: clamp(15px, 1.15vw, 17px);
	line-height: 1.75;
	color: var(--tv-cream-70);
	max-width: 620px;
	margin-bottom: 26px;
}

/* Benefit bullets are full sentences now, not "6 Bedrooms" — one per row. */
.tv-hero-specs {
	grid-template-columns: 1fr;
	gap: 12px;
	max-width: 560px;
}

.int_dark_bg .tv-hero .tv-hero-note,
.tv-hero-note {
	margin: 16px 0 0;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--tv-cream-50);
	max-width: 520px;
}

/* --- Hero form: selects + consent ---------------------------------------- */
/* select styling lives with the input/textarea rule in section 25 so the
   three cannot drift apart — see the note there. */
.tv-hero-field select:focus {
	outline: none;
	border-color: var(--tv-gold);
	background-color: rgba(250, 247, 240, .08);
}

/* --- Phone field: +91 prefix ---------------------------------------------
   The page targets India only, so the country code is a fixed prefix rather
   than a one-option dropdown — a select that cannot change state is just a
   dead control. The code still reaches the handler: a hidden
   `phone_country_code` input sits beside the field in the markup.

   The border and fill move from the input onto the group so the prefix and
   the number read as a single field; :focus-within then lights the whole
   group the way :focus lights the other inputs. */
.tv-phone-group {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	background: rgba(250, 247, 240, .05);
	border: 1px solid var(--tv-gold-line);
	border-radius: 2px;
	-webkit-transition: border-color .25s, background .25s;
	transition: border-color .25s, background .25s;
}

.tv-phone-prefix {
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 auto;
	        flex: 0 0 auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	padding: 0 11px 0 15px;
	border-right: 1px solid var(--tv-gold-line);
	font-family: "Lato", sans-serif;
	font-size: 14.5px;
	line-height: 1;
	color: var(--tv-cream-70);
	white-space: nowrap;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}

/* Qualified with .tv-hero-field so it clears the shared input rule in
   section 25 (same specificity there) without needing !important. */
.tv-hero-field .tv-phone-group input {
	-webkit-box-flex: 1;
	    -ms-flex: 1 1 auto;
	        flex: 1 1 auto;
	min-width: 0;
	padding-left: 12px;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.tv-hero-field .tv-phone-group input:focus {
	background: transparent;
}

.tv-phone-group:focus-within {
	border-color: var(--tv-gold);
	background: rgba(250, 247, 240, .08);
}

/* --- Validation states ---------------------------------------------------
   Colour is not the only signal: an explicit message is written under the
   field and announced via role="alert", so the state does not depend on
   distinguishing red from gold. */
.tv-field-error {
	display: block;
	margin-top: 7px;
	font-size: 12px;
	line-height: 1.5;
	color: #f2a0a0;
}

.tv-field-error:empty {
	display: none;
}

.tv-hero-field.is-invalid input,
.tv-hero-field.is-invalid select,
.tv-hero-field.is-invalid .tv-phone-group {
	border-color: #d97b7b;
}

.tv-hero-field.is-invalid .tv-phone-group input {
	border: 0;
}

.int_dark_bg .tv-hero .tv-hero-consent,
.tv-hero-consent {
	margin: 16px 0 0;
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--tv-cream-50);
}

/* --- Stat tiles: text values --------------------------------------------- */
/* Three of the four tiles are place/product names rather than counted
   figures, and would wrap badly at the numeric size. */
.tv-stat-num.tv-stat-text {
	font-size: clamp(19px, 1.9vw, 26px);
	line-height: 1.2;
}

/* --- Section lead paragraphs --------------------------------------------- */
.int_dark_bg section.tv-light .tv-services-lead,
.tv-services-lead {
	max-width: 900px;
	margin: -18px 0 42px;
	line-height: 1.9;
	color: var(--tv-light-body);
}

.tv-services-cta {
	margin-top: 40px;
}

/* Equal-height service cards ----------------------------------------------
   The template sizes each .service to its own content, so "Property-Linked
   Participation" — whose heading wraps to two lines and whose copy runs to
   four — grew taller than its three neighbours and broke the row's baseline.
   Stretching the columns and letting the card fill them keeps all four the
   same height whatever the copy length, without editing the client's copy.

   The .media icon is positioned against the Bootstrap column (which is
   already position:relative), not against .service — so making the card a
   flex child leaves the icons exactly where they were. */
.services-home .row {
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
}

.services-home .row > [class*="col-"] {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.services-home .service {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	width: 100%;
}

/* The body absorbs the slack so every card ends flush at the bottom. */
.services-home .service .agent-section {
	-webkit-box-flex: 1;
	    -ms-flex: 1 1 auto;
	        flex: 1 1 auto;
}

/* Balance the headings: one-line titles sit at the same baseline as the
   two-line one, so the body copy starts level across all four cards. */
.services-home .service .agent-section h4 {
	min-height: 2.6em;
	line-height: 1.3;
}

/* Drop the template's staggered top offsets on desktop — with equal-height
   cards they only knock the row out of alignment. */
@media (min-width: 992px) {
	.services-home .m-top-0,
	.services-home .m-top-40 {
		margin-top: 0;
	}
}

/* Stacked below lg, equal heights are pointless and the min-height on the
   heading just adds dead space. */
@media (max-width: 991px) {
	.services-home .service .agent-section h4 {
		min-height: 0;
	}
}

.int_dark_bg section.tv-light .tv-amenities-lead,
.tv-amenities-lead {
	max-width: 900px;
	margin: -18px 0 38px;
	line-height: 1.9;
	color: var(--tv-light-body);
}

/* Transparency items are single-line statements with no supporting copy, so
   the heading is the whole item — drop the gap it reserves for a paragraph. */
.tv-amenity-body h4:only-child {
	margin-bottom: 0;
	font-weight: 500;
	line-height: 1.6;
}

/* --- Project meta (location / developer / completion) -------------------- */
.tv-brochure-meta {
	list-style: none;
	margin: 4px 0 18px;
	padding: 18px 0 0;
	border-top: 1px dashed var(--tv-light-line);
}

.int_dark_bg section.tv-light .tv-brochure-meta li,
.tv-brochure-meta li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 9px;
	font-size: 14.5px;
	color: var(--tv-light-body);
}

.tv-brochure-meta li:last-child {
	margin-bottom: 0;
}

.int_dark_bg section.tv-light .tv-brochure-meta li span,
.tv-brochure-meta li span {
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 auto;
	        flex: 0 0 auto;
	min-width: 148px;
	font-family: "Montserrat", "Lato", sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tv-gold-ink);
}

.int_dark_bg section.tv-light .tv-brochure-disclaimer,
.tv-brochure-disclaimer {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--tv-light-body);
	opacity: .8;
}

/* The details column now ends in copy rather than a button, so the price
   slot doubles as a heading for the highlights list beneath it. */
.tv-brochure-price {
	font-size: clamp(19px, 1.9vw, 24px);
}

@media (max-width: 575px) {
	.tv-brochure-meta li span {
		min-width: 0;
		width: 100%;
	}
}

/* --- Section rhythm ------------------------------------------------------
   Every section on the page now shares one vertical scale, topping out at
   64px a side on desktop instead of the 88–104px the sections were built
   with, which left roughly 200px of dead space between neighbours on a large
   screen. Two of these are the template's own fixed rem values rather than
   rules of mine, so they are brought into line here:
     section.services-home  4.6rem (73.6px)
     .info-help             6rem   (96px)
   ------------------------------------------------------------------------- */
.int_dark_bg section.services-home,
section.services-home,
.int_dark_bg section.services-home.tv-light {
	padding: clamp(40px, 4.2vw, 64px) 0;
}

.info-help {
	padding: clamp(40px, 4.2vw, 64px) 0;
}

/* --- Final CTA: longer labels -------------------------------------------- */
/* "Get Complete Investment Details" / "Schedule a Consultation" are far
   longer than the template's "Get Started", and the nowrap set earlier would
   push them out of the column. Let them wrap instead. */
.info-help .info-head .inf-btn .btn-pro,
.info-help .info-head .inf-btn .btn-pro-outline {
	white-space: normal;
	text-align: center;
}

@media (min-width: 992px) {
	.info-help .info-head .inf-btn {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-align: end;
		    -ms-flex-align: end;
		        align-items: flex-end;
	}

	.info-help .info-head .inf-btn .btn-pro,
	.info-help .info-head .inf-btn .btn-pro-outline {
		min-width: 268px;
	}
}

/* ==========================================================================
   27. LIGHTER HERO / FORM / STAT BAND
   --------------------------------------------------------------------------
   The hero scrim was pulled back so the Azure by Lapis render actually reads
   through it. Two things followed from that:

     - the enquiry panel was dark translucent glass, designed to sit on a
       heavily dimmed photo. Against a bright render it reads as a black slab,
       so it flips to a light card — and everything inside has to invert with
       it, since cream text on a cream panel is invisible.
     - the stat band under the hero was solid #0f1e14, which put a hard dark
       slab directly beneath a now-bright hero. It becomes white, giving the
       page a hero -> white -> cream progression instead of a dark step.

   These override section 25 / 18 rather than editing them so the whole
   lighter treatment can be reviewed — or reverted — as one piece.
   ========================================================================== */

/* --- Enquiry panel -------------------------------------------------------- */
.tv-hero-form {
	background: rgba(250, 247, 240, .95);
	border-color: rgba(10, 20, 14, .1);
	-webkit-box-shadow: 0 22px 54px rgba(10, 20, 14, .3);
	        box-shadow: 0 22px 54px rgba(10, 20, 14, .3);
}

.int_dark_bg .tv-hero .tv-hero-form h3,
.tv-hero-form h3 {
	color: var(--tv-light-ink);
}

.int_dark_bg .tv-hero .tv-hero-form-sub,
.tv-hero-form-sub {
	color: var(--tv-light-body);
}

.int_dark_bg .tv-hero .tv-hero-field label,
.tv-hero-field label {
	color: var(--tv-light-body);
}

/* background-COLOR, never the `background` shorthand: the shorthand resets
   every background sub-property, which wiped the select's background-repeat,
   -position and -size and left its chevron SVG tiling across the whole field.
   The phone input keeps its transparent/borderless rule from section 25 — it
   is (0,2,1) and still outranks this, so only the group around it repaints. */
.tv-hero-field input,
.tv-hero-field textarea,
.tv-hero-field select,
.tv-phone-group {
	background-color: var(--tv-white-card);
	border-color: var(--tv-light-line);
	color: var(--tv-light-ink);
}

.tv-hero-field input:focus,
.tv-hero-field textarea:focus,
.tv-hero-field select:focus,
.tv-phone-group:focus-within {
	background-color: #fff;
	border-color: var(--tv-gold-ink);
}

.tv-hero-field .tv-phone-group input:focus {
	background: transparent;
}

.tv-phone-prefix {
	color: var(--tv-light-body);
	border-right-color: var(--tv-light-line);
}

.tv-hero-field input::-webkit-input-placeholder,
.tv-hero-field textarea::-webkit-input-placeholder {
	color: rgba(58, 94, 78, .85);
}

.tv-hero-field input::-moz-placeholder,
.tv-hero-field textarea::-moz-placeholder {
	color: rgba(58, 94, 78, .85);
}

.tv-hero-field input:-ms-input-placeholder,
.tv-hero-field textarea:-ms-input-placeholder {
	color: rgba(58, 94, 78, .85);
}

.tv-hero-field input::placeholder,
.tv-hero-field textarea::placeholder {
	color: rgba(58, 94, 78, .85);
}

/* Gold #c8a84a is only ~2.1:1 on a light fill, so the chevron steps down to
   the darkened gold the same way accent text does on light sections.
   repeat/position/size are restated alongside the image so this rule is
   self-contained — an SVG with no intrinsic size tiles to fill the field if
   any of the three is ever reset by a `background` shorthand elsewhere. */
.tv-hero-field select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23a38c4d' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size: 11px;
}

.tv-hero-field select:invalid {
	color: rgba(58, 94, 78, .85);
}

.tv-hero-field select option {
	background: #fff;
	color: var(--tv-light-ink);
}

.tv-hero-field select option[disabled] {
	color: rgba(58, 94, 78, .5);
}

/* Full-strength body colour: this is 11.5px legal copy, so it needs the
   4.5:1 small-text ratio rather than the muted tone it had on the dark card. */
.int_dark_bg .tv-hero .tv-hero-consent,
.tv-hero-consent {
	color: var(--tv-light-body);
}

/* Error text has to clear AA on the light panel now, so the soft pink that
   worked on the dark card is replaced with a proper dark red. */
.tv-field-error {
	color: #b3261e;
}

.tv-hero-field.is-invalid input,
.tv-hero-field.is-invalid select,
.tv-hero-field.is-invalid .tv-phone-group {
	border-color: #b3261e;
}

/* --- Stat band ------------------------------------------------------------ */
/* Needs !important to beat `.tv-stats { background: var(--tv-green) !important }`
   in section 18 — !important wins regardless of specificity. */
.tv-stats {
	background: var(--tv-white) !important;
}

.tv-stat {
	background: var(--tv-white-card);
	border-color: var(--tv-light-line);
}

.tv-stat:hover {
	background: var(--tv-white-card);
	border-color: rgba(163, 140, 77, .45);
}

.tv-stat-icon {
	color: rgba(163, 140, 77, .13);
}

.tv-stat:hover .tv-stat-icon {
	color: rgba(163, 140, 77, .2);
}

.tv-stat-num,
.tv-stat-num.tv-stat-text {
	color: var(--tv-gold-ink);
}

.tv-stat-label {
	color: var(--tv-light-body);
}

/* ==========================================================================
   28. SUCCESS DIALOG + FORM STATUS
   --------------------------------------------------------------------------
   Shown after the enquiry form is accepted by submit-lead.php. Built on the
   native <dialog>: showModal() gives focus trapping, Esc-to-close and an
   inert background for free, which a hand-rolled overlay would have to
   reimplement (usually incompletely).
   ========================================================================== */
.tv-modal {
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	max-width: min(440px, calc(100vw - 32px));
	width: 100%;
	overflow: visible;
}

/* Fallback for engines without <dialog>: the script sets [open] and this
   centres the panel manually so the confirmation is never invisible. */
.tv-modal:not(:modal)[open] {
	position: fixed;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	z-index: 9999;
}

.tv-modal::backdrop {
	background: rgba(10, 20, 14, .62);
	-webkit-backdrop-filter: blur(3px);
	        backdrop-filter: blur(3px);
}

.tv-modal-inner {
	padding: clamp(30px, 4vw, 44px) clamp(24px, 3.4vw, 40px);
	background: var(--tv-light);
	border: 1px solid var(--tv-light-line);
	border-radius: 8px;
	text-align: center;
	-webkit-box-shadow: 0 28px 70px rgba(10, 20, 14, .4);
	        box-shadow: 0 28px 70px rgba(10, 20, 14, .4);
}

.tv-modal-icon {
	width: 84px;
	height: 84px;
	margin: 0 auto 22px;
}

.tv-modal-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.tv-modal-icon-ring,
.tv-modal-icon-tick {
	fill: none;
	stroke: var(--tv-emerald);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tv-modal-icon-ring {
	stroke-opacity: .35;
}

/* The ring and tick draw themselves in. stroke-dasharray is set to each
   path's own length so the dash is the whole stroke and the offset animates
   it into view. */
.tv-modal[open] .tv-modal-icon-ring {
	stroke-dasharray: 151;
	stroke-dashoffset: 151;
	-webkit-animation: tv-draw .5s ease forwards;
	        animation: tv-draw .5s ease forwards;
}

.tv-modal[open] .tv-modal-icon-tick {
	stroke-dasharray: 40;
	stroke-dashoffset: 40;
	-webkit-animation: tv-draw .34s .38s ease forwards;
	        animation: tv-draw .34s .38s ease forwards;
}

@-webkit-keyframes tv-draw { to { stroke-dashoffset: 0; } }
@keyframes tv-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
	.tv-modal[open] .tv-modal-icon-ring,
	.tv-modal[open] .tv-modal-icon-tick {
		-webkit-animation: none;
		        animation: none;
		stroke-dashoffset: 0;
	}
}

.int_dark_bg .tv-modal-inner h3,
.tv-modal-inner h3 {
	font-family: "Montserrat", "Lato", sans-serif;
	font-weight: 600;
	font-size: clamp(21px, 2vw, 26px);
	color: var(--tv-light-ink);
	margin-bottom: 10px;
}

.int_dark_bg .tv-modal-inner p,
.tv-modal-inner p {
	margin: 0 0 26px;
	font-size: 15px;
	line-height: 1.75;
	color: var(--tv-light-body);
}

.tv-modal-close {
	min-width: 148px;
	padding: 14px 30px;
	background: var(--tv-gold);
	border: 1px solid var(--tv-gold);
	border-radius: 2px;
	color: var(--tv-ink);
	font-family: "Montserrat", "Lato", sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	-webkit-transition: background .3s, border-color .3s;
	transition: background .3s, border-color .3s;
}

.tv-modal-close:hover,
.tv-modal-close:focus {
	background: var(--tv-gold-2);
	border-color: var(--tv-gold-2);
}

/* --- Endpoint-level form status ------------------------------------------
   Separate from the per-field messages: this is for "the CRM refused it" or
   "you are offline", which belong to the form as a whole. Same dark red as
   the field errors, which clears AA on the light panel. */
.tv-form-status {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.6;
	color: #b3261e;
}

.tv-form-status:empty {
	display: none;
}

.tv-hero-submit[disabled] {
	opacity: .72;
	cursor: progress;
}

/* ==========================================================================
   29. TESTIMONIALS — quote glyph, alignment, equal heights
   ========================================================================== */

/* The open-quote glyph was positioned with a hardcoded `left: 136px` (plus
   three more values across media queries) and `top: -24px`. Those were tuned
   for a card width this layout no longer uses, so the mark drifted off-centre.
   Worse, being inline+relative it still reserved a full line of inline space
   before shifting away from it — that reserved line is the empty band sitting
   above each quote. Making it a centred block removes both problems at once
   and needs no per-breakpoint values. */
.testimonials .test-1 p::before {
	content: "\f10d";
	display: block;
	position: static;
	left: auto;
	right: auto;
	top: auto;
	margin: 0 auto 12px;
	font-size: 1.2rem;
	line-height: 1;
	color: var(--tv-gold-ink);
}

/* The closing glyph is painted #fff on a #fff card, so it has never been
   visible — it only adds a stray character to the end of the quote. */
.testimonials .test-1 p::after {
	content: none;
}

/* Owl sizes each .owl-item to its own content, so a longer quote produced a
   taller card and the row lost its shared baseline. Making the stage a flex
   row lets every card fill the tallest item, whatever the copy length.
   `height: auto` on .owl-item is required: owl writes an inline pixel height
   on the stage in some modes, which would otherwise cap the cards. */
.testimonials .owl-carousel .owl-stage {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.testimonials .owl-carousel .owl-item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	height: auto;
}

.testimonials .owl-carousel .owl-item .test-1 {
	width: 100%;
	height: auto;
}

/* Centre every element in the card on one axis, rather than relying on each
   child carrying its own text-align. */
.testimonials .owl-carousel .test-1 {
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	text-align: center;
}

.testimonials .test-1 p {
	width: 100%;
}