/*
Theme Name: Raven Flight
Theme URI: https://ravenmediaco.com
Author: Raven Media Co
Version: 1.5.22
Text Domain: raven-flight
*/

.grecaptcha-badge {
	visibility: hidden !important;
}

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

:root {
	/* These variables are set dynamically by PHP from database options */
	/* Default fallbacks are set in the PHP class-raven-tools-content.php */
}

/* 
 * Dark header theme class override
 * The dark-header class variables are also set by PHP
 * based on the dark theme color options in the database
 */
.dark-header {}

/* KEYFRAME ANIMATIONS */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes grow-shake {
    0%, 90%, 100% { transform: scale(1); }
    92% { transform: scale(1.2); }
    94% { transform: scale(1.2) rotate(-10deg); }
    96% { transform: scale(1.2) rotate(10deg); }
    98% { transform: scale(1.2) rotate(-10deg); }
    99% { transform: scale(1.2) rotate(10deg); }
}


@keyframes shimmer {
	0% { left: -75%; }
	100% { left: 125%; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounceIn {
  0% { transform: scale(0.3); }
  40% { transform: scale(1.1); }
  60% { transform: scale(0.9); }
  80% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

@keyframes menuFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes menuSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* BASE STYLES */
h1, h2, h3, h4 {
    font-family: var(--accent-font);
    letter-spacing: -.5px;
    text-transform: uppercase;
}

* {
	margin: 0;
	padding: 0;
}

svg {
  filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
}

body {
  	font-family: var(--main-font);
  	font-weight: 400;
  	font-size: 14px;
  	line-height: 18px;
	color: var(--neutral-color);
}

a:link, a:visited, a:active {
	color: var(--brand-color);
	font-weight: 700;
	transition: .25s;
}

a:hover {
	color: #010101;
}

/* Links in body copy are NORMAL weight.
   The global a:link rule above sets 700, which is right for nav and footer
   (they override it anyway) but wrong inside prose: every in-content link -
   the service links the hub page writes, the related-services mentions, links
   in FAQ answers - rendered bold and read like emphasis rather than a link.
   Scoped to <p> so nothing structural is affected. */
p a:link,
p a:visited,
p a:active,
p a:hover {
	font-weight: 400;
}

h1 { font-size: 36px; line-height: 36px; }
h2 { font-size: 34px; line-height: 34px; }
h3 { font-size: 32px; line-height: 32px; }
h4 { font-size: 30px; line-height: 30px; }
p { font-size: 16px; line-height: 24px; }
ul, ol { font-size: 16px; line-height: 24px; }

.icon {
	margin-right: 8px;
}

.ff-default .ff-el-form-control {
	border-radius: var(--border-radius) !important;
	font-weight: 500 !important;
}

.reveal-section {
  	opacity: 0;
  	transform: translateY(50px);
  	transition: all 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.reveal-section.revealed {
  	opacity: 1;
  	transform: translateY(0);
}

input::placeholder, textarea::placeholder {
  	font-family: var(--main-font);
	font-weight: 500;
}

img {
	border-radius: var(--border-radius);
}

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

.wp-block-image .alignright {
	margin-left: 4rem;
	margin-bottom: 2rem;
}

/* HEADER SECTION */
.header-container {
	position: fixed;
	width: 100%;
	z-index: 100;
	background-color: var(--header-bg-color);
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.interior-header {
	/* Soft, not a hairline. This was `0 1px 0` - a 1px offset with ZERO blur,
	   which does not read as a shadow at all, it renders as a drawn 1px rule
	   across the full width. Over a photo hero it looked like a stray border
	   under the header on load, and only "went away" on scroll because
	   .scrolled replaces it with a 20px-blur shadow. Blur it so both states are
	   the same kind of thing, just different depths. */
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.header-container.scrolled {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.header-container.scrolled .logo img {
	transition: height 0.3s ease;
	height: var(--logo-height-scrolled);
}

.header {
	width: var(--container-width);
	max-width: 90%;
	padding: 15px 0;
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header .logo {
	font-size: 26px;
	font-weight: 900;
	text-decoration: none;
	text-transform: uppercase;
	color: #fff;
}

.header .logo img {
	height: var(--logo-height-initial);
	transition: height 0.3s ease;
}

.inner .header .logo img {
	height: var(--logo-height-subheader);
}

/* Header CTA Button */
.header > .button {
	font-size: 15px;
	padding: 14px 28px;
	letter-spacing: 1px;
	flex-shrink: 0;
}

/* BUTTON STYLES - Consolidated */
.button {
	background: var(--highlight-color) !important;
	color: #fff !important;
	padding: 15px 25px;
	width: fit-content;
	border-radius: var(--border-radius) !important;
	text-decoration: none;
	display: flex;
	justify-content: center;
    font-size: 16px;
	line-height: 16px;
	text-transform: uppercase;
	transition: all .15s ease-in !important;
	text-align: center;
	box-shadow: 0 3px 6px 0 rgb(0 0 0 / 10%) !important;
	cursor: pointer;
	letter-spacing: 1px;
	font-weight: 700 !important;
	border: none !important;
	text-shadow: 2px 2px 1px rgba(0,0,0,0.12);
	font-family: var(--accent-font);
	position: relative;
	overflow: hidden;
}

/* Shimmer effect - single definition */
.button::before {
	content: '';
	position: absolute;
	top: 0;
	left: -75%;
	width: 50%;
	height: 100%;
	background: linear-gradient(
		120deg,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(255, 255, 255, 0.6) 50%,
		rgba(255, 255, 255, 0.2) 100%
	);
	transform: skewX(-20deg);
	pointer-events: none;
}

.button:hover::before {
	animation: shimmer 500ms forwards;
}

.button:hover {
	transform: translateY(-2.4px);
	background: var(--highlight-color) !important;
	opacity: 1 !important;
}

/* Mobile controls - phone icon + hamburger grouped together */
.mobile-controls {
	display: none;
}

.mobile-phone-icon {
	display: none;
}

/* MENUS */
.desktop-menu {
	margin: 0 30px 0 auto;
}

.menu-header-menu-container ul {
    display: flex;
    list-style: none;
}

.menu-header-menu-container ul li {
    margin-left: 28px;
    position: relative;
}

.menu-header-menu-container ul li a {
    color: var(--header-link-color);
    text-decoration: none;
    font-size: var(--nav-font-size, 12px);
    transition: color 0.25s ease;
    font-weight: var(--nav-font-weight, 600);
    text-transform: uppercase;
    font-family: var(--accent-font);
    display: block;
    padding: 10px 0;
    letter-spacing: 0.5px;
    position: relative;
}

/* Subtle underline hover for top-level links */
.menu-header-menu-container > ul > li > a::before {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--highlight-color);
    transition: width 0.3s ease;
}

.menu-header-menu-container > ul > li > a:hover::before {
    width: 100%;
}

/* Hide underline on dropdown parents - the chevron is enough */
.menu-header-menu-container > ul > li.menu-item-has-children > a::before {
    display: none;
}

.menu-header-menu-container ul li a:hover {
    color: var(--header-link-hover-color);
}

/* DROPDOWN MENU */
.menu-header-menu-container ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    box-shadow: 0 6px 15px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);
    /* Follows the site's radius setting like everything else. The hardcoded
       3px that used to sit on the first and last items was the odd one out:
       it rounded the hover chip inside an otherwise square panel. */
    border-radius: var(--border-radius);
    /* Fit the longest item rather than sit at a fixed 350px.
       The items are white-space: nowrap, so max-content is exactly the width of
       the longest one plus its padding. The old 350px floor meant a dropdown of
       short names ("Excavation", "All Services") rendered as a panel three times
       wider than its content. The floor stays, just small enough to only catch
       genuinely short menus. */
    width: max-content;
    min-width: 180px;
    max-width: min(420px, 90vw);
    z-index: 1000;
    overflow: hidden;
    will-change: transform, opacity;
}

.menu-header-menu-container ul li:hover > ul {
    display: block;
}

.menu-header-menu-container ul ul li {
    margin-left: 0;
    width: 100%;
}

.menu-header-menu-container ul ul li a {
    /* Left is deliberately 5px tighter than right - a symmetric 26/26 sat the
       text too far off the panel edge. Any change here must keep the :hover
       rule's two values summing to the same total, or the panel resizes under
       the cursor. */
    padding: 8px 26px 8px 21px;
    font-size: 12px;
    color: var(--brand-color) !important;
    font-weight: 500 !important;
    border-bottom: 1px solid rgba(231, 231, 231, 0.5);
    white-space: nowrap;
    transition: all 0.2s ease;
    position: relative;
    letter-spacing: 0;
}

.menu-header-menu-container ul ul li:first-child a {
    border-top: none;
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
}

.menu-header-menu-container ul ul li:last-child a {
    border-bottom: none;
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
}

.menu-header-menu-container ul ul li a:hover {
    background: var(--highlight-color);
    color: #fff !important;
    /* No padding change on hover, deliberately.
       This used to indent the text by bumping padding-left, which (a) made the
       item wider so the whole max-content panel resized under the cursor, and
       (b) left the hovered item with more padding on the left than the right,
       which reads wrong against the 21/26 base. The background highlight is
       enough on its own. */
}

.menu-header-menu-container ul li.menu-item-has-children > a {
    padding-right: 22px;
    position: relative;
}

.menu-header-menu-container ul li.menu-item-has-children > a::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.6;
}

.menu-header-menu-container ul li.menu-item-has-children:hover > a::after {
    transform: translateY(-50%) rotate(-180deg);
    opacity: 1;
}

/* HAMBURGER TOGGLE BUTTON */
.hamburger-toggle {
	display: none;
	padding: 10px;
	background: transparent;
	border: none;
	cursor: pointer;
	z-index: 100002;
}

.hamburger-box {
	width: 28px;
	height: 20px;
	display: inline-block;
	position: relative;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
	width: 28px;
	height: 3px;
	background-color: var(--header-link-color, #333);
	border-radius: 3px;
	position: absolute;
	transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.hamburger-inner {
	top: 50%;
	transform: translateY(-50%);
}

.hamburger-inner::before,
.hamburger-inner::after {
	content: '';
	display: block;
}

.hamburger-inner::before {
	top: -8px;
}

.hamburger-inner::after {
	bottom: -8px;
}

/* Hamburger active state - transforms to X */
.hamburger-toggle.active .hamburger-inner {
	background-color: transparent;
}

.hamburger-toggle.active .hamburger-inner::before {
	top: 0;
	transform: rotate(45deg);
}

.hamburger-toggle.active .hamburger-inner::after {
	bottom: 0;
	transform: rotate(-45deg);
}

/* Dark header - hamburger and X are white */
.dark-header .hamburger-inner,
.dark-header .hamburger-inner::before,
.dark-header .hamburger-inner::after {
	background-color: #fff;
}

.dark-header .hamburger-toggle.active .hamburger-inner {
	background-color: transparent;
}

.dark-header .hamburger-toggle.active .hamburger-inner::before,
.dark-header .hamburger-toggle.active .hamburger-inner::after {
	background-color: #fff;
}

/* FULLSCREEN MOBILE MENU OVERLAY */
.mobile-menu-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--neutral-color);
	z-index: 99;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s ease;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.mobile-menu-overlay.active {
	opacity: 1;
	visibility: visible;
}

.mobile-menu-content {
	display: flex;
	flex-direction: column;
	padding: 100px 30px 40px 30px;
	box-sizing: border-box;
}

.mobile-nav {
	display: flex;
	flex-direction: column;
}

.mobile-nav-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mobile-nav-list > li {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-menu-overlay.active .mobile-nav-list > li {
	opacity: 1;
	transform: translateY(0);
}

/* Staggered animation delays */
.mobile-menu-overlay.active .mobile-nav-list > li:nth-child(1) { transition-delay: 0.05s; }
.mobile-menu-overlay.active .mobile-nav-list > li:nth-child(2) { transition-delay: 0.1s; }
.mobile-menu-overlay.active .mobile-nav-list > li:nth-child(3) { transition-delay: 0.15s; }
.mobile-menu-overlay.active .mobile-nav-list > li:nth-child(4) { transition-delay: 0.2s; }
.mobile-menu-overlay.active .mobile-nav-list > li:nth-child(5) { transition-delay: 0.25s; }
.mobile-menu-overlay.active .mobile-nav-list > li:nth-child(6) { transition-delay: 0.3s; }
.mobile-menu-overlay.active .mobile-nav-list > li:nth-child(7) { transition-delay: 0.35s; }
.mobile-menu-overlay.active .mobile-nav-list > li:nth-child(8) { transition-delay: 0.4s; }

.mobile-nav-list > li > a {
	display: block;
	color: #fff !important;
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	padding: 18px 0;
	text-transform: uppercase;
	font-family: var(--accent-font);
	letter-spacing: 1px;
	position: relative;
	transition: color 0.3s ease;
}

.mobile-nav-list > li > a:hover {
	color: #fff !important;
}

/* Submenu accordion styles */
.mobile-nav-list > li.menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.mobile-nav-list > li.menu-item-has-children > a::after {
	content: '\f078';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	font-size: 16px;
	transition: transform 0.3s ease;
}

.mobile-nav-list > li.menu-item-has-children.submenu-open > a::after {
	transform: rotate(180deg);
}

/* Submenu styles */
.mobile-nav-list .sub-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
	background: rgba(0, 0, 0, 0.2);
	border-radius: var(--border-radius);
}

.mobile-nav-list > li.menu-item-has-children.submenu-open > .sub-menu {
	max-height: 1000px;
}

.mobile-nav-list .sub-menu li a {
	display: block;
	color: rgba(255, 255, 255, 0.85) !important;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	padding: 12px 20px;
	text-transform: uppercase;
	font-family: var(--accent-font);
	letter-spacing: 0.5px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	transition: background 0.3s ease, color 0.3s ease;
}

.mobile-nav-list .sub-menu li:last-child a {
	border-bottom: none;
}

.mobile-nav-list .sub-menu li a:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff !important;
}

/* HERO SECTION */
.hero-container {
	width: 100%;
	color: #fff;
	position: relative;
    background-size: 1800px;
	background-position: var(--background-position-desktop);
	background-attachment: fixed;
}

.hero-container::before {
	background: var(--brand-color);
	content: "";
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: var(--hero-overlay-opacity, 0.6);
}

.hero {
	width: var(--container-width);
	max-width: 90%;
	padding: 70px 0;
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
}

.hero h1 {
    font-size: 56px;
    line-height: 58px; 
    margin-bottom: 25px;
    font-weight: 900;
    text-shadow: 0 4px 20px rgba(0,0,0,0.3);
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

.hero h4 {
    font-size: 15px;
    /* Same zero-leading trap as the mobile rule; a long service area wraps here too. */
    line-height: 1.4;
    margin-bottom: 20px;
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
    text-transform: uppercase;
    letter-spacing: 3px;
    opacity: 0.9;
}

.hero h4::before {
    content: '\f3c5';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: 10px;
}

.hero p {
	font-size: 22px;
	line-height: 1.3;
	margin-bottom: 28px;
	text-shadow: 0 2px 10px rgba(0,0,0,0.2);
	color: #fff;
	opacity: 0.9;
}

/* theme-glide.css sets .hero p{line-height:1.8} and loads after this file, so
   the intro copy needs one more class to hold the tighter leading. Unitless and
   outside any media query, so it carries to mobile without being restated. */
.hero .hero-content p {
	line-height: 1.3;
}

.hero-content {
    width: 60%;
    margin-right: 5%;
    transition: transform 0.2s ease-out;
    will-change: transform;
}

.hero-content .button {
	font-size: 16px;
}

.hero-form {
    background: #fff;
    padding: 40px 35px;
	width: 35%;
    border-radius: var(--border-radius);
    transition: transform 0.3s ease-out;
    will-change: transform;
    box-shadow: 0 25px 60px rgba(0,0,0,0.2);
    position: relative;
}

.hero-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--highlight-color);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.hero-form h2 {
    font-size: 30px;
    line-height: 30px;
    margin-bottom: 8px;
    text-align: center;
    color: var(--neutral-color);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hero-form h2::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background: var(--highlight-color);
    margin: 15px auto 20px;
}

.hero-form .ff_submit_btn_wrapper {
	margin-bottom: 0 !important;
}

/* BENEFITS SECTION */
.benefits-container {
	width: 100%;
	background-color: #f8f8f8;
	position: relative;
}

.benefits {
	width: var(--container-width);
	padding: 95px 0;
	margin: auto;
	max-width: 90%;
	text-align: center;
}

.benefits h3 {
	margin-bottom: 25px;
	font-weight: 800;
}

.benefits > p {
	max-width: 850px;
	margin: 0 auto 60px auto;
	color: #666;
}

.benefits-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin: auto;
	width: 100%;
}

.benefits-box {
    opacity: 0;
    transform: translateY(25px);
    transition: all 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    background: #fff;
    border: 1px solid #e7e7e7;
    text-align: center;
    border-radius: var(--border-radius);
    padding: 35px 30px;
    position: relative;
    overflow: hidden;
}

.benefits-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--highlight-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.benefits-box:hover::before {
    transform: scaleX(1);
}

.benefits-box:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    border-color: #ddd;
}

.benefits-box.revealed {
    opacity: 1;
    transform: translateY(0);
    animation: none;
}

.benefits-box:nth-child(1) { transition-delay: 0s; }
.benefits-box:nth-child(2) { transition-delay: 0.12s; }
.benefits-box:nth-child(3) { transition-delay: 0.24s; }

.benefits-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand-color) 12%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px auto;
}

