*, *::before, *::after {box-sizing: border-box;}
html {scroll-behavior: smooth;}
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {margin: 0; padding: 0;}
body {min-height: 100vh; line-height: 1.5; -webkit-font-smoothing: antialiased;}
img, picture, video, canvas, svg {max-width: 100%; height: auto; display: block;}
input, button, textarea, select {font: inherit;}
p, h1, h2, h3, h4, h5, h6 {overflow-wrap: break-word;}
h1, h2, h3 {text-wrap: balance;}
a, button {font-family: inherit; text-decoration: none;}
div {position: relative;}
ul, li {margin: 0; padding: 0; list-style: none;}



body {
	font-family: var(--font-body);
	font-optical-sizing: auto;
	font-size: 1rem;
	font-weight: 400;
	font-style: normal;
	color: var(--dark);
  background: var(--white);
	letter-spacing: .02em;
	line-height: 1.6;
}

/*-------- DESIGN TOKENS --------*/


:root {
  --white: #ffffff;
  --light: #F2F7FC;
  --light-gray: #BEDCF0;
  --dark-alt: #003A7B;
  --mid-gray: #595771;
  --dark: #002B5C;
  --black: #041730;
  --accent-lightest: #7FCFF8;
  --accent-light: #00B2FF;
  --accent: #0074E8;
  --accent-hover: #0053BF;
  --border-dark: #225082;

  --font-head: "Google Sans Flex", serif;
  --font-body: "Google Sans Flex", Arial, sans-serif;

  --r: 4px;
  --ease: 300ms ease;
}


/*-------- LAYOUT --------*/

.full {
	padding: 0 6rem;
	width: 100%;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 3rem;
}

.pad {
	padding-top: 7rem;
	padding-bottom: 7rem;
}

.pad-less {
	padding-top: 5rem;
	padding-bottom: 5rem;
}

.grid-4-3 {
	grid-template-columns: 4fr 3fr;
}

.full.grid-50-50 {
gap: 0;
}


/*Animations*/
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
  will-change: transform, opacity; /* Optimizes browser rendering performance */
}

.reveal.show {
  opacity: 1;
  transform: translateY(0px);
}

.reveal:nth-of-type(2) { transition-delay: 0.2s; }
.reveal:nth-of-type(3) { transition-delay: 0.4s; }
.reveal:nth-of-type(4) { transition-delay: 0.0s; }
.reveal:nth-of-type(5) { transition-delay: 0.2s; }
.reveal:nth-of-type(6) { transition-delay: 0.4s; }


/*-------- UTILITIES --------*/

.pad-s {padding: 2rem;}
.pad-m {padding: 2.75rem;}
.pad-l {padding: 3.5rem;}

.round {border-radius: 4px;}

.bg-white {background-color: #FFFFFF; color: var(--dark);}
.bg-light {background-color: var(--light); color: var(--dark);}
.bg-accent-hover {background-color: var(--accent-hover); color: var(--light);}
.bg-dark-alt {background-color: var(--dark-alt); color: var(--light);}
.bg-dark {background-color: var(--dark); color: var(--light);}
.bg-black {background-color: var(--black); color: var(--light);}

.light-gray {color: var(--light-gray);}

.text-center {text-align: center;}
.text-left {text-align: left;}
.text-right {text-align: right;}
.accent {color: var(--accent);}
.underline {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--accent);
	text-underline-offset: 10px;
}

.card-container {
	display: block;
	text-decoration: none;
}

.card-container:hover .card {
	box-shadow: 0px 4px 24px 0px rgba(19, 12, 100, 0.20);
	transform: translateY(-8px);
}

.card {
	background-color: var(--white);
	padding: 1.8rem;
	border-radius: var(--r);
	text-align: center;
	box-shadow: 0px 4px 24px 0px rgba(19, 12, 100, 0.10);
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: transform 0.3s ease-out;
}

.card img {
	display: inline-block;
	height: auto;
}

.card .btn {
	margin-top: auto;
}

/*-------- TYPE --------*/


