/* ----------------------------------------------------------------
	Tidal Precision — Abodee 2026 Brand Redesign
	Custom CSS overrides for the Canvas HTML5 template
-----------------------------------------------------------------*/

/* ============================================================================
   COLOR PALETTE — CSS Custom Properties
============================================================================ */

:root {
	--tidal-abyss:        #0B1621;
	--tidal-midnight:     #0F2133;
	--tidal-steel:        #1B3A54;
	--tidal-marine:       #2A5A7A;
	--tidal-cerulean:     #3D8EB9;
	--tidal-sky:          #6BB3D9;
	--tidal-amber:        #D4943A;
	--tidal-coast:        #2C5E45;
	--tidal-text-primary: #C8D6E0;
	--tidal-text-muted:   #7A9BB5;
	--tidal-text-whisper: #4A6B82;
	--tidal-surface:      #E8EEF2;
	--tidal-surface-alt:  #F2F6F8;
	--tidal-white:        #FAFCFD;
	--tidal-border:       rgba(59, 130, 180, 0.12);
}


/* ============================================================================
   TYPOGRAPHY — Global
============================================================================ */

body {
	font-family: 'Inter', sans-serif !important;
	font-weight: 300;
	font-size: 17px;
	line-height: 1.85;
	color: var(--tidal-steel);
	background-color: var(--tidal-abyss);
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'DM Sans', sans-serif !important;
}

/* Annotation / label class */
.tidal-eyebrow {
	font-family: 'JetBrains Mono', monospace !important;
	font-size: 10px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 5px;
	color: var(--tidal-text-whisper);
	display: block;
	margin-bottom: 16px;
}

.tidal-eyebrow::after {
	content: '';
	display: block;
	width: 40px;
	height: 1px;
	background: var(--tidal-text-whisper);
	margin-top: 16px;
}

.tidal-eyebrow.text-center::after {
	margin-left: auto;
	margin-right: auto;
}


/* ============================================================================
   HEADER / NAV
============================================================================ */

#header {
	--cnvs-primary-menu-font-weight: 400;
	--cnvs-primary-menu-font-size: 10px;
	--cnvs-primary-menu-tt: uppercase;
	--cnvs-primary-menu-ls: 3px;
}

/* Nav link font override */
.menu-link,
.menu-link div {
	font-family: 'JetBrains Mono', monospace !important;
	font-size: 10px !important;
	letter-spacing: 3px !important;
}

/* Transparent state (over hero) */
#header.transparent-header:not(.sticky-header) .menu-link {
	color: var(--tidal-text-muted) !important;
}

#header.transparent-header:not(.sticky-header) .menu-link:hover {
	color: var(--tidal-cerulean) !important;
}

/* Sticky header — stays dark */
#header.sticky-header #header-wrap {
	background-color: var(--tidal-abyss) !important;
	border-bottom: 1px solid var(--tidal-border) !important;
	box-shadow: none !important;
}

#header.sticky-header .menu-link {
	color: var(--tidal-text-muted) !important;
}

#header.sticky-header .menu-link:hover {
	color: var(--tidal-cerulean) !important;
}

/* Login button — styled as a bordered nav item */
.menu-item-login .menu-link {
	border: 1px solid var(--tidal-cerulean) !important;
	padding: 6px 16px !important;
	margin-left: 8px;
	transition: all 0.3s ease;
}

.menu-item-login .menu-link:hover {
	background-color: var(--tidal-cerulean) !important;
	color: var(--tidal-white) !important;
}

/* Side panel trigger */
.side-panel-trigger a {
	color: var(--tidal-text-muted) !important;
}

.side-panel-trigger a:hover {
	color: var(--tidal-cerulean) !important;
}


/* ============================================================================
   HERO / SLIDER
============================================================================ */

/* Overlay gradient: abyss at bottom → transparent at ~40% */
#slider .video-overlay {
	background: linear-gradient(
		to top,
		var(--tidal-abyss) 0%,
		rgba(11, 22, 33, 0.85) 25%,
		rgba(11, 22, 33, 0.4) 50%,
		transparent 70%
	) !important;
}

/* Typewriter text */
.emphasis-title h1 {
	font-family: 'DM Sans', sans-serif !important;
	font-weight: 300 !important;
	color: var(--tidal-white) !important;
}

.opm-large-word {
	font-family: 'DM Sans', sans-serif !important;
	font-weight: 300 !important;
}

/* Typed cursor → amber */
.typed-cursor {
	color: var(--tidal-amber) !important;
}

