/* ==========================================================================
   ICP landing pages (Imaging Center of Plymouth)
   Loaded only on the two ICP templates (see icp/icp-functions.php).
   Written mobile-first: base rules = phones; media queries add larger sizes.
   Breakpoints: 768px (tablet), 1024px (desktop).

   Contents
   1. Fonts
   2. Tokens (colors, fonts)
   3. Base
   4. Utilities
   5. Buttons and links
   6. Header
   7. Shared section pieces
   8. Hero
   9. Lung: qualify, pack-years, quit, FAQ, steps, banner, disclaimer
   10. Home: services tabs, location, experts, ready
   11. Footer
   ========================================================================== */


/* 1. Fonts
   ========================================================================== */

@font-face {
	font-family: 'D-DIN';
	src: url('../../fonts/D-DIN.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'D-DIN';
	src: url('../../fonts/D-DIN-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}


/* 2. Tokens
   ========================================================================== */

.icp {
	/* Blues */
	--icp-blue: #005596;
	--icp-blue-dark: #00406f;
	--icp-navy: #00355e;
	--icp-pale: #becae2;
	--icp-tint: #f5f8fc;

	/* Neutrals */
	--icp-ink: #101418;
	--icp-text: #3a4048;
	--icp-text-2: #4a5058;
	--icp-text-3: #585f68;
	--icp-muted: #5b636d;
	--icp-line: #e6e9ee;
	--icp-line-2: #dfe4ec;
	--icp-band: #f2f4f7;

	/* Sand */
	--icp-sand: #efe8dd;
	--icp-sand-line: #e0d7c8;
	--icp-sand-text: #6b6252;
	--icp-sand-bracket: #8f7d63;

	/* Type */
	--icp-font-label: 'D-DIN', Arial, sans-serif;
	--icp-font-body: 'Petrona', Georgia, serif;

	/* Spacing */
	--icp-gutter: 18px;
	--icp-section-y: 40px;
	--icp-radius: 12px;
}

@media (min-width: 1024px) {
	.icp {
		--icp-gutter: 40px;
		--icp-section-y: 65px;
	}
}


/* 3. Base
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

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

body.icp {
	margin: 0;
	background: #fff;
	color: var(--icp-text);
	font-family: var(--icp-font-body);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

/* :where() keeps these resets low-priority, so component classes below win without needing !important. */
.icp :where(img) {
	display: block;
	max-width: 100%;
	height: auto;
}

.icp :where(h1, h2, h3, p, ul, ol, figure, address) {
	margin: 0;
}

.icp :where(ul, ol) {
	padding: 0;
	list-style: none;
}

.icp :where(address) {
	font-style: normal;
}

.icp :where(a) {
	color: var(--icp-blue);
}

.icp :where(a:hover) {
	color: var(--icp-blue-dark);
}

.icp :where(p) {
	text-wrap: pretty;
}

/* Keyboard focus ring. Light ring on dark backgrounds. */
.icp :focus-visible {
	outline: 3px solid var(--icp-blue);
	outline-offset: 2px;
}

.icp .icp-dark :focus-visible {
	outline-color: #fff;
}

/* Jump-link targets: leave a little room above the section heading. */
.icp [id] {
	scroll-margin-top: 12px;
}

/* Content width wrapper used inside every full-width band. */
.icp-container {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--icp-gutter);
}


/* 4. Utilities
   ========================================================================== */

/* Visible to screen readers only. */
.icp-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Show/hide by screen size. These only hide, so each element keeps its own
   display value where it's shown. !important stops more specific rules
   from showing a hidden copy. */
@media (max-width: 1023px) {
	.icp-desktop-only {
		display: none !important;
	}
}

@media (min-width: 1024px) {
	.icp-mobile-only {
		display: none !important;
	}
}

/* Vertical rhythm: space between direct children. */
.icp-stack {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.icp-stack--lg {
	gap: 18px;
}

@media (min-width: 1024px) {
	.icp-stack--lg {
		gap: 24px;
	}
}

/* Highlighted placeholder text still to be filled in. */
.icp-todo {
	padding: 0 3px;
	background: #fff0b8;
	color: inherit;
}

.icp-nowrap-lg {
	display: block;
}

@media (min-width: 1024px) {
	.icp-nowrap-lg {
		white-space: nowrap;
	}
}


/* 5. Buttons and links
   ========================================================================== */

/* Small header buttons */
.icp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 11px 14px;
	border: 1px solid var(--icp-pale);
	border-radius: var(--icp-radius);
	background: #fff;
	color: var(--icp-blue);
	font: 700 14px/1 var(--icp-font-label);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

.icp .icp-btn:hover {
	border-color: var(--icp-blue);
	color: var(--icp-blue-dark);
}

.icp .icp-btn--solid {
	border-color: var(--icp-blue);
	background: var(--icp-blue);
	color: #fff;
}

.icp .icp-btn--solid:hover {
	border-color: var(--icp-blue-dark);
	background: var(--icp-blue-dark);
	color: #fff;
}

.icp-btn--grow {
	flex: 1;
	padding-inline: 8px;
}

@media (min-width: 1024px) {
	.icp-btn {
		padding: 9px 16px;
		font-size: 16px;
	}
}

/* Large content buttons: full width on phones, natural width on desktop. */
.icp-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 14px 20px;
	border-radius: var(--icp-radius);
	font: 700 15px/1 var(--icp-font-label);
	text-align: center;
	text-decoration: none;
}

.icp .icp-cta--blue {
	background: var(--icp-blue);
	color: #fff;
}

.icp .icp-cta--blue:hover {
	background: var(--icp-blue-dark);
	color: #fff;
}

.icp .icp-cta--white {
	background: #fff;
	color: var(--icp-navy);
}

.icp .icp-cta--white:hover {
	background: var(--icp-tint);
	color: var(--icp-navy);
}

.icp .icp-cta--pale {
	background: var(--icp-pale);
	color: var(--icp-navy);
}

.icp .icp-cta--pale:hover {
	background: #d5deee;
	color: var(--icp-navy);
}

@media (min-width: 1024px) {
	.icp-cta {
		display: inline-flex;
		padding: 14px 28px;
	}
}

/* Plain text link on dark backgrounds (hero "See our services"). */
.icp .icp-text-link {
	color: #fff;
	font: 700 15px/1 var(--icp-font-label);
	text-underline-offset: 4px;
}

.icp .icp-text-link:hover {
	color: var(--icp-pale);
}


/* 6. Header
   ========================================================================== */

.icp-skip-link {
	position: absolute;
	top: 12px;
	left: -9999px;
	z-index: 1000;
	padding: 10px 14px;
	border-radius: 8px;
	background: #fff;
	color: var(--icp-blue);
	font: 700 15px/1 var(--icp-font-label);
}

.icp-skip-link:focus {
	left: 12px;
}

/* Back link strip (mobile) */
.icp-header__back {
	border-bottom: 1px solid var(--icp-line);
	background: var(--icp-band);
}

.icp-header__back .icp-container {
	display: flex;
	justify-content: flex-end;
}

.icp .icp-header__back a {
	padding-block: 8px;
	color: var(--icp-muted);
	font: 700 12px/1 var(--icp-font-label);
	letter-spacing: .06em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Logo bar */
.icp-header__bar {
	border-bottom: 1px solid var(--icp-line);
	background: #fff;
}

.icp-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-block: 16px;
}

.icp-header__logo {
	flex: 0 1 auto;
	min-width: 0;
}

.icp-header__logo img {
	width: auto;
	height: 40px;
}

.icp-header__actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: 10px;
}

/* Action buttons row (mobile) */
.icp-header__mobile-actions {
	border-bottom: 1px solid var(--icp-line);
	background: var(--icp-band);
}

.icp-header__mobile-actions .icp-container {
	display: flex;
	gap: 8px;
	padding-block: 10px;
}

/* Nav */
.icp-nav {
	border-bottom: 1px solid var(--icp-line);
	background: var(--icp-band);
}

.icp-nav__list {
	display: flex;
	align-items: stretch;
	gap: 10px;
	/* Phones: the row scrolls sideways edge to edge if it's too wide */
	margin-inline: calc(var(--icp-gutter) * -1);
	padding-inline: 12px;
	overflow-x: auto;
	scrollbar-width: none;
}

.icp-nav__list::-webkit-scrollbar {
	display: none;
}

.icp .icp-nav__list a {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 12px 2px;
	color: var(--icp-text);
	font: 700 14px/1 var(--icp-font-label);
	letter-spacing: .06em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.icp .icp-nav__list a:hover,
.icp .icp-nav__list a.is-active {
	color: var(--icp-blue);
}

.icp .icp-nav__list a.is-active {
	box-shadow: inset 0 -3px 0 var(--icp-blue);
}

.icp .icp-nav__back a {
	color: var(--icp-muted);
}

@media (min-width: 1024px) {
	.icp-header__inner {
		padding-block: 25px;
	}

	.icp-header__logo img {
		height: 58px;
	}

	.icp-nav__list {
		gap: 44px;
		margin-inline: 0;
		padding-inline: 0;
		overflow-x: visible;
	}

	.icp .icp-nav__list a {
		padding: 12px 4px;
		font-size: 16px;
	}

	.icp-nav__back {
		margin-left: auto;
	}
}


/* 7. Shared section pieces
   ========================================================================== */

.icp-section {
	padding-block: var(--icp-section-y);
}

.icp-section--sand {
	border-top: 1px solid var(--icp-sand-line);
	background: var(--icp-sand);
}

.icp-section--navy {
	background: var(--icp-navy);
	color: #fff;
}

.icp-section--ruled {
	border-top: 1px solid var(--icp-line);
}

.icp-h2 {
	color: var(--icp-ink);
	font: 700 25px/1.2 var(--icp-font-label);
	letter-spacing: -.015em;
}

.icp-h2--lg {
	font-size: 29px;
	line-height: 1.12;
	letter-spacing: -.02em;
}

.icp-dark .icp-h2 {
	color: #fff;
}

@media (min-width: 1024px) {
	.icp-h2 {
		font-size: 28px;
	}

	.icp-h2--lg {
		font-size: 34px;
	}
}

/* Second line of a two-tone heading */
.icp-accent {
	color: var(--icp-pale);
}

.icp-accent-blue {
	color: var(--icp-blue);
}

/* Small uppercase label above a heading */
.icp-eyebrow,
.icp-kicker {
	font: 700 11px/1 var(--icp-font-label);
	letter-spacing: .14em;
	text-transform: uppercase;
}

.icp-kicker {
	color: var(--icp-blue);
	font-size: 11.5px;
	letter-spacing: .12em;
}

.icp-lead {
	color: var(--icp-text-2);
	font-size: 16px;
	line-height: 1.65;
}

.icp-dark .icp-lead,
.icp-dark :where(p) {
	color: rgba(255, 255, 255, .92);
}

.icp-body-muted {
	color: var(--icp-text-3);
}

@media (min-width: 1024px) {
	.icp-lead {
		font-size: 16.5px;
		line-height: 1.7;
	}
}


/* 8. Hero (both pages)
   Phones: photo fills the band, text sits at the bottom over a dark fade.
   Desktop: text sits beside the photo over a sideways fade.
   ========================================================================== */

.icp-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 460px;
	background: var(--icp-navy);
	color: #fff;
	overflow: hidden;
}

.icp-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Dark fade over the photo so the text stays readable */
.icp-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0, 53, 94, .95) 0 46%, rgba(0, 53, 94, .72) 66%, rgba(0, 53, 94, .12) 100%);
	pointer-events: none;
}

