/*
Theme Name: Attorney Kip Shepherd
Theme URI: https://www.kipshepherd.com/
Author: SEOteric
Author URI: https://www.seoteric.com/
Description: Custom Gutenberg block theme for the law office of Attorney Kip Shepherd, serving Athens, Watkinsville, Lawrenceville and metro Atlanta, Georgia. Rebuilt as a full site-editing block theme with a 14-panel pattern library.
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kip-shepherd
Tags: block-theme, full-site-editing, business, legal, custom-colors, custom-menu
*/

/* ==========================================================================
   1. Foundations
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--body-text);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: 15px;
	line-height: 1.75;
	margin: 0;
	overflow-x: hidden;
}

.wp-site-blocks { width: 100%; }

/* Constrained inner container used by every panel. */
.ks-container {
	margin-left: auto;
	margin-right: auto;
	max-width: 1100px;
	padding-left: 20px;
	padding-right: 20px;
	width: 100%;
}

.ks-container--narrow { max-width: 820px; }

.ks-section { padding-bottom: 85px; padding-top: 85px; }
.ks-section--tight { padding-bottom: 55px; padding-top: 55px; }

/* Screen-reader text. */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Kill default list markers on our custom check/dot lists. */
.ks-clean-list,
.ks-check-list,
.ks-dot-list { list-style: none !important; margin: 0; padding: 0; }
.ks-clean-list li,
.ks-check-list li,
.ks-dot-list li { list-style: none !important; }
.ks-clean-list li::marker,
.ks-check-list li::marker,
.ks-dot-list li::marker { content: none !important; display: none !important; }

.ks-check-list li {
	margin-bottom: 10px;
	padding-left: 30px;
	position: relative;
}
.ks-check-list li::before {
	color: var(--wp--preset--color--primary);
	content: "\2713";
	font-weight: 700;
	left: 0;
	position: absolute;
	top: 0;
}

.ks-dot-list li {
	margin-bottom: 10px;
	padding-left: 22px;
	position: relative;
}
.ks-dot-list li::before {
	background: var(--wp--preset--color--primary);
	border-radius: 50%;
	content: "";
	height: 6px;
	left: 0;
	position: absolute;
	top: 11px;
	width: 6px;
}

/* Figure margin reset so wrapped images never shift layout. */
.wp-block-image,
figure { margin: 0; }
.wp-block-image img { display: block; height: auto; max-width: 100%; }

/* ==========================================================================
   2. Utility bar (phones + socials above the header)
   ========================================================================== */

.ks-utility-bar {
	background-color: var(--wp--preset--color--off-white);
	border-bottom: 1px solid var(--wp--preset--color--border);
	font-size: 12px;
}
.ks-utility-bar .ks-container {
	align-items: center;
	display: flex;
	gap: 20px;
	justify-content: space-between;
	min-height: 46px;
}
.ks-utility-phone {
	align-items: center;
	color: var(--wp--preset--color--muted-light);
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	letter-spacing: 0.01em;
}
.ks-utility-phone a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	text-decoration: none;
}
.ks-utility-phone a:hover { color: var(--wp--preset--color--primary-dark); }
.ks-utility-phone .ks-divider { color: var(--wp--preset--color--border); }

.ks-social-row { align-items: center; display: flex; gap: 8px; }
.ks-social-row a {
	align-items: center;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 50%;
	color: var(--wp--preset--color--muted);
	display: inline-flex;
	height: 28px;
	justify-content: center;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
	width: 28px;
}
.ks-social-row a:hover {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}
.ks-social-row svg { display: block; fill: currentColor; height: 13px; width: 13px; }
.ks-social-row--dark a {
	background-color: transparent;
	border-color: var(--wp--preset--color--border-dark);
	color: var(--wp--preset--color--muted);
}
.ks-social-row--dark a:hover {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

/* ==========================================================================
   3. Header
   ========================================================================== */

.ks-header {
	background-color: var(--wp--preset--color--white);
	border-bottom: 1px solid var(--wp--preset--color--border);
	position: relative;
	z-index: 50;
}
.ks-header.is-sticky {
	box-shadow: 0 2px 12px rgba(34, 34, 34, .08);
	position: sticky;
	top: 0;
}
.ks-header-inner {
	align-items: center;
	display: flex;
	gap: 30px;
	justify-content: space-between;
	min-height: 86px;
}
.ks-header-logo { flex: 0 0 auto; }
.ks-header-logo img { height: auto; max-width: 230px; width: 100%; }

.ks-header-nav { flex: 1 1 auto; }
.ks-header-nav .wp-block-navigation { justify-content: flex-end; }
.ks-header-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--body-text);
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 14px;
	padding: 8px 0;
	text-decoration: none;
}
.ks-header-nav .wp-block-navigation-item__content:hover,
.ks-header-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
}
.ks-header-nav .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--white);
	border-top: 2px solid var(--wp--preset--color--primary);
	box-shadow: 0 8px 24px rgba(34, 34, 34, .10);
	min-width: 240px;
	padding: 6px 0;
}
.ks-header-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: 10px 18px;
	width: 100%;
}

