/* Jialux Interior — landing page styles */

/* ─────────────────────────  tokens  ───────────────────────── */
:root{
  --ink:#101010; --ink-2:#3a3835; --ink-3:#7c7871;
  --paper:#f6f3ee; --paper-2:#efeae2; --card:#fffdfa;
  --accent:#a97c50; --accent-d:#8c6440;
  --line:rgba(16,16,16,.09);
  --sh:0 1px 2px rgba(16,16,16,.04), 0 8px 24px -12px rgba(16,16,16,.18);
  --sh-l:0 2px 4px rgba(16,16,16,.05), 0 22px 48px -20px rgba(16,16,16,.30);
  --disp:"Instrument Serif",Georgia,serif;
  --sans:"Raleway",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --pad:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}   /* beats the explicit display on .pill-save / .dock */
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:400; font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.lock{overflow:hidden}
img{max-width:100%; display:block}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer}
a{color:inherit; text-decoration:none}
.ic{width:1em; height:1em; flex:none}
h1,h2,h3{font-family:var(--disp); font-weight:400; letter-spacing:-.02em; line-height:1.04; margin:0}
em{font-style:italic}

.eyebrow{
  font-size:11px; letter-spacing:.20em; text-transform:uppercase;
  color:var(--accent); font-weight:600; margin:0 0 22px;
}
.eyebrow.light{color:#c9a173}
.lede{max-width:60ch; color:var(--ink-2); font-weight:300; font-size:clamp(15px,1.5vw,17.5px)}
.lnk{
  color:var(--accent); font-size:13px; font-weight:500;
  text-decoration:underline; text-underline-offset:3px; padding:0;
}

/* ─────────────────────────  header  ───────────────────────── */
.bar{
  position:fixed; inset:0 0 auto; z-index:60; display:flex;
  align-items:center; justify-content:space-between; gap:16px;
  padding:14px var(--pad); transition:background .4s var(--ease), box-shadow .4s var(--ease);
}
.bar.solid{background:rgba(246,243,238,.88); backdrop-filter:blur(14px) saturate(1.4); box-shadow:0 1px 0 var(--line)}
.brand{display:flex; align-items:center; gap:11px; min-width:0}
.brand img{width:36px; height:auto; filter:grayscale(1) brightness(.4) contrast(3); opacity:.92}
.brand-tx{display:flex; flex-direction:column; line-height:1.15}
.brand-tx b{font-size:13px; letter-spacing:.22em; font-weight:600}
.brand-tx i{font-family:var(--disp); font-style:italic; font-size:13px; color:var(--ink-3)}
.bar-r{display:flex; align-items:center; gap:10px}
.pill-save{
  display:flex; align-items:center; gap:7px; padding:8px 14px; border-radius:100px;
  background:var(--card); box-shadow:var(--sh); font-size:13px; font-weight:500;
  color:var(--accent); transition:transform .25s var(--ease);
}
.pill-save:hover{transform:translateY(-1px)}
.pill-save.pop{animation:pop .45s var(--ease)}
@keyframes pop{40%{transform:scale(1.14)}}
.pill-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:100px; background:var(--ink); color:#fff;
  font-size:13px; font-weight:500; letter-spacing:.01em;
  transition:background .3s var(--ease), transform .25s var(--ease), color .3s var(--ease);
}
.pill-cta:hover{transform:translateY(-1px)}

