/* ==========================================================================
   GVL Website Refresh — Greater Vancouver Laundry & Linen Service
   Design tokens, modernized sections, CTA bands, popup form, animations.
   ========================================================================== */

:root {
	--gvl-navy: #14007d;
	--gvl-navy-dark: #0e0059;
	--gvl-accent: #736996;
	--gvl-ink: #2b2b33;
	--gvl-grey: #f4f4f7;
	--gvl-white: #ffffff;
	--gvl-radius: 3px;
	--gvl-shadow: 0 2px 14px rgba(20, 0, 125, 0.10);
	--gvl-shadow-hover: 0 10px 28px rgba(20, 0, 125, 0.18);
	--gvl-transition: 0.25s ease;
}

/* --------------------------------------------------------------------------
   Scroll-reveal animation system (opt-in via .gvl-reveal)
   -------------------------------------------------------------------------- */

.gvl-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.gvl-reveal.gvl-in {
	opacity: 1;
	transform: none;
}

.gvl-reveal-2 { transition-delay: 0.12s; }
.gvl-reveal-3 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
	.gvl-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.gvl-hero {
	position: relative;
	background-size: cover !important;
	background-position: center center !important;
}

.gvl-hero .fusion-button { margin: 0 14px 12px 0; }

/* Place the hero buttons side by side (each is wrapped in a plain div by Avada). */
.gvl-hero .fusion-column-wrapper > div:not(.fusion-text) {
	display: inline-block;
	vertical-align: middle;
}

@media (max-width: 800px) {
	.gvl-hero { padding-top: 70px !important; padding-bottom: 70px !important; }
}

.gvl-hero .gvl-hero-kicker {
	color: #cfd3ff;
	font-size: 15px;
	letter-spacing: 3px;
	text-transform: uppercase;
	font-weight: 600;
	margin: 0 0 14px;
}

.gvl-hero h1,
#main .fusion-fullwidth.gvl-hero h1,
.fusion-body #main .gvl-hero h1 {
	color: var(--gvl-white) !important;
	font-size: 52px;
	line-height: 1.12;
	margin: 0 0 18px;
}

.gvl-hero .gvl-hero-sub {
	color: rgba(255, 255, 255, 0.92);
	font-size: 20px;
	line-height: 1.55;
	max-width: 640px;
	margin: 0 0 30px;
}

@media (max-width: 800px) {
	.gvl-hero h1 { font-size: 34px; }
	.gvl-hero .gvl-hero-sub { font-size: 17px; }
}

/* --------------------------------------------------------------------------
   Buttons (refined, square-ish corners, no loud gradients)
   -------------------------------------------------------------------------- */

.gvl-btn .fusion-button,
.fusion-button.gvl-btn {
	border-radius: var(--gvl-radius) !important;
	letter-spacing: 0.5px;
	transition: transform var(--gvl-transition), box-shadow var(--gvl-transition),
		background-color var(--gvl-transition), color var(--gvl-transition);
}

.gvl-btn .fusion-button:hover,
.fusion-button.gvl-btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--gvl-shadow-hover);
}

/* Brand the default (theme green) buttons navy. */
.fusion-button.gvl-btn.button-default {
	background: var(--gvl-navy) !important;
	color: #fff !important;
	border-color: var(--gvl-navy) !important;
}

.fusion-button.gvl-btn.button-default:hover {
	background: var(--gvl-navy-dark) !important;
	color: #fff !important;
}

.fusion-button.gvl-btn.button-default .fusion-button-text {
	color: #fff !important;
}

/* Hero secondary (phone) button: white outline ghost style. */
.gvl-hero .fusion-button.button-custom {
	background: transparent !important;
	border: 2px solid #ffffff !important;
	color: #fff !important;
}

.gvl-hero .fusion-button.button-custom .fusion-button-text { color: #fff !important; }

.gvl-hero .fusion-button.button-custom:hover {
	background: #ffffff !important;
}

.gvl-hero .fusion-button.button-custom:hover .fusion-button-text { color: var(--gvl-navy) !important; }

/* Place hero buttons side by side. */
.gvl-hero .fusion-column-wrapper > div:has(> .fusion-button) { display: inline-block; }
.gvl-hero .fusion-column-wrapper { display: block !important; }

/* --------------------------------------------------------------------------
   Section headings rhythm
   -------------------------------------------------------------------------- */

.gvl-section-title h2 {
	position: relative;
	padding-bottom: 16px;
	margin-bottom: 10px;
}

.gvl-section-title h2::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 56px;
	height: 3px;
	margin-left: -28px;
	background: var(--gvl-navy);
}

.gvl-on-dark .gvl-section-title h2::after { background: #ffffff; }

/* --------------------------------------------------------------------------
   Services grid cards
   -------------------------------------------------------------------------- */

.gvl-service-card {
	position: relative;
	overflow: hidden;
	border-radius: var(--gvl-radius);
	box-shadow: var(--gvl-shadow);
	transition: transform var(--gvl-transition), box-shadow var(--gvl-transition);
}

.gvl-service-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--gvl-shadow-hover);
}

.gvl-service-card,
.gvl-service-card .fusion-column-wrapper {
	background-size: cover !important;
	background-position: center center !important;
}

.gvl-service-card .fusion-column-wrapper { min-height: 320px; }