h1, h2, h3, h4 {
	line-height: 1.1;
	margin-bottom: .4em;
}

h1, h2 {
	font-family: var(--font-head);
	font-size: 3.2rem;
	font-weight: 500;
	letter-spacing: -.01em;
}

h3 {
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: -.01em;
	margin-bottom: .6em;
}

.eyebrow {
	display: block;
	font-size: 1.0rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	margin-bottom: 1.5em;
}

.text-l {font-size: 1.15rem;}
.text-m {font-size: 1rem;}
.text-s {font-size: .9rem;}

p { text-wrap: pretty;}
p + p {margin-top: 1.25rem;}


/*-------- LINKS + BUTTONS --------*/

a {
	text-decoriation: none;
	color: var(--dark);
	font-weight: 600;
	transition: var(--ease);
}

.btn, button.btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-weight: 600;
  padding: .5em 1em;
  margin-top: 1.5em;
  border: none;
  border-radius: var(--r);
  transition: var(--ease);
}

.btn-primary, button.btn-primary {
	color: var(--white);
	background-color: var(--accent);
	border: 2px solid var(--accent);
	min-height: 44px;
}

.btn:hover, button.btn:hover {
	background-color: var(--accent-hover);
	border-color: var(--accent-hover);
	gap: 1rem;
	cursor: pointer;
}

.btn.btn-dark:hover{
	background: var(--white);
	border-color: var(--white);
	color: var(--accent);
}

.btn-secondary {
	min-height: 44px;
	background-color: var(--white);
	color: var(--accent);
	border: 2px solid var(--accent);
}

.btn-secondary:hover {
	background-color: var(--accent-hover);
	border-color: var(--accent-hover);
	color: var(--white);
}

.btn-text {
	color: var(--accent);
	padding: .3em .6em;
}
.btn-text:hover {
	color: var(--accent-hover);
	background-color: var(--white);
}

.btn-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  padding: 0;
  border: none;
  background-color: var(--accent);
  color: #ffffff;
}
.btn-icon img {
	width: auto;
	height: 40%;
}
.btn-icon:hover {background-color: var(--accent-hover);}

.btn-group {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: auto;
}

.chip {
	padding: 4px 16px 4px 12px;
	border-radius: 60px;
	border: solid 1px var(--light-gray);
	display: flex;
	gap: 6px;
}

.chip svg path {
	fill: var(--accent-light);
}

.chip-container {
	display: inline-flex;
	margin: 24px 0 16px;
	gap: 16px;
	flex-wrap: wrap;
}


/*-------- NAVIGATION --------*/

#navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 60px;
	position: fixed;
  top: 0;
  width: 100%;
  padding-top: 16px;
  padding-bottom: 16px;
  transition: all 0.4s ease-in-out; /* Animates the transition */
  z-index: 1000;
}
  
#navbar #logo {
	height: 72px; /* Big initial logo height */
  width: auto;
  transition: all 0.3s ease; /* Smoothly shrinks the image */
}

#navbar.shrink {
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: #ffffff; /* Optional background fade-in */
  box-shadow: 0 4px 8px rgba(19, 12, 100, 0.10);
}

#navbar.shrink #logo {
  height: 56px; /* Cuts logo size in half */
}

.nav ul {
	display: flex;
	align-items: center;
	gap: .4rem;
}

.nav ul li a {
	font-weight: 400;
	padding: .4rem .8rem;
	min-height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: var(--ease);
}

.nav ul li a.quiet {
	color: var(--border-dark);
}

.nav ul li a.btn-secondary {
	margin-top: 0;
	margin-left: 12px;
	font-weight: 600;
}

.nav ul li a::after, .solutions .card-container span.btn-text::after {
  content: '';
  position: absolute;
  width: calc(100% - 1.6rem); 
  height: 2px;
  bottom: 0;
  left: .8rem;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: bottom left;
  transition: var(--ease);
}
.nav ul li a:hover::after, .solutions .card-container:hover span.btn-text::after {transform: scaleX(1);}
.nav ul li a.btn-secondary:hover::after {transform: scaleX(0);}


