/* GLOBAL */
/* ==== */
html {
scroll-behavior: smooth;
}
#savecontent {
margin-top: -2px;
}
.anchor {
scroll-margin-top: 100px;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
color: inherit;
}
h1, .h1 {
font-size: clamp(35px, 4.4vw, 46px);
}
h1.mega, .h1.mega {
font-size: clamp(36px, 4.7vw, 70px);
}
h1.ultra, .h1.ultra {
font-size: clamp(37px, 5.3vw, 95px);
}
h2, .h2 {
font-size: clamp(32px, 4vw, 42px);
}
h3, .h3 {
font-size: clamp(29px, 3.6vw, 37px);
}
h4, .h4 {
font-size: clamp(26px, 3.2vw, 32px);
}
h5, .h5 {
font-size: clamp(23px, 2.8vw, 27px);
}
h6, .h6 {
font-size: clamp(20px, 2.4vw, 22px);
}
body {
font-size: clamp(15px, 2vw, 18px);
}
.btn {
white-space: normal;
}
a:hover img,
a.bg-img:hover a.bg-image:hover {
opacity: .85;
}
#savecontent img {
max-width: 100% !important;
height: auto !important;
}
.rightfloat {
float: right;
margin: 0 0 .5rem 1rem;
width: 40%;
}
@media (max-width: 767px) {
.rightfloat {
float: none;
margin: 0 0 1rem 0;
width: 100%;
}
}
.btn-primary {
color: white !important;
}
.round {
border-radius: 12px;
}
.carousel-control-next-icon,
.carousel-control-prev-icon {
background-color: rgba(0, 0, 0, 0.9);
padding: 1rem;
background-size: 20px;
}
@media(min-width: 1600px) {
.container {
max-width: 1300px;
}
}
@media(min-width: 1600px) {
.container.container-wide {
width: 1500px !important;
max-width: 1500px !important;
}
}
.product-image {
background-size: cover !important;
min-height: auto !important;
padding-bottom: 75%;
}
#savecontent form label {
font-weight: bold;
}
#savecontent form .checkbox-group label,
#savecontent form .radio-group label {
font-weight: normal;
}
.formbuilder-required {
color: red;
}
.text-right.addToCart {
text-align: left !important;
}
.blog-detail-page {
background: var(--light);
}
.blog-detail-page .blog {
border-radius: 12px;
padding: 1.5rem;
background: white;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
}
.blog-detail-page .blog h4 {
margin-top: 1rem;
}
form li p {
margin-bottom: 0;
}
form label {
font-weight: bold;
}
form .checkbox-group label,
form .radio-group label {
font-weight: normal;
}
.formbuilder-checkbox,
.formbuilder-radio {
margin-bottom: 4px;
}
/* ==== SCOUT REAL ESTATE GROUP ==== */
/* palette comes from the site config: --primary 0E2D58 navy, --primary-alt 72CBFA sky */
/* decorative art (topo contours, Front Range ridge, compass rose) is SVG url-encoded into the rules below, drawn as masks so the colour always comes from the palette */
body {
font-family: 'Figtree', 'Segoe UI', Tahoma, sans-serif;
}
.btn {
font-weight: 600;
font-size: .8rem;
letter-spacing: .14em;
text-transform: uppercase;
padding: .9rem 1.9rem;
border-radius: 0;
transition: background-color .14s linear, border-color .14s linear, color .14s linear;
}
.section-pad {
padding: 3.25rem 0;
}
@media (min-width: 992px) {
.section-pad {
padding: 5.5rem 0;
}
}
/* phones: taps fire immediately and cards acknowledge the press */
.btn,
.arrow-link,
.listing-card,
.service-card,
.scout-hero .carousel-indicators li {
touch-action: manipulation;
}
.listing-card:active,
.service-card:active {
transform: scale(.985);
}
/* labels: tracked caps microlabel, eyebrow adds the sky dash */
.microlabel {
font-size: .72rem;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
}
.eyebrow {
display: inline-block;
font-size: .78rem;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--primary);
}
.eyebrow::before {
content: "";
display: inline-block;
width: 26px;
height: 2px;
background: var(--primary-alt);
vertical-align: middle;
margin-right: .6rem;
margin-top: -2px;
}
.eyebrow-center::after {
content: "";
display: inline-block;
width: 26px;
height: 2px;
background: var(--primary-alt);
vertical-align: middle;
margin-left: .6rem;
margin-top: -2px;
}
@media (max-width: 575px) {
.eyebrow-center::before,
.eyebrow-center::after {
width: 16px;
}
.eyebrow-center::before {
margin-right: .45rem;
}
.eyebrow-center::after {
margin-left: .45rem;
}
}
.text-white-75 {
color: rgba(255, 255, 255, .78) !important;
}
.sky {
color: var(--primary-alt);
}
.bg-navy {
background-color: var(--primary);
}
.arrow-link {
font-size: .8rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--primary);
}
.arrow-link:hover {
color: var(--primary);
text-decoration: underline;
text-underline-offset: 4px;
}
.arrow-link i {
transition: transform .14s linear;
}
.arrow-link:hover i {
transform: translateX(4px);
}
/* heading accent: a thin sky underline beneath the bold words on light sections */
.scout-intro h2 strong,
.scout-about h2 strong,
.scout-stories h2 strong,
.scout-contact h2 strong {
background-image: linear-gradient(rgba(114, 203, 250, .7), rgba(114, 203, 250, .7));
background-repeat: no-repeat;
background-size: 100% .12em;
background-position: 0 94%;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* the featured listings section comes from featured.cfm with no hook class, so it is found with :has(); kept as its own rule so a browser without :has() skips only this one */
.snipOuter:has(.listing-card) h2 strong {
background-image: linear-gradient(rgba(114, 203, 250, .7), rgba(114, 203, 250, .7));
background-repeat: no-repeat;
background-size: 100% .12em;
background-position: 0 94%;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.scout-services h2 strong {
color: var(--primary-alt);
}
/* ==== hero: Ken Burns carousel (BS4 carousel-fade adaptation) ==== */
.scout-hero {
position: relative;
}
.scout-hero .carousel-item {
height: 60vh;
height: 60dvh;
min-height: 460px;
transition-duration: 1.2s;
}
@media (min-width: 768px) {
.scout-hero .carousel-item {
height: calc(100vh - var(--omsnav-h, 0px));
height: calc(100dvh - var(--omsnav-h, 0px));
min-height: 560px;
}
}
.scout-hero .kb {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
background-position: center;
}
/* platform ships BS 4.0-era carousel CSS with no stacking rules; restore the 4.1+ z-index set */
.scout-hero .carousel-item.active,
.scout-hero .carousel-item-next.carousel-item-left,
.scout-hero .carousel-item-prev.carousel-item-right {
z-index: 1;
}
/* outgoing slide holds under the incoming one for the full 1.2s fade */
.scout-hero .carousel-item.active.carousel-item-left,
.scout-hero .carousel-item.active.carousel-item-right {
z-index: 0;
transition: opacity 0s 1.2s;
}
@media (prefers-reduced-motion: no-preference) {
.scout-hero .carousel-item.active .kb,
.scout-hero .carousel-item-next .kb,
.scout-hero .carousel-item-prev .kb {
animation: scoutKbIn 9.5s linear both;
}
.scout-hero .carousel-item:nth-child(even).active .kb,
.scout-hero .carousel-item-next:nth-child(even) .kb,
.scout-hero .carousel-item-prev:nth-child(even) .kb {
animation-name: scoutKbOut;
}
.scout-hero .carousel-item:nth-child(4n+1) .kb {
transform-origin: 78% 42%;
}
.scout-hero .carousel-item:nth-child(4n+2) .kb {
transform-origin: 22% 58%;
}
.scout-hero .carousel-item:nth-child(4n+3) .kb {
transform-origin: 64% 70%;
}
}
@keyframes scoutKbIn {
from { transform: scale(1); }
to { transform: scale(1.12); }
}
@keyframes scoutKbOut {
from { transform: scale(1.12); }
to { transform: scale(1); }
}
/* bottom-up wash for the copy, plus a light left-side shade so the text holds up on bright slides */
.scout-hero .scrim {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background:
linear-gradient(to top, rgba(8, 22, 44, .84) 0%, rgba(8, 22, 44, .42) 45%, rgba(8, 22, 44, .16) 100%),
linear-gradient(to right, rgba(8, 22, 44, .34) 0%, rgba(8, 22, 44, 0) 62%);
}
.scout-hero .hero-content {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
padding-bottom: 4.25rem;
}
.scout-hero .hero-lead {
max-width: 33rem;
}
/* phones: both buttons share one row so the copy fits inside the 60dvh hero */
@media (max-width: 575px) {
.scout-hero .hero-content {
padding-bottom: 3.25rem;
}
.scout-hero .hero-ctas .btn {
flex: 1 1 0;
padding: .85rem .5rem;
letter-spacing: .1em;
}
}
.scout-hero h1 em {
font-style: normal;
color: var(--primary-alt);
}
.scout-hero h1,
.scout-hero .hero-lead {
text-shadow: 0 1px 16px rgba(8, 22, 44, .45);
}
.scout-hero .hero-services li {
font-size: .72rem;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
color: rgba(255, 255, 255, .88);
text-shadow: 0 1px 10px rgba(8, 22, 44, .55);
}
.scout-hero .hero-services li + li::before {
content: "";
display: inline-block;
width: 5px;
height: 5px;
margin: -3px .95rem 0;
vertical-align: middle;
background: var(--primary-alt);
transform: rotate(45deg);
}
.scout-hero .coords {
position: absolute;
right: 1.5rem;
bottom: 1.5rem;
z-index: 2;
opacity: .85;
}
.scout-hero .carousel-indicators {
z-index: 2;
margin-bottom: 1.3rem;
}
/* content-box: the platform's BS 4.0 css leaves these border-box, which collapses the 2px dash to nothing inside its 8px hit borders */
.scout-hero .carousel-indicators li {
box-sizing: content-box;
width: 34px;
height: 2px;
border-radius: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
background-color: rgba(255, 255, 255, .42);
background-clip: padding-box;
opacity: 1;
transition: background-color .14s linear;
}
/* the active dash fills in sky over the 5s interval, so the indicators double as a slide timer */
.scout-hero .carousel-indicators li::before {
display: none;
}
.scout-hero .carousel-indicators li::after {
content: "";
position: absolute;
top: 0;
bottom: auto;
left: 0;
width: 100%;
height: 2px;
background-color: var(--primary-alt);
transform: scaleX(0);
transform-origin: left center;
}
.scout-hero .carousel-indicators li.active::after {
transform: scaleX(1);
}
@media (prefers-reduced-motion: no-preference) {
.scout-hero .carousel-indicators li.active::after {
animation: scoutTick 5s linear both;
}
}
@keyframes scoutTick {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* ==== intro: faint compass rose, and a sky wash that carries into the listings ==== */
.scout-intro {
position: relative;
overflow: hidden;
background-color: #fff;
background-image: linear-gradient(180deg, rgba(114, 203, 250, 0) 40%, rgba(114, 203, 250, .12) 100%);
}
.scout-intro::before {
content: "";
position: absolute;
top: -90px;
right: -130px;
width: 340px;
height: 340px;
background-color: var(--primary);
opacity: .06;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23000'%3E%3Ccircle cx='100' cy='100' r='97' stroke-width='1.2'/%3E%3Ccircle cx='100' cy='100' r='64' stroke-width='.8'/%3E%3Cpath d='M100.0 20.0L100.0 5.0M107.8 10.3L108.3 5.4M115.6 11.4L116.5 6.4M122.3 16.9L124.6 8.2M130.8 15.4L132.5 10.7M138.0 18.4L140.1 13.9M143.0 25.5L147.5 17.7M151.6 26.3L154.5 22.2M157.9 31.1L161.1 27.2M156.6 43.4L167.2 32.8M168.9 42.1L172.8 38.9M173.7 48.4L177.8 45.5M174.5 57.0L182.3 52.5M181.6 62.0L186.1 59.9M184.6 69.2L189.3 67.5M183.1 77.7L191.8 75.4M188.6 84.4L193.6 83.5M189.7 92.2L194.6 91.7M180.0 100.0L195.0 100.0M189.7 107.8L194.6 108.3M188.6 115.6L193.6 116.5M183.1 122.3L191.8 124.6M184.6 130.8L189.3 132.5M181.6 138.0L186.1 140.1M174.5 143.0L182.3 147.5M173.7 151.6L177.8 154.5M168.9 157.9L172.8 161.1M156.6 156.6L167.2 167.2M157.9 168.9L161.1 172.8M151.6 173.7L154.5 177.8M143.0 174.5L147.5 182.3M138.0 181.6L140.1 186.1M130.8 184.6L132.5 189.3M122.3 183.1L124.6 191.8M115.6 188.6L116.5 193.6M107.8 189.7L108.3 194.6M100.0 180.0L100.0 195.0M92.2 189.7L91.7 194.6M84.4 188.6L83.5 193.6M77.7 183.1L75.4 191.8M69.2 184.6L67.5 189.3M62.0 181.6L59.9 186.1M57.0 174.5L52.5 182.3M48.4 173.7L45.5 177.8M42.1 168.9L38.9 172.8M43.4 156.6L32.8 167.2M31.1 157.9L27.2 161.1M26.3 151.6L22.2 154.5M25.5 143.0L17.7 147.5M18.4 138.0L13.9 140.1M15.4 130.8L10.7 132.5M16.9 122.3L8.2 124.6M11.4 115.6L6.4 116.5M10.3 107.8L5.4 108.3M20.0 100.0L5.0 100.0M10.3 92.2L5.4 91.7M11.4 84.4L6.4 83.5M16.9 77.7L8.2 75.4M15.4 69.2L10.7 67.5M18.4 62.0L13.9 59.9M25.5 57.0L17.7 52.5M26.3 48.4L22.2 45.5M31.1 42.1L27.2 38.9M43.4 43.4L32.8 32.8M42.1 31.1L38.9 27.2M48.4 26.3L45.5 22.2M57.0 25.5L52.5 17.7M62.0 18.4L59.9 13.9M69.2 15.4L67.5 10.7M77.7 16.9L75.4 8.2M84.4 11.4L83.5 6.4M92.2 10.3L91.7 5.4' stroke-width='.9'/%3E%3Cpath d='M111.0 100.0L100.0 26.0L89.0 100.0L100 100ZM100.0 111.0L174.0 100.0L100.0 89.0L100 100ZM89.0 100.0L100.0 174.0L111.0 100.0L100 100ZM100.0 89.0L26.0 100.0L100.0 111.0L100 100ZM105.7 105.7L132.5 67.5L94.3 94.3L100 100ZM94.3 105.7L132.5 132.5L105.7 94.3L100 100ZM94.3 94.3L67.5 132.5L105.7 105.7L100 100ZM105.7 94.3L67.5 67.5L94.3 105.7L100 100Z' stroke-width='1' stroke-linejoin='round'/%3E%3C/g%3E%3Cpath d='M100 100L100.0 26.0L89.0 100.0ZM100 100L174.0 100.0L100.0 89.0ZM100 100L100.0 174.0L111.0 100.0ZM100 100L26.0 100.0L100.0 111.0ZM100 100L132.5 67.5L94.3 94.3ZM100 100L132.5 132.5L105.7 94.3ZM100 100L67.5 132.5L105.7 105.7ZM100 100L67.5 67.5L94.3 105.7Z'/%3E%3Ccircle cx='100' cy='100' r='3.5'/%3E%3C/svg%3E");
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
pointer-events: none;
}
@media (min-width: 992px) {
.scout-intro::before {
top: -150px;
right: -150px;
width: 620px;
height: 620px;
}
}
.scout-intro .container {
position: relative;
z-index: 1;
}
/* the intro wash runs straight into the listings wash, so trim the doubled padding between them (the listings side is trimmed in its own rule below) */
.scout-intro.section-pad {
padding-bottom: 2rem;
}
@media (min-width: 992px) {
.scout-intro.section-pad {
padding-bottom: 2.5rem;
}
}
/* ==== value props ==== */
.vp-card {
position: relative;
background-color: #fff;
background-image: linear-gradient(180deg, rgba(114, 203, 250, 0) 55%, rgba(114, 203, 250, .08) 100%);
border: 1px solid rgba(14, 45, 88, .1);
border-top: 3px solid var(--primary-alt);
box-shadow: 0 18px 40px -26px rgba(14, 45, 88, .35);
}
.vp-num {
position: absolute;
top: 1.4rem;
right: 1.5rem;
color: rgba(14, 45, 88, .32);
}
.vp-icon {
width: 56px;
height: 56px;
border-radius: 50%;
color: var(--primary);
font-size: 1.2rem;
background-image: radial-gradient(circle at 32% 28%, #fff 0%, rgba(114, 203, 250, .34) 100%);
box-shadow: inset 0 0 0 1px rgba(114, 203, 250, .6);
}
@media (min-width: 768px) and (max-width: 991px) {
.vp-card.p-4 {
padding: 1.25rem !important;
}
.vp-num {
top: 1.1rem;
right: 1.1rem;
}
}
/* ==== listing cards (markup comes from custom/2743/featured.cfm) ==== */
.snipOuter.bg-light:has(.listing-card) {
padding-top: 2.5rem;
background-color: #fff !important;
background-image: linear-gradient(180deg, rgba(114, 203, 250, .12) 0%, rgba(114, 203, 250, .03) 100%);
}
@media (min-width: 992px) {
.snipOuter.bg-light:has(.listing-card) {
padding-top: 3.5rem;
}
}
.listing-card {
display: block;
background: white;
color: rgba(20, 30, 44, .92);
border: 1px solid rgba(14, 45, 88, .12);
box-shadow: 0 18px 40px -28px rgba(14, 45, 88, .4);
transition: border-color .14s linear, box-shadow .14s linear;
}
.listing-card:hover {
text-decoration: none;
border-color: rgba(14, 45, 88, .4);
box-shadow: 0 18px 40px -20px rgba(14, 45, 88, .45);
}
.listing-card .media {
display: block;
position: relative;
}
.listing-card .media::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 38%;
background: linear-gradient(to top, rgba(8, 22, 44, .3), rgba(8, 22, 44, 0));
pointer-events: none;
}
.listing-card .media img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
}
.chip {
position: absolute;
top: .9rem;
left: .9rem;
z-index: 1;
padding: .36rem .7rem;
background: rgba(255, 255, 255, .86);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
box-shadow: 0 4px 14px rgba(8, 22, 44, .14);
color: var(--primary);
font-size: .66rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
}
.chip::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
margin: -2px .45rem 0 0;
vertical-align: middle;
border-radius: 50%;
background: var(--primary-alt);
}
.listing-card .h4 {
color: var(--primary);
}
.listing-loc {
color: var(--primary);
}
.listing-title {
font-weight: 500;
color: rgba(20, 30, 44, .85);
}
.listing-meta {
font-size: .84rem;
margin-top: .9rem;
padding-top: .8rem;
border-top: 1px solid rgba(14, 45, 88, .1);
}
.listing-meta i {
color: rgba(14, 45, 88, .55);
}
/* tablets: three cards share a narrow row, so the card type steps down a size */
@media (min-width: 768px) and (max-width: 991px) {
.listing-card .p-4 {
padding: 1.25rem !important;
}
.listing-card .h4 {
font-size: 22px;
}
.listing-meta {
font-size: .76rem;
}
}
/* ==== services: navy band with topo contours and a Front Range ridge ==== */
.scout-services {
position: relative;
overflow: hidden;
color: rgba(255, 255, 255, .78);
background-color: var(--primary);
background-image:
radial-gradient(ellipse 55% 60% at 88% 0%, rgba(114, 203, 250, .2), rgba(114, 203, 250, 0) 70%),
linear-gradient(160deg, rgba(8, 22, 44, 0) 30%, rgba(8, 22, 44, .5) 100%);
}
.scout-services.section-pad {
padding-bottom: 5rem;
}
@media (min-width: 992px) {
.scout-services.section-pad {
padding-bottom: 8.5rem;
}
}
/* topo contours, shared by the services band, the featured client story and the site footer (footer.htm sets the footer's own opacity and stacking) */
.scout-services::before,
.story-feature::before,
.oms-footer::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--primary-alt);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M1455 0q33 26 51 38q18 11 36 21q18 9 42 19l24 9'/%3E%3Cpath d='M1462 1008q68-24 107-32l39-8'/%3E%3Cpath d='M1360 0q39 36 66 56q26 20 104 69l78 49'/%3E%3Cpath d='M1608 511q-18-19-21-25q-4-6-8-18q-4-12-4-18q0-6 1-12q0-6 4-18q4-12 16-28l12-17'/%3E%3Cpath d='M1342 1008q38-25 65-36q27-12 54-20q27-9 87-24l60-15'/%3E%3Cpath d='M869 0q13 24 15 36q1 12-2 24q-4 12-7 18q-4 6-13 15q-10 8-22 15q-12 6-24 10q-12 3-30 5q-18 2-36 1q-18-1-30-4q-12-4-24-9q-12-6-22-16q-11-11-15-23q-5-12-4-24q0-12 3-18q2-7 11-18l8-12'/%3E%3Cpath d='M1248 0q71 60 141 114q70 54 83 66q12 12 22 24q9 12 14 24q5 12 6 18q1 6 1 18q0 12-3 24q-4 12-19 48q-15 36-18 48q-4 12-6 30q-2 18 1 36q2 18 10 36q7 18 21 36q13 18 34 36q21 18 47 35l26 16'/%3E%3Cpath d='M559 612q29 4 41 9q12 4 24 13q12 9 24 24q12 14 22 32q10 18 17 36q7 18 13 42q5 24 7 42q1 18 0 36q-2 18-6 30q-4 12-10 22q-7 9-13 15q-6 5-18 10q-12 4-24 5q-12 0-24-2q-12-3-30-9q-18-7-72-28q-54-22-72-31q-18-9-30-19q-12-11-15-17q-4-6-6-12q-3-7-4-18q-1-12 0-24q1-12 7-29q6-18 13-30q7-13 18-26q11-13 23-23q12-11 30-21q18-11 36-17q18-6 34-8l15-2'/%3E%3Cpath d='M1253 1008q64-48 90-61q25-14 49-22q24-9 96-28q72-20 96-28l24-9'/%3E%3Cpath d='M533 0q-13 48-15 72q-3 24-1 42q1 18 6 36q4 18 11 31q6 12 18 27q12 14 30 27q18 12 36 19q18 6 42 10q24 3 48 3q24-1 60-5q36-5 84-14q48-10 78-18q30-8 56-17q26-9 53-21q26-12 58-29q31-17 49-22q18-6 36-6q18 0 36 5q18 4 36 12q18 7 36 18q17 10 30 20q12 9 21 18q8 8 16 20q8 12 13 24q5 12 8 30q2 18 2 60q-1 42 1 66q2 24 8 48q6 24 17 48q10 23 19 36q8 12 19 24q10 12 27 27q17 15 61 48q44 33 56 45q11 12 16 20l4 7'/%3E%3Cpath d='M508 1008q-25-24-38-33q-14-10-32-19q-18-9-54-22q-36-13-44-17q-9-5-16-11q-7-6-11-12q-4-6-7-18q-3-12-3-24q-1-12 1-30q2-18 10-54q8-36 18-66q9-30 20-54q11-24 28-48q16-25 40-51q24-27 54-52q30-26 54-39q24-14 36-17q12-4 24-5q12-2 24 0q12 1 24 5q12 4 30 17q18 12 30 24q12 12 24 27q12 15 36 55q24 39 42 74q17 34 26 58q9 24 17 54q8 30 25 108q16 78 22 96q5 18 15 36l9 18'/%3E%3Cpath d='M1163 1008q37-22 85-56q48-34 66-45q18-11 42-21q24-10 84-26q60-17 81-24q21-8 41-20q20-12 27-18q6-6 13-15l6-9'/%3E%3Cpath d='M0 942q48 6 66 6q18 0 36-1q18-2 36-6q18-5 30-10q12-6 24-15q12-9 20-18q7-10 18-28q10-18 18-36q7-18 15-42q7-24 29-114q22-90 47-156q25-66 31-84q6-18 10-42q4-24 5-72q1-48 4-72q2-24 29-138l27-114'/%3E%3Cpath d='M1031 312q61-8 91-8q30 0 42 2q12 1 24 5q12 3 24 9q12 6 19 11q7 5 18 17q11 12 19 24q7 12 16 30q8 18 26 66q18 48 34 78q16 30 32 51q16 21 57 60q41 39 49 51q8 12 10 18q1 6 1 12q0 6-2 12q-3 6-9 13q-6 6-18 14q-12 7-48 21q-36 14-54 23q-18 8-36 20q-18 12-48 37q-30 24-54 41q-24 17-48 30q-24 13-48 20q-24 6-36 7q-12 1-24 1q-12-1-30-6q-18-6-30-13q-12-7-18-12q-6-6-18-20q-12-15-23-38q-12-24-19-54q-8-30-14-84q-6-54-9-72q-4-18-9-36q-5-18-27-78q-22-60-25-78q-4-18-4-36q0-18 4-30q3-12 6-18q3-6 14-18q10-12 18-18q8-6 19-12q11-6 28-13q17-7 35-12q18-6 42-11l23-6'/%3E%3Cpath d='M367 0q-5 36-10 54q-5 18-13 39q-8 21-30 72q-23 51-31 81q-9 30-11 54q-3 24-2 96q1 72-5 162q-6 90-12 132q-7 42-16 72q-10 30-19 48q-10 18-18 30q-8 11-20 23q-12 12-24 20q-12 8-24 13q-12 5-30 10q-18 4-36 6q-18 1-42 0l-24-2'/%3E%3Cpath d='M1034 420q22-6 34-7q12-2 30-1q18 1 36 7q18 5 33 15q14 10 25 22q11 12 22 29q10 16 51 102q41 85 45 97q3 12 4 24q1 12-1 24q-2 12-6 24q-5 12-15 30q-11 18-24 36q-14 18-25 30q-11 12-27 26q-16 13-34 24q-18 11-36 18q-18 6-36 8q-18 2-30 0q-12-2-24-6q-12-4-25-13q-13-9-24-22q-11-13-19-30q-9-17-13-35q-5-18-7-36q-2-18-1-36q0-18 5-72q4-54 4-72q-1-18-4-48q-4-30-3-48q1-18 5-30q3-12 12-24q9-12 17-18q7-6 19-12l12-6'/%3E%3Cpath d='M287 0q0 24-3 42q-4 18-10 36q-7 18-27 60q-20 42-30 66q-10 24-17 48q-7 24-11 48q-4 24-4 42q-1 18 1 42q1 24 16 96q15 72 20 108q4 36 4 54q0 18-1 36q-1 18-8 48q-7 30-15 48q-8 18-15 30q-8 12-19 25q-12 13-24 22q-12 9-24 15q-12 6-30 11q-18 5-36 7q-18 1-36 0l-18-1'/%3E%3Cpath d='M1103 612q13-2 25 0q12 1 24 7q12 6 24 16q12 9 19 17q7 8 15 20q8 12 14 24q5 12 8 24q2 12 3 24q0 12-2 24q-2 12-9 30q-8 18-22 36q-15 18-32 30q-18 12-30 16q-12 4-24 6q-12 1-24-1q-12-2-18-4q-6-2-17-9q-11-8-18-16q-7-8-12-18q-6-10-10-22q-4-12-5-24q-2-12-1-30q1-18 5-33q4-16 10-30q6-15 12-25q6-11 18-26q12-15 24-23q12-9 18-11l5-2'/%3E%3Cpath d='M183 0q9 16 12 26q2 10 1 28q-1 18-6 36q-5 18-22 66q-18 48-29 84q-12 36-19 66q-7 30-9 54q-2 24 0 42q2 18 6 30q3 12 27 61q24 48 35 78q10 29 15 59q4 30 4 48q-1 18-3 30q-2 12-7 30q-5 18-11 30q-6 12-14 24q-9 12-21 24q-13 12-23 19q-11 6-29 13q-18 7-36 10q-18 2-36 2l-18-1'/%3E%3Cpath d='M1090 720q14-7 26-8q12-1 18 1q6 2 12 6q6 4 14 15q7 10 10 22q2 12 0 24q-2 12-9 24q-8 12-14 17q-7 5-19 9q-12 4-24 2q-12-2-18-6q-6-4-12-13q-7-9-9-21q-3-12-1-24q1-12 8-24q6-12 12-18l6-6'/%3E%3Cpath d='M0 43q36-1 50 2q13 3 24 10q10 6 17 18q7 11 10 23q2 12 2 24q0 12-5 42q-5 30-15 65q-11 34-33 90q-23 55-26 67q-4 12-4 24q-1 12 3 24q4 12 9 18q4 6 40 42q36 35 46 48q10 12 18 24q8 12 18 36q10 24 13 36q2 12 4 30q1 18-1 36q-2 18-8 36q-6 17-13 30q-8 12-18 24q-11 11-23 19q-12 8-30 15q-18 7-30 9q-12 1-30 1l-18-1'/%3E%3Cpath d='M0 124q11 8 16 14q4 6 7 12q2 6 4 18q1 12 0 24q-1 12-4 24q-4 12-13 32l-10 20'/%3E%3Cpath d='M0 524q24 4 36 9q12 4 24 11q12 7 27 20q14 12 24 24q9 12 16 24q6 12 12 30q5 18 6 30q1 12 0 24q-1 12-4 24q-3 12-8 24q-6 12-15 24q-10 12-22 21q-12 8-24 13q-12 5-24 8q-12 2-30 2l-18 0'/%3E%3Cpath d='M0 572q24 2 36 6q12 3 24 11q12 7 18 12q6 5 13 14q7 9 12 18q5 8 9 18q3 9 5 21q1 12 1 24q-1 12-5 24q-4 12-10 23q-7 10-13 16q-6 6-12 11q-6 4-18 9q-12 5-24 7q-12 2-24 2l-12-1'/%3E%3Cpath d='M0 615q24 0 30 2q6 2 18 10q12 7 18 14q6 6 10 13q3 6 6 13q2 7 3 18q1 11-2 23q-4 12-7 18q-4 6-10 12q-6 6-18 12q-12 6-18 7q-6 1-18 1l-12-1'/%3E%3C/g%3E%3C/svg%3E");
-webkit-mask-size: cover;
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
pointer-events: none;
}
.scout-services::before {
opacity: .1;
}
.scout-services::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: clamp(70px, 11vw, 170px);
background-color: var(--primary-alt);
opacity: .1;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 220'%3E%3Cpath d='M0 220L0 39L10 34L27 43L40 48L57 61L63 63L83 75L90 77L107 88L117 90L130 100L160 115L170 124L180 126L190 135L193 135L197 132L203 130L213 122L220 120L227 115L240 102L257 91L267 81L270 82L273 84L277 84L297 69L303 67L310 61L320 57L330 48L333 47L350 61L360 65L367 72L377 74L383 80L407 96L420 102L430 112L437 113L443 119L460 130L470 133L477 129L483 127L493 120L510 113L517 105L523 102L533 95L550 81L557 78L570 67L580 62L593 50L620 30L630 26L650 39L653 39L660 34L667 31L687 18L697 23L707 27L720 37L723 38L730 38L743 30L753 37L760 39L770 47L777 49L793 61L803 65L813 73L830 80L837 74L850 67L873 48L883 45L890 53L900 59L903 60L910 66L930 80L933 83L940 86L957 101L967 106L973 113L980 116L1000 112L1013 106L1027 105L1033 102L1037 101L1047 104L1057 104L1067 108L1080 111L1087 114L1093 115L1100 120L1120 123L1130 129L1137 128L1140 130L1143 130L1173 110L1180 108L1187 103L1200 96L1213 87L1217 87L1230 98L1247 107L1253 114L1260 116L1267 121L1273 123L1283 128L1293 136L1303 139L1330 158L1337 158L1343 162L1347 162L1353 158L1370 161L1383 158L1390 152L1410 144L1417 140L1423 138L1430 132L1440 125L1447 124L1473 105L1483 102L1497 94L1507 92L1517 84L1533 76L1543 71L1553 63L1563 60L1570 54L1590 44L1597 39L1600 39L1600 220Z' fill-opacity='.5'/%3E%3Cpath d='M0 220L0 178L25 169L75 157L135 139L165 133L190 139L220 148L245 153L355 142L395 148L470 156L495 160L530 163L545 162L575 155L600 150L630 155L640 155L685 142L700 140L725 145L775 161L795 165L805 165L850 159L880 157L1025 139L1050 141L1140 122L1150 121L1175 125L1235 139L1255 137L1270 138L1290 145L1430 179L1485 193L1495 195L1530 192L1570 186L1600 178L1600 220Z'/%3E%3C/svg%3E");
-webkit-mask-size: auto 100%;
-webkit-mask-position: left bottom;
-webkit-mask-repeat: repeat-x;
pointer-events: none;
}
.scout-services .container {
position: relative;
z-index: 1;
}
.founder-quote {
padding-left: 1.5rem;
border-left: 2px solid var(--primary-alt);
}
.founder-quote blockquote {
font-family: 'Roboto Slab', Georgia, serif;
font-size: clamp(18px, 1.8vw, 22px);
line-height: 1.55;
color: #fff;
}
/* solid navy from bg-primary on the card, so the topo lines stay behind it; the card starts on the deep navy and lightens to the brand navy on hover (the reverse of the platform's a.bg-primary:hover), with a sky edge and a deeper shadow */
.service-card {
display: flex;
flex-direction: column;
color: rgba(255, 255, 255, .74);
border: 1px solid rgba(255, 255, 255, .14);
box-shadow: 0 22px 44px -26px rgba(4, 12, 26, .7);
transition: background-color .14s linear, border-color .14s linear, box-shadow .14s linear;
}
a.service-card.bg-primary {
background-color: #07172c !important;
}
a.service-card.bg-primary:hover,
a.service-card.bg-primary:focus {
background-color: var(--primary) !important;
}
.service-card:hover {
color: rgba(255, 255, 255, .74);
text-decoration: none;
border-color: rgba(114, 203, 250, .75);
box-shadow: 0 0 0 1px rgba(114, 203, 250, .75), 0 24px 48px -22px rgba(4, 12, 26, .85);
}
.service-card:hover .arrow-link {
text-decoration: underline;
text-underline-offset: 4px;
}
.service-media {
display: block;
position: relative;
}
.service-media img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
}
.service-media::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 45%;
background: linear-gradient(to top, rgba(7, 23, 44, .55), rgba(7, 23, 44, 0));
pointer-events: none;
}
.service-body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: 1.5rem;
}
.service-num {
display: block;
margin-bottom: .5rem;
font-family: 'Roboto Slab', Georgia, serif;
font-size: .95rem;
letter-spacing: .08em;
color: var(--primary-alt);
}
.service-text {
font-size: .95rem;
line-height: 1.6;
}
.service-card .arrow-link {
margin-top: auto;
color: var(--primary-alt);
}
.service-card:hover .arrow-link i {
transform: translateX(4px);
}
/* ==== places marquee: big type drifting through the neighborhoods and cities (band colour is bg-light in the markup) ==== */
.scout-marquee {
overflow: hidden;
margin-top: 1.25rem;
-webkit-mask-image: linear-gradient(to right, transparent, black 7%, black 93%, transparent);
mask-image: linear-gradient(to right, transparent, black 7%, black 93%, transparent);
}
/* two identical lists on one track moved by exactly half its width, so the loop never shows a seam */
.scout-marquee-track {
display: flex;
flex-wrap: nowrap;
width: max-content;
}
.scout-places {
display: flex;
flex: 0 0 auto;
flex-wrap: nowrap;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
}
.scout-places li {
display: inline-flex;
align-items: center;
white-space: nowrap;
font-family: 'Roboto Slab', Georgia, serif;
font-weight: 700;
font-size: clamp(30px, 4.6vw, 62px);
line-height: 1.2;
color: var(--primary);
}
/* every other place in dark instead of navy; done here rather than with text-dark on each li so the alternation survives reordering the list */
.scout-places li:nth-child(even) {
color: var(--dark);
}
.scout-places li::after {
content: "";
flex: none;
width: .2em;
height: .2em;
margin: 0 .6em;
background: var(--primary-alt);
transform: rotate(45deg);
}
@media (prefers-reduced-motion: no-preference) {
.scout-marquee-track {
animation: scoutMarquee 120s linear infinite;
}
}
@media (prefers-reduced-motion: reduce) {
.scout-marquee {
-webkit-mask-image: none;
mask-image: none;
}
.scout-marquee-track {
display: block;
width: auto;
}
.scout-places {
flex-wrap: wrap;
justify-content: center;
padding: 0 15px;
}
.scout-places li {
font-size: clamp(20px, 2.6vw, 30px);
}
.scout-places[aria-hidden="true"] {
display: none;
}
}
@keyframes scoutMarquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ==== territory rail ==== */
.scout-rail {
display: flex;
gap: 1rem;
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
padding: .25rem .25rem 1rem;
scrollbar-width: none;
cursor: grab;
}
.scout-rail::-webkit-scrollbar {
display: none;
}
.scout-rail.dragging {
cursor: grabbing;
scroll-snap-type: none;
}
.scout-rail img {
pointer-events: none;
}
.rail-tile {
flex: 0 0 auto;
width: 258px;
scroll-snap-align: start;
position: relative;
display: block;
}
@media (max-width: 575px) {
.rail-tile {
width: 74vw;
}
}
.rail-tile .tile-media {
display: block;
}
.rail-tile .tile-media img {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
display: block;
}
.rail-tile .tile-scrim {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(to top, rgba(8, 22, 44, .8) 0%, rgba(8, 22, 44, .05) 55%);
transition: background-color .14s linear;
}
.rail-tile:hover .tile-scrim {
background-color: rgba(8, 22, 44, .18);
}
.rail-tile .tile-cap {
position: absolute;
left: 1.1rem;
right: 1.1rem;
bottom: 1.1rem;
}
.bearing {
display: inline-flex;
align-items: center;
gap: .45rem;
font-size: .66rem;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--primary-alt);
}
.rail-tile.tile-cta {
background: var(--primary);
}
.rail-tile.tile-cta .tile-inner {
aspect-ratio: 3 / 4;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 1.25rem;
}
/* ==== about: Andy, with a soft sky bloom behind the portrait ==== */
.scout-about {
position: relative;
overflow: hidden;
}
.scout-about::before {
content: "";
position: absolute;
top: 50%;
left: -20%;
width: 70vw;
max-width: 820px;
aspect-ratio: 1 / 1;
transform: translateY(-50%);
background: radial-gradient(circle, rgba(114, 203, 250, .2) 0%, rgba(114, 203, 250, 0) 66%);
pointer-events: none;
}
.scout-about .container {
position: relative;
z-index: 1;
}
.img-frame {
position: relative;
display: block;
box-shadow: 16px 16px 0 rgba(114, 203, 250, .38);
}
.img-frame img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
}
/* stacked layouts: keep the portrait from growing into a full-width square */
@media (max-width: 991px) {
.img-frame {
max-width: 440px;
}
}
.frame-badge {
position: absolute;
left: 1rem;
bottom: 1rem;
padding: .75rem 1.1rem;
background: rgba(14, 45, 88, .74);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border-left: 3px solid var(--primary-alt);
}
.scout-stats {
border-top: 1px solid rgba(14, 45, 88, .12);
border-bottom: 1px solid rgba(14, 45, 88, .12);
}
/* .no-gutters in the markup is kept for flush outer edges, but it zeroes column padding at higher specificity, so these rules repeat it to win */
.scout-stats.no-gutters > div {
padding: 1rem .5rem 1rem 0;
}
.scout-stats.no-gutters > div + div {
padding-left: .75rem;
border-left: 1px solid rgba(14, 45, 88, .12);
}
@media (min-width: 576px) {
.scout-stats.no-gutters > div + div {
padding-left: 1.5rem;
}
}
.stat-num {
display: block;
font-family: 'Roboto Slab', Georgia, serif;
font-weight: 700;
font-size: clamp(22px, 2.6vw, 34px);
line-height: 1.1;
color: var(--primary);
}
.stat-label {
display: block;
margin-top: .35rem;
font-size: .68rem;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: #6c757d;
}
/* ==== client stories ==== */
.scout-stories {
position: relative;
background-color: #fff;
background-image:
radial-gradient(ellipse 70% 45% at 50% 0%, rgba(114, 203, 250, .2), rgba(114, 203, 250, 0) 70%),
linear-gradient(180deg, rgba(114, 203, 250, .04) 0%, rgba(114, 203, 250, .12) 100%);
}
.story-card {
position: relative;
padding: 1.75rem;
background-color: #fff;
border: 1px solid rgba(14, 45, 88, .1);
box-shadow: 0 18px 40px -28px rgba(14, 45, 88, .4);
}
.story-feature {
overflow: hidden;
padding: 2rem;
color: rgba(255, 255, 255, .8);
background-color: var(--primary);
border-color: var(--primary);
}
@media (min-width: 992px) {
.story-feature {
padding: 2.75rem;
}
}
.story-feature::before {
opacity: .12;
}
.story-feature > * {
position: relative;
z-index: 1;
}
.story-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin-bottom: 1.25rem;
border-radius: 50%;
color: var(--primary-alt);
background: rgba(114, 203, 250, .16);
}
.story-icon {
color: var(--primary-alt);
font-size: 1.25rem;
}
.story-quote {
margin: 0 0 1.25rem;
font-size: 1rem;
line-height: 1.7;
color: rgba(20, 30, 44, .85);
}
.story-feature .story-quote {
font-family: 'Roboto Slab', Georgia, serif;
font-size: clamp(19px, 2vw, 24px);
line-height: 1.55;
color: #fff;
}
.story-facts {
gap: .6rem;
}
.story-fact {
display: inline-flex;
align-items: baseline;
gap: .45rem;
padding: .45rem .85rem;
font-size: .8rem;
color: rgba(255, 255, 255, .85);
background: rgba(114, 203, 250, .1);
border: 1px solid rgba(114, 203, 250, .35);
}
.story-fact strong {
font-family: 'Roboto Slab', Georgia, serif;
font-size: 1.05rem;
color: var(--primary-alt);
}
/* ==== cta band: photo bg + navy wash + sky bloom ==== */
.scout-cta {
position: relative;
background-image: url('https://images.unsplash.com/photo-1746118964941-2bdf8a23f69c?auto=format&fit=crop&w=1800&q=75');
background-size: cover;
background-position: center;
}
.scout-cta::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(14, 45, 88, .6);
}
.scout-cta::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: radial-gradient(ellipse 75% 60% at 50% 0%, rgba(114, 203, 250, .32), rgba(114, 203, 250, 0) 68%);
}
.scout-cta .container {
position: relative;
z-index: 1;
}
/* ==== field notes ==== */
.note-card {
display: block;
}
.note-card img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
display: block;
}
.note-card .note-title {
color: rgba(20, 30, 44, .9);
transition: color .14s linear;
}
.note-card:hover {
text-decoration: none;
}
.note-card:hover .note-title {
color: var(--primary);
text-decoration: underline;
text-underline-offset: 4px;
}
/* ==== sub hero: inner page heading (Blog, Contact) on the home carousel's skyline slide ==== */
/* height follows the copy with a floor, so long headings never overflow on phones */
.scout-subhero {
position: relative;
overflow: hidden;
display: flex;
align-items: flex-end;
min-height: 300px;
padding: 4rem 0 3.25rem;
background-color: var(--primary);
}
@media (min-width: 768px) {
.scout-subhero {
min-height: 380px;
padding: 5rem 0 4rem;
}
}
@media (min-width: 1200px) {
.scout-subhero {
min-height: 440px;
}
}
.scout-subhero > .container {
position: relative;
z-index: 2;
}
.scout-subhero .subhero-media {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
background-position: center 60%;
}
.scout-subhero .subhero-scrim {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background:
linear-gradient(to top, rgba(8, 22, 44, .78) 0%, rgba(8, 22, 44, .2) 60%, rgba(8, 22, 44, .3) 100%),
linear-gradient(to right, rgba(8, 22, 44, .7) 0%, rgba(8, 22, 44, .3) 55%, rgba(8, 22, 44, .05) 100%);
}
/* sky rule along the bottom edge, fading out to the right */
.scout-subhero::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
height: 3px;
background: linear-gradient(90deg, var(--primary-alt) 0%, rgba(114, 203, 250, .35) 45%, rgba(114, 203, 250, 0) 100%);
}
.scout-subhero h1,
.scout-subhero .subhero-lead {
text-shadow: 0 1px 16px rgba(8, 22, 44, .45);
}
.scout-subhero .subhero-lead {
max-width: 40rem;
}
.scout-subhero .eyebrow a:hover {
color: var(--primary-alt) !important;
text-decoration: none;
}
.scout-subhero .coords {
position: absolute;
right: 1.5rem;
bottom: 1.4rem;
z-index: 2;
opacity: .85;
}
/* ==== contact: the message form, the navy panel of direct lines beside it and the office map ==== */
/* the form markup is rendered by the CUSTFORM shortcode, so every rule below hangs off the platform's own form classes */
.scout-form {
padding: 1.5rem;
background: #fff;
border: 1px solid rgba(14, 45, 88, .12);
border-top: 3px solid var(--primary-alt);
box-shadow: 0 24px 48px -34px rgba(14, 45, 88, .5);
}
@media (min-width: 768px) {
.scout-form {
padding: 2.25rem;
}
}
.scout-form .form-group label {
font-size: .74rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--primary);
margin-bottom: .45rem;
}
.scout-form .formbuilder-required {
margin-left: .2rem;
color: var(--primary-alt);
}
.scout-form .form-control {
height: auto;
padding: .8rem 1rem;
font-size: .95rem;
color: var(--dark);
background-color: #fff;
border: 1px solid rgba(14, 45, 88, .18);
border-radius: 0;
box-shadow: none;
transition: border-color .14s linear, box-shadow .14s linear;
}
.scout-form .form-control::placeholder {
color: rgba(34, 34, 34, .45);
}
.scout-form .form-control:focus {
border-color: var(--primary-alt);
box-shadow: 0 0 0 3px rgba(114, 203, 250, .3);
}
.scout-form textarea.form-control {
min-height: 9rem;
}
/* md and up: email, first, last and phone pair off two to a line so the form runs shorter. Each field ships in its own .fs2-row, so the wrap becomes the flex container and the rows are picked out by field name; a browser without :has() drops only that rule and keeps the fields stacked */
@media (min-width: 768px) {
.scout-form .fs2-wrap {
display: flex;
flex-wrap: wrap;
}
.scout-form .fs2-wrap > .fs2-row {
flex: 0 0 100%;
max-width: 100%;
}
.scout-form .fs2-wrap > .fs2-row:has(.field-EMAILADDRESS),
.scout-form .fs2-wrap > .fs2-row:has(.field-FIRSTNAME),
.scout-form .fs2-wrap > .fs2-row:has(.field-LASTNAME),
.scout-form .fs2-wrap > .fs2-row:has(.field-PHONENUMBER) {
flex: 0 0 50%;
max-width: 50%;
}
}
/* the captcha ships as two form-control boxes: the number strip shrinks to its digits, the answer stays a field */
.scout-form .oms-captcha .form-control.text-center {
display: inline-block;
width: auto;
padding: .45rem .8rem;
background-color: var(--light);
}
/* the #savecontent img rule at the top of this file forces height auto, so the digits need that specificity to shrink */
#savecontent .scout-form .oms-captcha img {
height: 26px !important;
width: auto;
}
.scout-form .oms-captcha input {
max-width: 22rem;
}
.scout-form button[name="submitForm"] {
margin-top: 1.25rem;
}
@media (max-width: 575px) {
.scout-form button[name="submitForm"] {
width: 100%;
}
}
/* lg and up, where the page is two columns: the direct lines ride along as the taller form scrolls past. align-self stops the flex column stretching to the row height, which would leave sticky no room to move, and the offset clears the fixed-top nav (js.js measures it into --omsnav-h) */
@media (min-width: 992px) {
.contact-aside {
position: sticky;
top: calc(var(--omsnav-h, 100px) + 1.5rem);
align-self: flex-start;
}
}
/* navy panel: phone, email, office and fax, each one a row that lights up only where it is a link */
.contact-panel {
padding: 1.5rem;
color: rgba(255, 255, 255, .78);
background-color: var(--primary);
background-image: radial-gradient(ellipse 70% 55% at 85% 0%, rgba(114, 203, 250, .18), rgba(114, 203, 250, 0) 70%);
}
@media (min-width: 768px) {
.contact-panel {
padding: 1.75rem;
}
}
.contact-line {
display: flex;
align-items: center;
padding: .85rem 0;
border-top: 1px solid rgba(255, 255, 255, .14);
}
.contact-line:first-of-type {
border-top: 0;
padding-top: .25rem;
}
.contact-line:last-of-type {
padding-bottom: .25rem;
}
.contact-icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.6rem;
height: 2.6rem;
margin-right: 1rem;
color: var(--primary-alt);
background: rgba(114, 203, 250, .14);
transition: background-color .14s linear, color .14s linear;
}
.contact-label {
display: block;
margin-bottom: .15rem;
color: rgba(255, 255, 255, .6);
}
.contact-value {
display: block;
font-family: 'Roboto Slab', Georgia, serif;
font-size: 1.02rem;
line-height: 1.35;
color: #fff;
}
a.contact-line:hover {
text-decoration: none;
}
a.contact-line:hover .contact-icon {
color: var(--primary);
background: var(--primary-alt);
}
a.contact-line:hover .contact-value {
text-decoration: underline;
text-underline-offset: 3px;
}
/* what happens next: numbered steps under the panel */
.next-steps li {
display: flex;
align-items: flex-start;
padding: .55rem 0;
}
.next-steps .step-num {
flex: 0 0 auto;
width: 2.25rem;
font-family: 'Roboto Slab', Georgia, serif;
font-size: .95rem;
color: var(--primary);
}
.next-steps .step-text {
flex: 1 1 auto;
font-size: .95rem;
line-height: 1.6;
color: rgba(34, 34, 34, .75);
}
/* office map: framed like a card, with the sky rule along its top edge */
.map-frame {
position: relative;
background: #fff;
border: 1px solid rgba(14, 45, 88, .12);
box-shadow: 0 26px 52px -34px rgba(14, 45, 88, .55);
}
.map-frame::before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 1;
height: 3px;
background: linear-gradient(90deg, var(--primary-alt) 0%, rgba(114, 203, 250, .35) 45%, rgba(114, 203, 250, 0) 100%);
}
.map-frame iframe {
display: block;
width: 100%;
aspect-ratio: 16 / 7;
min-height: 320px;
border: 0;
}
.ps-wrap .ps-top, .ps-wrap .ps-bar {
display: none !important;
}
/* PAGE SPECIFIC */
/* FOOTER */