/* BK Studio — oprydning og effekter (lag ovenpå style.css, v2.css og modern.css).
   Samme identitet: blobben, den inverterende header, topografi-linjerne, blækstregerne og de fede versaler.
   Mere overskueligt: headeren går af vejen, når man scroller ned, og processen er tre kort side om side. Nye effekter (clean.js): kort vipper med lysrefleks
   efter musen, og processens trin bindes sammen af en streg, der tegner sig ud. */

/* ---------- headeren: væk når man scroller ned, tilbage når man scroller op (så den aldrig ligger oven i overskrifterne) ---------- */
html body header.site-header{transition:transform .5s var(--ease-out),opacity .35s!important;}
html body.hdr-hide:not(.menu-open):not(.drop-open) header.site-header{transform:translateY(-120%)!important;}

/* ---------- ens luft mellem sektionerne ---------- */
:root{--sp-c:clamp(84px,10vw,150px);}
.proc,.tm,.ct,.faq{padding-top:var(--sp-c)!important;padding-bottom:var(--sp-c)!important;}
.section-head{align-items:end;}

/* kort, der vipper efter musen med en lysrefleks (clean.js sætter --rx, --ry, --gx, --gy) */
.tilt{--rx:0deg;--ry:0deg;--gx:50%;--gy:50%;position:relative;}
.tilt.tilting{transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0)!important;transition:transform .12s linear,box-shadow .4s!important;box-shadow:0 30px 60px -30px rgba(20,20,20,.45);}
.tilt::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,255,255,.32),rgba(255,255,255,0) 46%);mix-blend-mode:soft-light;}
.tilt.tilting::after{opacity:1;}
.tcard.tilt::after{border-radius:inherit;}

