/* Light "cream" theme. Loaded after the other stylesheets; remove its link to return to the dark theme.
   The hero video, the closing image band and text over photos stay light-on-dark on purpose. */
:root{
  --canvas:#F8F6F1;
  --band:#EEE9DF;
  --panel:#F3EFE7;
  --panel-2:#ECE6DB;
  --accent:#7A6440;          /* sand, darkened enough to read on cream */
  --accent-hover:#5F4D30;
  --accent-muted:rgba(122,100,64,.28);
  --heading:#5C422D;
  --text-primary:#2B2622;
  --text-secondary:#6B645B;
  --line:rgba(43,38,34,.12);
  --line-strong:rgba(43,38,34,.30);
  --ink:#262420;             /* dark buttons */
  --on-photo:#F3F0EA;        /* text over photos and video */
}
body{background:var(--canvas)}
h1,h2{color:var(--heading)}
.env::before{background:radial-gradient(40% 35% at 30% 30%,rgba(201,184,156,.10),transparent 70%)}
.env::after{opacity:.03}

/* alternating cream and beige bands, like the reference */
#main > section.s:nth-of-type(even){background:var(--band)}

/* buttons: dark ink with cream text, outline buttons in ink */
.btn-primary{background:var(--ink);color:var(--canvas)}
.btn-primary:hover{background:#3A342E}
.btn-ghost{color:var(--text-primary);border-color:var(--line-strong);background:transparent}
.btn-ghost:hover{border-color:var(--text-primary)}

/* nav: a dark bar, same ink as the footer, so the original sand logo keeps its full contrast */
.nav{background:rgba(27,26,23,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(201,184,156,.14)}
.nav::before{display:none}
.nav.solid{background:rgba(27,26,23,.98)}
.nav ul a:not(.btn){color:#C9C2B6}
.nav ul a:not(.btn):hover,.nav ul a[aria-current="page"]{color:#F3F0EA}
.nav ul a[aria-current="page"]{border-bottom-color:#C9B89C}
.nav .btn-primary{background:#C9B89C;color:#1B1A17}
.nav .btn-primary:hover{background:#DACBB2}
.menu-btn{background:transparent;color:#F3F0EA;border-color:rgba(243,240,234,.4)}
@media (max-width:900px){.nav ul{background:#1B1A17}.nav ul a:not(.btn){color:#F3F0EA}}

/* everything that sits on a photo or the video keeps light text */
.stage,.static-hero,.cta-band,.tile .cap,.ftile,.pn-text,.view .vcap{color:var(--on-photo)}
.stage h1,.stage h2,.static-hero h1,.cta-band h2,.tile .cap b,.fcap b,.pn-text b{color:var(--on-photo)}
.cta-band .btn-primary,.stage .btn-primary,.static-hero .btn-primary{background:#C9B89C;color:#1B1A17}
.cta-band .btn-primary:hover,.stage .btn-primary:hover,.static-hero .btn-primary:hover{background:#DACBB2}
.cta-band .btn-ghost,.stage .btn-ghost{color:var(--on-photo);border-color:rgba(243,240,234,.5);background:rgba(20,18,16,.25)}
.band .kick,.static-hero .kicker,.cta-band .kicker{color:#C9B89C}
.tile .cap i,.fcap i{color:#E4DDD1}
.pn-text .mono{color:#E4DDD1}
.farrow{border-color:#C9B89C;color:#C9B89C}
.ftile:hover .farrow{background:#C9B89C;color:#1B1A17}
.view .vcap{color:var(--on-photo)}
dialog.lb,.lb button,.hud{color:var(--on-photo)}

/* closing band: a bright living room, so a cream wash on the text side and ink text instead of light-on-dark */
.cta-band{background-color:#E9E3D8;background-position:65% center}
.cta-band::before{background:linear-gradient(90deg,rgba(248,246,241,.94) 0%,rgba(248,246,241,.82) 32%,rgba(248,246,241,.25) 58%,rgba(248,246,241,0) 75%)}
.cta-band,.cta-band h2{color:var(--heading)}
.cta-band .inner{text-shadow:none}
.cta-band p{color:var(--text-primary)}
.cta-band .btn-primary{background:var(--ink);color:var(--canvas)}
.cta-band .btn-primary:hover{background:#3A342E}
.cta-band .btn-ghost{color:var(--text-primary);border-color:var(--line-strong);background:rgba(248,246,241,.5)}
.cta-band .btn-ghost:hover{border-color:var(--text-primary)}
/* on phones a crop shows only ceiling, so the whole image sits on top and the text follows on cream */
@media (max-width:720px){
  .cta-band{min-height:0;background-color:var(--band);background-size:100% auto;background-position:top center;padding-top:calc(67.5vw + 36px)}
  .cta-band::before{background:linear-gradient(180deg,rgba(238,233,223,0) 0,rgba(238,233,223,0) calc(67.5vw - 70px),var(--band) 67.5vw)}
}

/* filters and switchers */
.filters button[aria-pressed="true"]{color:var(--canvas);background:var(--ink);border-color:var(--ink)}
.light-btns button[aria-pressed="true"]{color:var(--canvas);background:var(--ink);border-color:var(--ink)}

/* forms */
input,select,textarea{background:#FFFDF9;border-color:var(--line-strong);color:var(--text-primary)}
input:focus,select:focus,textarea:focus{background:#FFFFFF;border-color:var(--accent)}
.types label{border-color:var(--line-strong)}
.types input{accent-color:var(--ink)}

/* cards and quotes */
.rev,.pr-list li,.req-side .box,.pn-card{background:var(--panel);border-color:var(--line)}
#main > section.s:nth-of-type(even) .rev,#main > section.s:nth-of-type(even) .pr-list li{background:var(--canvas)}

/* WhatsApp: ink pill with sand icon, same as the buttons */
.wa{background:var(--ink);border-color:var(--ink);color:#C9B89C}
.wa:hover{background:#C9B89C;color:#1B1A17}

/* footer stays dark, like the reference */
footer{background:#1B1A17;color:#B9B2A7;border-top:0}
footer h3{color:#C9B89C}
footer a:hover{color:#F3F0EA}
footer .base{border-top-color:rgba(243,240,234,.12)}

/* no dark moment while the hero's first frame loads: the stage starts at that frame's average color */
html{background:var(--canvas)}
.stage{background:#665A4F}