.icp-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	padding-block: 22px 24px;
}

.icp-hero__content {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

.icp-hero .icp-eyebrow {
	color: var(--icp-pale);
}

.icp-hero__title {
	font: 700 31px/1.1 var(--icp-font-label);
	letter-spacing: -.02em;
	text-wrap: balance;
}

.icp-hero__text {
	font-size: 15.5px;
	line-height: 1.6;
}

.icp-hero__actions {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-top: 2px;
}

.icp-hero .icp-hero__note {
	color: rgba(255, 255, 255, .85);
	font-size: 13px;
	line-height: 1.4;
}

/* Lung: phone crop focuses on the person */
.icp-hero--lung .icp-hero__img {
	object-position: center 22%;
}

/* Home */
.icp-hero--home {
	min-height: 430px;
}

.icp-hero--home .icp-hero__img {
	object-position: 72% center;
}

.icp-hero--home .icp-hero__title {
	font-size: 33px;
}

.icp-hero--home .icp-hero__text {
	font-size: 16px;
}

@media (min-width: 1024px) {
	.icp-hero__inner {
		padding-block: 40px;
	}

	.icp-hero__actions {
		flex-direction: row;
		align-items: center;
		gap: 18px;
		margin-top: 4px;
	}

	/* Lung: text on the right, fade from the right */
	.icp-hero--lung {
		min-height: 400px;
	}

	.icp-hero--lung .icp-hero__img {
		object-position: left center;
	}

	.icp-hero--lung::after {
		background: linear-gradient(270deg, rgba(0, 53, 94, .92) 0 30%, rgba(0, 53, 94, .72) 52%, rgba(0, 53, 94, .15) 100%);
	}

	.icp-hero--lung .icp-hero__inner {
		justify-content: flex-end;
	}

	.icp-hero--lung .icp-hero__content {
		max-width: 640px;
		gap: 14px;
	}

	.icp-hero--lung .icp-hero__title {
		font-size: 42px;
	}

	.icp-hero--lung .icp-hero__text {
		max-width: 52ch;
		font-size: 16.5px;
		line-height: 1.65;
	}

	/* Home: text on the left, centered vertically, fade from the left */
	.icp-hero--home {
		align-items: center;
		min-height: 460px;
	}

	.icp-hero--home .icp-hero__img {
		object-position: center;
	}

	.icp-hero--home::after {
		background: linear-gradient(90deg, rgba(0, 53, 94, .92) 0 26%, rgba(0, 53, 94, .7) 44%, rgba(0, 53, 94, .18) 62%, rgba(0, 53, 94, 0) 76%);
	}

	.icp-hero--home .icp-hero__content {
		max-width: 480px;
		gap: 16px;
	}

	.icp-hero--home .icp-hero__title {
		font-size: 46px;
		line-height: 1.08;
	}

	.icp-hero--home .icp-hero__text {
		font-size: 18px;
	}
}


/* 9. Lung page sections
   ========================================================================== */

/* --- Who qualifies --- */
.icp-qualify__grid {
	display: grid;
	gap: 16px;
}

.icp-criteria {
	border: 1px solid var(--icp-line-2);
}

.icp-criteria__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px;
}

