﻿/* Grady Property Restoration — Homepage Prototype
   Component styles · tokens in design-tokens.css */

/* —— Photo placeholders —— */

.photo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-bg-placeholder);
}

.photo-placeholder__label {
	font-family: var(--font-body);
	font-size: var(--font-size-5xs);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-relaxed);
	letter-spacing: var(--letter-spacing-placeholder);
	text-align: center;
	text-transform: uppercase;
	color: var(--placeholder-text);
}

.photo-placeholder__label--cover {
	position: absolute;
	inset: 0;
	z-index: var(--z-placeholder-label);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.photo-placeholder__label--cover span {
	font-family: var(--font-body);
	font-size: var(--font-size-5xs);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-relaxed);
	letter-spacing: var(--letter-spacing-placeholder);
	text-align: center;
	text-transform: uppercase;
	color: var(--caption);
}

a {
	color: inherit;
}

.photo-placeholder__label--map {
	position: absolute;
	inset: 0;
	z-index: var(--z-base);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.photo-placeholder--split {
	width: 100%;
	height: 100%;
	min-height: inherit;
	aspect-ratio: var(--ratio-split-photo);
}

.photo-placeholder--insurance {
	width: 100%;
	aspect-ratio: var(--ratio-insurance-photo);
}

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

html {
	font-size: var(--font-size-root);
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
}

body.grady-home {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	color: var(--color-text-primary);
	background: var(--color-bg-page);
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

body.grady-site {
	color: var(--text-primary);
}

.grady-wrap {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}

.grady-icon {
	width: var(--size-icon-sm);
	height: var(--size-icon-sm);
	flex-shrink: 0;
	color: var(--color-bronze);
}

.grady-icon--lg {
	width: var(--size-icon-md);
	height: var(--size-icon-md);
	margin-bottom: var(--space-1);
}

/* —— Hex icon centering —— */

.hex-icon,
.icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
}

.grady-process__hex-frame .hex-icon {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	color: var(--color-bronze);
}

.hex-icon svg,
.icon-wrap svg {
	display: block;
	width: 24px;
	height: 24px;
	margin: auto;
	transform: none;
}

/* —— Typography rhythm —— */

.grady-eyebrow {
	margin: 0 0 var(--space-3);
	font-family: var(--font-display);
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-ui);
	letter-spacing: var(--letter-spacing-eyebrow);
	text-transform: uppercase;
	color: var(--eyebrow);
}

.grady-heading {
	margin: 0 0 var(--space-4);
	font-family: var(--font-display);
	font-size: var(--font-size-heading);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-heading);
	letter-spacing: var(--letter-spacing-trust);
	text-transform: uppercase;
	color: var(--heading);
}

/* Legacy explicit overrides — prefer theme context on parent section */
.grady-heading--light {
	color: var(--heading-dark);
}

.grady-heading--dark {
	color: var(--heading-light);
}

.grady-body {
	margin: 0 0 var(--space-5);
	max-width: var(--text-measure);
	font-size: var(--font-size-body-lg);
	line-height: var(--line-height-body-lg);
	color: var(--text-primary);
}

.grady-body--light {
	max-width: var(--text-measure-narrow);
	color: var(--text-primary-dark);
}

.grady-link-arrow {
	display: inline-block;
	margin-top: var(--space-1);
	font-family: var(--font-display);
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-ui);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-bronze-dark);
	transition: color var(--transition);
}

.grady-link-arrow::after {
	content: " \2192";
	display: inline-block;
	transition: transform var(--motion-duration) var(--motion-ease);
}

.grady-link-arrow:hover::after {
	transform: translateX(var(--motion-arrow-sm));
}

.grady-link-arrow:hover {
	color: var(--color-bronze);
}

.grady-link-arrow--light {
	color: var(--color-bronze);
}

.grady-link-arrow--light:hover {
	color: var(--color-limestone);
}

/* —— Buttons —— */

.grady-btn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: var(--container-btn-min);
	min-height: var(--container-btn-height);
	padding: var(--space-2) var(--space-4);
	font-family: var(--font-display);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-snug);
	letter-spacing: var(--letter-spacing-wide);
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	border: var(--border-transparent);
	border-radius: var(--radius-sm);
	transition:
		background-color var(--motion-duration) var(--motion-ease),
		border-color var(--motion-duration) var(--motion-ease),
		color var(--motion-duration) var(--motion-ease);
}

.grady-btn--primary {
	color: var(--color-black);
	background: var(--color-bronze);
	border-color: var(--color-bronze);
}

.grady-btn--primary:hover {
	background: var(--color-limestone);
	border-color: var(--color-limestone);
}

.grady-btn--outline {
	color: var(--color-bronze);
	background: transparent;
	border-color: var(--divider-outline);
}

.grady-btn--outline:hover {
	color: var(--color-limestone);
	border-color: var(--color-limestone);
}

.grady-btn__small {
	margin-top: var(--spacing-micro-sm);
	font-size: var(--font-size-4xs);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-ui-xs);
	letter-spacing: var(--letter-spacing-btn-small);
	opacity: var(--opacity-btn-sub);
}

/* —— Header wordmark (Sprint 6A) —— */

.brand--wordmark {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	min-width: var(--container-brand-min);
	padding-right: var(--space-2);
	text-decoration: none;
	line-height: 1;
	transition: opacity var(--transition);
}

.brand--wordmark:hover {
	opacity: var(--opacity-brand-hover);
}

.brand__name {
	font-family: var(--font-display);
	font-size: var(--font-size-brand);
	font-weight: var(--font-weight-bold);
	line-height: 1;
	letter-spacing: var(--letter-spacing-brand);
	text-indent: var(--letter-spacing-brand);
	text-transform: uppercase;
	color: var(--color-white);
}

.brand__tag {
	margin-top: var(--spacing-micro-md);
	font-family: var(--font-body);
	font-size: var(--font-size-6xs);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-ui-xs);
	letter-spacing: var(--letter-spacing-brand-tag);
	text-indent: var(--letter-spacing-brand-tag);
	text-transform: uppercase;
	color: var(--color-text-bronze-wordmark);
}

/* —— Footer text logo —— */

.grady-logo {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-gap-logo);
	text-decoration: none;
	line-height: var(--line-height-brand);
}

.grady-logo__name {
	font-family: var(--font-display);
	font-size: var(--font-size-logo-header);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-btn-small);
	color: var(--color-white);
}

.grady-logo__tag {
	font-family: var(--font-body);
	font-size: var(--font-size-6xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-logo-tag);
	text-transform: uppercase;
	color: var(--color-text-on-dark-tag);
}

.grady-logo--footer .grady-logo__name {
	font-size: var(--font-size-logo-footer);
}

/* —— Phone box —— */

.grady-phone-box {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-gap-phone);
	align-items: flex-end;
	padding: var(--space-2) var(--space-3);
	text-decoration: none;
	border: var(--border);
	border-radius: var(--radius-sm);
	transition: border-color var(--transition), background-color var(--transition);
}

