/* ============================================================
   Dessange Experience — shared site layer (scoped to .dsx)
   Loaded per-page via <link href="/web/content/<id>/dsx.css">.
   Mirrors the live homepage primitives (#dsx-home) but on a
   reusable .dsx wrapper so any page can use them. Rides on the
   theme's --ds-* tokens; fonts inherit the theme faces.
   ============================================================ */
.dsx{
  --dsx-pg:#F7F2ED; --dsx-pg2:#FDFAF6;
  --dsx-ink:var(--ds-ink,#161615); --dsx-body:#3A362F; --dsx-mut:#71695E;
  --dsx-line:rgba(22,22,21,.15); --dsx-line2:rgba(22,22,21,.34);
  --dsx-acc:var(--ds-bronze,#8C6F4E); --dsx-gold:#E8CFA8;
  --dsx-cream:#F3EDE4; --dsx-cream-hi:#F7F2ED;
  --dsx-glass:rgba(247,242,237,.6); --dsx-glass-brd:rgba(22,22,21,.1);
  --dsx-ease:cubic-bezier(.22,1,.36,1);
  --dsx-hdr:72px;
  background:var(--dsx-pg); color:var(--dsx-body); overflow-x:clip;
}
.dsx *,.dsx *::before,.dsx *::after{box-sizing:border-box}
.dsx ::selection{background:var(--dsx-acc);color:#fff}
.dsx img{user-select:none;max-width:none}
.dsx a{text-decoration:none}
.dsx :focus-visible{outline:2px solid var(--dsx-acc);outline-offset:3px}

/* ---- layout primitives ---- */
.dsx .dsx-wrap{max-width:var(--ds-container-max,1280px);margin:0 auto;padding:0 clamp(22px,4vw,44px)}
.dsx .dsx-wrap-wide{max-width:1440px}
.dsx .dsx-2col{display:grid;gap:clamp(36px,5vw,80px);align-items:center}
.dsx .dsx-mt30{margin-top:30px}
.dsx .dsx-h100{height:100%}
.dsx .dsx-row{display:flex;gap:24px;align-items:center;flex-wrap:wrap}

/* ---- type primitives ---- */
.dsx .dsx-kicker{display:block;font-size:10.5px;line-height:1;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--dsx-acc)}
.dsx .dsx-kicker-hero{color:var(--dsx-gold)}
.dsx .dsx-display{margin:20px 0 0;font-weight:500;line-height:1.06;letter-spacing:var(--ds-tracking-tight,-0.02em);color:var(--dsx-ink);text-wrap:balance}
.dsx .dsx-display em{font-style:italic;font-weight:400;color:var(--dsx-acc)}
.dsx .dsx-display-l{font-size:clamp(32px,4vw,56px)}
.dsx .dsx-display-m{font-size:clamp(30px,3.6vw,50px)}
.dsx .dsx-display-s{font-size:clamp(32px,3.8vw,52px)}
.dsx .dsx-display-xs{font-size:clamp(24px,2.8vw,40px)}
.dsx .dsx-oncream{color:var(--dsx-cream-hi)}
.dsx .dsx-lede{margin:22px 0 0;font-size:16px;line-height:1.65;color:var(--dsx-body);max-width:56ch;text-wrap:pretty}

/* ---- buttons & links ---- */
.dsx .dsx-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;
  padding:15px 30px;border:1px solid var(--dsx-ink);background:var(--dsx-ink);color:var(--dsx-cream-hi);
  font-size:11px;line-height:1;font-weight:500;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;cursor:pointer;
  transition:background .25s var(--dsx-ease),color .25s var(--dsx-ease),border-color .25s var(--dsx-ease),transform .15s ease-out}
.dsx .dsx-btn:active{transform:translateY(1px)}
.dsx .dsx-btn-cream{background:var(--dsx-cream);border-color:var(--dsx-cream);color:#161615}
.dsx .dsx-btn-ghost{background:transparent;border-color:var(--dsx-line2);color:var(--dsx-ink)}
.dsx .dsx-btn-ghostl{background:transparent;border-color:rgba(243,237,228,.4);color:var(--dsx-cream)}
.dsx .dsx-btn-sm{padding:11px 20px;min-height:0}
@media (hover:hover) and (pointer:fine){
  .dsx .dsx-btn:hover{background:var(--dsx-acc);border-color:var(--dsx-acc);color:#fff}
  .dsx .dsx-btn-cream:hover{background:#fff;border-color:#fff;color:#161615}
  .dsx .dsx-btn-ghost:hover{border-color:var(--dsx-ink);background:var(--dsx-ink);color:var(--dsx-cream-hi)}
  .dsx .dsx-btn-ghostl:hover{background:var(--dsx-cream);border-color:var(--dsx-cream);color:#161615}
}
.dsx .dsx-arrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;line-height:1;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dsx-ink);transition:color .25s ease;padding:10px 0}
.dsx .dsx-arrow span{display:inline-block;transition:transform .3s var(--dsx-ease)}
.dsx .dsx-arrow-l{color:var(--dsx-cream)}
@media (hover:hover) and (pointer:fine){
  .dsx .dsx-arrow:hover{color:var(--dsx-acc)}
  .dsx .dsx-arrow-l:hover{color:var(--dsx-gold)}
  .dsx .dsx-arrow:hover span{transform:translateX(6px)}
}

/* ---- cinematic image frame + filters ---- */
.dsx .dsx-cine{position:relative;overflow:hidden;margin:0}
.dsx .dsx-cine img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);will-change:transform}
.dsx .dsx-f-warm{filter:saturate(1.06) contrast(1.03) sepia(.05)}
.dsx .dsx-f-gold{filter:sepia(.28) saturate(1.25) contrast(1.05) brightness(1.01)}
.dsx .dsx-f-silver{filter:saturate(.55) contrast(1.06) brightness(1.02)}
.dsx .dsx-f-blush{filter:hue-rotate(-10deg) saturate(1.14) brightness(1.02)}
.dsx .dsx-f-dusk{filter:saturate(.78) brightness(.82) contrast(1.12) hue-rotate(8deg)}
.dsx .dsx-f-noir{filter:grayscale(1) contrast(1.1) brightness(.92)}

@keyframes dsxKbDrift{from{transform:scale(1.06) translateX(-1.2%)}to{transform:scale(1.14) translateX(1.2%)}}
.dsx.dsx-js .dsx-vis .dsx-kb-drift{animation:dsxKbDrift 26s ease-in-out infinite alternate both}

/* ---- entrances ---- */
@keyframes dsxUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes dsxFade{from{opacity:0}to{opacity:1}}
.dsx.dsx-js .dsx-up{animation:dsxUp 1.15s var(--dsx-ease) var(--d,0s) both}
.dsx.dsx-js .dsx-fade{animation:dsxFade 1.3s ease var(--d,0s) both}
.dsx.dsx-js .dsx-rv{opacity:0;transform:translateY(28px);
  transition:opacity .8s var(--dsx-ease) var(--d,0s),transform .7s var(--dsx-ease) var(--d,0s)}
.dsx.dsx-js .dsx-rv.dsx-on{opacity:1;transform:none}

/* ---- glass ---- */
.dsx .dsx-glass{background:var(--dsx-glass);border:1px solid var(--dsx-glass-brd);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2)}