.benefits-box i {
	font-size: 34px;
	color: var(--brand-color);
    margin: 0;
    transition: all 0.3s ease;
}

.benefits-box:hover i {
    color: var(--highlight-color);
}

.benefits-box h4 {
    color: var(--neutral-color);
    border-bottom: none;
    padding: 0;
    margin: 0 0 12px;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    text-transform: none;
}

.benefits-box p {
	font-size: 15px;
	line-height: 22px;
	margin: 0;
	max-width: 100%;
	color: #666;
}

/* CTA BAR SECTION */
.ctabar-container {
	width: 100%;
	background-color: #000;
	position: relative;
	transform: none !important;
}

.ctabar-blog {
	background: #000 !important;
	border-top: none;
	border-bottom: 3px solid #333;
}

.ctabar-blog .ctabar {
	color: #fff;
}

.ctabar-blog .ctabar h3 {
	font-weight: 800;
}

.ctabar-blog .ctabar h3 i {
	color: var(--highlight-color);
}

.ctabar {
	width: var(--container-width);
    padding: 30px 0;
    margin: auto;
	max-width: 90%;
    display: flex;
    color: #fff;
    justify-content: space-between;
	align-items: center;
}

.ctabar h3 {
	margin: 0;
}

.ctabar h3 i {
	margin-right: 10px;
}

