/* =========================================================================
   cms.css — CMS runtime styles:
   1) overflow-proofing components (show-more grids, masked carousels, nav "More")
   2) full LIGHT theme (body.light), switchable from the dashboard
   3) preview badge
   ========================================================================= */

/* ---------- 1. overflow-proofing ---------- */
.ovf-hide{display:none !important}
/* hard-capped overflow: hidden with no way to expand (see ovfCap) */
.ovf-cap{display:none !important}
.ovf-open > .ovf-hide{display:revert !important}
.ovf-more-wrap{text-align:center;margin-top:28px}
.ovf-more-wrap .btn{min-width:170px}

.ovf-wrap{position:relative}
.ovf-row{display:flex !important;grid-template-columns:none !important;gap:18px;overflow-x:auto;
  scroll-snap-type:x proximity;scroll-padding-inline:4px;padding:4px 4px 16px;scrollbar-width:none;
  overscroll-behavior-x:contain;
  --fl:transparent;--fr:transparent;   /* edge fades toggled by scroll position */
  -webkit-mask:linear-gradient(90deg,var(--fl),#000 5%,#000 95%,var(--fr));
  mask:linear-gradient(90deg,var(--fl),#000 5%,#000 95%,var(--fr))}
.ovf-row.at-start{--fl:#000}   /* first card fully visible, no left fade */
.ovf-row.at-end{--fr:#000}     /* last card fully visible, no right fade */
.ovf-row::-webkit-scrollbar{display:none}
.ovf-row > *{flex:0 0 auto;width:min(300px,76vw);scroll-snap-align:start}
.ovf-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line2);background:rgba(8,8,8,.72);color:#fff;font-size:1.5rem;line-height:1;
  cursor:pointer;z-index:6;display:grid;place-items:center;transition:background .25s var(--ease),color .25s,border-color .25s;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ovf-arrow:hover{background:var(--acc);border-color:var(--acc);color:#141007}
.ovf-prev{left:-10px}
.ovf-next{right:-10px}
.ovf-arrow.ovf-hidden{opacity:0;pointer-events:none;transform:translateY(-50%) scale(.7)}

/* nav "More" dropdown (when links exceed capacity) */
.nav-more{position:relative}
.nav-more-drop{position:absolute;top:100%;right:0;margin:8px 0 0;padding:8px;min-width:190px;display:none;
  list-style:none;background:#0b0b0b;border:1px solid var(--line2);border-radius:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.5);z-index:60}
.nav-more:hover .nav-more-drop,.nav-more:focus-within .nav-more-drop{display:block}
.nav-more-drop li{list-style:none;margin:0}
.nav-more-drop a{display:block;padding:9px 13px;border-radius:8px}
.nav-more-drop a:hover{background:rgba(255,255,255,.06)}

/* ---------- 2. LIGHT THEME ---------- */
body.light{
  --b0:#f6f4ee;--b1:#edeae2;--b2:#e3dfd4;--b3:#d8d3c5;
  --f0:#16140f;--f1:#3b382e;--f2:#6c675a;--f3:#96907c;
  --line:rgba(20,16,7,.12);--line2:rgba(20,16,7,.22);
  --card:rgba(20,16,7,.035);--card-h:rgba(20,16,7,.06);
  background:var(--b0);color:var(--f0)}
body.light ::selection{background:#16140f;color:#fff}

/* page + section surfaces (beats the dark !important tints) */
body.light section{background:rgba(255,255,255,.62) !important}
body.light section[style*="background"]{background:var(--b1) !important}
body.light .endnote{background:var(--b1) !important}
body.light .endnote h2{background-image:linear-gradient(110deg,#16140f 20%,var(--acc) 50%,#16140f 80%)}

/* homepage animated canvas: soften into the paper background */
body.light #bg-canvas{opacity:.34}
body.light #bg-veil{background:linear-gradient(180deg,rgba(246,244,238,.55),rgba(246,244,238,.85))}
body.light #grain-motion{opacity:.05}

/* nav + footer */
body.light .nav{background:rgba(246,244,238,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
body.light .nav.scrolled{background:rgba(246,244,238,.94)}
body.light .nav a,body.light .nav .brand b{color:var(--f0)}
body.light .nav .brand img{filter:invert(1) brightness(.2)}
body.light .burger span{background:var(--f0)}
body.light .foot{background:#e7e3d9 !important;color:var(--f1)}
body.light .foot a{color:var(--f1)}
body.light .foot .brand b{color:var(--f0)}
body.light .foot .socials a{border-color:var(--line2);color:var(--f0)}

/* glass cards / forms -> soft paper cards */
body.light .card,body.light .price-card,body.light .form-card,body.light .ribbon,body.light .modal-box{
  background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.55)) !important;
  border:1px solid rgba(20,16,7,.13) !important;
  box-shadow:0 10px 30px rgba(30,24,8,.08) !important;
  -webkit-backdrop-filter:none;backdrop-filter:none}
body.light .track,body.light .vidc,body.light .stat{background:rgba(255,255,255,.7);border-color:rgba(20,16,7,.12)}
body.light .show-detail,body.light .show-item{background:rgba(255,255,255,.7);border-color:rgba(20,16,7,.12)}
body.light .show-item.on{background:linear-gradient(90deg,rgba(217,164,65,.18),rgba(255,255,255,.6));color:var(--f0)}
body.light .show-panel .p-desc,body.light .show-panel ul li{color:var(--f1)}
body.light .media-carousel{border-color:rgba(20,16,7,.15)}

/* inputs */
body.light input,body.light select,body.light textarea{
  background:rgba(255,255,255,.85);color:var(--f0);border-color:rgba(20,16,7,.16)}
body.light input::placeholder,body.light textarea::placeholder{color:var(--f3)}
body.light .btn-ghost{color:var(--f0);border-color:rgba(20,16,7,.3)}
body.light .btn-ghost:hover{border-color:var(--acc)}

/* misc dark-hardcoded bits */
body.light .ovf-arrow{background:rgba(255,255,255,.85);color:var(--f0)}
body.light .nav-more-drop{background:#fffdf8;border-color:var(--line2)}
body.light .nav-more-drop a:hover{background:rgba(20,16,7,.05)}
body.light .banner-bg{opacity:.5}
body.light .art-body{color:var(--f1)}
body.light .art-body .pull{color:var(--f0)}
body.light .tm-track span{color:var(--f2)}
body.light .tm-track span:hover{color:var(--f0)}

/* nav / link hovers: white hover states become gold on paper */
body.light .nav-links a:hover,body.light .nav-links a.active{color:var(--acc)}
body.light .burger span{background:var(--f0)}

/* hero: dark cinematic overlay -> soft paper wash; ticker bar goes light */
body.light .hero::after{background:
  linear-gradient(100deg,rgba(246,244,238,.88) 0%,rgba(246,244,238,.55) 46%,rgba(246,244,238,.3) 100%),
  linear-gradient(180deg,rgba(246,244,238,.5) 0%,transparent 26%,transparent 60%,rgba(246,244,238,.95) 100%)}
body.light .marquee{background:rgba(255,255,255,.55);border-color:var(--line)}
body.light .hero-bottom{border-top-color:var(--line2)}

/* stats (10+ / 3 / 100% …) — hardcoded white in site.css */
body.light .stat b,body.light .hero-stats .st b{color:var(--f0)}

/* path cards ("Choose Your Path"): text sits on a dark photo overlay — keep it white */
body.light .path .pin h3{color:#fff}
body.light .path .pin p{color:rgba(255,255,255,.85)}

/* music & video card titles — hardcoded white in site.css */
body.light .track .meta .t,body.light .vidc .meta .t{color:var(--f0)}
body.light .track:hover .meta .t,body.light .vidc:hover .meta .t{color:var(--acc)}

/* contact section (homepage): dark band + white kinetic text -> paper band */
body.light #contact{background:var(--b1) !important}
body.light .ct-body::before{background:radial-gradient(58% 62% at 50% 48%,rgba(246,244,238,.8),transparent 72%)}
body.light .ct-bgrow{-webkit-text-stroke:1px rgba(20,16,7,.12)}
body.light .ct-bgrow.fill{color:rgba(20,16,7,.05);-webkit-text-stroke:0}
body.light .ct-mail{color:var(--f0)}
body.light .ct-mail:hover{color:var(--acc)}

/* buttons: the white "primary" (Apply Now) button inverts to ink so it stays visible */
body.light .btn-primary{background:#16140f;color:#fff}
body.light .btn-primary:hover{background:var(--acc);color:#141007}
body.light .btn-play{color:var(--f0)}

/* subpage banners: dark gradient over the photo -> light wash, so the
   dark heading/description text stays readable on top of the image */
body.light .banner::after{background:linear-gradient(180deg,rgba(246,244,238,.82) 0%,rgba(246,244,238,.58) 40%,rgba(246,244,238,.96) 100%)}
body.light .banner h1{text-shadow:none}
body.light .banner p{color:var(--f1)}

/* page-transition veil + team toss cards */
body.light #pt-veil{background:#f6f4ee}
body.light .toss .toss-card{background:#fffdf8 !important;box-shadow:0 18px 44px rgba(30,24,8,.18)}
body.light .toss-dots i{background:rgba(20,16,7,.22)}
body.light .mc-dots i{background:rgba(20,16,7,.3)}

/* ---------- 3. preview badge ---------- */
.cms-preview-tag{position:fixed;left:14px;bottom:14px;z-index:99999;background:var(--acc);color:#141007;
  font:600 11px/1 Poppins,sans-serif;letter-spacing:.1em;text-transform:uppercase;
  padding:9px 14px;border-radius:999px;box-shadow:0 6px 24px rgba(0,0,0,.45);pointer-events:none}