/* Mobile Navigation */

.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-hamburger span {
  display: block;
  width: 100%; height: 2px;
  background: var(--dark);
  border-radius: 2px;
  transition: all var(--ease);
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.nav-mobile {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0; bottom: 0;
  background: var(--white);
  padding: 1.5rem;
  overflow-y: auto;
  z-index: 199;
  flex-direction: column;
  gap: .125rem;
}
.nav-mobile.open {display: flex;}

.nav-mobile-link {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--dark);
  padding: 1rem;
  border-bottom: 1px solid #DDDDDD;
  display: block;
}

.nav-mobile-link:hover {background: var(--light); }

.nav-mobile .btn {margin-top: 1.5rem; text-align: center; color: var(--white);}


/*-------- HERO --------*/


.homepage .hero.grid {
	grid-template-columns: 1fr;
	padding-top: 16rem;
	padding-bottom: 8rem;
	background: 
		radial-gradient(80% 40% at center 60%, rgba(8, 22, 64, 0.75) 0% 10%, rgba(8, 22, 64, 0.0) 70% 100%),
		url(images/lake-eola.jpg) center / cover no-repeat;
}

.hero h1 {
	font-size: 4.2rem;
	color: var(--white);
}

.hero p {
	font-size: 1.4em;
	max-width: 800px;
	margin: 0 auto 16px auto;
}

.homepage .hero h1, .homepage .hero p {
	text-shadow: 0 0 30px rgba(8, 22, 64, 0.85);
}

.homepage .hero .btn {
	box-shadow: 0 0 30px rgba(8, 22, 64, 0.85);
}


.hero .btn-secondary {
	border: none;
}

.partner-logos {
	width:100%;
	padding: .8em 2em;
	display: inline-flex;
	justify-content: space-evenly;
	opacity: .4;
	border-bottom: solid 1px var(--light-gray);
	overflow: hidden;
}


/*-------- WHY PPC --------*/

.problem {
	grid-template-columns: 4fr 3fr;
}

.getting-started.card {
	display: block;
	text-align: left;
	padding: 2.8rem 4rem;
}

.getting-started h2 {
	font-size: 2.0rem;
	margin-bottom: 1.4rem;
}

.subway-line {
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 8px auto 16px;
}

.subway-line::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 28px;
  left: 4px;
  width: 2px;
  background-color: var(--accent-light);
}

.station {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  position: relative;
}

.station .node {
  width: 10px;
  height: 10px;
  background-color: var(--accent-light);
  border-radius: 50%;
  z-index: 1;
}

.station .label {margin-left: 15px; max-width: 90%;}



/*-------- INSURANCE SOLUTIONS --------*/

.solutions.pad {
	padding-top: 3rem;
}

.solutions .grid {
	grid-template-columns: repeat(auto-fit, minmax(clamp(240px, 22%, 400px), 1fr));
  gap: 24px;
  margin-top: 3rem;
}

.solutions .card {
	box-shadow: 0px 4px 24px 0px rgba(19, 12, 100, 0.10);
}

.solutions .card p {
	margin-bottom: .5rem;
	font-size: .95rem;
}

.solutions .card img {
	margin-bottom: .8rem;
	max-width: 64px;
}

.solutions .card-container p {
	font-weight: 400;
}

.solutions .card-container span.btn-text::after {
	left: .6rem;
	width: calc(100% - 1.2rem);
}
.solutions .card-container span.btn-text:hover {
	gap: 0.6em;
}

.solutions .card .btn {
	position: relative;
}

/*-------- COMMERCIAL INSURANCE --------*/


.commercial p {
	color: var(--light-gray);
}

.commercial .eyebrow {
	color: var(--accent-lightest);
}

.commercial .chip {
	border-color: var(--border-dark);
}


/*-------- REVIEWS --------*/

.reviews .grid {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
  gap: 24px;
  margin-top: 3rem;
}

.reviews .card img {
	margin-bottom: .8rem;
	min-width: 130px;
}



/*-------- SUB PAGES --------*/