.icp-criteria__item + .icp-criteria__item {
	border-top: 1px solid var(--icp-line-2);
}

.icp-criteria__icon {
	flex: none;
	width: 44px;
	height: 44px;
	margin-top: 1px;
	object-fit: contain;
}

.icp-criteria__title {
	margin-bottom: 5px;
	color: var(--icp-ink);
	font: 700 16px/1.3 var(--icp-font-label);
}

.icp-criteria__text {
	color: var(--icp-text-3);
	font-size: 15px;
	line-height: 1.6;
}

.icp-qualify__note {
	padding: 14px 16px;
	border-left: 3px solid var(--icp-blue);
	background: var(--icp-tint);
	color: var(--icp-text);
	font-size: 14.5px;
	line-height: 1.6;
}

@media (min-width: 1024px) {
	/* Left: intro + note. Right: criteria list. */
	.icp-qualify__grid {
		grid-template-columns: .62fr 1fr;
		grid-template-rows: auto 1fr;
		grid-template-areas:
			'intro list'
			'note  list';
		column-gap: 40px;
		row-gap: 12px;
		align-items: start;
	}

	.icp-qualify__intro { grid-area: intro; }
	.icp-criteria       { grid-area: list; }
	.icp-qualify__note  { grid-area: note; }

	.icp-criteria__item {
		gap: 16px;
		padding: 20px 22px;
	}

	.icp-criteria__icon {
		width: 55px;
		height: 55px;
	}

	.icp-criteria__title {
		margin-bottom: 4px;
		font-size: 17px;
	}
}