/* ---- section head (shared) ---- */
.dsx .dsx-shead{display:flex;flex-direction:column;gap:0}
.dsx .dsx-shead .dsx-lede{margin-top:18px}

/* ---- page hero (shared, compact) ---- */
.dsx .dsx-phero{position:relative;overflow:hidden;background:#111010;min-height:clamp(340px,46vh,520px);display:flex;align-items:flex-end}
.dsx .dsx-phero-media{position:absolute;inset:0}
.dsx .dsx-phero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.dsx .dsx-phero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,16,16,.28),rgba(17,16,16,0) 36%,rgba(17,16,16,.72))}
.dsx .dsx-phero-inner{position:relative;z-index:2;width:100%;padding-top:clamp(60px,9vw,90px);padding-bottom:clamp(34px,5vw,54px)}
.dsx .dsx-phero-title{margin:16px 0 0;font-size:clamp(40px,6vw,80px);line-height:1;font-weight:500;letter-spacing:-.03em;color:var(--dsx-cream-hi);max-width:16ch;text-wrap:balance}
.dsx .dsx-phero-title em{font-style:italic;font-weight:400}
.dsx .dsx-phero-lede{margin:20px 0 0;font-size:16px;line-height:1.6;color:rgba(243,237,228,.86);max-width:56ch}
.dsx .dsx-sec{padding:clamp(60px,8vw,110px) 0}
.dsx .dsx-sec-line{border-top:1px solid var(--dsx-line)}
.dsx .dsx-pg2{background:var(--dsx-pg2)}