.cta-buttons {
	display: flex;
}

.cta-buttons a {
	margin-left: 12px;
}

/* PHOTOS SECTION */
.photos-container {
	width: 100%;
	background-color: #fff;
	position: relative;
	margin-top: 6px;
}

.photos {
	margin: 0;
}

.photos .wp-block-gallery {
	margin: 0;
}

.photos .wp-block-image,
.photos figure.wp-block-image {
	overflow: hidden;
}

.photos img {
	transition: transform 0.4s ease;
}

.photos img:hover {
	transform: scale(1.05);
}

/* TESTIMONIAL HIGHLIGHT BAR */
.testimonial-bar {
	width: 100%;
	background: #1a1a1a;
	position: relative;
	transform: none !important;
	overflow: hidden;
}

.testimonial-bar-inner {
	width: var(--container-width);
	max-width: 90%;
	padding: 45px 0;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 60px;
}

.testimonial-bar-content {
	flex: 1;
	min-width: 0;
}

.testimonial-bar-text {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	margin-bottom: 12px;
}

.testimonial-bar-icon {
	font-size: 24px;
	color: var(--highlight-color);
	flex-shrink: 0;
	margin-top: 2px;
}

.testimonial-bar p {
	font-size: 18px;
	line-height: 28px;
	color: rgba(255, 255, 255, 0.9);
	font-style: italic;
	margin: 0;
	font-weight: 400;
	letter-spacing: 0.3px;
}

