/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type="button"],[type="reset"],[type="submit"],button{-webkit-appearance:button}[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checklist"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

/* screen reader */
.sr-only {border:0;clip:rect(0, 0, 0, 0);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}
.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;overflow:visible;position:static;white-space:normal;width:auto}

/* vars */
:root {
	--bg: #eaeaea;
	--bg2: #f4f4f4;
	--brand: #956c41;
	--brand2: #05213d;
	--dark: #000000;
	--light: #ffffff;
	--border-radius: 1.5rem;
}

html {height: 100%; scroll-behavior: smooth}
body {background-color: var(--light); color: var(--dark); display: flex; flex-direction: column; font-family: "Montserrat", serif; height: 100%; margin: 0 auto; max-width: 1920px}
h1, h2, h3, h4, h5, h6, p, ul, ol {margin: 1rem 0}
h1, h2, h3, h4, h5, h6, li {line-height: 1}
p {line-height: 1.5}
li {margin: 0.5rem 0}
h1, h2, h3 {color: var(--brand); text-transform: uppercase}
h1, h2 {font-size: 1.5rem}
h3 {font-size: 1.25rem}
ul {list-style-type: '- '; padding-left: 1rem}
a {color: inherit}
img {height: auto; max-width: 100%}
.container {padding: 0 1em}
.buttonholder {align-items: center; display: flex; flex-wrap: wrap; gap: 1rem}
.buttonholder.center, .center .buttonholder {justify-content: center}
.button {background-color: gray; border-radius: 0.5rem; padding: 0.5rem 1rem; color: white; text-decoration: none}
.caps {text-transform: uppercase}
.center {text-align: center; text-wrap: balance}
.center ol, .center ul {display: inline-block; margin: 0; padding: 0; text-align: left}
.vidwrapper {margin: 1rem auto; max-width: 48rem}
.vidwrapper:has(iframe) {aspect-ratio: 16 / 9; position: relative}
.vidwrapper iframe  {border: none; height: 100%; left: 0; position: absolute; top: 0; width: 100%}
.cols {column-count: 2; column-gap: 2rem}
.cols li {break-inside: avoid; margin-top: 0}

/* form */
.field {margin: 1em 0; text-align: left}
.field label {display: block; font-weight: bold; line-height: 1; margin-bottom: 0.25em}
.field input:not([type]), input[type=email], .field input[type=tel], .field input[type=text], .field select {box-sizing: border-box; border: none; padding: 0.5rem 1rem; border-radius: var(--border-radius); background-color: var(--light); color: var(--dark); width: 100%}
.field input[type="submit"] {background-color: var(--brand2); border: none; border-radius: var(--border-radius); color: var(--light); font-size: 1.125rem; padding: 0.5rem 1rem; width: 100%}
.field.cb {align-items: start; display: flex; gap: 0.25rem}
.field.cb label {margin: 0}
.form fieldset {border: none; margin: 1rem 0; padding: 0}
.form fieldset.center {margin: 1rem auto; width: max-content}
.form fieldset legend {display: block; font-weight: bold}
.form fieldset.center .fields {margin: 0 auto; width: max-content}
.form fieldset .field {margin: 0.5rem 0}
[name="comments"] {display: none}
.form {font-size: 1rem}
.form hgroup {text-wrap: balance}
.form h2 {color: inherit; text-transform: none}
.form .disclaimer {font-size: 0.85rem; text-wrap: balance}
.field.cb.newsletter {align-items: center; font-size: 1.25rem; margin: 0 auto; width: max-content}

/* header */
#header {font-family: "Cormorant Garamond", serif; padding: 1rem 0}
#header_logo, #header_nav, #header_phone {margin: 0.5rem 0}
#header_logo:first-child, #header_nav:first-child, #header_phone:first-child {margin-top: 0}
#header_logo:last-child, #header_nav:last-child, #header_phone:last-child {margin-bottom: 0}
#header_logo img {display:block; height: 5rem; margin: 0 auto; width: auto}
#header_nav ul {align-items: end; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; justify-content: center; list-style: none; margin: 0; padding: 0}
#header_nav li {margin: 0}
#header_nav a {font-weight: bold; text-decoration: none}
#header_phone {color: var(--brand); font-size: 1.375rem; text-align: center}
#header_phone a {align-items: center; display: inline-flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center}
#header_phone a {text-decoration: none}