.grady-phone-box:hover {
	border-color: var(--color-bronze);
	background: var(--color-surface-phone-hover);
}

.grady-phone-box__number {
	font-family: var(--font-display);
	font-size: var(--font-size-phone-box);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-phone-box);
	letter-spacing: var(--letter-spacing-phone);
	color: var(--color-white);
}

.grady-phone-box__label {
	font-size: var(--font-size-6xs);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-ui-xs);
	letter-spacing: var(--letter-spacing-nav);
	text-transform: uppercase;
	color: var(--color-bronze);
}

.grady-phone-box--footer {
	align-items: flex-start;
}

/* —— 1. Hero —— */

.grady-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: var(--hero-min-height);
}

.grady-hero__media {
	position: absolute;
	inset: 0;
	z-index: var(--z-base);
	overflow: hidden;
	background-color: var(--color-charcoal);
}

.grady-hero__media picture {
	display: block;
	width: 100%;
	height: 100%;
}

.grady-hero__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hero-photo-position);
	filter: var(--hero-photo-filter);
}

.grady-hero__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--hero-photo-grade);
	pointer-events: none;
}

.grady-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--overlay-hero);
	pointer-events: none;
}

.grady-header {
	position: relative;
	z-index: var(--z-header);
	padding-block: var(--hero-header-y);
	border-bottom: var(--border-light);
}

.grady-header__inner {
	display: grid;
	grid-template-columns: var(--grid-header);
	align-items: center;
	column-gap: var(--hero-header-column-gap);
	padding-inline-start: var(--container-gutter-header);
}

.grady-header .brand--wordmark {
	align-items: flex-start;
	padding-right: var(--space-4);
}

.grady-header .brand__name,
.grady-header .brand__tag {
	text-indent: 0;
}

.grady-header .grady-phone-box {
	gap: var(--spacing-micro-sm);
	align-items: flex-end;
	min-width: var(--hero-phone-min-width);
	padding: var(--hero-phone-padding-y) var(--hero-phone-padding-x);
}

.grady-header .grady-phone-box__number {
	font-size: var(--hero-phone-number-size);
	letter-spacing: var(--letter-spacing-phone);
}

.grady-header .grady-phone-box__label {
	letter-spacing: var(--hero-phone-label-tracking);
}

.grady-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: var(--size-nav-toggle-bar-gap);
	width: var(--container-nav-toggle);
	height: var(--container-nav-toggle);
	padding: 0;
	background: transparent;
	border: var(--border-light);
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.grady-nav-toggle span {
	display: block;
	width: var(--size-icon-sm);
	height: var(--size-hairline);
	margin-inline: auto;
	background: var(--color-ivory);
}

.grady-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--hero-nav-gap-row) var(--hero-nav-gap-col);
	margin: 0;
	padding: 0;
	list-style: none;
}

.grady-nav__list a {
	position: relative;
	padding-block: var(--hero-nav-link-y);
	font-family: var(--font-display);
	font-size: var(--font-size-3xs);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-ui);
	letter-spacing: var(--letter-spacing-nav);
	text-decoration: none;
	text-transform: uppercase;
	color: var(--color-text-on-dark);
	opacity: var(--nav-opacity-default);
	transition:
		color var(--motion-duration) var(--motion-ease),
		opacity var(--motion-duration) var(--motion-ease);
}

.grady-nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: calc(var(--spacing-micro-md) * -1);
	width: 100%;
	height: var(--size-hairline);
	background-color: var(--color-bronze);
	transform: scaleX(0);
	transform-origin: left center;
	opacity: var(--opacity-hidden);
	transition:
		transform var(--motion-duration) var(--motion-ease),
		opacity var(--motion-duration) var(--motion-ease);
}

.grady-nav__list a:hover {
	color: var(--color-bronze);
	opacity: var(--nav-opacity-hover);
}

.grady-nav__list a:hover::after {
	transform: scaleX(1);
	opacity: var(--opacity-visible);
}

.grady-nav {
	justify-self: start;
	padding-inline-start: var(--spacing-1);
}

.grady-hero__content {
	position: relative;
	z-index: var(--z-header);
	flex: 1;
	display: flex;
	align-items: center;
	padding-block: var(--hero-content-y);
	padding-inline-start: var(--container-gutter-header);
	padding-inline-end: var(--container-gutter);
}

.grady-hero__copy {
	max-width: var(--hero-copy-max);
}

.grady-hero__title {
	margin: 0 0 var(--hero-title-margin);
	font-family: var(--font-display);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-display);
	text-transform: uppercase;
}

.grady-hero__line {
	display: block;
	font-size: var(--font-size-hero-display);
}

.grady-hero__line + .grady-hero__line {
	margin-top: var(--hero-line-gap);
}

.grady-hero__line--white {
	color: var(--color-white);
	font-weight: var(--font-weight-bold);
}

.grady-hero__line--bronze {
	color: var(--color-bronze);
	font-weight: var(--font-weight-semibold);
}

.grady-hero__sub {
	margin: 0 0 var(--hero-sub-margin);
	max-width: var(--hero-sub-max);
	font-size: var(--font-size-body-lg);
	line-height: var(--line-height-quote);
	color: var(--color-text-on-dark-body);
}

.grady-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--hero-actions-gap);
}

.grady-hero__actions .grady-btn {
	min-width: var(--hero-btn-min);
	min-height: var(--hero-btn-height);
	padding: var(--space-2) var(--hero-btn-padding-x);
}

.grady-hero__actions .grady-btn--primary {
	min-width: var(--hero-btn-primary-min);
}

/* —— 2. Trust strip —— */

.grady-trust {
	background: var(--color-charcoal);
	border-bottom: var(--border-light);
}

.grady-trust__inner {
	display: grid;
	grid-template-columns: var(--grid-trust);
	align-items: center;
	padding-block: var(--space-3);
}

.grady-trust__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--trust-item-gap);
	min-width: 0;
	padding: var(--trust-item-padding-y) var(--trust-item-padding-x);
	font-size: var(--trust-item-font-size);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-ui);
	letter-spacing: var(--letter-spacing-trust);
	color: var(--color-text-on-dark-muted);
	border-right: var(--border-width) solid var(--divider-bronze-faint);
}

.grady-trust__item .grady-icon {
	width: var(--trust-icon-size);
	height: var(--trust-icon-size);
}

.grady-trust__item:last-child {
	border-right: none;
}

.grady-trust__item strong {
	font-weight: var(--font-weight-semibold);
	color: var(--color-bronze);
}

/* —— 3. Split section —— */

.grady-split {
	display: grid;
	grid-template-columns: var(--grid-split-text) var(--grid-split-media);
	min-height: var(--grid-split-min-height);
}

.grady-split--ivory {
	background: var(--color-ivory);
}

.grady-split__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: var(--section-y);
	padding-inline: var(--align-gutter) var(--space-8);
}

.grady-split__media {
	position: relative;
	min-height: var(--container-split-min);
}