.testimonial-bar-attribution {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-left: 35px;
}

.testimonial-bar-name {
	color: #fff;
	font-family: var(--accent-font);
	font-weight: 700;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
}

.testimonial-bar-stars {
	color: var(--highlight-color);
	font-size: 14px;
	display: flex;
	gap: 2px;
}

.testimonial-bar-cta {
	flex-shrink: 0;
}

.testimonial-bar-cta:hover {
	opacity: 1 !important;
}

/* REVIEW SECTION */
.review-container {
	width: 100%;
	position: relative;
	background: #fff;
}

.review-wrapper {
    margin: auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	position: relative;
}

.review {
	width: var(--container-width);
	padding: 95px 0;
	margin: auto;
	max-width: 90%;
	text-align: center;
}

.review h3 {
	margin-bottom: 40px;
	font-weight: 800;
}

.review-block {
    border-radius: var(--border-radius);
    background: #fff;
    padding: 35px 30px;
	border: 1px solid #e7e7e7;
	text-align: left;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
}

.review-block::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: var(--highlight-color);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s ease;
}

.review-block:hover::before {
	transform: scaleX(1);
}

.review-block:hover {
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
	border-color: #ddd;
}

.review-quote-icon {
	margin-bottom: 15px;
}

.review-quote-icon i {
	font-size: 28px;
	color: var(--highlight-color);
}

.review-block h4 {
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    margin: 0 0 10px;
	text-transform: none;
}

.review-block p {
	color: var(--neutral-color);
	max-width: 100%;
    font-size: 15px;
    line-height: 22px;
    margin: 0 0 25px 0;
	flex-grow: 1;
}

.review-footer {
	border-top: 1px solid #eee;
	padding-top: 20px;
}

.review-block .button {
	/* Was `margin: auto`, which both centred the button and left zero space
	   above it - so the CTA sat on the star rating and broke the card's left
	   edge. Everything else in the block is left aligned, so the button is too;
	   align-self stops the flex column from stretching it full width. */
	margin: 20px 0 0;
	align-self: flex-start;
}

.review-rating {
	margin-bottom: 0;
	font-size: 15px;
}

.review-rating .fa-star {
	color: #FFCB05;
}

.fa-google {
	margin-right: 7px;
	color: #4285F4;
}

/* SUBPAGE SECTION */
.sub-container {
	width: 100%;
	background-color: #fff;
	position: relative;
	padding: 0 0 70px 0;
  	opacity: 0;
  	animation: fadeInUp 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  	animation-delay: 0.3s;
}

.location-container {
	padding-top: 15px !important;
}

.sub {
	width: var(--container-width);
	max-width: 90%;
	padding: 50px 0 0 0;
	margin: auto;
}

.sub h1 {
    margin-bottom: 30px;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0;
    font-size: 30px;
    line-height: 32px;
}

.sub h2 {
    margin: 35px 0 15px 0;
    text-transform: none;
    font-size: 24px;
    line-height: 28px;
}

.sub h3 {
    margin: 35px 0 15px;
    text-transform: none;
    font-size: 22px;
    line-height: 26px;
}

.sub p {
	margin: 0 0 22px 0;
}

.sub .button {
	margin-top: 35px;
}

.sub ul, .sub ol {
	margin: 0 0 20px 20px;
}

.sub ul li, .sub ol li {
	margin: 0 0 15px 0;
}

.wp-block-image, .wp-block-gallery {
	margin: 25px 0 35px 0;
}

.sub-content .wp-block-gallery:first-child,
.sub .wp-block-gallery:first-child {
	margin-top: 0;
}

/* SIDEBAR LAYOUT */
.sub-layout {
	display: flex;
	gap: 60px;
	align-items: flex-start;
}

.sub-content {
	flex: 1;
	min-width: 0;
}

/* SIDEBAR COMPONENTS */
.service-sidebar {
	width: 320px;
	flex-shrink: 0;
	position: sticky;
	top: 100px;
	align-self: flex-start;
}

.sidebar-inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.sidebar-card {
	background: #fff;
	border-radius: var(--border-radius);
	padding: 28px;
	border: 1px solid #e7e7e7;
}

/* Trust Signals */
.sidebar-trust {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
}

.sidebar-trust-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 28px;
	font-size: 14px;
	font-weight: 400;
	color: var(--neutral-color);
	border-bottom: 1px solid #e7e7e7;
}

.sidebar-trust-item:last-child {
	border-bottom: none;
}

.sidebar-trust-item > i {
	font-size: 16px;
	color: var(--highlight-color);
	width: 20px;
	text-align: center;
	flex-shrink: 0;
}

.sidebar-trust-rated > i {
	width: auto;
	flex-shrink: unset;
}

/* Top Rated row - Google blue bg */
.sidebar-trust-rated {
	background: #4285F4;
	color: #fff;
	align-items: center;
	gap: 0 !important;
	padding: 18px 28px;
	border-radius: var(--border-radius) var(--border-radius) 0 0;
	font-size: 0;
	font-weight: 400;
}

.sidebar-trust-rated .fa-google {
	color: #fff;
	font-size: 16px;
	margin-right: 6px;
}

.sidebar-trust-rated .fa-star {
	color: #FFCB05;
	font-size: 14px;
}

.sidebar-trust-rated span {
	font-size: 12px;
	margin-left: 8px;
	letter-spacing: 0.5px;
}

/* Featured Testimonial */
.sidebar-testimonial-quote {
	margin-bottom: 12px;
}

.sidebar-testimonial-quote i {
	font-size: 22px;
	color: var(--highlight-color);
}

.sidebar-testimonial p {
	font-size: 14px;
	line-height: 22px;
	color: var(--neutral-color);
	font-style: italic;
	margin-bottom: 15px;
}

.sidebar-testimonial-attribution {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sidebar-testimonial-name {
	font-family: var(--accent-font);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--neutral-color);
}

.sidebar-testimonial-stars {
	color: #FFCB05;
	font-size: 13px;
}

.sidebar-testimonial-stars .fa-google {
	color: #4285F4;
	margin-right: 5px;
}

/* Sidebar CTA */
.sidebar-cta {
	width: 100%;
	justify-content: center;
	box-sizing: border-box;
	margin-top: 0 !important;
}