/* ==========================================================================
   4. Hero slider
   ========================================================================== */

.ks-slider {
	background-color: var(--wp--preset--color--ink);
	overflow: hidden;
	position: relative;
	width: 100%;
}
.ks-slider__viewport { position: relative; }
.ks-slider__track {
	display: flex;
	transition: transform .8s cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
}
.ks-slide {
	flex: 0 0 100%;
	position: relative;
}
.ks-slide__media {
	display: block;
	height: 560px;
	object-fit: cover;
	object-position: center;
	width: 100%;
}
.ks-slide__scrim {
	background-image: var(--wp--preset--gradient--hero-scrim);
	inset: 0;
	position: absolute;
}
.ks-slide__body {
	align-items: center;
	display: flex;
	height: 100%;
	inset: 0;
	position: absolute;
}
.ks-slide__body .ks-container { max-width: 1100px; }
.ks-slide__inner { max-width: 640px; }
.ks-slide--center .ks-slide__inner { margin-left: auto; margin-right: auto; text-align: center; }
.ks-slide--right .ks-slide__inner { margin-left: auto; text-align: right; }
.ks-slide__eyebrow {
	color: var(--wp--preset--color--white);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .18em;
	margin: 0 0 14px;
	opacity: .9;
	text-transform: uppercase;
}
.ks-slide__title {
	color: var(--wp--preset--color--white);
	font-size: 46px;
	font-weight: 300;
	line-height: 1.15;
	margin: 0 0 16px;
	text-shadow: 0 1px 18px rgba(34, 34, 34, .35);
}
.ks-slide__text {
	color: var(--wp--preset--color--white);
	font-size: 18px;
	line-height: 1.6;
	margin: 0 0 28px;
	opacity: .94;
}
.ks-slide__buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.ks-slide--center .ks-slide__buttons { justify-content: center; }
.ks-slide--right .ks-slide__buttons { justify-content: flex-end; }

/* Ghost button variant used beside the solid CTA. */
.ks-btn-ghost .wp-block-button__link {
	background-color: transparent !important;
	border: 1px solid var(--wp--preset--color--white);
	color: var(--wp--preset--color--white) !important;
}
.ks-btn-ghost .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--primary) !important;
}

.ks-slider__nav {
	background: rgba(34, 34, 34, .45);
	border: 0;
	color: var(--wp--preset--color--white);
	cursor: pointer;
	font-size: 20px;
	height: 48px;
	line-height: 1;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: background-color .2s ease;
	width: 48px;
	z-index: 5;
}
.ks-slider__nav:hover { background: var(--wp--preset--color--primary); }
.ks-slider__nav--prev { left: 0; }
.ks-slider__nav--next { right: 0; }

.ks-slider__dots {
	bottom: 22px;
	display: flex;
	gap: 9px;
	justify-content: center;
	left: 0;
	position: absolute;
	right: 0;
	z-index: 5;
}
.ks-slider__dot {
	background: rgba(255, 255, 255, .45);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	height: 10px;
	padding: 0;
	transition: background-color .2s ease, transform .2s ease;
	width: 10px;
}
.ks-slider__dot.is-active {
	background: var(--wp--preset--color--primary);
	transform: scale(1.25);
}

/* ==========================================================================
   5. Service cards
   ========================================================================== */

.ks-card-grid {
	display: grid;
	gap: 34px 30px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ks-card { display: flex; flex-direction: column; }
.ks-card__media { display: block; margin-bottom: 18px; }
.ks-card__media img {
	aspect-ratio: 3 / 2;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}
.ks-card__title {
	color: var(--wp--preset--color--ink);
	font-size: 17px;
	font-weight: 400;
	margin: 0 0 10px;
}
.ks-card__title a {
	color: inherit;
	text-decoration: none;
}
.ks-card__title a:hover { color: var(--wp--preset--color--primary); }
.ks-card__text {
	color: var(--wp--preset--color--muted);
	font-size: 14px;
	line-height: 1.7;
	margin: 0;
}
.ks-card__more {
	color: var(--wp--preset--color--primary);
	font-size: 13px;
	font-weight: 600;
	margin-top: auto;
	padding-top: 12px;
	text-decoration: none;
}
.ks-card__more:hover { color: var(--wp--preset--color--primary-dark); }

/* ==========================================================================
   6. Quick contact (image + form)
   ========================================================================== */

.ks-quick-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ks-quick-contact__media { min-height: 420px; position: relative; }
.ks-quick-contact__media img {
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}
.ks-quick-contact__panel {
	align-items: center;
	background-color: var(--wp--preset--color--white);
	display: flex;
	padding: 55px 45px;
}
.ks-quick-contact__form { width: 100%; }

/* Gravity Forms / core form field polish. */
.ks-form .gfield,
.ks-form .wp-block-post-comments-form p { margin-bottom: 16px; }
.ks-form label {
	color: var(--wp--preset--color--body-text);
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
}
.ks-form input[type="text"],
.ks-form input[type="email"],
.ks-form input[type="tel"],
.ks-form input[type="url"],
.ks-form textarea,
.ks-form select {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--body-text);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
	padding: 12px 14px;
	width: 100%;
}
.ks-form input:focus,
.ks-form textarea:focus,
.ks-form select:focus {
	border-color: var(--wp--preset--color--primary);
	outline: 2px solid rgba(47, 162, 239, .18);
	outline-offset: 0;
}
.ks-form input[type="submit"],
.ks-form button[type="submit"] {
	background-color: var(--wp--preset--color--primary);
	border: 0;
	border-radius: 2px;
	color: var(--wp--preset--color--white);
	cursor: pointer;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	padding: 15px 30px;
	text-transform: uppercase;
	transition: background-color .2s ease;
	width: auto;
}
.ks-form input[type="submit"]:hover,
.ks-form button[type="submit"]:hover { background-color: var(--wp--preset--color--primary-dark); }

