.spr-search-intro{
–spr-navy:#344A60;
–spr-cream:#F6F3EF;
–spr-white:#ffffff;
–spr-gold:#a9834b;
–spr-red:#b0393a;
–spr-stone:#6d685f;
width:100%;
background:var(–spr-cream);
font-family:”Inter”, Arial, sans-serif;
color:var(–spr-navy);
box-sizing:border-box;
}
.spr-search-intro *{
box-sizing:border-box;
}
/* SP RHODES signature tricolor line */
.spr-search-intro__ribbon{
display:grid;
grid-template-columns:1fr 1fr 1fr;
width:100%;
height:4px;
}
.spr-search-intro__ribbon span:nth-child(1){
background:var(–spr-navy);
}
.spr-search-intro__ribbon span:nth-child(2){
background:#ffffff;
}
.spr-search-intro__ribbon span:nth-child(3){
background:var(–spr-red);
}
/* Main content */
.spr-search-intro__inner{
max-width:1400px;
margin:0 auto;
padding:64px 32px 48px;
}
/* Small label */
.spr-search-intro__eyebrow{
display:flex;
align-items:center;
gap:12px;
margin:0 0 20px;
font-size:11px;
line-height:1;
font-weight:700;
letter-spacing:.22em;
text-transform:uppercase;
color:var(–spr-navy);
}
/* Tiny French-inspired brand marker */
.spr-search-intro__flag{
width:20px;
height:12px;
flex:none;
background:
linear-gradient(
90deg,
var(–spr-navy) 0 33.33%,
#ffffff 33.33% 66.66%,
var(–spr-red) 66.66% 100%
);
border:1px solid rgba(52,74,96,.16);
}
/* Main heading */
.spr-search-intro__title{
margin:0;
font-size:clamp(32px,4vw,54px);
line-height:1.08;
font-weight:300;
letter-spacing:.01em;
text-transform:uppercase;
color:var(–spr-navy);
}
/* Search query */
.spr-search-intro__query{
display:block;
margin-top:6px;
font-weight:500;
text-transform:none;
overflow-wrap:anywhere;
}
/* Saddle stitch */
.spr-search-intro__stitch{
width:130px;
height:2px;
margin:28px 0 24px;
background-image:
repeating-linear-gradient(
90deg,
var(–spr-gold) 0 9px,
transparent 9px 17px
);
}
/* Supporting copy */
.spr-search-intro__copy{
max-width:650px;
margin:0;
color:var(–spr-stone);
font-size:14px;
line-height:1.75;
font-weight:400;
}
/* Bottom separator */
.spr-search-intro__rule{
width:100%;
height:1px;
margin-top:42px;
background:rgba(52,74,96,.14);
}
/* Mobile */
@media(max-width:767px){
.spr-search-intro__inner{
padding:44px 20px 34px;
}
.spr-search-intro__title{
font-size:32px;
}
.spr-search-intro__copy{
font-size:13.5px;
}
.spr-search-intro__rule{
margin-top:32px;
}
}