/* ---------- processen: tre kort side om side, bundet sammen af en streg ---------- */
.proc-c .proc-rows{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,26px);border:0!important;padding-top:34px;}
.proc-c .proc-rows::before{content:'';position:absolute;left:0;right:0;top:12px;height:2px;background:var(--black);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.6s cubic-bezier(.65,0,.2,1);}
.proc-c .proc-rows.drawn::before{transform:scaleX(1);}
.proc-c .pr{position:relative;display:flex!important;flex-direction:column;gap:14px;padding:clamp(22px,2.4vw,34px)!important;border:1.5px solid var(--black)!important;border-radius:var(--r3,18px);background:var(--white);min-height:clamp(220px,22vw,300px);transition:background .45s,color .45s,transform .6s var(--ease-out)!important;}
.proc-c .pr::before{content:'';position:absolute;left:clamp(22px,2.4vw,34px);top:-29px;width:12px;height:12px;border-radius:50%;background:var(--black);transform:scale(0);transition:transform .5s cubic-bezier(.2,1.6,.4,1);}
.proc-c .proc-rows.drawn .pr::before{transform:scale(1);}
.proc-c .proc-rows.drawn .pr:nth-child(1)::before{transition-delay:.1s}
.proc-c .proc-rows.drawn .pr:nth-child(2)::before{transition-delay:.6s}
.proc-c .proc-rows.drawn .pr:nth-child(3)::before{transition-delay:1.1s}
.proc-c .pr h3{font-size:clamp(22px,2.2vw,34px)!important;}
.proc-c .pr p{max-width:none;margin-top:auto;font-size:15px;}
.proc-c .pr-n{align-self:flex-start;}
.proc-c .pr:hover{padding-left:clamp(22px,2.4vw,34px)!important;transform:translateY(-6px);background:var(--black);color:var(--white);}   /* sort kort med hvid tekst (før blev teksten hvid på lys baggrund og forsvandt) */
.proc-c .pr:hover h3,.proc-c .pr:hover p{color:var(--white);}
.proc-c .pr:hover p{color:var(--grey-100,#d9d9d6);}
@media(max-width:820px){
  .proc-c .proc-rows{grid-template-columns:1fr;padding-top:0;padding-left:30px;}
  .proc-c .proc-rows::before{left:8px;right:auto;top:0;bottom:0;width:2px;height:auto;transform:scaleY(0);transform-origin:50% 0;}
  .proc-c .proc-rows.drawn::before{transform:scaleY(1);}
  .proc-c .pr{min-height:0;}
  .proc-c .pr::before{left:-28px;top:28px;}
}

@media(prefers-reduced-motion:reduce){
  .proc-c .proc-rows::before,.proc-c .pr::before{transform:none!important;transition:none!important;}
}

/* ---------- åbningen: lidt længere ophold i det sorte rum (3D-logoet og billederne), før siden stiger op ---------- */
.thru-spacer{margin-bottom:-130vh!important;}
@media(max-width:820px){.thru-spacer{margin-bottom:-115vh!important;}}

/* ---------- kontakt på forsiden: samme opsætning som /kontakt ---------- */
html body .home-contact .booking-intro h2{font-size:clamp(36px,5.4vw,76px)!important;line-height:1.08!important;margin-bottom:26px!important;max-width:none;}
.home-contact{padding-top:var(--sp-c)!important;padding-bottom:var(--sp-c)!important;}

/* ---------- åbningen: ingen scroll, før logoet har vist, hvad der er bag det (thru.js) ---------- */
html.thru-lock,html.thru-lock body{overflow:hidden!important;overscroll-behavior:none;}

/* ---------- tal-sektionen + karussellen på én fælles sort flade med det levende BK-monogram bagved (clean.js) ---------- */
.flow-wrap{position:relative;background:var(--black);isolation:isolate;}
.mono-field{position:sticky;top:0;width:100%;height:100vh;height:100lvh;margin-bottom:-100vh;margin-bottom:-100lvh;display:block;pointer-events:none;z-index:0;}   /* skærmhøjt lærred, der står stille, mens fladen scroller forbi */
.flow-wrap>.w3d{position:relative;z-index:1;background:transparent!important;}

/* ---------- "Nyopstartet": tal i stedet for showreel (tallene tæller op, når de kommer frem; clean.js) ---------- */
.nums{color:var(--black);background:var(--paper);padding:clamp(24px,3vw,48px) var(--gut) var(--sp-c);}
.stmt:has(+ .nums){padding-bottom:clamp(40px,5vw,72px)!important;}
.nums-head{max-width:760px;}
.nums-eyebrow{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-500);margin-bottom:18px;}
.nums h2{font-size:clamp(40px,6.4vw,96px);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;line-height:1;margin-bottom:22px;}
.nums-lead{max-width:46ch;font-size:clamp(15px,1.2vw,18px);line-height:1.6;color:var(--ink-soft);}
.nums-row{list-style:none;margin:clamp(40px,6vw,84px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);}
.nums-row li{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:clamp(190px,18vw,260px);padding:clamp(20px,2.2vw,30px);
  border:1.5px solid var(--black);border-radius:var(--r3,18px);background:var(--white);
  transition:background .45s,color .45s,transform .6s var(--ease-out),border-color .45s;}
.nums-row li:hover{background:var(--black);color:var(--white);transform:translateY(-6px);}
.nums-row li:hover span{color:var(--grey-300);}
.nums-row b{display:block;font-size:clamp(56px,7.4vw,120px);font-weight:800;letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums;text-transform:uppercase;}
.nums-row span{display:block;margin-top:18px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-500);transition:color .45s;}
.nums-cta{margin-top:clamp(36px,5vw,64px);}
@media(max-width:820px){.nums-row li{min-height:150px;}}
@media(max-width:560px){.nums-row{grid-template-columns:minmax(0,1fr);}.nums-row li{min-height:0;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:16px;}.nums-row span{margin-top:0;text-align:right;}}

/* ---------- tal og små etiketter i brandets skrift (Inter) i stedet for maskinskrift ---------- */
:root{--mono:'Inter',sans-serif;}
.hdr-status,.foot-meta,.m-idx,.sv-num,.footer-heading{font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:.08em;}

/* ---------- footer: status og lokal tid står over det store BK-logo, uden streg under ---------- */