.grady-split__media .photo-placeholder {
	width: 100%;
	height: 100%;
	min-height: inherit;
}

/* —— 4. Services —— */

.grady-services {
	padding-block: var(--section-y);
	background: var(--color-black);
}

.grady-services__header {
	margin-bottom: var(--space-6);
}

.grady-rule-heading {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.grady-rule-heading__line {
	flex: 1;
	height: var(--size-hairline);
	background: var(--divider-bronze-soft);
}

.grady-rule-heading__text {
	margin: 0;
	padding-inline: var(--space-2);
	font-family: var(--font-display);
	font-size: var(--font-size-rule-heading);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-ui-xs);
	letter-spacing: var(--letter-spacing-eyebrow);
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	color: var(--color-ivory);
}

.grady-services__grid {
	display: grid;
	grid-template-columns: var(--grid-services);
	border-top: var(--border-light);
	border-bottom: var(--border-light);
}

.grady-service-panel {
	position: relative;
	min-height: var(--grid-service-panel-min-height);
	overflow: hidden;
	border-right: var(--border-light);
	background-color: var(--color-graphite);
}

.grady-service-panel:last-child {
	border-right: none;
}

.grady-service-panel__photo {
	position: absolute;
	inset: 0;
	z-index: var(--z-base);
	transition: transform var(--motion-duration) var(--motion-ease);
}

.grady-service-panel:hover .grady-service-panel__photo {
	transform: scale(var(--motion-scale-photo));
}

.grady-service-panel__overlay {
	position: absolute;
	inset: 0;
	z-index: var(--z-overlay);
	background: var(--overlay-service-panel);
	transition: background var(--motion-duration) var(--motion-ease);
}

.grady-service-panel:hover .grady-service-panel__overlay {
	background: var(--overlay-service-panel-hover);
}

.grady-service-panel__content {
	position: relative;
	z-index: var(--z-content);
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--space-5) var(--space-4);
}

.grady-service-panel__content h3 {
	margin: var(--space-2) 0 var(--space-3);
	font-family: var(--font-display);
	font-size: var(--font-size-body-lg);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-ui-xs);
	letter-spacing: var(--letter-spacing-service);
	text-transform: uppercase;
	color: var(--color-white);
}

.grady-service-panel__content ul {
	flex: 1;
	margin: 0 0 var(--space-4);
	padding: 0;
	list-style: none;
	border-top: var(--border-width) solid var(--divider-ivory);
}

.grady-service-panel__content li {
	padding: var(--space-2) 0;
	font-size: var(--font-size-2xs);
	line-height: var(--line-height-ui);
	color: var(--color-text-on-dark-list);
	border-bottom: var(--border-width) solid var(--divider-ivory-faint);
}

.grady-service-panel__content li:first-child {
	padding-top: var(--space-3);
}

.grady-service-panel__link {
	padding-top: var(--space-1);
	font-family: var(--font-display);
	font-size: var(--font-size-3xs);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-ui);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-bronze);
	transition: color var(--motion-duration) var(--motion-ease);
}

.grady-service-panel__link::after {
	content: " \2192";
	display: inline-block;
	transition: transform var(--motion-duration) var(--motion-ease);
}

.grady-service-panel__link:hover {
	color: var(--color-limestone);
}

.grady-service-panel__link:hover::after {
	transform: translateX(var(--motion-arrow-md));
}

/* —— 5. Specialty strip —— */

.grady-specialty {
	padding-block: var(--section-y-tight);
	background: var(--color-ivory);
	border-top: var(--border-width) solid var(--divider-bronze-faint);
}

.grady-specialty__title {
	margin: 0 0 var(--space-4);
	font-family: var(--font-display);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-ui-xs);
	letter-spacing: var(--letter-spacing-specialty);
	text-align: center;
	text-transform: uppercase;
	color: var(--color-black);
}

.grady-specialty__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.grady-specialty__list li {
	display: flex;
	align-items: center;
	gap: var(--spacing-gap-specialty);
	padding: var(--space-2) var(--space-4);
	font-family: var(--font-display);
	font-size: var(--font-size-4xs);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-ui-xs);
	letter-spacing: var(--letter-spacing-btn-small);
	text-transform: uppercase;
	color: var(--color-text-on-light-muted);
	border-right: var(--border-width) solid var(--divider-bronze-soft);
	transition: color var(--transition);
}

.grady-specialty__list li:last-child {
	border-right: none;
}

.grady-specialty__list li:hover {
	color: var(--color-bronze-dark);
}

.grady-specialty__list .grady-icon {
	color: var(--color-text-on-light-icon);
	transition: color var(--transition);
}

.grady-specialty__list li:hover .grady-icon {
	color: var(--color-bronze);
}

/* —— 6. Process + Insurance —— */

.grady-process-insurance {
	display: grid;
	grid-template-columns: var(--grid-process);
}

.grady-process-insurance__left {
	display: flex;
	background: var(--color-charcoal);
}

.grady-process-insurance__right {
	background: var(--color-ivory);
}

.grady-process-insurance__left .grady-process-insurance__inner {
	display: flex;
	flex-direction: column;
	flex: 1;
	width: 100%;
	padding: var(--section-y) var(--space-8) var(--section-y) var(--align-gutter);
}

.grady-process-insurance__right .grady-process-insurance__inner {
	padding: var(--section-y) var(--align-gutter) var(--section-y) var(--space-8);
}

.grady-process-insurance__left .grady-process {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: var(--process-timeline-max);
	margin: var(--space-5) auto 0;
	padding: 0;
	list-style: none;
}

.grady-process-insurance__left .grady-process::before {
	content: "";
	position: absolute;
	top: calc(var(--process-hex-height) / 2);
	bottom: calc(var(--process-hex-height) / 2);
	left: 50%;
	width: var(--size-hairline);
	background: var(--divider-bronze-process);
	transform: translateX(-50%);
	pointer-events: none;
}

.grady-process-insurance__left .grady-process li {
	position: relative;
	z-index: var(--z-base);
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding-bottom: var(--process-step-gap);
	text-align: center;
}

.grady-process-insurance__left .grady-process li:last-child {
	padding-bottom: 0;
}

.grady-process__hex {
	position: relative;
	z-index: 1;
	width: var(--process-hex-width);
	height: var(--process-hex-height);
	margin: 0 auto var(--space-3);
}

.grady-process__hex-frame {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--color-bronze);
	opacity: var(--opacity-hidden);
	transition: opacity var(--motion-duration) var(--motion-ease);
}

