/* One Home Interiors — shared styles for the static (SEO) site.
   Hover states + responsive behaviour that inline styles can't express. */

html { scroll-behavior:smooth; }
body { margin:0; background:#000; color:#EFECE4; -webkit-font-smoothing:antialiased;
  font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif; overflow-x:hidden; }
h1,h2,h3,.serif { font-family:'Spectral',Georgia,serif; }
img { max-width:100%; }
::selection { background:rgba(195,154,78,.32); }
::placeholder { color:rgba(239,236,228,.4); }
a { color:#C39A4E; }
a:hover { color:#EFECE4; }

/* keyframes */
@keyframes ohi-marquee { from{transform:translateX(0);} to{transform:translateX(-50%);} }
@keyframes ohiHero { 0%{opacity:0} 4%{opacity:1} 19%{opacity:1} 23%{opacity:0} 100%{opacity:0} }

/* nav */
.nav { position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center;
  justify-content:space-between; padding:16px 44px; border-bottom:1px solid transparent;
  transition:background .4s ease, border-color .4s ease; }
.nav-links { display:flex; gap:32px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.navlink { color:rgba(239,236,228,.62); text-decoration:none; }
.navlink:hover { color:#EFECE4; }
.navlink.active { color:#EFECE4; border-bottom:1px solid #C39A4E; padding-bottom:3px; }
.nav-cta { display:inline-flex; align-items:center; gap:8px; padding:11px 20px; background:#EFECE4;
  color:#000; text-decoration:none; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.nav-cta:hover { background:#C39A4E; color:#EFECE4; }
.nav-burger { display:none; background:none; border:0; font-size:24px; line-height:1; color:#EFECE4; cursor:pointer; }
.nav-toggle { position:absolute; opacity:0; pointer-events:none; }

/* buttons + links */
.btn-solid { display:inline-flex; align-items:center; gap:10px; padding:17px 30px; background:#EFECE4;
  color:#000; text-decoration:none; font-size:14px; font-weight:600; }
.btn-solid:hover { background:#C39A4E; color:#EFECE4; }
.btn-ghost { display:inline-flex; align-items:center; gap:10px; padding:17px 30px; background:transparent;
  color:#EFECE4; text-decoration:none; font-size:14px; font-weight:600; border:1px solid rgba(239,236,228,.4); }
.btn-ghost:hover { border-color:#EFECE4; color:#EFECE4; }
.btn-dark { display:inline-flex; align-items:center; gap:10px; padding:18px 34px; background:#000;
  color:#EFECE4; text-decoration:none; font-size:15px; font-weight:600; }
.btn-dark:hover { background:#C39A4E; color:#EFECE4; }
.lk { text-decoration:none; border-bottom:1px solid rgba(239,236,228,.3); padding-bottom:5px; }
.lk:hover { border-color:#C39A4E; }
.lk-dark { color:#000; border-bottom:1px solid rgba(0,0,0,.35); }
.lk-dark:hover { color:#000; border-color:#C39A4E; }
.foot-lk { color:rgba(239,236,228,.72); text-decoration:none; }
.foot-lk:hover { color:#EFECE4; }

/* project cards + service rows */
.proj img { transition:transform .8s cubic-bezier(.22,.61,.36,1); }
.proj:hover img { transform:scale(1.06); }
.svc-row { transition:background .25s ease; }
.svc-row:hover { background:rgba(239,236,228,.03); }
.svc-row-dark:hover { background:rgba(0,0,0,.03); }

/* form */
.fld { background:transparent; border:none; border-bottom:1px solid rgba(239,236,228,.25);
  padding:11px 0; color:#EFECE4; font-size:16px; font-family:inherit; outline:none; }
.fld:focus { border-color:#C39A4E; }
select.fld { background:#000; }

/* price calculator */
.pchip { display:inline-flex; align-items:center; padding:8px 14px; border:1px solid rgba(0,0,0,.16); background:#fff; color:#1E1E1E; font-size:12.5px; letter-spacing:.01em; cursor:pointer; border-radius:100px; transition:all .16s ease; font-family:inherit; }
.pchip:hover { border-color:#C39A4E; }
.pchip.active { background:#000; border-color:#000; color:#EFECE4; }
.pstep-btn { width:30px; height:30px; flex:none; border:1px solid rgba(0,0,0,.16); background:#fff; color:#000; font-size:16px; line-height:1; cursor:pointer; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .15s ease; }
.pstep-btn:hover { border-color:#C39A4E; color:#C39A4E; }
.pqty { width:54px; text-align:center; border:1px solid rgba(0,0,0,.16); border-radius:8px; padding:6px 4px; font-size:14px; font-family:inherit; -moz-appearance:textfield; background:#fff; color:#000; }
.pqty::-webkit-outer-spin-button, .pqty::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
details.pcat { border-top:1px solid rgba(0,0,0,.14); }
details.pcat summary { cursor:pointer; list-style:none; }
details.pcat summary::-webkit-details-marker { display:none; }
details.pcat[open] > summary .pcat-chev { transform:rotate(180deg); }
.pcat-chev { transition:transform .25s ease; display:inline-block; }
.prow:hover { background:rgba(0,0,0,.025); }
.psum-line { animation:pfade .3s ease; }
@keyframes pfade { from{ opacity:0; transform:translateY(-4px);} to{ opacity:1; transform:none; } }
.ptotal.bump { animation:pbump .32s ease; }
@keyframes pbump { 0%{ transform:scale(1); } 42%{ transform:scale(1.045); } 100%{ transform:scale(1); } }
.pcta-wa { box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:16px; background:#000; color:#EFECE4; text-decoration:none; font-size:14px; font-weight:600; width:100%; }
.pcta-wa:hover { background:#C39A4E; color:#EFECE4; }
.pcta-ghost { box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:15px; border:1px solid rgba(0,0,0,.2); color:#000; text-decoration:none; font-size:13.5px; font-weight:600; width:100%; }
.pcta-ghost:hover { border-color:#C39A4E; color:#C39A4E; }

/* responsive — inline styles win over classes, so these use !important */
@media (max-width:860px) {
  .nav { padding:14px 20px; position:relative; flex-wrap:wrap; }
  .nav-burger { display:block; }
  .nav-cta { display:none; }
  .nav-links { position:absolute; top:100%; left:0; right:0; flex-direction:column !important;
    gap:0 !important; background:rgba(0,0,0,.97); max-height:0; overflow:hidden;
    transition:max-height .35s ease; }
  .nav-toggle:checked ~ .nav-links { max-height:60vh; }
  .nav-links a { padding:17px 22px; border-bottom:1px solid rgba(239,236,228,.12); }
  .navlink.active { border-bottom:1px solid rgba(239,236,228,.12); padding-bottom:17px; }

  .sec { padding-left:22px !important; padding-right:22px !important; }
  .pad-y { padding-top:74px !important; padding-bottom:74px !important; }
  .head-pad { padding:118px 22px 44px !important; }
  .g2, .g3, .g4 { grid-template-columns:1fr !important; gap:34px !important; }
  .g4 > div { border-right:none !important; border-bottom:1px solid rgba(0,0,0,.12); padding-bottom:26px; }
  .stats-3 { grid-template-columns:1fr !important; gap:38px !important; }
  .stats-3 > div { border-right:none !important; }
  .hide-sm { display:none !important; }
  .svc-sticky { position:static !important; }
}