/* ==========================================================================
   7. Call band
   ========================================================================== */

.ks-call-band { background-color: var(--wp--preset--color--primary); }
.ks-call-band .ks-container {
	align-items: center;
	display: flex;
	gap: 30px;
	justify-content: space-between;
	min-height: 96px;
	padding-bottom: 18px;
	padding-top: 18px;
}
.ks-call-band__text {
	color: var(--wp--preset--color--white);
	font-size: 28px;
	font-weight: 300;
	line-height: 1.35;
	margin: 0;
}
.ks-call-band__text a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}
.ks-call-band__action { flex: 0 0 auto; }
.ks-call-band__action .wp-block-button__link {
	background-color: transparent !important;
	border: 1px solid var(--wp--preset--color--white);
	color: var(--wp--preset--color--white) !important;
}
.ks-call-band__action .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--primary) !important;
}

/* ==========================================================================
   8. Footer
   ========================================================================== */

.ks-footer {
	background-color: var(--wp--preset--color--charcoal);
	color: var(--wp--preset--color--muted);
	padding-bottom: 60px;
	padding-top: 65px;
}
.ks-footer__grid {
	display: grid;
	gap: 40px;
	grid-template-columns: 1.15fr .85fr 1fr 1fr;
}
.ks-footer h2,
.ks-footer h3,
.ks-footer h4,
.ks-footer .ks-footer__heading {
	color: var(--wp--preset--color--white);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	margin: 0 0 20px;
	text-transform: uppercase;
}
.ks-footer p { color: var(--wp--preset--color--muted); font-size: 14px; line-height: 1.75; margin: 0 0 14px; }
.ks-footer a { color: var(--wp--preset--color--muted); text-decoration: none; }
.ks-footer a:hover { color: var(--wp--preset--color--primary); }
.ks-footer__logo img { height: auto; margin-bottom: 20px; max-width: 190px; width: 100%; }
.ks-footer__contact { font-size: 14px; line-height: 1.9; }
.ks-footer__contact strong {
	color: var(--wp--preset--color--white);
	display: block;
	font-weight: 400;
	margin-bottom: 14px;
}
.ks-footer__contact .ks-label { color: var(--wp--preset--color--white); }
.ks-footer__contact address { font-style: normal; margin: 0; }

.ks-copyright {
	background-color: var(--wp--preset--color--charcoal-deep);
	border-top: 1px solid var(--wp--preset--color--border-dark);
	color: var(--wp--preset--color--muted-light);
	font-size: 12px;
}
.ks-copyright .ks-container {
	align-items: center;
	display: flex;
	gap: 20px;
	justify-content: space-between;
	min-height: 54px;
	padding-bottom: 10px;
	padding-top: 10px;
}
.ks-copyright p { color: var(--wp--preset--color--muted-light); font-size: 12px; margin: 0; }
.ks-copyright a { color: var(--wp--preset--color--muted-light); text-decoration: none; }
.ks-copyright a:hover { color: var(--wp--preset--color--primary); }
.ks-copyright__mark { opacity: .5; width: 34px; }
.ks-copyright__mark svg { fill: var(--wp--preset--color--muted); height: 26px; width: 26px; }

/* ==========================================================================
   9. Generic panel helpers (pattern library)
   ========================================================================== */

.ks-eyebrow {
	color: var(--wp--preset--color--primary);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	margin: 0 0 14px;
	text-transform: uppercase;
}
.ks-lead {
	font-size: 18px;
	line-height: 1.7;
}
.ks-dark { background-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--muted); }
.ks-dark h1, .ks-dark h2, .ks-dark h3, .ks-dark h4 { color: var(--wp--preset--color--white); }
.ks-dark p { color: var(--wp--preset--color--muted); }
.ks-light { background-color: var(--wp--preset--color--off-white); }
.ks-divider {
	background-color: var(--wp--preset--color--primary);
	height: 3px;
	margin: 26px 0;
	width: 58px;
}
.ks-divider--center { margin-left: auto; margin-right: auto; }

