/*
   Choice Vision Care & Wellness
   HOME PAGE STYLESHEET
   File: css.home.css
*/

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..700;1,400..700&display=swap');

:root{
	--ink:#1d1d1d;
	--muted:#000000;
	--paper:#ffffff;
	--ivory:#f6f3ee;
	--ivory-deep:#eee9e1;
	--warm:#564631;
	--line:#d8d2c8;
	--shadow:0 24px 70px rgba(0,0,0,.12);
	--focus:#d004fc;
	--focus-outline:#a307fc;
	--serif:"Playfair Display",Georgia,serif;
	--sans:Seravek,"Gill Sans Nova",Ubuntu,Calibri,"DejaVu Sans",Arial,sans-serif;
}

*{
	box-sizing:border-box;
}

html{
	scroll-behavior:smooth;
}

body{
	margin:0;
	background:var(--paper);
	color:var(--ink);
	font-family:var(--sans);
	font-size:16px;
	line-height:1.65;
	-webkit-text-size-adjust:100%;
}

body.menu-open{
	overflow:hidden;
}

img,
video{
	max-width:100%;
}

a{
	color:inherit;
}

button,
input,
select,
textarea{
	font:inherit;
}

[hidden]{
	display:none !important;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.skip{
	position:fixed;
	left:-10000px;
	top:.75rem;
	z-index:5000;
	padding:.8rem 1rem;
	background:#000;
	color:#fff;
	text-decoration:none;
}

.skip:focus{
	left:.75rem;
	color:#fff !important;
	background:var(--focus) !important;
	outline:3px dotted var(--focus-outline);
	outline-offset:3px;
}

a:focus,
button:focus,
summary:focus,
a:focus-visible,
button:focus-visible,
summary:focus-visible{
	color:#fff !important;
	background:var(--focus) !important;
	outline:3px dotted var(--focus-outline) !important;
	outline-offset:3px;
}


/* =========================================================
   GENERAL SECTIONS
   ========================================================= */

.section-shell{
	width:min(1200px,92%);
	margin:0 auto;
}

.section-heading{
	margin-bottom:3rem;
}

.section-heading.centered{
	text-align:center;
}

.section-heading.narrow{
	max-width:850px;
	margin-left:auto;
	margin-right:auto;
}

.section-heading h2,
.service-group-heading h2,
.red-light-feature h2,
.visit-section h2{
	margin:.2rem 0 1rem;
	font-family:var(--serif);
	font-weight:500;
	line-height:1.12;
	letter-spacing:-.02em;
}

.section-heading h2{
	font-size:clamp(2.2rem,4vw,3.8rem);
}

.section-heading>p:last-child{
	max-width:500px;
	margin:0 auto;
	color:var(--muted);
	font-size:1.08rem;
	line-height:1.75;
}

.section-eyebrow,
.service-eyebrow{
	margin:0 0 .65rem;
	color:var(--warm);
	font-size:.78rem;
	font-weight:800;
	letter-spacing:.18em;
	line-height:1.4;
	text-transform:uppercase;
}

.section-eyebrow.light{
	color:#ffffff;
}

.section-eyebrow.red{
	color:#ffffff;
	background:#000000;
	padding:.25em .5em;
	max-width:290px;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header{
	position:fixed;
	top:0;
	left:0;
	z-index:1000;
	width:100%;
	background:rgba(0,0,0,.74);
	transition:background .25s ease,box-shadow .25s ease;
}

.site-header.is-scrolled{
	background: #000000;
	box-shadow:0 8px 30px rgba(0,0,0,.10);
}

.site-header-inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:1.5rem;
	width:min(1500px,94%);
	min-height:78px;
	margin:0 auto;
}

.site-brand{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	color:#fff;
	text-decoration:none;
	line-height:1.05;
}

.site-brand-name{
	font-family:var(--serif);
	font-size:1.25rem;
	font-weight:600;
}

.site-brand-wellness{
	margin-top:.2rem;
	font-size:.72rem;
	font-weight:800;
	letter-spacing:.18em;
	text-transform:uppercase;
}

.site-header.is-scrolled .site-brand{
	color: #ffffff;
}

.header-actions{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:.25rem;
	margin-left:auto;
}

.header-text-link,
.header-action-button,
.site-menu-button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:44px;
	text-decoration:none;
}

.header-text-link{
	padding:.65rem .55rem;
	color:#fff;
	font-size:.84rem;
	font-weight:700;
}


.site-menu-button{
	padding:.72rem 1.5rem;
	border:1px solid rgba(255,255,255,.78);
	border-radius:999px;
	font-size:.84rem;
	font-weight:800;
}
.header-action-button {
	padding: .72rem .95rem;
	border:1px solid rgba(255,255,255,.78);
	border-radius:999px;
	font-size:.84rem;
	font-weight:800;
}
.header-action-button{
	color:#fff;
}

.header-action-button.primary{
	background:#fff;
	color:var(--ink);
}
.header-action-button.primary:hover {
	color:#ffffff;
	background: #000000;
}
.header-action-button.secondary{
	background:rgba(0,0,0,.8);
}
.header-action-button.secondary:hover {
	color:#000000;
	background: #ffffff;
}
.site-menu-button{
	background: linear-gradient(to right, rgba(206, 189, 167, 1), rgba(247, 241, 226, 1), rgba(206, 189, 167, 1));
    color: #000000;
    border: none;
	cursor:pointer;
}

.site-header.is-scrolled .header-text-link{
	color: #ffffff;
}

.site-header.is-scrolled .header-action-button,
.site-header.is-scrolled .site-menu-button{
	border-color:var(--ink);
	color:var(--ink);
}

.site-header.is-scrolled .header-action-button.primary{
	background:var(--ink);
	color:#fff;
}