/* ---------- numrene på ydelseskortene i samme stil som processens numre (pille med ramme) ---------- */
html body .sv-num{left:14px;top:14px;padding:5px 11px;font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:.12em;line-height:1;
  color:var(--black);background:var(--white);border:1.5px solid var(--black);border-radius:999px;-webkit-backdrop-filter:none;backdrop-filter:none;}

/* ---------- teamet på samme lyse flade som resten, så FAQ og omgivelserne hænger sammen ---------- */
.tm{background:var(--paper)!important;}
.faq{border-top:0!important;}

/* ---------- menuen (computer), fx.js: fylder hele skærmen. Til venstre et stort BK-logo, der står stille og bliver et vindue med et
   billede, når man peger på et punkt. Til højre en række pr. punkt med nummer, stort ord og pil. Nederst sociale medier og e-mail. ---------- */
html body .menu-drop{top:0;right:0;bottom:0;left:0;width:auto;height:100vh;height:100dvh;border-radius:0;box-shadow:none;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:clamp(32px,5vw,96px);
  padding:clamp(96px,12vh,130px) min(5.5vw,84px) clamp(28px,5vh,48px);text-align:left;background:#141414;color:#f7f7f5;mix-blend-mode:normal;overflow:hidden;
  clip-path:inset(0 0 100% 0);transition:clip-path .6s cubic-bezier(.7,0,.2,1),visibility 0s .6s;}