/* --- Pack-years --- */
.icp-packyears__grid {
	display: grid;
	gap: 16px;
}

/* The "all equal" diagram */
.icp-equal {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.icp-equal__rows {
	align-self: stretch;
	text-align: center;
}

.icp-equal__rows li {
	padding-block: 14px;
	color: var(--icp-text);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}

.icp-equal__rows li + li {
	border-top: 1px solid var(--icp-sand-line);
}

/* Bracket: a curve under the rows on phones, beside them on desktop */
.icp-equal__bracket {
	width: 70%;
	height: 14px;
	margin-top: 10px;
	border: 2px solid var(--icp-sand-bracket);
	border-top: 0;
	border-radius: 0 0 14px 14px;
}

.icp-equal__result {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
}

.icp-equal__label {
	color: #6b6151;
	font: 700 11px/1 var(--icp-font-label);
	letter-spacing: .14em;
	text-transform: uppercase;
}

.icp-equal__value {
	color: var(--icp-blue);
	font: 700 30px/1.05 var(--icp-font-label);
	letter-spacing: -.02em;
	white-space: nowrap;
}

@media (min-width: 1024px) {
	/* Left: intro + second paragraph. Right: diagram. */
	.icp-packyears__grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
		grid-template-areas:
			'intro equal'
			'more  equal';
		column-gap: 44px;
		row-gap: 12px;
		align-items: center;
	}

	.icp-packyears__intro { grid-area: intro; align-self: end; }
	.icp-equal            { grid-area: equal; }
	.icp-packyears__more  { grid-area: more; align-self: start; }

	.icp-equal {
		flex-direction: row;
		align-items: center;
		gap: 22px;
	}

	.icp-equal__rows {
		flex: 0 1 auto;
		align-self: auto;
		text-align: right;
	}

	.icp-equal__rows li {
		padding-block: 16px;
		font-size: 17px;
	}

	.icp-equal__bracket {
		flex: none;
		align-self: stretch;
		width: 16px;
		height: auto;
		margin-top: 0;
		border: 2px solid var(--icp-sand-bracket);
		border-left: 0;
		border-radius: 0 14px 14px 0;
	}

	.icp-equal__result {
		align-items: flex-start;
		margin-top: 0;
	}

	.icp-equal__value {
		font-size: 34px;
	}
}

/* --- You quit --- */
.icp-quit__grid {
	display: grid;
	gap: 14px;
}

.icp-quit__img {
	width: 100%;
	background: #16456e;
}

.icp-quit__body p {
	line-height: 1.7;
}

.icp-quit__body .icp-cta {
	margin-top: 4px;
}

@media (min-width: 768px) {
	/* Left: heading + text, centered vertically. Right: photo. */
	.icp-quit__grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr auto auto 1fr;
		grid-template-areas:
			'.     img'
			'title img'
			'body  img'
			'.     img';
		column-gap: 44px;
		row-gap: 0;
	}

	.icp-quit__title { grid-area: title; margin-bottom: 14px; }
	.icp-quit__img   { grid-area: img; align-self: center; }
	.icp-quit__body  { grid-area: body; gap: 14px; }
}

@media (min-width: 1024px) {
	.icp-quit {
		padding-block: 69px;
	}
}

/* --- What to expect (FAQ) --- */
.icp-faq__grid {
	display: grid;
	gap: 16px;
}

.icp-faq__list {
	border-top: 1px solid var(--icp-line-2);
}

.icp-faq__item {
	border-bottom: 1px solid var(--icp-line-2);
}

.icp-faq__item[open] {
	background: var(--icp-tint);
}

.icp-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 15px 16px;
	color: var(--icp-ink);
	font: 700 15.5px/1.4 var(--icp-font-label);
	list-style: none;
	cursor: pointer;
}

.icp-faq__item summary::-webkit-details-marker {
	display: none;
}

/* Hover only on devices with a mouse; on phones a tap would leave it stuck blue. */
@media (hover: hover) {
	.icp-faq__item summary:hover {
		color: var(--icp-blue);
	}
}

/* Blue while pressed, and stays blue while the answer is open. Back to black when closed. */
.icp-faq__item summary:active,
.icp-faq__item[open] summary {
	color: var(--icp-blue);
}

.icp-faq__item summary {
	-webkit-tap-highlight-color: transparent; /* no gray tap flash on phones */
}

.icp-faq__icon {
	flex: none;
	color: var(--icp-blue);
	font: 400 20px/1 var(--icp-font-label);
}

@media (prefers-reduced-motion: no-preference) {
	.icp-faq__icon {
		transition: transform .18s;
	}
}

.icp-faq__item[open] .icp-faq__icon {
	transform: rotate(45deg);
}

