/* ============================================================
   Buildery Kitchen & Bath — DAYLIGHT design system
   Shared stylesheet for all page mockups (home, kitchens,
   bathrooms, portfolio). Extracted from the winning concept in
   buildery-kb-concepts.html; the other five concepts removed.
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: "Sora", system-ui, sans-serif; }
img { display: block; max-width: 100%; }
.bgimg { background-size: cover; background-position: center; }

/* ---------- scroll-reveal (enhances an already-visible default) ---------- */
.js-motion [data-reveal] { opacity: 0; transform: translateY(24px);
  transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); transition-delay: var(--d,0ms); }
.js-motion [data-reveal].is-in { opacity: 1; transform: none; }
.js-motion [data-reveal-img] { clip-path: inset(0 0 14% 0); opacity:.001;
  transition: clip-path 1.15s cubic-bezier(.16,1,.3,1), opacity 1.15s ease; transition-delay: var(--d,0ms); }
.js-motion [data-reveal-img].is-in { clip-path: inset(0 0 0 0); opacity: 1; }
.js-motion [data-line] { transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.16,1,.3,1); transition-delay: var(--d,0ms); }
.js-motion [data-line].is-in { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .js-motion [data-reveal],.js-motion [data-reveal-img],.js-motion [data-line] { opacity:1!important; transform:none!important; clip-path:none!important; transition:none!important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   DAYLIGHT — airy, soft, warm-modern (Sora + sage/peach)
   ============================================================ */
.c-day { --bg:#fbf9f3; --bg2:#f1f1e7; --ink:#26302a; --inkSoft:#566057; --sage:#7d9a72; --sageD:#5f7d56; --peach:#e3a279; --line:#e4e6da; --white:#ffffff;
  background:var(--bg); color:var(--ink); font-family:"Sora", system-ui, sans-serif; min-height:100vh; }
.c-day .disp { font-family:"Sora", sans-serif; font-weight:700; line-height:1.05; letter-spacing:-.025em; }
.c-day .kick { font-family:"Sora",sans-serif; font-weight:600; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--sageD); }
.c-day .btn { font-family:"Sora",sans-serif; font-weight:600; font-size:.9rem; padding:.95rem 1.7rem; border-radius:14px; display:inline-flex; align-items:center; gap:.55rem; cursor:pointer; text-decoration:none; transition:transform .2s cubic-bezier(.16,1,.3,1), background-color .2s; }
.c-day .btn-solid { background:var(--sageD); color:#fff; }
.c-day .btn-solid:hover { transform:translateY(-2px); background:#52704a; }
.c-day .btn-ghost { background:transparent; color:var(--ink); border:1px solid rgba(38,48,42,.25); }
.c-day .btn-ghost:hover { background:rgba(125,154,114,.12); border-color:var(--sageD); }
.c-day .softcard { background:var(--white); border-radius:26px; box-shadow:0 30px 60px -45px rgba(38,48,42,.5); }
.c-day .blob { position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; z-index:0; }
.js-motion .c-day .blob { animation:float 14s ease-in-out infinite; }
@keyframes float { 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(0,-26px) scale(1.06);} }
@media (prefers-reduced-motion: reduce){ .c-day .blob{ animation:none!important; } }
.c-day .imground { border-radius:26px; overflow:hidden; }
.c-day .zoom > *{ transition:transform 1s cubic-bezier(.16,1,.3,1);} .c-day .zoom:hover > *{ transform:scale(1.05);} .c-day .zoom{ overflow:hidden;}
.c-day .chip { background:var(--bg2); border-radius:999px; padding:.45rem 1rem; font-size:.82rem; font-weight:500; }
.c-day .lbl { display:block; font-size:.8rem; font-weight:600; color:var(--inkSoft); margin-bottom:.35rem; }
.c-day .field { margin-top:1rem; }
.c-day input, .c-day select, .c-day textarea { width:100%; padding:.7rem .9rem; border:1px solid var(--line); border-radius:12px; background:#fff; font-family:"Sora",sans-serif; font-size:.95rem; color:var(--ink); }
.c-day textarea { resize:vertical; }
.c-day input:focus, .c-day select:focus, .c-day textarea:focus { outline:none; border-color:var(--sageD); box-shadow:0 0 0 3px rgba(125,154,114,.18); }
.c-day .radio { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.15rem; }
.c-day .radio label { display:inline-flex; align-items:center; gap:.45rem; border:1px solid var(--line); border-radius:999px; padding:.5rem .9rem; font-weight:500; cursor:pointer; background:#fff; font-size:.85rem; margin:0; }
.c-day .radio input { width:auto; margin:0; accent-color:#5f7d56; }
.c-day .check-circle { width:52px; height:52px; border-radius:50%; background:var(--sageD); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin:0 auto; }

/* nav links (real pages, not anchors) */
.c-day .navlink { text-decoration:none; color:var(--inkSoft); font-weight:500; font-size:.92rem; padding-bottom:3px; border-bottom:2px solid transparent; transition:color .2s, border-color .2s; }
.c-day .navlink:hover { color:var(--ink); }
.c-day .navlink.is-active { color:var(--ink); font-weight:600; border-bottom-color:var(--sageD); }

/* before/after frame labels used on portfolio + project sections */
.c-day .balabel { position:absolute; top:12px; left:12px; z-index:2; background:rgba(38,48,42,.82); color:#fff;
  font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:.35rem .75rem; border-radius:999px; backdrop-filter:blur(4px); }
.c-day .balabel.after { background:rgba(95,125,86,.92); }
.c-day .balabel.render { background:rgba(227,162,121,.94); color:#26302a; }