/* Hero CTA — replace circle button with minimal text link */
#slider .button.button-border.button-light.button-circle {
	display: none !important;
}

/* New hero CTA: minimal text */
.tidal-hero-cta {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 3px;
	color: var(--tidal-text-muted);
	text-decoration: none;
	transition: color 0.3s ease;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.tidal-hero-cta:hover {
	color: var(--tidal-cerulean);
}

.tidal-hero-cta i {
	font-size: 14px;
}

/* One-page arrow */
.one-page-arrow {
	color: var(--tidal-text-muted) !important;
}

.one-page-arrow:hover {
	color: var(--tidal-cerulean) !important;
}


/* ============================================================================
   ABOUT SECTION (#section-about)
============================================================================ */

#section-about {
	background-color: var(--tidal-surface-alt) !important;
	padding: 120px 0;
}

#section-about h2 {
	font-family: 'DM Sans', sans-serif !important;
	font-weight: 700 !important;
	font-size: 44px !important;
	color: var(--tidal-midnight) !important;
	letter-spacing: 0 !important;
}

#section-about p.lead {
	font-family: 'Inter', sans-serif !important;
	font-weight: 300 !important;
	font-size: 17px !important;
	line-height: 1.85 !important;
	color: var(--tidal-steel) !important;
	max-width: 740px !important;
}

#section-about a {
	color: var(--tidal-cerulean);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s ease;
}

#section-about a:hover {
	color: var(--tidal-sky);
	border-bottom-color: var(--tidal-sky);
}


/* ============================================================================
   VISION SECTION (#section-vision)
============================================================================ */

#section-vision {
	background-color: var(--tidal-midnight) !important;
}

/* Image overlay */
#section-vision .col-lg-6:first-child .bg-overlay-dark,
#section-vision .col-lg-6:first-child > div {
	background: linear-gradient(135deg, rgba(15, 33, 51, 0.6) 0%, rgba(15, 33, 51, 0.8) 100%) !important;
}

/* Content column */
#section-vision .col-lg-6:last-child {
	background-color: var(--tidal-midnight) !important;
}

#section-vision .col-lg-6:last-child .col-padding {
	color: var(--tidal-text-primary);
}

#section-vision span.text-uppercase {
	font-family: 'JetBrains Mono', monospace !important;
	font-size: 10px !important;
	letter-spacing: 5px !important;
	color: var(--tidal-text-whisper) !important;
}

#section-vision h2 {
	font-family: 'DM Sans', sans-serif !important;
	font-weight: 700 !important;
	color: var(--tidal-white) !important;
}

#section-vision .lead {
	color: var(--tidal-text-muted) !important;
}

#section-vision p {
	color: var(--tidal-text-primary) !important;
}

/* Three feature icons row with dividers */
#section-vision .row.mt-5 .col-sm-4 {
	position: relative;
}

#section-vision .row.mt-5 .col-sm-4:not(:last-child)::after {
	content: '';
	position: absolute;
	right: 0;
	top: 15%;
	height: 70%;
	width: 1px;
	background: var(--tidal-border);
}

#section-vision .row.mt-5 i {
	color: var(--tidal-marine) !important;
}

#section-vision .row.mt-5 h6 {
	font-family: 'JetBrains Mono', monospace !important;
	font-size: 11px !important;
	letter-spacing: 2px !important;
	text-transform: uppercase;
	color: var(--tidal-text-primary) !important;
}

/* Interstitial quote section after vision */
#section-vision + .section {
	background-color: var(--tidal-steel) !important;
}

#section-vision + .section h2 {
	color: var(--tidal-text-primary) !important;
	font-family: 'DM Sans', sans-serif !important;
	font-weight: 300 !important;
}


/* ============================================================================
   QUALITY SECTION (#section-quality)
============================================================================ */

#section-quality {
	background-color: var(--tidal-abyss) !important;
	padding: 120px 0 !important;
}

#section-quality span.text-uppercase {
	font-family: 'JetBrains Mono', monospace !important;
	font-size: 10px !important;
	letter-spacing: 5px !important;
	color: var(--tidal-text-whisper) !important;
}

#section-quality h2 {
	font-family: 'DM Sans', sans-serif !important;
	font-weight: 700 !important;
	color: var(--tidal-white) !important;
}

#section-quality .lead {
	color: var(--tidal-text-muted) !important;
}

#section-quality p {
	color: var(--tidal-text-primary) !important;
}