.icp-faq__item p {
	padding: 0 16px 16px;
	color: var(--icp-text-2);
	font-size: 15.5px;
	line-height: 1.7;
}

@media (min-width: 1024px) {
	.icp-faq__grid {
		grid-template-columns: .62fr 1fr;
		gap: 40px;
		align-items: start;
	}

	.icp-faq__item summary {
		gap: 20px;
		padding: 16px 24px;
		font-size: 16px;
	}

	.icp-faq__item p {
		padding: 0 56px 18px 24px;
	}
}

/* --- Next steps --- */
.icp-steps__list {
	display: grid;
	gap: 12px;
}

.icp-steps__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 18px;
	border-radius: var(--icp-radius);
	background: #fff;
	box-shadow: 0 1px 3px rgba(16, 20, 24, .06), 0 6px 18px rgba(16, 20, 24, .05);
}

.icp-steps__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--icp-blue);
	color: #fff;
	font: 700 17px/1 var(--icp-font-label);
}

.icp-steps__num--pale {
	background: var(--icp-pale);
	color: var(--icp-navy);
}

.icp-steps__title {
	color: var(--icp-ink);
	font: 700 17px/1.3 var(--icp-font-label);
}

.icp-steps__card p {
	color: var(--icp-text-3);
	font-size: 15px;
	line-height: 1.6;
}

.icp-steps__coverage {
	max-width: 82ch;
	font-size: 15.5px;
}

.icp-steps__call {
	color: var(--icp-text-2);
	line-height: 1.5;
}

.icp .icp-steps__call a {
	text-decoration: none;
}

@media (min-width: 768px) {
	.icp-steps__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.icp-steps {
		padding-block: 69px;
	}

	.icp-steps__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 16px;
	}

	.icp-steps__card {
		gap: 12px;
		padding: 24px 22px;
	}

	.icp-steps__num {
		width: 38px;
		height: 38px;
		font-size: 18px;
	}

	.icp-steps__card p {
		font-size: 14.5px;
	}
}

/* --- Closing banner --- */
.icp-banner {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 420px;
	background: var(--icp-blue);
	color: #fff;
	overflow: hidden;
}

.icp-banner__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center 18%;
}

.icp-banner::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0, 53, 94, .94) 0 42%, rgba(0, 53, 94, .7) 64%, rgba(0, 53, 94, .1) 100%);
	pointer-events: none;
}

.icp-banner__inner {
	position: relative;
	z-index: 1;
	padding-block: 24px;
}

.icp-banner__content {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.icp-banner__content p {
	margin-top: -6px;
	font-size: 15.5px;
	line-height: 1.6;
}

@media (min-width: 1024px) {
	.icp-banner {
		min-height: 380px;
	}

	.icp-banner__img {
		object-position: right center;
	}

	.icp-banner::after {
		background: linear-gradient(95deg, rgba(0, 53, 94, .9) 0 20%, rgba(0, 53, 94, .62) 36%, rgba(0, 53, 94, .18) 54%, rgba(0, 53, 94, 0) 68%);
	}

	.icp-banner__inner {
		padding-block: 65px;
	}

	.icp-banner__content {
		align-items: flex-start;
		max-width: 480px;
		gap: 18px;
	}

	.icp-banner__content p {
		max-width: 56ch;
		font-size: 16.5px;
		line-height: 1.65;
	}
}

/* At very wide screens the desktop fades stop short of the text, so widen them. */
@media (min-width: 1600px) {
	.icp-banner::after {
		background: linear-gradient(95deg, rgba(0, 53, 94, .9) 0 30%, rgba(0, 53, 94, .62) 44%, rgba(0, 53, 94, .18) 60%, rgba(0, 53, 94, 0) 72%);
	}
}

/* --- Disclaimer --- */
.icp-disclaimer {
	padding-block: 16px;
	background: var(--icp-band);
}

.icp-disclaimer p {
	color: var(--icp-muted);
	font-size: 12.5px;
	line-height: 1.65;
}


/* 10. Home page sections
   ========================================================================== */

/* --- Services tabs --- */
.icp-services {
	padding-block: 6px 34px;
}

.icp-services__tabs {
	display: flex;
	gap: 22px;
	margin-inline: calc(var(--icp-gutter) * -1);
	padding-inline: var(--icp-gutter);
	border-bottom: 1px solid #ded3c0;
	overflow-x: auto;
	scrollbar-width: none;
}

.icp-services__tabs::-webkit-scrollbar {
	display: none;
}

.icp-services__tab {
	flex: none;
	padding: 12px 2px;
	border: 0;
	background: none;
	color: var(--icp-sand-text);
	font: 700 14px/1 var(--icp-font-label);
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

.icp-services__tab:hover {
	color: var(--icp-blue);
}

.icp-services__tab[aria-selected='true'] {
	color: var(--icp-blue);
	box-shadow: inset 0 -3px 0 var(--icp-blue);
}

/* Panels with the ‹ › buttons. Phones: buttons sit under the text. */
.icp-services__stage {
	display: grid;
	grid-template-columns: auto auto 1fr;
	grid-template-areas:
		'panels panels panels'
		'prev   next   .';
	gap: 10px;
	margin-top: 20px;
}

.icp-services__panels {
	grid-area: panels;
	touch-action: pan-y pinch-zoom; /* sideways swipes go to icp.js; up/down still scrolls the page */
}
.icp-services__arrow--prev { grid-area: prev; }
.icp-services__arrow--next { grid-area: next; }

.icp-services__panel {
	display: grid;
	grid-template-areas:
		'img'
		'text';
	gap: 20px;
	margin-bottom: 6px;
}

.icp-services__panel[hidden] {
	display: none;
}

.icp-services__panel--no-image {
	grid-template-areas: 'text';
}

.icp-services__text { grid-area: text; }
.icp-services__img  { grid-area: img; }

.icp-services__img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--icp-radius);
	background: #e4e8ee;
}

