/* San Antonio Matterport service page. All layout rules are page scoped. */
.sa-page {
  --sa-ink: #102638;
  --sa-navy: #071e2e;
  --sa-cream: #f7f5ef;
  --sa-paper: #fbfaf6;
  --sa-gold: #caa663;
  --sa-rule: #d8d7d0;
}
.sa-page .a360-homepage { background: var(--sa-paper); }
.sa-page main { color: var(--sa-ink); }
.sa-page main h1,
.sa-page main h2,
.sa-page main h3 { font-family: var(--a360-serif); font-weight: 500; letter-spacing: -.035em; }
.sa-page main p { margin-bottom: 0; }
.sa-page main em { color: #9d7236; font-weight: 500; }
.sa-page .sa-kicker {
  color: #e4c889;
  font: 800 11px/1.5 var(--a360-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.sa-page .sa-section { padding-block: clamp(76px, 8vw, 142px); }
.sa-page .sa-section-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .65fr); align-items: end; gap: 32px 8vw; margin-bottom: clamp(36px, 4vw, 64px); }
.sa-page .sa-section-head h2 { max-width: 830px; margin: 0; font-size: clamp(48px, 5.8vw, 86px); line-height: .98; }
.sa-page .sa-section-head > p { max-width: 450px; color: #4f5e68; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.8; }
.sa-page .sa-section-head .sa-kicker { margin-bottom: 22px; color: #9e702e; }

.sa-page .sa-hero {
  position: relative;
  display: flex;
  align-items: end;
  min-height: clamp(620px, 72svh, 850px);
  padding-block: 130px clamp(72px, 9vw, 120px);
  isolation: isolate;
  overflow: hidden;
  background: #071827;
  color: white;
}
.sa-page .sa-hero-media { position: absolute; inset: 0; z-index: 0; }
.sa-page .sa-hero-media::after { position: absolute; inset: 0; z-index: 1; }
.sa-page .sa-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 47%; }
.sa-page .sa-hero-media::after { content: ''; background: linear-gradient(90deg, rgba(3,19,30,.93) 0%, rgba(3,19,30,.78) 39%, rgba(3,19,30,.33) 77%, rgba(3,19,30,.15) 100%), linear-gradient(0deg, rgba(3,19,30,.48), transparent 45%); }
.sa-page .sa-hero .a360-shell { position: relative; z-index: 2; width: 100%; }
.sa-page .sa-hero-copy { max-width: 1020px; }
.sa-page .sa-hero .sa-kicker { margin-bottom: 23px; }
.sa-page .sa-hero h1 { margin: 0 0 34px; color: white; font-size: clamp(72px, 8vw, 130px); line-height: .85; }
.sa-page .sa-hero h1 em { color: #e4c889; }
.sa-page .sa-hero-lede { max-width: 640px; color: #f5f5f3; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.65; }
.sa-page .sa-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 35px; }
.sa-page .sa-hero-index { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: clamp(64px, 8vw, 115px); color: #d4d9dc; font: 700 11px/1.4 var(--a360-sans); letter-spacing: .13em; text-transform: uppercase; }
.sa-page .sa-hero-index span + span::before { content: '/'; margin-right: 22px; color: #e4c889; }

.sa-page .sa-intro { background: var(--sa-paper); }
.sa-page .sa-intro-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(44px, 8vw, 145px); }
.sa-page .sa-intro-lead h2 { max-width: 600px; margin: 22px 0 0; font-size: clamp(52px, 5.4vw, 82px); line-height: .99; }
.sa-page .sa-intro-copy { max-width: 690px; padding-top: 10px; }
.sa-page .sa-intro-copy > p:first-child { color: var(--sa-ink); font-size: clamp(21px, 2vw, 27px); line-height: 1.5; }
.sa-page .sa-intro-copy > p + p { margin-top: 25px; color: #4f5e68; font-size: 17px; line-height: 1.85; }
.sa-page .sa-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(70px, 7vw, 115px); border-top: 1px solid var(--sa-rule); border-bottom: 1px solid var(--sa-rule); }
.sa-page .sa-benefit { padding: clamp(30px, 4vw, 55px) clamp(22px, 3vw, 42px) clamp(37px, 4vw, 58px); }
.sa-page .sa-benefit:first-child { padding-left: 0; }
.sa-page .sa-benefit + .sa-benefit { border-left: 1px solid var(--sa-rule); }
.sa-page .sa-benefit span { display: block; margin-bottom: 28px; color: #9e702e; font: 800 11px/1.4 var(--a360-sans); letter-spacing: .16em; text-transform: uppercase; }
.sa-page .sa-benefit h3 { margin: 0 0 18px; font-size: clamp(32px, 3vw, 48px); line-height: 1.03; }
.sa-page .sa-benefit p { color: #526270; font-size: 15px; line-height: 1.8; }

.sa-page .sa-gallery { background: var(--sa-cream); }
.sa-page .sa-gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(35px, 4vw, 58px) 30px; }
.sa-page .sa-tour:first-child { grid-column: 1 / -1; }
.sa-page .sa-tour-visual { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #1c3544; }
.sa-page .sa-tour:first-child .sa-tour-visual { aspect-ratio: 2.15 / 1; }
.sa-page .sa-tour-visual .a360-article-tour-poster { inset: 0; }
.sa-page .sa-tour-visual .a360-article-tour-poster img { object-fit: cover; transition: transform .6s ease; }
.sa-page .sa-tour-visual .a360-article-tour-poster:hover img { transform: scale(1.03); }
.sa-page .sa-tour-visual .a360-article-tour-label { bottom: clamp(20px, 3vw, 40px); left: clamp(20px, 3vw, 40px); }
.sa-page .sa-tour-info { display: flex; align-items: start; justify-content: space-between; gap: 16px; padding: 20px 0 24px; border-bottom: 1px solid #c8c8bf; }
.sa-page .sa-tour-info small { color: #946c35; font: 800 10px/1.4 var(--a360-sans); letter-spacing: .13em; text-transform: uppercase; }
.sa-page .sa-tour-info h3 { margin: 8px 0 0; font-size: clamp(30px, 3vw, 47px); line-height: 1; }
.sa-page .sa-tour-info a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid #a6a99f; border-radius: 50%; color: var(--sa-ink); font-size: 20px; line-height: 1; }
.sa-page .sa-tour-info a:hover { background: var(--sa-ink); border-color: var(--sa-ink); color: #fff; }
.sa-page .sa-gallery-foot { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 52px; }
.sa-page .sa-gallery-foot p { max-width: 680px; color: #526270; font-size: 16px; line-height: 1.8; }

.sa-page .sa-why { background: var(--sa-navy); color: #fff; }
.sa-page .sa-why .sa-section-head h2 { color: #fff; }
.sa-page .sa-why .sa-section-head > p { color: #bfcbd1; }
.sa-page .sa-why-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid #ffffff38; }
.sa-page .sa-why-card { padding: 36px clamp(20px, 3.2vw, 48px) 7px; }
.sa-page .sa-why-card:first-child { padding-left: 0; }
.sa-page .sa-why-card + .sa-why-card { border-left: 1px solid #ffffff38; }
.sa-page .sa-why-card span { color: #e4c889; font: 800 10px/1.4 var(--a360-sans); letter-spacing: .17em; text-transform: uppercase; }
.sa-page .sa-why-card h3 { margin: 24px 0 20px; color: #fff; font-size: clamp(34px, 3.1vw, 50px); line-height: 1; }
.sa-page .sa-why-card p { color: #bfcbd1; font-size: 16px; line-height: 1.8; }

.sa-page .sa-pricing { background: var(--sa-paper); }
.sa-page .sa-pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
.sa-page .sa-price-card { display: flex; flex-direction: column; border: 1px solid #d9d7cd; background: #fff; }
.sa-page .sa-price-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: clamp(28px, 3vw, 45px); }
.sa-page .sa-price-head span { display: block; margin-bottom: 13px; color: #9e702e; font: 800 10px/1.5 var(--a360-sans); letter-spacing: .15em; text-transform: uppercase; }
.sa-page .sa-price-head h3 { margin: 0; font-size: clamp(32px, 3vw, 49px); line-height: 1.02; }
.sa-page .sa-price-tag { flex: 0 0 auto; text-align: right; }
.sa-page .sa-price-tag small { display: block; color: #63727c; font: 700 10px/1.4 var(--a360-sans); letter-spacing: .12em; text-transform: uppercase; }
.sa-page .sa-price-tag strong { display: block; color: var(--sa-ink); font: 500 clamp(46px, 4vw, 66px)/.95 var(--a360-serif); }
.sa-page .sa-price-tour { position: relative; aspect-ratio: 16 / 9; background: var(--sa-navy); overflow: hidden; }
.sa-page .sa-price-tour .a360-article-tour-label { bottom: 22px; left: 25px; }
.sa-page .sa-price-tour .a360-article-tour-label strong { font-size: 34px; }
.sa-page .sa-price-copy { display: flex; flex: 1; flex-direction: column; align-items: start; padding: clamp(28px, 3vw, 45px); }
.sa-page .sa-price-copy > p { color: #4f5e68; font-size: 15px; line-height: 1.75; }
.sa-page .sa-price-copy ul { width: 100%; margin: 27px 0 32px; padding: 0; list-style: none; }
.sa-page .sa-price-copy li { padding: 11px 0 11px 25px; border-top: 1px solid #e5e4dd; color: #344b5a; font-size: 14px; line-height: 1.5; position: relative; }
.sa-page .sa-price-copy li::before { content: '↗'; position: absolute; left: 0; color: #9e702e; }
.sa-page .sa-price-copy .a360-btn { margin-top: auto; }
.sa-page .sa-price-notes { display: grid; grid-template-columns: 1.2fr .8fr; gap: 35px; margin-top: 34px; padding: 27px 0 0; border-top: 1px solid var(--sa-rule); }
.sa-page .sa-price-notes p { color: #526270; font-size: 14px; line-height: 1.75; }
.sa-page .sa-price-notes strong { color: var(--sa-ink); }

.sa-page .sa-contact { padding-block: clamp(75px, 8vw, 130px); background: #e9e6dc; }
.sa-page .sa-contact-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 30px 9vw; }
.sa-page .sa-contact h2 { max-width: 650px; margin: 20px 0 0; font-size: clamp(50px, 5vw, 80px); line-height: .97; }
.sa-page .sa-contact-copy { max-width: 540px; }
.sa-page .sa-contact-copy p { color: #475969; font-size: 17px; line-height: 1.8; }
.sa-page .sa-contact-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; }
.sa-page .sa-contact-copy .sa-contact-related { margin-top: 20px; }
.sa-page .sa-contact-related a,
.sa-page .sa-price-notes a { color: var(--sa-ink); text-decoration: underline; text-underline-offset: 4px; }

.sa-page .sa-video-section { background: var(--sa-navy); color: #fff; }
.sa-page .sa-video-section .sa-section-head h2 { color: #fff; }
.sa-page .sa-video-section .sa-section-head > p { color: #bfcbd1; }
.sa-page .sa-video-frame { position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; background: #142b3b; }
.sa-page .sa-video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.sa-page .sa-video-note { display: flex; justify-content: space-between; gap: 25px; padding-top: 17px; color: #c3cdd2; font-size: 13px; line-height: 1.6; }
.sa-page .sa-video-note a { color: #e4c889; text-decoration: underline; text-underline-offset: 4px; }

@media (min-width: 1800px) {
  .sa-page :is(.sa-gallery, .sa-pricing, .sa-video-section) .a360-shell { max-width: 1680px; }
  .sa-page .sa-price-copy > p,
  .sa-page .sa-price-copy ul { max-width: 620px; }
}
@media (max-width: 900px) {
  .sa-page .sa-section-head, .sa-page .sa-intro-grid, .sa-page .sa-contact-grid { grid-template-columns: 1fr; }
  .sa-page .sa-pricing-grid { grid-template-columns: 1fr; }
  .sa-page .sa-intro-copy { padding-top: 0; }
  .sa-page .sa-intro-lead h2 { max-width: 800px; }
  .sa-page .sa-benefits, .sa-page .sa-why-grid { grid-template-columns: 1fr; }
  .sa-page .sa-benefit, .sa-page .sa-benefit:first-child, .sa-page .sa-why-card, .sa-page .sa-why-card:first-child { padding: 30px 0; }
  .sa-page .sa-benefit + .sa-benefit, .sa-page .sa-why-card + .sa-why-card { border-left: 0; border-top: 1px solid var(--sa-rule); }
  .sa-page .sa-why-card + .sa-why-card { border-top-color: #ffffff38; }
}
@media (max-width: 650px) {
  .sa-page .sa-hero { min-height: min(760px, 95svh); padding-block: 115px 55px; }
  .sa-page .sa-hero-media img { object-position: 57% 50%; }
  .sa-page .sa-hero-media::after { background: linear-gradient(0deg, rgba(3,19,30,.91), rgba(3,19,30,.60) 70%, rgba(3,19,30,.45)); }
  .sa-page .sa-hero h1 { font-size: clamp(58px, 14.7vw, 86px); line-height: .91; }
  .sa-page .sa-hero-lede { font-size: 17px; }
  .sa-page .sa-hero-actions .a360-btn { width: 100%; }
  .sa-page .sa-hero-index { margin-top: 48px; gap: 7px 0; font-size: 9px; }
  .sa-page .sa-hero-index span { width: 100%; }
  .sa-page .sa-hero-index span + span::before { display: none; }
  .sa-page .sa-gallery-grid, .sa-page .sa-pricing-grid, .sa-page .sa-price-notes { grid-template-columns: 1fr; }
  .sa-page .sa-tour:first-child { grid-column: auto; }
  .sa-page .sa-tour:first-child .sa-tour-visual, .sa-page .sa-tour-visual { aspect-ratio: 4 / 3; }
  .sa-page .sa-gallery-foot { align-items: flex-start; flex-direction: column; }
  .sa-page .sa-price-head { flex-direction: column; }
  .sa-page .sa-price-tag { text-align: left; }
  .sa-page .sa-video-note { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .sa-page .sa-tour-visual .a360-article-tour-poster img { transition: none; }
}