.internal .hero.grid {
	grid-template-columns: 1fr;
	padding-top: 12rem;
	padding-bottom: 6rem;
}

.internal .hero h1 {
	font-size: 3.5rem;
	max-width: 800px;
	margin: 2rem auto;
}

.internal .hero p {
	font-size: 1.2rem;
}


/* Personal + Commercial Insurance */

.commercial-insurance .overview div {
	text-align: center;
}

.commercial-insurance .overview img {
	margin: 0 auto 1rem;
}

.commercial-insurance .hero.grid {
	background: 
		radial-gradient(100% 50% at center 60%, rgba(8, 22, 64, 0.65) 0% 10%, rgba(8, 22, 64, 0.0) 80% 100%),
		url(images/construction.jpg) center -10px / cover no-repeat;
}

.commercial-insurance.personal .hero.grid {
	background: 
		radial-gradient(100% 50% at center 60%, rgba(8, 22, 64, 0.65) 0% 10%, rgba(8, 22, 64, 0.0) 80% 100%),
		url(images/driving.jpg) center / cover no-repeat;
}

.commercial-insurance .grid-50-50 {
	background-color: var(--dark);
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.commercial-insurance h2 {font-size: 2.2rem;}

#commercial-property .full-bg {background: url(images/mall.jpg) center / cover no-repeat;}
#commercial-auto .full-bg {background: url(images/truck.jpg) center / cover no-repeat;}
#commercial-flood .full-bg {background: url(images/hurricane.jpg) center / cover no-repeat;}
#workers-comp .full-bg {background: url(images/industrial-worker.jpg) center / cover no-repeat;}

#homeowners-insurance .full-bg {background: url(images/house-2.jpg) center / cover no-repeat;}
#auto-insurance .full-bg {background: url(images/bmw.jpg) center / cover no-repeat;}
#boat-insurance .full-bg {background: url(images/boat.jpg) center / cover no-repeat;}
#flood-insurance .full-bg {background: url(images/flood.jpg) center / cover no-repeat;}
#umbrella .full-bg {background: url(images/umbrella.jpg) center / cover no-repeat;}


/* Partners */

.partners .hero {
	background: 
		radial-gradient(rgba(0, 43, 92, .8) 0%, rgba(0, 116, 232, .9) 100%),
		url(images/building.jpg) center / cover no-repeat;
}
.partners-list {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}
.partners-list img {
	max-width: 400px;
	width: 100%;
	height: auto;
}

.partners .card {
	display: block;
	text-align: left;
	align-items: left;
}

.partners .card img {
	margin-bottom: 8px;
}

.partners .card ul li {
	padding: 6px 0;
	font-size: .9rem;
	line-height:1rem;
	color: var(--mid-gray);
	display: flex;
	gap: 6px;
}

/* About */

.about .hero {
	background: 
		radial-gradient(rgba(0, 43, 92, .8) 0%, rgba(0, 116, 232, .9) 100%),
		url(images/people/group.jpg) center 0 / cover no-repeat;
}

.about.hero h1 {
	font-size: 3.0rem;
}

.about.hero p {
	max-width: 800px;
	margin: 0 auto 16px auto;
}

.about .team-list {
	grid-template-columns: 1fr 1fr 1fr;
}

.about img.team-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.team-name {
	font-size: 1.3rem;
	font-weight: 600;
	margin: 12px auto 0px;
}

.team-title {
	opacity: 60%;
	font-size: .9rem;
	margin-bottom: 6px auto;
}
.about .card .btn-icon {
	  width: 32px;
    height: 32px;
    margin-top: 12px;
}

/* Claims */

.claims {
	padding-top: 8rem;
}

.claims h1 {
	font-size: 2.5rem;
	margin-bottom: 1.5rem;
}

.claims .grid {
	max-width: 900px;
	margin: 0 auto;
	background-color: var(--white);
	padding: 3rem;
	margin-bottom: 3rem;
}

.claims li {
	list-style: disc;
	line-height: 1.8;
}

.privacy {
	padding-top: 6rem;
}
.privacy .grid {
	max-width: 1000px;
	margin: auto;
}

.privacy p {
	margin-bottom: 1.5rem;
}

/* Contact */

.contact .grid {
	grid-template-columns: 1fr 2fr;
	padding-top: 12rem;
	padding-bottom: 6rem;
	align-items: start;
	background: 
		radial-gradient(100% 50% at center 60%, rgba(8, 22, 64, 0.85) 0%, rgba(8, 22, 64, 0.3) 100%),
		url(images/lake-eola.jpg) center / cover no-repeat;
}

.contact-wrapper > div {
	background-color: var(--white);
	border-radius: 4px;
	color: var(--dark);
	padding: 2rem;
}
.contact-wrapper ul {
	margin-bottom: 1rem;
}
.contact-wrapper p {
	margin: 0;
}
.contact .btn-text {
	margin: .3rem 0;
	padding-left: 0;

}

.social-links {
	display: inline-flex;
	gap: .6rem;
}


/* Commercial Quote */

.contact.commercial-quote .grid {
	grid-template-columns: 1fr;
}
.contact.commercial-quote .commercial-quote-form {
	max-width: 800px;
	width: 100%;
	margin: auto;
	padding: 3rem;
}


/*-------- FAQs --------*/

.faqs {padding-top: 5rem;}
.homepage .faqs {padding-top: 0;}
.faqs h2, .footer-cta h2, .reviews h2 {
	font-size: 2.5rem;
}

.faq-container {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid #DEE0EF;
  overflow: hidden;
}
.faq-item:nth-of-type(1) {margin-top: 36px;}

.faq-question {
  padding: 12px 20px;
  font-size: 1.15rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-question::-webkit-details-marker {display: none;}

.faq-question::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--accent);
  transition: transform 0.3s ease;
}

