/* WebAnchor concept demos: one art direction per business type.
   Every demo is scoped under .dx-<key>; shared primitives live under .dx. */
.demo-scroll{container-type:inline-size;container-name:demo}
.dx,.demo-layer{--eo:cubic-bezier(.23,1,.32,1);--eio:cubic-bezier(.77,0,.175,1);--ed:cubic-bezier(.32,.72,0,1)}
.dx{--rd:.7s;--rs:24px;position:relative;
  min-height:100%;background:var(--c-bg);color:var(--c-fg);font-family:var(--f-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
.dx *{box-sizing:border-box}
.dx h1,.dx h2,.dx h3,.dx h4,.dx p{margin:0;text-wrap:balance}
.dx p{text-wrap:pretty}
/* Headings and emphasis start from the browser's defaults, not the studio page's theme */
.dx h1,.dx h2,.dx h3,.dx h4{font-family:var(--f-body);font-weight:700;letter-spacing:normal}
.dx em{font-style:italic}
.dx .note{margin-top:0}
.dx a{color:inherit}
.dx img{display:block;max-width:100%}
.dx figure,.mini figure{margin:0}
.dx section,.dx .hero{padding-block:0}
.dx form{display:block;background:none;border:0;border-radius:0;padding:0}
.dx label{font-size:inherit;font-weight:inherit;color:inherit}
/* Overlays (bag drawer, lightbox) sit above the scrolling page, not inside it */
.demo-layer.dx{position:absolute;inset:0;z-index:4;min-height:0;background:none;pointer-events:none;overflow:clip}
.dx button{font:inherit;color:inherit}
.dx .in{padding-inline:clamp(20px,5%,64px)}
.dx .ph{position:relative;overflow:hidden;background:color-mix(in srgb,var(--c-fg) 10%,var(--c-bg))}
.dx .ph > img{width:100%;height:100%;object-fit:cover}
.dx .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Photos fade in once decoded, instead of popping in line by line */
img.lz{opacity:0;transition:opacity .6s ease}
img.lz.ok{opacity:1}

/* Reveal primitives (each demo tunes --rd / --rs to its own personality) */
.dx [data-r]{opacity:0;transform:translateY(var(--rs));transition:opacity var(--rd) var(--eo),transform var(--rd) var(--eo),clip-path calc(var(--rd)*1.4) var(--eio),filter var(--rd) var(--eo);transition-delay:calc(var(--i,0) * 70ms)}
.dx [data-r="fade"]{transform:none}
.dx [data-r="blur"]{transform:translateY(8px);filter:blur(8px)}
.dx [data-r="clip"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0)}
.dx [data-r="wipe"]{opacity:1;transform:none;clip-path:inset(0 100% 0 0)}
.dx [data-r="scale"]{transform:scale(.94)}
.dx [data-r="left"]{transform:translateX(calc(var(--rs) * -1.4))}
.dx [data-r].on{opacity:1;transform:none;filter:none;clip-path:none}
.dx [data-r="clip"].on,.dx [data-r="wipe"].on{clip-path:inset(0 0 0 0)}

/* Shared booking chips / steppers, restyled per demo through tokens */
.dx .chip{appearance:none;cursor:pointer;min-height:44px;padding:10px 16px;border:1px solid var(--c-line);border-radius:var(--chip-r,999px);background:transparent;font-size:14px;transition:background-color .2s ease,border-color .2s ease,color .2s ease,scale .16s var(--eo)}
.dx .chip:active{scale:.97}
.dx .chip[aria-pressed="true"]{background:var(--c-acc);border-color:var(--c-acc);color:var(--c-on);font-weight:700}
.dx .chip:disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.dx .chips{display:flex;flex-wrap:wrap;gap:8px}
.dx .stp{display:inline-flex;align-items:center;border:1px solid var(--c-line);border-radius:999px}
.dx .stp button{appearance:none;border:0;background:none;width:44px;height:44px;cursor:pointer;font-size:20px;line-height:1;border-radius:999px;transition:scale .16s var(--eo)}
.dx .stp button:active{scale:.9}
.dx .stp output{min-width:2.4em;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.dx .lbl{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-soft)}
.dx .cta{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-decoration:none;border:1px solid var(--c-acc);background:var(--c-acc);color:var(--c-on);font-weight:700;font-size:15px;padding:14px 24px;border-radius:var(--btn-r,999px);transition:scale .16s var(--eo),filter .2s ease,background-color .2s ease}
.dx .cta:active{scale:.97}
.dx .cta.ghost{background:transparent;color:var(--c-fg);border-color:var(--c-line)}
@media (hover:hover) and (pointer:fine){.dx .cta:hover{filter:brightness(1.08)}.dx .chip:hover{border-color:var(--c-acc)}}
.dx .live{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.dx .live i{width:8px;height:8px;border-radius:50%;background:var(--live,#3BB273);box-shadow:0 0 0 0 color-mix(in srgb,var(--live,#3BB273) 60%,transparent);animation:dxping 2s infinite}
.dx .live.shut i{--live:#C9533F;animation:none}
@keyframes dxping{70%,100%{box-shadow:0 0 0 8px transparent}}
.dx .map{position:relative;min-height:240px;border-radius:var(--map-r,14px);overflow:hidden;background:linear-gradient(var(--c-line) 1px,transparent 1px) 0 0/36px 36px,linear-gradient(90deg,var(--c-line) 1px,transparent 1px) 0 0/36px 36px,color-mix(in srgb,var(--c-fg) 4%,var(--c-bg))}
.dx .map::before{content:"";position:absolute;left:-10%;right:-10%;top:56%;height:16px;background:color-mix(in srgb,var(--c-fg) 12%,var(--c-bg));transform:rotate(-8deg)}
.dx .map::after{content:"";position:absolute;top:-10%;bottom:-10%;left:36%;width:11px;background:color-mix(in srgb,var(--c-fg) 9%,var(--c-bg));transform:rotate(14deg)}
.dx .map b{position:absolute;left:54%;top:38%;z-index:1;width:22px;height:22px;border-radius:50% 50% 50% 0;background:var(--c-acc);transform:rotate(-45deg);box-shadow:0 0 0 8px color-mix(in srgb,var(--c-acc) 22%,transparent);animation:dxpin 2.4s ease-in-out infinite}
.dx .map span{position:absolute;left:calc(54% + 30px);top:calc(38% - 4px);z-index:1;background:var(--c-bg);color:var(--c-fg);font-size:12px;font-weight:700;padding:5px 10px;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.15)}
@keyframes dxpin{50%{box-shadow:0 0 0 16px color-mix(in srgb,var(--c-acc) 4%,transparent)}}
.dx .hrs{display:flex;flex-direction:column}
.dx .hrs div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--c-line);font-size:15px}
.dx .hrs div.today{font-weight:700}
.dx .hrs div.today span::after{content:" · today";color:var(--c-acc)}
.dx .hrs span{color:var(--c-soft);text-align:right}
.dx .dfoot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:28px clamp(20px,5%,64px);border-top:1px solid var(--c-line);font-size:13px;color:var(--c-soft)}

/* Toast that confirms demo actions */
.demo-toast{position:absolute;left:50%;bottom:20px;z-index:5;max-width:min(520px,calc(100% - 32px));transform:translate(-50%,16px);opacity:0;pointer-events:none;background:var(--fg,#0A1324);color:var(--bg,#fff);border-radius:14px;padding:14px 18px;font-size:14px;line-height:1.5;box-shadow:0 18px 50px rgba(0,0,0,.35);transition:transform .2s var(--eo,ease),opacity .2s ease}
.demo-toast.show{transform:translate(-50%,0);opacity:1;transition-duration:.4s}
.demo-toast b{font-weight:700}

/* ============ 1 · RESTAURANT: Sora Ramen (night counter, vermilion noren) ============ */
.dx-ramen{--c-bg:#120E0C;--c-fg:#F3E9DA;--c-soft:#B9AA97;--c-line:#3A2E27;--c-acc:#D9432B;--c-on:#FFF4EA;--f-body:'Zen Kaku Gothic New',var(--sans);--f-disp:'Shippori Mincho',serif;--rd:.9s}
.dx-ramen .nv{position:sticky;top:0;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;background:linear-gradient(#120E0Cee,#120E0C00)}
.dx-ramen .brand{display:flex;align-items:center;gap:12px;font-family:var(--f-disp);font-size:22px;letter-spacing:.2em}
.dx-ramen .brand i{font-style:normal;display:grid;place-items:center;width:40px;height:40px;background:var(--c-acc);color:var(--c-on);font-size:22px;letter-spacing:0;border-radius:2px}
.dx-ramen .links{display:flex;gap:28px;font-size:14px;color:var(--c-soft)}
.dx-ramen .links a{text-decoration:none}
.dx-ramen .cta{--btn-r:2px}
.dx-ramen .hero{position:relative;min-height:min(640px,88vh);display:flex;align-items:flex-end;margin-top:-68px;isolation:isolate}
.dx-ramen .hero .ph{position:absolute;inset:0;z-index:-1}
.dx-ramen .hero .ph img{animation:kb 22s ease-out both}
.dx-ramen .hero .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#120E0C 0%,#120E0Ccc 32%,#120E0C33 70%),linear-gradient(0deg,#120E0C 0%,transparent 40%)}
@keyframes kb{from{transform:scale(1.14)}to{transform:scale(1)}}
.dx-ramen .hero .copy{display:flex;flex-direction:column;gap:22px;padding-block:120px 72px;max-width:640px}
.dx-ramen .kick{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--c-acc);font-weight:700}
.dx-ramen h1{font-family:var(--f-disp);font-weight:700;font-size:clamp(44px,7cqi,88px);line-height:1.02;letter-spacing:-.01em}
.dx-ramen .hero p{color:var(--c-soft);font-size:17px;max-width:44ch}
.dx-ramen .row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.dx-ramen .vert{position:absolute;right:clamp(20px,6%,72px);top:110px;writing-mode:vertical-rl;white-space:nowrap;font-family:var(--f-disp);font-size:clamp(30px,4cqi,48px);letter-spacing:.3em;color:var(--c-on);text-shadow:0 2px 24px #0008}
.dx-ramen .vert small{display:block;font-size:13px;letter-spacing:.4em;color:var(--c-soft);margin-top:18px}
.dx-ramen .steam{position:absolute;left:62%;bottom:30%;width:180px;height:260px;pointer-events:none;filter:blur(7px);opacity:.55}
.dx-ramen .steam span{position:absolute;bottom:0;width:26px;height:150px;border-radius:50%;background:linear-gradient(0deg,transparent,#fff6 40%,transparent);animation:steam 5.5s ease-in-out infinite}
.dx-ramen .steam span:nth-child(1){left:20px}
.dx-ramen .steam span:nth-child(2){left:70px;animation-delay:1.6s;animation-duration:6.4s}
.dx-ramen .steam span:nth-child(3){left:120px;animation-delay:3.1s}
@keyframes steam{0%{transform:translateY(40px) scaleX(.6);opacity:0}30%{opacity:.9}100%{transform:translateY(-150px) scaleX(1.6) rotate(8deg);opacity:0}}
.dx-ramen .noren{background:var(--c-acc);color:var(--c-on);overflow:hidden;padding-block:12px;font-family:var(--f-disp);font-size:15px;letter-spacing:.14em}
.dx-ramen .noren div{display:flex;gap:48px;width:max-content;animation:dxmq 30s linear infinite}
.dx-ramen .noren span{white-space:nowrap}
.dx-ramen .noren span::after{content:"・";margin-left:48px}
@keyframes dxmq{to{transform:translateX(-50%)}}
.dx-ramen .sec{padding-block:clamp(64px,9%,110px)}
.dx-ramen h2{font-family:var(--f-disp);font-weight:700;font-size:clamp(32px,4.6cqi,54px);line-height:1.08}
.dx-ramen h2 small{display:block;font-size:14px;letter-spacing:.3em;color:var(--c-acc);margin-bottom:12px;font-family:var(--f-body)}
.dx-ramen .menu{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5%,64px);align-items:start;margin-top:36px}
.dx-ramen .menu-ph{position:sticky;top:84px;aspect-ratio:4/5;border-radius:2px}
.dx-ramen .menu-ph img{position:absolute;inset:0;transition:opacity .5s ease,transform .9s var(--eo)}
.dx-ramen .menu-ph img:not(.cur){opacity:0;transform:scale(1.06)}
.dx-ramen .menu-ph figcaption{position:absolute;left:16px;bottom:16px;z-index:1;background:#120E0Ccc;padding:6px 12px;font-size:13px;letter-spacing:.08em}
.dx-ramen .tabs{display:flex;gap:6px;border-bottom:1px solid var(--c-line);margin-bottom:8px}
.dx-ramen .tabs button{appearance:none;background:none;border:0;border-bottom:2px solid transparent;padding:12px 16px;cursor:pointer;color:var(--c-soft);font-size:15px;margin-bottom:-1px;transition:color .2s ease,border-color .2s ease}
.dx-ramen .tabs button[aria-selected="true"]{color:var(--c-fg);border-color:var(--c-acc)}
.dx-ramen .item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:20px 12px;margin-inline:-12px;border-bottom:1px dashed var(--c-line);cursor:default;transition:background-color .25s ease}
.dx-ramen .item.cur{background:#ffffff08}
.dx-ramen .item h3{font-family:var(--f-disp);font-size:22px;font-weight:700;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.dx-ramen .item h3 small{font-size:13px;color:var(--c-soft);font-weight:500;letter-spacing:.1em}
.dx-ramen .item b{font-family:var(--f-disp);font-size:20px;color:var(--c-fg)}
.dx-ramen .item p{grid-column:1/-1;color:var(--c-soft);font-size:14px}
.dx-ramen .item em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-acc);border:1px solid var(--c-acc);padding:2px 7px;border-radius:2px}
.dx-ramen .panel[hidden]{display:none}
.dx-ramen .story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6%,72px);align-items:center}
.dx-ramen .story .ph{aspect-ratio:4/5}
.dx-ramen .story .ph img{transform:scale(1.12);transition:transform 1.6s var(--eo)}
.dx-ramen .story .ph.on img{transform:none}
.dx-ramen .tl{position:relative;display:flex;flex-direction:column;gap:22px;margin-top:30px;padding-left:28px}
.dx-ramen .tl::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--c-line)}
.dx-ramen .tl::after{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--c-acc);transform-origin:top;transform:scaleY(0);transition:transform 1.6s var(--eio) .2s}
.dx-ramen .tl.on::after{transform:scaleY(1)}
.dx-ramen .tl div{position:relative}
.dx-ramen .tl div::before{content:"";position:absolute;left:-28px;top:7px;width:11px;height:11px;border-radius:50%;background:var(--c-bg);border:1px solid var(--c-acc)}
.dx-ramen .tl b{font-family:var(--f-disp);font-size:20px;display:block}
.dx-ramen .tl span{color:var(--c-soft);font-size:15px}
.dx-ramen .book{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5%,56px);background:#1B1512;border:1px solid var(--c-line);padding:clamp(22px,4%,44px);margin-top:36px}
.dx-ramen .counter{display:flex;flex-direction:column;gap:14px}
.dx-ramen .seats{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px}
.dx-ramen .seats i{aspect-ratio:1;border-radius:50%;border:1px solid var(--c-line);background:transparent;transition:background-color .3s ease,border-color .3s ease,transform .45s var(--eo)}
.dx-ramen .seats i.taken{background:#3A2E27;border-color:#3A2E27}
.dx-ramen .seats i.mine{background:var(--c-acc);border-color:var(--c-acc);transform:translateY(-4px)}
.dx-ramen .bar{height:14px;border-radius:2px;background:linear-gradient(90deg,#6B4A33,#8A6245 50%,#6B4A33)}
.dx-ramen .legend{display:flex;gap:18px;font-size:12px;color:var(--c-soft)}
.dx-ramen .legend span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;background:var(--c-acc)}
.dx-ramen .legend span+span::before{background:#3A2E27}
.dx-ramen .form{display:flex;flex-direction:column;gap:18px}
.dx-ramen .form .chip{--chip-r:2px}
.dx-ramen .visit{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5%,56px);align-items:stretch}
.dx-ramen .visit .ph{min-height:320px}
@container demo (max-width:760px){
  .dx-ramen .links,.dx-ramen .vert,.dx-ramen .steam{display:none}
  .dx-ramen .menu,.dx-ramen .story,.dx-ramen .book,.dx-ramen .visit{grid-template-columns:1fr}
  .dx-ramen .menu-ph{position:relative;top:0;aspect-ratio:16/10}
}

/* ============ 2 · SALON: Hana Hair (editorial blush, arches, italic Bodoni) ============ */
.dx-salon{--c-bg:#F6ECE8;--c-fg:#33201D;--c-soft:#7A5C57;--c-line:#E3CEC7;--c-acc:#A8404F;--c-on:#FFF6F3;--f-body:'Jost',var(--sans);--f-disp:'Bodoni Moda',serif;--rd:1s;--rs:30px}
.dx-salon .nv{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding-block:22px;border-bottom:1px solid var(--c-line)}
.dx-salon .nv .l,.dx-salon .nv .r{display:flex;gap:26px;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.dx-salon .nv .r{justify-content:flex-end;align-items:center}
.dx-salon .nv a{text-decoration:none}
.dx-salon .brand{font-family:var(--f-disp);font-style:italic;font-size:34px;line-height:1;text-align:center}
.dx-salon .brand small{display:block;font-family:var(--f-body);font-style:normal;font-size:10px;letter-spacing:.4em;text-transform:uppercase;margin-top:4px;color:var(--c-soft)}
.dx-salon .hero{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5%,64px);align-items:center;padding-block:clamp(40px,7%,88px)}
.dx-salon h1{font-family:var(--f-disp);font-weight:400;font-size:clamp(46px,7.4cqi,96px);line-height:.98;letter-spacing:-.02em}
.dx-salon h1 em{display:block;color:var(--c-acc);padding-left:1.2em}
.dx-salon .hero p{font-size:17px;color:var(--c-soft);max-width:40ch;margin-top:24px}
.dx-salon .row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px}
.dx-salon .soon{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--c-line);border-radius:999px;padding:8px 16px;font-size:13px;margin-top:22px}
.dx-salon .soon b{color:var(--c-acc)}
.dx-salon .art{position:relative;padding:0 8% 10% 0}
.dx-salon .arch{aspect-ratio:3/4;border-radius:999px 999px 6px 6px}
.dx-salon .arch img{transform:scale(1.15);transition:transform 1.8s var(--eo)}
.dx-salon .arch.on img{transform:none}
.dx-salon .arch[data-r="clip"]{clip-path:inset(100% 0 0 0 round 999px 999px 6px 6px)}
.dx-salon .arch[data-r="clip"].on{clip-path:inset(0 0 0 0 round 999px 999px 6px 6px)}
.dx-salon .dot{position:absolute;right:0;bottom:0;width:42%;aspect-ratio:1;border-radius:50%;border:6px solid var(--c-bg);animation:drift 9s ease-in-out infinite}
@keyframes drift{50%{transform:translate(-8px,-12px)}}
.dx-salon .seal{position:absolute;z-index:2;left:-6%;top:12%;filter:drop-shadow(0 8px 18px rgba(51,32,29,.15));width:108px;height:108px;animation:spin 24s linear infinite}
.dx-salon .seal text{font-size:9.4px;letter-spacing:3px;fill:var(--c-fg);font-family:var(--f-body);text-transform:uppercase}
@keyframes spin{to{transform:rotate(360deg)}}
.dx-salon .sec{padding-block:clamp(60px,8%,100px);border-top:1px solid var(--c-line)}
.dx-salon h2{font-family:var(--f-disp);font-weight:400;font-size:clamp(34px,5cqi,60px);line-height:1.04}
.dx-salon h2 em{color:var(--c-acc)}
.dx-salon .head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:36px}
.dx-salon .tabs{display:inline-flex;background:#fff;border:1px solid var(--c-line);border-radius:999px;padding:4px;position:relative}
.dx-salon .tabs button{appearance:none;border:0;background:none;padding:10px 20px;border-radius:999px;cursor:pointer;font-size:14px;position:relative;z-index:1;transition:color .25s ease}
.dx-salon .tabs button[aria-selected="true"]{color:var(--c-on)}
.dx-salon .tabs .slider{position:absolute;top:4px;bottom:4px;left:0;border-radius:999px;background:var(--c-acc);transition:transform .45s var(--eo),width .45s var(--eo)}
.dx-salon .prices{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.dx-salon .pr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;padding:20px 0;border-bottom:1px solid var(--c-line)}
.dx-salon .pr h3{font-family:var(--f-disp);font-weight:500;font-size:22px}
.dx-salon .pr b{font-family:var(--f-disp);font-size:20px;font-weight:500}
.dx-salon .pr p{color:var(--c-soft);font-size:14px}
.dx-salon .pr span{font-size:12px;color:var(--c-soft);text-align:right;letter-spacing:.06em}
.dx-salon .team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.dx-salon .st{display:flex;flex-direction:column;gap:12px}
.dx-salon .st .ph{aspect-ratio:3/4;border-radius:200px 200px 4px 4px}
.dx-salon .st .ph img{filter:grayscale(1) contrast(1.05);transition:filter .6s ease,transform .8s var(--eo)}
@media (hover:hover) and (pointer:fine){.dx-salon .st:hover .ph img{filter:none;transform:scale(1.04)}}
.dx-salon .st h3{font-family:var(--f-disp);font-weight:500;font-size:26px}
.dx-salon .st p{font-size:14px;color:var(--c-soft)}
.dx-salon .st .tg{display:flex;flex-wrap:wrap;gap:6px}
.dx-salon .st .tg span{font-size:12px;border:1px solid var(--c-line);border-radius:999px;padding:3px 10px}
.dx-salon .flow{background:#fff;border:1px solid var(--c-line);border-radius:28px;overflow:hidden;display:grid;grid-template-columns:1.3fr .7fr}
.dx-salon .flow-main{padding:clamp(22px,4%,40px);display:flex;flex-direction:column;gap:22px;min-width:0}
.dx-salon .sbar{display:flex;gap:8px;font-size:13px}
.dx-salon .sbar span{flex:1;padding-top:10px;border-top:2px solid var(--c-line);color:var(--c-soft);transition:border-color .4s ease,color .4s ease}
.dx-salon .sbar span.on{border-color:var(--c-acc);color:var(--c-fg);font-weight:600}
.dx-salon .panes{overflow:hidden}
.dx-salon .track{display:flex;transition:transform .55s var(--ed)}
.dx-salon .pane{flex:0 0 100%;display:flex;flex-direction:column;gap:14px;min-width:0;padding:2px 6px 2px 2px}
.dx-salon .pane h3{font-family:var(--f-disp);font-size:26px;font-weight:500}
.dx-salon .opt{appearance:none;display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;width:100%;padding:14px 16px;border:1px solid var(--c-line);border-radius:14px;background:transparent;cursor:pointer;transition:border-color .2s ease,background-color .2s ease,scale .16s var(--eo)}
.dx-salon .opt:active{scale:.98}
.dx-salon .opt[aria-pressed="true"]{border-color:var(--c-acc);background:#A8404F0d}
.dx-salon .opt span{color:var(--c-soft);font-size:13px}
.dx-salon .opt img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.dx-salon .opt .who{display:flex;align-items:center;gap:12px}
.dx-salon .nav2{display:flex;justify-content:space-between;gap:10px}
.dx-salon .sum{background:#33201D;color:#F6ECE8;padding:clamp(22px,4%,36px);display:flex;flex-direction:column;gap:14px}
.dx-salon .sum h3{font-family:var(--f-disp);font-style:italic;font-weight:400;font-size:28px}
.dx-salon .sum div{display:flex;justify-content:space-between;gap:10px;font-size:14px;border-bottom:1px solid #ffffff22;padding-bottom:10px}
.dx-salon .sum div span{opacity:.7}
.dx-salon .sum .tot{font-family:var(--f-disp);font-size:30px;border:0;margin-top:auto}
.dx-salon .quotes{position:relative;min-height:190px;text-align:center;max-width:760px;margin-inline:auto}
.dx-salon .q{position:absolute;inset:0;display:flex;flex-direction:column;gap:18px;align-items:center;opacity:0;filter:blur(6px);transform:translateY(8px);transition:opacity .7s ease,filter .7s ease,transform .7s var(--eo)}
.dx-salon .q.cur{opacity:1;filter:none;transform:none}
.dx-salon .q p{font-family:var(--f-disp);font-style:italic;font-size:clamp(22px,3cqi,32px);line-height:1.3}
.dx-salon .q span{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-soft)}
.dx-salon .stars{color:var(--c-acc);letter-spacing:4px;text-align:center;margin-bottom:18px;font-size:14px}
.dx-salon .visit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5%,56px)}
.dx-salon .visit .ph{border-radius:20px;min-height:300px}
@container demo (max-width:760px){
  .dx-salon .nv{grid-template-columns:1fr auto}.dx-salon .nv .l{display:none}.dx-salon .brand{text-align:left}
  .dx-salon .hero,.dx-salon .prices,.dx-salon .flow,.dx-salon .visit{grid-template-columns:1fr}
  .dx-salon .team{grid-template-columns:1fr 1fr}.dx-salon .st:last-child{display:none}
  .dx-salon .seal{display:none}
}

/* ============ 3 · CLINIC: Aoba Dental (clinical white, teal, crisp & quick) ============ */
.dx-clinic{--c-bg:#FFFFFF;--c-fg:#0F2E2A;--c-soft:#4F6B67;--c-line:#DCE8E5;--c-acc:#127A69;--c-on:#FFFFFF;--c-mint:#EAF5F2;--f-body:'Plus Jakarta Sans',var(--sans);--f-disp:'Plus Jakarta Sans',var(--sans);--rd:.45s;--rs:14px;--btn-r:12px;--chip-r:12px}
.dx-clinic .util{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 20px;background:var(--c-fg);color:#CFE6E1;font-size:13px;padding-block:9px}
.dx-clinic .util span{display:inline-flex;gap:8px;align-items:center}
.dx-clinic .lang{display:inline-flex;background:#ffffff14;border-radius:8px;padding:3px}
.dx-clinic .lang button{appearance:none;border:0;background:none;color:#CFE6E1;padding:5px 12px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:700;transition:background-color .15s ease,color .15s ease}
.dx-clinic .lang button[aria-pressed="true"]{background:#fff;color:var(--c-fg)}
.dx-clinic [data-t]{transition:opacity .18s ease,filter .18s ease}
.dx-clinic.swap [data-t]{opacity:0;filter:blur(3px)}
.dx-clinic .nv{position:sticky;top:0;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:16px;background:#ffffffee;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--c-line)}
.dx-clinic .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.01em}
.dx-clinic .brand svg{width:30px;height:30px}
.dx-clinic .links{display:flex;gap:26px;font-size:14px;font-weight:500;color:var(--c-soft)}
.dx-clinic .links a{text-decoration:none}
.dx-clinic .hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5%,56px);align-items:center;padding-block:clamp(40px,7%,80px)}
.dx-clinic .pl{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:var(--c-mint);color:var(--c-acc);font-size:13px;font-weight:700;padding:7px 12px;border-radius:999px}
.dx-clinic .hero > div:first-child{display:flex;flex-direction:column;gap:22px}
.dx-clinic h1{font-weight:800;font-size:clamp(38px,5.6cqi,64px);line-height:1.04;letter-spacing:-.03em}
.dx-clinic h1 span{color:var(--c-acc)}
.dx-clinic .hero p{font-size:17px;color:var(--c-soft);max-width:46ch}
.dx-clinic .row{display:flex;flex-wrap:wrap;gap:10px}
.dx-clinic .trust{display:flex;flex-wrap:wrap;gap:22px;padding-top:8px;border-top:1px solid var(--c-line)}
.dx-clinic .trust div{display:flex;flex-direction:column}
.dx-clinic .trust b{font-size:26px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dx-clinic .trust span{font-size:13px;color:var(--c-soft)}
.dx-clinic .hero-art{position:relative}
.dx-clinic .hero-art .ph{aspect-ratio:5/4;border-radius:24px}
.dx-clinic .float{position:absolute;background:#fff;border:1px solid var(--c-line);border-radius:16px;padding:14px 16px;box-shadow:0 18px 40px rgba(15,46,42,.12);display:flex;gap:12px;align-items:center;font-size:13px;animation:bob 6s ease-in-out infinite}
.dx-clinic .float b{display:block;font-size:15px}
.dx-clinic .float i{width:36px;height:36px;border-radius:10px;background:var(--c-mint);display:grid;place-items:center;flex:0 0 auto}
.dx-clinic .float i svg{width:18px;height:18px;stroke:var(--c-acc);fill:none;stroke-width:2;stroke-linecap:round}
.dx-clinic .f1{left:-6%;bottom:12%}
.dx-clinic .f2{right:-4%;top:10%;animation-delay:-3s}
@keyframes bob{50%{transform:translateY(-8px)}}
.dx-clinic .sec{padding-block:clamp(56px,8%,96px)}
.dx-clinic .sec.tint{background:var(--c-mint)}
.dx-clinic h2{font-weight:800;font-size:clamp(28px,4cqi,44px);line-height:1.1;letter-spacing:-.025em}
.dx-clinic .head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:32px}
.dx-clinic .head p{color:var(--c-soft);max-width:44ch}
.dx-clinic .tx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.dx-clinic .tx article{background:#fff;border:1px solid var(--c-line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:10px;transition:border-color .2s ease,box-shadow .2s ease,transform .2s var(--eo)}
@media (hover:hover) and (pointer:fine){.dx-clinic .tx article:hover{border-color:var(--c-acc);box-shadow:0 12px 30px rgba(15,46,42,.08);transform:translateY(-2px)}}
.dx-clinic .tx i{width:44px;height:44px;border-radius:12px;background:var(--c-mint);display:grid;place-items:center}
.dx-clinic .tx i svg{width:22px;height:22px;fill:none;stroke:var(--c-acc);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dx-clinic .tx h3{font-size:18px;font-weight:700}
.dx-clinic .tx p{font-size:14px;color:var(--c-soft)}
.dx-clinic .tx b{margin-top:auto;font-size:14px;color:var(--c-acc)}
.dx-clinic .first{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:s}
.dx-clinic .first div{position:relative;padding-top:18px;border-top:2px solid var(--c-line);display:flex;flex-direction:column;gap:6px}
.dx-clinic .first div::before{counter-increment:s;content:"0" counter(s);font-size:13px;font-weight:800;color:var(--c-acc)}
.dx-clinic .first div::after{content:"";position:absolute;left:0;top:-2px;height:2px;width:100%;background:var(--c-acc);transform-origin:left;transform:scaleX(0);transition:transform .6s var(--eo);transition-delay:calc(var(--i,0) * 160ms + .1s)}
.dx-clinic .first.on div::after{transform:scaleX(1)}
.dx-clinic .first b{font-size:17px}
.dx-clinic .first span{font-size:14px;color:var(--c-soft)}
.dx-clinic .doc{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5%,56px);align-items:center}
.dx-clinic .doc .ph{aspect-ratio:4/5;border-radius:24px}
.dx-clinic .doc blockquote{margin:0;font-size:clamp(20px,2.6cqi,26px);font-weight:600;line-height:1.4;letter-spacing:-.01em}
.dx-clinic .doc ul{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:10px;font-size:15px;color:var(--c-soft)}
.dx-clinic .doc li{display:flex;gap:10px}
.dx-clinic .doc li::before{content:"";flex:0 0 18px;height:18px;border-radius:50%;background:var(--c-mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23127A69' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat;margin-top:3px}
.dx-clinic .bk{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.dx-clinic .bx{background:#fff;border:1px solid var(--c-line);border-radius:20px;padding:clamp(18px,3%,28px);display:flex;flex-direction:column;gap:16px;min-width:0}
.dx-clinic .cal-h{display:flex;justify-content:space-between;align-items:center;font-weight:700}
.dx-clinic .cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;text-align:center}
.dx-clinic .cal span{font-size:11px;font-weight:700;color:var(--c-soft);padding-bottom:4px}
.dx-clinic .cal button{appearance:none;aspect-ratio:1;border:1px solid transparent;border-radius:10px;background:var(--c-mint);cursor:pointer;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;transition:background-color .15s ease,color .15s ease,scale .12s var(--eo)}
.dx-clinic .cal button:active{scale:.94}
.dx-clinic .cal button:disabled{background:transparent;color:#A9BDB9;cursor:not-allowed}
.dx-clinic .cal button[aria-pressed="true"]{background:var(--c-acc);color:#fff}
.dx-clinic .cal .pad{visibility:hidden}
.dx-clinic .slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dx-clinic .slots .chip{padding-inline:6px}
.dx-clinic .sumline{font-size:14px;color:var(--c-soft);min-height:1.5em}
.dx-clinic .sumline b{color:var(--c-fg)}
.dx-clinic .qa details{border-bottom:1px solid var(--c-line)}
.dx-clinic .qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:18px 0;font-weight:700;font-size:17px}
.dx-clinic .qa summary::-webkit-details-marker{display:none}
.dx-clinic .qa summary::after{content:"+";font-size:22px;line-height:1;color:var(--c-acc);transition:transform .2s var(--eo)}
.dx-clinic .qa details[open] summary::after{transform:rotate(45deg)}
.dx-clinic .qa p{padding-bottom:18px;color:var(--c-soft);max-width:62ch}
.dx-clinic .info{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5%,56px)}
.dx-clinic .info .ph{border-radius:20px;aspect-ratio:16/10}
@container demo (max-width:760px){
  .dx-clinic .links{display:none}
  .dx-clinic .hero,.dx-clinic .doc,.dx-clinic .bk,.dx-clinic .info{grid-template-columns:1fr}
  .dx-clinic .tx{grid-template-columns:1fr 1fr}.dx-clinic .first{grid-template-columns:1fr 1fr}
  .dx-clinic .f2{display:none}.dx-clinic .f1{left:12px;bottom:12px}
}

/* ============ 4 · RYOKAN: Yuki no Yado (night snow, vertical script, slow & quiet) ============ */
.dx-ryokan{--c-bg:#0E1814;--c-fg:#ECEFE9;--c-soft:#A5B3AA;--c-line:#26372F;--c-acc:#E3B874;--c-on:#1A140C;--f-body:'Cormorant Garamond',serif;--f-disp:'Shippori Mincho',serif;--rd:1.3s;--rs:20px;font-size:18px}
.dx-ryokan .nv{position:absolute;left:0;right:0;top:0;z-index:4;display:flex;justify-content:space-between;align-items:center;padding-block:24px;font-family:var(--sans);font-size:12px;letter-spacing:.24em;text-transform:uppercase}
.dx-ryokan .nv .links{display:flex;gap:28px}
.dx-ryokan .nv a{text-decoration:none}
.dx-ryokan .brand{font-family:var(--f-disp);font-size:22px;letter-spacing:.3em;text-transform:none}
.dx-ryokan .cta{font-family:var(--sans);font-size:13px;letter-spacing:.14em;text-transform:uppercase;--btn-r:0;padding:14px 22px}
.dx-ryokan .hero{position:relative;height:min(720px,92vh);min-height:520px;overflow:hidden;isolation:isolate;display:flex;align-items:flex-end}
.dx-ryokan .hero .ph{position:absolute;inset:0;z-index:-2}
.dx-ryokan .hero .ph img{animation:kbslow 30s ease-out both}
@keyframes kbslow{from{transform:scale(1.18) translate(1%,1%)}to{transform:scale(1.02)}}
.dx-ryokan .hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0E181499,transparent 35%,transparent 55%,#0E1814)}
.dx-ryokan canvas.snow{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.dx-ryokan .v{position:absolute;right:clamp(24px,8%,96px);top:96px;z-index:1;writing-mode:vertical-rl;white-space:nowrap;font-family:var(--f-disp);font-size:clamp(40px,6cqi,76px);letter-spacing:.35em;line-height:1.3}
.dx-ryokan .v small{font-size:14px;letter-spacing:.5em;opacity:.8;margin-right:14px}
.dx-ryokan .hero .copy{position:relative;z-index:1;padding-bottom:56px;max-width:620px;display:flex;flex-direction:column;gap:18px}
.dx-ryokan h1{font-family:var(--f-body);font-weight:400;font-style:italic;font-size:clamp(40px,6cqi,76px);line-height:1}
.dx-ryokan .hero p{font-size:20px;color:var(--c-fg);opacity:.85}
.dx-ryokan .cue{position:absolute;left:50%;bottom:18px;z-index:1;width:1px;height:44px;background:linear-gradient(var(--c-fg),transparent);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.dx-ryokan .intro{text-align:center;padding-block:clamp(80px,12%,140px);display:flex;flex-direction:column;align-items:center;gap:26px}
.dx-ryokan .intro .jp{font-family:var(--f-disp);font-size:14px;letter-spacing:.6em;color:var(--c-acc)}
.dx-ryokan .intro p{font-size:clamp(24px,3.2cqi,34px);line-height:1.5;max-width:30ch}
.dx-ryokan .sec{padding-block:clamp(64px,9%,110px)}
.dx-ryokan h2{font-family:var(--f-body);font-weight:400;font-size:clamp(36px,5cqi,60px);line-height:1.05}
.dx-ryokan h2 small{display:block;font-family:var(--f-disp);font-size:13px;letter-spacing:.5em;color:var(--c-acc);margin-bottom:14px}
.dx-ryokan .head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:34px}
.dx-ryokan .arrows{display:flex;gap:8px}
.dx-ryokan .arrows button{appearance:none;width:48px;height:48px;border:1px solid var(--c-line);background:none;border-radius:50%;cursor:pointer;font-size:18px;transition:border-color .3s ease,scale .16s var(--eo)}
.dx-ryokan .arrows button:active{scale:.94}
@media (hover:hover) and (pointer:fine){.dx-ryokan .arrows button:hover{border-color:var(--c-acc)}}
.dx-ryokan .rooms{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:clamp(20px,5%,64px);scroll-padding-inline:clamp(20px,5%,64px)}
.dx-ryokan .rooms::-webkit-scrollbar{display:none}
.dx-ryokan .room{flex:0 0 min(560px,82%);scroll-snap-align:start;display:flex;flex-direction:column;gap:16px}
.dx-ryokan .room .ph{aspect-ratio:3/2}
.dx-ryokan .room .ph img{transition:transform 1.4s var(--eo)}
@media (hover:hover) and (pointer:fine){.dx-ryokan .room:hover .ph img{transform:scale(1.05)}}
.dx-ryokan .room h3{font-family:var(--f-body);font-weight:500;font-size:30px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.dx-ryokan .room h3 small{font-family:var(--f-disp);font-size:14px;color:var(--c-soft);letter-spacing:.2em}
.dx-ryokan .room .meta{display:flex;flex-wrap:wrap;gap:6px 20px;font-family:var(--sans);font-size:13px;color:var(--c-soft)}
.dx-ryokan .room .meta b{color:var(--c-acc);font-weight:600}
.dx-ryokan .split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,6%,80px);align-items:center}
.dx-ryokan .split.rev{grid-template-columns:.85fr 1.15fr}
.dx-ryokan .split.rev > .ph{order:2}
.dx-ryokan .split .ph{aspect-ratio:4/5}
.dx-ryokan .split p{font-size:20px;color:var(--c-soft);margin-top:18px}
.dx-ryokan .baths{margin-top:26px;font-family:var(--sans);font-size:14px}
.dx-ryokan .baths div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--c-line)}
.dx-ryokan .baths span{color:var(--c-soft)}
.dx-ryokan .courses{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column}
.dx-ryokan .courses li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;padding:12px 0;border-bottom:1px solid var(--c-line);align-items:baseline}
.dx-ryokan .courses li span{font-family:var(--f-disp);color:var(--c-acc);font-size:15px}
.dx-ryokan .courses li b{font-weight:500;font-size:19px}
.dx-ryokan .courses li small{display:block;font-size:15px;color:var(--c-soft)}
.dx-ryokan .avail{border:1px solid var(--c-line);display:grid;grid-template-columns:1.3fr .7fr;font-family:var(--sans);font-size:15px}
.dx-ryokan .avail .form{padding:clamp(22px,4%,40px);display:flex;flex-direction:column;gap:22px;min-width:0}
.dx-ryokan .avail .chip{--chip-r:0;font-family:var(--sans)}
.dx-ryokan .avail .chip small{display:block;font-size:11px;opacity:.7;font-weight:500}
.dx-ryokan .pair{display:flex;flex-wrap:wrap;gap:28px}
.dx-ryokan .pair > div{display:flex;flex-direction:column;gap:10px}
.dx-ryokan .quote{background:#16231D;padding:clamp(22px,4%,40px);display:flex;flex-direction:column;gap:12px;border-left:1px solid var(--c-line)}
.dx-ryokan .quote .big{font-family:var(--f-body);font-size:clamp(40px,5cqi,58px);line-height:1;font-variant-numeric:lining-nums tabular-nums}
.dx-ryokan .quote p{font-size:13px;color:var(--c-soft)}
.dx-ryokan .quote .cta{margin-top:auto}
.dx-ryokan .access{position:relative;min-height:420px;display:flex;align-items:flex-end;isolation:isolate}
.dx-ryokan .access .ph{position:absolute;inset:0;z-index:-1}
.dx-ryokan .access .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0E1814 10%,#0E181433)}
.dx-ryokan .access .copy{padding-block:48px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;width:100%;font-family:var(--sans);font-size:14px}
.dx-ryokan .access b{display:block;font-family:var(--f-body);font-size:24px;font-weight:500;margin-bottom:6px}
.dx-ryokan .access span{color:var(--c-soft)}
@container demo (max-width:760px){
  .dx-ryokan .nv .links{display:none}.dx-ryokan .v{font-size:36px;top:84px}
  .dx-ryokan .split,.dx-ryokan .split.rev,.dx-ryokan .avail,.dx-ryokan .access .copy{grid-template-columns:1fr}
  .dx-ryokan .split.rev > .ph{order:0}.dx-ryokan .quote{border-left:0;border-top:1px solid var(--c-line)}
}

/* ============ 5 · CAFÉ: Komorebi (oat & leaf, polaroids, bouncy cart) ============ */
.dx-cafe{--c-bg:#F3ECE1;--c-fg:#2A1C14;--c-soft:#6F5E51;--c-line:#E0D4C3;--c-acc:#C0643B;--c-on:#FFF8F0;--c-leaf:#56643A;--f-body:'DM Sans',var(--sans);--f-disp:'Fraunces',serif;--rd:.8s;--btn-r:999px;--spring:cubic-bezier(.34,1.56,.64,1)}
.dx-cafe .nv{position:sticky;top:12px;z-index:4;margin:12px clamp(12px,3%,40px) 0;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 10px 10px 22px;background:#FFFAF3e6;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--c-line);border-radius:999px}
.dx-cafe .brand{font-family:var(--f-disp);font-weight:600;font-size:22px;font-style:italic;letter-spacing:-.01em}
.dx-cafe .links{display:flex;gap:22px;font-size:14px;font-weight:500}
.dx-cafe .links a{text-decoration:none}
.dx-cafe .bag{appearance:none;display:inline-flex;align-items:center;gap:8px;background:var(--c-fg);color:var(--c-bg);border:0;border-radius:999px;padding:10px 16px;cursor:pointer;font-weight:700;font-size:14px}
.dx-cafe .bag b{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--c-acc);color:#fff;font-size:12px;font-variant-numeric:tabular-nums}
.dx-cafe .bag b.pop{animation:pop .45s var(--spring)}
@keyframes pop{40%{transform:scale(1.35)}}
.dx-cafe .hero{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5%,56px);align-items:center;padding-block:clamp(48px,8%,96px);overflow:hidden;isolation:isolate}
.dx-cafe .hero::before{content:"";position:absolute;inset:-20%;z-index:-1;background:radial-gradient(ellipse 12% 8% at 20% 30%,#56643A1c,transparent 70%),radial-gradient(ellipse 10% 14% at 70% 20%,#56643A18,transparent 70%),radial-gradient(ellipse 16% 9% at 60% 70%,#56643A14,transparent 70%),radial-gradient(ellipse 8% 12% at 35% 80%,#56643A16,transparent 70%);animation:leaves 14s ease-in-out infinite alternate}
@keyframes leaves{to{transform:translate(3%,2%) rotate(2deg)}}
.dx-cafe .hero > div:first-child{display:flex;flex-direction:column;gap:22px}
.dx-cafe h1{font-family:var(--f-disp);font-weight:500;font-size:clamp(46px,7cqi,92px);line-height:.95;letter-spacing:-.03em}
.dx-cafe h1 em{font-style:italic;color:var(--c-leaf)}
.dx-cafe .hero p{font-size:18px;color:var(--c-soft);max-width:40ch}
.dx-cafe .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.dx-cafe .stack{position:relative;height:clamp(340px,44cqi,480px)}
.dx-cafe .pol{position:absolute;width:56%;background:#fff;padding:10px 10px 34px;box-shadow:0 20px 40px rgba(42,28,20,.16);transition:transform .7s var(--spring)}
.dx-cafe .pol .ph{aspect-ratio:1}
.dx-cafe .pol span{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-family:var(--f-disp);font-style:italic;font-size:14px;color:var(--c-soft)}
.dx-cafe .pol:nth-child(1){left:4%;top:8%;transform:rotate(-8deg)}
.dx-cafe .pol:nth-child(2){left:40%;top:0;transform:rotate(6deg)}
.dx-cafe .pol:nth-child(3){left:22%;top:34%;transform:rotate(-2deg);z-index:1}
@media (hover:hover) and (pointer:fine){
  .dx-cafe .stack:hover .pol:nth-child(1){transform:rotate(-14deg) translate(-22px,-6px)}
  .dx-cafe .stack:hover .pol:nth-child(2){transform:rotate(12deg) translate(24px,-10px)}
  .dx-cafe .stack:hover .pol:nth-child(3){transform:rotate(0) translateY(14px)}
}
.dx-cafe .sticker{position:absolute;right:4%;bottom:6%;z-index:2;width:112px;height:112px;border-radius:50%;background:var(--c-leaf);color:#F3ECE1;display:grid;place-items:center;text-align:center;font-family:var(--f-disp);font-style:italic;font-size:17px;line-height:1.1;transform:rotate(-12deg);box-shadow:0 10px 24px rgba(42,28,20,.2)}
.dx-cafe .sec{padding-block:clamp(56px,8%,96px)}
.dx-cafe h2{font-family:var(--f-disp);font-weight:500;font-size:clamp(34px,5cqi,58px);line-height:1;letter-spacing:-.02em}
.dx-cafe h2 em{font-style:italic;color:var(--c-acc)}
.dx-cafe .shop{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start;margin-top:30px}
.dx-cafe .tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.dx-cafe .tabs button{appearance:none;border:1px solid var(--c-line);background:transparent;border-radius:999px;padding:9px 18px;cursor:pointer;font-weight:600;font-size:14px;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.dx-cafe .tabs button[aria-selected="true"]{background:var(--c-fg);color:var(--c-bg);border-color:var(--c-fg)}
.dx-cafe .items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.dx-cafe .it{background:#FFFAF3;border:1px solid var(--c-line);border-radius:22px;padding:10px;display:flex;flex-direction:column;gap:10px;transition:transform .5s var(--spring),opacity .3s ease}
.dx-cafe .it.out{opacity:0;transform:scale(.94)}
.dx-cafe .it .ph{aspect-ratio:1;border-radius:14px}
.dx-cafe .it .ph img{transition:transform .8s var(--eo)}
@media (hover:hover) and (pointer:fine){.dx-cafe .it:hover .ph img{transform:scale(1.06) rotate(1deg)}}
.dx-cafe .it{position:relative}
.dx-cafe .it > div{padding:2px 6px 6px}
.dx-cafe .it > div > div{display:flex;flex-direction:column;gap:2px}
.dx-cafe .it h3{font-family:var(--f-disp);font-weight:600;font-size:19px;line-height:1.1}
.dx-cafe .it small{display:block;font-size:13px;color:var(--c-soft)}
.dx-cafe .add{appearance:none;position:absolute;right:18px;top:18px;box-shadow:0 6px 16px rgba(42,28,20,.25);width:44px;height:44px;border-radius:50%;border:0;background:var(--c-acc);color:#fff;font-size:22px;cursor:pointer;transition:scale .3s var(--spring)}
.dx-cafe .add:active{scale:.86}
.dx-cafe .cart{position:sticky;top:84px;background:var(--c-fg);color:var(--c-bg);border-radius:26px;padding:22px;display:flex;flex-direction:column;gap:14px}
.dx-cafe .cart h3{font-family:var(--f-disp);font-weight:500;font-size:26px;font-style:italic}
.dx-cafe .lines{display:flex;flex-direction:column;gap:10px;min-height:48px}
.dx-cafe .lines .empty{font-size:14px;opacity:.6}
.dx-cafe .ln{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;font-size:14px;animation:lnin .45s var(--spring)}
@keyframes lnin{from{opacity:0;transform:translateY(8px) scale(.96)}}
.dx-cafe .ln .stp{border-color:#ffffff33}
.dx-cafe .ln .stp button{width:32px;height:32px;font-size:16px;color:var(--c-bg)}
.dx-cafe .ln .stp output{min-width:1.6em;font-size:13px}
.dx-cafe .cart .lbl{color:#F3ECE1aa}
.dx-cafe .cart .chip{border-color:#ffffff33;min-height:38px;padding:6px 12px;font-size:13px}
.dx-cafe .cart .chip[aria-pressed="true"]{color:#fff}
.dx-cafe .tot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid #ffffff22;padding-top:14px;font-family:var(--f-disp);font-size:28px;font-variant-numeric:tabular-nums}
.dx-cafe .tot span{font-family:var(--f-body);font-size:13px;opacity:.7}
.dx-cafe .beans{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5%,56px);align-items:center;background:var(--c-leaf);color:#F3ECE1;border-radius:32px;padding:clamp(22px,4%,44px);overflow:hidden}
.dx-cafe .beans .ph{aspect-ratio:1;border-radius:24px;transform:rotate(-3deg)}
.dx-cafe .beans h2 em{color:#F3C9A8}
.dx-cafe .beans p{opacity:.85;font-size:17px;margin-top:14px}
.dx-cafe .notes{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.dx-cafe .notes span{border:1px solid #F3ECE155;border-radius:999px;padding:6px 14px;font-size:14px}
.dx-cafe .visit{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5%,56px)}
.dx-cafe .visit .ph{border-radius:28px;min-height:320px}
.dx-cafe .perks{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.dx-cafe .perks span{background:#FFFAF3;border:1px solid var(--c-line);border-radius:999px;padding:6px 12px;font-size:13px}
@container demo (max-width:1100px){.dx-cafe .items{grid-template-columns:1fr 1fr}}
@container demo (max-width:860px){.dx-cafe .shop{grid-template-columns:1fr}.dx-cafe .cart{position:relative;top:0}}
@container demo (max-width:760px){
  .dx-cafe .links{display:none}
  .dx-cafe .hero,.dx-cafe .beans,.dx-cafe .visit{grid-template-columns:1fr}
  .dx-cafe .items{grid-template-columns:1fr 1fr}
}

/* ============ 6 · REAL ESTATE: MINATO Homes (navy & brass, search-first, FLIP filters) ============ */
.dx-realestate{--c-bg:#F5F6F8;--c-fg:#0C1A2B;--c-soft:#5B6878;--c-line:#DDE2E9;--c-acc:#0C1A2B;--c-on:#FFFFFF;--c-brass:#C99A3E;--f-body:'Manrope',var(--sans);--f-disp:'Space Grotesk',var(--sans);--rd:.55s;--rs:16px;--btn-r:10px;--chip-r:10px}
.dx-realestate .nv{position:sticky;top:0;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:14px;background:#0C1A2B;color:#fff}
.dx-realestate .brand{font-family:var(--f-disp);font-weight:700;font-size:21px;letter-spacing:.14em;display:flex;align-items:center;gap:10px}
.dx-realestate .brand i{width:10px;height:10px;background:var(--c-brass);transform:rotate(45deg)}
.dx-realestate .links{display:flex;gap:24px;font-size:14px;color:#C5CEDA}
.dx-realestate .links a{text-decoration:none}
.dx-realestate .saved{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;border:1px solid #ffffff33;border-radius:10px;padding:8px 12px}
.dx-realestate .saved svg{width:16px;height:16px;fill:var(--c-brass)}
.dx-realestate .saved b{font-variant-numeric:tabular-nums}
.dx-realestate .hero{position:relative;min-height:520px;display:flex;flex-direction:column;justify-content:flex-end;gap:28px;padding-block:80px 40px;isolation:isolate;color:#fff}
.dx-realestate .hero .ph{position:absolute;inset:0;z-index:-1}
.dx-realestate .hero .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0C1A2Bf2 0%,#0C1A2B80 45%,#0C1A2B22)}
.dx-realestate .hero .ph img{transform:scale(1.08);animation:reslide 18s ease-out both}
@keyframes reslide{from{transform:scale(1.14) translateY(2%)}to{transform:scale(1.02)}}
.dx-realestate h1{font-family:var(--f-disp);font-weight:700;font-size:clamp(40px,6.2cqi,78px);line-height:.98;letter-spacing:-.03em;max-width:14ch}
.dx-realestate h1 em{font-style:normal;color:var(--c-brass)}
.dx-realestate .hero p{color:#C5CEDA;font-size:17px;max-width:48ch}
.dx-realestate .search{background:#fff;color:var(--c-fg);border-radius:16px;padding:10px;display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr)) auto;gap:8px;align-items:stretch;box-shadow:0 30px 60px rgba(0,0,0,.25)}
.dx-realestate .seg{display:flex;background:var(--c-bg);border-radius:10px;padding:4px}
.dx-realestate .seg button{appearance:none;border:0;background:none;border-radius:7px;padding:0 16px;cursor:pointer;font-weight:700;font-size:14px;transition:background-color .2s ease,color .2s ease}
.dx-realestate .seg button[aria-pressed="true"]{background:var(--c-fg);color:#fff}
.dx-realestate .field{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:6px 12px;border-left:1px solid var(--c-line);min-width:0}
.dx-realestate .field span{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-soft)}
.dx-realestate .field select{appearance:none;border:0;background:transparent;font:inherit;font-weight:700;font-size:15px;color:var(--c-fg);padding:2px 0;cursor:pointer;width:100%}
.dx-realestate .go{appearance:none;border:0;background:var(--c-brass);color:#0C1A2B;border-radius:10px;padding:0 20px;font-weight:800;font-size:15px;cursor:pointer;white-space:nowrap;min-height:52px;transition:scale .16s var(--eo)}
.dx-realestate .go:active{scale:.97}
.dx-realestate .go b{display:inline-block;font-variant-numeric:tabular-nums}
.dx-realestate .go b.tick{animation:tick .35s var(--eo)}
@keyframes tick{from{transform:translateY(-60%);opacity:0}}
.dx-realestate .sec{padding-block:clamp(48px,7%,88px)}
.dx-realestate h2{font-family:var(--f-disp);font-weight:700;font-size:clamp(28px,4cqi,44px);letter-spacing:-.025em;line-height:1.05}
.dx-realestate .head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:24px}
.dx-realestate .head p{color:var(--c-soft)}
.dx-realestate .filters{display:flex;flex-wrap:wrap;gap:8px}
.dx-realestate .filters .chip{background:#fff;min-height:40px;padding:8px 14px}
.dx-realestate .filters .chip[aria-pressed="true"]{background:var(--c-acc);color:#fff}
.dx-realestate .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.dx-realestate .ls{background:#fff;border:1px solid var(--c-line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:opacity .3s ease,transform .5s var(--eo),box-shadow .3s ease}
.dx-realestate .ls.gone{display:none}
@media (hover:hover) and (pointer:fine){.dx-realestate .ls:hover{box-shadow:0 18px 40px rgba(12,26,43,.12)}}
.dx-realestate .ls .ph{aspect-ratio:4/3}
.dx-realestate .ls .ph img{position:absolute;inset:0;transition:opacity .45s ease,transform .9s var(--eo)}
.dx-realestate .ls .ph img+img{opacity:0}
@media (hover:hover) and (pointer:fine){.dx-realestate .ls:hover .ph img+img{opacity:1}.dx-realestate .ls:hover .ph img{transform:scale(1.04)}}
.dx-realestate .tg{position:absolute;left:12px;top:12px;z-index:1;display:flex;gap:6px;flex-wrap:wrap}
.dx-realestate .tg span{background:#fff;color:var(--c-fg);font-size:11px;font-weight:800;letter-spacing:.04em;padding:4px 8px;border-radius:6px}
.dx-realestate .tg span.new{background:var(--c-brass)}
.dx-realestate .heart{appearance:none;position:absolute;right:10px;top:10px;z-index:1;width:40px;height:40px;border-radius:50%;border:0;background:#ffffffe6;cursor:pointer;display:grid;place-items:center;transition:scale .2s var(--eo)}
.dx-realestate .heart:active{scale:.88}
.dx-realestate .heart svg{width:18px;height:18px;fill:none;stroke:var(--c-fg);stroke-width:2;transition:fill .2s ease,stroke .2s ease}
.dx-realestate .heart[aria-pressed="true"] svg{fill:#D2453B;stroke:#D2453B;animation:pop .4s cubic-bezier(.34,1.56,.64,1)}
.dx-realestate .ls .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px}
.dx-realestate .ls .amt{font-family:var(--f-disp);font-weight:700;font-size:22px;letter-spacing:-.01em}
.dx-realestate .ls .amt small{font-size:13px;color:var(--c-soft);font-weight:500}
.dx-realestate .ls h3{font-size:15px;font-weight:700}
.dx-realestate .ls .facts{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--c-soft)}
.dx-realestate .ls .book{appearance:none;margin-top:8px;border:1px solid var(--c-line);background:none;border-radius:10px;padding:10px;font-weight:700;font-size:14px;cursor:pointer;transition:background-color .2s ease,color .2s ease,scale .16s var(--eo)}
.dx-realestate .ls .book:active{scale:.97}
@media (hover:hover) and (pointer:fine){.dx-realestate .ls .book:hover{background:var(--c-fg);color:#fff}}
.dx-realestate .none{grid-column:1/-1;text-align:center;padding:48px;color:var(--c-soft);border:1px dashed var(--c-line);border-radius:16px}
.dx-realestate .abroad{background:#0C1A2B;color:#fff;border-radius:24px;padding:clamp(22px,4%,48px);display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5%,56px)}
.dx-realestate .abroad p{color:#C5CEDA;margin-top:14px}
.dx-realestate .abroad ol{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px;counter-reset:a}
.dx-realestate .abroad li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:16px 0;border-bottom:1px solid #ffffff1f}
.dx-realestate .abroad li::before{counter-increment:a;content:counter(a);width:36px;height:36px;border-radius:50%;border:1px solid var(--c-brass);color:var(--c-brass);display:grid;place-items:center;font-family:var(--f-disp);font-weight:700}
.dx-realestate .abroad li b{display:block}
.dx-realestate .abroad li span{color:#C5CEDA;font-size:14px}
.dx-realestate .view{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.dx-realestate .bx{background:#fff;border:1px solid var(--c-line);border-radius:18px;padding:clamp(18px,3%,28px);display:flex;flex-direction:column;gap:16px;min-width:0}
.dx-realestate .agent{display:flex;gap:14px;align-items:center}
.dx-realestate .agent .ph{width:64px;height:64px;border-radius:50%;flex:0 0 auto}
.dx-realestate .agent b{display:block;font-size:17px}
.dx-realestate .agent span{font-size:13px;color:var(--c-soft)}
.dx-realestate .picked{display:flex;gap:12px;align-items:center;background:var(--c-bg);border-radius:12px;padding:10px}
.dx-realestate .picked .ph{width:72px;height:54px;border-radius:8px;flex:0 0 auto}
.dx-realestate .picked b{display:block;font-size:14px}
.dx-realestate .picked span{font-size:13px;color:var(--c-soft)}
@container demo (max-width:860px){.dx-realestate .search{grid-template-columns:1fr 1fr}.dx-realestate .seg{grid-column:1/-1}.dx-realestate .field{border-left:0;border-top:1px solid var(--c-line)}.dx-realestate .go{grid-column:1/-1}}
@container demo (max-width:760px){
  .dx-realestate .links{display:none}
  .dx-realestate .grid{grid-template-columns:1fr 1fr}
  .dx-realestate .abroad,.dx-realestate .view{grid-template-columns:1fr}
}
@container demo (max-width:520px){.dx-realestate .grid{grid-template-columns:1fr}}

/* ============ 7 · GYM: TETSU (black & safety orange, condensed caps, hard cuts) ============ */
.dx-gym{--c-bg:#0B0C0E;--c-fg:#EDEDE9;--c-soft:#9A9C9F;--c-line:#26282C;--c-acc:#FF5A1F;--c-on:#0B0C0E;--f-body:'Manrope',var(--sans);--f-disp:'Anton',Impact,sans-serif;--rd:.5s;--rs:40px;--btn-r:0;--chip-r:0}
.dx-gym [data-r="skew"]{transform:translateY(60%) skewY(6deg);opacity:0}
.dx-gym [data-r="skew"].on{transform:none;opacity:1}
.dx-gym .nv{position:sticky;top:0;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:14px;background:#0B0C0E;border-bottom:1px solid var(--c-line)}
.dx-gym .brand{font-family:var(--f-disp);font-size:26px;letter-spacing:.06em;display:flex;align-items:center;gap:10px}
.dx-gym .brand i{font-style:normal;font-family:'Shippori Mincho',serif;background:var(--c-acc);color:var(--c-on);width:34px;height:34px;display:grid;place-items:center;font-size:20px;font-weight:700}
.dx-gym .links{display:flex;gap:24px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-soft)}
.dx-gym .links a{text-decoration:none}
.dx-gym .cta{text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.dx-gym .hero{position:relative;min-height:600px;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;overflow:hidden}
.dx-gym .hero .ph{position:absolute;inset:0;z-index:-1}
.dx-gym .hero .ph img{filter:grayscale(1) contrast(1.15) brightness(.7)}
.dx-gym .hero .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0B0C0E 5%,transparent 60%),linear-gradient(90deg,#0B0C0Ecc,transparent 70%)}
.dx-gym h1{font-family:var(--f-disp);font-weight:400;font-size:clamp(64px,13cqi,168px);line-height:.86;text-transform:uppercase;letter-spacing:-.005em}
.dx-gym h1 .ln{display:block;overflow:hidden;padding-bottom:.04em}
.dx-gym h1 .ln span{display:block}
.dx-gym h1 .o{color:var(--c-acc)}
.dx-gym .hero .copy{padding-block:40px 36px;display:flex;flex-direction:column;gap:22px}
.dx-gym .hero p{max-width:46ch;color:#C9CACC;font-size:17px}
.dx-gym .row{display:flex;flex-wrap:wrap;gap:10px}
.dx-gym .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
.dx-gym .stats div{padding:22px clamp(14px,3%,28px);border-left:1px solid var(--c-line)}
.dx-gym .stats div:first-child{border-left:0}
.dx-gym .stats b{display:block;font-family:var(--f-disp);font-weight:400;font-size:clamp(36px,5cqi,56px);line-height:1;font-variant-numeric:tabular-nums}
.dx-gym .stats span{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-soft)}
.dx-gym .band{background:var(--c-acc);color:var(--c-on);overflow:hidden;transform:rotate(-2deg);margin:40px -2%;padding:14px 0}
.dx-gym .band div{display:flex;gap:40px;width:max-content;animation:dxmq 16s linear infinite}
.dx-gym .band span{font-family:var(--f-disp);font-size:clamp(26px,3.6cqi,40px);text-transform:uppercase;white-space:nowrap}
.dx-gym .band span::after{content:"✕";margin-left:40px;font-size:.6em;vertical-align:middle}
.dx-gym .sec{padding-block:clamp(56px,8%,96px)}
.dx-gym h2{font-family:var(--f-disp);font-weight:400;font-size:clamp(44px,7cqi,88px);line-height:.9;text-transform:uppercase}
.dx-gym h2 .o{color:var(--c-acc)}
.dx-gym .head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:28px}
.dx-gym .days{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--c-line)}
.dx-gym .days button{appearance:none;border:0;border-left:1px solid var(--c-line);background:none;padding:12px 16px;cursor:pointer;font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--c-soft);transition:background-color .12s linear,color .12s linear}
.dx-gym .days button:first-child{border-left:0}
.dx-gym .days button[aria-selected="true"]{background:var(--c-fg);color:var(--c-on)}
.dx-gym .tt{display:flex;flex-direction:column;border-top:1px solid var(--c-line)}
.dx-gym .cls{appearance:none;display:grid;grid-template-columns:90px minmax(0,1.4fr) minmax(0,1fr) 160px 110px;align-items:center;gap:16px;padding:18px 12px;border:0;border-bottom:1px solid var(--c-line);background:transparent;text-align:left;cursor:pointer;position:relative;transition:background-color .15s linear}
.dx-gym .cls::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c-acc);transform:scaleY(0);transition:transform .2s var(--eo)}
.dx-gym .cls[aria-pressed="true"]{background:#16181B}
.dx-gym .cls[aria-pressed="true"]::before{transform:none}
@media (hover:hover) and (pointer:fine){.dx-gym .cls:hover{background:#131518}}
.dx-gym .cls time{font-family:var(--f-disp);font-size:26px;font-variant-numeric:tabular-nums}
.dx-gym .cls b{font-size:17px;text-transform:uppercase;letter-spacing:.04em}
.dx-gym .cls span{color:var(--c-soft);font-size:14px}
.dx-gym .meter{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.dx-gym .meter i{display:block;height:4px;background:var(--c-line);position:relative;overflow:hidden}
.dx-gym .meter i::after{content:"";position:absolute;inset:0;background:var(--c-fg);transform-origin:left;transform:scaleX(var(--f,.5))}
.dx-gym .meter.hot{color:var(--c-acc)}
.dx-gym .meter.hot i::after{background:var(--c-acc)}
.dx-gym .cls em{font-style:normal;justify-self:end;font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--c-line);padding:8px 12px}
.dx-gym .cls[aria-pressed="true"] em{background:var(--c-acc);color:var(--c-on);border-color:var(--c-acc)}
.dx-gym .progs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.dx-gym .prog{position:relative;aspect-ratio:3/4;overflow:hidden;display:flex;align-items:flex-end;isolation:isolate}
.dx-gym .prog .ph{position:absolute;inset:0;z-index:-1}
.dx-gym .prog .ph img{filter:grayscale(1) contrast(1.1) brightness(.75);transition:transform .7s var(--eo),filter .4s ease}
.dx-gym .prog .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0B0C0Ef0,transparent 60%)}
@media (hover:hover) and (pointer:fine){.dx-gym .prog:hover .ph img{transform:scale(1.07);filter:grayscale(0) contrast(1.1) brightness(.8)}}
.dx-gym .prog div{padding:22px;display:flex;flex-direction:column;gap:6px}
.dx-gym .prog b{font-family:var(--f-disp);font-weight:400;font-size:38px;text-transform:uppercase;line-height:1}
.dx-gym .prog span{color:#C9CACC;font-size:14px}
.dx-gym .prog small{color:var(--c-acc);font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:11px}
.dx-gym .toggle{display:inline-flex;align-items:center;gap:12px;font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.dx-gym .sw{appearance:none;width:56px;height:30px;border:1px solid var(--c-line);background:#16181B;position:relative;cursor:pointer}
.dx-gym .sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;background:var(--c-fg);transition:transform .25s var(--eo),background-color .2s linear}
.dx-gym .sw[aria-checked="true"]::after{transform:translateX(26px);background:var(--c-acc)}
.dx-gym .toggle em{font-style:normal;color:var(--c-acc)}
.dx-gym .tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.dx-gym .tier{background:#131518;padding:clamp(20px,3%,32px);display:flex;flex-direction:column;gap:16px}
.dx-gym .tier.hot{background:var(--c-fg);color:var(--c-on)}
.dx-gym .tier.hot span,.dx-gym .tier.hot li{color:#3B3D40}
.dx-gym .tier h3{font-size:14px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.dx-gym .tier .pr{font-family:var(--f-disp);font-size:56px;line-height:1;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:8px}
.dx-gym .tier .pr small{font-family:var(--f-body);font-size:13px;font-weight:700;color:var(--c-soft)}
.dx-gym .tier ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-size:14px;color:#C9CACC;flex:1}
.dx-gym .tier li::before{content:"— ";color:var(--c-acc)}
.dx-gym .tier .cta{justify-content:center}
.dx-gym .tier.hot .cta{background:var(--c-on);border-color:var(--c-on);color:var(--c-fg)}
.dx-gym .free{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.dx-gym .free > div{background:#131518;padding:clamp(22px,4%,44px);display:flex;flex-direction:column;gap:16px}
.dx-gym .free .ph{min-height:320px}
.dx-gym .free .ph img{filter:grayscale(1) contrast(1.1)}
.dx-gym .pick{border:1px dashed var(--c-line);padding:14px 16px;font-size:15px}
.dx-gym .pick b{color:var(--c-acc)}
@container demo (max-width:760px){
  .dx-gym .links{display:none}
  .dx-gym .stats{grid-template-columns:1fr 1fr}.dx-gym .stats div:nth-child(3){border-left:0}.dx-gym .stats div:nth-child(n+3){border-top:1px solid var(--c-line)}
  .dx-gym .cls{grid-template-columns:70px minmax(0,1fr) auto}.dx-gym .cls > span,.dx-gym .cls .meter{display:none}
  .dx-gym .progs,.dx-gym .tiers,.dx-gym .free{grid-template-columns:1fr}
  .dx-gym .prog{aspect-ratio:16/10}
}

/* ============ 8 · SHOP: Mori Ceramics (paper white, hairlines, calm drawer) ============ */
.dx-shop{--c-bg:#F4F1EA;--c-fg:#1F1D1A;--c-soft:#6E6960;--c-line:#DDD7CB;--c-acc:#1F1D1A;--c-on:#F4F1EA;--c-clay:#A8714D;--f-body:'Manrope',var(--sans);--f-disp:'EB Garamond',serif;--rd:.9s;--rs:18px;--btn-r:0;--chip-r:0}
.dx-shop .ann{background:var(--c-fg);color:var(--c-bg);text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:9px 16px}
.dx-shop .nv{position:sticky;top:0;z-index:4;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding-block:18px;background:#F4F1EAf2;border-bottom:1px solid var(--c-line)}
.dx-shop .links{display:flex;gap:24px;font-size:13px;letter-spacing:.06em}
.dx-shop .links a{text-decoration:none}
.dx-shop .brand{font-family:var(--f-disp);font-size:26px;letter-spacing:.04em;text-align:center;line-height:1}
.dx-shop .brand small{display:block;font-family:'Shippori Mincho',serif;font-size:11px;letter-spacing:.5em;color:var(--c-soft);margin-top:4px}
.dx-shop .bagbtn{appearance:none;justify-self:end;background:none;border:0;cursor:pointer;font-size:13px;letter-spacing:.06em;display:inline-flex;align-items:center;padding:8px 0;min-height:44px}
.dx-shop .bagbtn b{font-variant-numeric:tabular-nums}
.dx-shop .hero{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(18px,3%,32px);padding-block:clamp(28px,5%,56px)}
.dx-shop .hero .big{aspect-ratio:4/5}
.dx-shop .hero .side{display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.dx-shop .hero .small{aspect-ratio:1}
.dx-shop h1{font-family:var(--f-disp);font-weight:400;font-size:clamp(40px,5.8cqi,76px);line-height:1;letter-spacing:-.01em}
.dx-shop h1 em{color:var(--c-clay)}
.dx-shop .hero p{color:var(--c-soft);font-size:16px;max-width:36ch;margin-top:16px}
.dx-shop .note{display:flex;gap:10px;align-items:center;font-size:13px;border-top:1px solid var(--c-line);padding-top:14px}
.dx-shop .note i{width:8px;height:8px;border-radius:50%;background:var(--c-clay)}
.dx-shop .ul{display:inline-block;font-size:14px;letter-spacing:.06em;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px;margin-top:22px;background:none;border-top:0;border-left:0;border-right:0;cursor:pointer}
.dx-shop .sec{padding-block:clamp(56px,8%,96px);border-top:1px solid var(--c-line)}
.dx-shop h2{font-family:var(--f-disp);font-weight:400;font-size:clamp(32px,4.6cqi,54px);line-height:1.05}
.dx-shop .head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:28px}
.dx-shop .fl{display:flex;gap:22px;font-size:14px}
.dx-shop .fl button{appearance:none;background:none;border:0;padding:6px 0;cursor:pointer;color:var(--c-soft);border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease}
.dx-shop .fl button[aria-selected="true"]{color:var(--c-fg);border-color:var(--c-fg)}
.dx-shop .prods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 20px}
.dx-shop .pd{display:flex;flex-direction:column;gap:12px;transition:opacity .35s ease}
.dx-shop .pd.gone{display:none}
.dx-shop .pd .ph{aspect-ratio:4/5}
.dx-shop .pd .ph img{position:absolute;inset:0;transition:opacity .6s ease,transform 1.2s var(--eo)}
.dx-shop .pd .ph img+img{opacity:0}
@media (hover:hover) and (pointer:fine){.dx-shop .pd:hover .ph img+img{opacity:1}.dx-shop .pd:hover .ph img{transform:scale(1.03)}}
.dx-shop .pd .ph .left{position:absolute;left:10px;top:10px;z-index:1;background:var(--c-bg);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px}
.dx-shop .pd .quick{appearance:none;position:absolute;left:10px;right:10px;bottom:10px;z-index:1;border:0;background:var(--c-fg);color:var(--c-bg);padding:12px;font-size:13px;letter-spacing:.08em;cursor:pointer;transform:translateY(calc(100% + 12px));transition:transform .4s var(--eo),scale .16s var(--eo)}
.dx-shop .pd .quick:active{scale:.98}
.dx-shop .pd .quick:focus-visible{transform:none}
@media (hover:hover) and (pointer:fine){.dx-shop .pd:hover .quick{transform:none}}
@media (hover:none){.dx-shop .pd .quick{transform:none;position:relative;left:auto;right:auto;bottom:auto;margin-top:0}}
.dx-shop .pd .t{display:flex;justify-content:space-between;gap:12px}
.dx-shop .pd h3{font-family:var(--f-disp);font-weight:400;font-size:21px;line-height:1.2}
.dx-shop .pd span{font-size:13px;color:var(--c-soft)}
.dx-shop .pd b{font-weight:500;font-size:15px;white-space:nowrap}
.dx-shop .proc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.dx-shop .proc div{display:flex;flex-direction:column;gap:10px}
.dx-shop .proc .ph{aspect-ratio:3/4}
.dx-shop .proc b{font-family:var(--f-disp);font-weight:400;font-size:22px;display:flex;gap:10px;align-items:baseline}
.dx-shop .proc b small{font-family:var(--f-body);font-size:11px;color:var(--c-soft);letter-spacing:.14em}
.dx-shop .proc span{font-size:14px;color:var(--c-soft)}
.dx-shop .visit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5%,56px);align-items:start}
.dx-shop .visit .form{display:flex;flex-direction:column;gap:18px;border:1px solid var(--c-line);padding:clamp(20px,4%,36px);background:#FBF9F4}
.dx-shop .drawer-wrap{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.dx-shop .scrim{position:absolute;inset:0;background:#1F1D1A55;opacity:0;transition:opacity .3s ease}
.dx-shop .drawer{position:absolute;top:0;right:0;bottom:0;width:min(400px,92%);background:var(--c-bg);border-left:1px solid var(--c-line);transform:translateX(100%);transition:transform .5s var(--ed);display:flex;flex-direction:column;box-shadow:-30px 0 60px rgba(0,0,0,.12)}
.dx-shop .drawer-wrap.open{pointer-events:auto}
.dx-shop .drawer-wrap.open .scrim{opacity:1}
.dx-shop .drawer-wrap.open .drawer{transform:none}
.dx-shop .dh{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--c-line)}
.dx-shop .dh h3{font-family:var(--f-disp);font-weight:400;font-size:26px}
.dx-shop .dh button{appearance:none;background:none;border:0;cursor:pointer;font-size:13px;min-height:44px;padding:0 4px}
.dx-shop .ship{padding:16px 22px;border-bottom:1px solid var(--c-line);font-size:13px;display:flex;flex-direction:column;gap:10px}
.dx-shop .ship i{display:block;height:3px;background:var(--c-line);position:relative;overflow:hidden}
.dx-shop .ship i::after{content:"";position:absolute;inset:0;background:var(--c-clay);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .7s var(--eo)}
.dx-shop .dl{flex:1;overflow:auto;padding:8px 22px;display:flex;flex-direction:column}
.dx-shop .dl .empty{color:var(--c-soft);font-size:14px;padding:24px 0}
.dx-shop .dli{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--c-line);animation:dlin .5s var(--eo)}
@keyframes dlin{from{opacity:0;transform:translateX(16px)}}
.dx-shop .dli .ph{aspect-ratio:1}
.dx-shop .dli b{font-family:var(--f-disp);font-weight:400;font-size:18px;display:block}
.dx-shop .dli span{font-size:12px;color:var(--c-soft)}
.dx-shop .dli button{appearance:none;background:none;border:0;cursor:pointer;font-size:12px;color:var(--c-soft);text-decoration:underline;min-height:44px}
.dx-shop .df{padding:18px 22px;border-top:1px solid var(--c-line);display:flex;flex-direction:column;gap:12px}
.dx-shop .df div{display:flex;justify-content:space-between;font-size:15px}
.dx-shop .df div b{font-variant-numeric:tabular-nums}
@container demo (max-width:760px){
  .dx-shop .nv{grid-template-columns:1fr auto}.dx-shop .links{display:none}.dx-shop .brand{text-align:left}
  .dx-shop .hero,.dx-shop .visit{grid-template-columns:1fr}
  .dx-shop .prods,.dx-shop .proc{grid-template-columns:1fr 1fr}
}

/* ============ 9 · FREELANCER: Emi Sato Photography (dark gallery, film strip, lightbox) ============ */
.dx-freelancer{--c-bg:#101010;--c-fg:#F1EEE9;--c-soft:#9C978F;--c-line:#2A2927;--c-acc:#E0BE94;--c-on:#141210;--f-body:'Inter',var(--sans);--f-disp:'Instrument Serif',serif;--rd:.9s}
.dx-freelancer .nv{position:sticky;top:0;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:18px;mix-blend-mode:difference;color:#fff}
.dx-freelancer .brand{font-family:var(--f-disp);font-size:24px}
.dx-freelancer .links{display:flex;gap:26px;font-size:13px}
.dx-freelancer .links a{text-decoration:none}
.dx-freelancer .hero{padding-block:clamp(30px,6%,70px) 0;display:flex;flex-direction:column;gap:28px}
.dx-freelancer h1{font-family:var(--f-disp);font-weight:400;font-size:clamp(64px,14cqi,190px);line-height:.84;letter-spacing:-.03em}
.dx-freelancer h1 em{color:var(--c-acc)}
.dx-freelancer .sub{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:18px}
.dx-freelancer .sub p{max-width:40ch;color:var(--c-soft);font-size:16px}
.dx-freelancer .film{overflow:hidden;margin-top:40px;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.dx-freelancer .film div{display:flex;gap:10px;width:max-content;animation:dxmq 60s linear infinite}
.dx-freelancer .film:hover div{animation-play-state:paused}
.dx-freelancer .film .ph{width:clamp(180px,22cqi,260px);aspect-ratio:3/4}
.dx-freelancer .film .ph img{filter:grayscale(.3);transition:filter .5s ease}
@media (hover:hover) and (pointer:fine){.dx-freelancer .film .ph:hover img{filter:none}}
.dx-freelancer .sec{padding-block:clamp(56px,8%,100px)}
.dx-freelancer h2{font-family:var(--f-disp);font-weight:400;font-size:clamp(40px,6cqi,76px);line-height:.95;letter-spacing:-.02em}
.dx-freelancer h2 em{color:var(--c-acc)}
.dx-freelancer .head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:28px}
.dx-freelancer .fl{display:flex;gap:4px;border:1px solid var(--c-line);border-radius:999px;padding:4px}
.dx-freelancer .fl button{appearance:none;border:0;background:none;border-radius:999px;padding:8px 16px;cursor:pointer;font-size:13px;color:var(--c-soft);transition:background-color .2s ease,color .2s ease}
.dx-freelancer .fl button[aria-selected="true"]{background:var(--c-fg);color:var(--c-on)}
.dx-freelancer .mas{columns:3 220px;column-gap:12px}
.dx-freelancer .shot{appearance:none;display:block;width:100%;border:0;padding:0;margin:0 0 12px;background:none;cursor:zoom-in;break-inside:avoid;position:relative;overflow:hidden;transition:opacity .4s ease}
.dx-freelancer .shot.gone{display:none}
.dx-freelancer .shot img{width:100%;height:auto;transition:transform .9s var(--eo)}
@media (hover:hover) and (pointer:fine){.dx-freelancer .shot:hover img{transform:scale(1.035)}}
.dx-freelancer .shot span{position:absolute;left:12px;bottom:10px;font-size:12px;letter-spacing:.08em;color:#fff;opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s var(--eo);text-shadow:0 1px 8px #000a}
@media (hover:hover) and (pointer:fine){.dx-freelancer .shot:hover span{opacity:1;transform:none}}
.dx-freelancer .lb{position:absolute;inset:0;z-index:6;background:#0d0d0df2;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s ease}
.dx-freelancer .lb.open{opacity:1;pointer-events:auto}
.dx-freelancer .lb img{max-width:min(86%,900px);max-height:78%;object-fit:contain;transition:transform .45s var(--eo)}
.dx-freelancer .lb button{appearance:none;position:absolute;background:#ffffff14;border:1px solid #ffffff2a;color:#fff;border-radius:999px;cursor:pointer;min-width:48px;height:48px;font-size:18px;transition:background-color .2s ease,scale .16s var(--eo)}
.dx-freelancer .lb button:active{scale:.94}
.dx-freelancer .lb .x{top:16px;right:16px;padding:0 16px;font-size:13px}
.dx-freelancer .lb .pv{left:16px;top:50%;margin-top:-24px}
.dx-freelancer .lb .nx{right:16px;top:50%;margin-top:-24px}
.dx-freelancer .lb p{position:absolute;bottom:16px;left:0;right:0;text-align:center;font-size:13px;color:var(--c-soft)}
.dx-freelancer .pk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.dx-freelancer .pk article{border:1px solid var(--c-line);border-radius:20px;padding:clamp(20px,3%,30px);display:flex;flex-direction:column;gap:14px;position:relative;transition:border-color .3s ease}
.dx-freelancer .pk article.hot{border-color:var(--c-acc)}
.dx-freelancer .pk article.hot::before{content:"Most booked";position:absolute;top:-11px;left:24px;background:var(--c-acc);color:var(--c-on);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:999px}
.dx-freelancer .pk h3{font-family:var(--f-disp);font-weight:400;font-size:34px;line-height:1}
.dx-freelancer .pk .pr{font-size:15px;color:var(--c-acc)}
.dx-freelancer .pk ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--c-soft);flex:1}
.dx-freelancer .pk li{padding-left:16px;position:relative}
.dx-freelancer .pk li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:1px;background:var(--c-acc)}
.dx-freelancer .how{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;counter-reset:h}
.dx-freelancer .how div{border-top:1px solid var(--c-line);padding-top:18px;display:flex;flex-direction:column;gap:8px}
.dx-freelancer .how div::before{counter-increment:h;content:counter(h,decimal-leading-zero);font-family:var(--f-disp);font-size:40px;line-height:1;color:var(--c-acc)}
.dx-freelancer .how b{font-weight:600}
.dx-freelancer .how span{font-size:14px;color:var(--c-soft)}
.dx-freelancer .say{font-family:var(--f-disp);font-size:clamp(28px,4.4cqi,52px);line-height:1.12;max-width:24ch}
.dx-freelancer .say + p{color:var(--c-soft);margin-top:18px;font-size:14px}
.dx-freelancer .inq{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5%,56px);align-items:start}
.dx-freelancer .inq .form{display:flex;flex-direction:column;gap:18px;border:1px solid var(--c-line);border-radius:22px;padding:clamp(20px,4%,34px)}
.dx-freelancer .inq .ph{aspect-ratio:4/5;border-radius:4px}
@container demo (max-width:760px){
  .dx-freelancer .links{display:none}
  .dx-freelancer .pk,.dx-freelancer .inq{grid-template-columns:1fr}
  .dx-freelancer .how{grid-template-columns:1fr 1fr}
  .dx-freelancer .mas{columns:2}
}

/* ============ Gallery previews on the main page (one art direction each) ============ */
.mini{position:relative;aspect-ratio:4/3;overflow:hidden;container-type:inline-size;font-family:var(--sans);line-height:1.15}
.mini img{display:block;max-width:none}
.mini .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mini em,.mini i{font-style:normal}
.mini strong{font-weight:400;display:block}
.mini .m-nav{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:2cqi;padding:3.4cqi 4.4cqi;font-size:2.5cqi}
.mini .m-nav em{padding:1.3cqi 2.6cqi;font-weight:700}
.gallery.paused .mini *,.gallery.paused .mini::after{animation-play-state:paused!important}

.mini-ramen{background:#120E0C;color:#F3E9DA}
.mini-ramen::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#120E0C 8%,#120E0Cb3 45%,#120E0C22),linear-gradient(0deg,#120E0C,transparent 45%)}
.mini-ramen .bg{animation:kb 16s ease-in-out infinite alternate}
.mini-ramen .m-nav b{display:flex;align-items:center;gap:1.6cqi;font-family:'Shippori Mincho',serif;letter-spacing:.2em;font-size:3.4cqi}
.mini-ramen .m-nav b i{display:grid;place-items:center;width:6cqi;height:6cqi;background:#D9432B;letter-spacing:0}
.mini-ramen .m-nav span{opacity:.7}
.mini-ramen .m-nav em{background:#D9432B;border-radius:1px}
.mini-ramen .m-copy{position:absolute;z-index:2;left:4.4cqi;bottom:15cqi;display:flex;flex-direction:column;gap:2.4cqi;max-width:58%}
.mini-ramen small{font-size:2.2cqi;letter-spacing:.24em;text-transform:uppercase;color:#E26A52;font-weight:700}
.mini-ramen strong{font-family:'Shippori Mincho',serif;font-weight:700;font-size:8cqi;line-height:1.02}
.mini-ramen .m-copy em{align-self:flex-start;border:1px solid #F3E9DA66;padding:1.5cqi 2.8cqi;font-size:2.4cqi}
.mini-ramen .m-vert{position:absolute;z-index:2;right:5cqi;top:15cqi;writing-mode:vertical-rl;white-space:nowrap;font-family:"Shippori Mincho",serif;font-size:4.4cqi;letter-spacing:.3em;text-shadow:0 1px 12px #000a}
.mini-ramen .m-noren{position:absolute;z-index:2;left:0;right:0;bottom:0;background:#D9432B;color:#FFF4EA;font-family:'Shippori Mincho',serif;font-size:2.5cqi;white-space:nowrap;padding:1.8cqi 0;overflow:hidden}
.mini-ramen .m-noren span{display:block;width:max-content;animation:dxmq 14s linear infinite}
.mini-ramen .steam{position:absolute;z-index:1;right:22%;bottom:30%;width:24cqi;height:34cqi;filter:blur(4px);opacity:.6}
.mini-ramen .steam span{position:absolute;bottom:0;width:4cqi;height:22cqi;border-radius:50%;background:linear-gradient(0deg,transparent,#fff8 40%,transparent);animation:steam 4.6s ease-in-out infinite}
.mini-ramen .steam span:nth-child(2){left:10cqi;animation-delay:2.2s}

.mini-salon{background:#F6ECE8;color:#33201D}
.mini-salon .m-nav{display:grid;grid-template-columns:1fr auto 1fr;border-bottom:1px solid #E3CEC7;letter-spacing:.12em;text-transform:uppercase;font-size:2cqi}
.mini-salon .m-nav b{font-family:'Bodoni Moda',serif;font-style:italic;font-weight:400;font-size:5.4cqi;letter-spacing:0;text-transform:none}
.mini-salon .m-nav em{justify-self:end;background:#A8404F;color:#fff;border-radius:99px}
.mini-salon .m-body{display:grid;grid-template-columns:1.15fr .85fr;gap:4cqi;padding:5cqi 4.4cqi;align-items:center}
.mini-salon .m-copy{display:flex;flex-direction:column;gap:3cqi}
.mini-salon strong{font-family:'Bodoni Moda',serif;font-size:8.4cqi;line-height:.98;letter-spacing:-.02em}
.mini-salon strong i{display:block;font-style:italic;color:#A8404F;padding-left:5cqi}
.mini-salon .m-copy em{align-self:flex-start;background:#A8404F;color:#fff;border-radius:99px;padding:1.6cqi 3cqi;font-size:2.4cqi;font-weight:600}
.mini-salon small{align-self:flex-start;background:#fff;border:1px solid #E3CEC7;border-radius:99px;padding:1.2cqi 2.4cqi;font-size:2.2cqi}
.mini-salon small b{color:#A8404F}
.mini-salon .m-art{position:relative;padding:0 5cqi 6cqi 0}
.mini-salon .arch{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:99cqi 99cqi 1cqi 1cqi}
.mini-salon .dot{position:absolute;right:0;bottom:0;width:16cqi;height:16cqi;object-fit:cover;border-radius:50%;border:1.2cqi solid #F6ECE8;animation:drift 7s ease-in-out infinite}

.mini-clinic{background:#fff;color:#0F2E2A;font-family:'Plus Jakarta Sans',var(--sans)}
.mini-clinic .m-util{display:flex;justify-content:space-between;background:#0F2E2A;color:#CFE6E1;font-size:2cqi;padding:1.4cqi 4.4cqi}
.mini-clinic .m-util b{background:#fff;color:#0F2E2A;padding:0 1.2cqi;border-radius:.8cqi}
.mini-clinic .m-nav{border-bottom:1px solid #DCE8E5}
.mini-clinic .m-nav b{display:flex;align-items:center;gap:1.4cqi;font-weight:800;font-size:3.2cqi}
.mini-clinic .m-nav b i{width:4.4cqi;height:4.4cqi;border-radius:1.2cqi;background:#127A69}
.mini-clinic .m-nav em{background:#127A69;color:#fff;border-radius:1.4cqi}
.mini-clinic .m-body{display:grid;grid-template-columns:1fr 1fr;gap:4cqi;padding:5cqi 4.4cqi;align-items:center}
.mini-clinic .m-copy{display:flex;flex-direction:column;gap:2.6cqi}
.mini-clinic small{align-self:flex-start;background:#EAF5F2;color:#127A69;font-weight:700;font-size:2cqi;padding:1cqi 2cqi;border-radius:99px}
.mini-clinic strong{font-weight:800;font-size:6.2cqi;line-height:1.04;letter-spacing:-.03em}
.mini-clinic strong span{color:#127A69}
.mini-clinic .m-copy em{align-self:flex-start;background:#127A69;color:#fff;border-radius:1.6cqi;padding:1.6cqi 3cqi;font-size:2.4cqi;font-weight:700}
.mini-clinic .m-art{position:relative}
.mini-clinic .m-art img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:3.4cqi}
.mini-clinic .m-float{position:absolute;left:-6cqi;bottom:4cqi;background:#fff;border:1px solid #DCE8E5;border-radius:2.4cqi;padding:1.8cqi 2.6cqi;font-size:2cqi;box-shadow:0 2cqi 5cqi rgba(15,46,42,.14);animation:bob 5s ease-in-out infinite}
.mini-clinic .m-float b{display:block;font-size:2.6cqi}

.mini-ryokan{background:#0E1814;color:#ECEFE9}
.mini-ryokan::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0E181499,transparent 40%,#0E1814e6)}
.mini-ryokan .bg{animation:kbslow 20s ease-in-out infinite alternate}
.mini-ryokan .m-snow{position:absolute;inset:-20% 0 0;z-index:1;background-image:radial-gradient(1.4px 1.4px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 60% 10%,#fff,transparent),radial-gradient(1.8px 1.8px at 80% 50%,#fffc,transparent),radial-gradient(1.2px 1.2px at 35% 70%,#fff,transparent),radial-gradient(1px 1px at 90% 85%,#fff,transparent),radial-gradient(1.6px 1.6px at 5% 90%,#fffb,transparent);background-size:120px 120px;animation:snowfall 9s linear infinite}
@keyframes snowfall{to{background-position:30px 120px}}
.mini-ryokan .m-nav{letter-spacing:.18em;text-transform:uppercase;font-size:2cqi}
.mini-ryokan .m-nav b{font-family:'Shippori Mincho',serif;font-size:3.6cqi;letter-spacing:.3em;font-weight:500}
.mini-ryokan .m-nav em{border:1px solid #ECEFE999;font-weight:500}
.mini-ryokan .m-vert{position:absolute;z-index:2;right:6cqi;top:15cqi;writing-mode:vertical-rl;white-space:nowrap;font-family:'Shippori Mincho',serif;font-size:9cqi;letter-spacing:.35em}
.mini-ryokan .m-copy{position:absolute;z-index:2;left:4.4cqi;bottom:5cqi;display:flex;flex-direction:column;gap:1.6cqi;max-width:64%}
.mini-ryokan strong{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:8cqi;line-height:1}
.mini-ryokan small{font-size:2.2cqi;letter-spacing:.2em;text-transform:uppercase;opacity:.8}

.mini-cafe{background:#F3ECE1;color:#2A1C14;font-family:'DM Sans',var(--sans)}
.mini-cafe .m-nav{margin:3cqi 4cqi 0;padding:1.6cqi 1.6cqi 1.6cqi 3.4cqi;background:#FFFAF3;border:1px solid #E0D4C3;border-radius:99px}
.mini-cafe .m-nav b{font-family:'Fraunces',serif;font-style:italic;font-weight:600;font-size:3.6cqi}
.mini-cafe .m-nav em{background:#2A1C14;color:#F3ECE1;border-radius:99px;display:flex;align-items:center;gap:1.2cqi}
.mini-cafe .m-nav em i{background:#C0643B;color:#fff;border-radius:99px;padding:0 1.2cqi}
.mini-cafe .m-body{display:grid;grid-template-columns:1fr 1fr;gap:3cqi;padding:5cqi 4.4cqi;align-items:center}
.mini-cafe .m-copy{display:flex;flex-direction:column;gap:3cqi}
.mini-cafe strong{font-family:'Fraunces',serif;font-weight:500;font-size:8.6cqi;line-height:.95;letter-spacing:-.03em}
.mini-cafe strong i{font-style:italic;color:#56643A}
.mini-cafe .m-copy em{align-self:flex-start;background:#C0643B;color:#fff;border-radius:99px;padding:1.6cqi 3cqi;font-size:2.4cqi;font-weight:700}
.mini-cafe .m-stack{position:relative;height:46cqi}
.mini-cafe .m-stack span{position:absolute;width:24cqi;background:#fff;padding:1.2cqi 1.2cqi 4cqi;box-shadow:0 2cqi 4cqi rgba(42,28,20,.18);animation:sway 6s ease-in-out infinite}
.mini-cafe .m-stack img{width:100%;aspect-ratio:1;object-fit:cover}
.mini-cafe .m-stack span:nth-child(1){left:0;top:4cqi;--r:-8deg;transform:rotate(-8deg)}
.mini-cafe .m-stack span:nth-child(2){left:18cqi;top:0;--r:7deg;transform:rotate(7deg);animation-delay:-2s}
.mini-cafe .m-stack span:nth-child(3){left:8cqi;top:17cqi;--r:-2deg;transform:rotate(-2deg);animation-delay:-4s;z-index:1}
@keyframes sway{50%{transform:rotate(calc(var(--r) * -.4)) translateY(-1cqi)}}

.mini-realestate{background:#F5F6F8;color:#0C1A2B;font-family:'Manrope',var(--sans)}
.mini-realestate .m-nav{background:#0C1A2B;color:#fff}
.mini-realestate .m-nav b{font-family:'Space Grotesk',var(--sans);font-weight:700;letter-spacing:.14em;font-size:3.2cqi;display:flex;align-items:center;gap:1.4cqi}
.mini-realestate .m-nav b i{width:1.8cqi;height:1.8cqi;background:#C99A3E;transform:rotate(45deg)}
.mini-realestate .m-nav span{opacity:.75}
.mini-realestate .m-hero{position:relative;height:46cqi;padding:0 4.4cqi 4cqi;display:flex;flex-direction:column;justify-content:flex-end;gap:2.6cqi;color:#fff;overflow:hidden}
.mini-realestate .m-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,#0C1A2Bf0,#0C1A2B33)}
.mini-realestate .m-hero .bg{animation:reslide 16s ease-in-out infinite alternate}
.mini-realestate .m-hero > *:not(.bg){position:relative;z-index:2}
.mini-realestate strong{font-family:'Space Grotesk',var(--sans);font-weight:700;font-size:7cqi;letter-spacing:-.03em;line-height:1}
.mini-realestate strong i{color:#C99A3E}
.mini-realestate .m-search{display:flex;gap:1cqi;background:#fff;color:#0C1A2B;border-radius:1.6cqi;padding:1.2cqi;font-size:2.2cqi;font-weight:700}
.mini-realestate .m-search span{flex:1;padding:1cqi 1.6cqi;border-left:1px solid #DDE2E9}
.mini-realestate .m-search span:first-child{border:0;background:#0C1A2B;color:#fff;border-radius:1cqi;flex:0 0 auto}
.mini-realestate .m-search span b{font-weight:400;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.mini-realestate .m-search em{background:#C99A3E;border-radius:1cqi;padding:1cqi 2cqi;white-space:nowrap}
.mini-realestate .m-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqi;padding:3.4cqi 4.4cqi}
.mini-realestate .m-cards span{position:relative;border-radius:1.6cqi;overflow:hidden;background:#fff}
.mini-realestate .m-cards img{width:100%;aspect-ratio:4/3;object-fit:cover}
.mini-realestate .m-cards b{position:absolute;left:1.2cqi;bottom:1.2cqi;background:#fff;font-size:2.2cqi;padding:.4cqi 1.2cqi;border-radius:.8cqi;font-family:'Space Grotesk',var(--sans)}

.mini-gym{background:#0B0C0E;color:#EDEDE9}
.mini-gym .bg{filter:grayscale(1) contrast(1.2) brightness(.55)}
.mini-gym::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0B0C0E,transparent 60%)}
.mini-gym .m-nav{letter-spacing:.1em;text-transform:uppercase}
.mini-gym .m-nav b{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:4.4cqi;display:flex;align-items:center;gap:1.4cqi}
.mini-gym .m-nav b i{font-family:'Shippori Mincho',serif;background:#FF5A1F;color:#0B0C0E;width:5.6cqi;height:5.6cqi;display:grid;place-items:center;font-size:3.4cqi;font-weight:700}
.mini-gym .m-nav em{background:#FF5A1F;color:#0B0C0E;font-weight:800}
.mini-gym strong{position:absolute;z-index:2;left:4.4cqi;bottom:17cqi;font-family:'Anton',Impact,sans-serif;font-size:13.6cqi;line-height:.86;text-transform:uppercase}
.mini-gym strong span{display:block}
.mini-gym strong i{color:#FF5A1F}
.mini-gym .m-band{position:absolute;z-index:2;left:-4%;right:-4%;bottom:4.4cqi;background:#FF5A1F;color:#0B0C0E;transform:rotate(-2.4deg);overflow:hidden;padding:1.4cqi 0}
.mini-gym .m-band span{display:block;width:max-content;font-family:'Anton',Impact,sans-serif;font-size:3.6cqi;text-transform:uppercase;white-space:nowrap;animation:dxmq 9s linear infinite}

.mini-shop{background:#F4F1EA;color:#1F1D1A}
.mini-shop .m-ann{background:#1F1D1A;color:#F4F1EA;text-align:center;font-size:1.9cqi;letter-spacing:.14em;text-transform:uppercase;padding:1.2cqi}
.mini-shop .m-nav{display:grid;grid-template-columns:1fr auto 1fr;border-bottom:1px solid #DDD7CB;font-size:2.2cqi}
.mini-shop .m-nav b{font-family:'EB Garamond',serif;font-weight:400;font-size:4.4cqi}
.mini-shop .m-nav span:last-child{text-align:right}
.mini-shop .m-body{display:grid;grid-template-columns:1.1fr .9fr;gap:3.4cqi;padding:3.4cqi 4.4cqi}
.mini-shop .m-big{position:relative;display:block;aspect-ratio:4/5;overflow:hidden}
.mini-shop .m-big img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mini-shop .m-big .alt{animation:xfade 8s ease-in-out infinite}
@keyframes xfade{0%,40%{opacity:0}50%,90%{opacity:1}100%{opacity:0}}
.mini-shop .m-body > div{display:flex;flex-direction:column;justify-content:space-between;gap:3cqi}
.mini-shop strong{font-family:'EB Garamond',serif;font-size:7cqi;line-height:1}
.mini-shop strong i{color:#A8714D}
.mini-shop .m-small img{width:100%;aspect-ratio:1;object-fit:cover}

.mini-freelancer{background:#101010;color:#F1EEE9;font-family:'Inter',var(--sans)}
.mini-freelancer .m-nav b{font-family:'Instrument Serif',serif;font-weight:400;font-size:4.4cqi}
.mini-freelancer .m-nav span{opacity:.7}
.mini-freelancer strong{padding:1cqi 4.4cqi 0;font-family:'Instrument Serif',serif;font-size:12.4cqi;line-height:.86;letter-spacing:-.03em}
.mini-freelancer strong i{color:#E0BE94}
.mini-freelancer .m-film{position:absolute;left:0;right:0;bottom:4cqi;overflow:hidden}
.mini-freelancer .m-film div{display:flex;gap:1.6cqi;width:max-content;animation:dxmq 26s linear infinite}
.mini-freelancer .m-film span{width:15cqi;flex:0 0 auto}
.mini-freelancer .m-film img{width:100%;aspect-ratio:3/4;object-fit:cover}

/* ============ 10 · FASHION: ORIHA (minimal label; everything moves sideways) ============ */
.dx-fashion{--c-bg:#F5F4F1;--c-fg:#111110;--c-soft:#6C6A65;--c-line:#DEDBD4;--c-acc:#111110;--c-on:#F5F4F1;--f-body:'Hanken Grotesk',var(--sans);--f-disp:'Italiana',serif;--rd:.9s;--rs:18px;--fe:cubic-bezier(.76,0,.24,1);font-size:15px;letter-spacing:.005em}
.dx-fashion [data-r="left"]{transform:translateX(-28px)}
.dx-fashion .ann{background:var(--c-fg);color:var(--c-bg);overflow:hidden;font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:9px 0}
.dx-fashion .ann div{display:flex;gap:64px;width:max-content;animation:dxmq 34s linear infinite}
.dx-fashion .nv{position:sticky;top:0;z-index:4;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding-block:18px;background:color-mix(in srgb,var(--c-bg) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--c-line)}
.dx-fashion .links{display:flex;gap:26px;align-items:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.dx-fashion .links.r{justify-content:flex-end}
.dx-fashion .links a{text-decoration:none;position:relative}
.dx-fashion .links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--fe)}
@media (hover:hover) and (pointer:fine){.dx-fashion .links a:hover::after{transform:scaleX(1);transform-origin:left}}
.dx-fashion .brand{font-family:var(--f-disp);font-size:30px;letter-spacing:.42em;margin-right:-.42em;line-height:1}
.dx-fashion .bagbtn{appearance:none;background:none;border:0;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;display:inline-flex;gap:6px;align-items:center;min-height:44px;padding:0}
.dx-fashion .bagbtn b{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:99px;background:var(--c-fg);color:var(--c-bg);font-size:10px;font-weight:600;letter-spacing:0}
.dx-fashion .bagbtn b.pop{animation:pop .4s cubic-bezier(.34,1.56,.64,1)}
.dx-fashion .fbtn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 28px;border:1px solid currentColor;background:transparent;color:inherit;font:500 12px/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;transition:color .45s var(--fe),scale .16s var(--eo)}
.dx-fashion .fbtn::before{content:"";position:absolute;inset:0;z-index:-1;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--fe)}
.dx-fashion .fbtn:active{scale:.98}
@media (hover:hover) and (pointer:fine){.dx-fashion .fbtn:hover::before{transform:scaleX(1);transform-origin:left}.dx-fashion .fbtn:hover{color:var(--c-bg)}.dx-fashion .hs .fbtn:hover{color:#111}}
.dx-fashion .hs .fbtn::before{background:#fff}
.dx-fashion .fbtn.solid{background:var(--c-fg);color:var(--c-bg);border-color:var(--c-fg);width:100%}
.dx-fashion .fbtn.solid::before{background:#3A3936}
@media (hover:hover) and (pointer:fine){.dx-fashion .fbtn.solid:hover{color:var(--c-bg)}}
.dx-fashion .fbtn span{transition:filter .16s ease,opacity .16s ease}
.dx-fashion .fbtn.swap span{filter:blur(4px);opacity:0}

/* Hero slider */
.dx-fashion .hs{position:relative;height:min(760px,calc(100cqi * .62 + 160px));min-height:520px;overflow:hidden;background:#111;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.dx-fashion .hs-slides{position:absolute;inset:0}
.dx-fashion .hs-s{position:absolute;inset:0;margin:0;clip-path:inset(0 0 0 100%);z-index:1}
.dx-fashion [data-dir="prev"] .hs-s{clip-path:inset(0 100% 0 0)}
.dx-fashion .hs-s img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;transform:scale(1.14) translateX(9%);filter:brightness(.82)}
.dx-fashion [data-dir="prev"] .hs-s img{transform:scale(1.14) translateX(-9%)}
.dx-fashion .hs-s.on,.dx-fashion [data-dir="prev"] .hs-s.on{clip-path:inset(0 0 0 0);z-index:3;transition:clip-path 1.1s var(--fe)}
.dx-fashion .hs-s.on img,.dx-fashion [data-dir="prev"] .hs-s.on img{transform:scale(1.02) translateX(0);transition:transform 1.8s var(--eo)}
.dx-fashion .hs-s.off,.dx-fashion [data-dir="prev"] .hs-s.off{clip-path:inset(0 0 0 0);z-index:2}
.dx-fashion .hs-s.off img{transform:scale(1.02) translateX(-14%);transition:transform 1.1s var(--fe)}
.dx-fashion [data-dir="prev"] .hs-s.off img{transform:scale(1.02) translateX(14%)}
.dx-fashion .hs::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 55%)}
.dx-fashion .hs-copy{position:relative;z-index:5;display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding-bottom:28px}
.dx-fashion .hs-kick{font-size:11px;letter-spacing:.3em;text-transform:uppercase;transition:opacity .25s ease,transform .25s ease}
.dx-fashion .hs-kick.leaving{opacity:0;transform:translateX(-16px)}
.dx-fashion .hs-title{font-family:var(--f-disp);font-weight:400;font-size:clamp(52px,10cqi,132px);line-height:.92;letter-spacing:-.01em}
.dx-fashion .hs-title .w{display:inline-block;overflow:hidden;padding-right:.04em;vertical-align:top}
.dx-fashion .hs-title .l{display:inline-block;animation:lin .9s var(--eo) both;animation-delay:calc(var(--i) * 32ms + 120ms)}
@keyframes lin{from{transform:translateX(.9em);opacity:0}}
.dx-fashion .hs-title.leaving .l{transform:translateX(-.6em);opacity:0;transition:transform .24s ease-in,opacity .2s ease-in;animation:none}
.dx-fashion .hs-ui{position:relative;z-index:5;display:flex;align-items:center;gap:28px;padding-bottom:26px;font-size:12px;letter-spacing:.14em}
.dx-fashion .hs-count{display:flex;gap:8px;align-items:center;font-variant-numeric:tabular-nums}
.dx-fashion .hs-cur{display:inline-block;overflow:hidden;height:1.3em;line-height:1.3em}
.dx-fashion .hs-cur b{display:inline-block;font-weight:500;transition:transform .26s ease-in,opacity .26s ease-in}
.dx-fashion .hs-cur.up b{transform:translateX(-100%);opacity:0}
.dx-fashion .hs-cur.down b{transform:translateX(100%);opacity:0}
.dx-fashion .hs-bars{flex:1;display:flex;gap:8px}
.dx-fashion .hs-bars button{appearance:none;flex:1;height:24px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center}
.dx-fashion .hs-bars i{display:block;width:100%;height:1px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}
.dx-fashion .hs-bars i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.dx-fashion .hs-bars .done i::after{transform:scaleX(1)}
.dx-fashion .hs-bars .now i::after{animation:fbar 6s linear forwards}
.dx-fashion .hs.paused .hs-bars .now i::after{animation-play-state:paused}
@keyframes fbar{to{transform:scaleX(1)}}
.dx-fashion .hs-arrows{display:flex;gap:8px}
.dx-fashion .hs-arrows button{appearance:none;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;cursor:pointer;font-size:16px;transition:background-color .3s ease,color .3s ease,border-color .3s ease,scale .16s var(--eo)}
.dx-fashion .hs-arrows button:active{scale:.92}
@media (hover:hover) and (pointer:fine){.dx-fashion .hs-arrows button:hover{background:#fff;color:#111;border-color:#fff}}
.dx-fashion .hs-arrows.dark button{border-color:var(--c-line);color:var(--c-fg)}
@media (hover:hover) and (pointer:fine){.dx-fashion .hs-arrows.dark button:hover{background:var(--c-fg);color:var(--c-bg);border-color:var(--c-fg)}}

/* Sections */
.dx-fashion .sec{padding-block:clamp(64px,9%,112px)}
.dx-fashion h2{font-family:var(--f-disp);font-weight:400;font-size:clamp(40px,6cqi,76px);line-height:.98;letter-spacing:-.005em}
.dx-fashion h2 em{font-style:normal;color:var(--c-soft)}
.dx-fashion .head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:34px}
.dx-fashion .tabs{position:relative;display:flex;flex-wrap:wrap;gap:4px 22px;padding-bottom:8px}
.dx-fashion .tabs button{appearance:none;background:none;border:0;padding:6px 0;cursor:pointer;font:500 12px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--c-soft);transition:color .3s ease;min-height:32px}
.dx-fashion .tabs button[aria-selected="true"]{color:var(--c-fg)}
.dx-fashion .uline{position:absolute;left:0;bottom:4px;height:1px;background:var(--c-fg);transition:transform .55s var(--fe),width .55s var(--fe)}
.dx-fashion .rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:clamp(20px,5%,64px);scroll-padding-inline:clamp(20px,5%,64px);cursor:grab}
.dx-fashion .rail::-webkit-scrollbar{display:none}
.dx-fashion .rail.drag{cursor:grabbing;scroll-snap-type:none}
.dx-fashion .rail.drag .pc{pointer-events:none}
.dx-fashion .pc{flex:0 0 clamp(220px,26cqi,330px);scroll-snap-align:start;display:flex;flex-direction:column;gap:12px}
.dx-fashion .pc[hidden]{display:none}
.dx-fashion .pc-img{appearance:none;position:relative;display:block;width:100%;aspect-ratio:3/4;padding:0;border:0;background:#E8E6E1;cursor:pointer;overflow:hidden}
.dx-fashion .pc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--eo),opacity .6s ease}
.dx-fashion .pc-img img.alt{clip-path:inset(0 0 0 100%);transition:clip-path .8s var(--fe),transform 1.2s var(--eo),opacity .6s ease}
.dx-fashion .pc-view{position:absolute;left:12px;bottom:12px;background:var(--c-bg);color:var(--c-fg);font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:9px 14px;transform:translateX(calc(-100% - 14px));transition:transform .55s var(--fe)}
@media (hover:hover) and (pointer:fine){
  .dx-fashion .pc:hover .pc-img img.alt{clip-path:inset(0 0 0 0)}
  .dx-fashion .pc:hover .pc-img img:not(.alt){transform:translateX(-6%) scale(1.03)}
  .dx-fashion .pc:hover .pc-view{transform:none}
}
.dx-fashion .pc-img:focus-visible .pc-view{transform:none}
.dx-fashion .pc-meta{display:flex;justify-content:space-between;gap:12px}
.dx-fashion .pc-meta h3{font:500 14px/1.3 var(--f-body);letter-spacing:.01em}
.dx-fashion .pc-meta span{font-size:12px;color:var(--c-soft)}
.dx-fashion .pc-meta b{font-weight:500;font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
.dx-fashion .pc-dots{display:flex;gap:6px}
.dx-fashion .pc-dots i{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.dx-fashion .rail-ui{display:flex;align-items:center;gap:24px;margin-top:24px}
.dx-fashion .rail-bar{flex:1;height:1px;background:var(--c-line);overflow:hidden}
.dx-fashion .rail-bar i{display:block;height:100%;width:30%;background:var(--c-fg);transition:transform .25s linear}
.dx-fashion .strip{border-block:1px solid var(--c-line);overflow:hidden;padding-block:22px}
.dx-fashion .strip div{display:flex;gap:72px;width:max-content;animation:dxmq 40s linear infinite}
.dx-fashion .strip span{font-family:var(--f-disp);font-size:clamp(28px,3.4cqi,42px);white-space:nowrap}
.dx-fashion .strip span::after{content:"";display:inline-block;width:36px;height:1px;background:var(--c-fg);vertical-align:middle;margin-left:72px}

/* Lookbook: a sideways carousel you drag, swipe or step with arrows */
.dx-fashion .lbk-n{font-size:12px;letter-spacing:.14em;font-variant-numeric:tabular-nums}
.dx-fashion .lbk-n b{font-weight:500}
.dx-fashion .lbk-track{position:relative;display:flex;gap:clamp(14px,2cqi,28px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding-inline:calc(50% - clamp(210px,24cqi,300px) / 2);cursor:grab}
.dx-fashion .lbk-track::-webkit-scrollbar{display:none}
.dx-fashion .lbk-track.drag{cursor:grabbing;scroll-snap-type:none}
.dx-fashion .lkb-i{flex:0 0 clamp(210px,24cqi,300px);scroll-snap-align:center;margin:0;display:flex;flex-direction:column;gap:12px;user-select:none}
.dx-fashion .lkb-i .ph{aspect-ratio:3/4;transform:scale(calc(1 - var(--k,0) * .12));transform-origin:50% 60%;transition:transform .35s cubic-bezier(.23,1,.32,1)}
.dx-fashion .lkb-i .ph img{pointer-events:none;transform:scale(calc(1.1 - var(--k,0) * .1));filter:grayscale(calc(var(--k,0) * .9));transition:transform .35s cubic-bezier(.23,1,.32,1),filter .35s ease}
.dx-fashion .lkb-i figcaption{display:flex;flex-direction:column;gap:2px;font-size:13px;opacity:calc(1 - var(--k,0) * .7);transition:opacity .35s ease}
.dx-fashion .lkb-i figcaption span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--c-soft)}
.dx-fashion .rail{position:relative;overscroll-behavior-x:contain}
.dx-fashion .rail img{-webkit-user-drag:none}
.dx-fashion .rail-bar i{transition:transform .45s cubic-bezier(.23,1,.32,1),width .45s cubic-bezier(.23,1,.32,1)}

/* Pages */
.dx-fashion .pg[hidden]{display:none}
.dx-fashion .nv a.cur::after{transform:scaleX(1)}
.dx-fashion a.brand{text-decoration:none;text-align:center}
.dx-fashion .more{font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.dx-fashion .more span{transition:transform .45s var(--fe)}
@media (hover:hover) and (pointer:fine){.dx-fashion .more:hover span{transform:translateX(6px)}}
.dx-fashion .pghead{padding-block:clamp(48px,7%,88px) 28px;display:flex;flex-direction:column;gap:14px;border-bottom:1px solid var(--c-line)}
.dx-fashion .crumb{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--c-soft)}
.dx-fashion .crumb a{text-decoration:none;color:var(--c-fg)}
.dx-fashion .pghead h1{font-family:var(--f-disp);font-weight:400;font-size:clamp(56px,9cqi,120px);line-height:.9}
.dx-fashion .pghead p{color:var(--c-soft);max-width:52ch}
.dx-fashion .shop{padding-block:28px clamp(56px,8%,96px)}
.dx-fashion .shop .tabs{margin-bottom:28px}
.dx-fashion .grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 16px}
.dx-fashion .grid4 .pc{flex:none}
.dx-fashion .care{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--c-line)}
.dx-fashion .care div{padding:28px 24px 0 0;display:flex;flex-direction:column;gap:6px}
.dx-fashion .care div+div{padding-left:24px;border-left:1px solid var(--c-line)}
.dx-fashion .care b{font-family:var(--f-disp);font-weight:400;font-size:26px}
.dx-fashion .care span{color:var(--c-soft);font-size:14px}
.dx-fashion .teaser{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6%,88px);align-items:center;border-top:1px solid var(--c-line)}
.dx-fashion .teaser > .ph{aspect-ratio:4/5}
.dx-fashion .teaser > div{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.dx-fashion .teaser p{color:var(--c-soft);max-width:40ch}
.dx-fashion .kick{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--c-soft)}
.dx-fashion .steps3 ol{list-style:none;padding:0;margin:34px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.dx-fashion .steps3 li{border-top:1px solid var(--c-fg);padding-top:18px;display:flex;flex-direction:column;gap:8px}
.dx-fashion .steps3 li span{font-size:11px;letter-spacing:.2em;color:var(--c-soft)}
.dx-fashion .steps3 li b{font-family:var(--f-disp);font-weight:400;font-size:30px}
.dx-fashion .steps3 li p{color:var(--c-soft);font-size:14px}
.dx-fashion .visit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6%,88px);align-items:start;border-top:1px solid var(--c-line)}
.dx-fashion .visit > div{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.dx-fashion .visit .hrs{width:100%}
.dx-fashion .addr{color:var(--c-soft);font-size:14px}
.dx-fashion .map{--map-r:0}
@container demo (max-width:900px){.dx-fashion .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container demo (max-width:760px){.dx-fashion .teaser,.dx-fashion .visit,.dx-fashion .care,.dx-fashion .steps3 ol{grid-template-columns:1fr}.dx-fashion .care div+div{border-left:0;padding-left:0}}

/* Atelier + materials */
.dx-fashion .atel{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,6%,88px);align-items:center}
.dx-fashion .atel > .ph{aspect-ratio:4/5}
.dx-fashion .atel p{color:var(--c-soft);font-size:16px;line-height:1.7;max-width:42ch;margin-top:22px}
.dx-fashion .mats{list-style:none;padding:0;margin:34px 0 0;border-top:1px solid var(--c-line)}
.dx-fashion .mats li{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--c-line);font-size:14px}
.dx-fashion .mats b{font-weight:500}
.dx-fashion .mats span{color:var(--c-soft)}
.dx-fashion .duo{display:grid;grid-template-columns:.8fr 1.2fr;gap:16px;padding-top:0}
.dx-fashion .duo .ph{aspect-ratio:4/5}
.dx-fashion .duo .ph:last-child{aspect-ratio:auto}
.dx-fashion .letter{text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;border-top:1px solid var(--c-line)}
.dx-fashion .letter p{color:var(--c-soft);max-width:44ch}
.dx-fashion .nl{display:flex;gap:10px;width:min(520px,100%);margin-top:10px}
.dx-fashion .nl input{flex:1;min-width:0;background:transparent;border:0;border-bottom:1px solid var(--c-fg);border-radius:0;padding:12px 2px;font:inherit;font-size:15px;color:var(--c-fg);box-shadow:none;outline:none}
.dx-fashion .nl input:focus{border-bottom-width:2px}

/* Product viewer (slides in from the right) */
.dx-fashion .pdp,.dx-fashion .bagd{position:absolute;inset:0;pointer-events:none}
.dx-fashion .scrim{position:absolute;inset:0;background:rgba(17,17,16,.35);opacity:0;transition:opacity .35s ease}
.dx-fashion .pdp.open,.dx-fashion .bagd.open{pointer-events:auto}
.dx-fashion .pdp.open .scrim,.dx-fashion .bagd.open .scrim{opacity:1}
.dx-fashion .pdp-in{position:absolute;top:0;right:0;bottom:0;width:min(940px,100%);background:var(--c-bg);color:var(--c-fg);display:grid;grid-template-columns:1.1fr .9fr;transform:translateX(100%);transition:transform .7s var(--ed);box-shadow:-40px 0 80px rgba(0,0,0,.18)}
.dx-fashion .pdp.open .pdp-in{transform:none}
.dx-fashion .pdp-x{appearance:none;position:absolute;top:14px;right:14px;z-index:3;background:var(--c-bg);border:1px solid var(--c-line);font:500 11px/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;padding:0 16px;min-height:40px;cursor:pointer}
.dx-fashion .pdp-gal{position:relative;overflow:hidden;background:#E8E6E1;touch-action:pan-y}
.dx-fashion .pdp-track{display:flex;height:100%;transition:transform .7s var(--fe);cursor:grab}
.dx-fashion .pdp-track .ph{flex:0 0 100%;height:100%;background:none}
.dx-fashion .pdp-track img{pointer-events:none;user-select:none;-webkit-user-drag:none}
.dx-fashion .pdp-dots{position:absolute;left:16px;bottom:22px;display:flex;gap:6px}
.dx-fashion .pdp-dots i{width:18px;height:2px;background:rgba(17,17,16,.25);transition:background-color .3s ease,width .5s var(--fe)}
.dx-fashion .pdp-dots i.on{background:var(--c-fg);width:34px}
.dx-fashion .pdp-arr{position:absolute;right:14px;bottom:12px}
.dx-fashion .pdp-arr button{background:var(--c-bg)}
.dx-fashion .pdp-info{padding:clamp(56px,7%,72px) clamp(22px,5%,44px) 28px;display:flex;flex-direction:column;gap:18px;overflow:auto}
.dx-fashion .pdp-info > *{animation:pin .7s var(--eo) both}
.dx-fashion .pdp.open .pdp-info > *:nth-child(2){animation-delay:.05s}.dx-fashion .pdp.open .pdp-info > *:nth-child(3){animation-delay:.1s}.dx-fashion .pdp.open .pdp-info > *:nth-child(n+4){animation-delay:.15s}
@keyframes pin{from{opacity:0;transform:translateX(24px)}}
.dx-fashion .pdp-cat{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--c-soft)}
.dx-fashion .pdp-info h3{font-family:var(--f-disp);font-weight:400;font-size:clamp(32px,3.6cqi,44px);line-height:1}
.dx-fashion .pdp-price{font-weight:500;font-size:16px}
.dx-fashion .pdp-info p{color:var(--c-soft);font-size:14px;line-height:1.6}
.dx-fashion .pdp-row{display:flex;flex-direction:column;gap:10px}
.dx-fashion .pdp-row > span{font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.dx-fashion .pdp-row em{font-style:normal;color:var(--c-soft)}
.dx-fashion .pdp-sw{display:flex;gap:10px}
.dx-fashion .pdp-sw button{appearance:none;width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);transition:box-shadow .25s ease,scale .16s var(--eo)}
.dx-fashion .pdp-sw button:active{scale:.9}
.dx-fashion .pdp-sw button[aria-pressed="true"]{box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 0 0 3px var(--c-bg),0 0 0 4px var(--c-fg)}
.dx-fashion .pdp-sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px}
.dx-fashion .pdp-sizes button{appearance:none;min-height:44px;border:1px solid var(--c-line);background:transparent;font:500 13px/1 var(--f-body);cursor:pointer;transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.dx-fashion .pdp-sizes button[aria-pressed="true"]{background:var(--c-fg);color:var(--c-bg);border-color:var(--c-fg)}
.dx-fashion .pdp-info details{border-top:1px solid var(--c-line)}
.dx-fashion .pdp-info details:last-child{border-bottom:1px solid var(--c-line)}
.dx-fashion .pdp-info summary{list-style:none;cursor:pointer;padding:15px 0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;display:flex;justify-content:space-between}
.dx-fashion .pdp-info summary::-webkit-details-marker{display:none}
.dx-fashion .pdp-info summary::after{content:"+";transition:transform .3s var(--eo)}
.dx-fashion .pdp-info details[open] summary::after{transform:rotate(45deg)}
.dx-fashion .pdp-info details p{padding-bottom:15px}
.dx-fashion .bagd-in{position:absolute;top:0;right:0;bottom:0;width:min(400px,92%);background:var(--c-bg);color:var(--c-fg);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .6s var(--ed);box-shadow:-30px 0 60px rgba(0,0,0,.15)}
.dx-fashion .bagd.open .bagd-in{transform:none}
.dx-fashion .bagd-h{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--c-line)}
.dx-fashion .bagd-h h3{font-family:var(--f-disp);font-weight:400;font-size:30px}
.dx-fashion .bagd-h button,.dx-fashion .bl button{appearance:none;background:none;border:0;cursor:pointer;font:500 11px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;min-height:44px;color:var(--c-soft)}
.dx-fashion .bagd-l{flex:1;overflow:auto;padding:4px 22px}
.dx-fashion .bagd-l .empty{color:var(--c-soft);padding:26px 0}
.dx-fashion .bl{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--c-line);animation:blin .6s var(--eo)}
@keyframes blin{from{opacity:0;transform:translateX(28px)}}
.dx-fashion .bl .ph{aspect-ratio:3/4}
.dx-fashion .bl b{display:block;font-weight:500;font-size:14px}
.dx-fashion .bl span{display:block;font-size:12px;color:var(--c-soft)}
.dx-fashion .bagd-f{padding:18px 22px;border-top:1px solid var(--c-line);display:flex;flex-direction:column;gap:10px}
.dx-fashion .bagd-f div{display:flex;justify-content:space-between;font-size:15px}
.dx-fashion .bagd-f b{font-weight:500;font-variant-numeric:tabular-nums}
.dx-fashion .bagd-f p{font-size:12px;color:var(--c-soft)}
@container demo (max-width:760px){
  .dx-fashion .nv{grid-template-columns:1fr auto}.dx-fashion .nv .links:first-child{display:none}.dx-fashion .brand{text-align:left;font-size:24px}
  .dx-fashion .hs-bars{display:none}
  .dx-fashion .atel,.dx-fashion .duo{grid-template-columns:1fr}
  .dx-fashion .pdp-in{grid-template-columns:1fr;grid-template-rows:52% 1fr}
}

/* Gallery preview */
.mini-fashion{background:#F5F4F1;color:#111;font-family:'Hanken Grotesk',var(--sans)}
.mini-fashion .m-nav{display:grid;grid-template-columns:1fr auto 1fr;border-bottom:1px solid #DEDBD4;font-size:2cqi;letter-spacing:.14em;text-transform:uppercase}
.mini-fashion .m-nav b{font-family:'Italiana',serif;font-weight:400;font-size:5cqi;letter-spacing:.42em;margin-right:-.42em}
.mini-fashion .m-nav span:last-child{text-align:right}
.mini-fashion .m-stage{position:absolute;left:0;right:0;top:11cqi;bottom:0;overflow:hidden;background:#111}
.mini-fashion .m-track{display:flex;height:100%;width:500%;animation:fslide 12s cubic-bezier(.76,0,.24,1) infinite}
.mini-fashion .m-track span{flex:1;height:100%}
.mini-fashion .m-track img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;filter:brightness(.8)}
@keyframes fslide{0%,20%{transform:translateX(0)}25%,45%{transform:translateX(-20%)}50%,70%{transform:translateX(-40%)}75%,95%{transform:translateX(-60%)}100%{transform:translateX(-80%)}}
.mini-fashion strong{position:absolute;left:4.4cqi;bottom:9cqi;font-family:'Italiana',serif;font-size:10cqi;line-height:.9;color:#fff}
.mini-fashion .m-bars{position:absolute;left:4.4cqi;right:4.4cqi;bottom:4.4cqi;display:flex;gap:1.4cqi}
.mini-fashion .m-bars i{flex:1;height:1px;background:rgba(255,255,255,.35);position:relative;overflow:hidden}
.mini-fashion .m-bars i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left;animation:mbar 12s linear infinite}
.mini-fashion .m-bars i:nth-child(2)::after{animation-name:mbar2}.mini-fashion .m-bars i:nth-child(3)::after{animation-name:mbar3}.mini-fashion .m-bars i:nth-child(4)::after{animation-name:mbar4}
@keyframes mbar{0%{transform:scaleX(0)}25%,100%{transform:scaleX(1)}}
@keyframes mbar2{0%,25%{transform:scaleX(0)}50%,100%{transform:scaleX(1)}}
@keyframes mbar3{0%,50%{transform:scaleX(0)}75%,100%{transform:scaleX(1)}}
@keyframes mbar4{0%,75%{transform:scaleX(0)}100%{transform:scaleX(1)}}

/* Motion off: keep state changes, drop travel */
@media (prefers-reduced-motion:reduce){
  .dx [data-r]{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
  .dx *{animation:none!important}
  .dx canvas.snow{display:none}
}