/* Four feature boxes — sharp rectangles */
#section-quality .p-4[style*="border"] {
	border: 1px solid var(--tidal-border) !important;
	border-radius: 0 !important;
	transition: border-color 0.3s ease;
	background: transparent;
}

#section-quality .p-4[style*="border"]:hover {
	border-color: var(--tidal-cerulean) !important;
}

#section-quality .p-4 i {
	color: var(--tidal-marine) !important;
}

#section-quality .p-4 h6 {
	color: var(--tidal-white) !important;
	font-family: 'JetBrains Mono', monospace !important;
	font-size: 11px !important;
	letter-spacing: 1px !important;
}

#section-quality .p-4 small {
	color: var(--tidal-text-muted) !important;
}

/* Property image */
#section-quality .position-relative[style*="border-radius"] {
	border-radius: 0 !important;
}

/* Interstitial quote after quality */
#section-quality + .section.dark {
	background-color: var(--tidal-midnight) !important;
}

#section-quality + .section.dark h2 {
	color: var(--tidal-text-primary) !important;
	font-family: 'DM Sans', sans-serif !important;
	font-weight: 300 !important;
}


/* ============================================================================
   VALUE SECTION (#section-value)
============================================================================ */

#section-value {
	background-color: var(--tidal-surface-alt) !important;
	padding: 120px 0 !important;
}

#section-value span.text-uppercase {
	font-family: 'JetBrains Mono', monospace !important;
	font-size: 10px !important;
	letter-spacing: 5px !important;
	color: var(--tidal-text-whisper) !important;
}

#section-value h2 {
	font-family: 'DM Sans', sans-serif !important;
	font-weight: 700 !important;
	color: var(--tidal-midnight) !important;
}

#section-value .lead {
	color: var(--tidal-steel) !important;
}

#section-value p {
	color: var(--tidal-steel) !important;
}

/* Highlight box — amber left border */
#section-value .p-4[style*="border-left"] {
	background-color: var(--tidal-white) !important;
	border-left: 4px solid var(--tidal-amber) !important;
	border-radius: 0 !important;
}

#section-value .p-4[style*="border-left"] p {
	font-style: italic;
	color: var(--tidal-steel) !important;
}

/* Stats overlay */
#section-value .position-absolute[style*="background: #333"] {
	background: var(--tidal-midnight) !important;
	border-radius: 0 !important;
}

#section-value .position-absolute[style*="background: #333"] p {
	color: var(--tidal-white) !important;
}

/* Value chain icons */
#section-value .icon-et-tools-2,
#section-value .icon-et-happy,
#section-value .icon-et-bargraph {
	color: var(--tidal-marine) !important;
}

#section-value .fw-semibold[style*="font-size: 14px"] {
	font-family: 'JetBrains Mono', monospace !important;
	font-size: 11px !important;
	letter-spacing: 1px !important;
	color: var(--tidal-steel) !important;
}

/* Image rounded corners → sharp */
#section-value img[style*="border-radius"] {
	border-radius: 0 !important;
}


/* ============================================================================
   RENTAL APPLICATION CTA
============================================================================ */

#section-works + .section.dark,
.section.dark:has(.button-large) {
	background-color: var(--tidal-midnight) !important;
}

/* "Apply Now" — THE primary amber CTA */
.section.dark .button.button-border.button-light.button-large,
#section-works + .section.dark .button {
	font-family: 'JetBrains Mono', monospace !important;
	font-size: 11px !important;
	letter-spacing: 3px !important;
	text-transform: uppercase;
	border-color: var(--tidal-amber) !important;
	color: var(--tidal-amber) !important;
	background: transparent !important;
	border-radius: 0 !important;
	transition: all 0.3s ease;
}

.section.dark .button.button-border.button-light.button-large:hover,
#section-works + .section.dark .button:hover {
	background-color: var(--tidal-amber) !important;
	color: var(--tidal-abyss) !important;
}

/* CTA section heading */
.section.dark h2.fw-light {
	font-family: 'DM Sans', sans-serif !important;
	color: var(--tidal-text-primary) !important;
}


/* ============================================================================
   PARALLAX / TESTIMONIAL SECTION
============================================================================ */

.parallax.scroll-detect {
	background-color: var(--tidal-abyss);
}

.parallax .testimonial .testi-content p,
.parallax .fslider p {
	font-family: 'DM Sans', sans-serif !important;
	color: var(--tidal-text-primary) !important;
}


/* ============================================================================
   CONTACT SECTION (#section-contact)
============================================================================ */

#section-contact {
	background-color: var(--tidal-surface-alt);
}