details[open] .faq-question::after {
  transform: rotate(45deg);
}

.faq-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease-out, opacity 0.25s ease-out;
}

.faq-answer {
  padding: 0 20px 20px 20px;
  font-size: 1rem;
  line-height: 1.8;
  margin: 0;
}



/*-------- FOOTER --------*/

.footer {
	grid-template-columns: 2fr 1fr 1fr;
	color: var(--light-gray);
}

.footer h4 {
	color: var(--white);
}

.footer ul, .footer p {margin-bottom: 24px}

.footer .sitemap a, .footer-end a {
	color: var(--light);
	display: inline-block;
	text-decoration: none;
	font-weight: 400;
	padding: .4rem 0;
	color: var(--light-gray);
}
.footer a:hover, .footer-end a:hover {color: #FFFFFF;}

.footer .btn.btn-text {color: var(--white);}
.footer .btn.btn-text:hover {color: var(--accent);}
.footer .btn-icon {
	display: inline-flex;
	padding: 0;
}

.footer .responsive-iframe {
	width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;        
}

.footer-end {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	color: var(--light-gray);
}
.footer-end a {padding: 0;}


/*-------- FORMS --------*/

.form {
	margin: 2rem auto;
	display: grid;
	gap: 1rem;
}

.form label {
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 600;
  color: var(--dark);
}

.form label span {
  color: var(--accent);
  font-weight: 400;
}

.form input,
.form textarea {
  width: 100%;
  padding: .75rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--dark);
  background: var(--white);
  border: 1.5px solid var(--light-gray);
  border-radius: var(--r);
  outline: none;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.form input:focus,
.form textarea:focus {
  border-color: var(--accent-light);
  box-shadow: 0 0 0 3px rgba(0,178,255,.12);
}
.form textarea { resize: vertical; min-height: 140px; }

fieldset {
	margin: 0;
	padding: 0;
	border: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.checkbox-group {
	text-align: left;
	display: flex;
	align-items: center;
	gap: 6px;
}

fieldset input[type="checkbox"] {
	box-sizing: border-box;
	width: 12px;
	height: 12px;
	accent-color: var(--accent-light);
	border: none;
	box-shadow: none;
}

fieldset input[type="checkbox"]:focus {
	box-sizing: border-box;
	width: 12px;
	height: 12px;
	border: none;
	box-shadow: none;
}

input#contact-captcha { width:50px; }

.form .btn {
	margin: 0;
}

.form-honeypot { display: none; }
.form-error { color: #b42318; margin: 0.35rem 0 0; }
.is-invalid { border-color: #b42318; }
#form-status { margin-top: 1rem; }
#form-status.is-success { color: #067647; }
#form-status.is-error { color: #b42318; }



/*-------- RESPONSIVE STYLES --------*/

@media (max-width: 960px) {
	.full {padding: 0 2rem;}
  .grid {grid-template-columns: 1fr 1fr;}
  .footer.grid {grid-template-columns: 1fr 1fr;}
	.hero.grid {grid-template-columns: 1fr;}
	.hero.full.grid, .contact-wrapper.full.grid {padding-top: 10rem; padding-bottom: 3rem;}
	.full.grid, .solutions.full, .reviews.full {padding-top: 6rem; padding-bottom: 6rem;}
}

@media (max-width: 768px) {
  .nav ul {display: none;}
  .nav-hamburger {display: flex;}
  .grid, .outcomes.grid, .capabilities .grid, .hero.grid {grid-template-columns: 1fr;}
  .pad-s, .pad-m, div.outcome {padding: 1.4rem;}
  .hero p, .internal .hero p {font-size: 1.2em; line-height: 1.5; margin-bottom: 2rem;}
  .hero.full.grid, .contact .grid {padding-top: 10rem; padding-bottom: 3rem;}
  .internal .hero.full.grid {padding-top: 8rem; padding-bottom: 1rem;}
}

@media (max-width: 560px) {
	.full {padding: 0 1.2rem;}
  .footer.grid, .contact .grid, .about .team-list {grid-template-columns: 1fr;}
  .form__row {grid-template-columns: 1fr;}
  .capabilities .grid {gap: 1.2rem}
  .full.grid, .solutions.full, .reviews.full {padding-top: 3rem; padding-bottom: 3rem; gap: 1rem;}
  .solutions .grid, .reviews .grid {gap: 1rem; margin-top: 1.5rem}
  .commercial-insurance .grid {padding-top: 1rem; padding-bottom: 1rem; gap: .5rem;}
  .card {padding: 1rem;}
  .partner-list.grid {grid-template-columns: 1fr 1fr;}
  .claims .grid {padding: 2rem;}
  .pad-l, .contact-wrapper > div, .contact.commercial-quote .commercial-quote-form {padding: 1.5rem;}
  .internal .faq-container {padding-top: 2rem;}
  .commercial-insurance .overview.grid {gap: 1rem;}
  .commercial-insurance .overview img {margin: 0 auto .5rem;}
  .form {margin: 1rem auto;}


  h1, .hero h1, .internal .hero h1, h2 {font-size: 2.2rem;}
  .faqs h2, .footer-cta h2, .reviews h2 {font-size: 1.8rem;}
  .commercial-insurance h2 {font-size: 2.0rem;}
  h3 {font-size: 1.4rem;}
  .internal h1, .internal .hero p {text-align: left;}
  span.super {display: none;}
  .border-dot {background: var(--white);}
  div.outcome {display: block;}
  div.outcome svg {width: 10%; height: auto; margin-bottom: 1rem;}
  .outcomes img {width: 60%;height: auto;}
  .text-l {font-size: 1.0rem;}
  .eyebrow {margin-bottom: 1.2em;}
  .chip-container {gap: 10px;}
  .getting-started.card {padding: 1rem;}
  .subway-line::before {bottom: 40px;}
  .faq-item:nth-of-type(1) {margin-top: 1rem;}
  .faq-question {padding: 10px 0;}
  .text-right {text-align: left;}
  .btn.btn-icon {width: 44px;}
  fieldset input[type="checkbox"] {width: 22px; height: 22px;}

  .grid, .solutions .grid {grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));}
  .btn-group {flex-direction: row;}
  .btn-group .btn {margin: 0 auto;}
  .btn {width: 100%; justify-content: center;}


}