/* BLOG PAGES */
.main-image img {
	width: 100% !important;
	height: auto !important;
	margin-bottom: 20px;
	border-radius: 4px;
}

.pagination {
    margin-top: 50px;
    text-align: center;
}

.pagination .nav-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	font-size: 14px;
	font-weight: 700;
	font-family: var(--accent-font);
	text-decoration: none;
	border: 1px solid #e7e7e7;
	border-radius: var(--border-radius);
	color: var(--neutral-color);
	background: #fff;
	transition: all 0.2s ease;
	letter-spacing: 0.5px;
}

.pagination .page-numbers:hover {
	background: var(--highlight-color);
	border-color: var(--highlight-color);
	color: #fff;
}

.pagination .page-numbers.current {
	background: var(--highlight-color);
	border-color: var(--highlight-color);
	color: #fff;
	pointer-events: none;
}

.pagination .page-numbers.dots {
	border: none;
	background: transparent;
	min-width: 30px;
	padding: 0;
	pointer-events: none;
	color: #999;
}

.pagination .page-numbers.prev,
.pagination .page-numbers.next {
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 1px;
}

.pagination .page-numbers.prev:hover,
.pagination .page-numbers.next:hover {
	background: var(--neutral-color);
	border-color: var(--neutral-color);
	color: #fff;
}

.rrp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.rrp-post {
    text-align: center;
	border: 1px solid #e7e7e7;
    border-radius: 4px;
    padding: 15px;
}

.rrp-post img {
    width: 100%;
	border-radius: 4px;
	margin-bottom: 10px;
    height: auto;
}

.rrp-post h4 {
    font-size: 16px;
    line-height: 16px;
}

.rrp-post a {
	text-decoration: none;
}

/* BLOG INDEX - FEATURED + GRID LAYOUT */
.blog-featured-card {
	display: flex;
	text-decoration: none;
	border: 1px solid #e7e7e7;
	border-radius: var(--border-radius);
	overflow: hidden;
	margin-bottom: 40px;
	transition: all 0.3s ease;
	background: #fff;
}

.blog-featured-card:hover {
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
	border-color: #ddd;
}

.blog-featured-card-image {
	width: 50%;
	flex-shrink: 0;
	overflow: hidden;
}

.blog-featured-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0 !important;
	transition: transform 0.4s ease;
}

.blog-featured-card:hover .blog-featured-card-image img {
	transform: scale(1.03);
}

.blog-featured-card-content {
	padding: 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.blog-featured-card-content h2 {
	font-size: 28px;
	line-height: 32px;
	margin: 0 0 15px 0;
	color: var(--neutral-color);
	text-transform: uppercase;
	font-weight: 800;
	transition: color 0.2s ease;
}

.blog-featured-card:hover .blog-featured-card-content h2 {
	color: var(--brand-color);
}

.blog-featured-card-content p {
	font-size: 16px;
	line-height: 24px;
	color: #666;
	margin: 0 0 20px 0;
	font-weight: 400;
}

.blog-card-date {
	display: block;
	font-size: 12px;
	line-height: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--highlight-color);
	margin-bottom: 12px;
	font-family: var(--accent-font);
}

.blog-read-more {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--highlight-color);
	font-family: var(--accent-font);
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
}

.blog-read-more i {
	font-size: 12px;
	transition: transform 0.2s ease;
}

.blog-featured-card:hover .blog-read-more i,
.blog-index-card:hover .blog-read-more i {
	transform: translateX(4px);
}

/* Blog grid - remaining posts */
.blog-grid-index {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
}

.blog-index-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	border: 1px solid #e7e7e7;
	border-radius: var(--border-radius);
	overflow: hidden;
	transition: all 0.3s ease;
	background: #fff;
}

.blog-index-card:hover {
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
	border-color: #ddd;
}

.blog-index-card-image {
	width: 100%;
	height: 220px;
	overflow: hidden;
}

.blog-index-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0 !important;
	transition: transform 0.4s ease;
}

.blog-index-card:hover .blog-index-card-image img {
	transform: scale(1.03);
}

.blog-index-card-content {
	padding: 25px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.blog-index-card-content h3 {
	font-size: 20px;
	line-height: 24px;
	margin: 0 0 12px 0;
	color: var(--neutral-color);
	text-transform: uppercase;
	font-weight: 700;
	transition: color 0.2s ease;
}

.blog-index-card:hover .blog-index-card-content h3 {
	color: var(--brand-color);
}

.blog-index-card-content p {
	font-size: 15px;
	line-height: 22px;
	color: #666;
	margin: 0 0 20px 0;
	font-weight: 400;
}

/* HOMEPAGE BLOG SECTION */
.homepage-blog-container {
	width: 100%;
	background: #fff;
	position: relative;
}

.homepage-blog {
	width: var(--container-width);
	padding: 95px 0;
	margin: auto;
	max-width: 90%;
	text-align: center;
}

.homepage-blog h3 {
	margin-bottom: 50px;
	font-weight: 800;
}

.homepage-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	text-align: left;
}

.homepage-blog-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	border: 1px solid #e7e7e7;
	border-radius: var(--border-radius);
	overflow: hidden;
	transition: all 0.3s ease;
	background: #fff;
}

.homepage-blog-card:hover {
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
	border-color: #ddd;
}

.homepage-blog-card-image {
	width: 100%;
	height: 200px;
	overflow: hidden;
}

.homepage-blog-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0 !important;
	transition: transform 0.4s ease;
}

.homepage-blog-card:hover .homepage-blog-card-image img {
	transform: scale(1.03);
}

