/* The real cafe is the setting; the notes are the foreground interaction. */
#design.house-welcome, #plan.house-conversation { display:block; padding:0; scroll-margin-top:var(--site-nav-height,74px); }
#design.house-welcome { background:#302c26; }
#plan.house-conversation { background:#e9e0d1; overflow:hidden; padding-bottom:72px; }
.cafe-room { position:relative; isolation:isolate; overflow:hidden; }
.cafe-background { transform:translateY(var(--cafe-drift,0px)) scale(1.045); position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; }
.cafe-bar { min-height:720px; height: min(850px, 90svh); }
.cafe-bar .cafe-background { object-position:50% 48%; }
.cafe-bar::after { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(18,20,16,.84) 0%,rgba(18,20,16,.65) 38%,rgba(18,20,16,.12) 78%),linear-gradient(0deg,rgba(18,20,16,.55),transparent 40%); }
.cafe-greeting { position:absolute; left:7%; top:14%; color:#fff6e6; }
.house-eyebrow { margin:0 0 28px; font-size:11px; letter-spacing:.16em; line-height:1.6; }
#design.house-welcome h2,#plan.house-conversation h2 { margin:0; font:400 clamp(38px,4.6vw,68px)/1.4 var(--serif); letter-spacing:.015em; color:inherit; }
.house-welcome h2 em,.house-conversation h2 em { font-style:normal; }
.cafe-greeting h2 em { display:inline-block; margin-left:1.25em; }
.cafe-seat-link { position:absolute; bottom:9%; left:7%; display:flex; gap:40px; align-items:center; min-height:48px; color:#fff6e6; font-size:14px; border-bottom:1px solid #fff6e680; }
.cafe-seat-link span { transition:transform .3s; }
.cafe-seat-link:hover span { transform:translateY(6px); }
.cafe-lounge { height:680px; }
.cafe-lounge .cafe-background { object-position:50% 48%; }
.cafe-lounge::after { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(0deg,#e9e0d1 0%,transparent 36%),linear-gradient(110deg,rgba(18,20,16,.82) 0%,rgba(18,20,16,.62) 35%,rgba(18,20,16,.12) 72%); }
.cafe-conversation-heading { position:absolute; top:70px; left:7%; color:#fff8eb; text-shadow:0 2px 16px #17171266; }
#plan.house-conversation h2 { font-size:clamp(32px,3.4vw,48px); }
.cafe-conversation-heading h2 em { display:inline-block; margin-left:1.2em; }
.cafe-table { position:relative; z-index:1; width:min(960px,86%); margin:-130px auto 0; text-align:center; }
.paper-invitation { position:relative; z-index:12; text-align:right; margin:0 8% 20px; color:#514934; font:400 15px/1.6 var(--serif); }
.touch-hint { display:none; }
.paper-tabs { position:relative; display:flex; justify-content:center; gap:18px; z-index:12; margin-bottom:-5px; }
.paper-tabs button { appearance:none; border:0; border-radius:3px 8px 0 0; background:#d9c7a6; color:#514934; min-width:104px; min-height:52px; padding:12px 22px; cursor:pointer; font:400 17px/1.4 var(--serif); transition:transform .3s,background .3s; transform:rotate(-3deg); }
.paper-tabs button:nth-child(2) { background:#cbd3bb; transform:rotate(2deg); }
.paper-tabs button:nth-child(3) { background:#e4c2a8; transform:rotate(-2deg); }
.paper-tabs button[aria-pressed=true] { transform:translateY(-7px) rotate(0); background:#fff9ec; color:#294a3b; }
.paper-stack { position:relative; height:355px; perspective:1000px; }
.conversation-paper { position:absolute; width:65%; height:330px; left:17.5%; top:0; padding:32px 38px; text-align:left; background:#fff9ec; color:#374a3b; box-shadow:0 18px 35px #4e352b26,0 1px 3px #4e352b22; transform-origin:50% 90%; transition:transform .55s cubic-bezier(.2,.75,.25,1),box-shadow .55s; border-radius:2px 5px 3px 2px; }
.paper-daily { transform:translateX(-20%) rotate(-9deg); z-index:3; background:#fff9ec; }
.paper-taste { transform:translateX(1%) rotate(5deg); z-index:2; background:#eaf0df; }
.paper-budget { transform:translateX(22%) rotate(11deg); z-index:1; background:#f5dfca; }
.conversation-paper.is-active { z-index:5; transform:translateY(-8px) rotate(-2deg); box-shadow:0 24px 40px #4e352b33; }
.conversation-paper:not(.is-active) > * { opacity:0; transition:opacity .18s; }
.conversation-paper.is-active > * { opacity:1; transition:opacity .35s .12s; }
.paper-kicker { font-size:11px; letter-spacing:.15em; color:#79765e; }
.paper-question { margin:18px 0 8px; font:400 clamp(24px,2.6vw,34px)/1.55 var(--serif); }
.paper-sketch { position:absolute; width:180px; bottom:38px; right:24px; stroke:#7c896a; stroke-width:1.5; stroke-linecap:round; transform:rotate(4deg); }
.paper-footer { position:absolute; bottom:30px; left:38px; font-size:12px; color:#716b58; }
.paper-swatches { display:flex; gap:10px; align-items:center; margin-top:25px; }
.paper-swatches i { width:35px; height:42px; background:#385b48; transform:rotate(-8deg); box-shadow:2px 3px 3px #0002; }
.paper-swatches i:nth-child(2) { background:#bd804c; transform:rotate(6deg); }
.paper-swatches i:nth-child(3) { background:#d6bd90; transform:rotate(-3deg); }
.paper-swatches span { font-size:12px; margin-left:8px; }
.paper-priorities { display:flex; gap:24px; margin-top:20px; font:18px var(--serif); }
.paper-priorities span:first-child { border:1px solid #8b7657; border-radius:50%; padding:7px 17px; transform:rotate(-9deg); }
.paper-priorities span { padding:7px 0; }
.conversation-link { display:inline-flex; align-items:center; min-height:48px; gap:42px; margin-top:22px; color:#34523f; border-bottom:1px solid #77866d; font-size:14px; }
.conversation-link:hover { color:#9b6137; }
.cafe-seat-link:focus-visible,.paper-tabs button:focus-visible,.conversation-link:focus-visible { outline:2px solid currentColor; outline-offset:5px; }
.arrival-reveal.motion-ready { opacity:0; translate:0 24px; transition:opacity .85s,translate 1.1s; }
.arrival-reveal.motion-ready.is-visible { opacity:1; translate:0 0; }
@media (hover:hover) and (pointer:fine) {
  .paper-tabs button:hover { transform:translateY(-10px) rotate(0); }
  .conversation-paper { cursor:pointer; }
}
@media (max-width:768px) {
  #design.house-welcome { order:2; }
  #plan.house-conversation { order:3; padding-bottom:48px; }
  #mobile-services { order:4; }
  #factory { order:5; }
  #supply { order:6; }
  .nav-links a[href="#design"] { display:flex; }
  #mobile-services .eyebrow .no { display:none; }
  .cafe-bar { height:740px; min-height:0; max-height:calc(100svh - 60px); }
  .cafe-bar .cafe-background { object-position:51% center; }
  .cafe-bar::after { background:linear-gradient(180deg,rgba(18,20,16,.84) 0%,rgba(18,20,16,.70) 32%,rgba(18,20,16,.12) 65%,rgba(18,20,16,.62) 100%); }
  .cafe-greeting { top:42px; left:24px; right:20px; }
  .house-eyebrow { font-size:10px; margin-bottom:22px; }
  #design.house-welcome h2 { font-size:clamp(30px,8.3vw,46px); }
  .cafe-greeting h2 em { margin-left:.65em; }
  .cafe-seat-link { bottom:26px; left:24px; font-size:12px; }
  .cafe-lounge { height:620px; }
  .cafe-lounge::after { background:linear-gradient(0deg,#e9e0d1 0%,transparent 36%),linear-gradient(180deg,rgba(18,20,16,.84) 0%,rgba(18,20,16,.70) 32%,rgba(18,20,16,.12) 68%); }
  .cafe-lounge .cafe-background { object-position:center 46%; }
  .cafe-conversation-heading { top:42px; left:24px; right:16px; }
  #plan.house-conversation h2 { font-size:clamp(27px,6.8vw,38px); }
  .cafe-conversation-heading h2 em { margin-left:0; }
  .cafe-table { width:calc(100% - 40px); margin-top:-92px; }
  .paper-invitation { font-size:13px; margin:0 0 18px; }
  .pointer-hint { display:none; }
  .touch-hint { display:inline; }
  .paper-tabs { gap:8px; }
  .paper-tabs button { min-width:0; flex:1; max-width:120px; min-height:48px; padding:10px 8px; font-size:16px; }
  .paper-stack { height:310px; }
  .conversation-paper { width:94%; left:3%; height:292px; padding:25px 22px; }
  .paper-daily { transform:translateX(-2%) rotate(-5deg); }
  .paper-taste { transform:translateX(0) rotate(3deg); }
  .paper-budget { transform:translateX(2%) rotate(6deg); }
  .conversation-paper.is-active { transform:translateY(-3px) rotate(-1.5deg); }
  .paper-question { font-size:clamp(21px,5.6vw,28px); margin-top:20px; }
  .paper-footer { left:22px; right:12px; bottom:22px; font-size:10px; }
  .paper-sketch { width:135px; bottom:45px; right:20px; }
  .paper-swatches { gap:8px; }
  .paper-swatches span { font-size:10px; }
  .paper-swatches i { width:28px; height:34px; flex-shrink:0; }
  .conversation-link { margin-top:12px; }
}
@media (prefers-reduced-motion:reduce) {
  .arrival-reveal.motion-ready { opacity:1; translate:none; transition:none; }
  .conversation-paper,.conversation-paper > *,.paper-tabs button,.cafe-seat-link span { transition:none !important; }
}

.paper-tabs button:nth-child(2)[aria-pressed=true] { background:#eaf0df; }
.paper-tabs button:nth-child(3)[aria-pressed=true] { background:#f5dfca; }
@media (prefers-reduced-motion:reduce) { .cafe-background { transform:none; } }

/* A cup is carried across the seam; the two photographs meet in a shared shadow. */
#design.house-welcome { position:relative; z-index:2; overflow:visible; }
.cafe-bar::before, .cafe-lounge::before { content:""; position:absolute; z-index:0; left:0; right:0; height:140px; pointer-events:none; }
.cafe-bar::before { bottom:0; background:linear-gradient(0deg,#1a1d18,transparent); }
.cafe-lounge::before { top:0; background:linear-gradient(180deg,#1a1d18,transparent); }
.cafe-greeting, .cafe-seat-link, .cafe-conversation-heading { z-index:1; }
.cafe-bridge { position:absolute; z-index:3; width:clamp(220px,22vw,310px); right:11%; bottom:-135px; pointer-events:none; }
.cafe-bridge img { display:block; width:100%; height:auto; transform:rotate(-14deg); filter:drop-shadow(0 18px 18px #080b0870); }
@media (min-width:769px) and (max-width:1000px) {
  .cafe-bridge { width:210px; right:5%; bottom:-83px; }
}
@media (max-width:768px) {
  .cafe-bridge { width:150px; right:18px; bottom:-48px; }
  .cafe-bar::before, .cafe-lounge::before { height:95px; }
}

/* Hover on desktop; the same native button toggles the note on touch screens. */
.cafe-bridge { pointer-events:auto; }
.coffee-trigger { position:relative; display:block; width:100%; padding:0; border:0; background:none; color:#394533; cursor:pointer; border-radius:50%; -webkit-tap-highlight-color:transparent; }
.coffee-trigger img { transition:transform .35s ease,filter .35s ease; }
.coffee-trigger:focus-visible { outline:2px solid #fff6e6; outline-offset:3px; }
.coffee-hint { position:absolute; right:12%; top:12%; width:32px; height:27px; display:grid; place-items:center; border-radius:50% 50% 50% 3px; background:#fff5df; box-shadow:0 3px 12px #0003; font:bold 22px/1 sans-serif; transition:transform .3s; }
.coffee-bubble { position:absolute; right:92%; top:22%; width:max-content; max-width:230px; margin:0; padding:17px 21px; background:#fff5df; color:#394533; border-radius:20px 20px 3px 20px; box-shadow:0 8px 24px #0003; font:400 16px/1.6 var(--serif); opacity:0; visibility:hidden; transform:translate(8px,8px) scale(.97); transition:opacity .25s,transform .25s,visibility .25s; pointer-events:none; }
.coffee-bubble::after { content:""; position:absolute; right:-9px; bottom:0; border-left:12px solid #fff5df; border-top:12px solid transparent; }
.cafe-bridge.is-open .coffee-bubble { opacity:1; visibility:visible; transform:none; }
.cafe-bridge.is-open .coffee-trigger img { transform:translateY(-5px) rotate(-10deg); }
.cafe-bridge.is-open .coffee-hint { transform:scale(.85); }
@media (hover:hover) and (pointer:fine) { .coffee-trigger:hover img { transform:translateY(-5px) rotate(-10deg); } }
@media (max-width:768px) {
  .coffee-bubble { top:auto; bottom:96%; right:4px; max-width:235px; padding:13px 17px; font-size:14px; }
  .coffee-bubble::after { right:22px; bottom:-9px; border-left:12px solid transparent; border-top:12px solid #fff5df; }
  .coffee-hint { width:27px; height:23px; font-size:19px; }
}
@media (prefers-reduced-motion:reduce) { .coffee-trigger img,.coffee-bubble,.coffee-hint { transition:none; } }

/* The saucer enters from the visitor's lower right, then settles at the seam. */
#design.house-welcome { overflow-x:clip; overflow-y:visible; }
.cafe-bridge.serve-motion { transform-origin:65% 65%; transition:transform .12s linear,opacity .18s ease; }
.cafe-bridge.serve-motion .coffee-hint { opacity:var(--serve-hint,1); transition:opacity .2s; }
@media (prefers-reduced-motion:reduce) {
  .cafe-bridge.serve-motion { transform:none !important; opacity:1 !important; transition:none; pointer-events:auto !important; }
  .cafe-bridge.serve-motion .coffee-hint { opacity:1; }
}