@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root{
  --black:#111111;
  --black-soft:#171717;
  --white:#ffffff;
  --paper:#f7f6f2;
  --orange:#f6a950; /* RAL 1017 Safrangelb, sRGB approximation */
  --line-dark:#303030;
  --line-light:#d8d5cf;
  --muted:#b9b9b9;
  --frame:1180px;
  --type-body:15px;
  --type-small:11px;
  --type-ui:10px;
}


*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:'Montserrat',Arial,sans-serif;
  font-size:var(--type-body);
  line-height:1.6;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}

/* Header */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  min-height:68px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:28px;
  width:min(var(--frame),calc(100% - 64px));
  margin:0 auto;
  padding:0 26px;
  background:rgba(17,17,17,.97);
  border-bottom:1px solid var(--line-dark);
}
.brand{display:flex;align-items:center;gap:10px;min-width:0;white-space:nowrap}
.brand>img:first-child{width:40px;height:34px;object-fit:contain}
.brand .brand-wordmark{width:112px;height:auto;object-fit:contain}
.topbar nav{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:22px;
  white-space:nowrap;
  font-family:'Montserrat',Arial,sans-serif;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.topbar nav a:hover,.topbar nav a.active{color:var(--orange)}
.sticky-inquiry{
  position:static;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:112px;
  height:44px;
  flex:0 0 112px;
  background:var(--orange);
  color:var(--black);
  font-family:'Montserrat',Arial,sans-serif;
  font-size:11px;
  font-weight:700;
  line-height:1;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-align:center;
}

/* Type */
.kicker,.label{
  margin:0 0 12px;
  color:var(--orange);
  font-family:'Montserrat',Arial,sans-serif;
  font-size:10px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
}
h1,h2{
  margin:.1em 0 .45em;
  font-family:'Montserrat',Arial,sans-serif;
  font-weight:700;
  line-height:.96;
  letter-spacing:-.03em;
  text-transform:uppercase;
}
h1{font-size:clamp(42px,4.4vw,68px)}
h2{font-size:clamp(34px,3.7vw,56px)}
h1 em,h2 em{font-style:normal;color:var(--orange)}
.hugo{
  max-width:560px;
  font-size:clamp(31px,3.1vw,48px);
  line-height:1.08;
  text-transform:none;
  letter-spacing:-.025em;
}
.section-subtitle{font-size:clamp(24px,2.3vw,34px);margin-top:26px;margin-bottom:20px}

/* Buttons */
.btn,.path-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 16px;
  border:1px solid;
  font-family:'Montserrat',Arial,sans-serif;
  font-size:10px;
  font-weight:700;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.orange{background:var(--orange);border-color:var(--orange);color:var(--black)}
.light-action{background:var(--white);border-color:var(--white);color:var(--black);transition:background-color .18s ease,border-color .18s ease,color .18s ease}
.light-action:hover,.light-action:focus-visible{background:var(--orange);border-color:var(--orange);color:var(--black)}
.outline{border-color:#777;background:transparent;color:var(--white)}
.dark{background:var(--black);border-color:var(--black);color:var(--white)}
.inline-cta{margin-top:22px}

/* Shared desktop frame */
.pathways,.hero,.quote,.split,.organizer,.page-hero,.event-details,.manifest,.live,.learn,.contact,footer{
  width:min(var(--frame),calc(100% - 64px));
  margin-left:auto;
  margin-right:auto;
}

/* Homepage audience choice: one calm black field, no card effect */
.pathways{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--black);
  color:var(--white);
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
}
.path-card{
  display:grid;
  grid-template-rows:auto minmax(58px,auto) auto;
  align-content:center;
  min-width:0;
  padding:42px 44px 40px;
  border-right:1px solid var(--line-dark);
}
.path-card:last-child{border-right:0}
.path-card h1,.path-card h2{
  max-width:500px;
  margin:.12em 0 .38em;
  color:var(--white);
  font-size:clamp(32px,3vw,48px);
  line-height:.98;
}
.path-card h1 em,.path-card h2 em{font-style:normal;color:var(--orange)}
.path-card p{max-width:500px;margin:0 0 22px;color:#d4d4d4;font-size:var(--type-body);line-height:1.58}
.path-button{
  align-self:flex-start;
  min-width:116px;
  height:40px;
  min-height:40px;
  margin-top:0;
  background:var(--orange);
  border-color:var(--orange);
  color:var(--black);
  transition:filter .18s ease,transform .18s ease;
}
.path-card:hover .path-button,.path-card:focus-visible .path-button{filter:brightness(.94)}

/* Homepage hero */
.hero{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  align-items:stretch;
  margin-top:26px;
  margin-bottom:26px;
  border:1px solid #2b2b2b;
}
.hero-copy{display:flex;flex-direction:column;justify-content:center;padding:52px 48px}
.hero-media{margin:0;align-self:center;background:#080808;overflow:hidden}
.hero-media video{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:center;
}

/* Quote */
.quote{padding:64px 48px;text-align:center;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.quote blockquote{max-width:850px;margin:0 auto 18px;font-size:clamp(29px,3vw,46px);font-weight:600;line-height:1.12}
.quote p{margin:0;color:var(--orange);font-size:11px;letter-spacing:.14em;text-transform:uppercase}

/* Two-column sections */
.split,.organizer{display:grid;grid-template-columns:minmax(360px,.82fr) minmax(0,1.18fr);align-items:center;margin-top:26px;margin-bottom:26px}
.light{background:var(--paper);color:var(--black)}
.copy,.organizer-copy{padding:52px}
.copy p,.organizer-copy p,.manifest p,.contact p{max-width:700px;font-size:var(--type-body);line-height:1.65}
.closing{margin-top:30px;font-size:18px;font-weight:600}
.photo{display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden}
.photo img{width:100%;height:auto;object-fit:contain}
.photo.portrait-34{padding:0 0 0 0;background:#e8e5df}
.photo.portrait-34 img{aspect-ratio:3/4;object-fit:contain}
.photo.landscape-43 img{aspect-ratio:4/3;object-fit:contain}
.reverse{grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr)}
.reverse .copy{order:1}
.reverse .photo{order:2}
.split+.split{border-top:1px solid var(--line-light)}

/* Philosophy */
.manifest{padding:74px 64px;max-width:var(--frame)}
.manifest h2{max-width:880px}
.manifest p{max-width:760px}

/* Organizer page */
.page-hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  margin-top:26px;
  margin-bottom:26px;
  border:1px solid #2b2b2b;
}
.page-hero>div{padding:58px 50px}
.page-hero>div>p{max-width:700px}
.page-hero h1{font-size:clamp(42px,4.5vw,68px)}
.page-hero figure{margin:0;background:#080808;overflow:hidden}
.page-hero figure img{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}

/* Organizer service details: white breathing space between dark sections */
.event-details{background:var(--paper);color:var(--black);padding:58px 52px 62px}
.event-details>div{max-width:780px}
.event-details p{margin:0 0 12px;font-size:var(--type-body);line-height:1.68}
.event-details .inline-cta{margin-top:20px}

/* Private intro */
.learn{padding:68px 48px}
.private-intro{max-width:var(--frame)}
.private-intro h1{font-size:clamp(42px,4.5vw,68px)}
.private-intro>p,.private-intro>h1,.private-intro>h2,.private-intro>.btn{max-width:760px}

/* Live videos */
.live{padding:68px 48px;background:#080808}
.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.video-grid.three{grid-template-columns:repeat(3,1fr)}
.video-grid figure{margin:0;min-width:0}
.video-grid video{width:100%;aspect-ratio:16/9;background:#000;object-fit:contain}
.video-grid figcaption{margin-top:10px;color:#bbb;font-family:'Montserrat',Arial,sans-serif;font-size:10px;letter-spacing:.08em;text-transform:uppercase}

/* Contact */
.contact{padding:68px 64px}
.contact h2{max-width:760px}

/* Footer */
footer{
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  margin-top:20px;
  padding:38px 0;
  border-top:1px solid #333;
  color:#aaa;
  font-size:11px;
}
.footer-logo{display:block;margin-right:auto}
.footer-logo img{width:135px;height:auto}
.instagram-btn,.audio-menu-btn{min-height:36px;padding:0 14px;color:#fff;border-color:#777;background:transparent}
.instagram-btn:hover,.audio-menu-btn:hover{border-color:var(--orange);color:var(--orange)}
.audio-menu{position:relative}
.audio-menu-btn{cursor:pointer}
.audio-panel{position:absolute;left:0;bottom:calc(100% + 10px);min-width:220px;padding:14px 16px;background:#171717;border:1px solid #444;box-shadow:0 8px 24px rgba(0,0,0,.35);color:#bbb}
.audio-panel p{margin:0;font-size:11px}
.legal-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}
.legal-links a:hover{color:var(--orange)}

@media(max-width:1050px) and (min-width:821px){
  .topbar{gap:18px}
  .brand .brand-wordmark{width:96px}
  .topbar nav{gap:15px;font-size:10px;letter-spacing:.05em}
  .sticky-inquiry{width:102px;flex-basis:102px}
  .path-card{padding-left:34px;padding-right:34px}
  .hero-copy{padding-left:40px;padding-right:40px}
}

@media(max-width:820px){
  body{padding-bottom:58px}
  .topbar{
    width:100%;
    min-height:64px;
    padding:9px 16px 8px;
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    gap:6px;
  }
  .brand{justify-self:start}
  .brand>img:first-child{width:34px;height:28px}
  .brand .brand-wordmark{width:102px}
  .topbar nav{
    width:100%;
    justify-content:flex-start;
    gap:18px;
    overflow-x:auto;
    padding:3px 0 2px;
    scrollbar-width:none;
    font-size:10px;
  }
  .topbar nav::-webkit-scrollbar{display:none}
  .sticky-inquiry{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:70;
    width:auto;
    height:58px;
    background:var(--orange);
  }

  .pathways,.hero,.quote,.split,.organizer,.page-hero,.event-details,.manifest,.live,.learn,.contact,footer{width:100%;margin-left:0;margin-right:0}
  .pathways{grid-template-columns:1fr}
  .path-card{padding:32px 22px;border-right:0;border-bottom:1px solid var(--line-dark)}
  .path-card:last-child{border-bottom:0}
  .path-card h1,.path-card h2{font-size:clamp(31px,10vw,46px)}

  .hero{grid-template-columns:1fr;margin-top:0;margin-bottom:0;border-left:0;border-right:0}
  .hero-copy{padding:58px 22px 42px}
  .hero-media video{width:100%;aspect-ratio:16/9}

  .quote{padding:70px 22px}
  .split,.organizer,.reverse{grid-template-columns:1fr;margin:0}
  .copy,.organizer-copy{padding:60px 22px}
  .photo,.reverse .photo{order:initial}
  .reverse .copy{order:2}
  .reverse .photo{order:1}
  .photo img,.photo.portrait-34 img,.photo.landscape-43 img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}

  .manifest,.learn,.live,.contact,.event-details{padding:70px 22px}
  .page-hero{grid-template-columns:1fr;margin:0;border-left:0;border-right:0}
  .page-hero>div{padding:70px 22px}
  .page-hero figure img{aspect-ratio:auto}
  .video-grid,.video-grid.three{grid-template-columns:1fr}
  .audio-panel{left:auto;right:0}
  footer{padding:40px 22px;gap:18px}
  .footer-logo{margin-right:auto}
}

/* V12.13 refinements */
:root{--type-body:16.5px}

/* Slightly taller, more legible navigation */
.topbar{min-height:82px;grid-template-columns:1fr auto 1fr}
.brand>img:first-child{width:46px;height:39px}
.brand .brand-wordmark{width:132px}
.brand{justify-self:start}
.sticky-inquiry{justify-self:end}
.topbar nav{font-size:12px;justify-content:center}

/* Compact audience choice; CTA is typography, not a button */
.path-card{padding-top:34px;padding-bottom:32px;grid-template-rows:auto minmax(52px,auto) auto}
.path-button{
  display:inline-block;
  min-width:0;height:auto;min-height:0;padding:0;border:0;
  background:transparent;color:var(--orange);
  font-size:14px;font-weight:700;letter-spacing:.08em;
}
.path-card:hover .path-button,.path-card:focus-visible .path-button{filter:none;color:#ffc47d}

/* Wide, shallow video strip on black; current 16:9 source is cropped as a preview */
.hero.hero-strip{display:block;margin-top:0;margin-bottom:0;border:0;border-bottom:1px solid var(--line-dark);background:var(--black)}
.hero-strip .hero-media{width:100%;background:var(--black)}
.hero-strip .hero-media video{width:100%;aspect-ratio:2.4/1;height:auto;object-fit:cover;object-position:center}

/* Descriptive copy uses the same Montserrat family as headings and is slightly larger */
.path-card p,.copy p,.organizer-copy p,.manifest p,.contact p,.event-details p,.learn p{font-family:'Montserrat',Arial,sans-serif;font-size:var(--type-body)}

/* Full-bleed white surfaces while keeping content aligned to the site frame */
.event-details,.full-bleed-light{box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax)}

/* Remove the remaining left-edge box feeling from organizer hero */
.page-hero{border-left:0}

/* Live moments sits directly on the page black, without a second black panel */
.live{background:var(--black)}

/* Handpan finden image fills its column cleanly */
.reverse .photo.portrait-34{align-self:stretch;background:var(--paper)}
.reverse .photo.portrait-34 img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center}

/* Footer: only the two functional channels remain */
footer{justify-content:flex-start;gap:42px}
.footer-logo{display:none}
.footer-channel{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:9px;color:#fff;min-width:92px}
.instagram-icon{width:28px;height:28px}
.footer-symbol{width:28px;height:28px;display:block;background:currentColor;-webkit-mask:url('assets/logo-symbol-white.png') center/contain no-repeat;mask:url('assets/logo-symbol-white.png') center/contain no-repeat}
.instagram-channel span,.audio-menu-btn{font-family:'Montserrat',Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.audio-menu-btn{border:0;padding:0;background:transparent;color:#fff;cursor:pointer}
.footer-channel:hover,.audio-menu-btn:hover{color:var(--orange)}
.audio-menu{position:relative}
.legal-links{margin-left:auto}

@media(max-width:1050px) and (min-width:821px){
  .brand .brand-wordmark{width:116px}
  .topbar nav{font-size:11px}
}
@media(max-width:820px){
  .topbar{min-height:72px}
  .hero-strip .hero-media video{aspect-ratio:2.4/1;object-fit:cover}
  .event-details,.full-bleed-light{box-shadow:none;clip-path:none}
  footer{justify-content:center}
  .legal-links{width:100%;justify-content:center;margin-left:0}
}

/* V12.16 requested content and inquiry refinements */
.path-subtitle{margin:0 0 8px!important;color:var(--white)!important;font-size:17px!important;font-weight:600;line-height:1.4!important}
.path-card .path-subtitle + p{margin-bottom:22px}
.offer-price{margin:18px 0;color:var(--orange);font-size:16px}
.contact-light{background:var(--paper);color:var(--black);box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax)}
.inquiry-form{max-width:760px;margin-top:28px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
.inquiry-form label{display:block;margin-bottom:18px;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.inquiry-form input,.inquiry-form select,.inquiry-form textarea{display:block;width:100%;margin-top:7px;padding:11px 12px;border:1px solid #b8b5ae;border-radius:0;background:#fff;color:#111;font:400 14px/1.4 'Montserrat',Arial,sans-serif;outline:none}
.inquiry-form input,.inquiry-form select{height:44px}
.inquiry-form textarea{resize:vertical;min-height:120px}
.inquiry-form input:focus,.inquiry-form select:focus,.inquiry-form textarea:focus{border-color:var(--orange)}
.form-span{grid-column:1/-1}
.form-submit{margin-top:4px;cursor:pointer}
@media(max-width:820px){.path-card h1,.path-card h2{font-size:clamp(31px,10vw,46px)}.form-grid{grid-template-columns:1fr}.form-span{grid-column:auto}.contact-light{box-shadow:none;clip-path:none}}

/* V12.17 — align homepage pathway content across both desktop columns */
@media (min-width:821px){
  .path-card h1,.path-card h2{
    min-height:2.94em; /* reserve three title lines so subtitles share one baseline */
  }
}

/* V12.18 — clearer interactive header states + compact inquiry forms */
.brand img{
  transition:filter .18s ease;
}
.brand:hover img,.brand:focus-visible img{
  filter:brightness(0) saturate(100%) invert(75%) sepia(71%) saturate(570%) hue-rotate(334deg) brightness(102%) contrast(93%);
}
.sticky-inquiry{
  background:var(--white);
  color:var(--black);
  transition:background-color .18s ease,color .18s ease;
}
.sticky-inquiry:hover,.sticky-inquiry:focus-visible{
  background:var(--orange);
  color:var(--black);
}

/* Forms intentionally compact: no oversized contact block */
.contact-light{
  padding-top:44px;
  padding-bottom:46px;
}
.contact-light h2{
  font-size:clamp(28px,3vw,42px);
  margin-bottom:16px;
}
.inquiry-form{
  max-width:560px;
  margin-top:20px;
}
.form-grid{
  gap:12px 16px;
}
.inquiry-form label{
  margin-bottom:12px;
  font-size:10px;
  letter-spacing:.045em;
}
.inquiry-form input,.inquiry-form select,.inquiry-form textarea{
  margin-top:5px;
  padding:8px 10px;
  font-size:13px;
}
.inquiry-form input,.inquiry-form select{
  height:38px;
}
.inquiry-form textarea{
  min-height:78px;
}
.form-submit{
  min-height:36px;
  padding:0 14px;
  margin-top:2px;
}

@media(max-width:820px){
  .sticky-inquiry{
    background:var(--orange); /* mobile stays a visible fixed action bar */
    color:var(--black);
  }
  .contact-light{
    padding-top:42px;
    padding-bottom:44px;
  }
  .contact-light h2{font-size:30px}
  .inquiry-form{max-width:none;margin-top:18px}
  .inquiry-form textarea{min-height:72px}
}


/* V12.19 — compact mobile burger navigation */
.menu-toggle{display:none}

@media(max-width:820px){
  .topbar{
    width:100%;
    min-height:64px;
    grid-template-columns:auto auto;
    grid-template-rows:1fr;
    justify-content:space-between;
    gap:12px;
    padding:9px 16px;
  }
  .brand{justify-self:start}
  .brand>img:first-child{width:34px;height:28px}
  .brand .brand-wordmark{width:102px}

  .menu-toggle{
    display:flex;
    width:44px;
    height:44px;
    padding:10px;
    border:0;
    background:transparent;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
    justify-self:end;
    color:var(--white);
  }
  .menu-toggle span{
    display:block;
    width:24px;
    height:2px;
    background:currentColor;
    transition:transform .18s ease,opacity .18s ease,color .18s ease;
  }
  .menu-toggle:hover,.menu-toggle:focus-visible{color:var(--orange)}
  .menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-toggle.open span:nth-child(2){opacity:0}
  .menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .topbar nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    width:100%;
    display:none;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    overflow:visible;
    padding:6px 16px 12px;
    background:rgba(17,17,17,.99);
    border-top:1px solid var(--line-dark);
    border-bottom:1px solid var(--line-dark);
    font-size:11px;
    letter-spacing:.07em;
    box-shadow:0 12px 22px rgba(0,0,0,.25);
  }
  .topbar nav.open{display:flex}
  .topbar nav a{
    display:block;
    width:100%;
    padding:13px 2px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .topbar nav a:last-child{border-bottom:0}
  .topbar nav a:hover,.topbar nav a:focus-visible,.topbar nav a.active{color:var(--orange)}

  /* The inquiry CTA remains fixed at the bottom on mobile. */
  .sticky-inquiry{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:70;
    width:auto;
    height:58px;
    background:var(--orange);
    color:var(--black);
  }
}


/* V12.20 — light visual pause between header and homepage pathways */
.welcome-strip{
  width:100%;
  min-height:112px;
  display:flex;
  align-items:center;
  background:var(--paper);
  color:var(--black);
}
.welcome-strip-inner{
  width:min(var(--frame),calc(100% - 64px));
  margin:0 auto;
  padding:0 26px;
  font-family:'Montserrat',Arial,sans-serif;
  font-size:11px;
  font-weight:900;
  line-height:1.4;
  letter-spacing:.08em;
}
@media(max-width:820px){
  .welcome-strip{min-height:88px}
  .welcome-strip-inner{
    width:100%;
    padding:0 16px;
  }
}

/* V12.22 — desktop navigation grouped with the inquiry CTA */
@media(min-width:821px){
  .topbar{
    grid-template-columns:auto 1fr auto;
  }
  .topbar nav{
    justify-self:end;
    justify-content:flex-end;
  }
}

/* V12.23 — welcome strip: more air, aligned with the first pathway headline */
.welcome-strip{
  min-height:144px;
}
.welcome-strip-inner{
  padding-left:44px;
  padding-right:44px;
  letter-spacing:.015em;
}
@media(max-width:820px){
  .welcome-strip{
    min-height:100px;
  }
  .welcome-strip-inner{
    padding-left:22px;
    padding-right:22px;
    letter-spacing:.015em;
  }
}

/* V12.24 — full-width black header band; navigation content stays on the site grid */
.topbar{
  isolation:isolate;
}
.topbar::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  bottom:-1px;
  left:calc(50% - 50vw);
  right:calc(50% - 50vw);
  background:rgba(17,17,17,.97);
  border-bottom:1px solid var(--line-dark);
  pointer-events:none;
}

/* V12.25 — seamless welcome marquee, reliable mobile/tablet header, compact mobile CTA */
.welcome-strip{
  overflow:hidden;
}
.welcome-marquee{
  width:100vw;
  display:flex;
  overflow:hidden;
  white-space:nowrap;
  font-family:'Montserrat',Arial,sans-serif;
  font-size:11px;
  font-weight:900;
  line-height:1.4;
  letter-spacing:.015em;
}
.welcome-track{
  display:flex;
  flex:0 0 auto;
  min-width:max-content;
  align-items:center;
  animation:welcome-marquee 28s linear infinite;
}
.welcome-track span{
  display:inline-flex;
  align-items:center;
  gap:1.35em;
  padding-right:1.35em;
}
.welcome-track b{font-weight:900}
@keyframes welcome-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-100%)}
}
@media(prefers-reduced-motion:reduce){
  .welcome-track{animation:none}
  .welcome-track:nth-child(2){display:none}
}

/* Mobile CTA retained; header positioning is defined once at the end of this file. */
@media(max-width:820px){
  body{padding-bottom:74px;}
  .sticky-inquiry{
    left:50%;
    right:auto;
    bottom:14px;
    width:132px;
    height:44px;
    min-height:44px;
    transform:translateX(-50%);
    border:1px solid rgba(17,17,17,.22);
    box-shadow:0 5px 16px rgba(0,0,0,.2);
  }
  .welcome-marquee{font-size:10px;}
}


/* V12.26 — true seamless marquee: one moving track with two identical halves */
.welcome-marquee{
  width:100%;
  overflow:hidden;
}
.welcome-track{
  display:flex;
  width:max-content;
  min-width:0;
  align-items:center;
  animation:welcome-marquee-seamless 60s linear infinite;
  will-change:transform;
}
.welcome-set{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  white-space:nowrap;
}
.welcome-set span{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  gap:1.35em;
  padding-right:1.35em;
}
@keyframes welcome-marquee-seamless{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@media(prefers-reduced-motion:reduce){
  .welcome-track{animation:none!important;transform:none!important}
  .welcome-set:nth-child(2){display:none}
}


/* V12.27 — Gemeinsam spielen: monochrome image + dedicated dark description */
.workshop-section .photo img{filter:grayscale(100%);}
.workshop-details{
  background:var(--black);
  color:var(--white);
  padding:54px 52px 58px;
  box-shadow:0 0 0 100vmax var(--black);
  clip-path:inset(0 -100vmax);
}
.workshop-details>div{max-width:780px;}
.workshop-details p{
  margin:0 0 14px;
  font-family:'Montserrat',Arial,sans-serif;
  font-size:var(--type-body);
  line-height:1.68;
}
.workshop-details p:last-child{margin-bottom:0;}
@media(max-width:820px){
  .workshop-details{padding:40px 22px 44px;box-shadow:none;clip-path:none;}
}

/* V12.28 — Gemeinsam spielen description aligned to the site frame */
.workshop-details{
  width:min(var(--frame),calc(100% - 64px));
  margin-left:auto;
  margin-right:auto;
}
.workshop-details>div{
  max-width:780px;
  margin-left:0;
  margin-right:auto;
}
@media(max-width:820px){
  .workshop-details{
    width:100%;
    margin-left:0;
    margin-right:0;
  }
}


/* V12.29 requested cleanup: copy rhythm, image edge, live label, Instagram teaser */

/* Homepage: treat each two-line description as one visual text unit. */
.path-card .path-subtitle,
.path-card .path-subtitle + p{
  font-size:var(--type-body)!important;
  font-weight:500!important;
  line-height:1.55!important;
  color:#d4d4d4!important;
}
.path-card .path-subtitle{margin:0 0 2px!important;}
.path-card .path-subtitle + p{margin:0 0 22px!important;}

/* Live-section descriptor should read at the same standard small-label size sitewide. */
.live > .label{
  font-size:11px;
  line-height:1.45;
}

/* Instagram teaser directly belongs to the Instagram action. */
.instagram-group{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-width:110px;
}
.instagram-teaser{
  margin:0;
  color:#aaa;
  font-family:'Montserrat',Arial,sans-serif;
  font-size:10px;
  font-weight:500;
  line-height:1.35;
  letter-spacing:.035em;
  text-transform:none;
  white-space:nowrap;
}
.instagram-group .footer-channel{min-width:92px;}

/* Handpan finden: eliminate fractional/background sliver at the image's right edge. */
#beratung .photo.portrait-34{
  overflow:hidden;
  background:var(--black);
}
#beratung .photo.portrait-34 img{
  display:block;
  width:calc(100% + 2px);
  max-width:none;
  height:100%;
  margin-right:-1px;
  object-fit:cover;
  object-position:center;
}

/* Handpan finden mobile image edge */
@media(max-width:820px){
  #beratung .photo.portrait-34 img{
    width:calc(100% + 2px);
    height:auto;
    margin-right:-1px;
    object-fit:cover;
  }
  footer{align-items:flex-end;}
}


/* V12.33 — canonical header component.
   New class names intentionally isolate the header from legacy .topbar rules. */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  width:100%;
  min-height:82px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:28px;
  margin:0;
  padding:0 max(26px, calc((100vw - var(--frame))/2 + 26px));
  background:#111111;
  border-bottom:1px solid var(--line-dark);
  isolation:isolate;
}
.site-brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  white-space:nowrap;
  justify-self:start;
}
.site-brand>img:first-child{width:46px;height:39px;object-fit:contain}
.site-brand .brand-wordmark{width:132px;height:auto;object-fit:contain}
.site-brand img{transition:filter .18s ease}
.site-brand:hover img,.site-brand:focus-visible img{
  filter:brightness(0) saturate(100%) invert(75%) sepia(71%) saturate(570%) hue-rotate(334deg) brightness(102%) contrast(93%);
}
.site-header nav{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  justify-self:end;
  gap:22px;
  white-space:nowrap;
  font-family:'Montserrat',Arial,sans-serif;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.site-header nav a:hover,.site-header nav a:focus-visible,.site-header nav a.active{color:var(--orange)}
.header-inquiry{
  position:static;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  justify-self:end;
  width:112px;
  height:44px;
  flex:0 0 112px;
  background:var(--white);
  color:var(--black);
  font-family:'Montserrat',Arial,sans-serif;
  font-size:11px;
  font-weight:700;
  line-height:1;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-align:center;
  transition:background-color .18s ease,color .18s ease;
}
.header-inquiry:hover,.header-inquiry:focus-visible{background:var(--orange);color:var(--black)}
.site-menu-toggle{display:none}
.site-header-spacer{display:none;height:0}

@media(max-width:1180px){
  /* Fixed is deliberate here: the navigation remains reachable at every scroll position.
     The dedicated spacer reserves exactly the header's height in the document flow. */
  .site-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    width:100%;
    height:82px;
    min-height:82px;
    padding:0 26px;
    transform:none;
    background:#111111;
    border-bottom:1px solid var(--line-dark);
  }
  .site-header-spacer{display:block;height:82px;min-height:82px;background:#111111}
  .site-brand .brand-wordmark{width:116px}
  .site-header nav{font-size:11px;gap:15px;letter-spacing:.05em}
  .header-inquiry{width:102px;flex-basis:102px}
}

@media(max-width:820px){
  .site-header{
    height:64px;
    min-height:64px;
    padding:9px 16px;
    grid-template-columns:auto auto;
    grid-template-rows:1fr;
    justify-content:space-between;
    gap:12px;
  }
  .site-header-spacer{height:64px;min-height:64px}
  .site-brand>img:first-child{width:34px;height:28px}
  .site-brand .brand-wordmark{width:102px}
  .site-menu-toggle{
    display:flex;
    width:44px;
    height:44px;
    padding:10px;
    border:0;
    background:transparent;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
    justify-self:end;
    color:var(--white);
  }
  .site-menu-toggle span{
    display:block;
    width:24px;
    height:2px;
    background:currentColor;
    transition:transform .18s ease,opacity .18s ease,color .18s ease;
  }
  .site-menu-toggle:hover,.site-menu-toggle:focus-visible{color:var(--orange)}
  .site-menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .site-menu-toggle.open span:nth-child(2){opacity:0}
  .site-menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .site-header nav{
    position:absolute;
    top:64px;
    left:0;
    right:0;
    width:100%;
    display:none;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    overflow:visible;
    padding:6px 16px 12px;
    background:#111111;
    border-top:1px solid var(--line-dark);
    border-bottom:1px solid var(--line-dark);
    font-size:11px;
    letter-spacing:.07em;
    box-shadow:0 12px 22px rgba(0,0,0,.25);
    z-index:1001;
  }
  .site-header nav.open{display:flex}
  .site-header nav a{display:block;width:100%;padding:13px 2px;border-bottom:1px solid rgba(255,255,255,.08)}
  .site-header nav a:last-child{border-bottom:0}
  .header-inquiry{
    position:fixed;
    left:50%;
    right:auto;
    bottom:14px;
    z-index:1002;
    width:132px;
    height:44px;
    min-height:44px;
    transform:translateX(-50%);
    background:var(--orange);
    color:var(--black);
    border:1px solid rgba(17,17,17,.22);
    box-shadow:0 5px 16px rgba(0,0,0,.2);
  }
}