.grady-process__hex-frame::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--color-bronze);
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.grady-process__hex-frame::after {
	content: "";
	position: absolute;
	inset: 3px;
	background: var(--color-charcoal);
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.grady-process li.is-revealed .grady-process__hex-frame {
	opacity: var(--opacity-visible);
}

/* Two-column numbered process — final homepage timeline (Lighthouse) */

.grady-process-insurance__left .grady-process--steps {
	align-items: stretch;
	align-self: stretch;
	width: 100%;
	max-width: 28rem;
	margin: var(--space-6) 0 0;
}

.grady-process-insurance__left .grady-process--steps::before {
	display: none;
}

.grady-process--steps li {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	gap: 0 var(--space-5);
	align-items: start;
	width: 100%;
	padding-bottom: var(--space-6);
	text-align: left;
	opacity: var(--opacity-hidden);
	transform: translateY(0.375rem);
	transition:
		opacity var(--motion-duration) var(--motion-ease),
		transform var(--motion-duration) var(--motion-ease);
}

.grady-process--steps li.is-revealed {
	opacity: var(--opacity-visible);
	transform: none;
}

.grady-process--steps li:last-child {
	padding-bottom: 0;
}

.grady-process__step-num {
	display: block;
	padding-top: 0.125rem;
	font-family: var(--font-display);
	font-size: clamp(1.375rem, 2.5vw, 1.75rem);
	font-weight: var(--font-weight-semibold);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	letter-spacing: 0.06em;
	text-align: right;
	color: var(--color-bronze);
}

.grady-process__step-body {
	padding-left: var(--space-5);
	border-left: var(--border-width) solid var(--divider-bronze-process);
}

.grady-process__step-title {
	display: block;
	margin: 0 0 var(--space-2);
	font-family: var(--font-display);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-ui-xs);
	letter-spacing: var(--letter-spacing-process);
	text-transform: uppercase;
	color: var(--color-ivory);
}

.grady-process__step-desc {
	display: block;
	margin: 0;
	max-width: 20rem;
	font-size: var(--font-size-3xs);
	line-height: var(--line-height-process);
	color: var(--color-text-on-dark-subtle);
}

.grady-process__copy {
	max-width: var(--process-copy-max);
}

.grady-process-insurance__left .grady-process li strong {
	display: block;
	margin-bottom: var(--space-1);
	font-family: var(--font-display);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-ui-xs);
	letter-spacing: var(--letter-spacing-process);
	text-transform: uppercase;
	color: var(--color-ivory);
}

.grady-process-insurance__left .grady-process li span {
	display: block;
	font-size: var(--font-size-3xs);
	line-height: var(--line-height-process);
	color: var(--color-text-on-dark-subtle);
}

.grady-checklist {
	margin: 0 0 var(--space-5);
	padding: 0;
	list-style: none;
}

.grady-checklist li {
	position: relative;
	padding: var(--space-2) 0 var(--space-2) var(--size-icon-md);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-list);
	color: var(--color-text-on-light);
	border-bottom: var(--border-width) solid var(--divider-bronze-muted);
}

.grady-checklist li:first-child {
	padding-top: var(--space-1);
}

.grady-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: var(--size-icon-sm);
	width: var(--size-check-bullet);
	height: var(--size-check-bullet);
	border: var(--border-width) solid var(--color-bronze);
	border-radius: var(--radius-full);
}

.grady-process-insurance__photo {
	margin-top: var(--space-1);
}

.grady-process-insurance__photo.photo-placeholder {
	border: var(--border-placeholder);
}

/* —— 7. Reviews —— */

.grady-reviews-area {
	padding-block: var(--section-y);
	background: var(--color-limestone);
}

.grady-reviews .grady-heading {
	margin-bottom: var(--space-5);
}

.grady-reviews__grid {
	display: grid;
	grid-template-columns: var(--grid-reviews);
	gap: var(--space-3);
}

.grady-review-card {
	margin: 0;
	padding: var(--space-4) var(--space-4);
	background: var(--color-surface-review);
	border: var(--border-review);
	box-shadow: var(--shadow-review);
	transition:
		transform var(--motion-duration) var(--motion-ease),
		box-shadow var(--motion-duration) var(--motion-ease);
}

.grady-review-card:hover {
	transform: translateY(var(--motion-lift-sm));
	box-shadow: var(--shadow-review-hover);
}

.grady-review-card p {
	margin: 0 0 var(--space-3);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-quote);
	color: var(--color-text-on-light);
}

.grady-review-card footer {
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-ui);
	color: var(--color-bronze-dark);
}

/* —— 8. Map —— */

.grady-map {
	padding-block: var(--section-y);
	background: var(--color-graphite);
	border-top: var(--border-light);
}

.grady-map__inner {
	display: grid;
	grid-template-columns: var(--grid-map);
	gap: var(--col-gap);
	align-items: center;
}

.grady-map__copy .grady-heading {
	margin-bottom: var(--space-3);
}

.grady-map__copy .grady-body {
	margin-bottom: var(--space-4);
}

.grady-map__visual {
	position: relative;
	min-height: var(--container-map-min);
	background: var(--overlay-map);
	border: var(--border-light);
}

.grady-map__visual::before {
	content: "";
	position: absolute;
	inset: var(--map-frame-inset);
	border: var(--border-width) dashed var(--divider-bronze-dashed);
	border-radius: var(--radius-sm);
}

.grady-map__pins {
	position: absolute;
	inset: 0;
	z-index: var(--z-map-pins);
	margin: 0;
	padding: 0;
	list-style: none;
}

.grady-map__pins li {
	position: absolute;
	left: var(--x);
	top: var(--y);
	padding: var(--space-1) var(--space-2);
	font-family: var(--font-display);
	font-size: var(--font-size-5xs);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-ui-xs);
	letter-spacing: var(--letter-spacing-process);
	text-transform: uppercase;
	color: var(--color-ivory);
	background: var(--color-surface-pin);
	border: var(--border-pin);
	transform: translate(-50%, -50%);
}

.grady-map__pins li::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: calc(var(--spacing-micro-md) * -1);
	width: var(--size-pin-dot);
	height: var(--size-pin-dot);
	background: var(--color-bronze);
	border-radius: var(--radius-full);
	transform: translateX(-50%);
	animation: grady-pin-pulse var(--motion-pin-pulse-duration) var(--ease-base) infinite;
}

@keyframes grady-pin-pulse {
	0%,
	100% {
		opacity: var(--opacity-visible);
		transform: translateX(-50%) scale(var(--motion-scale-base));
	}

	50% {
		opacity: var(--motion-pin-pulse-opacity);
		transform: translateX(-50%) scale(var(--motion-pin-pulse-scale));
	}
}

/* —— 9. Final CTA —— */

.grady-final-cta {
	position: relative;
	overflow: hidden;
}

.grady-final-cta__media {
	position: absolute;
	inset: 0;
	z-index: var(--z-base);
	background-color: var(--color-bg-placeholder-deep);
}

.grady-final-cta__overlay {
	position: absolute;
	inset: 0;
	z-index: var(--z-base);
	background: var(--overlay-final-cta);
}

.grady-final-cta__inner {
	position: relative;
	z-index: var(--z-content);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-4);
	padding-block: var(--section-cta-y);
}

.grady-final-cta__copy .grady-heading {
	margin-bottom: var(--space-2);
}

