/* ==========================================================================
   Safari Premium — Info pages (About, Contact, FAQ, Legal, 404)
   ========================================================================== */

/* About — two-column intro */
.sp-about-intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
	align-items: center;
}
.sp-about-intro p {
	font-size: var(--sp-text-lg);
	line-height: var(--sp-leading-prose);
	color: var(--sp-color-brown);
	margin: 0 0 16px;
}
.sp-about-intro .sp-placeholder {
	border-radius: var(--sp-radius-xl);
	overflow: hidden;
	aspect-ratio: 4 / 5;
}
@media (max-width: 1023px) {
	.sp-about-intro { grid-template-columns: 1fr; gap: 32px; }
	.sp-about-intro .sp-placeholder { max-width: 480px; }
}

/* About — mission strip */
.sp-mission {
	text-align: center;
	max-width: 860px;
	margin: 0 auto;
}
.sp-mission__quote {
	font-family: var(--sp-font-serif);
	font-size: 36px;
	line-height: 1.3;
	color: var(--sp-color-brown);
	font-style: italic;
	text-wrap: balance;
}
@media (max-width: 767px) {
	.sp-mission__quote { font-size: 22px; line-height: 1.45; }
}

/* About — team grid */
.sp-team {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.sp-team__item .sp-placeholder {
	border-radius: var(--sp-radius-lg);
	overflow: hidden;
	margin-bottom: 14px;
	aspect-ratio: 4 / 5;
}
.sp-team__name {
	font-family: var(--sp-font-serif);
	font-size: 20px;
	color: var(--sp-color-brown);
}
.sp-team__role {
	font-size: var(--sp-text-sm);
	color: var(--sp-color-muted-brown);
	margin-top: 4px;
}
@media (max-width: 1023px) {
	.sp-team { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.sp-team__name { font-size: 15px; }
	.sp-team__role { font-size: 11.5px; }
}

/* About — additional services */
.sp-services-list {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 48px;
	align-items: start;
}
.sp-services-list ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
}
.sp-services-list li {
	padding: 16px 0;
	border-top: 1px solid var(--sp-color-card-border);
	font-size: 14.5px;
	color: var(--sp-color-brown);
	display: flex;
	align-items: center;
	gap: 12px;
}
.sp-services-list li:nth-last-child(-n+2) { border-bottom: 1px solid var(--sp-color-card-border); }
.sp-services-list li .sp-icon { color: var(--sp-color-burnt-orange); flex-shrink: 0; }
@media (max-width: 1023px) {
	.sp-services-list { grid-template-columns: 1fr; gap: 24px; }
	.sp-services-list ul { grid-template-columns: 1fr; }
	.sp-services-list li:nth-last-child(-n+2) { border-bottom: 0; }
	.sp-services-list li:last-child { border-bottom: 1px solid var(--sp-color-card-border); }
}

/* About — sunset CTA banner */
.sp-cta-banner-wrap {
	background: var(--sp-color-cream);
	padding: 0 var(--sp-page-gutter) var(--sp-section-pad-y);
}
.sp-cta-banner {
	max-width: var(--sp-container-max);
	margin: 0 auto;
	background: var(--sp-gradient-sunset);
	border-radius: var(--sp-radius-3xl);
	padding: 56px;
	text-align: center;
	color: var(--sp-color-cream);
}
.sp-cta-banner h2 {
	font-family: var(--sp-font-serif);
	font-size: 44px;
	font-weight: 500;
	margin: 0;
	color: var(--sp-color-cream);
}
.sp-cta-banner p {
	font-size: var(--sp-text-lg);
	margin: 12px 0 28px;
	opacity: 0.92;
}
.sp-cta-banner__buttons { display: inline-flex; gap: 12px; }
@media (max-width: 767px) {
	.sp-cta-banner-wrap { padding: 0; }
	.sp-cta-banner { padding: 40px 24px; border-radius: 0; }
	.sp-cta-banner h2 { font-size: 28px; }
	.sp-cta-banner p { font-size: var(--sp-text-base); margin-bottom: 20px; }
	.sp-cta-banner__buttons { flex-direction: column; gap: 10px; width: 100%; }
}

/* Contact */
.sp-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 64px;
	align-items: start;
}
.sp-contact-info {
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.sp-contact-info__row {
	display: flex;
	gap: 16px;
}
.sp-contact-info__icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(194,65,12,0.1);
	color: var(--sp-color-burnt-orange);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.sp-contact-info__label {
	font-size: var(--sp-text-xs);
	color: var(--sp-color-muted-brown);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: 6px;
}
.sp-contact-info__value {
	font-size: var(--sp-text-md);
	color: var(--sp-color-brown);
	line-height: var(--sp-leading-base);
}
.sp-contact-form {
	background: var(--sp-color-off-white);
	border-radius: var(--sp-radius-2xl);
	padding: 40px;
	border: 1px solid var(--sp-color-card-border);
	box-shadow: var(--sp-shadow-card);
}
.sp-contact-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.sp-contact-form__grid > .sp-field--full { grid-column: span 2; }
.sp-contact-form__foot {
	margin-top: 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}
.sp-contact-form__sla {
	font-size: var(--sp-text-xs);
	color: var(--sp-color-muted-brown);
}
@media (max-width: 1023px) {
	.sp-contact-grid { grid-template-columns: 1fr; gap: 32px; }
	.sp-contact-form { padding: 24px; }
}
@media (max-width: 767px) {
	.sp-contact-form__grid { grid-template-columns: 1fr; }
	.sp-contact-form__grid > .sp-field--full { grid-column: 1; }
	.sp-contact-form__foot { flex-direction: column; align-items: stretch; }
}

/* Contact map */
.sp-contact-map {
	max-width: var(--sp-container-max);
	margin: 0 auto;
	border-radius: var(--sp-radius-xl);
	overflow: hidden;
}
@media (max-width: 767px) {
	.sp-contact-map { border-radius: 0; }
}

/* FAQ */
.sp-faq-grid {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 56px;
	align-items: start;
}
.sp-faq-nav {
	position: sticky;
	top: calc(var(--sp-header-height) + 20px);
}
.sp-faq-nav__title {
	font-size: var(--sp-text-xs);
	font-weight: 600;
	letter-spacing: var(--sp-tracking-wider);
	text-transform: uppercase;
	color: var(--sp-color-burnt-orange);
	margin-bottom: 16px;
}
.sp-faq-nav__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.sp-faq-nav__list a {
	display: block;
	padding: 10px 16px;
	border-radius: var(--sp-radius-sm);
	font-size: var(--sp-text-base);
	color: var(--sp-color-muted-brown);
	border-left: 2px solid transparent;
	text-decoration: none;
	font-weight: 400;
}
.sp-faq-nav__list a:hover { background: var(--sp-color-ivory); color: var(--sp-color-brown); }
.sp-faq-nav__list a.is-active {
	background: var(--sp-color-ivory);
	color: var(--sp-color-brown);
	border-left-color: var(--sp-color-burnt-orange);
	font-weight: 600;
}
.sp-faq-section { margin-bottom: 48px; }
.sp-faq-section__title {
	font-family: var(--sp-font-serif);
	font-size: 32px;
	font-weight: 500;
	margin: 0 0 20px;
	color: var(--sp-color-brown);
}
.sp-faq {
	background: var(--sp-color-off-white);
	border-radius: var(--sp-radius-xl);
	border: 1px solid var(--sp-color-card-border);
	overflow: hidden;
}
.sp-faq__item { border-bottom: 1px solid var(--sp-color-ivory); padding: 22px 24px; }
.sp-faq__item:last-child { border-bottom: 0; }
.sp-faq__q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	width: 100%;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--sp-font-serif);
	font-size: 18px;
	color: var(--sp-color-brown);
}
.sp-faq__toggle {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--sp-color-ivory);
	color: var(--sp-color-brown);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.sp-faq__item.is-open .sp-faq__toggle { background: var(--sp-color-burnt-orange); color: var(--sp-color-cream); }