.icp-services__text .icp-h2 {
	font-size: 26px;
	line-height: 1.15;
	letter-spacing: -.02em;
}

.icp-services__text .icp-lead {
	color: var(--icp-text);
}

.icp-services__text .icp-cta {
	margin-top: 2px;
}

.icp-services__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid #c8bda9;
	border-radius: 50%;
	background: #fff;
	color: var(--icp-sand-text);
	font: 700 22px/1 var(--icp-font-label);
	cursor: pointer;
}

/* Hover only on devices with a mouse; on phones a tap would leave it stuck blue. */
@media (hover: hover) {
	.icp-services__arrow:hover {
		border-color: var(--icp-blue);
		background: var(--icp-blue);
		color: #fff;
	}
}

/* Blue while pressed (finger down), back to white when it lifts. */
.icp-services__arrow:active {
	border-color: var(--icp-blue);
	background: var(--icp-blue);
	color: #fff;
}

.icp-services__arrow {
	-webkit-tap-highlight-color: transparent; /* no gray tap flash on phones */
}

/* Slide animation when switching services (classes added by icp.js). */
.icp-services {
	overflow-x: clip; /* hide the panel while it slides in from off to the side */
}

@media (prefers-reduced-motion: no-preference) {
	.icp-services__panel.is-from-next {
		animation: icp-slide-from-right .4s ease-out;
	}

	.icp-services__panel.is-from-prev {
		animation: icp-slide-from-left .4s ease-out;
	}
}

@keyframes icp-slide-from-right {
	from { opacity: 0; transform: translateX(60px); }
	to   { opacity: 1; transform: none; }
}

@keyframes icp-slide-from-left {
	from { opacity: 0; transform: translateX(-60px); }
	to   { opacity: 1; transform: none; }
}

@media (min-width: 768px) {
	.icp-services__panel {
		grid-template-columns: 1fr 1.15fr;
		grid-template-areas: 'text img';
		align-items: center;
		gap: 32px;
	}

	.icp-services__panel--no-image {
		grid-template-columns: 1fr;
		grid-template-areas: 'text';
	}
}

@media (min-width: 1024px) {
	.icp-services {
		padding-block: 34px 60px;
	}

	.icp-services__tabs {
		flex-wrap: wrap;
		gap: 0 30px;
		margin-inline: 0;
		padding-inline: 0;
		overflow: visible;
	}

	.icp-services__tab {
		padding-block: 13px;
		font-size: 15px;
	}

	/* Desktop: ‹ panel › in one row */
	.icp-services__stage {
		grid-template-columns: 44px minmax(0, 1fr) 44px;
		grid-template-areas: 'prev panels next';
		align-items: center;
		gap: 26px;
		margin-top: 28px;
	}

	.icp-services__panel {
		gap: 40px;
		margin-bottom: 0;
	}

	.icp-services__text {
		gap: 14px;
	}

	.icp-services__text .icp-h2 {
		font-size: 30px;
	}

	.icp-services__text .icp-cta {
		margin-top: 6px;
	}
}

/* --- Care close to home --- */
.icp-location {
	position: relative;
	background: #fff;
	overflow: hidden;
}

.icp-location__img {
	width: 100%;
	height: 230px;
	object-fit: cover;
	object-position: 60% center;
}

.icp-location__inner {
	position: relative;
	z-index: 1;
	padding-block: 26px 32px;
}

.icp-location .icp-lead {
	color: var(--icp-text);
}

@media (min-width: 1024px) {
	/* Photo fills the band; a white fade on the left holds the text. */
	.icp-location {
		display: flex;
		align-items: center;
		min-height: 420px;
	}

	.icp-location__img {
		position: absolute;
		inset: 0;
		height: 100%;
		max-width: none;
		object-position: right center;
	}

	.icp-location::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, rgba(255, 255, 255, .96) 0 22%, rgba(255, 255, 255, .72) 38%, rgba(255, 255, 255, .2) 54%, rgba(255, 255, 255, 0) 66%);
		pointer-events: none;
	}

	.icp-location__inner {
		padding-block: 40px;
	}

	.icp-location__content {
		max-width: 480px;
		gap: 14px;
	}

	.icp-location .icp-h2 {
		font-size: 30px;
		line-height: 1.15;
		letter-spacing: -.02em;
	}
}

@media (min-width: 1600px) {
	.icp-location::after {
		background: linear-gradient(90deg, rgba(255, 255, 255, .96) 0 30%, rgba(255, 255, 255, .72) 42%, rgba(255, 255, 255, .2) 56%, rgba(255, 255, 255, 0) 66%);
	}
}

/* --- Experts --- */
.icp-experts {
	padding-block: 28px 34px;
}