.ks-metric {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	padding: 26px 24px;
}
.ks-metric__value {
	color: var(--wp--preset--color--primary);
	font-size: 34px;
	font-weight: 300;
	line-height: 1.1;
	margin: 0 0 6px;
}
.ks-metric__label {
	color: var(--wp--preset--color--muted);
	font-size: 13px;
	margin: 0;
}

.ks-split { display: grid; gap: 55px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
.ks-split--70-30 { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); align-items: start; }
.ks-split--60-40 { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); align-items: center; }
.ks-split--40-60 { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); align-items: center; }
.ks-split__media img { display: block; height: auto; width: 100%; }

.ks-sidebar-card {
	background-color: var(--wp--preset--color--off-white);
	border-top: 3px solid var(--wp--preset--color--primary);
	padding: 30px 26px;
	position: sticky;
	top: 100px;
}
.ks-sidebar-card h3 { font-size: 16px; margin: 0 0 16px; }

.ks-badge-strip {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	justify-content: center;
}
.ks-badge-strip img { filter: grayscale(1); height: 44px; opacity: .6; width: auto; }
.ks-badge-strip img:hover { filter: grayscale(0); opacity: 1; }

.ks-star-row { color: var(--wp--preset--color--primary); font-size: 14px; letter-spacing: .16em; margin: 0 0 12px; }

.ks-quote-card {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	display: flex;
	flex-direction: column;
	padding: 32px 28px;
}
.ks-quote-card p { font-size: 15px; font-style: italic; line-height: 1.75; }
.ks-quote-card cite {
	color: var(--wp--preset--color--ink);
	display: block;
	font-size: 13px;
	font-style: normal;
	font-weight: 600;
	margin-top: auto;
	padding-top: 18px;
}

.ks-faq { border-top: 1px solid var(--wp--preset--color--border); }
.ks-faq details {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: 4px 0;
}
.ks-faq summary {
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	font-size: 16px;
	font-weight: 500;
	list-style: none;
	padding: 18px 40px 18px 0;
	position: relative;
}
.ks-faq summary::-webkit-details-marker { display: none; }
.ks-faq summary::after {
	color: var(--wp--preset--color--primary);
	content: "+";
	font-size: 22px;
	font-weight: 300;
	line-height: 1;
	position: absolute;
	right: 6px;
	top: 17px;
}
.ks-faq details[open] summary::after { content: "\2212"; }
.ks-faq details > p { margin: 0 0 20px; }

.ks-table-wrap { overflow-x: auto; width: 100%; }
.ks-table {
	border-collapse: collapse;
	font-size: 14px;
	table-layout: fixed;
	width: 100%;
}
.ks-table th,
.ks-table td {
	border: 1px solid var(--wp--preset--color--border);
	padding: 14px 16px;
	text-align: left;
	vertical-align: top;
}
.ks-table thead th {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.ks-table tbody tr:nth-child(even) { background-color: var(--wp--preset--color--off-white); }
.ks-table td:first-child { font-weight: 600; }

.ks-price-card {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	display: flex;
	flex-direction: column;
	padding: 36px 30px;
	text-align: center;
}
.ks-price-card.is-featured {
	background-color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	box-shadow: 0 18px 40px rgba(34, 34, 34, .18);
}
.ks-price-card.is-featured h3,
.ks-price-card.is-featured p { color: var(--wp--preset--color--white); }
.ks-price-card__amount {
	color: var(--wp--preset--color--primary);
	font-size: 42px;
	font-weight: 300;
	line-height: 1;
	margin: 10px 0 4px;
}
.ks-price-card__period { color: var(--wp--preset--color--muted); font-size: 13px; margin: 0 0 22px; }
.ks-price-card .wp-block-button { margin-top: auto; }

.ks-pillar {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	padding: 34px 28px;
	text-align: center;
}
.ks-pillar__icon {
	color: var(--wp--preset--color--primary);
	font-size: 30px;
	line-height: 1;
	margin-bottom: 18px;
}

.ks-image-card {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	display: flex;
	flex-direction: column;
}
.ks-image-card__media img { aspect-ratio: 16 / 10; display: block; height: auto; object-fit: cover; width: 100%; }
.ks-image-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 26px 24px; }
.ks-image-card__badge {
	align-self: flex-start;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	margin-bottom: 14px;
	padding: 5px 11px;
	text-transform: uppercase;
}

.ks-area-card {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	display: block;
	padding: 22px 20px;
	text-decoration: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.ks-area-card:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 8px 22px rgba(34, 34, 34, .08);
}
.ks-area-card__name {
	color: var(--wp--preset--color--ink);
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 4px;
}
.ks-area-card__meta { color: var(--wp--preset--color--muted); font-size: 12px; margin: 0; }