.site-header.is-scrolled .header-action-button.secondary{
	background:#fff;
}
.site-header.is-scrolled .site-menu-button {
	background:#fff;
	border: 1px solid #000000;
}

/* =========================================================
   MENU
   ========================================================= */

.site-menu-panel{
	position:fixed;
	inset:0;
	z-index:1100;
	background:rgba(13,13,13,.98);
	overflow:auto;
}

.site-menu-inner{
	width:min(650px,90%);
	margin:0 auto;
	padding:2rem 0 4rem;
}

.site-menu-close{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:46px;
	margin:0 0 2rem auto;
	padding:.7rem 1rem;
	border:1px solid #fff;
	border-radius:999px;
	background:#111;
	color:#fff;
	font-weight:800;
	cursor:pointer;
}

.site-menu-panel ul{
	margin:0;
	padding:0;
	list-style:none;
}

.site-menu-panel li{
	border-bottom:1px solid rgba(255,255,255,.18);
}

.site-menu-panel a{
	display:block;
	padding:1rem .2rem;
	color:#fff;
	font-size:1.08rem;
	font-weight:700;
	text-decoration:none;
}


/* =========================================================
   HOME HERO
   ========================================================= */

.home-hero{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	height: 100vh;
	min-height:680px;
	max-height:920px;
	overflow:hidden;
	background:#111;
	color:#fff;
}

.hero-parallax{
	position:absolute;
	inset:-18% 0;
	z-index:0;
	height:136%;
	will-change:transform;
}

.home-hero-video{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
	background:#111;
}

.home-hero-shade{
	position:absolute;
	inset:0;
	z-index:1;
	background-image:linear-gradient(
		180deg,
		rgba(0,0,0,.9),
		rgba(0,0,0,.6),
		rgba(0,0,0,.5),
		rgba(0,0,0,.4),
		rgba(0,0,0,.3)
	);
}

.home-hero-content{
	position:relative;
	z-index:2;
	width:min(1100px,90%);
	padding:8rem 1rem 10rem;
	text-align:center;
}

.hero-eyebrow{
	margin:0 0 1.1rem;
	font-size:.82rem;
	font-weight:800;
	letter-spacing:.20em;
	text-transform:uppercase;
}

.home-hero h1{
	max-width:1100px;
	margin:0 auto;
	color:#fff;
	font-family:var(--serif);
	font-size:clamp(2.8rem,5vw,5.4rem);
	font-weight:500;
	line-height:1.25;
	letter-spacing:-.025em;
	text-shadow:0 3px 24px rgba(0,0,0,.30);
}

.home-hero h1 span{
	display:block;
	margin-top:.38em;
	font-size:.48em;
	font-weight:450;
	letter-spacing:.01em;
}

.hero-tagline{
	margin:1.35rem 0 0;
	font-size:clamp(1.05rem,1.6vw,1.35rem);
	font-weight:650;
	letter-spacing:.08em;
}

.hero-actions{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:.85rem;
	margin-top: 1rem;
}

.hero-button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:48px;
	padding:.85rem 1.35rem;
	border:1px solid rgba(255,255,255,.88);
	border-radius:999px;
	color:#fff;
	font-weight:800;
	text-decoration:none;
}

.hero-button.primary{
	background:#fff;
	color:var(--ink);
}

.hero-button.secondary{
	background:rgba(0,0,0,.24);
}

.hero-video-toggle,
.media-toggle{
	position:absolute;
	z-index:4;
	min-height:44px;
	padding:.65rem .95rem;
	border:1px solid #fff;
	border-radius:999px;
	background:#000;
	color:#fff;
	font-size:.8rem;
	font-weight:800;
	cursor:pointer;
}

.hero-video-toggle{
	right:1.25rem;
	bottom:6.25rem;
}


/* =========================================================
   INTRODUCTION
   ========================================================= */

.hero-introduction{
	position:relative;
	z-index:5;
	padding:0 1.25rem 5rem;
	background:var(--ivory);
}

.hero-introduction-inner{
	width:min(1080px,100%);
	margin:-72px auto 0;
	padding:3.4rem 3.5rem;
	background:#fff;
	border:1px solid rgba(0,0,0,.08);
	box-shadow:var(--shadow);
	text-align:center;
}

.hero-introduction h2{
	margin:0 0 1rem;
	font-family:var(--serif);
	font-size:clamp(2rem,3.5vw,3.2rem);
	font-weight:500;
	line-height:1.15;
}

.hero-introduction-inner>p:not(.section-eyebrow){
	max-width:850px;
	margin:0 auto;
	color:#333;
	font-size:1.08rem;
	line-height:1.75;
}

.hero-service-links{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:.75rem;
	margin:2rem auto 0;
}

.hero-service-links a{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:54px;
	padding:.8rem 1rem;
	border:1px solid #333;
	background:#fff;
	color:#202020;
	font-size:.92rem;
	font-weight:800;
	text-align:center;
	text-decoration:none;
	transition:background .2s ease,color .2s ease,transform .2s ease;
}

.hero-service-links a:hover{
	background:#202020;
	color:#fff;
	transform:translateY(-2px);
}


/* =========================================================
   MAIN SERVICES
   ========================================================= */

.services-section{
	padding:7rem 0 5rem;
	background:#fff;
}

.service-group{
	display:grid;
	grid-template-columns:260px minmax(0,1fr);
	gap:3rem;
	padding:4.5rem 0;
	border-top:1px solid var(--line);
	scroll-margin-top:100px;
}

.service-group:first-of-type{
	margin-top:1rem;
}

.service-group-heading span{
	display:block;
	margin-bottom:.5rem;
	color:var(--warm);
	font-family:var(--serif);
	font-size:1.05rem;
}