.grady-final-cta__copy .grady-body {
	margin-bottom: 0;
}

.grady-final-cta__phone {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	align-items: flex-end;
	padding: var(--space-4) var(--space-5);
	text-decoration: none;
	background: var(--color-bronze);
	border: var(--border-width) solid var(--color-bronze);
	border-radius: var(--radius-sm);
	transition: background-color var(--transition), border-color var(--transition);
}

.grady-final-cta__phone:hover {
	background: var(--color-limestone);
	border-color: var(--color-limestone);
}

.grady-final-cta__number {
	font-family: var(--font-display);
	font-size: var(--font-size-cta-phone);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-phone);
	letter-spacing: var(--letter-spacing-trust);
	color: var(--color-black);
}

.grady-final-cta__label {
	font-size: var(--font-size-5xs);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-ui-xs);
	letter-spacing: var(--letter-spacing-nav);
	text-transform: uppercase;
	color: var(--color-text-on-light-muted);
}

/* —— 10. Footer —— */

.grady-footer {
	background: var(--color-black);
	border-top: var(--border-light);
}

.grady-footer__inner {
	display: grid;
	grid-template-columns: var(--grid-footer);
	gap: var(--space-4) var(--space-6);
	padding-block: var(--section-y) var(--space-6);
}

.grady-footer__brand p {
	max-width: var(--container-footer-brand);
	margin: var(--space-3) 0 0;
	font-size: var(--font-size-xs);
	line-height: var(--line-height-quote);
	color: var(--color-text-on-dark-faint);
}

.grady-footer__col h3 {
	margin: 0 0 var(--space-3);
	font-family: var(--font-display);
	font-size: var(--font-size-3xs);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-ui-xs);
	letter-spacing: var(--letter-spacing-nav);
	text-transform: uppercase;
	color: var(--color-bronze);
}

.grady-footer__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.grady-footer__col li {
	margin-bottom: var(--spacing-micro-lg);
}

.grady-footer__col li:last-child {
	margin-bottom: 0;
}

.grady-footer__col a {
	font-size: var(--font-size-xs);
	line-height: var(--line-height-list);
	text-decoration: none;
	color: var(--color-text-on-dark-subtle);
	transition: color var(--transition);
}

.grady-footer__col a:hover {
	color: var(--color-ivory);
}

.grady-footer__legal {
	padding-block: var(--space-3) var(--space-4);
	border-top: var(--border-light);
}

.grady-footer__legal p {
	margin: 0;
	font-size: var(--font-size-3xs);
	line-height: var(--line-height-list);
	color: var(--muted-dark);
}

/* —— Mobile nav —— */

body.is-nav-open {
	overflow: hidden;
}

body.is-nav-open .grady-nav-toggle span:nth-child(1) {
	transform: translateY(var(--motion-nav-bar)) rotate(45deg);
}

body.is-nav-open .grady-nav-toggle span:nth-child(2) {
	opacity: var(--opacity-hidden);
}

body.is-nav-open .grady-nav-toggle span:nth-child(3) {
	transform: translateY(calc(var(--motion-nav-bar) * -1)) rotate(-45deg);
}

/* —— Responsive —— */

@media (max-width: 75rem) {
	.grady-services__grid {
		grid-template-columns: var(--grid-services-tablet);
	}

	.grady-service-panel:nth-child(2) {
		border-right: none;
	}

	.grady-service-panel:nth-child(1),
	.grady-service-panel:nth-child(2) {
		border-bottom: var(--border-light);
	}

	.grady-reviews__grid {
		grid-template-columns: var(--grid-reviews-tablet);
	}
}

@media (max-width: 64rem) {
	.grady-header__inner {
		grid-template-columns: var(--grid-header-mobile);
		grid-template-areas:
			"logo toggle"
			"phone phone";
		gap: var(--space-3);
	}

	.grady-logo,
	.brand--wordmark {
		grid-area: logo;
	}

	.brand__name {
		font-size: var(--font-size-brand-mobile);
		letter-spacing: var(--letter-spacing-brand-mobile);
		text-indent: var(--letter-spacing-brand-mobile);
	}

	.brand__tag {
		font-size: var(--font-size-brand-tag-mobile);
		letter-spacing: var(--letter-spacing-brand-tag-mobile);
		text-indent: var(--letter-spacing-brand-tag-mobile);
	}

	.brand--wordmark {
		min-width: var(--container-brand-min-mobile);
		padding-right: 0;
	}

	.grady-header__inner {
		padding-inline-start: var(--gutter);
		column-gap: var(--space-3);
	}

	.grady-header .brand__name,
	.grady-header .brand__tag {
		text-indent: 0;
	}

	.grady-header .grady-phone-box {
		min-width: 0;
	}

	.grady-hero__content {
		padding-inline: var(--gutter);
		padding-block: var(--section-hero-y);
	}

	.grady-hero__photo {
		object-position: var(--hero-photo-position-tablet);
	}

	.grady-nav-toggle {
		display: flex;
		grid-area: toggle;
		justify-self: end;
	}

	.grady-nav-toggle span {
		transition: transform var(--transition), opacity var(--transition);
	}

	.grady-phone-box {
		grid-area: phone;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin-top: var(--space-1);
	}

	.grady-nav {
		position: fixed;
		inset: 0;
		z-index: var(--z-nav-mobile);
		display: flex;
		align-items: center;
		justify-content: center;
		justify-self: auto;
		background: var(--color-surface-nav-mobile);
		opacity: var(--opacity-hidden);
		visibility: hidden;
		transition: opacity var(--transition), visibility var(--transition);
	}

	body.is-nav-open .grady-nav {
		opacity: var(--opacity-visible);
		visibility: visible;
	}

	.grady-nav__list {
		flex-direction: column;
		align-items: center;
		gap: var(--space-4);
	}

	.grady-nav__list a {
		font-size: var(--font-size-nav-mobile);
	}

	.grady-split {
		grid-template-columns: var(--grid-single);
		min-height: auto;
	}

	.grady-split__text {
		padding-inline: var(--gutter);
	}

	.grady-split__media {
		order: -1;
		min-height: var(--container-split-mobile);
	}

	.grady-process-insurance {
		grid-template-columns: var(--grid-single);
	}

	.grady-process-insurance__left .grady-process-insurance__inner,
	.grady-process-insurance__right .grady-process-insurance__inner {
		padding-inline: var(--gutter);
	}

	.grady-process-insurance__left .grady-process--steps {
		margin-top: var(--space-4);
		max-width: none;
	}

	.grady-process--steps li {
		grid-template-columns: 3.5rem minmax(0, 1fr);
		gap: 0 var(--space-4);
		padding-bottom: var(--space-5);
	}

	.grady-process__step-body {
		padding-left: var(--space-4);
	}

	.grady-process__step-num {
		font-size: 1.25rem;
	}

	.grady-trust__inner {
		grid-template-columns: var(--grid-trust-tablet);
	}

	.grady-trust__item:nth-child(3n) {
		border-right: none;
	}

	.grady-trust__item:last-child {
		border-right: none;
	}

	.grady-map__inner {
		grid-template-columns: var(--grid-single);
		gap: var(--space-6);
	}

	.grady-footer__inner {
		grid-template-columns: var(--grid-footer-tablet);
		gap: var(--space-5) var(--space-4);
	}

	.grady-footer__brand {
		grid-column: 1 / -1;
	}

	.grady-footer__contact {
		grid-column: 1 / -1;
	}
}