.ks-stat-callout { text-align: center; }
.ks-stat-callout__value {
	color: var(--wp--preset--color--primary);
	font-size: 58px;
	font-weight: 200;
	line-height: 1;
	margin: 0;
}
.ks-stat-callout__label {
	color: var(--wp--preset--color--muted);
	font-size: 13px;
	letter-spacing: .08em;
	margin: 10px 0 0;
	text-transform: uppercase;
}

.ks-cta-panel { background-color: var(--wp--preset--color--primary); }
.ks-cta-panel h1,
.ks-cta-panel h2,
.ks-cta-panel h3,
.ks-cta-panel p { color: var(--wp--preset--color--white); }

/* ==========================================================================
   10. Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.ks-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ks-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ks-slide__media { height: 460px; }
	.ks-slide__title { font-size: 36px; }
	.ks-call-band__text { font-size: 22px; }
}

@media (max-width: 860px) {
	.ks-split,
	.ks-split--70-30,
	.ks-split--60-40,
	.ks-split--40-60 { gap: 34px; grid-template-columns: minmax(0, 1fr); }
	.ks-quick-contact { grid-template-columns: minmax(0, 1fr); }
	.ks-quick-contact__media { min-height: 280px; }
	.ks-sidebar-card { position: static; }
	.ks-header-inner { min-height: 74px; }
	.ks-header-logo img { max-width: 180px; }
}

@media (max-width: 767px) {
	.ks-section { padding-bottom: 55px; padding-top: 55px; }
	.ks-card-grid { gap: 28px; grid-template-columns: minmax(0, 1fr); }
	.ks-footer__grid { gap: 34px; grid-template-columns: minmax(0, 1fr); }
	.ks-utility-bar .ks-container { justify-content: center; min-height: 40px; }
	.ks-utility-bar .ks-social-row { display: none; }
	.ks-utility-phone { font-size: 11px; }
	.ks-slide__media { height: 380px; }
	.ks-slide__title { font-size: 28px; }
	.ks-slide__text { font-size: 15px; }
	.ks-slide__buttons { flex-direction: column; align-items: flex-start; }
	.ks-slide--center .ks-slide__buttons { align-items: center; }
	.ks-call-band .ks-container { flex-direction: column; gap: 16px; text-align: center; }
	.ks-call-band__text { font-size: 19px; }
	.ks-quick-contact__panel { padding: 36px 22px; }
	.ks-copyright .ks-container { flex-direction: column; gap: 8px; text-align: center; }
	.ks-table { table-layout: auto; min-width: 620px; }
}

/* ==========================================================================
   16. Additions: form markers, light-background ghost buttons, page hero
   ========================================================================== */

/* Required-field marker used by the quick-contact intake form. */
.ks-required { color: var(--wp--preset--color--primary); }

/* Ghost button variant for use on light backgrounds. */
.ks-btn-ghost-dark .wp-block-button__link {
	background-color: transparent !important;
	border: 1px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary) !important;
}
.ks-btn-ghost-dark .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--white) !important;
}

/* Slider: before JS boots the slides stack so the hero is still readable. */
.ks-slider:not(.is-ready) .ks-slider__track { flex-wrap: wrap; }
.ks-slider.is-ready .ks-slide { overflow: hidden; }

/* File inputs should match the other form fields. */
.ks-form input[type="file"] { padding: 10px 14px; }

/* Dark page-hero band used by interior templates and patterns. */
.ks-page-hero { background-color: var(--wp--preset--color--ink); }
.ks-page-hero h1,
.ks-page-hero p { color: var(--wp--preset--color--white); }
.ks-main--full > .wp-block-group { padding-left: 0; padding-right: 0; }