/* Address panel */
#section-contact .bg-contrast-100,
#section-contact .col-lg-4.col-md-6 {
	background-color: var(--tidal-midnight) !important;
	color: var(--tidal-text-primary) !important;
}

#section-contact h3 {
	font-family: 'DM Sans', sans-serif !important;
	color: var(--tidal-white) !important;
}

#section-contact address,
#section-contact div[style*="font-size: 16px"] {
	color: var(--tidal-text-primary) !important;
}

#section-contact address strong,
#section-contact abbr + strong,
#section-contact strong {
	color: var(--tidal-white) !important;
}

#section-contact abbr {
	font-family: 'JetBrains Mono', monospace !important;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--tidal-text-whisper) !important;
}

#section-contact a {
	color: var(--tidal-cerulean) !important;
}

#section-contact a:hover {
	color: var(--tidal-sky) !important;
}


/* ============================================================================
   FOOTER
============================================================================ */

#footer {
	background-color: var(--tidal-abyss) !important;
	border-top: 1px solid var(--tidal-border) !important;
}

#footer .widget h4 {
	font-family: 'JetBrains Mono', monospace !important;
	font-size: 10px !important;
	font-weight: 400 !important;
	text-transform: uppercase !important;
	letter-spacing: 4px !important;
	color: var(--tidal-text-whisper) !important;
}

#footer .widget ul.footer-site-links li {
	font-family: 'Inter', sans-serif;
	font-weight: 300;
	font-size: 15px;
	letter-spacing: 0;
}

#footer .widget ul.footer-site-links li a {
	color: var(--tidal-text-muted) !important;
	transition: color 0.3s ease;
}

#footer .widget ul.footer-site-links li a:hover {
	color: var(--tidal-cerulean) !important;
}

#footer .widget p.lead {
	font-family: 'Inter', sans-serif;
	font-weight: 300;
	font-size: 15px;
	color: var(--tidal-text-muted) !important;
}

/* Footer middle column — logo + descriptor */
#footer .col-lg-4:nth-child(2) .widget {
	padding-top: 30px;
}

#footer .tidal-footer-logo {
	max-height: 36px;
	opacity: 0.7;
	margin-bottom: 16px;
}

#footer .tidal-footer-desc {
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 300;
	color: var(--tidal-text-whisper);
	letter-spacing: 0.5px;
}

#copyrights {
	background-color: var(--tidal-abyss) !important;
	border-top: 1px solid var(--tidal-border);
	font-family: 'JetBrains Mono', monospace;
	font-size: 10px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--tidal-text-whisper) !important;
}


/* ============================================================================
   SIDE PANEL
============================================================================ */

#side-panel {
	background-color: var(--tidal-midnight) !important;
}

#side-panel .widget h4 {
	font-family: 'JetBrains Mono', monospace !important;
	font-size: 10px !important;
	text-transform: uppercase;
	letter-spacing: 4px;
	color: var(--tidal-text-whisper) !important;
}

#side-panel .widget div {
	color: var(--tidal-text-primary);
}

#side-panel a {
	color: var(--tidal-cerulean) !important;
}

#side-panel a:hover {
	color: var(--tidal-sky) !important;
}

#side-panel-trigger-close a {
	color: var(--tidal-text-muted) !important;
}


/* ============================================================================
   ERROR PAGES (403, 404, 500)
============================================================================ */

/* Hero overlay on error pages */
.error404-wrap {
	position: relative;
}

.error404-wrap::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		var(--tidal-abyss) 0%,
		rgba(11, 22, 33, 0.85) 30%,
		rgba(11, 22, 33, 0.5) 60%,
		transparent 100%
	);
	z-index: 1;
	pointer-events: none;
}

.error404-wrap .slider-inner {
	position: relative;
	z-index: 2;
}

/* Error code number — massive scale, amber */
.error404 {
	font-family: 'DM Sans', sans-serif !important;
	font-weight: 300 !important;
	color: var(--tidal-amber) !important;
	font-size: 180px !important;
	line-height: 1 !important;
	letter-spacing: -5px;
	margin-bottom: 20px;
}

/* Error message */
.error404-wrap .heading-block h4 {
	font-family: 'Inter', sans-serif !important;
	font-weight: 300 !important;
	color: var(--tidal-text-primary) !important;
	font-size: 22px;
	letter-spacing: 0;
}

.error404-wrap .heading-block span {
	font-family: 'Inter', sans-serif !important;
	font-weight: 300;
	color: var(--tidal-text-muted) !important;
}