@media (max-width: 48rem) {
	.grady-services__grid {
		grid-template-columns: var(--grid-single);
	}

	.grady-service-panel {
		border-right: none;
		border-bottom: var(--border-light);
		min-height: var(--container-service-min-mobile);
	}

	.grady-trust__inner {
		grid-template-columns: var(--grid-trust-mobile);
	}

	.grady-trust__item {
		justify-content: center;
		padding: var(--trust-item-padding-y) var(--space-3);
		border-bottom: var(--border-width) solid var(--divider-bronze-muted);
	}

	.grady-trust__item:nth-child(odd) {
		border-right: var(--border-width) solid var(--divider-bronze-faint);
	}

	.grady-trust__item:nth-child(even),
	.grady-trust__item:nth-child(3n) {
		border-right: none;
	}

	.grady-trust__item:last-child {
		grid-column: 1 / -1;
		border-right: none;
		border-bottom: none;
	}

	.grady-trust__item:nth-last-child(2) {
		border-bottom: var(--border-width) solid var(--divider-bronze-muted);
	}

	.grady-specialty__list li {
		flex: 1 1 100%;
		justify-content: center;
		padding: var(--space-2) var(--space-3);
		border-right: none;
		border-bottom: var(--border-width) solid var(--divider-bronze-muted);
	}

	.grady-reviews__grid {
		grid-template-columns: var(--grid-single);
	}

	.grady-hero__photo {
		object-position: var(--hero-photo-position-mobile);
	}

	.grady-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.grady-btn {
		width: 100%;
	}

	.grady-final-cta__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.grady-final-cta__phone {
		align-items: flex-start;
		width: 100%;
	}

	.grady-footer__inner {
		grid-template-columns: var(--grid-single);
	}
}

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

	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}

	.grady-process li.is-revealed .grady-process__hex-frame,
	.grady-process--steps li.is-revealed {
		opacity: var(--opacity-visible) !important;
		transform: none !important;
	}

	.grady-service-panel__photo {
		transform: none !important;
	}
}

/* —— Lighthouse Phase 1A — Homepage hero, trust, service routing —— */

.grady-hero--lighthouse .grady-hero__eyebrow {
	color: var(--color-bronze);
	max-width: 36rem;
}

.grady-hero--lighthouse .grady-hero__title {
	margin: 0 0 var(--hero-title-margin);
}

.grady-hero__scope {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0 0 var(--space-4);
	padding: 0;
	list-style: none;
}

.grady-hero__scope li {
	padding: var(--space-1) var(--space-3);
	font-family: var(--font-display);
	font-size: var(--font-size-4xs);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-ui);
	letter-spacing: var(--letter-spacing-btn-small);
	text-transform: uppercase;
	color: var(--color-text-on-dark-muted);
	border: var(--border-width) solid var(--divider-bronze-soft);
	background: rgb(0 0 0 / 0.22);
}

.grady-hero__credentials {
	margin: 0 0 var(--space-5);
	max-width: var(--hero-sub-max);
	font-size: var(--font-size-2xs);
	line-height: var(--line-height-body);
	color: var(--color-text-on-dark-muted);
}

.grady-hero__actions .grady-btn--primary {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15rem;
}

.grady-hero__wait {
	margin-top: var(--space-6);
	padding: var(--space-4);
	max-width: 32rem;
	border: var(--border-width) solid var(--divider-bronze-soft);
	background: rgb(0 0 0 / 0.28);
}

.grady-hero__wait-title {
	margin: 0 0 var(--space-3);
	font-family: var(--font-display);
	font-size: var(--font-size-3xs);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-ui);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-bronze);
}

.grady-hero__wait-list {
	margin: 0;
	padding: 0 0 0 var(--space-4);
	font-size: var(--font-size-2xs);
	line-height: var(--line-height-body);
	color: var(--color-text-on-dark-muted);
}

.grady-hero__wait-list li + li {
	margin-top: var(--space-2);
}

.grady-trust--lighthouse .grady-trust__inner {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grady-services--lighthouse .grady-service-panel--featured {
	min-height: clamp(18rem, 28vw, 22rem);
	border-top: var(--border-width) solid var(--divider-bronze-soft);
	border-bottom: var(--border-width) solid var(--divider-bronze-soft);
}

.grady-services--lighthouse .grady-service-panel--featured .grady-service-panel__content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	grid-template-rows: auto auto 1fr auto;
	grid-template-areas:
		"badge icon"
		"title title"
		"list list"
		"more more";
	align-content: start;
	padding: var(--space-6) var(--space-8);
	max-width: 52rem;
}

.grady-services--lighthouse .grady-service-panel--featured .grady-service-panel__badge {
	grid-area: badge;
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--font-size-4xs);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-ui);
	letter-spacing: var(--letter-spacing-eyebrow);
	text-transform: uppercase;
	color: var(--color-bronze);
}

.grady-services--lighthouse .grady-service-panel--featured .grady-icon--lg {
	grid-area: icon;
	justify-self: end;
}

.grady-services--lighthouse .grady-service-panel--featured h3 {
	grid-area: title;
	margin: var(--space-2) 0 var(--space-3);
	font-size: clamp(1.25rem, 2.5vw, 1.625rem);
}

.grady-services--lighthouse .grady-service-panel--featured ul {
	grid-area: list;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--space-4);
}

.grady-services--lighthouse .grady-service-panel--featured .grady-service-panel__more {
	grid-area: more;
	align-self: end;
	padding-top: var(--space-3);
}

.grady-services--lighthouse .grady-service-panel--featured .grady-service-panel__overlay {
	background: linear-gradient(
		105deg,
		rgb(8 8 8 / 0.92) 0%,
		rgb(8 8 8 / 0.72) 42%,
		rgb(8 8 8 / 0.45) 100%
	);
}

.grady-services__grid--lighthouse {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: none;
}

.grady-services__grid--lighthouse .grady-service-panel:nth-child(3n) {
	border-right: none;
}

.grady-services__grid--lighthouse .grady-service-panel:nth-child(n + 4) {
	border-top: var(--border-light);
}

.grady-services--lighthouse .grady-service-panel__more {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-top: auto;
	padding: var(--space-2) 0 var(--space-1);
	font-family: var(--font-display);
	font-size: var(--font-size-3xs);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-ui);
	letter-spacing: var(--letter-spacing-wide);
	text-decoration: none;
	text-transform: uppercase;
	color: var(--color-bronze);
	border-bottom: var(--border-width) solid transparent;
	transition:
		color var(--motion-duration) var(--motion-ease),
		border-color var(--motion-duration) var(--motion-ease),
		transform var(--motion-duration) var(--motion-ease);
}