.sp-faq__a {
	font-size: 14.5px;
	line-height: var(--sp-leading-prose);
	color: var(--sp-color-muted-brown);
	margin-top: 14px;
	max-width: 720px;
}
.sp-faq__toggle .sp-icon--minus { display: none; }
.sp-faq__item.is-open .sp-faq__toggle .sp-icon--plus { display: none; }
.sp-faq__item.is-open .sp-faq__toggle .sp-icon--minus { display: inline; }

/* FAQ CTA card */
.sp-faq-cta {
	background: var(--sp-color-ivory);
	border-radius: var(--sp-radius-xl);
	padding: 40px;
	text-align: center;
	border: 1px solid var(--sp-color-card-border);
	margin-top: 32px;
}
.sp-faq-cta h2 { font-size: 28px; margin-bottom: 10px; }
.sp-faq-cta p { font-size: 14.5px; color: var(--sp-color-muted-brown); margin-bottom: 24px; }
.sp-faq-cta__buttons { display: inline-flex; gap: 12px; }
@media (max-width: 1023px) {
	.sp-faq-grid { grid-template-columns: 1fr; gap: 24px; }
	.sp-faq-nav { position: static; }
	.sp-faq-nav__list {
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 8px;
		scrollbar-width: none;
	}
	.sp-faq-nav__list::-webkit-scrollbar { display: none; }
	.sp-faq-nav__list a { white-space: nowrap; padding: 8px 14px; border-left: 0; border-radius: var(--sp-radius-pill); }
	.sp-faq-nav__list a.is-active { border-left: 0; }
}
@media (max-width: 767px) {
	.sp-faq-section__title { font-size: 22px; }
	.sp-faq__q { font-size: 16px; }
	.sp-faq-cta { padding: 24px; }
	.sp-faq-cta h2 { font-size: 22px; }
	.sp-faq-cta__buttons { flex-direction: row; gap: 8px; }
}