.service-group-heading h2{
	font-size:clamp(2.3rem,4vw,3.7rem);
}

.service-group-heading p{
	margin:0;
	color:var(--muted);
	line-height:1.7;
}

.service-card-grid{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:1.5rem;
}

.service-card{
	overflow:hidden;
	background:#fff;
	border:1px solid var(--line);
	box-shadow:0 14px 36px rgba(0,0,0,.07);
	scroll-margin-top:100px;
}

.service-media{
	position:relative;
	aspect-ratio:16/10;
	overflow:hidden;
	background:#111;
}

.service-media img,
.service-media video{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}

.media-toggle{
	right:.75rem;
	bottom:.75rem;
}

.service-card-body{
	padding:1.65rem 1.6rem 1.8rem;
}

.service-card h3{
	margin:0 0 .65rem;
	font-family:var(--serif);
	font-size:1.75rem;
	font-weight:550;
	line-height:1.15;
}

.service-card-body>p:not(.service-eyebrow){
	margin:0;
	color:#3d3d3d;
	line-height:1.7;
}

.text-link{
	display:inline-block;
	margin-top:1rem;
	color:#2a2118;
	font-weight:800;
	text-underline-offset:4px;
}

.service-details{
	margin-top:1.2rem;
	border-top:1px solid var(--line);
}

.service-details summary{
	padding:1rem 0 0;
	cursor:pointer;
	font-weight:800;
	color:#2c2c2c;
}

.service-details-content{
	padding:.8rem 0 0;
	color:#444;
}

.service-details-content p{
	margin:0;
	line-height:1.75;
}


/* =========================================================
   SERVICE NAVIGATION
   ========================================================= */

.service-guide{
	padding:7rem 0;
	background:var(--ivory);
}

.guide-grid{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:1rem;
}

.guide-card{
	display:flex;
	flex-direction:column;
	min-height:100%;
	padding:1rem;
	background:#fff;
	border:1px solid var(--line);
	box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.guide-number{
	margin:0;
	color:var(--warm);
	font-family:var(--serif);
	font-size:1rem;
}

.guide-card h3{
	margin:.2rem 0 1.2rem;
	font-family:var(--serif);
	font-size:1.65rem;
	font-weight:550;
}

.guide-card a{
	display:block;
	padding:.5rem 0;
	border-top:1px solid #e6e0d7;
	color:#2b2b2b;
	font-weight:700;
	text-decoration:none;
}

.guide-card a::after{
	content:" \2192";
}

.guide-card a:hover{
	text-decoration:underline;
	text-underline-offset:4px;
}

.red-guide{
	background:#24201c;
	color:#fff;
	border-color:#24201c;
}

.red-guide .guide-number,
.red-guide h3,
.red-guide a{
	color:#fff;
}

.red-guide a{
	border-top-color:rgba(255,255,255,.18);
}


/* =========================================================
   HOME RED LIGHT FEATURE
   ========================================================= */

.red-light-feature{
	position:relative;
	display:flex;
	align-items:center;
	min-height:640px;
	overflow:hidden;
	background-color:#24201c;
	color:#fff;
}

.red-light-feature-image{
	position:absolute;
	top:-10%;
	left:0;
	width:100%;
	height:130%;
	background:url('../../images/banner2.jpg') center/cover no-repeat;
	will-change:transform;
}

.red-light-feature-shade{
	position:absolute;
	inset:0;
	background:linear-gradient(
		90deg,
		rgba(0,0,0,.85) 0%,
		rgba(0,0,0,.55) 52%,
		rgba(0,0,0,.20) 100%
	);
}

.red-light-feature-content{
	position:relative;
	z-index:2;
	width:min(1200px,92%);
	margin:0 auto;
	padding:6rem 0;
}

.red-light-feature-content>*{
	max-width:700px;
}

.red-light-feature h2{
	margin:.3rem 0 1.25rem;
	color:#fff;
	font-size:clamp(2.5rem,4.5vw,4.7rem);
}

.red-light-feature p:not(.section-eyebrow){
	font-size:1.1rem;
	line-height:1.8;
}

.feature-button,
.dark-button,
.footer-book{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:48px;
	padding:.85rem 1.2rem;
	border:1px solid #fff;
	border-radius:999px;
	background:#ffffff;
	color:#000000;
	font-weight:800;
	text-decoration:none;
}

.feature-button{
	margin-top:1rem;
}


/* =========================================================
   SPECIALS
   ========================================================= */

.specials-section{
	padding:7rem 0;
	background:#fff;
}

.special-feature{
	display:grid;
	grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
	gap:0;
	margin-bottom:1.5rem;
	background:var(--ivory);
	border:1px solid var(--line);
}

.special-feature img{
	width:100%;
	height:100%;
	min-height:300px;
	object-fit:cover;
}

.special-feature>div{
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding:2.4rem;
}

.special-feature h3{
	margin:.2rem 0 .75rem;
	font-family:var(--serif);
	font-size:2rem;
	font-weight:550;
}

.special-feature p:not(.section-eyebrow){
	margin:0 0 1rem;
	color:var(--muted);
}

.special-feature .dark-button{
	align-self:flex-start;
	background:#1d1d1d;
	color:#fff;
	border-color:#1d1d1d;
}

.offer-grid{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:1rem;
}

.offer-card{
	display:flex;
	flex-direction:column;
	padding:1.7rem;
	background:#24201c;
	color:#fff;
	border:1px solid #24201c;
}

.offer-kicker{
	margin:0 0 .5rem;
	font-size:.74rem;
	font-weight:800;
	letter-spacing:.15em;
	text-transform:uppercase;
}

.offer-price{
	margin:0;
	font-family:var(--serif);
	font-size:3.3rem;
	line-height:1;
}

.offer-price span{
	font-size:.45em;
	vertical-align:top;
}

.offer-regular{
	margin:.4rem 0 .8rem;
	color:#e5ddd2;
	font-size:.86rem;
}

.offer-card h3{
	margin:.3rem 0 .8rem;
	font-family:var(--serif);
	font-size:1.5rem;
	font-weight:550;
	line-height:1.2;
}

.offer-card>p:not(.offer-kicker):not(.offer-price):not(.offer-regular){
	color:#f3eee8;
	line-height:1.65;
}

.offer-package strong{
	color:#fff;
}

.print-offer{
	align-self:flex-start;
	min-height:44px;
	margin-top:auto;
	padding:.7rem 1rem;
	border:1px solid #fff;
	border-radius:999px;
	background:transparent;
	color:#fff;
	font-weight:800;
	cursor:pointer;
}


/* =========================================================
   TEAM
   ========================================================= */

.team-section{
	padding:7rem 0;
	background:var(--ivory);
}

.team-grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:1rem;
}