.homepage-blog-card-content {
	padding: 25px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.homepage-blog-card-content h4 {
	font-size: 18px;
	line-height: 22px;
	margin: 0 0 12px 0;
	color: var(--neutral-color);
	text-transform: none;
	font-weight: 700;
	transition: color 0.2s ease;
}

.homepage-blog-card:hover .homepage-blog-card-content h4 {
	color: var(--brand-color);
}

.homepage-blog-card-content p {
	font-size: 15px;
	line-height: 22px;
	color: #666;
	margin: 0 0 20px 0;
	font-weight: 400;
}

.homepage-blog-card:hover .blog-read-more i {
	transform: translateX(4px);
}

.homepage-blog-footer {
	margin-top: 45px;
}

.homepage-blog-footer .button {
	margin: auto;
}

/* SINGLE POST - TWO COLUMN LAYOUT */
.blog-layout {
	display: flex;
	gap: 60px;
	align-items: flex-start;
}

.blog-sidebar {
	width: 25%;
	min-width: 220px;
	flex-shrink: 0;
	position: sticky;
	top: 100px; /* Fallback - dynamically set by raven.js adjustPadding() */
	align-self: flex-start;
}

.blog-sidebar-inner {
	border: 1px solid #e7e7e7;
	border-radius: var(--border-radius);
	padding: 25px;
	background: #fff;
}

.blog-sidebar h4 {
	font-size: 14px;
	line-height: 14px;
	text-transform: uppercase;
	font-weight: 800;
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 2px solid #e7e7e7;
	letter-spacing: 0.5px;
}

.sidebar-posts {
	list-style: none;
	margin: 0 !important;
	padding: 0;
}

.sidebar-post-item {
	margin: 0 !important;
	padding: 0;
	border-bottom: 1px solid #e7e7e7;
}

.sidebar-post-item:last-child {
	border-bottom: none;
}

.sidebar-post-item a {
	display: block;
	padding: 12px 0;
	text-decoration: none;
	transition: all 0.2s ease;
	border-left: 3px solid transparent;
	padding-left: 10px;
	padding-right: 10px;
}

.sidebar-post-item a:hover {
	border-left-color: var(--highlight-color);
}

.sidebar-post-title {
	display: block;
	font-size: 14px;
	line-height: 19px;
	font-weight: 600;
	color: var(--neutral-color);
	transition: color 0.2s ease;
}

.sidebar-post-item a:hover .sidebar-post-title {
	color: var(--brand-color);
}

.sidebar-post-date {
	display: block;
	font-size: 12px;
	line-height: 12px;
	color: #999;
	margin-top: 4px;
	font-weight: 400;
}

.blog-main {
	flex: 1;
	min-width: 0;
}

.blog-main h1 {
	margin-bottom: 30px;
	text-transform: uppercase;
	font-weight: 800;
	letter-spacing: 0;
}

.blog-featured-image {
	margin-bottom: 30px;
}

.blog-featured-image img {
	width: 100%;
	max-height: 480px;
	object-fit: cover;
	height: auto;
	border-radius: var(--border-radius);
}

/* FOOTER SECTION */
.footer-container {
	width: 100%;
	position: relative;
	background: var(--neutral-color);
	transform: none !important;
}

.footer {
	width: var(--container-width);
    max-width: 90%;
    padding: 80px 0 40px;
    margin: auto;
	position: relative;
	color: rgba(255, 255, 255, 0.7);
}

.footer h4 {
	font-size: 14px;
	line-height: 18px;
	margin-bottom: 25px;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1.5px;
	color: #fff;
}

.footer-top {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 2fr;
	gap: 60px;
}

/* Landing pages have no Quick Links column, so their two blocks filled the
   first two tracks of this three-column grid - the description squeezed into a
   1fr column and running very tall, while the wide 2fr track sat empty. Keyed
   off the missing centre block so both landing templates get it without a
   markup change. */
.footer-top:not(:has(.footer-block-center)) {
	grid-template-columns: 1fr 3fr;
}

/* Same reason: with no .footer-bottom to add its 50px margin and 20px padding
   below the content, the 40px bottom padding above left the description
   sitting almost on the edge of the page. */
.footer:not(:has(.footer-bottom)) {
	padding-bottom: 90px;
}

.footer-block-left,
.footer-block-center,
.footer-block-right {
	min-width: 0;
}

/* Contact List - clean icon + text links */
.footer-contact-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-contact-list li {
	margin-bottom: 0;
}

.footer-contact-list li a {
	color: rgba(255, 255, 255, 0.7) !important;
	text-decoration: none;
	font-family: var(--accent-font);
	font-weight: 500 !important;
	font-size: 15px;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 0;
	transition: color 0.3s ease;
}

.footer-contact-list li a:hover {
	color: #fff !important;
}

.footer-contact-list li a i {
	font-size: 14px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	flex-shrink: 0;
	transition: background 0.3s ease;
}

.footer-contact-list li a:hover i {
	background: var(--highlight-color);
}

/* Quick Links */
.footer-quick-links .footer-nav-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-quick-links .footer-nav-list li {
	margin-bottom: 0;
}

.footer-quick-links .footer-nav-list li a {
	color: rgba(255, 255, 255, 0.7) !important;
	text-decoration: none;
	font-family: var(--accent-font);
	font-weight: 500 !important;
	font-size: 15px;
	transition: color 0.3s ease;
	display: block;
	padding: 8px 0;
}

.footer-quick-links .footer-nav-list li a:hover {
	color: #fff !important;
}

/* About Column */
.footer-block-right p {
	font-size: 15px !important;
	line-height: 24px !important;
	color: rgba(255, 255, 255, 0.55);
}

/* Service Area Links */
.footer-service a:link, .footer-service a:visited {
	color: #fff;
	text-decoration: none;
	background: var(--highlight-color);
    padding: 10px 18px;
    border-radius: var(--border-radius);
    margin-right: 4px;
    border: none;
    transition: all .15s ease-in;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: var(--accent-font);
    text-shadow: 2px 2px 1px rgba(0,0,0,0.12);
    box-shadow: 0 3px 6px 0 rgb(0 0 0 / 10%);
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.footer-service a::before {
	content: '';
	position: absolute;
	top: 0;
	left: -75%;
	width: 50%;
	height: 100%;
	background: linear-gradient(
		120deg,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(255, 255, 255, 0.6) 50%,
		rgba(255, 255, 255, 0.2) 100%
	);
	transform: skewX(-20deg);
	pointer-events: none;
}

.footer-service a:hover::before {
	animation: shimmer 500ms forwards;
}

.footer-service a:hover, .footer-service a:active {
	color: #fff;
	transform: translateY(-2px);
}

.footer-bottom a:link, .footer-bottom a:visited {
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
}

.footer-bottom a:hover, .footer-bottom a:active {
	color: var(--highlight-color);
}

/*
 * The "Serving ..." line sits between two rules, so its padding has to be
 * symmetrical. It only had padding-top: with no padding-bottom to contain it,
 * the h4's 25px bottom margin collapsed into .footer-bottom's 50px top margin
 * and the larger won, leaving 46px above the text and 50px below.
 *
 * Both margins are zeroed here so this block's own padding is the only thing
 * setting the gap. The sibling selector keeps .footer-bottom's margin intact
 * anywhere it is not preceded by this block.
 */
.footer-service {
	margin-top: 50px;
    padding: 45px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-service h4 {
	text-align: left;
	/* No margin-bottom here on purpose. `.footer h4` above already sets 25px,
	   which is the spacing every other footer heading uses, and this rule has
	   the same specificity - so overriding it just desynced the location
	   buttons from the rest of the footer. */
}

/* A lead-gen footer's service block is a single line with no menu under it,
   so the heading sits centred in the block rather than spaced off a list. */
.footer-service h4:only-child {
	margin-bottom: 0;
}

.footer-service + .footer-bottom {
	margin-top: 0;
}

.footer-service h4::before {
	content: '\f3c5';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	margin-right: 10px;
}

.footer-service p {
	margin-bottom: 10px;
}

.footer-service ul {
	display: flex;
	flex-wrap: wrap;
}

.footer-service ul li {
	display: flex;
	margin: 0 5px 5px 0;
}

.footer-service ul li a {
	font-weight: 600;
	font-size: 13px;
}

.footer-bottom {
	width: 100%;
    margin-top: 50px;
    padding-top: 20px;
   	border-top: 1px solid rgba(255, 255, 255, 0.1);
}


.footer-bottom ul {
	list-style: none;
	display: flex;
	justify-content: left;
	text-transform: uppercase;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
}

.footer-bottom ul li {
	margin-right: 10px;
}

address {
	font-style: normal;
}

/* LANDING PAGE */
.landing-phone-button {
	display: block !important;
}

/* Mobile visibility for this button is handled in the 1024px block further
   down, alongside the rest of the landing header. */

.landing-callouts {
	font-weight: 600;
}

/* DATA PINS SECTION */
.raven-pins-map-section {
	margin-bottom: 40px;
}

.raven-pins-map-controls {
	margin-bottom: 15px;
	display: flex;
	gap: 10px;
}

.raven-pins-map-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	font-size: 14px;
	line-height: 14px;
	font-weight: 700;
	font-family: var(--accent-font);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	border: 1px solid #e7e7e7;
	border-radius: var(--border-radius);
	color: var(--neutral-color);
	background: #fff;
	transition: all 0.2s ease;
	cursor: pointer;
}

.raven-pins-map-btn:hover {
	background: var(--highlight-color);
	border-color: var(--highlight-color);
	color: #fff;
}

.raven-pins-map-btn.active {
	background: var(--highlight-color);
	border-color: var(--highlight-color);
	color: #fff;
	pointer-events: none;
}

#raven-pins-aggregate-map {
	width: 100%;
	height: 400px;
	border-radius: var(--border-radius);
}

.raven-pins-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 25px;
}