.gvl-service-card a { text-decoration: none; }

.gvl-service-card .gvl-card-icon img {
	width: 58px;
	height: 58px;
	transition: transform var(--gvl-transition);
}

.gvl-service-card:hover .gvl-card-icon img { transform: scale(1.1); }

.gvl-service-card h3 {
	color: #fff;
	font-size: 21px;
	letter-spacing: 0.5px;
	margin: 14px 0 8px;
}

.gvl-service-card p {
	color: rgba(255, 255, 255, 0.88);
	font-size: 15px;
	line-height: 1.55;
	margin: 0;
}

.gvl-service-card .gvl-card-more {
	display: inline-block;
	margin-top: 14px;
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	border-bottom: 2px solid rgba(255, 255, 255, 0.5);
	padding-bottom: 2px;
	transition: border-color var(--gvl-transition);
}

.gvl-service-card:hover .gvl-card-more { border-color: #fff; }

/* --------------------------------------------------------------------------
   Advantages (3-up icon columns)
   -------------------------------------------------------------------------- */

.gvl-advantage {
	background: var(--gvl-white);
	border: 1px solid #e7e7ee;
	border-top: 3px solid var(--gvl-navy);
	border-radius: var(--gvl-radius);
	transition: box-shadow var(--gvl-transition), transform var(--gvl-transition);
}

.gvl-advantage:hover {
	box-shadow: var(--gvl-shadow-hover);
	transform: translateY(-3px);
}

.gvl-advantage .fusion-imageframe img {
	width: 64px;
	height: 64px;
}

.gvl-advantage h3 { font-size: 20px; }

.gvl-advantage ul {
	text-align: left;
	padding-left: 18px;
}

/* --------------------------------------------------------------------------
   CTA bands
   -------------------------------------------------------------------------- */

.gvl-cta-band {
	background-size: cover !important;
	background-position: center center !important;
}

.gvl-cta-band h2,
#main .fusion-fullwidth.gvl-cta-band h2,
.fusion-body #main .gvl-cta-band h2 {
	color: #fff !important;
	margin: 0 0 8px;
}

.gvl-cta-band p,
.gvl-cta-band p span {
	color: rgba(255, 255, 255, 0.92) !important;
	font-size: 17px;
}

.gvl-cta-band p { margin: 0 0 22px; }

.gvl-cta-band a:not(.fusion-button) {
	color: #fff !important;
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Checklist styling polish
   -------------------------------------------------------------------------- */

.gvl-checklist .fusion-li-item {
	transition: transform var(--gvl-transition);
}

.gvl-checklist .fusion-li-item:hover { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Popup modal
   -------------------------------------------------------------------------- */

.gvl-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
}

.gvl-modal.gvl-open { display: block; }

.gvl-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(14, 0, 89, 0.72);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.gvl-modal.gvl-open .gvl-modal__overlay { opacity: 1; }

.gvl-modal__dialog {
	position: relative;
	max-width: 560px;
	margin: 6vh auto 0;
	max-height: 88vh;
	overflow-y: auto;
	background: var(--gvl-white);
	border-radius: var(--gvl-radius);
	border-top: 4px solid var(--gvl-navy);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
	padding: 34px 38px 30px;
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.gvl-modal.gvl-open .gvl-modal__dialog {
	opacity: 1;
	transform: none;
}

.gvl-modal__close {
	position: absolute;
	top: 12px;
	right: 14px;
	background: none;
	border: 0;
	font-size: 20px;
	line-height: 1;
	color: var(--gvl-ink);
	cursor: pointer;
	padding: 8px;
	transition: color var(--gvl-transition), transform var(--gvl-transition);
}

.gvl-modal__close:hover {
	color: var(--gvl-navy);
	transform: rotate(90deg);
}

.gvl-modal__title {
	color: var(--gvl-navy);
	font-size: 26px;
	margin: 0 0 6px;
}

.gvl-modal__subtitle {
	color: var(--gvl-ink);
	font-size: 15px;
	margin: 0 0 18px;
}

.gvl-modal .gform_wrapper label,
.gvl-modal .gform_wrapper legend,
.gvl-modal .gform_wrapper .gfield_label,
.gvl-modal .gform_wrapper .gform-field-label,
.gvl-modal .gform_wrapper .gfield_description {
	color: var(--gvl-ink) !important;
}

.gvl-modal .gform_wrapper .gfield_required {
	color: var(--gvl-accent) !important;
}

.gvl-modal .gform_wrapper input[type="text"],
.gvl-modal .gform_wrapper input[type="email"],
.gvl-modal .gform_wrapper input[type="tel"],
.gvl-modal .gform_wrapper textarea {
	border: 1px solid #d4d4de;
	border-radius: var(--gvl-radius);
	color: var(--gvl-ink);
}

.gvl-modal .gform_wrapper .gform_button {
	background-color: var(--gvl-navy) !important;
	border-radius: var(--gvl-radius);
	transition: background-color var(--gvl-transition);
}

.gvl-modal .gform_wrapper .gform_button:hover {
	background-color: var(--gvl-navy-dark) !important;
}

@media (max-width: 640px) {
	.gvl-modal__dialog {
		margin: 0;
		max-height: 100vh;
		height: 100%;
		max-width: none;
		padding: 28px 20px;
	}
}

body.gvl-modal-open { overflow: hidden; }