/* Blue palette: dark blue structure, light blue actions and cool blue surfaces. */
:root{--sf-navy:#102f55;--sf-blue:#9ed5f5;--sf-blue-hover:#b9e4ff;--sf-blue-ink:#215d8b;--sf-surface:#f0f7fd}
.bg-accent{background-color:var(--sf-blue);color:var(--sf-navy)}
.bg-accent :is(p,h1,h2,h3),.bg-accent a:not(.bg-brand){color:var(--sf-navy)}
.bg-accent .bg-brand{color:#fff}
.bg-accent a.border-2{border-color:#426b91}
.hover\:bg-accent-dark:hover{background-color:var(--sf-blue-hover);color:var(--sf-navy)}
.text-accent,.hover\:text-accent:hover,.group:hover .group-hover\:text-accent{color:var(--sf-blue-ink)}
.bg-brand .text-accent,.bg-brand .hover\:text-accent:hover{color:#b9e1fa}
#home-hero .bg-accent{background:var(--sf-blue);color:var(--sf-navy)}
#home-hero .bg-accent:hover{background:var(--sf-blue-hover)}
.text-green-500,.text-green-600,.text-green-700,.text-emerald-600{color:var(--sf-blue-ink)}
.bg-green-50,.bg-green-100,.bg-emerald-50{background:#e4f2fc}
.border-green-200,.border-green-300{border-color:#b8d9ef}
.text-success{color:var(--sf-blue-ink)}
.bg-success\/10{background-color:#e4f2fc}
/* Render real content immediately rather than reserving empty 600px sections. */
.cv-auto{content-visibility:visible;contain-intrinsic-size:none}
/* Keep full before/after compositions visible with a predictable frame. */
.sf-project-image{display:block;width:100%;height:auto;aspect-ratio:56/75;object-fit:cover;object-position:center}
/* The room photos fill their row; no unused third column. */
.sf-showcase-grid{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch}
.sf-floor-card{min-width:0;display:flex;flex-direction:column}
.sf-image-frame{position:relative;min-width:0;aspect-ratio:4/3;overflow:hidden}
.sf-image-frame>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.sf-showcase-grid--1>.sf-floor-card{display:grid;grid-template-columns:minmax(0,1fr)}
/* Five swatches form one complete desktop row; smaller rows stay centered. */
.sf-swatch-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.sf-swatch-grid>.sf-floor-card{flex:0 0 calc((100% - 16px)/2)}
@media(min-width:768px){
 .sf-showcase-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sf-showcase-grid--1>.sf-floor-card{grid-template-columns:repeat(2,minmax(0,1fr));align-items:center}
 .sf-showcase-grid--1>.sf-floor-card>.sf-image-frame{height:100%;min-height:320px}
 .sf-showcase-grid--1>.sf-floor-card>div:last-child{padding:36px}
 .sf-swatch-grid{gap:24px}
 .sf-swatch-grid>.sf-floor-card{flex-basis:calc((100% - 48px)/3)}
 .sf-project-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
 .sf-project-grid>div{grid-column:span 2}
 .sf-project-grid>div:nth-last-child(-n+2){grid-column:span 3}
}
@media(min-width:1100px){
 .sf-swatch-grid--4>.sf-floor-card{flex-basis:calc((100% - 72px)/4)}
 .sf-swatch-grid--5>.sf-floor-card{flex-basis:calc((100% - 96px)/5)}
}
/* Use the menu before the full navigation becomes cramped. */
@media(max-width:1279px){
 header nav>div.hidden{display:none}
 header nav>button[data-menu]{display:block}
}
@media(min-width:1280px){.sf-mobile-nav{display:none}}
/* Match the hero's 16px tablet gutter instead of its 24px phone gutter. */
@media(min-width:768px) and (max-width:1023px){
 #home-hero [class~="-mx-6"]{margin-left:-16px;margin-right:-16px}
}
@media(max-width:767px){
 #home-hero a[href="/beat-any-quote/"]{display:block;line-height:1.65}
}
.sf-mobile-nav .sf-mobile-estimate{color:var(--sf-navy)}