.a360-street-view {
  --sv-navy: #0b2334;
  --sv-deep: #071b2a;
  --sv-ink: #0b2435;
  --sv-paper: #faf8f3;
  --sv-stone: #efebe2;
  --sv-gold: #d1af70;
  --sv-gold-ink: #88632f;
  --sv-muted: #51616b;
  color: var(--sv-ink);
  background: var(--sv-paper);
}
.a360-street-view main { background: var(--sv-paper); }
.a360-street-view em { font-weight: 400; }
.a360-street-view :is(.sv-intro,.sv-work,.sv-use,.sv-method,.sv-packages,.sv-faq,.sv-final) h2 {
  margin: 0;
  font: 400 clamp(55px, 5.7vw, 86px)/.97 var(--a360-serif);
  letter-spacing: -.045em;
  text-wrap: balance;
}
.a360-street-view h2 em { color: var(--sv-gold-ink); }
.a360-street-view .sv-kicker {
  margin: 0 0 20px;
  color: var(--sv-gold-ink);
  font: 800 10px/1.5 var(--a360-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.a360-street-view .sv-actions { display: flex; flex-wrap: wrap; gap: 13px; align-items: center; }
.a360-street-view .sv-actions .a360-btn { min-height: 52px !important; }

.sv-hero { position: relative; isolation: isolate; display: flex; align-items: end; min-height: max(730px, 94svh); overflow: hidden; color: #fff; background: var(--sv-deep); }
.sv-hero-media { position: absolute; z-index: -2; inset: 0; overflow: hidden; }
.sv-hero-media img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 55%; }
.sv-hero::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,#071b2be8 0%,#071b2bb8 35%,#071b2b18 86%), linear-gradient(180deg,#071b2b81 0%,transparent 31%,#071b2bc9 100%); }
.sv-hero-inner { position: relative; z-index: 1; width: 100%; padding-block: 170px clamp(80px, 8vw, 116px); }
.sv-hero-copy { max-width: 990px; }
.sv-hero .sv-kicker { color: #ebcb8a; }
.sv-hero h1 { max-width: 990px; margin: 0; color: #fff; font: 400 clamp(66px, 7.5vw, 116px)/.98 var(--a360-serif); letter-spacing: -.05em; text-wrap: balance; }
.sv-hero h1 em { color: #e8c988; }
.a360-street-view .sv-hero .sv-hero-lede { max-width: 560px; margin: 48px 0 30px; color: #f6f5f0; font: 500 clamp(17px, 1.5vw, 21px)/1.6 var(--a360-sans); }
.sv-hero .a360-btn-outline-dark,.sv-final .a360-btn-outline-dark { color: #fff; border-color: #ffffff9a; background: #071b2b28; }
.sv-hero .a360-btn-outline-dark:is(:hover,:focus-visible),.sv-final .a360-btn-outline-dark:is(:hover,:focus-visible) { color: var(--sv-ink); background: #fff; border-color: #fff; }

.sv-intro { display: grid; grid-template-columns: minmax(0,1.04fr) minmax(0,.96fr); align-items: center; gap: clamp(48px,8vw,124px); padding-block: clamp(92px,9vw,142px); }
.sv-intro-copy { max-width: 660px; min-width: 0; }
.sv-intro-copy h2 { max-width: 650px; }
.sv-intro-copy p:not(.sv-kicker) { max-width: 580px; margin: 21px 0 0; color: var(--sv-muted); font: 500 clamp(16px,1.22vw,18px)/1.75 var(--a360-sans); }
.sv-intro-copy .sv-lead { margin-top: 29px !important; color: var(--sv-ink) !important; font-size: clamp(22px,2.0vw,28px) !important; line-height: 1.44 !important; letter-spacing: -.025em; }
.sv-intro-media { position: relative; margin: 0; background: #d7d9d8; }
.sv-intro-media::before { content: ''; position: absolute; z-index: -1; inset: 26px -25px -26px 25px; background: #e8e3d9; }
.sv-intro-media img { display: block; width: 100%; aspect-ratio: .91; object-fit: cover; object-position: center; }
.sv-intro-media figcaption { position: absolute; right: 0; bottom: 0; padding: 16px 19px; color: #fff; background: #071b2be3; font: 800 10px/1.4 var(--a360-sans); letter-spacing: .1em; text-transform: uppercase; }

.sv-work { padding-block: clamp(86px,8vw,128px); color: #fff; background: var(--sv-deep); }
.sv-work h2 { color: #fff; }
.sv-work h2 em { color: #e9c987; }
.sv-work .sv-kicker { color: #ebc788; }
.sv-work-head { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 40px; }
.sv-work-head p:last-child { max-width: 370px; margin: 0 0 7px; color: #cbd5d9; font: 500 17px/1.65 var(--a360-sans); }
.sv-work-layout { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(280px,.55fr); gap: clamp(25px,3vw,46px); align-items: stretch; }
.sv-viewer { min-width: 0; scroll-margin-top: 18px; background: #122d40; border: 1px solid #ffffff32; }
.sv-viewer iframe { display: block; width: 100%; height: 100%; min-height: 590px; border: 0; background: #173448; }
.sv-tour-panel { display: flex; flex-direction: column; min-width: 0; padding: 8px 0; }
.sv-panel-kicker { margin: 0 0 14px; color: #d3b274; font: 800 10px/1.4 var(--a360-sans); letter-spacing: .16em; text-transform: uppercase; }
.sv-tour-options { border-top: 1px solid #ffffff35; }
.sv-tour-option { position: relative; display: block; width: 100%; padding: 25px 36px 27px 3px; border: 0; border-bottom: 1px solid #ffffff35; color: #fff; background: none; text-align: left; cursor: pointer; transition: padding-left .25s ease,background .25s ease; }
.sv-tour-option:hover,.sv-tour-option:focus-visible,.sv-tour-option.is-active { padding-left: 16px; background: #ffffff13; }
.sv-tour-option.is-active { box-shadow: inset 3px 0 0 #d2af6c; }
.sv-tour-number { display: block; color: #d3b274; font: 800 10px/1.4 var(--a360-sans); letter-spacing: .12em; text-transform: uppercase; }
.sv-tour-option strong { display: block; margin-top: 7px; font: 400 clamp(26px,2.2vw,35px)/1.02 var(--a360-serif); letter-spacing: -.02em; }
.sv-tour-arrow { position: absolute; right: 8px; bottom: 24px; color: #e5c989; font: 400 23px/1 var(--a360-sans); }
.sv-panel-note { max-width: 320px; margin: auto 0 0; padding-top: 24px; color: #aebdc5; font: 500 13px/1.6 var(--a360-sans); }
.sv-noscript { color: #fff; }
.sv-noscript a { color: #e5c989; }

.sv-use { padding-block: clamp(93px,10vw,150px); background: #f0ede6; }
.sv-use-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.96fr); gap: clamp(54px,8vw,124px); align-items: center; }
.sv-use-copy { max-width: 650px; }
.sv-use-copy > p:not(.sv-kicker) { max-width: 590px; margin: 27px 0 33px; color: var(--sv-muted); font: 500 clamp(17px,1.35vw,19px)/1.72 var(--a360-sans); }
.sv-use-list { border-top: 1px solid #a6a7a491; }
.sv-use-list > div { display: grid; grid-template-columns: 50px 1fr; gap: 18px; padding: 24px 0; border-bottom: 1px solid #a6a7a491; }
.sv-use-list span { padding-top: 3px; color: var(--sv-gold-ink); font: 800 11px/1.5 var(--a360-sans); letter-spacing: .1em; }
.sv-use-list h3 { margin: 0; font: 400 clamp(28px,2.8vw,37px)/1.05 var(--a360-serif); letter-spacing: -.025em; }
.sv-use-list p { margin: 8px 0 0; color: var(--sv-muted); font: 500 15px/1.6 var(--a360-sans); }
.sv-use-media { margin: 0; }
.sv-use-media img { display: block; width: 100%; aspect-ratio: .76; object-fit: cover; object-position: 54% center; }

.sv-wide-photo { margin: 0; background: #cad8df; }
.sv-wide-photo .a360-panorama-frame { background: #cad8df; }
.sv-wide-photo .a360-panorama-frame::after { display: none; }
.sv-wide-photo .a360-panorama-photo { object-position: center 54%; }

.sv-method { padding-block: clamp(90px,9vw,138px); color: #f8f8f3; background: #0b2638; }
.sv-method h2 { max-width: 880px; color: #fff; }
.sv-method h2 em { color: #e6c88e; }
.sv-method .sv-kicker { color: #e6c88e; }
.sv-method-head { margin-bottom: clamp(45px,5vw,70px); }
.sv-method-steps { border-top: 1px solid #ffffff53; }
.sv-method-steps article { display: grid; grid-template-columns: 70px minmax(210px,.85fr) minmax(0,1.15fr); gap: clamp(16px,3vw,48px); align-items: start; padding: clamp(25px,3vw,42px) 0; border-bottom: 1px solid #ffffff53; }
.sv-step-index { color: #e6c88e; font: 400 45px/.85 var(--a360-serif); }
.sv-step-heading > span { color: #e6c88e; font: 800 10px/1.5 var(--a360-sans); letter-spacing: .14em; text-transform: uppercase; }
.sv-step-heading h3 { max-width: 330px; margin: 8px 0 0; color: #fff; font: 400 clamp(31px,3vw,43px)/1.02 var(--a360-serif); letter-spacing: -.025em; }
.sv-method-steps article > p { max-width: 560px; margin: 0; color: #d2dee3; font: 500 16px/1.72 var(--a360-sans); }
.sv-method-bottom { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 44px; padding: 25px 28px; border: 1px solid #ffffff45; background: #ffffff0d; }
.sv-method-bottom p { max-width: 670px; margin: 0; color: #d2dee3; font: 500 15px/1.62 var(--a360-sans); }
.sv-method-bottom strong { color: #fff; font-weight: 800; }
.sv-method-bottom .a360-btn { flex: none; }

.sv-packages { padding-block: clamp(87px,9vw,130px); background: #f2eee7; }
.sv-packages-head { display: flex; justify-content: space-between; align-items: end; gap: 60px; margin-bottom: 45px; }
.sv-packages-head h2 { max-width: 780px; }
.sv-packages-head > p { max-width: 380px; margin: 0 0 6px; color: var(--sv-muted); font: 500 17px/1.65 var(--a360-sans); }
.sv-package-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; align-items: stretch; }
.sv-package-card { display: flex; flex-direction: column; min-width: 0; min-height: 410px; padding: clamp(26px,2.8vw,39px); border: 1px solid #d6cfc2; background: #fffdf9; transition: transform .3s ease,box-shadow .3s ease; }
.sv-package-card-featured { border-color: #b89e6d; background: #e9ddc5; }
.sv-package-card:is(:hover,:focus-within) { transform: translateY(-4px); box-shadow: 0 18px 42px #0718271b; }
.sv-package-tag { margin: 0; color: var(--sv-gold-ink); font: 800 10px/1.5 var(--a360-sans); letter-spacing: .12em; text-transform: uppercase; }
.sv-package-card h3 { min-height: 89px; margin: 27px 0 13px; color: var(--sv-ink); font: 400 clamp(39px,3.7vw,55px)/.95 var(--a360-serif); letter-spacing: -.038em; }
.sv-package-card h3 em { color: var(--sv-gold-ink); }
.sv-package-rate { display: flex; flex-direction: column; gap: 4px; margin: 0 0 18px; }
.sv-package-rate span { color: var(--sv-muted); font: 800 10px/1.4 var(--a360-sans); letter-spacing: .1em; text-transform: uppercase; }
.sv-package-rate strong { color: var(--sv-ink); font: 500 clamp(50px,4.4vw,64px)/1 var(--a360-serif); letter-spacing: -.035em; }
.sv-package-description { max-width: 330px; margin: 0 0 28px; color: var(--sv-muted); font: 500 14px/1.7 var(--a360-sans); }
.sv-package-card > a { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: auto; padding-top: 16px; border-top: 1px solid #0718272c; color: var(--sv-ink); font: 800 10px/1.5 var(--a360-sans); letter-spacing: .08em; text-transform: uppercase; }
.sv-package-card > a span { font-size: 18px; line-height: 1; }
.sv-package-card > a:is(:hover,:focus-visible) { color: var(--sv-gold-ink); }
.sv-packages .sv-packages-fine { max-width: 930px; margin: 54px 0 0; padding-top: 20px; border-top: 1px solid #d6cfc2; color: var(--sv-muted); font: 500 14px/1.7 var(--a360-sans); }
.sv-packages-fine strong { color: var(--sv-ink); }
.sv-packages-fine a { color: var(--sv-ink); text-decoration-color: var(--sv-gold-ink); text-underline-offset: 4px; }

.sv-faq { padding-block: clamp(92px,10vw,145px); background: var(--sv-stone); }
.sv-faq-grid { display: grid; grid-template-columns: minmax(0,.76fr) minmax(0,1.24fr); gap: clamp(52px,10vw,160px); }
.sv-faq-heading { max-width: 420px; }
.sv-faq-heading > p:not(.sv-kicker) { margin: 28px 0; color: var(--sv-muted); font: 500 17px/1.7 var(--a360-sans); }
.sv-faq-list { border-top: 1px solid #aeb3b1; }
.sv-faq-list details { border-bottom: 1px solid #aeb3b1; }
.sv-faq-list summary { position: relative; padding: 26px 34px 26px 0; color: var(--sv-ink); font: 800 14px/1.5 var(--a360-sans); cursor: pointer; list-style: none; }
.sv-faq-list summary::-webkit-details-marker { display: none; }
.sv-faq-list summary::after { content: '+'; position: absolute; right: 4px; top: 22px; color: var(--sv-gold-ink); font: 400 24px/1 var(--a360-sans); }
.sv-faq-list details[open] summary::after { content: '×'; }
.sv-faq-list details p { margin: -3px 28px 24px 0; color: var(--sv-muted); font: 500 15px/1.72 var(--a360-sans); }

.sv-final { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 510px; overflow: hidden; color: #fff; background: var(--sv-deep); }
.sv-final::before { content: ''; position: absolute; z-index: -2; inset: 0; background: url('/assets/google-street-view/black-rock-coffee-storefront-2000.jpg') center 52% / cover; }
.sv-final::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,#071b2be0 0%,#071b2ba9 52%,#071b2b34 100%); }
.sv-final-inner { width: 100%; padding-block: 100px; }
.sv-final-copy { max-width: 700px; }
.sv-final .sv-kicker { color: #e8ca8e; }
.sv-final h2 { color: #fff; }
.sv-final h2 em { color: #e8ca8e; }
.sv-final-copy > p:not(.sv-kicker) { max-width: 535px; margin: 27px 0; color: #e6eaeb; font: 500 17px/1.7 var(--a360-sans); }

.sv-reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.25,1); }
.sv-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sv-reveal { opacity: 1; transform: none; transition: none; } .sv-tour-option,.sv-package-card { transition: none; } .sv-package-card:is(:hover,:focus-within) { transform: none; } }

@media (max-width: 1020px) {
  .sv-intro,.sv-use-layout { gap: 50px; }
  .sv-work-layout { grid-template-columns: minmax(0,1.4fr) minmax(250px,.6fr); }
  .sv-viewer iframe { min-height: 520px; }
  .sv-faq-grid { gap: 70px; }
}
@media (max-width: 800px) {
  .sv-hero { min-height: 750px; }
  .sv-hero h1 { max-width: 760px; font-size: clamp(66px,10vw,94px); }
  .sv-intro,.sv-use-layout,.sv-faq-grid { grid-template-columns: 1fr; }
  .sv-intro { gap: 45px; }
  .sv-intro-media { max-width: 640px; }
  .sv-intro-media img { aspect-ratio: 1.25; }
  .sv-work-head,.sv-packages-head { align-items: start; flex-direction: column; gap: 22px; }
  .sv-work-layout { grid-template-columns: 1fr; }
  .sv-tour-panel { padding: 0; }
  .sv-panel-kicker { margin: 8px 0 12px; }
  .sv-tour-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .sv-tour-option { min-height: 106px; padding: 15px 15px 22px; border-right: 1px solid #ffffff35; }
  .sv-tour-option:last-child { border-right: 0; }
  .sv-tour-option:hover,.sv-tour-option:focus-visible,.sv-tour-option.is-active { padding-left: 15px; }
  .sv-tour-option.is-active { box-shadow: inset 0 3px 0 #d2af6c; }
  .sv-tour-option strong { font-size: 29px; }
  .sv-tour-arrow { display: none; }
  .sv-panel-note { margin: 0; }
  .sv-use-media { max-width: 640px; }
  .sv-use-media img { aspect-ratio: 1.2; }
  .sv-method-steps article { grid-template-columns: 58px minmax(0,1fr); gap: 8px 20px; }
  .sv-method-steps article > p { grid-column: 2; }
  .sv-method-bottom { align-items: flex-start; flex-direction: column; }
  .sv-package-grid { grid-template-columns: 1fr; }
  .sv-package-card { min-height: 0; }
  .sv-package-card h3 { min-height: 0; margin-block: 23px 18px; }
  .sv-faq-heading { max-width: 640px; }
}
@media (max-width: 600px) {
  .sv-hero { min-height: min(790px,100svh); }
  .sv-hero-media img { object-position: 56% center; }
  .sv-hero::after { background: linear-gradient(180deg,#071b2b92 0%,#071b2b12 34%,#071b2bea 100%); }
  .sv-hero-inner { padding-block: 145px 60px; }
  .sv-hero h1 { font-size: clamp(58px,13.4vw,81px); line-height: .98; }
  .a360-street-view .sv-hero .sv-hero-lede { max-width: 360px; margin: 29px 0 23px; font-size: 16px; }
  .a360-street-view :is(.sv-intro,.sv-work,.sv-use,.sv-method,.sv-packages,.sv-faq,.sv-final) h2 { font-size: clamp(49px,11.7vw,67px); }
  .a360-street-view .sv-kicker { margin-bottom: 16px; font-size: 9px; }
  .sv-actions { gap: 9px !important; }
  .sv-actions .a360-btn { min-height: 48px !important; padding-inline: 17px !important; font-size: 10px !important; }
  .sv-intro { padding-block: 77px 89px; gap: 34px; }
  .sv-intro-copy .sv-lead { margin-top: 19px !important; font-size: 22px !important; }
  .sv-intro-copy p:not(.sv-kicker) { font-size: 15px; line-height: 1.72; }
  .sv-intro-media img { aspect-ratio: .94; }
  .sv-intro-media::before { inset: 15px -11px -15px 11px; }
  .sv-intro-media figcaption { padding: 10px 12px; font-size: 8px; }
  .sv-work { padding-block: 76px 84px; }
  .sv-work-head { margin-bottom: 26px; gap: 16px; }
  .sv-work-head p:last-child { font-size: 14px; }
  .sv-viewer iframe { min-height: 470px; }
  .sv-tour-options { grid-template-columns: 1fr; }
  .sv-tour-option { min-height: 0; padding: 13px 31px 14px 12px; border-right: 0; }
  .sv-tour-option:hover,.sv-tour-option:focus-visible,.sv-tour-option.is-active { padding-left: 12px; }
  .sv-tour-number { font-size: 9px; }
  .sv-tour-option strong { margin-top: 3px; font-size: 27px; }
  .sv-tour-arrow { display: block; bottom: 18px; }
  .sv-panel-note { padding-top: 16px; font-size: 12px; }
  .sv-use { padding-block: 79px; }
  .sv-use-layout { gap: 32px; }
  .sv-use-copy > p:not(.sv-kicker) { margin: 20px 0 23px; font-size: 15px; }
  .sv-use-list > div { grid-template-columns: 36px 1fr; gap: 10px; padding-block: 19px; }
  .sv-use-list h3 { font-size: 29px; }
  .sv-use-list p { font-size: 14px; }
  .sv-use-media img { aspect-ratio: 1.02; }
  .sv-wide-photo .a360-panorama-photo { object-position: center center; }
  .sv-method { padding-block: 80px; }
  .sv-method-head { margin-bottom: 29px; }
  .sv-method-steps article { grid-template-columns: 39px minmax(0,1fr); gap: 8px 13px; padding-block: 23px; }
  .sv-step-index { font-size: 34px; }
  .sv-step-heading h3 { font-size: 31px; }
  .sv-method-steps article > p { font-size: 14px; }
  .sv-method-bottom { margin-top: 29px; padding: 20px; }
  .sv-method-bottom p { font-size: 14px; }
  .sv-packages { padding-block: 76px; }
  .sv-packages-head { margin-bottom: 27px; }
  .sv-packages-head > p { font-size: 14px; }
  .sv-package-card { padding: 25px; }
  .sv-package-card h3 { font-size: 43px; }
  .sv-package-rate strong { font-size: 54px; }
  .sv-packages .sv-packages-fine { margin-top: 36px; padding-top: 16px; font-size: 12px; }
  .sv-faq { padding-block: 78px; }
  .sv-faq-grid { gap: 36px; }
  .sv-faq-heading > p:not(.sv-kicker) { margin: 20px 0 23px; font-size: 15px; }
  .sv-faq-list summary { padding-block: 20px; font-size: 13px; }
  .sv-faq-list summary::after { top: 17px; }
  .sv-faq-list details p { font-size: 14px; }
  .sv-final { min-height: 550px; }
  .sv-final::before { background-position: 51% center; }
  .sv-final::after { background: linear-gradient(180deg,#071b2b69 0%,#071b2bdf 100%); }
  .sv-final-inner { padding-block: 90px 70px; }
  .sv-final-copy > p:not(.sv-kicker) { margin: 20px 0 24px; font-size: 15px; }
}