/* ---- doors / cards grid (shared) ---- */
.dsx .dsx-doors-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:44px}
.dsx .dsx-door{position:relative;display:block;height:clamp(360px,30vw,460px);overflow:hidden}
.dsx .dsx-door .dsx-cine{position:absolute;inset:0}
.dsx .dsx-door .dsx-cine img{transition:transform 1s var(--dsx-ease)}
.dsx .dsx-door-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,16,16,.1),rgba(17,16,16,.66) 78%)}
.dsx .dsx-door-body{position:absolute;inset:0;padding:26px;display:flex;flex-direction:column;justify-content:space-between;z-index:2}
.dsx .dsx-door-n{font-size:12px;line-height:1;letter-spacing:.24em;color:rgba(243,237,228,.75)}
.dsx .dsx-door h3{margin:0;font-size:clamp(23px,1.9vw,28px);line-height:1.15;font-weight:500;color:var(--dsx-cream-hi)}
.dsx .dsx-door p{margin:10px 0 0;font-size:13.5px;line-height:1.55;color:rgba(243,237,228,.82);max-width:32ch}
.dsx .dsx-door-go{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:10.5px;line-height:1;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--dsx-gold)}
.dsx .dsx-door-go i{font-style:normal;display:inline-block;transition:transform .3s var(--dsx-ease)}
@media (hover:hover) and (pointer:fine){
  .dsx .dsx-door:hover .dsx-cine img{transform:scale(1.07)}
  .dsx .dsx-door:hover .dsx-door-go i{transform:translateX(6px)}
}

/* ---- price / ritual list (services) ---- */
.dsx .dsx-rituals{margin-top:44px;border-top:1px solid var(--dsx-line)}
.dsx .dsx-ritual{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 30px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--dsx-line)}
.dsx .dsx-ritual h3{margin:0;font-size:clamp(20px,2vw,26px);line-height:1.2;font-weight:500;color:var(--dsx-ink)}
.dsx .dsx-ritual h3 em{font-style:italic;font-weight:400;color:var(--dsx-acc)}
.dsx .dsx-ritual p{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:var(--dsx-body);max-width:64ch}
.dsx .dsx-ritual .dsx-price{font-size:15px;line-height:1;font-weight:500;color:var(--dsx-acc);white-space:nowrap;text-align:right}
.dsx .dsx-ritual .dsx-price small{display:block;margin-top:6px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dsx-mut);font-weight:400}

/* ---- team (stylists) ---- */
.dsx .dsx-team{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:clamp(20px,3vw,34px);margin-top:44px}
.dsx .dsx-member .dsx-cine{aspect-ratio:4/5}
.dsx .dsx-member h3{margin:16px 0 0;font-size:clamp(20px,1.8vw,24px);line-height:1.2;font-weight:500;color:var(--dsx-ink)}
.dsx .dsx-member .dsx-role{margin-top:6px;font-size:11px;line-height:1.4;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dsx-acc)}
.dsx .dsx-member p{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:var(--dsx-body)}