.icp-experts__grid {
	display: grid;
	gap: 16px;
}

.icp-experts__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--icp-radius);
}

.icp-experts .icp-h2--lg {
	font-size: 28px;
}

@media (min-width: 768px) {
	.icp-experts__grid {
		grid-template-columns: .9fr 1fr;
		align-items: center;
		gap: 32px;
	}
}

@media (min-width: 1024px) {
	.icp-experts {
		padding-block: 65px;
	}

	.icp-experts__grid {
		gap: 44px;
	}

	.icp-experts .icp-stack {
		gap: 14px;
	}

	.icp-experts .icp-h2--lg {
		font-size: 34px;
	}
}

/* --- Ready to see the difference --- */
.icp-ready {
	padding-block: 30px 34px;
}

.icp-ready__inner {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.icp-ready .icp-h2 {
	font-size: 26px;
	line-height: 1.15;
	letter-spacing: -.02em;
}

@media (min-width: 1024px) {
	.icp-ready {
		padding-block: 52px;
	}

	.icp-ready__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 32px;
	}

	.icp-ready .icp-stack {
		gap: 8px;
	}

	.icp-ready .icp-h2 {
		font-size: 30px;
	}

	.icp-ready .icp-lead {
		max-width: 58ch;
	}

	.icp-ready .icp-cta {
		flex: none;
		padding: 15px 30px;
		font-size: 16px;
	}
}


/* 11. Footer
   ========================================================================== */

/* --- Visit + Directions --- */
.icp-visit {
	padding-block: var(--icp-section-y);
	border-top: 1px solid var(--icp-line);
	background: #fff;
}

.icp-visit__grid {
	display: grid;
	gap: 28px;
}

.icp-visit .icp-kicker {
	margin-bottom: 10px;
}

.icp-visit p {
	margin-bottom: 12px;
	color: var(--icp-text);
	font-size: 15px;
	line-height: 1.8;
}

.icp-visit__info address p:first-child {
	font-size: 15.5px;
	line-height: 1.7;
}

.icp .icp-visit address a {
	color: inherit;
	text-decoration: none;
}

.icp-visit__info .icp-cta {
	margin-top: 4px;
}

.icp-visit__directions p {
	line-height: 1.7;
}

.icp-visit__map {
	display: block;
	text-decoration: none;
}

.icp-visit__map img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border: 1px solid var(--icp-line-2);
}

.icp-visit__map-label {
	display: inline-block;
	margin-top: 10px;
	font: 700 14px/1.2 var(--icp-font-label);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (min-width: 768px) {
	.icp-visit__grid {
		grid-template-columns: 1fr 1.2fr;
		gap: 44px;
	}

	.icp-visit__directions {
		display: flex;
		flex-direction: column;
	}

	/* Map stretches to match the height of the Visit column */
	.icp-visit__map {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
	}

	.icp-visit__map img {
		flex: 1 1 0;
		min-height: 220px;
		aspect-ratio: auto;
	}
}

@media (min-width: 1024px) {
	.icp-visit__info .icp-cta {
		padding: 12px 24px;
		font-size: 13.5px;
	}
}

/* --- Scheduling bar --- */
.icp-footer__bar {
	background: var(--icp-blue);
	color: #fff;
}

.icp-footer__bar-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding-block: 20px;
}

.icp-footer__scheduling {
	color: #fff;
	font: 700 16px/1.3 var(--icp-font-label);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.icp .icp-footer__scheduling a {
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}

.icp-footer__badge {
	width: auto;
	height: 64px;
}

.icp-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-left: -10px;
}

.icp .icp-footer__nav a {
	display: flex;
	align-items: center;
	padding: 8px 10px;
	color: #fff;
	font: 400 15px/1 var(--icp-font-body);
	text-decoration: none;
}

.icp .icp-footer__nav a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (min-width: 1024px) {
	.icp-footer__bar-inner {
		flex-direction: row;
		align-items: center;
		gap: 24px;
		padding-block: 18px;
	}

	.icp-footer__scheduling {
		font-size: 17px;
		line-height: 1;
	}

	.icp-footer__badge {
		height: 76px;
		margin-right: auto;
	}

	.icp-footer__nav {
		gap: 8px;
		margin-left: 0;
	}
}

/* --- Legal links --- */
.icp-footer__legal {
	background: var(--icp-blue-dark);
}

.icp-footer__legal-inner {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-block: 16px;
	color: rgba(255, 255, 255, .8);
	font-size: 12px;
	line-height: 1.7;
}

.icp .icp-footer__legal p {
	color: rgba(255, 255, 255, .8);
}

.icp-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
}

.icp-footer__legal-links li:not(:last-child)::after {
	content: '|';
	margin-inline: 6px;
	opacity: .6;
}

.icp .icp-footer__legal a {
	color: rgba(255, 255, 255, .9);
	text-decoration: none;
}

.icp .icp-footer__legal a:hover {
	color: #fff;
	text-decoration: underline;
}

@media (min-width: 1024px) {
	.icp-footer__legal-inner {
		flex-direction: row;
		justify-content: space-between;
		gap: 20px;
		padding-block: 14px;
	}
}


