/* Luminary signature layer: "The Ascent".  Goes in Appearance > Customize > Additional CSS (or Tilo custom CSS).
   One light source (gold), one motif (the rising ladder of credentials), smooth motion. */
:root{--lum-ink:#1d120a;--lum-brown:#3b2314;--lum-gold:#e0a93b;--lum-ember:#c9702b;--lum-cream:#faf4e8;--lum-glow:rgba(224,169,59,.42)}
html{scroll-behavior:smooth}
body.mosaic-builder-page{background:var(--lum-cream)}

/* ---------- type ---------- */
.lum-h{letter-spacing:-.012em;text-wrap:balance}
.lum-gold{color:var(--lum-gold)!important}
.mosaic-text a{color:inherit;text-decoration:underline;text-decoration-color:var(--lum-gold);text-underline-offset:.22em;text-decoration-thickness:2px;transition:text-decoration-color .3s}
.mosaic-text a:hover{text-decoration-color:currentColor}

/* ---------- hero: a light source rising from the corner ---------- */
.lum-hero{position:relative;isolation:isolate;overflow:hidden;
  background:
   radial-gradient(55% 75% at 82% 18%,rgba(224,169,59,.46),transparent 62%),
   radial-gradient(45% 55% at 4% 108%,rgba(201,112,43,.30),transparent 70%),
   linear-gradient(160deg,#2a1a0e 0%,#1d120a 60%,#150d07 100%)}
.lum-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 119px,rgba(224,169,59,.07) 119px 120px);
  mask-image:linear-gradient(to bottom,#000 0,transparent 85%)}
.lum-hero::after{content:"";position:absolute;inset-block:0;inset-inline-end:14%;width:1px;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--lum-gold) 35%,transparent);opacity:.55;animation:lumBeam 7s ease-in-out infinite}
@keyframes lumBeam{0%,100%{opacity:.25;transform:translateY(-6%)}50%{opacity:.7;transform:translateY(6%)}}
.lum-curve{border-end-start-radius:50% 3.5rem;border-end-end-radius:50% 3.5rem}
.lum-dawn{background:linear-gradient(180deg,var(--lum-cream),#f3e4c2)}

/* ---------- the ladder: five rungs that step upward ---------- */
.lum-ladder .mosaic-column{position:relative}
.lum-rung{position:relative;display:block;background:rgba(255,255,255,.06);border:1px solid rgba(224,169,59,.32);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:1rem;transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .3s,background .3s}
.lum-rung:hover{transform:translateX(.5rem);border-color:var(--lum-gold);background:rgba(224,169,59,.13)}
.lum-rung.r1{margin-inline-start:0}.lum-rung.r2{margin-inline-start:1.1rem}.lum-rung.r3{margin-inline-start:2.2rem}
.lum-rung.r4{margin-inline-start:3.3rem}.lum-rung.r5{margin-inline-start:4.4rem;box-shadow:0 0 2.2rem var(--lum-glow)}
[dir=rtl] .lum-rung:hover{transform:translateX(-.5rem)}
@media(max-width:700px){.lum-rung.r2{margin-inline-start:.5rem}.lum-rung.r3{margin-inline-start:1rem}.lum-rung.r4{margin-inline-start:1.5rem}.lum-rung.r5{margin-inline-start:2rem}}

/* ---------- lantern cards ---------- */
.lum-lantern{position:relative;overflow:hidden;border:1px solid var(--lum-line,#e6dac2);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.lum-lantern::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:linear-gradient(90deg,var(--lum-gold),var(--lum-ember));transform:scaleX(.18);transform-origin:left;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.lum-lantern:hover{transform:translateY(-6px);box-shadow:0 1.4rem 3rem -1rem rgba(59,35,20,.28),0 0 2.4rem rgba(224,169,59,.2)}
.lum-lantern:hover::before{transform:scaleX(1)}
.lum-dark-card{background:linear-gradient(160deg,#2c1b0f,#1d120a)!important;border-color:rgba(224,169,59,.28)!important}

/* big editorial step numbers */
.lum-num{font-family:"Mosaic Playfair Display",Georgia,serif;font-size:4.5rem;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--lum-gold);opacity:.9}

/* ---------- buttons: a little light on hover ---------- */
.mosaic-button a,.mosaic-button .mosaic-button__link{transition:box-shadow .35s,transform .35s,background-color .3s,color .3s}
.mosaic-button a:hover{box-shadow:0 0 0 .3rem rgba(224,169,59,.22),0 .9rem 2rem -.8rem rgba(224,169,59,.8)}

/* ---------- hover cards and images ---------- */
.mosaic-hover_box,.mosaic-image img{transition:transform .8s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.mosaic-hover_box:hover{box-shadow:0 1.6rem 3.2rem -1.2rem rgba(29,18,10,.55),0 0 2.6rem rgba(224,169,59,.25)}

/* ---------- marquee ribbon ---------- */
.lum-ribbon{background:linear-gradient(90deg,#2a1a0e,#3b2314,#2a1a0e);border-block:1px solid rgba(224,169,59,.3)}

/* ---------- smooth reveal on scroll (no script; browsers without support simply show everything) ---------- */
@supports (animation-timeline:view()){
  .lum-reveal{animation:lumRise both cubic-bezier(.2,.8,.2,1);animation-timeline:view();animation-range:entry 0% entry 38%}
  .lum-hero .lum-reveal{animation:none}
}
@keyframes lumRise{from{opacity:0;transform:translateY(2.2rem)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lum-reveal,.lum-hero::after{animation:none!important}html{scroll-behavior:auto}.lum-lantern,.lum-rung,.mosaic-hover_box{transition:none}}

/* ---------- header polish ---------- */
header.mosaic-section{backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);background:rgba(255,255,255,.88)!important;border-bottom:1px solid rgba(224,169,59,.25)}

.lum-rung a{text-decoration:none!important;color:inherit}
.lum-brand strong{font-size:1.25rem;letter-spacing:.01em}.lum-brand span{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-family:inherit;color:#8a5a12}

.lum-rung{width:auto!important;box-sizing:border-box;max-width:100%}




.mosaic-template--header{position:sticky;top:0;z-index:60}

/* top-level menu only, so the mega panel keeps its own columns */
.mosaic-menu--mega>.mosaic-menu__panel>.mosaic-menu__list{flex-wrap:nowrap;gap:1.05rem}
.mosaic-menu--mega>.mosaic-menu__panel>.mosaic-menu__list>li>a{white-space:nowrap}

/* mega menu: span the header instead of the narrow menu box, and keep the arrow on the same line as the link */
.mosaic-template--header .mosaic-menu--mega{position:static}
.mosaic-menu--mega>.mosaic-menu__panel>.mosaic-menu__list>li{flex-wrap:nowrap;align-items:center;gap:.1rem}
.mosaic-menu--mega .mosaic-menu__sub-toggle{flex:0 0 auto;margin:0;padding:0 .2rem}
@media (min-width:1024px){.mosaic-template--header .mosaic-menu--mega .mosaic-mega>.sub-menu{max-inline-size:78rem;margin-inline:auto;box-shadow:0 1.4rem 3rem -1rem rgba(29,18,10,.35);border-radius:0 0 1.2rem 1.2rem}}

/* mega menu polish */
.mosaic-menu--mega .mosaic-mega>.sub-menu{align-items:start}
.mosaic-menu--mega .mosaic-mega>.sub-menu>li>a{font-family:"Mosaic Playfair Display",Georgia,serif;font-size:1.05rem;color:var(--lum-brown)}
.mosaic-menu--mega .mosaic-mega>.sub-menu>li>.sub-menu a:hover{color:#8a5a12}
.mosaic-menu__promo{background:linear-gradient(160deg,#faf4e8,#f3e4c2)}
.mosaic-menu__promo .mosaic-menu__promo-btn{background:#e0a93b;color:#1d120a;font-weight:700}
.mosaic-menu__promo .mosaic-menu__promo-btn:hover{background:#3b2314;color:#fff;opacity:1}

/* keep the mega panel open while the pointer travels from the link down to the panel */
@media (min-width:1024px){
  .mosaic-menu--mega .mosaic-mega>.sub-menu::before{content:"";position:absolute;inset-inline:0;top:-2.4rem;height:2.4rem}
  .mosaic-menu--mega .mosaic-mega>.sub-menu{animation:lumMega .28s cubic-bezier(.2,.8,.2,1)}
}
@keyframes lumMega{from{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:none}}