/* sections */
section {margin: 4rem 0}
section.bg {background-color: var(--bg); margin: 0; padding: 3rem 0}
.img {background-color: var(--bg); background-position: center; background-size: cover;}
/*hero*/
#hero {display: flex; flex-direction: column; margin: 0}
#hero_copy {display: contents}
#hero_copy .container {order: 1; text-align: center}
#hero_copy .badges {align-items: center; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin: 1rem 0}
#hero_copy .badges img {display: block; height: 10rem; width: auto}
#hero_img {aspect-ratio: 1.75; background-color: var(--bg); background-position: center; background-size: cover; order: 3}
#hero_form {background-color: var(--bg); order: 2; padding: 1rem 2rem; text-align: center}
/*thanks*/
main:has(#thanks) {display: flex; flex-direction: column; flex-grow: 1}
#thanks {align-items: center; display: flex; flex-grow: 1; margin: 0; text-align: center; text-wrap: balance}
/*background-color box*/
.bg_box {background-color: var(--bg); border-radius: var(--border-radius); margin: 1rem 0; padding: 1rem 2rem}
.bg_box:nth-child(2n) {background-color: var(--bg2)}
/*calendars*/
#calendars {background-color: #05213d; background-image: url('../img/calendar_bg.svg'); color: white; margin: 0; padding: 4rem 0}
#calendars .container > :first-child {margin-top: 0}
#calendars .container > :last-child {margin-bottom: 0}
#calendars .center img {display: block; margin: 1rem auto}
#calendars h2 {color: inherit}
#calendars h2 span {display: block}
#calendars .bg-hr {align-items: center; display: flex; gap: 1rem}
#calendars .bg-hr hr, .bg-hr p {margin: 0}
#calendars .bg-hr hr {border-color: white; flex-grow: 1}
#calendars .button {background-color: transparent; border: 1px solid; border-radius: 0.5rem; color: inherit; display: inline-block; padding: 0.5rem 1rem; text-decoration: none}
#calendars .buttonholder {display: flex; flex-wrap: wrap; gap: 1rem}
#calendars .center .buttonholder {justify-content: center}
/*faq*/
#faq {background-color: var(--brand2); background-image: url('../img/faq_bg.svg'); color: var(--light); margin: 0; padding: 4rem 0}
#faq h2, #faq h3 {color: var(--light)}
.faqs {border-bottom: 1px solid var(--light)}
.faqs dt, .faqs dd {border: 1px solid var(--light); border-bottom: 0}
.faqs dt {background-color: var(--brand)}
.faqs dd {background-color: var(--light); border-top: 0; margin: 0; color: var(--dark); padding: 1rem}
.faqs h3 {font-size: 1.125rem; text-transform: none}
.faqs dt > h3 {padding: 1rem}
.faqs dt >:first-child, .faqs dd >:first-child {margin-top: 0}
.faqs dt > :last-child, .faqs dd > :last-child {margin-bottom: 0}
.faqs.init dt h3 {cursor: pointer; padding-right: 3rem; position: relative; user-select: none}
.faqs.init dt h3::after {align-items: center; background-color: var(--light); border-radius: 100%; color: var(--brand); content: '\25bc'; display: flex; flex-direction: column; font-size: 0.85rem; height: 1.25rem; justify-content: center; position: absolute; right: 1rem; top: 1rem; width: 1.25rem}
.faqs.init dt h3[aria-expanded="true"]::after {content: '\25b2'}
/*icon box*/
.icon_boxes {margin: 1rem 0}
.icon_box {margin: 1rem 0; text-align: center; text-wrap: balance}
.icon_box .icon {display: block; height: 4rem; margin: 0 auto; width: auto}
.icon_box .copy {margin: 0.5rem 0}
.icon_box .copy > :first-child {margin-top: 0}
.icon_box .copy > :last-child {margin-bottom: 0}
.icon_box .heading {font-size: 1.125rem; font-weight: bold; line-height: 1}
/*image columns*/
.imgs {align-items: end; display: flex; gap: 1rem}
.imgs .img {border-radius: var(--border-radius); height: 24rem; flex-basis: 100%}
.imgs:has(:nth-child(2)) .img:nth-child(1) {flex-basis: 67%; height: 14rem}
.imgs:has(:nth-child(2)) .img:nth-child(2) {flex-basis: 33%}
.imgs:has(:nth-child(3)) .img:nth-child(1), .imgs:has(:nth-child(3)) .img:nth-child(2) {flex-basis: 100%; height: 24rem}
.imgs:has(:nth-child(3)) .img:nth-child(3n+1) {align-self: end}
.imgs:has(:nth-child(3)) .img:nth-child(3n+2) {align-self: start}
.imgs:has(:nth-child(3)) .img:nth-child(3n) {align-self: center; margin: 3rem 0}
.imgs.img_rows {align-items: start; flex-direction: column}
.imgs.img_rows .img {flex-basis: auto !important; margin: 0 !important}
.imgs.img_rows .img:nth-child(1) {height: 24rem; width: 100%}
.imgs.img_rows:has(:nth-child(2)) .img:nth-child(2n+1) {height: 16rem; width: 100%}
.imgs.img_rows .img:nth-child(2n) {height: 12rem; width: calc(100% - 6rem);}
/*row*/
.row, .row > * {margin: 1rem 0}
.row + .row {margin-top: 2rem}
/* footer */
#footer {background-color: var(--brand); color: var(--light); padding: 1rem 0; text-align: center}
#footer .container > :first-child {margin-top: 0}
#footer .container > :last-child {margin-bottom: 0}
@media(min-width: 60rem){
	h1 {font-size: 3rem; text-wrap: balance}
	h2 {font-size: 2rem}
	h3 {font-size: 1.75rem}
	.container {margin: 0 auto; max-width: 80rem}
	/* form */
	.fieldset {align-items: end; display: flex; gap: 1rem; margin: 1rem 0}
	.fieldset .field {flex-basis: 100%; margin: 0}
	/* header */
	#header .container {align-items: center; display: flex; gap: 2rem; justify-content: space-between}
	#header_logo,#header_phone {flex-shrink: 0}
	#header_logo, #header_nav, #header_phone {margin: 0}
	#header_logo img {height: auto}
	#header_nav {font-size: 1.375rem}
	#header_phone {font-size: 2rem}
	/* sections */
	/*hero*/
	#hero {flex-direction: row; gap: 2rem; margin: 0 auto; max-width: 96rem; padding: 0 1rem}
	#hero_copy {display: flex; flex-direction: column; flex-grow: 1; justify-content: center; gap: 1rem}
	#hero_copy .container {font-size: 1.625rem; order: unset; padding: 0; width: 100%}
	#hero_copy .copy {text-align: left; width: 100%}
	#hero_copy .badges {justify-content: start}
	#hero_img {aspect-ratio: auto; border-radius: var(--border-radius); flex-grow: 1; order: unset; min-height: 24rem}
	#hero_form {border-radius: var(--border-radius); box-sizing: border-box; display: flex; flex-basis: 30rem; flex-direction: column; flex-shrink: 0; justify-content: center; order: unset}
	/*background-color box*/
	.bg_boxes {display: flex; gap: 1rem; margin: 1rem 0}
	.bg_box {flex-basis: 100%; margin: 0}
	/*calendars*/
	#calendars h2 span {display: inline}
	/*faqs*/
	#faq .container {display: flex; gap: 4rem}
	#faq .copy, .faqs {margin: 0}
	.faqs {flex-basis: 60%; flex-shrink: 0}
	/*footer form*/
	.contact_cols {align-items: center; display: flex; gap: 2rem; justify-content: space-between}
	.contact_col {flex-basis: 14rem; flex-shrink: 0}
	.contact_col.form {flex-basis: 40rem; flex-grow: 1; flex-shrink: 1}
	/*icon box*/
	.icon_boxes {display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: center}
	.icon_box {flex-basis: calc(100% / 6 - 10rem / 6); margin: 0}
	/*row*/
	.row {align-items: center; display: flex; gap: 4rem}
	.row.smallgap, .row.smallgap .imgs {gap: 2rem}
	.row.rev {flex-direction: row-reverse}
	.row > * {flex-basis: 100%; margin: 0}
	.row .bottom {align-self: end}
	.row .top {align-self: start}
	.row .icon_box {flex-basis: calc(100% / 3 - 4rem / 3)}
}