/* ─────────────────────────  hero  ───────────────────────── */
.hero{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(28px,5vw,64px); align-items:center;
  padding:clamp(112px,15vh,180px) var(--pad) clamp(56px,8vh,96px);
  max-width:1560px; margin:0 auto;
}
.hero-tx{max-width:600px}
.hero h1{font-size:clamp(46px,7.4vw,96px); margin-bottom:26px}
.hero h1 em{color:var(--accent)}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin:34px 0 0}
.btn{
  display:inline-flex; align-items:center; gap:9px; padding:14px 28px; border-radius:100px;
  background:var(--ink); color:#fff; font-size:14px; font-weight:500;
  transition:background .3s var(--ease), transform .25s var(--ease), box-shadow .3s var(--ease);
}
.btn:hover{background:var(--accent); transform:translateY(-2px); box-shadow:var(--sh-l)}
.btn.light{background:var(--paper); color:var(--ink)}
.btn.light:hover{background:#fff}
.btn-ghost{
  display:inline-flex; align-items:center; padding:14px 24px; border-radius:100px;
  font-size:14px; font-weight:500; color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .3s var(--ease), color .3s var(--ease);
}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--accent); color:var(--accent)}
/* WhatsApp CTAs: glyph sits inline, tints green on hover */
.btn-ghost.wa,.pill-cta,.btn,.dock-c{gap:8px}
.btn-ghost.wa{gap:9px}
.btn-ghost.wa .ic,.pill-cta .ic{font-size:15px}
.btn .ic,.dock-c .ic{font-size:16px}
.btn-ghost.wa:hover{box-shadow:inset 0 0 0 1px #25d366; color:#128c3e}
.btn-ghost.light.wa:hover{box-shadow:inset 0 0 0 1px #25d366; color:#5ce68e}
.pill-cta:hover{background:#25d366; color:#06231a}
.foot nav a.wa{display:inline-flex; align-items:center; gap:7px}
.foot nav a.wa .ic{font-size:14px}
.foot nav a.wa:hover{color:#128c3e}
.btn-ghost.light{color:#e8e2d8; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.btn-ghost.light:hover{box-shadow:inset 0 0 0 1px #c9a173; color:#fff}

.stats{display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,52px); margin:48px 0 0}
.stats div{display:flex; flex-direction:column}
.stats dt{font-family:var(--disp); font-size:clamp(26px,3vw,36px); line-height:1}
.stats dd{
  margin:7px 0 0; font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); font-weight:500;
}

/* offset collage — asymmetric, breaks the grid on purpose */
.hero-im{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  align-self:stretch; min-height:420px;
}
.hero-im figure{margin:0; overflow:hidden; border-radius:2px; background:var(--paper-2); box-shadow:var(--sh)}
.hero-im img{width:100%; height:100%; object-fit:cover}
.hero-im figure:nth-child(1){grid-row:span 2; align-self:center; aspect-ratio:3/4.6}
.hero-im figure:nth-child(2){aspect-ratio:4/3; margin-top:clamp(16px,5vw,52px)}
.hero-im figure:nth-child(3){aspect-ratio:3/3.4}

/* ─────────────────────────  filters  ───────────────────────── */
.sticky-wrap{position:sticky; top: 65px; z-index:50}
.filters{
  background:rgba(246,243,238,.93); backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 1px 0 var(--line);
  padding:16px var(--pad) 14px;
  display:flex; flex-direction:column; gap:9px;
}
.frow{display:flex; align-items:center; gap:14px; min-width:0}
.flab{
  font-size:10px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; width:52px; flex:none;
}
.chips{display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; padding:2px 0}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none; padding:7px 15px; border-radius:100px; font-size:12.5px; font-weight:500;
  color:var(--ink-2); background:var(--card); box-shadow:var(--sh); white-space:nowrap;
  transition:background .25s var(--ease), color .25s var(--ease), transform .2s var(--ease);
}
.chip:hover{transform:translateY(-1px)}
.chip[aria-pressed="true"]{background:var(--ink); color:#fff}
.chip small{opacity:.5; margin-left:5px; font-size:11px}
.fmeta{
  display:flex; align-items:center; gap:14px; margin-top:2px;
  font-size:12px; color:var(--ink-3); letter-spacing:.02em;
}

/* ─────────────────────────  grid  ───────────────────────── */
.grid{
  column-count:4; column-gap:clamp(12px,1.6vw,22px);
  padding:clamp(26px,4vw,44px) var(--pad) clamp(60px,9vw,110px);
  max-width:1800px; margin:0 auto;
}
@media(max-width:1400px){.grid{column-count:3}}
@media(max-width:900px){.grid{column-count:2}}
@media(max-width:540px){.grid{column-count:1}}

.card{
  break-inside:avoid; margin:0 0 clamp(12px,1.6vw,22px); position:relative;
  background:var(--card); border-radius:3px; overflow:hidden; box-shadow:var(--sh);
  opacity:0; transform:translateY(18px);
  transition:opacity .55s var(--ease), transform .55s var(--ease), box-shadow .4s var(--ease);
  cursor:pointer;
}
.card.in{opacity:1; transform:none}
.card:hover{box-shadow:var(--sh-l)}
.card-im{position:relative; overflow:hidden; background:var(--paper-2)}
.card-im img{width:100%; height:auto; transition:transform .85s var(--ease)}
.card:hover .card-im img{transform:scale(1.045)}
.card-tx{padding:14px 16px 16px}
.card-tx h3{font-size:19px; margin-bottom:5px}
.meta{font-size:11.5px; color:var(--ink-3); letter-spacing:.04em; display:flex; flex-wrap:wrap; gap:6px}
.meta b{font-weight:500; color:var(--accent)}
.meta span::after{content:"·"; margin-left:6px; opacity:.45}
.meta span:last-child::after{content:""}

.fav{
  position:absolute; top:9px; right:9px; z-index:2;
  width:34px; height:34px; border-radius:100px; display:grid; place-items:center;
  background:rgba(255,255,255,.86); backdrop-filter:blur(6px);
  color:var(--ink-3); font-size:17px;
  transition:transform .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.fav:hover{transform:scale(1.1); background:#fff}
.fav[aria-pressed="true"]{color:#c0392b; background:#fff}
.fav.beat{animation:beat .45s var(--ease)}
@keyframes beat{35%{transform:scale(1.35)}70%{transform:scale(.94)}}
.count-badge{
  position:absolute; left:9px; bottom:9px; z-index:2; padding:4px 9px; border-radius:100px;
  background:rgba(16,16,16,.62); backdrop-filter:blur(6px); color:#fff;
  font-size:10.5px; letter-spacing:.05em; font-weight:500; opacity:0;
  transition:opacity .35s var(--ease);
}
.card:hover .count-badge{opacity:1}
.empty{text-align:center; color:var(--ink-3); padding:0 var(--pad) 100px; font-size:15px}

/* ─────────────────────────  closing band  ───────────────────────── */
.talk{background:var(--ink); color:#fff; padding:clamp(64px,10vw,124px) var(--pad)}
.talk-in{max-width:1560px; margin:0 auto; max-width:760px}
.talk h2{font-size:clamp(34px,5vw,62px); margin-bottom:22px}
.talk .lede{color:#b9b3a9}
.talk-cta{display:flex; flex-wrap:wrap; gap:12px; margin:34px 0 26px}
.hours{font-size:12.5px; color:#807a71; margin:0; letter-spacing:.02em}

.foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:22px; padding:34px var(--pad) calc(34px + env(safe-area-inset-bottom));
  font-size:12.5px; color:var(--ink-3);
}
.foot > div{display:flex; align-items:center; gap:12px}
.foot p{margin:0}
.foot-logo{width:30px; height:auto; filter:grayscale(1) brightness(.4) contrast(3); opacity:.45}
.foot nav{display:flex; flex-wrap:wrap; gap:20px}
.foot nav a{transition:color .25s var(--ease)}
.foot nav a:hover{color:var(--accent)}

/* ─────────────────────────  sticky dock  ───────────────────────── */
.dock{
  position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:55;
  transform:translate(-50%,140%); display:flex; align-items:center; gap:4px;
  padding:6px 6px 6px 16px; border-radius:100px;
  background:rgba(16,16,16,.94); backdrop-filter:blur(14px); box-shadow:var(--sh-l);
  transition:transform .5s var(--ease); max-width:calc(100vw - 32px);
}
.dock.up{transform:translate(-50%,0)}
.dock-b{display:flex; align-items:center; gap:7px; color:#fff; font-size:13px; font-weight:500; white-space:nowrap}
.dock-b .ic{color:#e0684f; font-size:15px}
.dock-c{
  padding:10px 18px; border-radius:100px; background:var(--paper); color:var(--ink);
  font-size:13px; font-weight:600; white-space:nowrap; transition:background .25s var(--ease);
}
.dock-c:hover{background:#fff}

/* ─────────────────────────  project sheet  ───────────────────────── */
.sheet{
  position:fixed; inset:0; z-index:80; background:var(--paper);
  opacity:0; transition:opacity .35s var(--ease);
}
.sheet.on{opacity:1}
.sheet-scroll{height:100%; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
.sheet-x{
  position:fixed; top:16px; right:16px; z-index:3;
  width:42px; height:42px; border-radius:100px; display:grid; place-items:center;
  background:rgba(255,255,255,.9); backdrop-filter:blur(10px); box-shadow:var(--sh);
  font-size:19px; transition:transform .3s var(--ease), background .3s var(--ease);
}
.sheet-x:hover{transform:rotate(90deg); background:#fff}

.p-head{
  padding:clamp(56px,9vw,104px) var(--pad) clamp(26px,4vw,44px);
  max-width:1560px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(22px,4vw,60px); align-items:end;
}
.p-head.solo{grid-template-columns:1fr}   /* project with no write-up */
.p-head h2{font-size:clamp(38px,5.6vw,74px); margin-bottom:16px}
.p-spec{display:flex; flex-wrap:wrap; gap:26px; margin:0}
.p-spec div{display:flex; flex-direction:column}
.p-spec dt{font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.p-spec dd{margin:5px 0 0; font-size:15px; font-weight:500}
.p-spec dd.acc{color:var(--accent)}
.p-story{color:var(--ink-2); font-weight:300; max-width:62ch; font-size:15.5px; margin:0}
.p-story p{margin:0 0 14px}
.p-story p:last-child{margin:0}
.p-more{margin-top:10px}
.p-fold{display:none}
.p-fold.on{display:block}
.p-act{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  padding:0 var(--pad) clamp(26px,4vw,40px); max-width:1560px; margin:0 auto;
}
.p-gal{
  column-count:3; column-gap:clamp(10px,1.4vw,18px);
  padding:0 var(--pad) clamp(64px,10vw,120px); max-width:1800px; margin:0 auto;
}
@media(max-width:1100px){.p-gal{column-count:2}}
@media(max-width:640px){.p-gal{column-count:1}}
.p-gal figure{
  break-inside:avoid; margin:0 0 clamp(10px,1.4vw,18px); overflow:hidden;
  border-radius:2px; background:var(--paper-2); box-shadow:var(--sh); cursor:zoom-in;
}
.p-gal img{width:100%; height:auto}
.p-next{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:clamp(30px,5vw,52px) var(--pad); background:var(--paper-2);
}
.p-next span{font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); font-weight:600}
.p-next h4{font-family:var(--disp); font-weight:400; font-size:clamp(24px,3.4vw,38px); margin:7px 0 0; letter-spacing:-.02em}

/* lightbox */
.lb{position:fixed; inset:0; z-index:90; background:rgba(16,16,16,.96); display:grid; place-items:center; opacity:0; transition:opacity .3s var(--ease)}
.lb.on{opacity:1}
.lb img{max-width:94vw; max-height:88vh; width:auto; height:auto; object-fit:contain}
.lb-x,.lb-p,.lb-n{position:absolute; color:#fff; width:46px; height:46px; border-radius:100px; display:grid; place-items:center; background:rgba(255,255,255,.11); font-size:20px; transition:background .25s var(--ease)}
.lb-x:hover,.lb-p:hover,.lb-n:hover{background:rgba(255,255,255,.24)}
.lb-x{top:18px; right:18px}
.lb-p{left:18px; top:50%; transform:translateY(-50%) rotate(180deg)}
.lb-n{right:18px; top:50%; transform:translateY(-50%)}
.lb-i{position:absolute; bottom:20px; left:50%; transform:translateX(-50%); color:#a6a099; font-size:12px; letter-spacing:.08em}

/* ─────────────────────────  saved drawer  ───────────────────────── */
.drawer{position:fixed; inset:0; z-index:85; background:rgba(16,16,16,.42); opacity:0; transition:opacity .3s var(--ease)}
.drawer.on{opacity:1}
.drawer-in{
  position:absolute; right:0; top:0; bottom:0; width:min(430px,100%);
  background:var(--paper); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .42s var(--ease); box-shadow:var(--sh-l);
}
.drawer.on .drawer-in{transform:none}
.drawer-h{display:flex; align-items:center; justify-content:space-between; padding:22px var(--pad) 14px}
.drawer-h h3{font-size:25px}
.drawer-h button{font-size:19px; color:var(--ink-3)}
#drawerList{flex:1; overflow-y:auto; padding:6px 22px 12px; display:flex; flex-direction:column; gap:9px}
.srow{display:flex; gap:12px; align-items:center; background:var(--card); border-radius:3px; padding:9px; box-shadow:var(--sh)}
.srow img{width:62px; height:62px; object-fit:cover; border-radius:2px; flex:none}
.srow div{min-width:0; flex:1}
.srow h4{margin:0; font-family:var(--disp); font-weight:400; font-size:17px; letter-spacing:-.01em}
.srow p{margin:3px 0 0; font-size:11.5px; color:var(--ink-3)}
.srow button{color:var(--ink-3); font-size:16px; padding:6px; transition:color .25s var(--ease)}
.srow button:hover{color:#c0392b}
.s-empty{color:var(--ink-3); font-size:14px; padding:24px 0; text-align:center}
.drawer-f{padding:16px 22px calc(22px + env(safe-area-inset-bottom)); box-shadow:0 -1px 0 var(--line)}
.drawer-f .btn{width:100%; justify-content:center}
.fine{font-size:11.5px; color:var(--ink-3); text-align:center; margin:10px 0 0}

/* ─────────────────────────  responsive  ───────────────────────── */
@media(max-width:980px){
  .hero{grid-template-columns:1fr; padding-top:clamp(96px,14vh,140px)}
  .hero-im{min-height:0; order:-1; grid-template-columns:1fr 1fr 1fr; gap:8px}
  .hero-im figure:nth-child(1){grid-row:auto; aspect-ratio:3/4}
  .hero-im figure:nth-child(2){aspect-ratio:3/4; margin-top:0}
  .hero-im figure:nth-child(3){aspect-ratio:3/4}
  .p-head{grid-template-columns:1fr; align-items:start}
}
@media(max-width:640px){
  .flab{display:none}
  .filters{padding:11px var(--pad) 10px; gap:7px}
  .fmeta{font-size:11.5px}
  .bar{padding:10px var(--pad)}
  .brand img{width:30px}
  .pill-cta{padding:9px 15px; font-size:12.5px}
  .hero h1{font-size:clamp(40px,11vw,58px)}
  .stats{gap:20px; margin-top:34px}
  .stats dt{font-size:24px}
  .foot{flex-direction:column; align-items:flex-start}
  .lb-p,.lb-n{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .card{opacity:1; transform:none}
}