/* ---- transformations (before/after) ---- */
.dsx .dsx-tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(20px,3vw,34px);margin-top:44px}
.dsx .dsx-ba{position:relative;aspect-ratio:4/5;overflow:hidden;user-select:none;touch-action:pan-y}
.dsx .dsx-ba figure{position:absolute;inset:0;margin:0}
.dsx .dsx-ba .dsx-after{clip-path:inset(0 0 0 var(--x,50%))}
.dsx .dsx-ba-tag{position:absolute;top:12px;z-index:3;font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:rgba(17,16,16,.5);padding:5px 9px}
.dsx .dsx-ba-tag.b{left:12px} .dsx .dsx-ba-tag.a{right:12px}
.dsx .dsx-ba-handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:var(--dsx-cream-hi);z-index:4;transform:translateX(-1px)}
.dsx .dsx-ba-handle b{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:999px;background:var(--dsx-cream-hi);color:#161615;display:grid;place-items:center;font-size:13px;box-shadow:0 6px 18px rgba(17,16,16,.35)}
.dsx .dsx-tmeta{margin-top:14px}
.dsx .dsx-tmeta h3{margin:0;font-size:19px;line-height:1.25;font-weight:500;color:var(--dsx-ink)}
.dsx .dsx-tmeta .dsx-by{margin-top:6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dsx-mut)}

/* ---- journal ---- */
.dsx .dsx-jgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:clamp(22px,3vw,36px);margin-top:44px}
.dsx .dsx-jcard .dsx-cine{aspect-ratio:16/11}
.dsx .dsx-jcard.tall .dsx-cine{aspect-ratio:4/5}
.dsx .dsx-jcard .dsx-tags{display:flex;gap:14px;margin-top:16px;font-size:9.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.dsx .dsx-jcard .dsx-tags .c{color:var(--dsx-acc)} .dsx .dsx-jcard .dsx-tags .m{color:var(--dsx-mut)}
.dsx .dsx-jcard h3{margin:10px 0 0;font-size:clamp(20px,1.8vw,24px);line-height:1.22;font-weight:500;color:var(--dsx-ink);text-wrap:balance;transition:color .25s ease}
.dsx .dsx-jcard:hover h3{color:var(--dsx-acc)}
.dsx .dsx-jcard .dsx-deck{margin:10px 0 0;font-size:13px;line-height:1.6;color:var(--dsx-mut)}
.dsx .dsx-jcard .dsx-by{display:block;margin-top:12px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dsx-mut)}
/* article */
.dsx .dsx-art{max-width:760px;margin:0 auto;padding:clamp(40px,6vw,72px) clamp(22px,4vw,44px)}
.dsx .dsx-art-deck{margin:0;font-size:clamp(19px,2vw,23px);line-height:1.55;font-style:italic;color:var(--dsx-ink)}
.dsx .dsx-art p{margin:26px 0 0;font-size:17px;line-height:1.8;color:var(--dsx-body)}
.dsx .dsx-art .drop::first-letter{float:left;font-size:64px;line-height:.8;padding:6px 12px 0 0;color:var(--dsx-acc);font-weight:500}
.dsx .dsx-pull{margin:36px 0 8px;padding:8px 0 8px 26px;border-left:2px solid var(--dsx-acc)}
.dsx .dsx-pull p{margin:0;font-size:clamp(20px,2.2vw,26px);line-height:1.45;font-style:italic;color:var(--dsx-ink)}