.grady-services--lighthouse .grady-service-panel__more:hover,
.grady-services--lighthouse .grady-service-panel__more:focus-visible {
	color: var(--color-limestone);
	border-bottom-color: var(--color-bronze);
	transform: translateX(0.2rem);
}

.grady-services--lighthouse .grady-service-panel__more-mark {
	font-size: 1.05em;
	font-weight: var(--font-weight-bold);
	color: var(--color-bronze);
}

.grady-services--lighthouse .grady-service-panel__more:focus-visible {
	color: var(--color-limestone);
	border-bottom-color: var(--color-bronze);
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

.grady-services--lighthouse .grady-service-panel__more:hover .grady-service-panel__more-mark,
.grady-services--lighthouse .grady-service-panel__more:focus-visible .grady-service-panel__more-mark {
	color: var(--color-limestone);
}

/* Lighthouse — static CSS premium hero background (no image) */

.grady-hero--lighthouse .grady-hero__media--static {
	background-color: var(--black);
	background-image:
		repeating-linear-gradient(
			0deg,
			transparent,
			transparent 2px,
			rgb(255 255 255 / 0.012) 2px,
			rgb(255 255 255 / 0.012) 3px
		),
		repeating-linear-gradient(
			90deg,
			transparent,
			transparent 2px,
			rgb(255 255 255 / 0.008) 2px,
			rgb(255 255 255 / 0.008) 3px
		),
		radial-gradient(circle at 78% 18%, rgb(192 154 93 / 0.28), transparent 34%),
		radial-gradient(circle at 95% 80%, rgb(192 154 93 / 0.1), transparent 30%),
		linear-gradient(
			90deg,
			rgb(0 0 0 / 0.98) 0%,
			rgb(10 10 10 / 0.92) 42%,
			rgb(18 18 18 / 0.88) 100%
		);
}

.grady-hero--lighthouse .grady-hero__media::before {
	background: none;
}

.grady-hero--lighthouse .grady-hero__overlay {
	background:
		radial-gradient(ellipse 120% 100% at 18% 50%, rgb(0 0 0 / 0.45), transparent 55%),
		radial-gradient(ellipse 80% 70% at 100% 100%, rgb(0 0 0 / 0.22), transparent 50%);
}

@media (max-width: 48rem) {
	.grady-hero--lighthouse .grady-hero__media--static {
		background-image:
			repeating-linear-gradient(
				0deg,
				transparent,
				transparent 2px,
				rgb(255 255 255 / 0.012) 2px,
				rgb(255 255 255 / 0.012) 3px
			),
			repeating-linear-gradient(
				90deg,
				transparent,
				transparent 2px,
				rgb(255 255 255 / 0.008) 2px,
				rgb(255 255 255 / 0.008) 3px
			),
			radial-gradient(circle at 88% 14%, rgb(192 154 93 / 0.22), transparent 32%),
			radial-gradient(circle at 100% 72%, rgb(192 154 93 / 0.08), transparent 28%),
			linear-gradient(
				90deg,
				rgb(0 0 0 / 0.99) 0%,
				rgb(8 8 8 / 0.96) 58%,
				rgb(16 16 16 / 0.9) 100%
			);
	}
}

/* Lighthouse — mobile header clearance for fixed global header (homepage hero only) */

@media (max-width: 64rem) {
	.grady-home .grady-hero--lighthouse .grady-hero__content {
		align-items: flex-start;
		padding-top: calc(var(--grady-header-offset) + var(--space-m));
		padding-bottom: var(--section-hero-y);
	}
}

/* Lighthouse Phase 1A Fix — homepage icon consistency */

.grady-home .grady-icon {
	color: var(--color-bronze);
}

.grady-home .grady-trust__item .grady-icon {
	color: var(--color-text-on-dark-muted);
}

.grady-home .grady-service-panel__content .grady-icon--lg {
	color: var(--color-bronze);
}

.grady-home .grady-icon [stroke] {
	stroke: currentColor;
}

/* Lighthouse Phase 1A Fix — intentional placeholder staging */

.grady-home .photo-placeholder {
	border: var(--border-width) solid var(--divider-bronze-muted);
	background:
		repeating-linear-gradient(
			-45deg,
			transparent,
			transparent 0.5rem,
			rgb(176 141 87 / 0.04) 0.5rem,
			rgb(176 141 87 / 0.04) 1rem
		),
		var(--color-graphite);
}

.grady-home .photo-placeholder__label {
	font-size: var(--font-size-4xs);
	letter-spacing: var(--letter-spacing-eyebrow);
	text-transform: uppercase;
	color: var(--color-text-on-dark-subtle);
	opacity: 0.72;
}

.grady-map__areas-link {
	display: inline-block;
	margin-top: var(--space-1);
	font-family: var(--font-display);
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-ui);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-bronze);
	transition: color var(--transition);
}