/* 12. Request Appointment pop-up (icp/parts/schedule-modal.php)
   Styles the native <dialog> and the Gravity Forms form inside it.
   Layout of the form fields (e.g. side-by-side names) comes from
   Gravity Forms' own CSS; these rules only change the look.
   ========================================================================== */

/* Stop the page behind from scrolling while the pop-up is open */
html:has(.icp-modal[open]) {
	overflow: hidden;
	scrollbar-gutter: stable; /* keep the scrollbar's space so the page doesn't shift sideways */
}

.icp-modal {
	width: min(600px, calc(100% - 24px));
	max-height: calc(100dvh - 24px);
	padding: 0;
	border: 0;
	border-radius: var(--icp-radius);
	background: #fff;
	color: var(--icp-text);
	box-shadow: 0 20px 60px rgba(0, 20, 40, .35);
	overflow: auto;
}

.icp-modal::backdrop {
	background: rgba(0, 35, 64, .6);
}

.icp-modal__inner {
	position: relative;
	padding: 28px 20px 24px;
}

.icp-modal__close {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--icp-blue);
	font: 400 30px/1 var(--icp-font-label);
	cursor: pointer;
}

.icp-modal__close:hover {
	background: var(--icp-tint);
}

.icp-modal__title {
	margin-right: 44px;
	color: var(--icp-ink);
	font: 700 24px/1.2 var(--icp-font-label);
	letter-spacing: -.015em;
}

/* --- Gravity Forms inside the pop-up --- */
.icp-modal .gform_wrapper {
	margin: 16px 0 0;
	font-family: var(--icp-font-body);
}

.icp-modal .gform_wrapper .gform_description {
	color: var(--icp-text-2);
	font-size: 15px;
}

.icp-modal .gform_wrapper .gfield_label {
	color: var(--icp-ink);
	font: 700 15px/1.3 var(--icp-font-label);
}

.icp-modal .gform_wrapper .gfield_required {
	color: #b42318;
}

.icp-modal .gform_wrapper input:not([type='submit']):not([type='button']):not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='image']),
.icp-modal .gform_wrapper textarea {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid #c9d1dc;
	border-radius: 8px;
	background: #fff;
	color: var(--icp-ink);
	font: 400 16px/1.4 var(--icp-font-body); /* 16px stops phones zooming in on focus */
	box-shadow: none;
}

.icp-modal .gform_wrapper textarea {
	height: 120px; /* Gravity Forms defaults to 10 rows; keep the pop-up compact */
	min-height: 88px;
	resize: vertical;
}

.icp-modal .gform_wrapper input:focus,
.icp-modal .gform_wrapper textarea:focus {
	border-color: var(--icp-blue);
	outline: 3px solid rgba(0, 85, 150, .25);
	outline-offset: 0;
}

/* "Someone will contact you…" note */
.icp-modal .gform_wrapper .gfield_html {
	color: var(--icp-text-3);
	font-size: 15px;
	line-height: 1.6;
}

/* Submit button: same as the page's blue buttons */
.icp-modal .gform_wrapper .gform_footer input[type='submit'],
.icp-modal .gform_wrapper .gform_footer button,
.icp-modal .gform_wrapper .gform_button {
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 14px 28px;
	border: 0;
	border-radius: var(--icp-radius);
	background: var(--icp-blue);
	color: #fff;
	font: 700 15px/1 var(--icp-font-label);
	text-transform: none;
	cursor: pointer;
	appearance: none;
}

.icp-modal .gform_wrapper .gform_footer input[type='submit']:hover,
.icp-modal .gform_wrapper .gform_footer button:hover,
.icp-modal .gform_wrapper .gform_button:hover {
	background: var(--icp-blue-dark);
}

/* Errors */
.icp-modal .gform_wrapper .gform_validation_errors,
.icp-modal .gform_wrapper .validation_error {
	margin-bottom: 16px;
	padding: 12px 14px;
	border: 1px solid #b42318;
	border-radius: 8px;
	background: #fef3f2;
	color: #b42318;
	box-shadow: none;
}

.icp-modal .gform_wrapper .gform_validation_errors > h2 {
	color: #b42318;
	font: 700 15px/1.4 var(--icp-font-label);
}

.icp-modal .gform_wrapper .gfield_error input,
.icp-modal .gform_wrapper .gfield_error textarea {
	border-color: #b42318;
}

.icp-modal .gform_wrapper .validation_message,
.icp-modal .gform_wrapper .gfield_validation_message {
	margin-top: 4px;
	padding: 0;
	border: 0;
	background: none;
	color: #b42318;
	font-size: 14px;
}

.icp-modal .gform_wrapper .gfield_error {
	border: 0;
	background: none;
}

/* Thank-you message after sending */
.icp-modal .gform_confirmation_message {
	margin-top: 16px;
	padding: 16px;
	border-left: 3px solid var(--icp-blue);
	background: var(--icp-tint);
	color: var(--icp-text);
	font: 400 17px/1.6 var(--icp-font-body);
}

@media (min-width: 600px) {
	.icp-modal__inner {
		padding: 36px 40px 32px;
	}

	.icp-modal__title {
		font-size: 28px;
	}

	.icp-modal .gform_wrapper .gform_footer input[type='submit'],
	.icp-modal .gform_wrapper .gform_footer button,
	.icp-modal .gform_wrapper .gform_button {
		width: auto;
	}
}