/* ---- events ---- */
.dsx .dsx-elist{margin-top:44px;border-top:1px solid var(--dsx-line)}
.dsx .dsx-erow{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:clamp(18px,3vw,40px);align-items:center;padding:clamp(22px,3vw,32px) 0;border-bottom:1px solid var(--dsx-line)}
.dsx .dsx-erow .day{font-size:clamp(40px,4vw,56px);line-height:1;font-weight:500;color:var(--dsx-ink)}
.dsx .dsx-erow .mo{margin-top:6px;font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--dsx-acc)}
.dsx .dsx-erow .type{font-size:9.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--dsx-mut)}
.dsx .dsx-erow h3{margin:10px 0 0;font-size:clamp(21px,2.2vw,30px);line-height:1.15;font-weight:500;color:var(--dsx-ink)}
.dsx .dsx-erow .desc{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:var(--dsx-body);max-width:64ch}
.dsx .dsx-erow .price{font-size:15px;font-weight:500;color:var(--dsx-ink);white-space:nowrap;text-align:right}

/* ---- gift cards ---- */
.dsx .dsx-gcard{aspect-ratio:1.586;background:#161615;color:#F3EDE4;padding:clamp(20px,2.6vw,30px);display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 26px 60px -18px rgba(0,0,0,.5)}
.dsx .dsx-gcard .top{display:flex;justify-content:space-between;align-items:baseline}
.dsx .dsx-gcard .wm{font-size:14px;font-weight:700;letter-spacing:.32em}
.dsx .dsx-gcard .gc{font-size:8px;letter-spacing:.3em;text-transform:uppercase;color:rgba(243,237,228,.5)}
.dsx .dsx-gcard .amt{font-size:clamp(30px,3.6vw,44px);line-height:1;font-weight:500}
.dsx .dsx-gtiers{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.dsx .dsx-gtier{padding:12px 20px;border:1px solid var(--dsx-line);font-size:14px;font-weight:500;color:var(--dsx-ink)}

/* ---- contact ---- */
.dsx .dsx-cgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,70px);margin-top:44px;align-items:start}
.dsx .dsx-cinfo .dsx-crow{padding:20px 0;border-bottom:1px solid var(--dsx-line)}
.dsx .dsx-cinfo .k{font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--dsx-acc)}
.dsx .dsx-cinfo .v{margin-top:8px;font-size:16px;line-height:1.5;color:var(--dsx-ink)}
.dsx .dsx-cinfo .v a{color:var(--dsx-ink);text-decoration:underline;text-underline-offset:3px}
.dsx .dsx-cmap{aspect-ratio:4/5;overflow:hidden;border:1px solid var(--dsx-line);background:#1E2723}
.dsx .dsx-cmap img{width:100%;height:100%;object-fit:cover}

/* ---- marquee (shared) ---- */
@keyframes dsxMarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.dsx .dsx-marq{overflow:hidden;border-top:1px solid var(--dsx-line);border-bottom:1px solid var(--dsx-line);padding:18px 0;white-space:nowrap}
.dsx .dsx-marq-track{display:inline-block}
.dsx.dsx-js .dsx-marq.dsx-vis .dsx-marq-track{animation:dsxMarq 57s linear infinite}
.dsx .dsx-marq span{font-size:clamp(15px,1.6vw,20px);line-height:1;font-style:italic;letter-spacing:.06em;color:var(--dsx-mut)}

/* ---- responsive ---- */
@media (max-width:860px){
  .dsx .dsx-desktop{display:none !important}
  .dsx .dsx-2col,.dsx .dsx-cgrid{grid-template-columns:1fr !important}
  .dsx .dsx-erow{grid-template-columns:84px 1fr}
  .dsx .dsx-erow .price{grid-column:1/-1;text-align:left}
  .dsx .dsx-ritual{grid-template-columns:1fr}
  .dsx .dsx-ritual .dsx-price{text-align:left}
}
@media (min-width:861px){.dsx .dsx-mobile{display:none !important}}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .dsx.dsx-js .dsx-vis .dsx-kb-drift,.dsx.dsx-js .dsx-marq.dsx-vis .dsx-marq-track{animation:none}
  .dsx.dsx-js .dsx-up,.dsx.dsx-js .dsx-fade{animation:dsxFade .4s ease both}
  .dsx.dsx-js .dsx-rv{transform:none;transition:opacity .4s ease}
  .dsx .dsx-cine img{transition:none !important;transform:none !important}
}