.raven-pin-checkin {
	border: 1px solid #e7e7e7;
	border-radius: var(--border-radius);
	padding: 25px;
	background: #fff;
}

.raven-pin-user {
	font-weight: 700;
	margin-bottom: 5px;
	color: var(--brand-color);
	font-family: var(--accent-font);
	text-transform: uppercase;
	font-size: 14px;
}

.raven-pin-checkin time {
	color: var(--neutral-color);
	font-size: 13px;
	display: block;
	margin-bottom: 15px;
	opacity: 0.7;
}

.raven-pin-text {
	margin-bottom: 20px;
	line-height: 1.6;
}

.raven-pin-text-inner {
	color: var(--neutral-color);
	font-size: 16px;
}

.raven-pin-media-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.raven-pin-map-container,
.raven-pin-image-container {
	border-radius: var(--border-radius);
	overflow: hidden;
}

.raven-pin-map-image,
.raven-pin-image {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--border-radius);
}

.raven-pin-location {
	display: none;
}

/* CONSOLIDATED MEDIA QUERIES */

/* Tablet and below - 1024px */
@media screen and (max-width: 1024px) {
	/* Typography scaling */
	p { font-size: 15px; line-height: 22px; }
	ul, ol { font-size: 15px; line-height: 22px; }
	h1 { font-size: 28px; line-height: 30px; }
	h2 { font-size: 26px; line-height: 28px; }
	h3 { font-size: 24px; line-height: 26px; }
	h4 { font-size: 22px; line-height: 24px; }
	
	/* Menu adjustments */
	.menu-header-menu-container ul li a { font-size: 12px; }
	.menu-header-menu-container ul ul li a { font-size: 12px; padding: 8px 16px; }
	
	/* Mobile controls wrapper */
	.mobile-controls {
		display: flex;
		align-items: center;
		gap: 4px;
	}

	.mobile-phone-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		color: var(--header-link-color, #333);
		text-decoration: none;
		z-index: 100002;
	}

	.mobile-phone-icon i {
		font-size: 20px;
		animation: grow-shake 5s ease-in-out infinite;
	}
	
	/* Header adjustments */
	.header {
		padding: 14px 0;
		width: 95%;
	}
	
	.header .logo img {
		height: var(--logo-height-mobile) !important;
		margin-left: 10px;
	}
	
	.header-container.scrolled .logo img {
		transition: all 200ms;
		height: var(--logo-height-mobile);
	}
	
	.desktop-menu, .header .button {
		display: none;
	}

	/* ...except on a landing page. Hiding the header button is right on a normal
	   site because the burger menu takes over, but a landing header has no
	   burger, so this left the top right empty. Keyed off the missing
	   .desktop-menu so both landing templates get it, in a compact size that
	   fits beside the logo. */
	.landing-phone-button,
	.header:not(:has(.desktop-menu)) .button {
		display: inline-flex !important;
		align-items: center;
		gap: 7px;
		flex-shrink: 0;
		font-size: 13px;
		padding: 11px 16px;
		letter-spacing: 0.5px;
		margin-right: 10px;
	}

	/* The icon-only link was the stand-in for the hidden button; it is
	   redundant now the button itself is shown. */
	.landing-phone-button + .mobile-phone-icon {
		display: none;
	}
	
	/* Hero section scaling */
	.hero {
		padding: 90px 0;
		width: 100%;
		flex-direction: column;
	}
	
	.hero h1 { font-size: 30px; line-height: 32px; margin-bottom: 15px; }
	/* Scoped one level deeper (0,0,3) on purpose: the theme-*.css variations each
	   redefine .hero h4 (0,0,2) and load after this file, so a plain .hero h4 here
	   loses on source order - feather's 20px was overriding the mobile size while
	   this block's old line-height:13px still applied, stacking wrapped lines. */
	.hero .hero-content h4 { font-size: 11px; line-height: 1.5; letter-spacing: 2px; }
	.hero p { font-size: 18px; }
	.hero-form h2 { font-size: 26px; line-height: 26px; }
	
	.hero-content {
    	text-align: center;
		width: 80%;
		margin: 0;
	}
	
	.hero-content .button {
		display: none;
	}
	
	.hero-form {
		width: 80%;
		padding: 30px 25px;
	}
	
	/* Benefits section */
	.benefits {
		padding: 60px 0;
	}
	
	.benefits > p {
		margin: 0 auto 40px auto;
	}
	
	.benefits-row {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	
	.benefits-box {
		padding: 30px 25px;
	}
	
	.benefits-box h4 {
        font-size: 17px;
        line-height: 20px;
    }
    
    .benefits-box p {
        margin-bottom: 0;
    }
	
	/* CTA bar */
	.ctabar {
		justify-content: center;
	}
	
	.ctabar h3 {
		display: none;
	}
	
	.cta-buttons {
		display: flex;
		width: 90%;
		justify-content: space-evenly;
	}
	
	.cta-buttons a {
		margin: 0;
	}
	
	/* Testimonial Bar */
	.testimonial-bar-inner {
		flex-direction: column;
		text-align: center;
		padding: 30px 0;
		gap: 20px;
	}
	
	.testimonial-bar-text {
		justify-content: center;
	}
	
	.testimonial-bar-attribution {
		justify-content: center;
		padding-left: 0;
	}
	
	/* Review section */
	.review {
		padding: 60px 0;
	}
	
	.review-wrapper {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	
	.review-block {
		padding: 30px 25px;
	}
	
	.review-block h4 {
        font-size: 15px;
        line-height: 15px;
    }
	
	/* Sub pages */
	.sub {
		padding: 50px 0;
		max-width: 85%;
	}
	
	.sub-container {
		padding: 80px 0 30px 0;
	}
	
	.sub h1 {
		margin-bottom: 24px;
	}
	
	.sub h2 {
        font-size: calc(24px * 0.8);
        line-height: calc(28px * 0.8);
    }
    
    .sub h3 {
        font-size: calc(22px * 0.8);
        line-height: calc(26px * 0.8);
    }
	
	.location-container {
		padding-top: 15px !important;
	}
	
	/* Sidebar - stack below content on mobile */
	.sub-layout {
		flex-direction: column;
		gap: 40px;
	}
	
	.service-sidebar {
		width: 100%;
		position: static;
	}
	
	/* Footer */
	.footer {
		padding: 60px 0 100px 0;
	}
	
	/* .footer-top centres its text on mobile, but the phone button is a
	   block-level anchor, so it stayed left. */
	.footer-block-left .button {
		margin-left: auto;
		margin-right: auto;
	}

	.footer-top,
	.footer-top:not(:has(.footer-block-center)) {
		/* The :not(:has(...)) landing rule above is more specific than a bare
		   .footer-top, and a media query adds no specificity - so without
		   repeating the selector here the landing footer never stacked. */
		grid-template-columns: 1fr;
		gap: 40px;
		text-align: center;
	}

	/* The desktop rule below adds bottom padding where there is no
	   .footer-bottom; mobile already sets its own 100px, so match it. */
	.footer:not(:has(.footer-bottom)) {
		padding-bottom: 100px;
	}
	
	.footer-contact-list {
		display: flex;
		justify-content: center;
		gap: 12px;
	}
	
	.footer-contact-list li a {
		border-bottom: none;
		padding: 0;
		gap: 0;
	}
	
	.footer-contact-list li a span {
		display: none;
	}
	
	.footer-contact-list li a i {
		width: 44px;
		height: 44px;
		font-size: 16px;
		background: rgba(255, 255, 255, 0.1);
		border: 1px solid rgba(255, 255, 255, 0.15);
	}
	
	.footer-contact-list li a:hover i {
		background: var(--highlight-color);
		border-color: var(--highlight-color);
	}
	
	.footer-quick-links .footer-nav-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
		list-style: none;
	}
	
	.footer-quick-links .footer-nav-list li {
		margin-bottom: 0;
	}
	
	.footer-quick-links .footer-nav-list li a {
		background: rgba(255, 255, 255, 0.08);
		border: 1px solid rgba(255, 255, 255, 0.12);
		border-radius: var(--border-radius);
		padding: 10px 18px;
		font-size: 12px !important;
		font-weight: 600 !important;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		display: inline-block;
	}
	
	.footer-quick-links .footer-nav-list li a:hover {
		background: var(--highlight-color);
		border-color: var(--highlight-color);
	}
	
	.footer-service ul {
		justify-content: center;
	}
	
	.footer-service h4 {
		text-align: center;
	}
	
	.footer-bottom, .footer-service {
		text-align: center;
	}
	
	.footer-bottom ul {
		flex-direction: column;
		text-align: center;
	}
	
	.footer-bottom ul li {
		margin-bottom: 8px;
	}
	
	li.divider {
		display: none;
	}
	
	/* Blog posts */
	.rrp-post h4 {
        font-size: calc(16px * 0.8);
        line-height: calc(16px * 0.8);
    }
	
	/* Hamburger toggle - show on mobile */
	.hamburger-toggle {
		display: block;
	}
	
	/* Fullscreen mobile menu overlay - enable on mobile */
	.mobile-menu-overlay {
		display: block;
	}
	
	/* Body scroll lock when menu is open */
	body.menu-open {
		overflow: hidden;
	}
	
	/* Button adjustments */
	.button {
		font-size: 14px;
		text-align: center;
	}
	
	/* Blog layout - hide sidebar on mobile */
	.blog-sidebar {
		display: none;
	}
	
	.blog-layout {
		display: block;
	}
	
	.blog-featured-image img {
		max-height: 320px;
	}
	
	/* Blog index - stack featured card on mobile */
	.blog-featured-card {
		flex-direction: column;
	}
	
	.blog-featured-card-image {
		width: 100%;
		height: 220px;
	}
	
	.blog-featured-card-content {
		padding: 25px;
	}
	
	.blog-featured-card-content h2 {
		font-size: 22px;
		line-height: 26px;
	}
	
	.blog-grid-index {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	
	.blog-index-card-image {
		height: 180px;
	}
	
	/* Homepage blog section */
	.homepage-blog {
		padding: 60px 0;
	}
	
	.homepage-blog h3 {
		margin-bottom: 35px;
	}
	
	.homepage-blog-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	
	.homepage-blog-card-image {
		height: 180px;
	}
	
	.homepage-blog-footer {
		margin-top: 30px;
	}
	
	/* Data Pins */
	.raven-pins-grid {
		grid-template-columns: 1fr;
	}
	
	#raven-pins-aggregate-map {
		height: 300px;
	}
}

/* Mobile - 600px and below */
@media screen and (max-width: 600px) {
	.hero {
		padding: 65px 0;
	}
	
	.cta-buttons a:nth-child(1) {
		display: none;
	}
	
	.rrp-grid {
        grid-template-columns: 1fr;
    }
	
	.wp-block-image .alignright {
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100% !important;
	}
	
	.wp-block-image .alignright img {
		width: 100% !important;
    	margin-bottom: 1rem;
	}
	
	/* Data Pins */
	.raven-pin-media-container {
		grid-template-columns: 1fr;
	}
	
	.raven-pins-map-controls {
		flex-wrap: wrap;
	}
	
	.raven-pins-map-btn {
		font-size: 12px;
		padding: 10px 16px;
	}
}