/* Contact page: a concise invitation and a guided enquiry form. */
.sss-page-contact .sss-contact-hero {
	padding-top: calc(var(--header-h) + clamp(32px, 4vw, 52px));
	padding-bottom: clamp(36px, 4.5vw, 56px);
	background: linear-gradient(115deg, #fcf9f1 0%, #fcf8ef 53%, #f7eeda 100%);
}
.sss-page-contact .sss-contact-hero::before,
.sss-page-contact .sss-contact-hero::after { display: block; pointer-events: none; }
.sss-page-contact .sss-contact-hero::before {
	left: auto;
	right: 4%;
	top: calc(var(--header-h) - 30px);
	width: clamp(180px, 22vw, 300px);
	height: clamp(180px, 22vw, 300px);
	border: 1px solid rgba(148, 120, 59, .16);
	border-radius: 36% 64% 67% 33% / 42% 41% 59% 58%;
	background: rgba(209, 159, 51, .07);
	box-shadow: 0 0 0 34px rgba(203, 153, 44, .045);
}
.sss-page-contact .sss-contact-hero::after {
	right: 13%;
	top: auto;
	bottom: -35px;
	width: 95px;
	height: 95px;
	border: 1px solid rgba(137, 111, 56, .2);
	border-radius: 27px;
	background: linear-gradient(140deg, rgba(175, 133, 41, .16), rgba(172, 135, 54, .12));
	transform: rotate(24deg);
}
.sss-page-contact .sss-contact-hero > .sss-container { grid-template-columns: minmax(0, 1.2fr) minmax(270px, .8fr); gap: 14px clamp(28px, 6vw, 86px); align-items: end; }
.sss-page-contact .sss-contact-hero .sss-eyebrow { grid-column: 1 / -1; margin-bottom: 10px; }
.sss-page-contact .sss-contact-hero h1 { max-width: 760px; margin: 0; font-size: var(--type-page); font-weight: 680; line-height: 1.04; }
.sss-page-contact .sss-contact-hero .sss-page-hero__copy { max-width: 410px; margin: 0 0 4px; padding: 0 0 0 20px; border-left: 2px solid #a88539; }
.sss-page-contact .sss-contact-hero .sss-page-hero__copy::before { display: none; }
.sss-page-contact .sss-contact-hero .sss-page-hero__copy p { margin: 0; font-size: var(--type-lead); font-weight: 400; line-height: 1.7; }

.sss-page-contact .sss-contact { padding-block: clamp(36px, 5vw, 70px); background: #fbf9f4; }
.sss-page-contact .sss-contact__grid { grid-template-columns: minmax(210px, .65fr) minmax(390px, 1.35fr); gap: clamp(22px, 3.5vw, 52px); align-items: start; }
.sss-page-contact .sss-contact__grid > * { min-width: 0; }
.sss-page-contact .sss-contact aside {
	position: sticky;
	top: calc(var(--header-compact-h) + 22px);
	padding: clamp(25px, 3vw, 38px);
	border: 0;
	border-radius: 20px;
	background: radial-gradient(circle at 96% 2%, rgba(212, 161, 51, .24), transparent 32%), linear-gradient(155deg, #3f3318, #382f1b 72%, #4f442d);
	box-shadow: 0 20px 44px rgba(57, 47, 26, .16);
	color: #fff;
}
.sss-page-contact .sss-contact aside > .sss-section-label { margin-bottom: 12px; color: #ecd6a7; }
.sss-page-contact .sss-contact aside > .sss-section-label::before { background: #e2c075; }
.sss-page-contact .sss-contact aside > .sss-section-label .sss-icon { color: #ecd6a7; }
.sss-page-contact .sss-contact aside > div { padding: 16px 0; border-bottom: 1px solid rgba(245, 233, 206, .17); }
.sss-page-contact .sss-contact aside div > span { color: #d4bc86; font-size: var(--type-label); font-weight: 800; letter-spacing: .11em; }
.sss-page-contact .sss-contact aside div > a,
.sss-page-contact .sss-contact aside div > p { margin: 5px 0 0; color: #fff; font-size: var(--type-body); font-weight: 500; line-height: 1.55; overflow-wrap: anywhere; }
.sss-page-contact .sss-contact__grid--pending aside > div { grid-column: 1 / -1; }
.sss-page-contact .sss-contact aside div > a:hover { color: #e8cd92; }
.sss-page-contact .sss-contact__note { margin: 25px 0 0; padding: 13px 15px; border: 1px solid rgba(236, 215, 167, .16); border-radius: 10px; background: rgba(255, 255, 255, .08); color: #f2e2c0; font-size: var(--type-body); line-height: 1.5; }

.sss-page-contact .sss-form-wrap {
	--contact-pad: clamp(22px, 3vw, 38px);
	min-width: 0;
	padding: 0;
	border: 1px solid #ebe4d4;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 20px 48px rgba(58, 48, 27, .07);
	overflow: hidden;
}
.sss-form-wrap__head { padding: clamp(23px, 3vw, 36px) var(--contact-pad); border-bottom: 1px solid #eee8db; background: linear-gradient(110deg, #faf4e7, #faf3e6); }
.sss-form-wrap__head .sss-section-label { margin-bottom: 11px; }
.sss-site .sss-form-wrap__head h2 { margin: 0 0 7px; font-size: var(--type-feature); font-weight: 650; line-height: 1.14; letter-spacing: -.035em; }
.sss-form-wrap__head > p:last-child { max-width: 510px; margin: 0; color: #736a55; font-size: var(--type-body); line-height: 1.6; }
.sss-contact-toast {
	position: fixed;
	z-index: 1000;
	top: calc(var(--header-h) + 14px);
	right: clamp(14px, 3vw, 34px);
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr) 28px;
	align-items: start;
	gap: 12px;
	width: min(420px, calc(100vw - 28px));
	padding: 17px;
	border: 1px solid #ece4d4;
	border-left: 4px solid #91753a;
	border-radius: 15px;
	background: #fff;
	box-shadow: 0 16px 45px rgba(51, 41, 19, .2);
	color: #322a18;
	animation: sss-toast-enter .28s ease-out both;
}
.sss-contact-toast--success { border-left-color: #93742f; }
.sss-contact-toast--warning { border-left-color: #c88922; }
.sss-contact-toast--error { border-left-color: #c54d54; }
.sss-contact-toast.is-hiding { animation: none; opacity: 0; transform: translateY(-12px); transition: opacity .25s ease, transform .25s ease; }
.sss-contact-toast__symbol { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #f8f0de; color: #91753a; }
.sss-contact-toast--success .sss-contact-toast__symbol { background: #e5f7f2; color: #93742f; }
.sss-contact-toast--warning .sss-contact-toast__symbol { background: #fff4db; color: #a97212; }
.sss-contact-toast--error .sss-contact-toast__symbol { background: #fff0f0; color: #c54d54; }
.sss-contact-toast__symbol svg { width: 20px; height: 20px; }
.sss-contact-toast__copy strong { display: block; margin: 1px 0 4px; font-size: .94rem; line-height: 1.3; }
.sss-contact-toast__copy p { margin: 0; color: #716753; font-size: .83rem; line-height: 1.5; }
.sss-contact-toast__close { display: none; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #756b56; cursor: pointer; }
.sss-js .sss-contact-toast__close { display: grid; }
.sss-contact-toast__close:hover { background: #f7f2e9; color: #2e2615; }
.sss-contact-toast__close svg { width: 16px; height: 16px; }
@keyframes sss-toast-enter { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
.sss-page-contact .sss-contact-form [aria-invalid="true"] { border-color: #ce555d; background: #fff8f8; box-shadow: 0 0 0 3px rgba(206, 85, 93, .1); }
.sss-page-contact .sss-contact-form .sss-field-error { position: relative; display: block; width: fit-content; max-width: 100%; margin-top: 9px; padding: 8px 11px; border: 1px solid #f0bec1; border-radius: 8px; background: #fff2f2; color: #9d333c; font-size: .76rem; font-weight: 600; line-height: 1.35; letter-spacing: 0; box-shadow: 0 6px 16px rgba(135, 35, 45, .08); }
.sss-page-contact .sss-contact-form .sss-field-error::before { content: ""; position: absolute; top: -5px; left: 14px; width: 8px; height: 8px; border-left: 1px solid #f0bec1; border-top: 1px solid #f0bec1; background: #fff2f2; transform: rotate(45deg); }
.sss-page-contact .sss-contact-form { margin: 0; padding: var(--contact-pad); }
.sss-form-phase { display: flex; align-items: baseline; gap: 12px; margin: 0 0 17px; }
.sss-form-phase ~ .sss-form-phase { margin-top: 12px; padding-top: 21px; border-top: 1px solid #ede8dd; }
.sss-form-phase::before { content: ""; flex: 0 0 17px; width: 17px; height: 3px; align-self: center; border-radius: 4px; background: linear-gradient(90deg, #92712b, #8c7137); }
.sss-form-phase strong { color: #332b19; font-size: 1rem; font-weight: 700; line-height: 1.2; }
.sss-form-phase small { color: #81765f; font-size: .75rem; line-height: 1.35; }
.sss-page-contact .sss-form-row { gap: 14px; }
.sss-page-contact .sss-contact-form label { margin-bottom: 16px; color: #403723; font-size: .76rem; font-weight: 700; letter-spacing: .025em; }
.sss-page-contact .sss-contact-form label small { color: #8f836a; font-size: .72rem; font-weight: 400; }
.sss-page-contact .sss-contact-form input,
.sss-page-contact .sss-contact-form textarea,
.sss-page-contact .sss-contact-form select {
	min-width: 0;
	min-height: 47px;
	margin-top: 7px;
	padding: 11px 13px;
	border: 1px solid #eae4d5;
	border-radius: 10px;
	background: #fbf9f4;
	color: #2f2716;
	font-size: .92rem;
	font-weight: 400;
	box-shadow: none;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.sss-page-contact .sss-contact-form textarea { min-height: 118px; resize: vertical; }
.sss-page-contact .sss-contact-form :is(input, textarea, select):focus { border-color: #947531; background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(147, 117, 50, .13); }
.sss-page-contact .sss-contact-form :is(input, textarea, select)::placeholder { color: #a39983; }
.sss-page-contact .sss-form-submit { margin-top: 20px; padding-top: 21px; border-top: 1px solid #ece7db; }
.sss-page-contact .sss-form-submit p { max-width: 330px; color: #80755e; font-size: .76rem; line-height: 1.5; }
.sss-page-contact .sss-form-submit .sss-btn { min-height: 46px; padding: 10px 18px; font-size: var(--type-action); }

@media (max-width: 900px) {
	.sss-page-contact .sss-contact-hero > .sss-container { grid-template-columns: 1fr; gap: 16px; }
	.sss-page-contact .sss-contact-hero .sss-eyebrow { grid-column: 1; margin-bottom: 0; }
	.sss-page-contact .sss-contact-hero .sss-page-hero__copy { max-width: 610px; }
}
@media (min-width: 671px) {
	.sss-page-contact .sss-contact aside {
		max-height: calc(100dvh - var(--header-compact-h) - 44px);
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: rgba(229, 206, 157, .45) transparent;
	}
}
@media (max-width: 670px) {
	.sss-page-contact .sss-contact__grid { grid-template-columns: 1fr; gap: 22px; }
	.sss-page-contact .sss-contact aside { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
	.sss-page-contact .sss-contact aside > .sss-section-label, .sss-page-contact .sss-contact__note { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
	.sss-page-contact .sss-contact-hero { padding-top: calc(var(--header-h) + 29px); padding-bottom: 33px; }
	.sss-page-contact .sss-contact-hero::before { right: -70px; top: 60px; opacity: .55; }
	.sss-page-contact .sss-contact-hero::after { display: none; }
	.sss-page-contact .sss-contact-hero h1 { font-size: var(--type-page); }
	.sss-page-contact .sss-contact-hero .sss-page-hero__copy { padding-left: 15px; }
	.sss-page-contact .sss-contact { padding-block: 26px 45px; }
	.sss-page-contact .sss-contact aside { padding: 23px; }
	.sss-page-contact .sss-form-wrap { --contact-pad: 21px; }
	.sss-page-contact .sss-form-row { grid-template-columns: 1fr; gap: 0; }
	.sss-page-contact .sss-form-submit { align-items: stretch; flex-direction: column; gap: 15px; }
	.sss-page-contact .sss-form-submit p { max-width: none; margin: 0; }
}
@media (max-width: 480px) {
	.sss-page-contact .sss-contact aside { grid-template-columns: 1fr; }
	.sss-page-contact .sss-contact aside > .sss-section-label, .sss-page-contact .sss-contact__note { grid-column: 1; }
	.sss-page-contact .sss-contact aside > div { padding: 12px 0; }
	.sss-page-contact .sss-contact__note { margin-top: 18px; }
	.sss-page-contact .sss-form-wrap { --contact-pad: 18px; }
	.sss-page-contact .sss-contact-form label { margin-bottom: 14px; }
	.sss-page-contact .sss-form-phase { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 2px 8px; }
	.sss-page-contact .sss-form-phase::before { grid-column: 1; grid-row: 1 / 3; }
	.sss-page-contact .sss-form-phase strong, .sss-page-contact .sss-form-phase small { grid-column: 2; }
	.sss-page-contact .sss-contact-form input, .sss-page-contact .sss-contact-form select { min-height: 45px; }
}
@media (max-width: 360px) {
	.sss-page-contact .sss-contact aside { padding: 19px; }
	.sss-page-contact .sss-form-wrap { --contact-pad: 16px; }
	.sss-page-contact .sss-contact-hero .sss-page-hero__copy { padding-left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.sss-page-contact .sss-contact-form :is(input, textarea, select) { transition: none; }
	.sss-contact-toast { animation: none; }
	.sss-contact-toast.is-hiding { transition: none; }
}