html body .menu-drop.open{clip-path:inset(0 0 0 0);transition:clip-path .65s cubic-bezier(.7,0,.2,1),visibility 0s;}
body.drop-open{overflow:hidden;}
/* logoet: stort og stille; billedet toner frem i logoformen */
.drop-art{position:relative;justify-self:center;width:min(100%,calc((100vh - 220px) * 1.159));aspect-ratio:839.7/724.3;}
.drop-art span{position:absolute;inset:0;-webkit-mask:url(/images/logo/bk-blob.svg) no-repeat center/contain;mask:url(/images/logo/bk-blob.svg) no-repeat center/contain;}
.drop-art .da-fill{background:#f7f7f5;opacity:0;transition:opacity .5s .15s;}
.menu-drop.open .drop-art .da-fill{opacity:1;}
.drop-art .da-img{background:#141414 center/cover no-repeat;opacity:0;transition:opacity .4s;}
.drop-art .da-img.on{opacity:1;}
/* rækkerne */
.drop-main{display:flex;flex-direction:column;justify-content:center;align-self:stretch;max-width:660px;}
html body .menu-drop ul{display:block;margin:0 0 clamp(24px,4vh,40px);gap:0;align-items:stretch;}
html body .menu-drop li{border-bottom:1px solid rgba(247,247,245,.14);}
html body .menu-drop li:first-child{border-top:1px solid rgba(247,247,245,.14);}
.menu-drop .drop-row{display:flex!important;align-items:center;gap:22px;padding:clamp(14px,2.3vh,24px) 4px;position:relative;}
.menu-drop .dr-n{flex:none;width:26px;font-size:12px;font-weight:600;letter-spacing:.1em;color:rgba(247,247,245,.4);font-variant-numeric:tabular-nums;transition:color .3s;}
html body .menu-drop .drop-lt,html body .menu-drop .drop-li-book .drop-lt{height:max(22px,min(4.4vh,2.4vw,44px))!important;width:auto;max-width:none!important;flex:none;filter:brightness(0) invert(1)!important;
  transform:none!important;transition:transform .45s cubic-bezier(.2,.8,.2,1)!important;}
.menu-drop .dr-arrow{margin-left:auto;font-size:clamp(22px,3vh,30px);line-height:1;opacity:0;transform:translateX(-16px);transition:opacity .3s,transform .45s cubic-bezier(.2,.8,.2,1);}
.menu-drop .drop-row:hover .dr-n,.menu-drop .drop-row:focus-visible .dr-n{color:#f7f7f5;}
html body .menu-drop .drop-row:hover .drop-lt,html body .menu-drop .drop-row:focus-visible .drop-lt{transform:translateX(12px)!important;}
.menu-drop .drop-row:hover .dr-arrow,.menu-drop .drop-row:focus-visible .dr-arrow{opacity:1;transform:none;}
.menu-drop .drop-row:focus-visible{outline:2px solid #f7f7f5;outline-offset:2px;border-radius:8px;}
/* bunden: sociale medier og e-mail */
.drop-social{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
  opacity:0;transform:translateY(-12px);transition:opacity .3s,transform .45s var(--ease-out);}
.menu-drop.open .drop-social{opacity:1;transform:none;transition-delay:.35s;}
.drop-social .ds-row{display:flex;flex-wrap:wrap;gap:10px;}
.drop-social .ds{display:inline-flex!important;align-items:center;gap:9px;padding:10px 18px 10px 12px;border:1.5px solid rgba(247,247,245,.3);border-radius:999px;
  font-size:13px;font-weight:600;letter-spacing:.02em;color:#f7f7f5;transition:background .25s,color .25s,border-color .25s;}
.drop-social .ds svg{width:20px;height:20px;flex:none;}
.drop-social .ds:hover{background:#f7f7f5;color:#141414;border-color:#f7f7f5;}
.drop-social .ds-mail{font-size:13px;color:rgba(247,247,245,.65);background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;transition:background-size .4s,color .25s;}
.drop-social .ds-mail:hover{color:#f7f7f5;background-size:100% 1px;}
@media(prefers-reduced-motion:reduce){html body .menu-drop,html body .menu-drop.open,.drop-art span,.drop-social{transition:none;}}

/* ---------- "Sådan arbejder vi": ingen streg med prikker over kortene ---------- */
.proc-c .proc-rows{padding-top:0!important;}
.proc-c .proc-rows::before,.proc-c .pr::before{display:none!important;}
@media(max-width:820px){.proc-c .proc-rows{padding-left:0!important;}}
.menu-drop.open li:nth-child(5){transition-delay:.23s}

/* ---------- roligere overskrifter: én fælles størrelse til sektionernes overskrifter, og de største (Arkiv, karussellen) er gjort mindre ---------- */
:root{--h2:clamp(32px,3.8vw,56px);}
html body .section-head h2,html body .nums h2,html body .booking-intro h1,html body .booking-intro h2,html body .home-contact .booking-intro h2,
html body .about-bk-copy h2,html body .mh-h,html body .burst-copy h2,html body .burst h2{font-size:var(--h2)!important;line-height:1.04!important;}
html body .nums h2{margin-bottom:18px;}
html body .ak-title{font-size:clamp(48px,7vw,112px);}

/* ---------- 3D-logoet på rejsen gennem forsiden (logo3d.min.js): ses kun på de sorte flader, bag indholdet ---------- */
.bk3d-layer{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0;}
.strip,footer{position:relative;}
.strip>*:not(.bk3d-layer),footer>*:not(.bk3d-layer){position:relative;z-index:1;}
/* i footeren lander 3D-logoet midt i det store logo-felt og bliver til det flade logo (logo3d.min.js flytter det til midten); så glider
   "STUDIO" ind helt fra højre, rammer logoet og skubber det med ud på sin plads til venstre (logo3d.min.js) */
html.bk3d-on footer .foot-mega .fm-blob{position:relative;z-index:2;opacity:0;transition:none;}
html.bk3d-on footer.fm-landed .foot-mega .fm-blob{opacity:1;}
/* "STUDIO" glider ind fra højre og skubber logoet ud til venstre (logo3d.min.js styrer bevægelsen) */
html.bk3d-on footer{overflow-x:clip;}
html.bk3d-on footer .foot-mega .fm-word{position:relative;z-index:1;opacity:0;filter:brightness(0) invert(1);}
/* laget ligger lidt bagud (mellem de bagerste og forreste kort); skaleret tilbage, så logoet har sin rigtige størrelse og plads,
   og 80px større end sektionen hele vejen rundt, så logoet aldrig skæres af ved sektionens kant (logo3d.js tegner med samme margen) */
.bk3d-ring{inset:-80px;width:auto;height:auto;transform-origin:50% calc(var(--rc,max(47vh,330px)) + 80px);transform:translateZ(-30px) scale(1.01765);}
@media(max-width:900px){.bk3d-ring{transform-origin:50% calc(var(--rc,max(46vh,330px)) + 80px);}}
html body .w3d-title{transform:translate3d(0,-50%,12px);}   /* titlen ligger altid foran 3D-logoet */

/* ---------- mindre luft mellem sektionerne (før ca. 140 px i top og bund = næsten 290 px mellem to sektioner) ---------- */
:root{--sp:clamp(56px,7vw,104px);--sp-c:clamp(56px,7vw,104px);}
/* ydelserne: kortene kommer ind fra højre over kortere scroll, så der ikke er død scroll bagefter */
html body .pns{height:215vh;}
@media(max-width:1180px){html body .pns{height:225vh;}}
@media(prefers-reduced-motion:reduce){html body .pns{height:auto;}}
/* teamet: ingen fast fuld skærmhøjde (gav tomrum) */
html body .tm{min-height:0;}

/* ---------- footer: status og lokal tid over stregen; © og links under stregen; BK STUDIO stort helt nede i bunden,
   så kun den øverste halvdel ses (modern.js sætter den negative bundmargen ud fra logoets højde) ---------- */
html body footer{display:flex;flex-direction:column;padding-bottom:0;}
html body .footer-top{order:1;border-bottom:0;padding-bottom:0;margin-bottom:0;}
html body .foot-meta{order:2;margin:clamp(30px,4vw,52px) 0 0!important;padding-bottom:clamp(18px,2vw,24px)!important;border-bottom:1px solid var(--line-dark)!important;}
html body .footer-bottom{order:3;margin-top:clamp(16px,1.8vw,22px);}
html body .foot-mega{order:4;margin:clamp(28px,4vw,56px) calc(-1 * min(5.5vw,84px)) 0;gap:clamp(12px,1.8vw,32px);padding:0 min(2.4vw,36px);}

/* ---------- forsiden mens den henter: kun den pulserende prik med BK-logoet og procent-tallet; menu og tekst kommer, når alt er hentet ---------- */
.thru-pct{position:fixed;z-index:600;top:clamp(22px,3vw,34px);right:min(5.5vw,84px);font-size:13px;font-weight:600;letter-spacing:.14em;font-variant-numeric:tabular-nums;
  color:var(--black);pointer-events:none;transition:opacity .5s;}   /* procent-tallet oppe i højre hjørne, så logoet aldrig dækker det */
.thru-pct.done{opacity:0;}
html .site-header,html .thru-title,html .thru-scroll{transition:opacity .8s ease;}
html.thru-loading .site-header,html.thru-loading .thru-title,html.thru-loading .thru-scroll{opacity:0!important;}

/* arkivets billedvisning: pilene er hinandens spejlbillede og står ud for billedets midte (ikke midten af billede + billedtekst) */
html body .lb-next{border-radius:14px 20px 15px 22px / 22px 15px 20px 14px;}
@media(min-width:701px){html body .lb-nav{margin-bottom:34px;}}

/* holdets kort: rækken står stille, mens musen er over et kort; kortet løfter sig roligt, og billedet zoomer let ind (ingen vip, intet hop) */
html body .tm-grid:has(.tcard:hover),html body .tm-grid:has(.tcard:hover) .tm-img img{animation-play-state:paused;}
html body .tm:has(.tcard:hover) .mh-dots i{animation-play-state:paused;}
html body .tm .tcard{transform:none;transition:transform .6s var(--ease-out);}
html body .tm .tcard:hover{transform:translateY(-6px);}
html body .tm .tm-img{overflow:hidden;}
html body .tm .tm-img img{transition:filter .6s var(--ease-out),scale .8s var(--ease-out);}
html body .tm .tcard:hover .tm-img img{scale:1.05;}