/* Legal page (Terms / Privacy) */
.sp-legal__head {
	background: var(--sp-color-ivory);
	padding: 64px var(--sp-page-gutter) 48px;
	border-bottom: 1px solid var(--sp-color-card-border);
}
.sp-legal__head-inner {
	max-width: var(--sp-container-max);
	margin: 0 auto;
}
.sp-legal__title {
	font-family: var(--sp-font-serif);
	font-size: 56px;
	font-weight: 500;
	margin: 0;
	color: var(--sp-color-brown);
	letter-spacing: var(--sp-tracking-tight);
}
.sp-legal__updated {
	font-size: var(--sp-text-sm);
	color: var(--sp-color-muted-brown);
	margin-top: 14px;
}
.sp-legal__body {
	padding: 64px var(--sp-page-gutter) 96px;
}
.sp-legal__grid {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 64px;
	align-items: start;
}
.sp-legal__toc {
	position: sticky;
	top: calc(var(--sp-header-height) + 20px);
}
.sp-legal__toc-title {
	font-size: var(--sp-text-xs);
	font-weight: 600;
	letter-spacing: var(--sp-tracking-wider);
	text-transform: uppercase;
	color: var(--sp-color-burnt-orange);
	margin-bottom: 16px;
}
.sp-legal__toc-list {
	list-style: none;
	padding: 0 0 0 16px;
	margin: 0;
	border-left: 1px solid var(--sp-color-card-border);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.sp-legal__toc-list a {
	font-size: 13.5px;
	color: var(--sp-color-muted-brown);
	font-weight: 400;
	text-decoration: none;
}
.sp-legal__toc-list a:hover { color: var(--sp-color-brown); }
.sp-legal__toc-list .is-active { color: var(--sp-color-burnt-orange); font-weight: 600; }
.sp-legal__content { max-width: 720px; }
.sp-legal__content > p:first-child {
	font-size: 17px;
	line-height: var(--sp-leading-prose);
	font-style: italic;
	color: var(--sp-color-brown);
	margin-top: 0;
}
.sp-legal__section { margin-top: 40px; }
.sp-legal__section h2 {
	font-family: var(--sp-font-serif);
	font-size: 26px;
	font-weight: 500;
	color: var(--sp-color-brown);
	margin: 0 0 14px;
}
.sp-legal__section h2 .sp-legal__num {
	font-variant-numeric: tabular-nums;
	color: var(--sp-color-burnt-orange);
	margin-right: 12px;
	font-size: 18px;
}
.sp-legal__section p {
	font-size: var(--sp-text-md);
	line-height: 1.8;
	color: var(--sp-color-brown);
}
@media (max-width: 1023px) {
	.sp-legal__grid { grid-template-columns: 1fr; gap: 32px; }
	.sp-legal__toc { position: static; }
	.sp-legal__title { font-size: 36px; }
}
@media (max-width: 767px) {
	.sp-legal__head { padding: 40px 20px 32px; }
	.sp-legal__title { font-size: 30px; }
	.sp-legal__body { padding: 40px 20px 64px; }
}

/* 404 */
.sp-404 {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 80px var(--sp-page-gutter);
	text-align: center;
}
.sp-404__inner { max-width: 640px; }
.sp-404__svg { margin: 0 auto 32px; display: block; }
.sp-404__code {
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-base);
	color: var(--sp-color-burnt-orange);
	letter-spacing: 0.28em;
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: 14px;
}
.sp-404 h1 {
	font-family: var(--sp-font-serif);
	font-size: 64px;
	font-weight: 500;
	color: var(--sp-color-brown);
	margin: 0 0 14px;
	letter-spacing: var(--sp-tracking-tight);
	line-height: var(--sp-leading-tight);
}
.sp-404 p {
	font-size: 17px;
	line-height: var(--sp-leading-base);
	color: var(--sp-color-muted-brown);
	margin: 0 0 32px;
}
.sp-404__search {
	display: flex;
	gap: 10px;
	background: var(--sp-color-off-white);
	border: 1px solid var(--sp-color-card-border);
	border-radius: var(--sp-radius-pill);
	padding: 6px;
	max-width: 420px;
	margin: 0 auto 32px;
	align-items: center;
}
.sp-404__search input[type="search"] {
	flex: 1;
	background: transparent;
	border: 0;
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-base);
	color: var(--sp-color-brown);
	min-height: 36px;
	padding: 0 18px;
}
.sp-404__search input[type="search"]:focus { outline: none; }
.sp-404__buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 767px) {
	.sp-404 h1 { font-size: 36px; }
	.sp-404 p { font-size: 14.5px; }
	.sp-404__buttons { gap: 8px; }
}
