/* Warm white canvas; brand pigments and photographic overlays stay expressive. */
:root {
  --bg: #faf9f6;
  --text: #242228;
  --muted: #68636d;
  --border: rgba(36,34,40,.13);
  color-scheme: light;
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible { outline-color: var(--red); }
.nav.scrolled { background: rgba(250,249,246,.88); }
nav a { color: #615d66; }
nav a:hover,nav a.active { color: var(--red); }
.nav-contact,.light { background: var(--red); color: #fff; }
.nav-contact:hover,.light:hover { background: #902632; }
.menu-toggle span { background: #242228; }
.nav nav.open { background: rgba(255,254,252,.97); box-shadow: 0 18px 50px #24222814; }
.hero { background: var(--bg); }
.hero-shade {
  background: linear-gradient(90deg,rgba(250,249,246,.55),transparent 63%),
    linear-gradient(0deg,#faf9f6 1%,transparent 25%,transparent 88%,rgba(250,249,246,.2));
}
.hero-eyebrow { color: #6c626b; }
.eyebrow-divider { color: #91878f; }
.hero-description { color: #655f69; }
.hero-bottom { color: #726a75; }
.scroll-circle { color: #242228; }
.hero-index { color: #817781; }
.paint-note { color: #736772; }
.motion-toggle { background: #fff9; color: #5e5663; }
.marquee { background: #f1efeb; }
.marquee span { color: #6d666e; }
.section-top .eyebrow { color: #6f646e; }
.small-note { color: #7d727c; }
.muted { color: #817781; }
.section-heading>p,.why-heading>p { color: #6a626e; }
.experience { background: linear-gradient(145deg,#e7eaf4,#f7f8fc); }
.plus { color: var(--blue); }
.experience p { color: #6d6574; }
.orbit { border-color: #2d3f7519; box-shadow: 0 0 0 22px #2d3f7505,0 0 0 45px #2d3f7505,0 0 0 70px #2d3f7503; }
.benefit { background: rgba(255,255,255,.75); }
.benefit .card-no { color: #8a7d8b; }
.benefit p { color: #706674; }
.benefit>a { color: var(--red); }
.project-card,.video-frame { color: #f1eee9; }
.project-tag { color: #fff; }
.project-caption h3,.project-caption b { color: #fff; }
.segment-number { color: #7d7181; }
.segment p { color: #716675; }
.segment:hover b { background: var(--red); color: white; }
.color-studio { background: #fff; box-shadow: 0 20px 65px #2d3f7506; }
.room-preview { background: #f0ede7; }
.room-tag { background: #ffffffb3; border-color: #fff8; color: #3c3442; }
.room-label { background: #fffdf3df; color: #2e2833; }
.room-label>span:last-child { color: #6b626f; }
#room-color-dot { border-color: #0002; }
.swatch-panel .eyebrow { color: #786b7f; }
.swatch { border-color: #0002; }
.swatch.selected:after { border-color: #504354; }
.selected-color>span:last-child { color: #77697e; }
.swatch-disclaimer { color: #74697a; }
.outline { border-color: #24222838; }
.outline:hover { background: #a9313c08; }
.calculator-copy>p:not(.eyebrow) { color: #706576; }
.formula { color: #7d7185; }
.formula span { color: #514357; }
.calculator-card { background: linear-gradient(130deg,#fff,#f3f1f7); border-color: #2d3f751a; box-shadow: 0 18px 55px #2d3f7508; }
.form-title>span { color: #73647d; }
.form-grid label { color: #635469; }
.form-grid label>span { color: #82728a; }
input,select { background: #fff; border-color: #2d3f7526; color: #302737; }
input:focus,select:focus { border-color: var(--red); }
.calculator-result>div>span { color: #776781; }
.calculator-result p>span { color: #6d5b79; }
.calculator-result strong { color: var(--blue); }
.area-pill { color: #6b5878; }
.calculator-note { color: #776882; }
.video-fallback { color: #73647e; }
.video-fallback a { color: var(--red); }
.tips-controls button:hover { background: #ece7f0; }
.tip-card { background: #fff; }
.tip-card:hover { border-color: #a9313c66; }
.tip-card>p { color: #7c6b86; }
.tip-card>div:last-child { color: #776580; }
.tip-card>div:last-child>span { color: var(--red); }
.tips-hint { color: #7c6b86; }
.closing { background: #f5f1f3; }
.closing-liquid { opacity: .26; }
.closing .eyebrow { color: #796174; }
.closing h2>span { color: var(--red); }
.closing p:not(.eyebrow) { color: #715d75; }
footer { background: var(--bg); }
.footer-main>div>p:not(.eyebrow) { color: #756879; }
.footer-main .eyebrow { color: #85758d; }
.footer-main a { color: #65546e; }
.footer-main a:hover { color: var(--red); }
.footer-bottom { color: #7f6d8a; }
.footer-bottom a { color: #675172; }
.floating-wa { background: var(--red); color: #fff; box-shadow: 0 5px 22px #a9313c30; }
.hero-art { position: absolute; width: min(43vw,660px); right: 2.5%; top: 50%; z-index: 1; pointer-events: none; transform: translateY(-50%) translate(var(--hero-x,0px),var(--hero-y,0px)); }
.hero-roller { position: relative; aspect-ratio: 1; animation: paintFloat 7s ease-in-out infinite alternate; }
.hero-art img { display: block; width: 100%; height: auto; }
#roller-drips { position: absolute; top: 0; left: 0; width: 100%; height: 119.617%; pointer-events: none; }
@keyframes paintFloat { from { transform: translateY(-6px) rotate(-.6deg); } to { transform: translateY(6px) rotate(.6deg); } }
.tip-art:before { display: none; }
.tip-art>img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s ease; }
.tip-card:hover .tip-art>img { transform: scale(1.05); }
.tip-art>span { font-size: 9px; letter-spacing: 1px; color: var(--red); background: #ffffffe6; padding: 7px 10px; border-radius: 20px; top: 14px; left: 14px; bottom: auto; right: auto; opacity: 1; }
.room-preview svg { width: 100%; height: 100%; }
.video-frame>img { object-position: center; filter: saturate(.85) brightness(.68); }
@media (min-width:761px) and (max-width:1100px) { .hero-art { width: 49vw; right: -4%; top: 49%; opacity: .94; } }
@media(max-width:760px) {
  .hero { height: 960px; }
  .hero-art { width: 88%; max-width: 380px; left: 50%; right: auto; top: auto; bottom: 78px; transform: translateX(-50%) translate(var(--hero-x,0px),var(--hero-y,0px)); }
  .hero-shade { background: linear-gradient(180deg,#faf9f633,transparent 55%,#faf9f6 98%),linear-gradient(90deg,#faf9f64d,transparent); }
}
.benefit { background: #fff; }
.benefit-art { position: absolute; top: 0; left: 0; right: 0; height: 190px; overflow: hidden; }
.benefit-art:after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg,#fff,transparent 38%); }
.benefit-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.benefit:hover .benefit-art img { transform: scale(1.045); }
.benefit .card-no { position: absolute; z-index: 1; top: 15px; left: 15px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #514551; background: #ffffffe6; border: 1px solid #ffffff80; }
.benefit h3 { margin-top: 170px; }
@media (min-width:761px) and (max-width:1100px) { .benefit-art { height: 185px; } .benefit h3 { margin-top: 160px; } }
@media(max-width:760px) { .benefit-art { height: 143px; } .benefit h3 { margin-top: 125px; } .benefit .card-no { top: 11px; left: 11px; width: 24px; height: 24px; } .bento .benefit { min-height: 285px; } }
@media(max-width:370px) { .benefit h3 { font-size: 15px; } }
@media(prefers-reduced-motion:reduce) { .hero-roller { animation: none; } .tip-card:hover .tip-art>img,.benefit:hover .benefit-art img { transform: none; } }