/* Text-only variant of the badge strip (used where no third-party logo may be reproduced). */
.ks-badge-strip--text {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 30px;
	justify-content: center;
	margin-bottom: 26px;
}
.ks-badge-strip--text span {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 2px;
	color: var(--wp--preset--color--muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	padding: 12px 20px;
	text-transform: uppercase;
}

/* Two-up metric row used inside the 50/50 split panel. */
.ks-metric-row { margin-top: 55px; }

/* ==========================================================================
   17. Reduced motion
   ========================================================================== */

/*
 * Honour the OS "reduce motion" setting. The slider also stops autoplaying
 * and changes slides instantly (see assets/js/slider.js).
 */
@media (prefers-reduced-motion: reduce) {
	.ks-slider__track,
	.ks-slider__dot,
	.ks-slider__nav,
	.ks-social-row a,
	.ks-area-card,
	.ks-form input[type="submit"],
	.ks-form button[type="submit"] {
		transition: none !important;
	}
}

/* ==========================================================================
   18. Card grid alignment + quick-contact card
   ========================================================================== */

/*
 * Card grid: the media ratio now lives on the wrapper (not the <img>) and the
 * image is absolutely positioned to fill it, so every card image is an identical
 * box no matter what aspect ratio the uploaded file has. Without this a
 * near-square upload (337x331) renders taller than its 3:2 siblings and the first
 * card in the row sits out of line.
 */
.ks-card-grid { align-items: stretch; }
.ks-card__media {
	aspect-ratio: 3 / 2;
	display: block;
	line-height: 0;
	margin-bottom: 18px;
	overflow: hidden;
	position: relative;
	width: 100%;
}
.ks-card__media a { display: block; height: 100%; }
.ks-card__media img {
	aspect-ratio: auto;
	display: block;
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

/*
 * Quick contact: a content-width card (image panel beside the form) instead of
 * the old full-bleed two-column grid whose panel laid its children out in a row.
 */
.ks-quick-contact {
	background-color: var(--wp--preset--color--off-white);
	display: block;
	padding-bottom: 85px;
	padding-top: 85px;
}
.ks-contact-card {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 20px 50px rgba(34, 34, 34, .08);
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
	overflow: hidden;
}
.ks-contact-card__media { min-height: 100%; position: relative; }
.ks-contact-card__media img {
	height: 100%;
	inset: 0;
	object-fit: cover;
	object-position: center top;
	position: absolute;
	width: 100%;
}
.ks-contact-card__body { padding: 54px 50px; }
.ks-contact-card__title { font-size: 30px; line-height: 1.22; margin: 0 0 12px; }
.ks-contact-card__intro { color: var(--wp--preset--color--muted); font-size: 15px; margin: 0 0 28px; }
.ks-contact-card__intro a { color: var(--wp--preset--color--primary); font-weight: 600; text-decoration: none; }
.ks-contact-card__intro a:hover { color: var(--wp--preset--color--primary-dark); }

/* Two-column intake field grid keeps the form compact and scannable. */
.ks-field-grid { display: grid; gap: 18px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ks-field { min-width: 0; }
.ks-field--full { grid-column: 1 / -1; }
.ks-field--submit { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ks-form-note { color: var(--wp--preset--color--muted-light); font-size: 12px; margin: 0; }
.ks-quick-contact__form { width: 100%; }

@media (max-width: 860px) {
	.ks-contact-card { grid-template-columns: minmax(0, 1fr); }
	.ks-contact-card__media { min-height: 260px; }
}
@media (max-width: 767px) {
	.ks-contact-card__body { padding: 36px 24px; }
	.ks-contact-card__title { font-size: 24px; }
	.ks-field-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   19. Reset WordPress's flow-layout block gap inside our layout containers
   ========================================================================== */

/*
 * Every wp:group rendered with layout {"type":"default"} is given WordPress's
 * `is-layout-flow` class, and the inline global styles ship this rule:
 *
 *   :root :where(.is-layout-flow) > * { margin-block-start: 1.5rem; margin-block-end: 0 }
 *   :root :where(.is-layout-flow) > :first-child { margin-block-start: 0 }
 *
 * That is a 24px top margin on EVERY child except the first. Inside a container
 * we lay out ourselves with grid or flex it is simply wrong: it is not the
 * container's `gap`, it is a per-item margin, so it drops every item after the
 * first by 24px and knocks the columns out of line. On the homepage card grid
 * it put card 1 24px above cards 2-6 in the SAME row - which is why
 * `align-items: stretch` on its own could never fix the alignment.
 *
 * The core selector resolves to specificity (0,1,0), identical to a plain
 * `.ks-x > *`, so this reset is marked !important to win regardless of the
 * order WordPress prints its inline global styles in.
 */
.ks-card-grid > *,
.ks-split > *,
.ks-contact-card > *,
.ks-image-card > *,
.ks-quick-contact > *,
.ks-metric-row > * {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}

/* ==========================================================================
   20. Gravity Forms - matched to the theme's .ks-form design
   ========================================================================== */

/*
 * Gravity Forms 3.x renders through its own "orbital" theme framework and injects
 * default colour tokens (#204ce5, a generic blue) into an inline <style> on the
 * wrapper, so the plugin's CSS fights the theme's existing .ks-form rules. Form 1
 * now carries cssClass "ks-form", which places it inside that polish layer; this
 * section re-points the framework's colour tokens at the brand palette and adds
 * the two-column field grid the panel was designed around.
 *
 * Scoped to `.ks-form` (an ancestor of the fields whether the class lands on the
 * wrapper or on the <form>) and uses three classes / !important where the
 * framework sets the same property, because GF's stylesheet is enqueued
 * independently of this one and may load after it.
 */

.ks-form {
	--gf-color-primary: var(--wp--preset--color--primary);
	--gf-color-primary-darker: var(--wp--preset--color--primary-dark);
	--gf-color-primary-lighter: var(--wp--preset--color--primary);
	--gf-color-in-ctrl-primary: var(--wp--preset--color--primary);
	--gf-color-in-ctrl-contrast: var(--wp--preset--color--body-text);
	--gf-ctrl-border-color: var(--wp--preset--color--border);
	--gf-ctrl-label-color-primary: var(--wp--preset--color--body-text);
	--gf-ctrl-label-color-secondary: var(--wp--preset--color--body-text);
	--gf-radius: 2px;
	--gf-font-size-secondary: 13px;
	--gf-font-size-tertiary: 12px;
}

.gform_wrapper.ks-form_wrapper,
.ks-form .gform_wrapper,
.ks-form .gform-body,
.ks-form .gform_body {
	background: none !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Two-column field grid, mirroring .ks-field-grid (gap 18px 20px). */
.ks-form .gform_body .gform_fields {
	display: grid !important;
	gap: 18px 20px !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.ks-form .gform_body .gfield { margin: 0 !important; min-width: 0; }
.ks-form .gform_body .gfield--type-textarea,
.ks-form .gform_body .gfield--type-fileupload,
.ks-form .gform_body .gfield--type-html,
.ks-form .gform_body .gfield--type-section { grid-column: 1 / -1; }

/* Labels and the required asterisk, matching .ks-form label / .ks-required. */
.ks-form .gform_body .gfield_label {
	color: var(--wp--preset--color--body-text);
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
}
.ks-form .gform_body .gform-field-label__text { color: inherit; font: inherit; }
.ks-form .gform_body .gfield_required,
.ks-form .gform_body .gfield_required_text,
.ks-form .gform_body .gfield_required_asterisk {
	color: var(--wp--preset--color--primary);
	font-size: 13px;
	margin-left: 2px;
}

/* Inputs: re-assert the design over the framework's own control styling. */
.ks-form .gform_body .ginput_container { margin: 0; }
.ks-form .gform_body input[type="text"],
.ks-form .gform_body input[type="email"],
.ks-form .gform_body input[type="tel"],
.ks-form .gform_body input[type="url"],
.ks-form .gform_body input[type="number"],
.ks-form .gform_body textarea,
.ks-form .gform_body select {
	background-color: var(--wp--preset--color--white) !important;
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--body-text) !important;
	font-family: inherit;
	font-size: 14px !important;
	line-height: 1.5;
	min-height: 0 !important;
	padding: 12px 14px !important;
	width: 100%;
}
.ks-form .gform_body textarea { height: 118px; resize: vertical; }
.ks-form .gform_body input:focus,
.ks-form .gform_body textarea:focus,
.ks-form .gform_body select:focus {
	border-color: var(--wp--preset--color--primary) !important;
	box-shadow: none !important;
	outline: 2px solid rgba(47, 162, 239, .18);
	outline-offset: 0;
}

/* Footer + submit button, matching the panel's .ks-field--submit row. */
.ks-form .gform_footer {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 24px 0 0 !important;
	padding: 0 !important;
}
.ks-form .gform_button.button {
	background-color: var(--wp--preset--color--primary) !important;
	border: 0 !important;
	border-radius: 2px !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--white) !important;
	cursor: pointer;
	font-size: 11px !important;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.2 !important;
	min-height: 0 !important;
	padding: 15px 30px !important;
	text-transform: uppercase;
	transition: background-color .2s ease;
	width: auto;
}
.ks-form .gform_button.button:hover,
.ks-form .gform_button.button:focus {
	background-color: var(--wp--preset--color--primary-dark) !important;
	color: var(--wp--preset--color--white) !important;
}

/* Validation + confirmation states. */
.ks-form .gfield_error input,
.ks-form .gfield_error textarea { border-color: #c0392b !important; }
.ks-form .validation_message { color: #c0392b; font-size: 12px; margin-top: 4px; }
.ks-form .gform_validation_errors {
	background-color: #fdf0ee;
	border: 1px solid #c0392b;
	color: #c0392b;
	font-size: 13px;
	margin: 0 0 18px;
	padding: 14px 18px;
}
.ks-form .gform_validation_errors h2 { color: #c0392b; font-size: 14px; margin: 0 0 8px; }
.gform_confirmation_wrapper .gform_confirmation_message {
	color: var(--wp--preset--color--body-text);
	font-size: 15px;
	line-height: 1.7;
	margin: 0;
}

@media (max-width: 767px) {
	.ks-form .gform_body .gform_fields { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Field placement. Gravity Forms tags every field with a 12-column span
   (gfield--width-full), so each field fills the whole row and defeats the
   two-column container grid above. Reset the spans so the panel's two-up layout
   holds, and let the textarea span the full width. */
.ks-form .gform_body .gfield { grid-column: auto !important; }
.ks-form .gform_body .gfield--type-textarea,
.ks-form .gform_body .gfield--type-fileupload,
.ks-form .gform_body .gfield--type-html { grid-column: 1 / -1 !important; }

/* The required-field legend lives in .gform_heading, a SIBLING of the <form>, so it
   sits outside the .ks-form scope - target the wrapper instead. The panel already
   carries the equivalent note below the button, so suppress the duplicate. */
.gform_wrapper.ks-form_wrapper .gform_required_legend { display: none !important; }
.gform_wrapper.ks-form_wrapper .gform_heading { margin: 0; padding: 0; }

/* ==========================================================================
   21. Internal page hero: featured image with the page title over it
   ========================================================================== */

/*
 * Internal pages previously opened with a plain light band holding only the H1,
 * which left a large empty area between the title and the body copy. The band is
 * now a short full-bleed hero: the page's featured image sits behind the title
 * with a directional scrim so the white heading stays readable over any photo.
 * The hero is a wp:group holding the dynamic core/post-featured-image block, so a
 * page without a featured image simply falls back to the charcoal band.
 */

.ks-page-hero {
	align-items: center;
	background-color: var(--wp--preset--color--charcoal);
	display: flex;
	min-height: 300px;
	overflow: hidden;
	position: relative;
}

/* WP's flow-layout block gap would offset the inner container in this flex row. */
.ks-page-hero > * { margin-block-start: 0 !important; margin-top: 0 !important; }

.ks-page-hero .ks-page-hero__bg {
	height: 100%;
	inset: 0;
	margin: 0 !important;
	position: absolute;
	width: 100%;
	z-index: 0;
}
.ks-page-hero .ks-page-hero__bg img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
	width: 100%;
}

/* Directional scrim: heavier on the left where the title sits, plus a slight
   top-to-bottom deepening so the band never looks washed out. */
.ks-page-hero::after {
	background:
		linear-gradient(90deg, rgba(26, 26, 26, .80) 0%, rgba(26, 26, 26, .58) 48%, rgba(26, 26, 26, .28) 100%),
		linear-gradient(180deg, rgba(26, 26, 26, .10) 0%, rgba(26, 26, 26, .40) 100%);
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}

.ks-page-hero__inner { position: relative; width: 100%; z-index: 2; }
.ks-page-hero__title {
	color: var(--wp--preset--color--white);
	font-size: 44px;
	font-weight: 300;
	line-height: 1.15;
	margin: 0;
	max-width: 820px;
	text-shadow: 0 1px 18px rgba(0, 0, 0, .35);
}

/* The page's own first content section sits directly under the hero, so it does not
   need the full 85px panel padding above it. Scoped to the first section only, so
   the rhythm between later panels is untouched. */
/* The post-content wrapper is the SECOND child of .ks-main, so WP's flow-layout
   block gap gave it a 24px top margin - visible as dead space under the hero.
   The hero and the content block are the only children, so zero both. */
.ks-main > * { margin-block-start: 0 !important; margin-top: 0 !important; }

.ks-main > .wp-block-post-content > .ks-section:first-child { padding-top: 55px; }

@media (max-width: 860px) {
	.ks-page-hero { min-height: 240px; }
	.ks-page-hero__title { font-size: 34px; }
}
@media (max-width: 767px) {
	.ks-page-hero { min-height: 200px; }
	.ks-page-hero__title { font-size: 28px; }
	.ks-main > .wp-block-post-content > .ks-section:first-child { padding-top: 40px; }
}


/* ==========================================================================
   22. Content-width guard for pages authored without their own .ks-container
   ========================================================================== */

/*
 * The page template used to wrap post content in a container. That wrapper was
 * removed because it trapped full-bleed panel backgrounds at 1100px - but a
 * handful of pages (privacy-policy, terms-of-service, testimonials, about,
 * contact-us, faqs, find-us-online, locations-we-service) were authored with
 * the container supplied by the template, so their copy ran edge to edge.
 *
 * These two rules restore the 1100px measure for exactly those pages without
 * touching full-bleed bands, and are a no-op everywhere else: on every other
 * page the top-level children are already .ks-section > .ks-container.
 */

/* 1. Top-level content that is not a full-bleed band. */
.wp-block-post-content > :not(.ks-section):not(.ks-section--tight):not(.ks-light):not(.ks-dark):not(.ks-cta-panel) {
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	max-width: 1100px;
	padding-left: 20px;
	padding-right: 20px;
}

/* 2. A full-bleed band that is missing its inner container: constrain the
      children individually so the band's own background stays full width. */
.wp-block-post-content > .ks-section > :not(.ks-container),
.wp-block-post-content > .ks-section--tight > :not(.ks-container),
.wp-block-post-content > .ks-light > :not(.ks-container),
.wp-block-post-content > .ks-dark > :not(.ks-container),
.wp-block-post-content > .ks-cta-panel > :not(.ks-container) {
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	max-width: 1100px;
	padding-left: 20px;
	padding-right: 20px;
}

/* 3. Those same pages have no first .ks-section to carry the 55px opening
      gap, so the first block supplies it instead. */
.wp-block-post-content > :not(.ks-section):not(.ks-section--tight):not(.ks-light):not(.ks-dark):not(.ks-cta-panel):first-child {
	margin-block-start: 55px !important;
}

@media (max-width: 767px) {
	.wp-block-post-content > :not(.ks-section):not(.ks-section--tight):not(.ks-light):not(.ks-dark):not(.ks-cta-panel):first-child {
		margin-block-start: 40px !important;
	}
}