.team-card{
	display:grid;
	grid-template-columns:110px 1fr;
	align-items:center;
	gap:1.1rem;
	padding:1.1rem;
	background:#fff;
	border:1px solid var(--line);
}

.team-card img{
	width:110px;
	height:130px;
	object-fit:cover;
}

.team-card h3{
	margin:0 0 .25rem;
	font-family:var(--serif);
	font-size:1.25rem;
	font-weight:550;
	line-height:1.2;
}

.team-card p{
	margin:0;
	color:#4a4a4a;
	font-size:.92rem;
	line-height:1.45;
}

.doctor-details{
	max-width:900px;
	margin:2rem auto 0;
	background:#fff;
	border:1px solid var(--line);
}

.doctor-details summary{
	padding:1rem 1.2rem;
	cursor:pointer;
	font-weight:800;
}

.doctor-details>div{
	padding:0 1.2rem 1.2rem;
	color:#3f3f3f;
	line-height:1.75;
}

.doctor-details p{
	margin:0;
}


/* =========================================================
   EYE HEALTH
   ========================================================= */

.eye-health-section{
	padding:7rem 0;
	background:#fff;
}

.condition-grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:1.2rem;
}

.condition-card{
	overflow:hidden;
	border:1px solid var(--line);
	background:#fff;
	box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.condition-card img{
	display:block;
	width:100%;
	aspect-ratio:16/10;
	object-fit:cover;
}

.condition-card>div{
	padding:1.35rem;
}

.condition-card h3{
	margin:0 0 .55rem;
	font-family:var(--serif);
	font-size:1.45rem;
	font-weight:550;
}

.condition-card p{
	margin:0;
	color:#414141;
	line-height:1.65;
}

.center-actions{
	text-align:center;
	margin-top:2rem;
}

.center-actions .dark-button{
	background:#1d1d1d;
	color:#fff;
	border-color:#1d1d1d;
}


/* =========================================================
   VISION LIBRARY
   ========================================================= */

.library-heading-content p {
	margin-bottom:1rem;
}

.library-toggle {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:.75rem;

	width:100%;
	max-width:420px;

	margin-top:.9rem;
	padding:.72rem 1rem;

	border:2px solid #111;
	border-radius:2px;

	background:#111;
	color:#fff;

	font:inherit;
	font-weight:600;
	line-height:1.2;

	cursor:pointer;
}

.library-toggle:hover {
	background:#fff;
	color:#111;
}

.library-toggle:focus-visible {
	outline:3px solid #b38a5a;
	outline-offset:3px;
}

.library-toggle-icon {
	font-size:1.35rem;
	line-height:1;
}

.library-articles {
	margin-top:1.25rem;
}

.library-links {
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:.35rem 1.25rem;
}

.library-links a {
	display:block;

	padding:.38rem 0;

	color:#111;
	text-decoration:none;
	font-weight:600;
	line-height:1.35;

	border-bottom:1px solid rgba(0,0,0,.16);
}

.library-links a:hover {
	text-decoration:underline;
}

.library-links a:focus-visible {
	outline:3px solid #b38a5a;
	outline-offset:3px;
}

@media screen and (max-width:900px) {
	.library-links {
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}

@media screen and (max-width:600px) {
	.library-links {
		grid-template-columns:1fr;
	}
}

/* =========================================================
   VISIT
   ========================================================= */

.visit-section{
	padding:6rem 0;
	background:#201d1a;
	color:#fff;
}

.visit-grid{
	display:grid;
	grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
	gap:4rem;
	align-items:center;
}

.visit-section h2{
	margin:.2rem 0 1rem;
	color:#fff;
	font-size:clamp(2.3rem,4vw,4rem);
}

.visit-section p,
.visit-section address{
	max-width:700px;
	color:#f0ece6;
	font-size:1.06rem;
	line-height:1.75;
	font-style:normal;
}

.visit-actions{
	display:grid;
	gap:.75rem;
}

.visit-actions a{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:50px;
	padding:.8rem 1rem;
	border:1px solid rgba(255,255,255,.72);
	border-radius:999px;
	color:#fff;
	font-weight:800;
	text-decoration:none;
}

.visit-actions a:first-child{
	background:#fff;
	color:#1d1d1d;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer{
	padding:4.5rem 0 5rem;
	background:#f5f2ed;
	color:#1e1e1e;
}

.footer-grid{
	display:grid;
	grid-template-columns:1.1fr 1fr .8fr;
	gap:3rem;
	padding-bottom:2.5rem;
	border-bottom:1px solid #cbc4b9;
}

.footer-brand strong{
	display:block;
	margin-bottom:.55rem;
	font-family:var(--serif);
	font-size:1.65rem;
	font-weight:600;
}

.footer-brand p,
.footer-brand address,
.footer-grid p{
	margin:.35rem 0;
	color:#000000;
	line-height:1.65;
	font-style:normal;
}

.footer-brand>a{
	display:inline-block;
	margin-top:.65rem;
	font-weight:800;
}

.footer-grid h2{
	margin:0 0 .7rem;
	font-family:var(--serif);
	font-size:1.35rem;
	font-weight:550;
}

.insurance-row{
	display:flex;
	align-items:center;
	gap:1rem;
	margin-top:2rem;
}

.vsp-promo{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:.75rem;
	width:300px;
	height:96px;
	padding:.8rem 1rem;
	background:#111;
	color:#fff;
	border-radius:4px;
}

.vsp-promo div{
	display:flex;
	flex-direction:column;
	line-height:1.25;
}

.vsp-promo strong{
	font-size:.95rem;
}

.vsp-promo span{
	margin-top:.25rem;
	font-size:.75rem;
	color:#d9f4f7;
}

.vsp-promo a{
	flex:0 0 auto;
	padding:.55rem .7rem;
	background:#ffffff;
	color:#000000;
	font-size:.78rem;
	font-weight:800;
	text-decoration:none;
	border-radius:3px;
}

.insurance-row img{
	max-width:120px;
	max-height:62px;
	object-fit:contain;
}

.footer-book{
	margin-top:.75rem;
	background:#1d1d1d;
	color:#fff;
	border-color:#1d1d1d;
}

.footer-social {
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	justify-content:center;
	gap:1.5rem;
	padding:1.8rem 0 1rem;
}

.footer-social a {
	display:inline-block;
	width:auto;
	height:auto;
	color:#1e1e1e;
	font-size:.88rem;
	font-weight:700;
	line-height:1.2;
	text-align:center;
	text-decoration:none;
	vertical-align:top;
}

.footer-social a span {
	display:block;
	margin-top:.45rem;
}

.footer-social img {
	display:block;
	width:58px;
	height:58px;
	margin:0 auto;
	padding:9px;
	border:1px solid #aaa39a;
	border-radius:50%;
	background:#fff;
	object-fit:contain;
}

.footer-social a:hover span {
	text-decoration:underline;
	text-underline-offset:3px;
}
.footer-legal{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:.5rem 1.3rem;
	margin-bottom:1.5rem;
	margin-top: 1em;
}

.footer-legal a{
	font-size:.9rem;
	font-weight:700;
}

.footer-bottom{
	position:relative;
	text-align:center;
	display:block;
	padding-top:1rem;
	margin:0 auto;
	font-size:1.5rem;
}

.footer-bottom a{
	display:block;
	padding:.25em 0 0;
}

.site-credit img{
	display:block;
	margin:1em auto 0;
	max-width:200px;
	max-height:65px;
}


/* =========================================================
   EXPAND / COLLAPSE CONTROLS
   ========================================================= */

.service-details > summary,
.doctor-details > summary,
.article-accordion > summary{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:1rem;
	width:100%;
	min-height:52px;
	padding:.9rem 1rem;
	margin:0;
	border:1px solid #3a3a3a;
	border-radius:4px;
	background:#ffffff;
	color:#202020;
	font-weight:800;
	line-height:1.35;
	cursor:pointer;
	list-style:none;
	-webkit-user-select:none;
	user-select:none;
}

.service-details > summary::-webkit-details-marker,
.doctor-details > summary::-webkit-details-marker,
.article-accordion > summary::-webkit-details-marker{
	display:none;
}

.service-details > summary::after,
.doctor-details > summary::after,
.article-accordion > summary::after{
	content:"+";
	flex:0 0 auto;
	display:flex;
	align-items:center;
	justify-content:center;
	width:30px;
	height:30px;
	border:1px solid #3a3a3a;
	border-radius:50%;
	font-size:1.35rem;
	font-weight:500;
	line-height:1;
}

.service-details[open] > summary::after,
.doctor-details[open] > summary::after,
.article-accordion[open] > summary::after{
	content:"−";
}

.service-details[open] > summary,
.doctor-details[open] > summary,
.article-accordion[open] > summary{
	background:#f6f3ee;
}

.service-details-content{
	padding:1rem 0 0;
}

.doctor-details > div{
	padding:1.1rem 1.2rem 1.3rem;
}

.article-content{
	padding:1.1rem 1.4rem 1.6rem;
}

.article-accordion > summary{
	margin:0;
	border:0;
	border-radius:0;
	border-bottom:1px solid #d8d2c8;
}

.article-accordion > summary::after{
	margin-left:auto;
}

.article-accordion > summary span{
	flex:0 0 auto;
}


/* =========================================================
   FLORAL BACKGROUND
   ========================================================= */

.services-section,
.specials-section,
.eye-health-section{
	position:relative;
	background:#ffffff;
	overflow:hidden;
}

.services-section::before,
.specials-section::before,
.eye-health-section::before{
	content:"";
	position:absolute;
	inset:0;
	background:
		linear-gradient(
			rgba(255,255,255,.6),
			rgba(255,255,255,.6)
		),
		url('../../images/modern-pattern.jpg') center top repeat;
	opacity:.85;
	pointer-events:none;
	z-index:0;
}

.services-section .section-shell,
.specials-section .section-shell,
.eye-health-section .section-shell{
	position:relative;
	z-index:1;
}


/* =========================================================
   VIDEO CONTROLS
   ========================================================= */

.hero-video-toggle,
.media-toggle{
	opacity:1 !important;
	visibility:visible !important;
	pointer-events:auto !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media screen and (max-width:1280px){

    .home-hero h1 {
    max-width: 750px;
    }
    }
@media screen and (max-width:1100px){

	.header-text-link{
		display:none;
	}
    .home-hero h1 {
    max-width: 700px;
    }
	.hero-service-links{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}

	.service-group{
		grid-template-columns:1fr;
		gap:1.5rem;
	}

	.service-group-heading{
		max-width:700px;
	}

	.guide-grid{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}

	.offer-grid{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}

	.team-grid{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}

	.condition-grid{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}
@media screen and (max-width:980px){

.header-action-button,
.site-menu-button{
	font-size:.75rem;
}
}

@media screen and (max-width:800px){

	.site-header{
		background:rgba(0,0,0,.74);
	}

	.site-header.is-scrolled{
		background:rgba(255,255,255,.98);
	}

	.site-header-inner{
		width:92%;
		min-height:68px;
	}

	.site-brand-name{
		font-size:1.03rem;
	}

	.site-brand-wellness{
		font-size:.62rem;
	}

	.header-action-button{
		display:none;
	}

	.site-menu-button{
		min-width:76px;
	}

	.home-hero{
		height:78vh;
		min-height:590px;
		max-height:760px;
	}

	.hero-parallax{
		inset:0;
		height:100%;
		transform:none !important;
	}

	.home-hero-content{
		width:92%;
		padding:7rem .6rem 8rem;
	}

	.home-hero h1{
		font-size:clamp(2.35rem,7vw,2.75rem);
	}

	.home-hero h1 span{
		font-size:.52em;
		line-height:1.25;
	}

	.hero-actions{
		flex-direction:column;
		align-items:center;
	}

	.hero-button{
	   padding: 0 1.35rem;
	   min-height: 30px;
		width:min(320px,100%);
	}

	.hero-video-toggle{
		right:.8rem;
		bottom: 3.75rem;
	}
    .hero-tagline {
    margin: 1rem 0 0 0;
     }
	.hero-introduction{
		padding:0 1rem 3.5rem;
	}

	.hero-introduction-inner{
		margin:-42px auto 0;
		padding:2.4rem 1.35rem;
	}

	.hero-service-links{
		grid-template-columns:1fr;
	}

	.services-section,
	.service-guide,
	.specials-section,
	.team-section,
	.eye-health-section,
	.library-section{
		padding:5rem 0;
	}

	.service-card-grid{
		grid-template-columns:1fr;
	}

	.guide-grid{
		grid-template-columns:1fr;
	}

	.red-light-feature{
		min-height:560px;
	}

	.red-light-feature-shade{
		background:rgba(0,0,0,.60);
	}

	.red-light-feature-content{
		padding:5rem 0;
	}

	.special-feature{
		grid-template-columns:1fr;
	}

	.special-feature img{
		min-height:240px;
	}

	.offer-grid,
	.team-grid,
	.condition-grid{
		grid-template-columns:1fr;
	}

	.library-layout{
		grid-template-columns:1fr;
		gap:2rem;
	}

	.library-intro{
		position:static;
	}

	.library-intro img{
		max-width:360px;
	}

	.visit-grid,
	.footer-grid{
		grid-template-columns:1fr;
		gap:2rem;
	}

	.footer-grid{
		text-align:left;
	}

	.service-details > summary,
	.doctor-details > summary,
	.article-accordion > summary{
		min-height:56px;
		padding:1rem;
	}
}

@media screen and (max-width:600px) {
	.footer-social {
		max-width:430px;
		margin:0 auto;
		gap:1.25rem .65rem;
	}

	.footer-social a {
		flex:0 0 100px;
		width:100px;
	}

	.footer-social img {
		width:52px;
		height:52px;
	}
}
@media screen and (max-width:550px){
    
    .home-hero h1 {
        font-size: clamp(1.35rem, 7vw, 3.5rem);
    }
	.insurance-row{
		flex-direction:column;
		align-items:flex-start;
	}

	.vsp-promo{
		width:100%;
		max-width:300px;
	}
}


@media screen and (max-width:520px){

	.hero-eyebrow{
		font-size:.7rem;
	}

	.hero-introduction-inner{
		padding:2rem 1rem;
	}

	.service-card-body{
		padding:1.35rem 1.2rem 1.5rem;
	}

	.team-card{
		grid-template-columns:90px 1fr;
	}

	.team-card img{
		width:90px;
		height:108px;
	}

	.footer-social{
		max-width:325px;
		gap:1.25rem .75rem;
	}

	.footer-social a{
		flex:0 0 100px;
		width:100px;
		height:auto;
	}
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){

	html{
		scroll-behavior:auto;
	}

	*,
	*::before,
	*::after{
		scroll-behavior:auto !important;
		transition:none !important;
		animation:none !important;
	}

	.hero-parallax,
	.home-hero-video{
		transform:none !important;
	}
}


/* =========================================================
   PRINT
   ========================================================= */

@media print{

	body{
		background:#fff;
		color:#000;
	}

	.site-header,
	.home-hero,
	.hero-introduction,
	.services-section,
	.service-guide,
	.red-light-feature,
	.team-section,
	.eye-health-section,
	.library-section,
	.visit-section,
	.site-footer,
	.special-feature{
		display:none !important;
	}

	.specials-section{
		display:block !important;
		padding:0;
	}

	.offer-grid{
		display:grid;
		grid-template-columns:repeat(2,1fr);
		gap:1rem;
	}

	.offer-card{
		color:#000;
		background:#fff;
		border:1px solid #000;
		break-inside:avoid;
	}

	.offer-card p,
	.offer-card h3,
	.offer-card strong{
		color:#000 !important;
	}

	.print-offer{
		display:none !important;
	}
}


/* =========================================================
   PRINT SINGLE OFFER
   ========================================================= */

@media print{

	body.print-single-offer .offer-grid{
		display:block !important;
	}

	body.print-single-offer .offer-card{
		display:none !important;
	}

	body.print-single-offer .offer-card.print-target{
		display:block !important;
		width:100% !important;
		max-width:700px !important;
		margin:0 auto !important;
		padding:2em !important;
		color:#000 !important;
		background:#fff !important;
		border:2px solid #000 !important;
		box-shadow:none !important;
		break-inside:avoid;
	}

	body.print-single-offer .offer-card.print-target p,
	body.print-single-offer .offer-card.print-target h3,
	body.print-single-offer .offer-card.print-target strong,
	body.print-single-offer .offer-card.print-target span{
		color:#000 !important;
	}

	body.print-single-offer .section-heading,
	body.print-single-offer .special-feature,
	body.print-single-offer .print-offer{
		display:none !important;
	}
}
/* =========================================================
   HOMEPAGE REVISIONS
   ========================================================= */
/* $20 MINI FACIAL HEADER SPECIAL */
.header-special-link {
	white-space:nowrap;
	margin-right:.2rem;
	padding:.68rem .95rem;
	border: 0px solid #d6b56f;
	border-radius:999px;
	background: linear-gradient(to right, rgba(206, 189, 167, 1), rgba(247, 241, 226, 1), rgba(206, 189, 167, 1));
	color:#000000;
	font-weight:800;
	box-shadow:0 4px 16px rgba(78,51,13,.18);
}
.header-special-link:hover {
    border: 1px solid #ffffff;
	background:#000000;
	color:#ffffff;
}
.site-header.is-scrolled .header-special-link {
   color: #000000;
    background: linear-gradient(to right, rgba(206, 189, 167, 1), rgba(247, 241, 226, 1), rgba(206, 189, 167, 1));
}
.site-header.is-scrolled .header-special-link:hover {
	background:#000000;
	color:#ffffff;
}
/* SUBTLE IVORY / SILVER SHINE */
.hero-introduction-inner { 
border-bottom-right-radius: 3em;
    border-bottom-left-radius: 3em;
}
/* LOCKED SECTION HEADING LINES */
.locked-heading .heading-line {
	display:block;
	white-space:nowrap;
}
.section-heading h2.locked-heading {
	font-size:clamp(1.3rem,4vw,3.8rem);
}
.hero-introduction h2.locked-heading {
	font-size:clamp(1.3rem,3.5vw,3.2rem);
}
.red-light-feature h2.locked-heading {
	font-size:clamp(1.3rem,4.5vw,4.7rem);
}
.visit-section h2.locked-heading {
	font-size:clamp(1.3rem,4vw,4rem);
}
/* MINI FACIAL DETAILS */
.special-feature-copy {
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding:2.4rem;
}
.special-feature-copy .special-event-line {
	margin:.15rem 0 1rem;
	color:#302b25;
	font-size:1.03rem;
	line-height:1.55;
}
.special-feature-copy .special-addon {
	margin:.25rem 0 1.35rem;
	padding-top:.9rem;
	border-top:1px solid #d8d2c8;
	color:#302b25;
}
.special-feature-copy strong {
	font-weight:800;
}
/* NEW EYE CARE & VISION HEALTH LIBRARY */
.library-section {
	position:relative;
	padding:7rem 0;
	background:#ffffff;
	overflow:hidden;
}
.library-section::before {
	content:"";
	position:absolute;
	inset:0;
	background:
		linear-gradient(rgba(255,255,255,.66),rgba(255,255,255,.66)),
		url('../../images/modern-pattern.jpg') center top repeat;
	opacity:.85;
	pointer-events:none;
	z-index:0;
}
.library-section .section-shell {
	position:relative;
	z-index:1;
}
.vision-library-intro {
	max-width:900px;
	margin-left:auto;
	margin-right:auto;
}
.vision-library-intro > p:last-child {
	max-width:720px;
}
.vision-library-group {
	margin-top:4rem;
}
.vision-library-group:first-of-type {
	margin-top:2.5rem;
}
.vision-group-heading {
	margin-bottom:1.5rem;
	padding-bottom:1rem;
	border-bottom:1px solid #d8d2c8;
}
.vision-group-heading h3 {
	margin:0;
	font-family:"Playfair Display",Georgia,serif;
	font-size:clamp(1.7rem,2.8vw,2.7rem);
	font-weight:550;
	line-height:1.15;
}
.vision-condition-grid {
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:1.2rem;
}
.vision-card {
	display:flex;
	flex-direction:column;
	overflow:hidden;
	background:#ffffff;
	border:1px solid #d8d2c8;
	box-shadow:0 10px 30px rgba(0,0,0,.05);
}
.vision-card img {
	display:block;
	width:100%;
	aspect-ratio:16/10;
	object-fit:cover;
}
.vision-card-body {
	display:flex;
	flex:1;
	flex-direction:column;
	padding:1.45rem;
}
.vision-card-type {
	margin:0 0 .4rem;
	color:#564631;
	font-size:.72rem;
	font-weight:800;
	letter-spacing:.15em;
	text-transform:uppercase;
}
.vision-card h3,
.vision-article-card h3 {
	margin:0 0 .7rem;
	color:#1d1d1d;
	font-family:"Playfair Display",Georgia,serif;
	font-size:1.55rem;
	font-weight:550;
	line-height:1.18;
}
.vision-card-body > p:not(.vision-card-type),
.vision-article-card > p:not(.vision-article-number) {
	margin:0;
	color:#414141;
	line-height:1.7;
}
.vision-read-link {
	display:inline-block;
	margin-top:auto;
	padding-top:1.15rem;
	color:#2a2118;
	font-weight:800;
	text-decoration:underline;
	text-decoration-thickness:1px;
	text-underline-offset:4px;
}
.vision-education-group {
	margin-top:5rem;
}
.vision-article-grid {
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:1.2rem;
}
.vision-article-card {
	display:flex;
	flex-direction:column;
	min-height:100%;
	padding:1.7rem;
	background:#ffffff;
	border:1px solid #d8d2c8;
	box-shadow:0 10px 30px rgba(0,0,0,.05);
}
.vision-article-number {
	margin:0 0 .7rem;
	color:#564631;
	font-family:"Playfair Display",Georgia,serif;
	font-size:1rem;
}
.vision-library-actions {
	margin-top:3rem;
}
/* KEEP THE SPECIAL VISIBLE ON TABLETS */
@media screen and (max-width:1100px) {
	.header-special-link {
		display:inline-flex;
		font-size:.75rem;
		padding:.6rem .8rem;
	}
	.vision-condition-grid,
	.vision-article-grid {
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}
@media screen and (max-width:800px) {
	.header-special-link {
		display:none;
	}
	.vision-condition-grid,
	.vision-article-grid {
		grid-template-columns:1fr;
	}
	.vision-library-group {
		margin-top:3.5rem;
	}
}
@media screen and (max-width:520px) {
	.locked-heading {
		font-size:clamp(1.08rem,5.2vw,1.6rem) !important;
	}
	.special-feature-copy {
		padding:1.8rem 1.25rem;
	}
	.vision-card-body,
	.vision-article-card {
		padding:1.3rem;
	}
}
.library-section {
	padding:7rem 0;
	background:#f6f3ee;
}
.library-top {
	display:grid;
	grid-template-columns:minmax(320px,440px) minmax(0,560px);
	gap:3.5rem;
	align-items:center;
	justify-content:center;
	max-width:1080px;
	margin:0 auto;
}
.library-image img {
	display:block;
	width:100%;
	height:auto;
	object-fit:cover;
}
.library-heading-content {
	display:flex;
	flex-direction:column;
	justify-content:center;
}
.library-heading-content .section-eyebrow {
	margin:0 0 .8rem;
}
.library-heading-content h2 {
	margin:0 0 1.3rem;
	font-family:"Playfair Display",Georgia,serif;
	font-size:clamp(4rem,6vw,4rem);
	font-weight:500;
	line-height: 1.25em;
	letter-spacing:-.035em;
}
.library-heading-content > p:not(.section-eyebrow) {
	max-width:560px;
	margin:0;
	color:#414141;
	font-size:1.08rem;
	line-height:1.75;
}
.library-buttons {
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:.85rem;
	max-width:1200px;
	margin:3.5rem auto 0;
}
.library-buttons a {
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:54px;
	padding:.9rem 1rem;
	background:#111111;
	color:#ffffff;
	border:1px solid #111111;
	border-radius:4px;
	font-size:.92rem;
	font-weight:800;
	line-height:1.3;
	text-align:center;
	text-decoration:none;
	transition:background .2s ease,transform .2s ease;
}
.library-buttons a:hover {
	background:#333333;
	transform:translateY(-2px);
}
@media screen and (max-width:950px) {
	.library-top {
		grid-template-columns:minmax(280px,380px) minmax(0,480px);
		gap:2.5rem;
	}
	.library-heading-content h2 {
		font-size:clamp(2.5rem,4.75vw,3.5rem);
	}
	.library-buttons {
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}
@media screen and (max-width:700px) {
	.library-section {
		padding:5rem 0;
	}
	.library-top {
		grid-template-columns:1fr;
		max-width:520px;
	}
	.library-image {
		max-width:420px;
		margin:0 auto;
	}
	.library-heading-content {
		text-align:center;
		align-items:center;
	}
	.library-heading-content h2 {
		font-size:clamp(3.2rem,7vw,4.6rem);
	}
	.library-buttons {
		grid-template-columns:1fr;
		margin-top:2.5rem;
	}
}

.cvw-top-black-center,
.cvw-top-black-left,
.cvw-top-white-center,
.cvw-top-white-left {
	all:unset !important;
	position:relative !important;
	z-index:10 !important;
	display:block !important;
	width:96px !important;
	height:48px !important;
	box-sizing:border-box !important;
	border-radius:999px !important;
	font-family:var(--sans) !important;
	font-size:.78rem !important;
	font-weight:700 !important;
	line-height:48px !important;
	text-align:center !important;
	text-decoration:none !important;
	cursor:pointer !important;
}

/* BLACK - CENTER */
.cvw-top-black-center {
	margin:1.5rem auto 0 !important;
	background:#000 !important;
	color:#fff !important;
	border:1px solid #000 !important;
}

/* BLACK - LEFT */
.cvw-top-black-left {
	margin:1.5rem 0 0 !important;
	background:#000 !important;
	color:#fff !important;
	border:1px solid #000 !important;
}

/* WHITE - CENTER */
.cvw-top-white-center {
	margin:1.5rem auto 0 !important;
	background:#fff !important;
	color:#000 !important;
	border:1px solid #000 !important;
}

/* WHITE - LEFT */
.cvw-top-white-left {
	margin:1.5rem 0 0 !important;
	background:#fff !important;
	color:#000 !important;
	border:1px solid #000 !important;
}

.cvw-top-black-center:hover,
.cvw-top-black-left:hover {
	background:#fff !important;
	color:#000 !important;
}

.cvw-top-white-center:hover,
.cvw-top-white-left:hover {
	background:#000 !important;
	color:#fff !important;
}

.cvw-top-black-center:focus,
.cvw-top-black-left:focus,
.cvw-top-white-center:focus,
.cvw-top-white-left:focus {
	background:var(--focus) !important;
	color:#fff !important;
	outline:3px dotted var(--focus-outline) !important;
	outline-offset:3px !important;
}