.grady-map__areas-link:hover,
.grady-map__areas-link:focus-visible {
	color: var(--color-limestone);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media (max-width: 75rem) {
	.grady-services__grid--lighthouse {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.grady-services__grid--lighthouse .grady-service-panel:nth-child(3n) {
		border-right: var(--border-light);
	}

	.grady-services__grid--lighthouse .grady-service-panel:nth-child(2n) {
		border-right: none;
	}

	.grady-services__grid--lighthouse .grady-service-panel:nth-child(n + 3) {
		border-top: var(--border-light);
	}

	.grady-trust--lighthouse .grady-trust__inner {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 48rem) {
	.grady-hero__scope {
		gap: var(--space-1);
	}

	.grady-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.grady-hero__actions .grady-btn {
		width: 100%;
	}

	.grady-services--lighthouse .grady-service-panel--featured .grady-service-panel__content {
		grid-template-columns: 1fr;
		grid-template-areas:
			"badge"
			"icon"
			"title"
			"list"
			"more";
		padding: var(--space-5) var(--space-4);
	}

	.grady-services--lighthouse .grady-service-panel--featured ul {
		grid-template-columns: 1fr;
	}

	.grady-services__grid--lighthouse {
		grid-template-columns: 1fr;
	}

	.grady-services__grid--lighthouse .grady-service-panel {
		border-right: none;
		border-top: var(--border-light);
	}

	.grady-services__grid--lighthouse .grady-service-panel:first-child {
		border-top: none;
	}

	.grady-trust--lighthouse .grady-trust__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* —— Lighthouse Phase 1B — Emergency Response Guide —— */

.grady-emergency-guide {
	padding-block: var(--section-y);
	background: var(--color-charcoal);
	border-top: var(--border-width) solid var(--divider-bronze-faint);
}

.grady-emergency-guide__header {
	max-width: 40rem;
	margin-bottom: var(--space-8);
}

.grady-emergency-guide__eyebrow {
	color: var(--color-bronze);
}

.grady-emergency-guide__lede {
	margin-bottom: 0;
	max-width: 36rem;
}

.grady-emergency-guide__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: var(--space-8);
	align-items: start;
}

.grady-emergency-guide__select {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.grady-emergency-guide__card {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	width: 100%;
	padding: var(--space-4) var(--space-5);
	font-family: var(--font-display);
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-ui);
	letter-spacing: var(--letter-spacing-wide);
	text-align: left;
	text-transform: uppercase;
	color: var(--color-text-on-dark-muted);
	background: rgb(0 0 0 / 0.22);
	border: var(--border-width) solid var(--divider-bronze-faint);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition:
		border-color var(--motion-duration) var(--motion-ease),
		box-shadow var(--motion-duration) var(--motion-ease),
		background-color var(--motion-duration) var(--motion-ease),
		color var(--motion-duration) var(--motion-ease),
		transform var(--motion-duration) var(--motion-ease);
}

.grady-emergency-guide__card:hover {
	border-color: var(--color-bronze);
	box-shadow: 0 0 0 1px rgb(176 141 87 / 0.35);
	color: var(--color-ivory);
}

.grady-emergency-guide__card.is-active {
	border-color: var(--color-bronze);
	background: rgb(176 141 87 / 0.08);
	box-shadow: 0 0.35rem 1.25rem rgb(0 0 0 / 0.28);
	color: var(--color-ivory);
	transform: translateY(-1px);
}

.grady-emergency-guide__card:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

.grady-emergency-guide__card-icon {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	color: var(--color-bronze);
}

.grady-emergency-guide__card.is-active .grady-emergency-guide__card-icon {
	color: var(--color-limestone);
}

.grady-emergency-guide__panels {
	position: relative;
	min-height: 28rem;
}

.grady-emergency-guide__panel {
	padding: var(--space-6) var(--space-6) var(--space-5);
	background: rgb(0 0 0 / 0.28);
	border: var(--border-width) solid var(--divider-bronze-soft);
	border-radius: var(--radius-sm);
}

.grady-emergency-guide__panel[hidden] {
	display: none;
}

.grady-emergency-guide__panel-title {
	margin: 0 0 var(--space-4);
	font-family: var(--font-display);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-ui-xs);
	letter-spacing: var(--letter-spacing-process);
	text-transform: uppercase;
	color: var(--color-ivory);
}

.grady-emergency-guide__panel-kicker {
	margin: 0 0 var(--space-1);
	font-size: var(--font-size-4xs);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-ui);
	letter-spacing: var(--letter-spacing-eyebrow);
	text-transform: uppercase;
	color: var(--color-bronze);
}

.grady-emergency-guide__panel-response {
	margin: 0 0 var(--space-4);
	font-family: var(--font-display);
	font-size: var(--font-size-body-lg);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-heading);
	color: var(--color-ivory);
}

.grady-emergency-guide__panel-intro {
	margin: 0 0 var(--space-5);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-body-lg);
	color: var(--color-text-on-dark-muted);
}

.grady-emergency-guide__panel-subhead {
	margin: 0 0 var(--space-3);
	font-family: var(--font-display);
	font-size: var(--font-size-3xs);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-ui);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-on-dark-muted);
}

.grady-emergency-guide__checks,
.grady-emergency-guide__equipment {
	margin: 0 0 var(--space-5);
	padding: 0;
	list-style: none;
}

.grady-emergency-guide__checks li,
.grady-emergency-guide__equipment li {
	position: relative;
	padding: var(--space-2) 0 var(--space-2) var(--space-5);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-body);
	color: var(--color-text-on-dark-muted);
	border-bottom: var(--border-width) solid var(--divider-bronze-faint);
}

.grady-emergency-guide__checks li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: var(--space-2);
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-bold);
	color: var(--color-bronze);
}

.grady-emergency-guide__equipment li::before {
	content: "\2022";
	position: absolute;
	left: 0.15rem;
	top: var(--space-2);
	color: var(--color-bronze);
}

.grady-emergency-guide__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4) var(--space-5);
	padding-top: var(--space-2);
}

.grady-emergency-guide__service-link {
	font-family: var(--font-display);
	font-size: var(--font-size-2xs);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-ui);
	letter-spacing: var(--letter-spacing-wide);
	text-decoration: none;
	text-transform: uppercase;
	color: var(--color-bronze);
	transition: color var(--transition);
}

.grady-emergency-guide__service-link:hover,
.grady-emergency-guide__service-link:focus-visible {
	color: var(--color-limestone);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.grady-emergency-guide--service .grady-emergency-guide__panels {
	min-height: 32rem;
}

.grady-emergency-guide__meta {
	margin: 0 0 var(--space-5);
	padding: var(--space-4) var(--space-5);
	background: rgb(0 0 0 / 0.18);
	border: var(--border-width) solid var(--divider-bronze-faint);
	border-radius: var(--radius-sm);
}

.grady-emergency-guide__meta-item {
	margin: 0 0 var(--space-3);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-body-lg);
	color: var(--color-text-on-dark-muted);
}

.grady-emergency-guide__meta-item:last-child {
	margin-bottom: 0;
}

.grady-emergency-guide__meta-label {
	display: block;
	margin-bottom: var(--space-1);
	font-family: var(--font-display);
	font-size: var(--font-size-3xs);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-ui);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-bronze);
}

.grady-emergency-guide__checks--shutoffs li::before {
	content: "\2022";
	color: var(--color-bronze);
}

.grady-emergency-guide__checks--avoid li::before {
	content: "\2717";
	color: rgb(200 120 100 / 0.85);
}

.grady-emergency-guide[hidden] {
	display: none;
}

.grady-emergency-guide__text-btn {
	border-color: var(--color-bronze);
	color: var(--color-ivory);
}

.grady-emergency-guide__text-btn:hover,
.grady-emergency-guide__text-btn:focus-visible {
	border-color: var(--color-limestone);
	color: var(--color-limestone);
	background: rgb(176 141 87 / 0.08);
}

.grady-emergency-guide__disclaimer {
	margin: var(--space-6) 0 0;
	max-width: 48rem;
	font-size: var(--font-size-2xs);
	line-height: var(--line-height-body);
	color: var(--color-text-on-dark-muted);
}

@media (max-width: 64rem) {
	.grady-emergency-guide__layout {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}

	.grady-emergency-guide__panels,
	.grady-emergency-guide--service .grady-emergency-guide__panels {
		min-height: 0;
	}
}

@media (max-width: 48rem) {
	.grady-emergency-guide__header {
		margin-bottom: var(--space-6);
	}

	.grady-emergency-guide__card {
		padding: var(--space-3) var(--space-4);
	}

	.grady-emergency-guide__panel {
		padding: var(--space-5) var(--space-4);
	}

	.grady-emergency-guide__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.grady-emergency-guide__actions .grady-btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.grady-emergency-guide__card {
		transition: none;
	}

	.grady-emergency-guide__card.is-active {
		transform: none;
	}
}