/* Error page buttons */
.error404-wrap .button.button-border.button-light {
	font-family: 'JetBrains Mono', monospace !important;
	font-size: 11px !important;
	letter-spacing: 3px !important;
	text-transform: uppercase;
	border-color: var(--tidal-cerulean) !important;
	color: var(--tidal-cerulean) !important;
	background: transparent !important;
	border-radius: 0 !important;
	transition: all 0.3s ease;
}

.error404-wrap .button.button-border.button-light:hover {
	background-color: var(--tidal-cerulean) !important;
	color: var(--tidal-white) !important;
}


/* ============================================================================
   MAINTENANCE PAGE
============================================================================ */

.maintenance-wrap .heading-block h2 {
	font-family: 'DM Sans', sans-serif !important;
	font-weight: 300 !important;
	color: var(--tidal-white) !important;
}

.maintenance-wrap .heading-block .lead {
	font-family: 'Inter', sans-serif !important;
	font-weight: 300 !important;
	color: var(--tidal-text-primary) !important;
}

.maintenance-wrap .button.button-border.button-light {
	font-family: 'JetBrains Mono', monospace !important;
	font-size: 11px !important;
	letter-spacing: 3px !important;
	border-color: var(--tidal-cerulean) !important;
	color: var(--tidal-cerulean) !important;
	border-radius: 0 !important;
}


/* ============================================================================
   GLOBAL OVERRIDES — Buttons, Links, Misc
============================================================================ */

/* Override Canvas theme button defaults */
.button.button-border {
	font-family: 'JetBrains Mono', monospace !important;
	font-weight: 400;
	letter-spacing: 3px;
	font-size: 11px;
	border-radius: 0 !important;
}

.button.button-border.button-light {
	border-color: var(--tidal-text-muted);
	color: var(--tidal-text-muted);
}

.button.button-border.button-light:hover {
	background-color: var(--tidal-cerulean);
	border-color: var(--tidal-cerulean);
	color: var(--tidal-white);
	text-shadow: none;
}

/* Generic dark section backgrounds */
.dark,
.section.dark {
	background-color: var(--tidal-midnight);
}

/* Heading block overrides */
.heading-block h2 {
	font-family: 'DM Sans', sans-serif !important;
}

/* Go to top button */
#gotoTop {
	background-color: var(--tidal-steel) !important;
	color: var(--tidal-white) !important;
	border-radius: 0 !important;
}

#gotoTop:hover {
	background-color: var(--tidal-cerulean) !important;
}

/* Page sections base padding */
.page-section {
	padding: 120px 0;
}


/* ============================================================================
   RESPONSIVE
============================================================================ */

@media (max-width: 991px) {

	/* Mobile header — dark background */
	#header.transparent-header:not(.sticky-header) #header-wrap {
		background-color: var(--tidal-abyss) !important;
		border-bottom: 1px solid var(--tidal-border) !important;
	}

	#header.transparent-header.dark:not(.sticky-header) #header-wrap {
		background-color: var(--tidal-abyss) !important;
		border-bottom-color: var(--tidal-border) !important;
	}

	.dark #header.transparent-header #header-wrap,
	.dark #header.semi-transparent #header-wrap,
	#header.dark.transparent-header #header-wrap,
	#header.dark.semi-transparent #header-wrap {
		background-color: var(--tidal-abyss) !important;
		border-bottom-color: var(--tidal-border) !important;
	}

	/* Mobile nav menu background */
	.primary-menu .menu-container {
		background-color: var(--tidal-abyss) !important;
	}

	/* Typography scaling */
	#section-about h2 {
		font-size: 32px !important;
	}

	#section-vision h2,
	#section-quality h2,
	#section-value h2 {
		font-size: 28px !important;
	}

	.error404 {
		font-size: 120px !important;
	}

	/* Split section stacking */
	#section-vision .col-lg-6:first-child {
		min-height: 300px !important;
	}

	/* Vision feature dividers — hide on mobile */
	#section-vision .row.mt-5 .col-sm-4::after {
		display: none;
	}

	/* Value chain — stack vertically */
	#section-value .bi-arrow-right {
		display: none !important;
	}
}

@media (max-width: 767px) {

	.opm-large-word {
		font-size: 48px !important;
	}

	#section-about h2 {
		font-size: 28px !important;
	}

	.page-section {
		padding: 80px 0;
	}

	.error404 {
		font-size: 90px !important;
	}
}

@media (max-width: 575px) {

	.opm-large-word {
		font-size: 36px !important;
	}

	#section-about p.lead {
		font-size: 15px !important;
	}
}